Задача данного челленджа – разработка веб-чата с возможностью поулчения/добавления сообщений и списка контактов.
Челлендж рассчитан на командную разработку (3-4 человека).
Каждый участник команды должен записывать задачи, которые он выполнял – это понадобится при составлении резюме.
Также нужно записывать все проблемы, с которыми вы столкнулись во время разработки и то, как эта проблема была решена. В конце этот список нужно скинуть наставнику.
При разбивке задач между командой нужно предусмотреть, чтобы каждый участник успел поработать с разными видами задач: проектирование, верстка, работа с компонентами и с редьюсерами.
Прежде чем начать разработку определите тимлида своей команды.
Тимлид должен склонировать данный репозиторий и выгрузить его копию на свой профиль гитхаб. После этого остальные участники команды делают форк его репозитория и клонируют его к себе.
После этого внимательно изучите все заготовленные редьюсеры и компоненты (или папки для компонентов).
Подумайте зачем нужен каждый файл и какой код будет в нём содержаться.
Обговорите это внутри своей команды. Каждый из вас должен одинаково видеть и понимать конечную цель разработки.
Обсудите сложности, которые могут возникнуть во время разработки и способы их решения.
В этом релизе поработайте над внешним видом приложения. В первую очередь тимлид должен сверстать общий макет с тремя блоками, чтобы другие участники затем могли приступить к верстке своих блоков внутри макета.
Примерный внешний вид чата должен быть таким:
Постарайтесь разбить компоненты на небольшие кусочки, чтобы в дальнейшем их легче было дорабатывать.
Когда внешний вид чата будет готов можно переходить к получению данных с сервера.
Вам доступны следующие ресурсы на сервере https://api.intocode.ru:8001/api:
| Ресурс | Назначение |
|---|---|
| GET /profile | Получить инфу о профиле |
| GET /contacts | Получить список контактов |
GET /messages/myId/contactId |
Получить список сообщений между myId и contactId |
| POST /messages | Добавление сообщения |
DELETE /messages/id |
Удалить сообщение по ID |
➡️ Данные с роута /profile необходимо сохранить в редьюсер application.
Особое значение имеет ключ _id из этого профиля. Он нужен для определения направления сообщения. Если ключ toUserId из объекта сообщения будет совпадать с ID профиля, то значит это входящее сообщения от fromUserId, если наоборот, то исходящее.
➡️ Не злоупотребляй ресурсом DELETE /messages, т.к. сервер общий для всех работ студентов.
➡️ Пользуйся программой Postman, чтобы проверить какие ключи с какими значениями приходят с сервера.
➡️ При добавлении сообщения через POST /messages отправляй на сервер в теле запроса все необходимые ключи для нового сообщения.
Разбейте задачи по редьюсерам, тогда каждый участник команды будет работать над отдельной фичей проекта. Редьюсер application имеет минимальный функционал, поэтому разработчик, который работает с этим редьюсером может взять на себя часть задач из другого редьюсера заранее обговорив это с другими участниками.
При клике на контакт должна происходить смена роутинга – в конец адреса будет добавляться id открытого контакта.
Часть приложения, которая отвечает за вывод сообщений, в свою очередь, должна отзываться на это изменение, запрашивать нужные данные у сервера и выводить полученный список сообщений.
Доработайте чат таким образом, чтобы:
- после открытия чата внизу страницы должна быть форма ввода сообщения;
- справа от формы должна быть иконка микрофона;
- если в поле ввода что-то ввели иконка должна поменяться на иконку отправки;
- если поле очистили должен вернуться микрофон;
- при нажатии на иконку отправки сообщение должно отправиться на сервер;
- после добавления сообщение должно появиться в конце списка сообщений;
- должен произойти автоматический скроллинг на последнее сообщение.
В данном релизе добавьте несколько фичей, которые позволят пользоваться чатом более удобно:
- при открытии сообщений должен происходить скроллинг по последнего сообщения;
- должна быть форма фильтрации контактов;
- должна быть форма фильтрации сообщений;
- блок анкеты справа должен скрываться/раскрываться по нажатию на соответствующую иконку.
Добавьте в чат анимации, которые сделают пользование чатом не только удобным, но и красивым.
Также необходимо добавить прелоадеры для всех запросов на сервер.
Сделайте код-ревью приложения:
- проверьте все ли функции работают как надо;
- уберите все ненужные запросы на сервер;
- консоль должен быть чистым;
- не должно быть повторяющихся участков кода;
- не должно быть неиспользуемого кода;
- соответствует ли код принятому стайл гайду?
- прописаны ли пропс-тайпы для всех компонентов?
Готовый проект должен быть выгружен на Хероку.