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

Одним из вариантов, прорабатываемых нашей командой, стал 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

FAQs

What is github.com/bmstu-iu9/ptp2022-8-todo-list?

Package last updated on 11 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

github.com/bmstu-iu9/ptp2022-8-todo-list

ptp2022-8-todo-list Slavatidika

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

Содержание

О проекте: