MAFIA Pizza - Пицца с доставкой на дом

Клиент: сеть ресторанов в Московской области

Задача:

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

- Разработать маркетинговую стратегию

- Сделать полное брендирование

В рамках проекта было решено:

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

- Дизайн сайта

- Разработка BackEnd части приложения

- Разработка FrontEnd части приложения

- Интеграция со сторонними системами

- Тестирование системы

Дизайнером было предоставлено две версии сайта. (Мобильная и десктопная)

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

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

Общая информация

С целью облегчения интеграции со сторонними сервисами, а также с целью унификации функционала приложения на Android и iOs, через Web и пр. при разработке была реализована REST-архитектура. REST-архитектура основана на концепции MVC («модель-представление-контроллер»), которая является общепринятой в веб-разработке. 

Общая концепция приложения подразумевает упрощённое взаимодействие с CRUD-методами («создание, чтение, обновление, удаление»), посредством которых обеспечивается функционирование приложения (что подразумевает взаимодействие с базой данных, а также управление записями). 

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

Это позволило максимально оптимизировать трафик между сервером и клиентским приложением: за счёт малого объёма информации, которая пересылается на сервер и обратно, достигнута оптимальная скорость работы клиентских приложений. Приложения максимально независимы от сервера и работают только на данных, закодированных в JSON-строку, которую присылает сервер.

Организация базы данных

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

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

Контроллеры

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

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

Репозиторные и сервисные классы

Ввиду необходимости неоднократно осуществлять комплексные операции, которые задействуют более одной команды, для работы с моделями в базе данных используются репозиторные классы.

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

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

Проект включает в себя главную страницу, на которой сосредоточены все имеющиеся в продаже товары, распределённые по категориям. Также присутствует блок с акциями и часто заказываемыми товарами, исполненными в интерактивном стиле с помощью библиотеки «Swiper». 

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

В проекте используются CSS3-анимации, а также анимации с использованием svg. Вся вёрстка исполнена с помощью препроцессора SCSS, таск-менеджера gulp.

В проекте имеется корзина пользователя и окно с функционалом осуществления заказа и другие функциональные и интерактивные элементы. 

Вся логика сортировки, добавления/удаления товаров и др. выполнена с помощью инструментария Vue CLI, фреймворка Vue.js и нативного java-script. 

Для работы с API-интерфейсом использовалась библиотека Axios. Управление состояниями приложения выполнено с помощью библиотеки Vuex. Также использовалась библиотека vue-toastification для оповещения пользователя о различного рода событиях в приложении. Все имеющиеся формы в приложении заполняются безошибочно с помощью библиотеки Vuelidate. 

Для работы с геопозициями было выбран сервис «API Яндекс Карт», ввиду удобной функциональности и точности.

На вёрстку данного проекта было затрачено 10 рабочих дней.

На программирование FrontEnd-части проекта было затрачено 20 рабочих дней.

- Интеграция онлайн оплаты. Для реализации онлайн оплаты, был выбран сервис Яндекса с удобным Api интерфейсом и полной документацией к нему. По техническому заданию, нужно было реализовать оплату на разные расчетные счета в зависимости от выбора ресторана. Этот функционал был реализован с управлением в административной части интерфейса.

-Интеграция с системой «Юпитер»

Согласно техническому заданию от клиента, в функционал приложения была добавлена интеграция с системой ведения учёта ресторанных заказов «Юпитер». Система ведёт учёт заказов, с заданным интервалом загружая с FTP-сервера файлы с данными заказа в формате XML. 

Ввиду наличия у системы «Юпитер» своих собственных кодов для обозначения блюд в меню и зон доставки нами была создана динамическая таблица соответствия, которая ищет и подставляет нужный код. При оформлении заказа приложение дополнительно формирует xml-файл на основе шаблонизатора Blade, куда, руководствуясь прописанной логикой, подставляет данные заказа и клиента, а также определяет код зоны доставки по указанному клиентом адресу. После оформления xml-файл сохраняется во внутреннем хранилище на сервере приложения для верификации работы, а его копия загружается на указанный FTP-сервер. Настройки интеграции и FTP-сервера хранятся в формате JSON-строки на сервере, доступ к ним осуществляется посредством отдельно описанного сервисного класса.

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

Тестирование производилось с помощью технологии Selenium и языка программирования Python.

Selenium WebDriver — это инструмент для автоматизации действий веб-браузера. В большинстве случаев используется для тестирования Web-приложений, но этим не ограничивается. В частности, он может быть использован для решения рутинных задач администрирования сайта или регулярного получения данных из различных источников.

Тесты, прошедшие проверку:

(FrontEnd)

- Открытие страницы с разными городами

- Выбор блюд

- Перемещение в корзину

- Заказ (онлайн оплата, самовывоз, курьер)

(BackEnd и административная панель)

- Добавление городов

- Добавление категорий

- Добавление продуктов по категориям

- Управление онлайн оплатой

- Просмотр заказов

- Выгрузка заказов

- Передача заказов в сторонние сервисы

Все работы были выполнены согласно техническому заданию. Общие временные затраты на проект составили почти 3 месяца.