ptp2022-8-todo-list Slavatidika

TODO-лист c дополнительной мотивацией, выполненной в игровой форме

Kапитан: Александр Старовойтов

Последняя версия проекта доступна здесь

Содержание

~~ptp2022-8-todo-list~~ Slavatidika
- TODO-лист c дополнительной мотивацией, выполненной в игровой форме
Содержание
О проекте:
- Функциональность списка дел
- Система мотивации
Технические составляющие проекта
Наша команда

О проекте:

Все мы хотим быть эффективными и всё успевать, решать несколько задач одновременно и ничего не забывать, поэтому наша команда поставила перед собой задачу предложить решение для повышения личной эффективности в условиях многозадачности.

Одним из вариантов, прорабатываемых нашей командой, стал TODO-лист с элементами геймификации.

Todo-лист представляет собой web-приложение для любой платформы. Среди достоинств можно выделить:

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

Функциональность списка дел

Включает в себя следующие возможности:

Создавать задачи (ВАУ)
Выполнять/Архивировать/Удалять задачи
Присваивать задачам свои категории и сортировать по ним
За выполнение задач и ежедневный вход получать Slavea коины
Отслеживать статистику по завершенным задачам и наблюдать личный прогресс (TODO)
Связывать задачи между собой (TODO)
Отслеживать сроки выполнения задач
Прикреплять к задачам файлы разного формата для упрощения работы над задачей

Система мотивации

В ходе ее разработки применены элементы геймификации. Это было обусловлено тем, что целевая аудитория продукта - молодые люди в возрасте 12-25 лет, испытывающие сложности с организацией своего времени и соблюдения распорядка дня и проводящие большую часть своего времени в виртуальных мирах компьютерных игр.

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

В магазине можно приобрести предметы для персонажа за внутриигровую валюту.

Внутриигровую валюту можно получить за выполнение задач в срок, ежедневный вход и повышение уровня персонажа.

Технические составляющие проекта

Техническое задание

Является немного устаревшим и проект местами не соответствует описанным там идеям и концептам

Техническое заданеие

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

Что касается стека технологий:

Фронтенд

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

html и scss для общей вертски страниц.
bootstrap для создания красивых стилей и отзывчивых модальных окон.
Так же активно применялся bootstrap grid для создания адаптивных интерфейсов, которыми можно пользоваться как с десктопных устройств, так и с мобильных телефонов
typescript для создания качественного, безопасного и масштабируемого кода, засчет повсеместного использования типов и классов.
parcel для простой в настройке, но в то же время крайне быстрой сборки проекта. Это позволило быстро верстать страницы с поддержкой Hot-Reload(Обновление страницы в браузере сразу же при изменении кода страницы), а так же собирать оптимизированные файлы для деплоя production версии.
nodeJS для разработки и создания production версии
eslint и tsc интегрированные в Github CI для автоматической проверки кода, написанного командой разработчиков
Активно использовался инструмент json-server, который позвоил настроить в клиенте работу с запросами на сервер задолго до того, как собственный backend достиг готового состояния. Сам сервер доступен тут json.grechkogv.ru
И конечно же Docker для удобной разработки и деплоя на любом устройстве в любом месте.

Разработка самого приложения Todo-листа производилась следующим образом:

Сначала было сделано боковое меню и div-контейнер с классом body для хранения текущей страницы.
Благодаря этому div-контейнеру все страницы писались независимо друг от друга, что позволило очень быстро довести клиент до готового рабочего состояния
Затем была написана Single page application(далее - SPA) страница, которая использует роутер для загрузки страниц без перезагрузки страницы. Ещё были написаны специальные скрипты, чтобы из упакованных файлов фронтенда извлекать div-контейнеры страниц и поставлять их в SPA
Затем для хостинга static файлов фронтенда был написан самодельный 0-dependencies сервер на NodeJS. Сервер умеет поставлять различные страницы по одному адресу в зависимости от значения ENV_MODE, для всех страниц реализованы красивые адреса без .html в ссылке. Так же реализовано полноценное логирование запросов на сервер вместе с кодом ответа.

TODO: Написать про client-server side рендеринг

Бэкенд

Говоря о серверной части приложения было принято решение о реализации архитектуры RESTful API на языке Golang. Т.е весь код по каждому блоку разделён на 3 части:

