ignatinyutsin / hackathon-messenger

Messenger app

Сборка приложения

• Перейдите в директорию с приложением (если вы используете WSL, перейдите с WSL) с помощью команды cd
• Перейдите в директорию

cd docker/hackathon-messenger_instances/

• Создайте файл .env

cp .env.sample .env

• Отредактируйте файл .env под свои нужды
• Запустите сборку

chmod +x build
./build

Если вы запускаете любой скрипт в первый раз

chmod +x имя_скрипта

Например, перед первым запуском приложения, нужно выполнить

chmod +x start

Управлениe приложением

Запуск приложения

В папке docker/hackathon-messenger_instances/ запустите

./start

Остановка приложения

В папке docker/hackathon-messenger_instances/ запустите

./stop

Просмотреть логи бэкэнда

В папке docker/hackathon-messenger_instances/ запустите

./django_logs

После запуска

• Вы найдете приложение по адресу http://localhost:$BACKEND_PORT$, где BACKEND_PORT - значение переменной BACKEND_PORT в файле docker/hackathon-messenger_instances/.env
• Аналогично с FRONTEND

Управление бэкэндом

Консоль Django

Если вы хотите взаимодействовать непосредственно с файлом manage.py, запустите в папке backend/api/

./open_bash

После выполнения этой команды откроется терминал Linux, в котором в сможете взаимодействовать с manage.py Если вы желаете из него выйти, выполните

exit

Выполнение миграций

Запустите в папке backend/api/

./migrate

Выполнение миграций

Запустите в папке backend/api/

./makemigrations

Настройка

В файле frontend/src/app/restapi.ts измените значения на хост бэкэнда для веб сокета и для REST API. В случае, если вы запускаете локально, замените 98 в строках на порт BACKEND_PORT в docker/hackathon-messenger_instances/.env

hackathon-messenger's Issues

Issue For IgnatInyutsin (на попозже)

Интегрировать чат в фронтенд

Tasks for IgnatInyutsin #2

• Создать GET метод с поиском по имени каждого пользователя
• Создать POST метод для создания чата
• Создать PATCH метод для приглашения в чат пользователя

Tasks for Egor #1

• Подобрать удачный цвет для фона проекта (темная тема)
• Добавить компонент header в общий шаблон
• Написать адаптивное боковое меню в компоненте header
• Написать код для компонента для сворачивания-разворачивания меню
• Создать компонент chat-menu для чатов в меню, принимающих id чата из родительского компонента
• Написать стили для него
• Добавить несколько таких чатов в боковую панель

Task For Egor

• Создать в header кнопку "Создать чат"
• При нажатии на кнопку - модальное окно
• В окне форма для выбора названия, а ниже - поиск по именам и блок с именами пользователей
• Вариант пользователя должен быть оснащен кнопкой "добавить". Для таких вариантов сделать отдельный компонент member-choice

Мелкие правки

• Отодвинуть текст от крестика в header

@EgorKulishov

Issue For IgnatInyutsin

Написать тесты на весь backend (api тесты и unit тесты)

Task for IgnatInyutsin #1

Добавить channels и настроить его для дальнешей работы

Task for Egor

@EgorKulishov

Это первое действительно сложное задание. Я написал компонент login, тебе нужно написать компонент registration. (POST api/auth/users/)
Требуется:

• Запустить docker-compose
• Запустить ./migrate в backend/api/
• Привязать к переменной (аналогично login) каждый input
• Написать множество сообщений-предупреждений
• Написать функцию registration
• Применить в registration так же обращение к API api/auth/token/login, чтобы сразу сгенерировать токен, записать в куки и перезагрузить страницу

Как это делать?

• Тебе потребуется запустить docker-compose
• Открой http://localhost:[ПОРТ БЭКЭНДА]/
• Если оно откроется, в frontend/src/app/restapi.ts измени ссылку на эту (ни в коем случае не отправляй это в репозиторий, храни локально)
• по адресу http://localhost:[ПОРТ БЭКЭНДА]/api/documentation/ есть подробная документация каждого метода API. Тебе понадобятся те два, что описаны в ТЗ
• Данные по библиотеке ngx для куки и HTTP ты можешь нагуглить

Tasks for Michlea #1

Написать django-модели по описанию

Chat:

• name str
• type (group messages, private messages)
• members User (Many-to-Many)

Message:

• text str
• forward_message Message (Many-to-One)
• author User (Many-to-One)
• chat Chat (Many-to-One)

Prompt:

• type (image, sound, file)
• file FileField

Issue for Egor

@EgorKulishov

• Создать компонент chat
• Добавить route chat/{id} (доступ к id и компонента возможен)
• Разместить компонент chat на весь экран (по мимо свернутой боковой панели
• Создать нижнюю форму для ввода текста
• Создать кнопку "Отправить"
• Добавить кнопку плюсика, при нажатии на которой будут доступны опции "Записать голосовое сообщение", "Отправить изображение", "Отправить файл" (чисто стилистически
• Оформить эти кнопки, не тупой выпадающий список, чтобы красиво (на твой вкус с моим согласованием)
• Создать компонент message. На вход - id, authorId, authorName, text. Обозначает, как не удивительно, сообщение
• Добавить несколько сообщений в чат для наглядности

Task for Egor

• Если будет больше чатов, то они просто не уместятся в экран. Твоя цель исправить это (css параметр overflow)\
• Сделай невозможность зарегистрированным пользователям находиться на странице /login и /signup
• Пусть при нажатии на аватар в боковой панели будет кнопка "Выйти". Она
• Удаляет токен из куки файлов
• Перезагружает страницу

Task For Egor

@EgorKulishov
Задача - поменять цветовую палитру темы. Чем визуально объект должен быть ближе к пользователю, тем он светлее, т.е. элементы интерфейса должны постепенно светлеть. Можешь почитать несколько статей про темную тему, думаю, помогут

Task for Egor #2

• Сделать активным аватарку внизу, если кликнуть по ней, будет выпадающий список, в котором опция "выйти"
• Создать компоненты registration и login
• Добавить соответствующие им routes
• Сверстать регистрацию из: email, username, password, retype password
• внизу регистрации ссылка на вход, из серии "уже есть аккаунт? Войти"
• сверстать логин (username, password)

Issue for Egor ( на попозже)

• с помощью метода api/users/search реализовать поиск по имени в создании чата

• реализовать возможность выбора пользователей в чат

• ориентируясь на POST в API api/chats написать метод по созданию чатов (учти, в members должен быть твой id тоже, который можно достать из api/users/me)

• Реализовать вывод всех чатов пользователя в боковую панель (подсказка: есть директивы ngFor и возможность вставлять в html код переменные из компонента с помощью символа {{переменная}}. При нажатии тебя перенаправляет на страницу /chat/{id} нужного чата. Реализовать активацию/деактивацию чатов

Task For IgnatInyutsin

Создать Consumer для каждого чата

Task For IgnatInyutsin

• Создать метод GET для получения чатов пользователя
• Создать метод GET api/chat/{id}