Messenger — по своей сути, это продолжение разработки моей игры Checkers Online. В данный момент сама игра еще не готова, но уже есть Messenger — многопользовательский чат с элементами социальной сети: имеется профиль пользователя, друзья, поиск пользователей, и т.п. При разработке я вдохновлялся Telegram, и в некотором роде получился его простенький клон. Как самостоятельное приложение, вероятно, он смысла иметь не будет, но будет основой онлайн платформы CheckerWars.
Технически это намного более продвинутое приложение. Если Checkers Online создавался как упрощенный прототип, то главная цель при разработке Messenger — создать приложение максимально приближенное к реальному продукту. Было сделано множество мелочей, без которых может обойтись демо, но невозможен продукт. Однако, приложение все еще пока находится в стадии разработки.
Основные моменты и отличия от CheckerWars:
- Сервер полностью переписан с Express.js на Nest.js, и соответственно, Typescript
- На сервере добавлено множество проверок на права доступа, с целью предотвращения несанкционированного доступа (в предыдущей версии большого внимания этому не уделялось)
- Сильно улучшена обработка ошибок, различных состояний, и т.п.
- Клиент серьезно переписан. Значительно изменена архитектура, расположение модулей
- Идет работа по переводу всего фронтенда на Typescript
- Принято решение полностью отказаться от Quasar framework — значительная часть страниц, компонентов, уже полностью переписана на чистом Vue.js.
- Добавлено множество функций, мелочей, без которых невозможно настоящее приложение
Если вам интересны тонкости технической реализации, больше информации вы найдете здесь:
Реализованные функции
Регистрация:
- Подтверждение почты
- Упрощенная регистрация
- Изменение пароля
Авторизация и аутентификация:
- JWT
- Refresh keys
- Поддержка нескольких устройств для аккаунта
- Список авторизованных устройств
- Роли пользователей
Профиль пользователя:
- Подписки и друзья
- Поиск по друзьям и подписчикам
- аватарки (загрузка, кадрирование)
- Список пользователей
- Поиск по пользователям
- Список друзей
- Поиск по списку друзей
Информация о пользователе:
- Имя
- Количество друзей, подписок, подписчиков
- Время последнего захода
- Роль пользователя
- Имя, фамилия
- Дата рождения
- Пол
- Страна, город
- О себе
Списки пользователей, друзей, групп и каналов
Мессенджер:
- Список контактов
- Превью последнего сообщения в списке контактов
- Создание группы, канала
- Подписка на группы, каналы
- Личный чат
- Блокировка пользователя
- Индикаторы онлайн, печатает, подключение
- Списки групп, каналов
- Всплывающие уведомления о сообщениях в других чатах
- Количество подписчиков в каналах, группах
Дополнительные уточнения:
- CRUD для всех необходимых вещей
- Функции модерации для роли ADMIN
- Боковое выдвижное меню (своя реализация)
- Всплывающее меню (своя реализация)
- Бесконечные списки пользователей, сообщений в чатах (своя реализация)
- Индикатор загрузки API (своя реализация)
- Обработка ошибок соединения с сервером
Ниже доступна демо версия мессенджера. Приложение является демонстрационной версией игрового чата, который будет использоваться в шашках онлайн CheckerWars.
Веб-приложение PWA:
Протестировано в Chrome и Firefox на Android. Для установки как приложение выберете в меню браузера «Добавить на гл. экран (Chrome)» или «На домашний экран (Firefox)»
Версия Android APK:
Обзор основных функций
Давайте наконец приступим к детальному обзору Messenger.
При первом заходе в приложение необходимо ввести свой логин и пароль:
Имеется возможность показать пароль.
Если пользователь еще не зарегистрирован, то внизу страницы есть кнопка Регистрация, которая ведет на соответствующую страницу:
Процесс регистрации состоит из двух этапов:
- Форма ввода имени пользователя (логин)
- Форма ввода пароля. Ввод пароля можно пропустить, тем самым создав временный аккаунт:
Такой подход позволит максимально упростить доступ для новых пользователей, тем самым повысив посещаемость сервиса. А в целях борьбы с злоупотреблениями временные аккаунты могут быть ограничены в некоторых правах, например можно запретить таким пользователями писать в чат, и т.п.
Все формы в приложении выполнены с использованием компонентов Quasar Framework и поддерживают валидацию вводимых данных.
Когда вход будет успешно выполнен, вы попадете на страницу со списком чатов:
Каждый пункт чата содержит следующие элементы:
- Аватар (пользователь, или группа, канал)
- Имя пользователя, или группы, канала
- Иконка для отметки типа чата (группа, канал)
- Имя пользователя, оставившего последнее сообщение в чате (или отметка «Вы»)
- Текст последнего сообщения
- Время последнего сообщения
Список чатов поддерживает «бесконечную прокрутку». Верстка полностью реализована на чистом Vue, без использования сторонних компонентов.
Процесс загрузки данных с API визуализируется при помощи затемнения и анимации в центре экрана:
В случае ошибки загрузки данных пользователю будет показано соответствующее уведомление с возможностью перезагрузить страницу:
Вся работа с API и сокетами на клиенте выполняется централизованно, с общей обработкой ошибок, уведомлениями, и т.п.
В правом нижнем углу поверх списка чатов отображается кнопка добавления нового чата, которая ведет на экран «Новое сообщение«:
В верхней части экрана есть две кнопки:
- Создать группу
- Создать канал
Ниже располагается список контактов, поделенный на три вкладки:
- Друзья
- Подписки
- Подписчики
Каждый пункт в списке содержит:
- Аватар пользователя
- Никнейм
- Имя, фамилию
- Кнопка перехода к диалогу с пользователем
Кроме того, в верхнем правом углу находится кнопка поиска по контактам, которая позволит быстро найти нужный контакт в списке, если он очень длинный.
Список контактов так же поддерживает бесконечную прокрутку.
В левом верхнем углу находится кнопка главного меню, при нажатии на которую откроется боковое меню приложения:
Здесь есть следующие пункты:
- Профиль пользователя
- Мои друзья
- Найти пользователя
- Найти группу, канал
- Создать группу
- Создать канал
- Сообщить об ошибке
- О программе
Профиль пользователя
Ниже показан профиль от лица владельца страницы:
Профиль пользователя содержит следующие элементы:
- Аватар
- Логин
- Кнопки: Друзья, Подписки, Подписчики
- Был в сети
- Роли пользователя
- Имя, фамилия
- Дата рождения
- Пол
- Страна, город
- О себе
- Аккаунт
Каждый из элементов профиля владельца страницы ведет на страницу, где можно изменить соответствующие данные.
Кнопки Друзья, Подписки, Подписчики ведут на страницу друзей (на соответствующую вкладку) которую рассмотрим немного позже.
Так же приведу вид профиля от лица гостя страницы:
Главное отличие — кнопка добавления в друзья (подписка), и кнопка отправки личного сообщения пользователю. Так же отсутствует возможность редактировать пункты профиля и нет ссылки на настройки аккаунта.
Подтверждение добавления пользователя в друзья:
Теперь рассмотрим каждый пункт отдельно.
- Аватар:
Что бы добавить аватар, нужно нажать либо на квадрат, либо на поле ниже «Выбрать аватар». После выбора подходящего фото, оно будет отображено в окне предварительного просмотра, где будет возможность обрезать изображение аватара:
При нажатии кнопки Сохранить происходит установка изображения в качестве аватара пользователя, а затем переадресация на страницу его профиля.
- Логин:
- Имя, фамилия:
- День рождения:
- Пол:
- Страна, город:
- О себе:
Настройки аккаунта
На этой странице собраны основные настройки пользовательского аккаунта:
На странице имеются следующие активные пункты:
- Email, а так же метка подтверждения почты
- Пароль
- Ваши устройства
- Выйти из аккаунта
А так же отображается основная информация о пользователе:
- Дата создания аккаунта
- Дата редактирования аккаунта
- Номер пользователя
- Email:
Если Email будет отредактирован, внизу появится уведомление, что на почту придет письмо со ссылкой активации (проверено, придет).
- Пароль:
Если активировать видимость пароля, форма изменится соответственно:
- Активные сессии:
В этом окне отображаются все активные сессии пользователя. В самом веху отображается текущая сессия. Если нужно завершить другую сессию, нужно нажать на крестик слева, и подтвердить во всплывающем подтверждении ее удаление:
Мои друзья
На этой странице находятся три вкладки со списками пользователей.
- Друзья:
- Подписки:
- Подписчики:
Все пользователи:
На этой странице находится полный список зарегистрированных и активных пользователей. Имеется возможность найти пользователя по логину, имени или фамилии. Кроме того, как и в других списках, реализована «бесконечная» прокрутка списка:
Список всех групп, каналов:
Здесь отображаются все активные группы и каналы. Есть «бесконечная прокрутка», а так же поиск:
Создать группу, канал:
Это по сути одна страница, представленная в меню как две отдельные, а тип создаваемого объекта определяется параметром страницы:
О программе:
Чаты
Группа — это чат, в который одновременно может писать множество пользователей:
На группу можно подписаться, или отписаться:
В архитектуре заложена возможность блокировки отдельных пользователей, а так же несколько режимов приватности. Но интерфейс для этого функционала на текущий момент не реализован. Из дополнительных особенностей можно отметить, что в этом типе чата отображаются аватары пользователей, а в чате отображаются метки о том, что тот или иной пользователь подписался на группу.
Канал — технически это тот же чат, но здесь не предполагается активная переписка множества пользователей. Канал рассчитан на публикацию сообщений одним или несколькими администраторами, а другие пользователи могут подписаться на канал и читать сообщения, но не писать. На бэкенде так же реализован набор функций для управления блокировками и приватностью, однако интерфейса пока нет.
Можно посмотреть информацию о канале (у группы тоже):
Здесь можно есть следующая информация:
- Тип в заголовке — канал, группа
- Аватар
- Название
- Описание
- Количество подписчиков
- Уровень приватности
- Владелец, есть ссылка на профиль владельца канала
- Дата создания
- ID
- В самом низу экрана имеется кнопка для перехода на страницу редактирования названия и описания:
Личный чат — предназначен для переписки строго между двумя пользователями:
Реализована возможность заблокировать своего собеседника:
А так же разблокировать:
Всплывающие уведомления:
Отображение статуса пользователя:
- Не в сети — отображается время последнего захода:
- Печатает:
Кроме того, в случае потери соединения с сервером будет отображаться индикатор установки соединения:
Когда сервер станет доступен, соединение автоматически установится, и отобразится актуальный статус пользователя.
Даже если чат с пользователем не открыт, у собеседника отобразится уведомление о новом сообщении в верху экрана:
Заключение
В этом обзоре мы постарались подробно рассмотреть все основные функции нашего приложения Messenger. Как самостоятельный проект, очередной мессенджер вряд ли кому то нужен, но все это — часть будущего онлайн платформы для игры в шашки CheckerWars. которую в будущем планируется опубликовать в магазины приложений, а так же создать полноценную браузерную версию для ПК, и других устройств.
Наша цель — сделать достойную версию всем известной игры, войти в топ 10 шашек онлайн в магазинах приложений, и в конечном итоге, получить успешный онлайн сервис.
Веб-приложение PWA:
Протестировано в Chrome и Firefox на Android. Для установки как приложение выберете в меню браузера «Добавить на гл. экран (Chrome)» или «На домашний экран (Firefox)»
Версия Android APK:
Если вам интересен наш проект, есть вопросы, замечания, или предложения — оставляйте комментарии или пишите на почту: checkerwars@mail.ru
Кроме того, автор проекта ищет работу. Мое резюме.