ОбзорДокументацияВойти
/
sashajs
/
sasha_jr_chat_git_verse
Код
Запросы
0
Задачи
0
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность

sasha_jr_chat_git_verse

0

Описание

402 KiB
README
В избранном0
Форки0

Языки

  • JavaScript55,1%
  • TypeScript20,2%
  • CSS16,8%
  • HTML6,4%
  • Dockerfile1,5%
1
114
0
backend
8 месяцев назад
frontend
8 месяцев назад
.gitignore
9 месяцев назад
README.md
8 месяцев назад
compose.txt
8 месяцев назад
compose.yaml
9 месяцев назад
README.md

ТЗ на проект "Онлайн чат"

0. Организация работы над проектом

Встречи и разработка:

  • У тебя будет 3 занятия с ментором, где вы вместе разберете важные части проекта.
  • Ментор поможет определить комфортный дедлайн для завершения работы.
  • Основной функционал вы напишете вместе на консультациях.

Сдача проекта

  • Загрузи проект в Git-репозиторий
  • Отправить ссылку через форму

Удачи в работе 💪

1. Описание проекта

Мы создадим веб-приложение для обмена сообщениями в реальном времени. Пользователи смогут общаться через удобный веб-интерфейс — все сообщения сохраняются на сервере и мгновенно отображаются у других участников чата.

Приложение состоит из двух главных частей. Серверная часть работает на Node.js с TypeScript и отвечает за обработку запросов и хранение сообщений. Клиентская часть написана на HTML, CSS и JavaScript — она создаёт интерфейс для пользователей и общается с сервером через REST API. Nginx помогает раздавать файлы клиентской части и направляет API-запросы к серверу. Все компоненты приложения упакованы в Docker-контейнеры и управляются через Docker Compose.

В чате пользователи смогут отправлять сообщения под своим именем, видеть время отправки каждого сообщения и использовать смайлики с форматированным текстом. Новые сообщения будут появляться автоматически благодаря регулярному опросу сервера каждые несколько секунд. Интерфейс адаптируется под разные устройства, так что общаться можно и с телефона, и с компьютера (опционально).

Этот проект поможет изучить основы веб-разработки: клиент-серверное взаимодействие, работу с API, контейнеризацию и построение современной инфраструктуры. Наша цель — создать простой, но полноценный онлайн-чат, который наглядно демонстрирует клиент-серверной архитектуры, обработку API-запросов, контейнеризацию с Docker и развертывание многокомпонентной системы.

Для успешной реализации проекта нам нужно:

  1. Разработать серверную часть на Node.js и TypeScript — она будет обрабатывать API-запросы и хранить сообщения с временными метками
  2. Создать клиентскую часть с удобным интерфейсом и автоматическим обновлением сообщений
  3. Настроить Nginx для раздачи статических файлов и проксирования запросов
  4. Упаковать компоненты в Docker-контейнеры и настроить их взаимодействие
  5. Протестировать работу API, интерфейса и стабильность системы в Docker

2. Функциональные требования

Основной функционал

  1. Отправка сообщений:
    • пользователь может отправить сообщение, введя свое имя и текст сообщения.
    • сообщение отправляется через POST-запрос к серверу.
    • сервер сохраняет сообщение в хранилище с временной меткой и возвращает подтверждение успешной отправки.
  2. Получение списка сообщений:
    • пользователь получает актуальный список сообщений через GET-запрос.
    • Все сообщения возвращаются в виде массива JSON, отсортированного по времени отправки.
  3. Обновление сообщений в реальном времени:
    • сообщения автоматически обновляются на клиентской стороне каждые 3 секунды (polling).
    • клиент отправляет регулярные GET-запросы для получения новых сообщений, не требуя перезагрузки страницы.
  4. Отображение временных меток:
    • каждое сообщение сопровождается временной меткой, указывающей точное время отправки.
    • на клиентской стороне временные метки отображаются в удобном формате (например,
      12:45
      ).
  5. Управление именем пользователя:
    • пользователь может задать свое имя при входе.
    • имя сохраняется на клиентской стороне (например, в
      localStorage
      ) и автоматически добавляется к каждому сообщению.
    • пользователь может изменить свое имя в любое время.
  6. Поддержка форматирования сообщений:
    • Текст сообщений может включать:
      • Код (обрамляется тегами
        <code>
         или отображается в стиле монопространственного шрифта).
      • Смайлики, которые преобразуются из текстовых символов (например,
        :)
         → 😊).
    • Форматирование текста выполняется на клиентской стороне перед отображением.

