Web Chat - Website #78
Description
Нам нужно создать аналог чат-бота. Для этого тебе нужно будет, используя фреймворк Bootstrap создать сначала прямоугольную форму с вводом, а после популировать в ней сообщения. Интерактив пока не обязателен, можешь использовать предопределенные данные.
Pre-step:
- Create branch from MIG from the issue
Последовательно, что тебе надо сделать:
- Открыть /templates/web_chat.html - это файл с которым ты будешь работать. После запуска сервера его веб-версия будет доступна по адресу: http://127.0.0.1:8000/chat/
- /website/views.py -> chat_page - эндпоинт, который отдает тебе страницу
Что тебе надо сделать:
Используя документацию Bootstrap 4.6 (уже подключен, ничего делать не надо) https://getbootstrap.com/docs/4.6/getting-started/introduction/
- Ориентируйся на этот шаблон, можешь переиспользовать:
https://www.bootdey.com/snippets/view/messages-chat-widget - Убрать аватары
- Используй статичные данные для чата (пока что без какого-либо ретрива с бекенда). Создай JS функцию retrieve_messages(), которая эмулирует это и отдает тебе лист с messages-объектами следующего формата:
{
"chat_id": chat_id,
"message_time": message_time,
"message_id": message_id,
"is_response": is_response,
"username": username,
"message": message,
}
- Создай минимум 5 сообщений, которые бы отображались при загрузке страницы.
- При отправке сообщения из формы оно должно проходить валидацию. Создай функцию для валидации, задай минимальную длину сообщения в 5 символов и максимальную в 1000.
- Создай функцию для отправки сообщения, которая ничего не делает, но в которую передается ивент с кнопки.
- После нажатия на кнопку отправить сообщение, оно должно выводиться только в console.log
- Cтатичные данные из retrieve_messages выводить в чат при загрузке страницы через JS. Использовать onload-функционал и добавть child c помощью DOM.
При возникновении вопросов спрашивать. Последний пункт делать в самую последнюю очередь.