api - получение запросов с сервера
service - бизнес-логика
repository - взаимодействие с базой данных

Покрытие unit-тестами нашего кода достигает 80%, что обеспечивает гарантию стабильности кода.

Мы старались использовать только встроенные средства языка Go и минимизировали включение сторонних библиотек. В нашем проекте используется:

язык Golang версии 1.17
база данных Postgres была выбрана из-за удобства работы и наличия явных преимуществ относительно MySQL
библиотека HttpRouter для более удобной маршрутизации HTTP-запросов и получения их параметров
библиотека-драйвер pq была необходима для корректной связи и работы с Postgres
библиотека jwt для работы с JWT-Токенами при авторизации пользователя
библиотека uuid для генерации uuid в ActivationLink при подтверждении аккаунта по почте. Подтверждение аккаунта по почте происходит путём отправки на почту пользователя письма с почтового ящика нашего приложения slavatidika@gmail.com с активационной ссылкой

Запуск проекта через Docker Compose

Потребуется docker и docker compose plugin.
Сохраняем в docker-compose.yml:

services:
  api:
    image: slavatidika/api
    container_name: api
    ports:
      - 8080:8080
    deploy:
      restart_policy:
        condition: on-failure
    environment:
      - RUNTIME_MODE=release
    env_file:
      .env
    depends_on:
      - db
  frontend:
    image: slavatidika/frontend
    container_name: frontend
    environment:
      - ENV_MODE=PROD
    volumes:
      - ./frontend:/code/frontend
    ports:
      - 8000:3000
    deploy:
      restart_policy:
        condition: on-failure
  db:
    image: postgres
    container_name: db
    restart: always
    ports:
      - 5432:5432
    environment:
      POSTGRES_DB: ${DB_NAME}
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USER}
    volumes:
      - /var/slavatidika:/var/lib/postgresql/data/

Выполняем docker compose up -d.

Для просмотра логов: docker compose logs -f. Чтобы остановить проект, выполняем docker compose down.

Запуск с локальной сборкой контейнеров

Для запуска production версии проекта необходимо:

Скачать docker и make.

Склонировать себе репозиторий проекта:

git clone  git@github.com:bmstu-iu9/ptp2022-8-todo-list.git
cd ptp2022-8-todo-list

Запустить docker-composer:

make

или

docker compose up

После чего клиент будет доступен на localhost:8000, а api на localhost:8080.

Для остановки нажать CTRL + C или написать docker compose down

Работа с проектом

Разработка с помощью Yarn

Удобно использовать при разработке клиентской части приложения

Потребуется NodeJS(желательно версии 12.x) и yarn:

В корне проекта:

Команда	Результат
yarn install	Устанавливает все необходимые локальные пакеты
yarn dev	Запускает фронтенд в режиме разработки с поддержкой HotReload
yarn lint	Запускает линтер для frontend
yarn build	Упаковывает файлы frontend для деплоя
yarn deploy	= `yarn build` + ... + запуск на `localhost:3000`

Рекомендуется использовать yarn lint или make lint перед любым запуском или коммитом вашего кода на JS/TS

Более подробная справка по работе с фронтендом находится в папке frontend/, то есть тут

Разработка с помощью Docker

Потребуется docker и make.

В корне проекта:

Команда	Результат
`make`	Запускает frontend, api и базу данных в режиме `prod`
`make dev`	Запускает frontend, api и базу данных в режиме `dev`
`make frontend`	Запускает frontend с realtime обновлениями
`make frontend-prod`	Запускает `prod` frontend с подменой стартовой страницы и с работающим `Single Page Application`
`make lint`	Запускает линтер для frontend

Frontend доступен на localhost:8000, а api на localhost:8080.

В папке backend/:

Команда	Результат
`make`	Запускает локальный сервер api
`make test`	Запускает линтер и тесты для api
`make db`	Запускает базу данных

Наша команда

Александр @stewkk Старовойтов — LEAD Backend
Денис @OkDenAl Окутин — Backend
Арсений @uma-op Банников — Backend
Георгий @geogreck Гречко — LEAD frontend (А ещё я написал этот ужасающий README)
Вячеслав @VyacheslavIsWorkingNow Локшин — frontend
Кирилл @t1d333 Киселёв — frontend
Татьяна @Tanya-g99 Гнатенко — frontend