Пользовательские сценарии

  1. Отправка сообщения:
    • Пользователь вводит и текст сообщения.
    • Нажимает кнопку «Отправить».
    • Сообщение отображается в списке сообщений вместе с временной меткой.
  2. Просмотр сообщений других пользователей:
    • Пользователь видит сообщения, отправленные другими участниками чата, в порядке их отправки.
    • Сообщения автоматически обновляются каждые несколько секунд.
  3. Изменение имени пользователя:
    • Пользователь вводит новое имя в поле имени.
    • Имя обновляется и используется при отправке всех последующих сообщений.

Составные части системы

  1. Frontend:
    • HTML/CSS/JavaScript для отображения интерфейса.
    • Поля для ввода имени пользователя и текста сообщения.
    • Область для отображения списка сообщений.
    • Скрипт, отвечающий за взаимодействие с сервером (отправка/получение сообщений, автоматическое обновление).
    • Дизайн - https://www.figma.com/design/kubTKGMlw6bYAIHw0nW8zr/Online-Chat?node-id=0-1&t=dR421K8U4QynWvIm-1
  2. Backend:
    • Реализация REST API на Node.js с TypeScript.
    • Хранение сообщений в памяти сервера (в массиве).
    • Логика обработки запросов:
      • GET /messages
        : возвращает список сообщений.
      • POST /messages
        : добавляет новое сообщение в хранилище.
  3. Интерфейс взаимодействия:
    • REST API:
      • GET /messages: Возвращает массив сообщений.
      • POST /messages: Принимает данные сообщения (имя пользователя, текст) и сохраняет их на сервере.

Примеры запросов и ответов

1. POST /messages

Описание: Отправляет новое сообщение на сервер.

Пример запроса :

Пример ответа :

2. GET /messages

Описание: Возвращает список всех сообщений.

Пример ответа :

[1, 2, 3]
- как создавать?

            POST        id
[]           0+1         1           [1]
[1]          1+1         2           [1,2]
------- DELETE [ 2 ] ---------
[2]          1+1         2           [2,2]



[]          1            1           [1]
[1]         2            2           [1,2]
------  DELETE [ 2 ] -------
[2]         3            3           [2,3]
[2,3]       4            4           [2,3,4]

---    DELETE [3]

[2,4]                                [2,4,5]

/messages /messages/:id

{ id: "12312312" }

/news /news/1/ /news/2/ /news/10/ /news/15/ /news/20/

/orders/1005 /orders/36c7ca13-bcae-4333-9947-cd1ecfb014c4

3. Нефункциональные требования

1. Производительность

  1. Скорость отклика:
    • Сервер должен обрабатывать запросы API (GET и POST) с задержкой не более 200 мс при обычной нагрузке (до 10 запросов в секунду).
    • Интерфейс должен обновляться каждые 3 секунды, без заметных задержек для пользователя.
  2. Обработка нагрузки:
    • Система должна корректно функционировать при одновременной работе до 50 пользователей.
    • В случае превышения нагрузки сервер должен возвращать соответствующую ошибку (например, HTTP 429: Too Many Requests).

2. Ограничения

  1. Длина сообщений:
    • Максимальная длина текста сообщения: 500 символов.
    • Минимальная длина текста сообщения: 1 символ.
  2. Имя пользователя:
    • Минимальная длина имени: 2 символа.
    • Максимальная длина имени: 50 символов.
  3. Обновление сообщений:
    • Частота запросов на обновление сообщений (polling) должна быть не чаще 1 запроса в 3 секунды, чтобы минимизировать нагрузку на сервер.
  4. Хранилище данных:
    • На текущем этапе сообщения хранятся в оперативной памяти сервера, поэтому все данные теряются при перезапуске системы.
    • В будущем возможно подключение базы данных для долговременного хранения.

