QR Menu Clone / RS Clone

QR Menu Clone / RS Clone

Блог

2021

RS School

site_key

Создание веб-приложения QR-меню для ресторанов

React / Redux / Redux Saga
Axios (взаимодействие с API)
Socket.io
Recharts
Eslint
TypeScript
NodeJS / Express / Express Validator
Multer / Sharp (upload & crop images)
RESTful API
MongoDB / Mongoose
qrcode (генерация qr-кодов)

Настоящая статья дублирует аналогичную на Medium.

Статья по выпускному проекту (RS Clone) в RS School.

Цель разработки проекта. Снижение риска распространения вирусов, передающихся контактным путем, при помощи использования QR-кода, благодаря сканированию которого гости заведений смогут просматривать электронное меню ресторана и формировать заказы на своих индивидуальных девайсах. Приложение позволит сократить расходы, автоматизировать процесс взаимодействия между поставщиком услуг и клиентом.

About dream team

Немного информации о каждом из нас:

Сергей (team leader)

GitHub: https://github.com/hardzeichyksiarhei

Род деятельности: Преподаватель в БГПУ, МИТСО.

Как пришел в RSS: посоветовали знакомые.

С какой целью: приобрести новые знакомства и опыт командной разработки.

Какие проекты выполнены: все проекты.

С какими сложностями столкнулся: английский в презентации.

Кирилл

GitHub: https://github.com/Mobidikt

Как пришел в RSS: нашел ссылку на сайте ЕПАМа.

С какой целью: приобрести опыт в разработке, найти интересные проекты.

Какие проекты выполнены: все (делал English for kids), кроме презентации.

С какими сложностями столкнулся: нехватка времени из-за работы, отсутствие опыта разработки на js.

Андрей

GitHub: https://github.com/IKLOA

Как пришел в RSS: нашел ссылку на сайте ЕПАМа.

С какой целью: получить новый опыт в вэбе, опыт командной работы.

Какие проекты выполнены: все (делал RS Selectors), кроме презентации.

С какими сложностями столкнулся: нехватка времени из-за учебы.

Рита

GitHub: https://github.com/Grenzen

Как пришла в RSS: посоветовали знакомые.

С какой целью: получить опыт разработки и работы в команде.

Какие проекты выполнены: все (делала English for kids), кроме презентации и gem-puzzle.

С какими сложностями столкнулась: нехватка времени из-за работы, с многими вещами работала впервые и приходилось разбираться на лету.


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

QR Menu Clone приложение которое подойдет для ресторанов, баров, кафе и магазинов (потребуется небольшая доработка приложения), где клиенты могут ознакомиться с меню, товарами, услугами и сделать заказ за несколько кликов. QR Menu Clone позволит сократить расходы, автоматизировать процессы и уменьшить контактирование людей посредством бумажных меню (в связи с актуальной для всего мира covid-обстановкой).

Admin side:

  • управление меню ресторана (или иного заведения), а именно создание / редактирование / удаление и т.д.;
  • real-time мониторинг поступления заказов;
  • управление региональными настройками и настройками поставщика услуг (ресторан, кафе и т.д.).

Client side:

  • переход на веб-страницу ресторана по средствам сканирования QR-кода или по прямой ссылке;
  • возможность просматривать меню ресторана с мобильного устройства;
  • оформление заказа прямо в заведении.

Основные features

  • Локализован интерфейс (admin side).
  • Несложный для восприятия редактор меню.
  • Визуализация информации в виде таблиц и графиков (recharts).
  • Приложение выполнено в едином стиле, для стилизации используется Ant Design.
  • Real-time application (получение и обработка заказов в реальном времени).
  • Phone / Mobile / PC device support.

Технический стек

Admin side:

  • React / Redux / Redux Saga
  • Axios (взаимодействие с API)
  • Socket.io
  • Recharts
  • Eslint

Client side:

  • React / Redux / Redux Saga
  • Axios (взаимодействие с API)
  • Socket.io
  • TypeScript

API:

  • NodeJS / Express / Express Validator
  • Multer / Sharp (upload & crop images)
  • RESTful API
  • MongoDB / Mongoose
  • Socket.io
  • qrcode (генерация qr-кодов)

Скриншоты интерфейса

Admin side:

Client side:

Video Preview


Организация командной работы

В Trello были созданы задачи, закрепленные за участниками команды, выполнения которых отслеживал тим-лид. В Miro построена структура связей приложения (описана общая логика работы приложения), а также изображён макет внешнего дизайна приложения. При разделении задач между участниками были учтены: опыт разработки в данной области (серверная часть или фронтенд) и желание писать на JS, NodeJS или TS. В случае необходимости решения срочных вопросов, участники команды приходили друг другу на помощь.

Какие инструменты для организации командной работы использовались?

Miro

Trello


Архитектура проекта, особенности реализации

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

Redux/Redux-saga, благодаря построенной структуре, значительно облегчал контроль состояния и взаимодействие с API.

Ant design в условиях отсутствия дизайнера был хорошим выбором, дающим возможность сосредоточиться на функциональности приложения.

Node.js / Express оптимальное решение для реализации API.

Image for post
Project architecture

Сложные решенные технические проблемы


Ход разработки

В процессе разработки у каждого члена команды был свой стек задач.

Сергей (team leader). В процессе работы над проектом отвечал за:

Андрей: структура express-приложения, qr-код, интернационализация интерфейса, страница и компонент заказа в админе, сокеты на клиентской и серверной части, API для заказов, API для авторизации.

Кирилл: структура клиентской части, клиентская часть приложения, просмотр меню конкретного ресторана, реализация корзины, оформление заказа.

Рита: UI форма регистрации/логирования, страница настроек (admin side), компонент загрузки и отображения сохраненных изображений.


GitHub Commits

Image for post
Commits

Insights/Contributors

Image for post
Insights
Image for post
Contributors

Как обеспечивался контроль качества?

Участники команды создавали PR’s (Pull Request’s) в ветку dev которые оценивались и проверялись тим-лидером, при положительном решении или после устранения замечаний, изменения “вливались” в основную ветку проекта.


Заключение

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

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

ССЫЛКИ:

Подробная документация: Клац

Demo: Клац

Video Preview: Клац