CC BY
37
УДК 004.415.25
ОСОБЕННОСТИ РАЗРАБОТКИ ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ СТУДИИ КРАСОТЫ НА ПЛАТФОРМЕ FLUTTER
Русу Яна Юрьевна
Студент, Калужский государственный университет им. К.Э. Циолковского етаН: RusuYY@studklg.ru
Кряжева Елена Вячеславовна
Кандидат психологических наук, доцент, Калужский государственный университет им. К.Э. Циолковского
В статье рассматриваются особенности разработки веб-приложения на платформе Flutter (на примере студии красоты). Авторы обращают внимание на то, что разработка мобильного приложения на Flutter строится на основе концепции виджетов. Виджеты комбинируются и выстраивают древо виджетов с четко определенной иеархией. Также авторами предлагаются примеры построения виджетов: корневой виджет, виджет со страницы регистрации, а также некоторые рабочие окна приложения.
Ключевые слова: студия красоты, мобильное приложение, Flutter, виджет, корневой виджет, меню приложения, БД Firebase.
FEATURES OF DEVELOPING A WEB APPLICATION FOR A BEAUTY STUDIO ON THE FLUTTER PLATFORM
Russu Y. Y.
Student, Kaluga State University named after K.E. Tsiolkovsky е -mail: RusuYY @studklg.ru
Kryazheva E. V.
Candidate of Psychological Sciences, Associate Professor of the Department of Computer Science and Information Technology, Kaluga State University named after K.E. Tsiolkovsky
The article discusses the features of developing a web application on the Flutter platform (using the example of a beauty studio). The authors draw attention to the fact that the development of a mobile application on Flutter is based on the concept of widgets. Widgets combine and build a widget tree with a well-defined hierarchy. Also, the authors offer examples of building widgets: the root widget, the widget from the registration page, as well as some working windows of the application.
Keywords: beauty studio, mobile application, Flutter, widget, root widget, application menu, Firebase database.
Разработка мобильного приложения на Flutter строится вокруг концепции виджетов. Сам по себе виджет это описание какого-либо конкретного элемента пользовательского интерфейса. При работе с Flutter виджеты комбинируются для того, чтобы получить законченный функциональный интерфейс пользователя. Основная цель такого подхода, сделать приложение модульным и легко масштабируемым. Стоит упомянуть о такой характеристике как сочетаемость
(composability), которая позволяет задавать виджету единственную и чётко определённую цель его использования.
При разработке приложения на Flutter виджеты комбинируются и выстраивают древо виджетов, с четко определённой иерархией. Каждый виджет является узлом в дереве и имеет единственный корневой элемент. Самым высокоуровневым виджетом является MaterialApp, который описывает то, как элементы должны выглядеть и
взаимодействовать друг с другом, делая их при этом более реалистичными. Так как он самый высокий то и записывается прямо в функцию runApp(), которая получается экземпляр класса Widget и делает его корневым элементом в дереве виджетов. Далее MaterialApp задают различные свойства, настраивают их и передают им следующий узел дерева со своим
виджетом [2]. На рисунке 1 можно увидеть, как с помощью различных свойств работает данный виджет. Здесь ему указано, где брать настройки темы, а также ссылку на запуск основного экрана под названием LoginView, где содержится интерфейс регистрации и логина пользователей.
Ч login_view.dart Л main.dart • .' pubspec.yaml
lib > f» main.dart > © main
1 import 'package:studiakrasoty/core.dart";
2 import 'package:flutter/material.dart';
Run | Debug | Profile
4 void Bain() async |]
5 await MainSetup.setupQ;
6 runApp(GetMaterialApp(
7 debugShowCheckedModeBanner: false.
8 initialRoute: '/',
9 theme: appThemeData,
le defaultTransition: Transition.fade.
11 hone: getHomeQ,
12 ));
13
14 Widget getHomeQ {
15 return LoginViewQ;
16 }
Рисунок 1 - Корневой виджет MaterialApp
Следующим виджетом подключается Scaffold, он объявляется на каждом новом экране приложения и накладывает определённую структуру на экран. С помощью свойств он позволяет использовать компоненты Material Design. Например, можно добавить свойство AppBar, а из него виджет AppBar, который располагается сверху экрана (образуя шапку) и может также содержать другие элементы (например, виджет поиска) [1].
Рассмотрим данный этап на примере страницы с логином (Рисунок 2). В функции
return объявлен виджет Scaffold, внутри него объявлено свойство body, которое отвечает за размещение контента по всему экрану. Внутри свойства body располагаются все остальные виджеты, которым задаются свои собственные свойства и, если необходимо, еще один уровень виджетов. Свойства виджетам можно задавать прямо здесь, но чаще всего объявляется их название, а свойства и все возможные настройки хранятся в отдельном файле.
Рисунок 2 - Структура построения виджетов на странице с регистрацией
Таким образом и строятся все остальные страницы приложения. Сначала объявляется виджет высокого класса, который с помощью своих свойств позволяет размещать виджеты более низкого уровня.
Такой подход в разработке позволяет очень гибко настраивать своё мобильное
приложение, однако каждый экран приложения, большинство размещенных виджетов раздувают готовый проект. Поэтому все виджеты и прочие страницы размещают, как правило в определённых папках [3].
На рисунке 3 можно увидеть структуру размещения папок и файлов, а также то, как в
Flutter устанавливаются все необходимые виджеты. Для их установки требуется в файле «pubspec.yaml» написать название виджета и необходимую его версию [6]. Далее Flutter после сохранения автоматически его установит и разместит в определённой папке. Большинство сгенерированный таким образом файлов трогать нежелательно, так как они, как правило, содержат настройки компонентов и всё может попросту сломаться. Однако с некоторыми работа происходит постоянно и
такими являются следующие папки: 1) android и ios - содержат файлы с android или ios приложением, к ней как правило обращаются если необходимо разработать специфичную для платформы функцию; 2) lib - главная директория, где и пишется основной код (содержит начальный файл main.dart); 3) assets - содержит все различные картинки, аудио и видео; 4) все остальные папки и файлы являются служебными.
Рисунок 3 - Структура папок и файлов в Flutter
Так и ведётся разработка мобильного приложения на платформе Flutter. После разработки приложения и создания рабочего варианта необходимо разработать инструкцию к его применению.
У мобильного приложения имеются собственные входы для клиента, сотрудника и администратора. Опишем рекомендации к применению приложения для каждого из них.
1) Рекомендация к применению для администратора. При первом запуске
приложение потребует вести почту администратора приложения. После его ввода станет доступна страница с логином, где есть отдельная вкладка для входа как администратор. После того, как админ зайдет под своей ранее указанной почтой ему будут доступны настройки приложения и управления базы данных (БД0 Firebase (Рисунок 4).
Рисунок 4 - Меню администратора
Администратор может просмотреть всех зарегистрированных клиентов, сотрудников (вкладка менеджер Студии Красоты), а также сбросить настройки БД, вернув приложение в положение «первый запуск», где снова
потребуется ввод почты администратора. Ему доступно управление студией красоты, где он может посмотреть всю историю заказов от клиентов, переписку между клиентом и одним из его сотрудников, а также внести коррективы
во внесенную информацию о деятельности студии [4].
2) Рекомендация к применению для сотрудника. После входа в приложении сотрудник видит следующее меню (Рисунок 5).
Рисунок 5 - Меню приложения для сотрудников
В первой вкладке сотруднику выдаётся информация о всех записях, которые ожидают подтверждения, уже подтверждены или по какой-либо причине получили отказ. Сотрудник на данной вкладке выдаёт записям соответствующий статус. Здесь же он может связаться с клиентом используя мессенджер, а также просмотреть календарь записей. Далее
содержится вкладка с услугами студии, где сотрудник может редактировать информацию о них, например изменить цену, поменять номер телефона для связи и т.д. [5].
3) Рекомендация к применению для клиентов. Как только клиент залогинился в приложении ему доступно следующее меню (Рисунок 6):
Ваш профиль при записи в студию
(Буриличев (Борис
<BuriCicfiev(Be[/@ stucCkJg. ru
о #
Рисунок 6 - Меню приложения для клиентов
Так, для клиентов доступно три активные вкладки. Первая связана с бронированием, где отображается статус записи, работает точно также, как и у сотрудника за исключением возможности подтверждать или отклонять записи. Здесь же имеется возможность связаться с мастером, оказывающим выбранную услугу, просмотреть всю история мессенджера, а также просмотреть все оповещения от приложения. Оповещения приходят автоматически, когда клиенту поступает сообщение, изменяется статус записи или сотрудник начал рассылку писем с действующими акциями.
Вторым является вкладка с возможностью записи по категориям услуг. У клиента может сортировать услуги по рейтингу (на основе отзывов) и по времени. Выбрав услугу, клиент нажимает кнопку просмотреть и переходит на страницу записи, где выбирает конкретную услугу, время записи и мастера. Под конец появляется экран со всеми выбранными настройками записи, и, если все верно, подтверждает её.
Третья вкладка профиля, которая содержит информацию о клиенте, его ФИО и почту. По умолчанию она заполнена данными, которые клиент записал в своей почте google.
Здесь он имеет возможность изменить их, а также выйти из аккаунта, если ему так захочется.
Результатом работы становится готовое мобильное приложение для студии красоты. В нём размещается информация о деятельности студии красоты, оказываемых ею услугах. Приложение даёт возможность клиенту записываться в студию, выбрав мастера и время. Если возникают какие-либо вопросы возможно использование мессенджера. Для управления приложением и клиентами студии имеется привилегированный пользователь, который занимает статус администратора.
Специализированное мобильное
приложение однозначно упростит
взаимодействие клиентов с администрацией салона, а также поможет расширению клиентской базы и продвижению салона на в сфере красоты. Сам интерфейс достаточно простой и интуитивно понятный для обычного, среднестатистического пользователя. Все это поспособствует увеличиванию
конкурентоспособность в данной индустрии, а внедрение инноваций поможет постоянно модернизировать и избежать появление ошибок в приложении.
Дальнейшее развитие приложения включает совместное функционирование с вебсайтом и дополнение новыми возможностями.
ЛИТЕРАТУРА
1. Разработка и создание мобильных приложений для Android // Разработка мобильных сервисов URL: https://appcraft.pro/blog/razrabotka-prilozhenij-dlja-android/ (дата обращения: 24.11.2021).
2. Разработка мобильных приложений // ИИ для бизнеса URL: https://polygant.net/ru/mobiledev/razrabotka-mobilnykh-prilozhenij/ (дата обращения: 12.10.2021).
3. Разработка мобильных приложений от А до Я // Мобильная разработка URL: https://dan-it.com.ua/blog/razrabotka-mobilnyh-prilozhenij-ot-a-do-ja-polnyj-gajd/ (дата обращения: 08.10.2021).
4. Руководство пользователя. Советы для составления // Сообщество системных аналитиков URL: http://analyst.by/articles/rukovodstvo-polzovatelya-sovetyi-dlya-sostavleniya (дата обращения: 30.11.2021).
5. Составление руководства пользователя // Сайт пошаговых инструкций URL: https://ru.wikihow.com/составить-руководство-пользователя (дата обращения: 01.12.2021).
6. Этапы разработки мобильного приложения: от проектирования до релиза // Цифровые решения URL: https://yasno.mobi/blog/etapy-razrabotki-mobilnogo-prilozheniya-ot-proektirovaniya-do-reliza/ (дата обращения: 29.10.2021).