3. Технологии

Backend:

  • Node.js с использованием TypeScript.
  • Express.js для реализации REST API.

Frontend:

  • HTML, CSS, JavaScript для интерфейса.
  • Подключение REST API через JavaScript (fetch).

Контейнеризация:

  • Docker для упрощения развертывания системы.
  • Docker Compose для координации Frontend и Backend.

4. Требования к доступности

  1. Поддержка браузеров:
    • Приложение должно корректно работать в современных браузерах (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari).
  2. Адаптивность интерфейса:
    • Интерфейс должен быть оптимизирован для работы на устройствах с разными экранами (десктопы, планшеты, мобильные телефоны).
  3. Восстановление работы:
    • При кратковременных сбоях сервера клиентская часть должна повторить запрос для получения сообщений.

5. Удобство развертывания

Контейнеризация:

Система должна быть легко разворачиваемой с помощью одной команды:

Логи:

Сервер должен вести простейший лог запросов для отладки и мониторинга (например, с указанием времени, типа запроса и IP-адреса).

4. Архитектура и структура

Проект реализует клиент-серверную архитектуру, разделенную на два ключевых компонента:

Frontend:

  • Отвечает за отображение пользовательского интерфейса.
  • Раздается через Nginx, который также проксирует запросы к серверу Backend.
  • Использует REST API для взаимодействия с серверной частью.

Backend:

  • Обрабатывает все запросы, связанные с отправкой и получением сообщений.
  • Реализует логику валидации данных, хранения сообщений и формирования ответов.

Эти компоненты упакованы в отдельные Docker-контейнеры и взаимодействуют друг с другом через сеть, организованную с помощью Docker Compose.

Компоненты системы

  1. Frontend

  • Состав:

    • HTML/CSS: Для создания пользовательского интерфейса.

    • JavaScript: Для отправки запросов к API и обновления интерфейса.

    • Nginx:

      • Раздает статические файлы фронтенда (HTML, CSS, JS).

    • Проксирует запросы

      /api
      на сервер Backend.

  • Основные функции:

    • Отправка сообщений через POST-запросы.
    • Получение списка сообщений через GET-запросы.
    • Автоматическое обновление сообщений каждые 3 секунды (polling).
    • Удобное отображение временных меток, имени пользователя и текста сообщений.

  • Работа в браузере:

    • Приложение работает в любом современном браузере без установки дополнительных плагинов.
  1. Backend

  • Состав:

    • Node.js:

      • Запуск сервера и обработка API-запросов.
      • Валидация входных данных (имя пользователя, текст сообщения).
      • Хранение сообщений в оперативной памяти.

    • TypeScript: Используется для обеспечения типизации и повышения надежности кода.

  • Основные функции:

    • Обработка REST API-запросов:
      • GET /messages
        : Возвращает список всех сообщений.
      • POST /messages
        : Сохраняет новое сообщение.
    • Хранение данных:
      • Сообщения хранятся в массиве (временное решение на этапе разработки).
      • Каждое сообщение содержит:
        • Уникальный ID.
        • Имя пользователя.
        • Текст сообщения.
        • Временную метку.
  1. Контейнеризация

  • Docker:

    • Упрощает развертывание компонентов (Frontend и Backend).
    • Гарантирует одинаковое окружение разработки и продакшена.

  • Docker Compose:

    • Управляет запуском всех контейнеров.

  • Настраивает общую сеть для взаимодействия Frontend и Backend.

Общая схема взаимодействия компонентов

Frontend:

  • Пользователь открывает страницу чата через браузер.
  • Статические файлы (HTML, CSS, JS) раздаются сервером Nginx.
  • JavaScript на странице отправляет HTTP-запросы на сервер Backend.

Backend:

  • Принимает запросы от Frontend через REST API.
  • Выполняет валидацию данных (например, проверку длины имени пользователя и текста сообщения).
  • Возвращает ответы в формате JSON.

Nginx:

  • Раздает статические файлы.
  • Проксирует запросы к
    /api
     на сервер Backend.

Docker Compose:

  • Организует взаимодействие между контейнерами Frontend и Backend через виртуальную сеть.
  • Автоматически связывает имена контейнеров, чтобы Frontend мог обращаться к Backend по имени (например,
    backend
    ).

Структура проекта

Изначальная структура папок:

project/
├── backend/              # Серверная часть
│   ├── src/              # Исходный код TypeScript
│   │   ├── server.ts     # Основной файл сервера
│   ├── package.json      # Зависимости для Node.js
│   ├── tsconfig.json     # Конфигурация TypeScript
│   ├── Dockerfile        # Dockerfile для Backend
├── frontend/             # Клиентская часть
│   ├── public/           # Статические файлы
│   │   ├── index.html    # Основной файл HTML
│   │   ├── styles.css    # Стили
│   │   ├── app.js        # Логика работы на клиенте
│   ├── nginx.conf        # Конфигурация Nginx
│   ├── Dockerfile        # Dockerfile для Frontend
├── docker-compose.yml    # Docker Compose для управления проектом

Текущая структура папок:

chat/
├── backend/                                            # Серверная часть
│   ├── dist/                                           # Директория серверной сборки проекта
│   │   ├── index.js                                    # Основной файл сервера после компиляции
│   ├── migrations/                                     # Директория миграций проекта
|   │   ├── sqls/                                       # Директория создания и отката миграций
|   |   |   ├── 20250728212651-create-users-down.sql    # Файл удаления таблицы users
|   |   |   ├── 20250728212651-create-users-up.sql      # Файл создания таблицы users
|   |   |   ├── 20250731200901-create-messages-down.sql # Файл удаления таблицы messages
|   |   |   ├── 20250731200901-create-messages-up.sql   # Файл создания таблицы messages
│   │   ├── 20250728212651-create-users.js              # файл создания таблицы users javascript
|   |   ├── 20250731200901-create-messages.js           # файл создания таблицы messages javascript
│   ├── node_modules/                                   # Директория зависимостей проекта Backend
│   │   ├── packages...                                 # Зависимости
│   ├── src/                                            # Директория исходного кода TypeScript
│   │   ├── index.ts                                    # Исходный код TypeScript
│   ├── .dockerignore                                   # .dockerignore бэкенда
│   ├── .env                                            # файл окружения
│   ├── .gitignore                                      # .gitignore бэкенда
│   ├── database.json                                   # файл с настройками базы данных
│   ├── Dockerfile                                      # Dockerfile для Backend
│   ├── package-lock.json                               # Зависимости для Node.js
│   ├── package.json                                    # Зависимости для Node.js
│   ├── tsconfig.json                                   # Конфигурация TypeScript
├── frontend/                                           # Клиентская часть
│   ├── css/                                            # Директория стилей
|   │   ├── main.css                                    # Основной файл css
│   ├── img/                                            # Директория картинок
|   │   ├── images...                                   # картинки
│   ├── js/                                             # Директория логики работы на клиенте
|   │   ├── components/                                 # Директория функциональных компонентов
|   |   │   ├── chat-options-btn-layout.js              # Файл функционального компонента
|   |   │   ├── header-chat-lable-layout.js             # Файл функционального компонента
|   |   │   ├── message-element-layout.js               # Файл функционального компонента
|   |   │   ├── message-popup-layout.js                 # Файл функционального компонента
|   |   │   ├── toggle-button-layout.js                 # Файл функционального компонента
|   │   ├── utils/                                      # Директория функций общего назначения
|   |   │   ├── utils.js                                # Файл функций общего назначения
|   │   ├── index.js                                    # Логика работы на клиенте
|   │   ├── layout.js                                   # файл для документирования некоторых элементов разметки
|   │   ├── main.js                                     # Основной файл реэкспорта
│   ├── .dockerignore                                   # .dockerignore фронтенда
│   ├── Dockerfile                                      # Dockerfile для Frontend
│   ├── index.html                                      # Основной файл HTML
│   ├── package-lock.json                               # Зависимости для Node.js
│   ├── package.json                                    # Зависимости для Node.js
├── compose.yml                                         # Docker Compose для управления проектом
├── .gitignore                                          # .gitignore приложения
├── README.md                                           # Readme приложения

