CC BY
2426
TECHNICAL SCIENCE / «ШУУШШУМ-ЛШШаИ» #24»)), 2021
TECHNICAL SCIENCE
УДК: 004.422
Красноусов Виктор Михайлович, Калюжный Евгений Романович, Букреев Леонид Вячеславович, Зариковская Наталья Вячеславовна
Томский государственный университет систем управления и радиоэлектроники
ООО «АльдераСофт»
РЕАЛИЗАЦИЯ ФУНКЦИОНАЛА «КОРЗИНА» ДЛЯ МОБИЛЬНОГО ПРИЛОЖЕНИЯ
Krasnousov Viktor Mikhailovich, Kalyuzhny Evgeny Romanovich, Bukreev Leonid Vyacheslavovich, Zarikovskaya Natalia Vyacheslavovna
Tomsk State University of Control Systems and Radioelectronics
LLC «AlderaSoft»
IMPLEMENTATION OF THE "BASKET" FUNCTIONAL FOR A MOBILE APPLICATION Аннотация.
Реализован функционал Корзины мобильного приложения для платформы Android на языке программирования Dart.
Данный функционал направлен на обеспечение возможности добавления активностей и ресторанов в Корзину приложения, а также их редактирование, покупку и бронирование. Abstract.
Implemented the functionality of the Basket of the mobile application for the Android platform in the Dart programming language.
This functionality is aimed at providing the ability to add activities and restaurants to the Application Cart, as well as edit, purchase and book them.
Ключевые слова: мобильное приложение, корзина, турист, путешествия, активности, интеграция, дизайн, реализация.
Keywords: mobile application, shopping cart, tourist, travel, activities, integration, design, implementation.
При реализации мобильных приложений ориентированных на сферы услуг (покупки, бронирования и т.д.) наиболее важное значение имеет функционал, ориентированный на обеспечение возможности добавления активностей, например, ресторанов, мероприятий в общий список, находящийся внутри приложения, а также их редактирование, покупка и бронирование. Подобный функционал чаще всего принято называть «Корзина».
Функционал «Корзина» должен включать в себя интеграцию со сторонней платежной системой для проведения операций покупок товаров в корзине, а также экран для отображения результата платежной операции и списка купленных активностей, а также полностью интегрироваться с остальной частью реализованного мобильного приложения.
Также Корзина должна позволять пользователю указывать количество, например, билетов для конкретной активности и заполнять данные о каждом посетителе. После оплаты активностей, которые находились в списке Корзины, должен произойти переход на страницу со списком оплаченных активностей пользователя и возможностью добавления данных активностей в план путешествия.
В соответствии с требованиями предъявляемые к аналогичным приложениям, необходимо было реализовать следующий функционал:
- добавление активностей и ресторанов;
- возможность редактирования для выбранных активностей: дату, время, тариф, количество билетов и специфические атрибуты партнеров при необходимости;
- возможность редактирования атрибутов, необходимых для бронирования ресторанов;
- возможность удаления активностей и ресторанов из корзины;
- возможность добавления активностей и ресторанов из корзины в план поездки.
Для разработки клиентской части модуля «Корзина», выбраны следующие технологии: язык программирования Dart, кроссплатформенны-фреймворк Flutter.
Для реализации модуля «Корзина» мобильного приложения использовался язык программирования Dart [1].
Dart составляет основу Flutter. Dart предоставляет язык и среду выполнения, которые используются в приложениях Flutter, но Dart также поддер-
«етушшшм-лшшау» #24мт, 2021 / technical science
27
живает многие основные задачи разработчика, такие как форматирование, анализ и тестирование кода [2].
Flutter - кроссплатформенный фреймворк с открытым исходным кодом для создания мобильных приложений под Android и iOS, а также веб-приложений с использованием языка программирования Dart, разработанный корпорацией Google [3].
Дизайн пользовательского интерфейса приложений Flutter предполагает использование видже-тов. Все графические объекты, включая текст, формы и анимацию, создаются с помощью видже-тов, комбинированием простых виджетов создаются сложные виджеты.
Реализация данного приложения по своей структуре и функциональным возможностям достаточно тривиальна и подобна другим приложениям аналогичного профиля. Наибольший интерес представляет собой, учитывая функциональные возможности Корзины. именно описанию его реализации и посвящена данная работа.
Реализация мобильного приложения основывается на архитектурном шаблоне Bloc [4] (Бизнес-логика компонента), который позволяет отделять бизнес-логику приложения от пользовательского интерфейса, а также дает возможность переиспользовать некоторые компоненты бизнес-логики в других частях приложения.
Корзина позволяет пользователю производить оплату активностей через интегрированную систему платежей.
Общая клиентская часть представляет из себя мобильное приложение, состоящие из нескольких частей. Диаграмма компонентов, которая отображает архитектуру данной части мобильного приложения представлена на рисунке 1.
Среди указанных частей:
- авторизация и регистрация;
- профиль;
- планировщик активностей;
- список активностей и ресторанов;
- корзина;
- билеты.
Рисунок 1 - Диаграмма компонентов мобильного приложения
Исходя из функциональных и бизнес-требований, описанных выше, данный функционал предполагает отображение, хранение, а также возможность покупки всех добавленных активностей и ресторанов. Помимо этого, Корзина должна позволять пользователю вводить персональные данные посетителей, для которых происходит покупка билетов или бронирование ресторанов.
Для полноценной работы данного функционала требуется:
- экран с отображением всех добавленных активностей и ресторанов;
- интеграция с библиотекой для оплаты товаров из корзины;
- информация о стоимости отдельных товаров в корзине, а также итоговая стоимость покупаемых товаров;
- кнопка для перехода на экран оплаты;
- кнопка для добавления дополнительных билетов в корзину;
- кнопка для просмотра активностей, которые являются бесплатными;
- окно для выбора даты активности;
- анкета для заполнения персональных данных;
- анкета об отсутствии заболеваний;
- экран об успешной оплате активностей.
При разработке данного функционала в
первую очередь реализовывалась логика добавления товаров из разных частей приложения, также синхронизация и актуализация выбранных товаров в корзине с данными сервера приложения.
После синхронизации данных пользователь видит экран корзины с добавленными в него активностями и ресторанами. Помимо просмотра добавленных активностей, у пользователя существует возможность удаления активности и корзины, а также добавления активности в план.
Для того чтобы продолжить оформление товаров, пользователю необходимо заполнить данные
28
TECHNICAL SCIENCE / «ШЦУШШУМ-ЛШШаИ» #24»)), 2021
для каждой активности в корзине, при нажатии на кнопку «Билет», пользователю открывается модальное окно с календарем и заранее выбранное число активности, при этом пользователь может выбрать другую дату.
Пример экрана Корзина показан на рисунке 2.
Далее пользователю открывается окно для заполнения персональных данных для каждого выбранного билета активностей. Данный экран содер-
жит в себе данные о выбранной активности, название активности, выбранную дату и количество билетов, а также формы для заполнения персональных данных.
Когда все данные по активностям в Корзине приложения заполнены, пользователю становиться возможным нажать на кнопку «Перейти к оформлению». При нажатии на эту кнопку пользователь инициирует процесс покупки билетов.
Рисунок 2 - Скриншот экрана с добавленными элементами в Корзину
После совершения успешной оплаты товаров приложение перенаправляет пользователя на экран с оплаченными активностями, с поздравлением о покупке и информацией об оплаченных товарах.
Также в ходе реализации функционала Корзины, проведена полная интеграция с остальной частью мобильного приложения.
Реализованный функционал мобильного приложения направлен на обеспечение возможности добавления активностей и ресторанов в корзину приложения, а также их редактирование, покупку и бронирование.
Список литературы
1. Dart - официальный сайт [Электронный ресурс] - Режим доступа: https://dart.dev/overview, свободный (дата обращения: 08.08.2021).
2. Dart and Flutter - официальный сайт [Электронный ресурс] - Режим доступа: https://flutter.dev, свободный (дата обращения: 08.08.2021).
3. Flutter - официальный сайт [Электронный ресурс] - Режим доступа: https://flutter.dev/docs, свободный (дата обращения: 08.08.2021).
4. Bloc Architecture - официальный сайт [Электронный ресурс] - Режим доступа: https://bloclibrary.dev/#/architecture, свободный (дата обращения: 08.08.2021).