Основные файлы и их назначение:

  1. Backend:

    • server.ts
      : Логика API и обработка данных.
    • package.json
      : Список зависимостей (Express, TypeScript).
    • Dockerfile
      : Упаковка серверного кода в Docker.

  2. Frontend:

    • index.html
      : Основная страница чата.
    • styles.css
      : Стили для интерфейса.
    • app.js
      : Логика работы клиента (отправка/получение данных).
    • nginx.conf
      : Конфигурация Nginx для раздачи файлов и проксирования.
    • Dockerfile
      : Упаковка Frontend в Docker.

  3. Docker Compose:

    • Связывает Frontend и Backend через виртуальную сеть.

5. Технические требования

Развертывание

  1. Контейнеризация:

    • Весь проект должен быть упакован в Docker-контейнеры:
      • Frontend: Nginx-сервер, раздающий статические файлы и проксирующий API-запросы.
      • Backend: Node.js с TypeScript, реализующий API.
    • Использование Docker Compose для управления всеми сервисами.

  2. Команды для запуска:

    • Сборка и запуск всех сервисов:

    • Остановка всех контейнеров:

docker-compose down ```

  1. Порты:

    • Frontend (Nginx):

      • Открыт порт
        80
         для внешнего доступа.

    • Backend:

      • Сервис доступен по внутреннему порту
        3001
         в сети Docker.

    • Порты должны быть проксированы так:

      • Пользователь отправляет запросы к API через URL
        http://localhost/api
        .

Frontend

  1. Технологии:

    • HTML, CSS, JavaScript.
    • Статические файлы раздаются через Nginx.

  2. UI-требования:

    • Интерфейс должен быть простым и интуитивно понятным.
    • Все элементы (поле ввода имени, текст сообщения, список сообщений, кнопка отправки) должны быть адаптивны для корректного отображения на устройствах с разными размерами экрана (десктопы, планшеты, мобильные телефоны).
    • Поддержка отображения смайликов и форматированного текста (например, кода).

  3. Запросы:

    • Отправка POST-запросов для добавления сообщений.
    • Регулярные GET-запросы для обновления списка сообщений (каждые 3 секунды).

  4. Dockerfile для Frontend:

    • Статические файлы размещаются в папке

      /usr/share/nginx/html
      внутри контейнера.

    • Конфигурация Nginx (nginx.conf) должна проксировать API-запросы:

      • Пример:

Backend

  1. Технологии:

    • Node.js (версия 16 или выше).
    • TypeScript для обеспечения типизации кода.
    • Express.js для создания REST API.

  2. Функциональность API:

    • GET /messages:

      • Возвращает массив JSON со всеми сообщениями.

      • Формат ответа:

    • POST /messages:

      • Принимает имя пользователя и текст сообщения.

      • Сохраняет сообщение с уникальным ID и временной меткой.

      • Пример запроса:

      • Пример ответа:

  3. Хранилище данных:

    • сообщения временно хранятся в массиве в оперативной памяти.

    • структура сообщения:

  4. Валидация данных:

    • Имя пользователя:
      • Длина: от 2 до 50 символов.
    • Текст сообщения:
      • Минимум 1 символ, максимум 500 символов.
    • Сервер возвращает HTTP 400 при некорректных данных.

  5. Dockerfile для Backend:

    • Сервер должен запускаться из компилированного TypeScript-кода:
      • Компиляция:
        npx tsc
        .
      • Старт сервера:
        node dist/server.js
        .

Сеть и взаимодействие

Docker Compose:

  • Настройка двух сервисов:

    • frontend
      : раздается через Nginx и доступен на
      localhost:80
      .
    • backend
      : обрабатывает API-запросы на внутреннем порту
      3001
      .

  • Пример compose.yaml :

Проксирование запросов:

Nginx должен перенаправлять запросы

/api
на Backend, доступный по имени сервиса
backend
.

6. Этапы выполнения

Для выполнения проекта онлайн-чата проект делится на несколько этапов, чтобы организовать процесс разработки, тестирования и развертывания. Каждый этап включает четко определенные задачи, которые необходимо выполнить для достижения итогового результата.

Этап 1. Инициализация проекта

Цель: создать базовую структуру проекта, настроить окружение и контейнеризацию.

  • Создать папки для Backend и Frontend:

    project/
├── backend/
├── frontend/
├── docker-compose.yml

  • Инициализировать проект:

    • Backend:
      • Создать файл
        package.json
         с зависимостями (Node.js, Express, TypeScript).
      • Настроить TypeScript-конфигурацию (
        tsconfig.json
        ).
    • Frontend:
      • Подготовить базовую HTML-страницу, CSS-стили и JavaScript.

  • Написать простой

    docker-compose.yml
    для запуска Frontend и Backend контейнеров.

  • Ожидаемый результат:

    • Пустая структура проекта с корректной настройкой окружения.
    • Возможность запускать контейнеры через
      docker-compose up
      .

Этап 2. Разработка Backend

Цель: реализовать серверную часть с REST API.

  1. Разработка API:
    • Настроить Express.js для обработки запросов.
    • Реализовать два маршрута:
      • GET /messages
        : Возвращает список сообщений.
      • POST /messages
        : Добавляет новое сообщение.
    • Реализовать временное хранилище сообщений (массив в памяти).
  2. Валидация данных:
    • Проверить входные данные (длину имени и текста сообщения).
    • Возвращать HTTP 400 при некорректных данных.
  3. Тестирование API:
    • Проверить корректность работы с помощью Postman или аналогичных инструментов.
  4. Dockerизация:
    • Написать Dockerfile для Backend.
    • Убедиться, что сервер запускается корректно внутри контейнера.
  • Ожидаемый результат:
    • REST API работает и возвращает данные.
    • Контейнер Backend успешно запускается через Docker.

Этап 3. Разработка Frontend

Цель: создать пользовательский интерфейс для взаимодействия с сервером.

  1. Создание интерфейса:
    • HTML:
      • Поля для ввода имени пользователя и текста сообщения.
      • Область для отображения сообщений.
      • Кнопка для отправки сообщений.
    • CSS:
      • Минималистичный и адаптивный дизайн.
    • JavaScript:
      • Логика отправки POST-запросов для добавления сообщений.
      • Логика выполнения GET-запросов для обновления списка сообщений.
  2. Polling для обновления сообщений:
    • Настроить регулярные GET-запросы каждые 3 секунды для обновления чата.
  3. Dockerизация Frontend:
    • Написать Dockerfile для Frontend.
    • Настроить раздачу статических файлов через Nginx.
    • Проксировать запросы
      /api
       на сервер Backend.
  4. Тестирование:
    • Убедиться, что интерфейс корректно взаимодействует с сервером.
  • Ожидаемый результат:
    • Веб-интерфейс отображает сообщения и отправляет их на сервер.
    • Docker-контейнер Frontend работает корректно.

Этап 4. Интеграция Frontend и Backend

Цель: Настроить взаимодействие Frontend и Backend через Docker Compose.

  1. Настройка Docker Compose:
    • Убедиться, что контейнеры Frontend и Backend находятся в одной сети.
    • Протестировать взаимодействие через
      http://backend:3001
       (внутри сети).
  2. Настройка Nginx:
    • Проксировать API-запросы с Frontend к Backend.
    • Проверить, что
      /api
       перенаправляется корректно.
  3. Тестирование:
    • Запустить весь проект через Docker Compose.
    • Убедиться, что все функции работают (отправка, получение, обновление сообщений).
  • Ожидаемый результат:
    • Frontend и Backend успешно взаимодействуют через Docker Compose.
    • Приложение доступно по адресу
      http://localhost
      .

Этап 5. Тестирование проекта

Цель: Убедиться в стабильной работе приложения и проверить соответствие функциональным и нефункциональным требованиям.

  1. Функциональные тесты:
    • Проверить отправку и получение сообщений.
    • Проверить корректность отображения временных меток.
    • Проверить валидацию данных.
  2. Тестирование производительности:
    • Провести нагрузочное тестирование на 10-50 пользователей.
  3. Исправление ошибок:
    • Устранить выявленные проблемы.
  4. Документирование:
    • Написать инструкции для запуска проекта.
  • Ожидаемый результат:
    • Проект стабильно работает при нормальной нагрузке.

Этап 6. Завершение проекта

Цель: Финализировать разработку и подготовить проект для сдачи.

  1. Оптимизация:
    • Проверить размер Docker-образов и при необходимости уменьшить их.
    • Убедиться, что файлы Nginx и Docker Compose настроены корректно.
  2. Подготовка документации:
    • Написать README с инструкциями по запуску и развертыванию.
    • Описать архитектуру и структуру проекта.
  3. Сдача проекта:
    • Убедиться, что проект отвечает всем критериям успешности.
  • Ожидаемый результат:
    • Полностью готовый к сдаче проект с документацией и работающими контейнерами.

7. Критерии успешности

Проект будет оцениваться по выполнению задач, описанных на каждом этапе. Всего можно получить максимум 60 баллов.

1. Инициализация проекта (5 баллов)

  1. Структура проекта (2 балла):
    • Папки
      backend
       и
      frontend
       созданы.
    • Добавлен файл
      docker-compose.yml
      .
  2. Инициализация окружения (3 балла):
    • Backend:
      • Создан
        package.json
         с зависимостями.
      • Настроен
        tsconfig.json
         для TypeScript.
    • Frontend:
      • Подготовлены базовые файлы (
        index.html
        ,
        styles.css
        ,
        app.js
        ).
    • Docker Compose запускает контейнеры.

Критерий успешности: пустая структура проекта с корректной настройкой окружения и возможность запуска через

docker-compose up
.

2. Разработка Backend (15 баллов)

  1. Реализация API (10 баллов):
    • Реализованы маршруты:
      • GET /messages
        : Возвращает список сообщений.
      • POST /messages
        : Сохраняет новое сообщение.
    • Временное хранилище сообщений работает корректно.
    • Входные данные валидируются (имя пользователя: 2-50 символов, текст: 1-500 символов).
    • Сервер возвращает корректные HTTP-коды (200, 400).
  2. Dockerизация Backend (5 баллов):
    • Написан Dockerfile для Backend.
    • Сервер запускается и корректно работает внутри контейнера.

Критерий успешности: API функционирует, сообщения обрабатываются корректно, сервер работает в контейнере.

3. Разработка Frontend (15 баллов)

  1. Интерфейс (5 баллов):
    • Реализованы:
      • Поля для ввода имени пользователя и текста сообщения.
      • Область для отображения сообщений.
      • Кнопка для отправки.
    • Интерфейс адаптивен для десктопов и мобильных устройств.
  2. Polling (5 баллов):
    • Настроены регулярные GET-запросы каждые 3 секунды для обновления сообщений.
    • Интерфейс корректно отображает новые сообщения без перезагрузки страницы.
  3. Dockerизация Frontend (5 баллов):
    • Написан Dockerfile для Frontend.
    • Nginx корректно раздает статические файлы.
    • Запросы
      /api
       проксируются на Backend.

Критерий успешности: веб-интерфейс отображает сообщения, отправляет их на сервер, и контейнер Frontend работает корректно.

4. Интеграция Frontend и Backend (15 баллов)

  1. Связь через Docker Compose (10 баллов):
    • Контейнеры Frontend и Backend находятся в одной сети.
    • Nginx проксирует запросы
      /api
       на
      backend:3001
      .
    • Проект корректно запускается через
      docker-compose up
      .
  2. Тестирование интеграции (5 баллов):
    • Пользователь может:
      • Отправлять сообщения через интерфейс.
      • Получать сообщения через polling.
    • Приложение доступно по адресу
      http://localhost
      .

Критерий успешности: Frontend и Backend взаимодействуют через Docker Compose, и функциональность работает корректно.

5. Тестирование проекта (5 баллов)

  1. Функциональные тесты (3 балла):
    • Отправка и получение сообщений работают без ошибок.
    • Корректно отображаются временные метки сообщений.
    • Валидация данных (имя, текст) работает на клиенте и сервере.
  2. Производительность (2 балла):
    • Сервер обрабатывает до 50 пользователей одновременно.
    • Запросы выполняются с задержкой не более 200 мс.

Критерий успешности: приложение стабильно функционирует и проходит все тесты.

6. Удобство развертывания (5 баллов)

  1. Проект запускается одной командой:

  2. В проект включены все необходимые файлы конфигурации (Dockerfile,

    docker-compose.yml
    ,
    nginx.conf
    ).

  3. Все зависимости установлены автоматически.

  4. Оптимизация:

  • Docker-образы оптимизированы (например, используются lightweight-образы).
  • Размер образов не превышает разумных значений.

5. Документация:

  • Написан README с инструкциями:
    • Описание проекта.
    • Команды для запуска и остановки.
    • Описание структуры проекта и API.

Критерий успешности: полностью готовый проект с документацией и работающими контейнерами.

/**

  • Требования:
    • Прозрачная обратная связь — в любой момент времени пользователь
  • должен понимать что происходит с интерфейсомы
    • Можно ли писать текст сообщения?
    • Валидно ли сообщение, которое он отправляет и можно ли его отправить?
    • После отправки
    • началась ли отправка?
    • пришло ли сообщение на сервер? удачно ли?
    • [отображение сообщения в списке]
    1. Я нажал на кнопку отправить
    1. На сервер ушел POST-запрос
    1. Сервер обработал этот запрос
    1. Вернул мне ответ
    1. Я обработал ответ, понял есть ли ошибка
    1. Если нет ошибки — показал это
  • 6.1 Если есть ошибка — показал это
  • Хорошо бы дать возможность пользователю не отправлять одно и то же сообщение
  • несколько раз
  • Способы обратной связи
    1. Ничего не делать
    1. Все заблокировать
    1. Заблокировать поле ввода и кнопку и поменять текст на кнопке
    1. Если удачно — разблокировать и вернуть текст обратно, очистить форму и отобразить обновленный список сообщений
    1. Если ошибка — разблокировать и вернуть текст обратно, не сбрасывать форму и показать ошибку
    1. Optimistic UI
    1. Мгновенно обновляет список сообщений и показывает наше сообщение в списке
  •  Очищает форму и дает возможность отправить новое сообщение

  •  Вновь созданному сообщению добавляет визуальный индикатор о его состоянии

*/

  • Ввод имени пользователя
    • изначально имя пользователя не задано - null
    • если имени пользователя нет — показываем соответствующий экран
    • при вводе имя сохраняется в localStorage
    • введенное имя отправляется в каждом сообщении
    • при рендеринге списка сообщений, если имя пользователя совпадает с
  • введенным именем, это сообщение показывается справа

// 2 Стратегии валидации // 1. Проверяются все ошибки и отправляются скопом // 2. Проверка останавливается на первой попавшейся ошибке и отправляется эта ошибка

// *Некрасивенько, что в одном if проводятся сразу все проверки username
// потому что сложно сформировать адекватное сообщение об ошибке

Проверьте, какой именно дистрибутив используется в вашем контейнере, и используйте соответствующий пакетный менеджер для установки nano. Если вы не уверены, вы можете проверить это с помощью команды:

cat /etc/os-release

https://docs.docker.com/engine/install/ubuntu/#uninstall-docker-engine удаление docker-engine

docker cp ./config.py sasha-jr-chat-pgadmin-1:/pgadmin4/config.py копировать файл конфига в контейнер pgadmin4 для включения консоли psql docker exec sasha-jr-chat-pgadmin-1 cat /pgadmin4/config.py прочитать файл

select version(); показ версии

docker compose restart pgadmin перезапуск контейнера

https://db-migrate.readthedocs.io/en/latest/Getting%20Started/configuration/

npx db-migrate create create-messages --sql-file создать файл миграций

npm run migrate:up запустить миграцию npm run migrate:down обратить миграцию

docker compose -f compose.yaml up --build запустить проект с помощью docker compose

INSERT INTO users (username) VALUES ('sasha1985'); создать пользователя

INSERT INTO messages ( text, user_id ) VALUES ( 'Здорова, гондоны!!!', 2 );