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

СОДЕРЖАНИЕ

ВВЕДЕНИЕ………………………………………………………...…………………4

1 ПОСТАНОВКА ЗАДАЧИ СОЗДАНИЯ ИНСТРУМЕНТАЛЬНЫХ СРЕДСТВ МОБИЛЬНОГО ПРИЛОЖЕНИЯ ДЛЯ ИНФОРМИРОВАНИЯ ОБУЧАЮЩИХСЯ ОБ ИЗМЕНЕНИЯХ В РАСПИСАНИИ………….…………..6

2 АНАЛИЗ UI / UX РЕШЕНИЙ И ФУНКЦИОНАЛЬНЫХ ВОЗМОЖНОСТЕЙ АНАЛОГОВ ПРИЛОЖЕНИЯ…………………………….…………….…………..9

2.1 Важность дизайна UI/UX………………………………………………………..9

2.2 Приложение «Class Register»…………………….……………………………..12

2.3 Приложение «Easy Attendance»………………………………………………..18

2.4 Приложение «Attendance taker»………………………….…………………….23

Выводы по разделу 2………………………………………………………………..25

3 НАБОР ИНСТРУМЕНТОВ ДЛЯ СОЗДАНИЯ UI «FLUTTER И FIREBASE BAAS………………………………………….……………………………………..27

3.1 Flutter………………….…………………………………………………………27

3.2 Dart……………………………………………………………………………….30

3.3 Firebase………………………………………………………………………...…33

Выводы по разделу 3………………………………………………………………..37

4 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ……………………………………………..38

4.1 Структура программы…………………………………………………………..38

4.2 Описание разработанных алгоритмов…………………………………………41

4.3 Руководство пользователя……………………….……………………………..45

Выводы по разделу 4……………………………………………………………….720

Заключение……………………………………………………….…………………73

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ………………………………75

ВВЕДЕНИЕ

На сегодняшний день преподаватели в университетах до сих пор используют старые методы для информирования обучающихся об изменениях в расписании.

Большой объем бумаг со разных групп и предметов не является достаточно надежным и удобным способом организации информации об учебном процессе.

Стоит отметить, что ненадежность, порой, может привести к неприятным

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

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

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

Использование мобильных приложений среди пользователей мобильных устройств становится все более популярным. Согласно исследованию, AppAnnie в 2020 году, количество загрузок приложений увеличилась на 60%, потребительские расходы выросли более чем вдвое, а время, потраченное на приложение каждым пользователем, составляло около 43 дней в году [1].

Мобильные приложения играют все более важную роль в области образования, и при правильном проектировании и интеграции они могут обеспечить много преимуществ. AppAnie также прогнозирует рост на 270% рынка мобильных приложений до 2025 года [1].

Для решения проблемы недостаточно надежного и не удобного способа организации информации об учебном процессе были созданы следующие аналоги: "Class Register”, “Easy Attendance”, “Attendance Taker”. Однако, проблема остается не решенной, ведь аналоги имеют неудобный интерфейс и сложный опыт пользователя (UX) или недостаточные функциональные возможности.

Целью данной дипломной работы является создание мобильного приложения для информирования обучающихся об изменениях в расписании на примере Московского Университета имени С.Ю.Витте с интуитивным UI и легким UX и сохранением данных в облачном хранилище.

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

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

Задачами данной дипломной работы будут являться:

- изучение базовых подходов к проектированию мобильных приложений;

- анализ существующих критериев и показателей качества интерфейсов мобильных приложений;

- разработка порядка проектирования мобильного приложения для информирования обучающихся об изменениях в расписании;

- тестирование мобильного приложения на предмет работы.

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

1 ПОСТАНОВКА ЗАДАЧИ СОЗДАНИЯ ИНСТРУМЕНТАЛЬНЫХ СРЕДСТВ МОБИЛЬНОГО ПРИЛОЖЕНИЯ ДЛЯ ИНФОРМИРОВАНИЯ ОБУЧАЮЩИХСЯ ОБ ИЗМЕНЕНИЯХ В РАСПИСАНИИ

В соответствии с поставленной целью данной дипломной работы, как создание мобильного приложения для информирования обучающихся об изменениях в расписании на примере Московского Университета имени С.Ю.Витте с интуитивным UI и легким UX и сохранением данных в облачном хранилище, сформированы следующие подробные задачи:

1. Провести исследование современных цифровых методов информирования обучающихся об изменениях в расписании.

2. Провести сравнительный анализ существующих аналогов, в качестве мобильных приложений.

3. Определить основные функциональные возможности приложения на базе поставленных целей и выявленных недостатков, найденных в аналогах.

4. Создать концепт-диаграмму пользовательского опыта (UX) и определить дизайн пользовательского интерфейса (UI).

5. Спроектировать модель классов.

6. Выбрать технологии для реализации мобильного приложения.

7. Настроить систему Firebase, в качестве back-end части и интегрировать ее в мобильное приложение для получения доступа к облачному хранилищу.

8. Разработать необходимые виджеты приложения и объединить их.

9. Разработать функциональные возможности мобильного приложения.

10.Имплементировать запланированный дизайн приложения.

11.Объединить все составляющие программного обеспечения, в качестве финального программного продукта.

12. Протестировать мобильное приложение и исправить возможные ошибки и улучшить проблемные функциональные возможности.

Требования к разрабатываемому программному средству:

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

2. Инструментальные средства должны состоять из четырех подсистем:

- Система аутентификации.

- Система создания групп и предметов.

- Система контроля проведения лекций и практик.

- Система информирования учащихся об изменении в расписании.

3. Входными данными системы аутентификации должны быть электронная почта и пароль или существующий аккаунт Google.

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

5. Входными данными системы создания групп и предметов должны быть имена студентов, названия групп, названия предметов и их классификация.

6. Выходными данными системы создания групп и предметов должны быть изменения в расписании групп и предметов.

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

8. Выходными данными системы информирования обучающихся об изменениях в расписании должны быть сохранены входные данные.

9. Имеется возможность атворизации и регистрации.

10. Имеется возможность авторизации с помощью аккаунта Google.

11. Имеется возможность восстановления пароля к существующему аккаунту.

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

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

14. Имеется возможность создания групп, предметов с классификацией лекции и практики.

15.Имеется возможность изменения названия группы и занятий, а также удаление наименований из списка.

16.Имеется возможность удаления предметных практик или лекций.

17. Имеется возможность автоматического названия и нумерации уроков лекций и практик каждого предмета.

18. Имеется возможность изменения названия или удаления урока лекции или практики.

19. Имеется возможность автоматической привязки даты к уроку при его создании.

20. Имеется возможность изменения имени или удаления студента в пределах одного предмета.

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

Для разработки программного приложения был выбран язык программирования Dart и набор инструментов для создания пользовательского интерфейса Flutter.

Разработка будет происходить в среде программирования Microsoft Visual Studio Code. В качестве back end части был использован сервис Firebase, а именно Authentication Serviсe для создание расширенных возможностей авторизации и Cloud Firestore в качестве системы управление базами данных.

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

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

2 АНАЛИЗ UI / UX РЕШЕНИЙ И ФУНКЦИОНАЛЬНЫХ

ВОЗМОЖНОСТЕЙ АНАЛОГОВ ПРИЛОЖЕНИЯ

2.1 Важность дизайна UI/UX

Для успешного использования любого мобильного приложения важную роль занимает его UI / UX дизайн. Ведь, большое количество функциональных возможностей приложение всегда ограничено размером экрана мобильного устройства и «зоной большого пальца» на нем.

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

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

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

Поэтому цель UX дизайна максимально просто привести пользователя к его финальной цели и обеспечить решение проблемы.

UI (пользовательский интерфейс) дизайн ответственный за визуальное представление т. е. выбор цвета, читабельность текста, удобно ли пользователю нажимать пальцем на кнопки.

Как результат, задача UI / UX дизайна-повлиять на правильный выбор пользователя через созданный интерфейс. Создание всех условий для того, чтобы пользователь придерживался определенного алгоритма действий при работе с приложением на интуитивном уровне.

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

Сравнительный анализ аналогов будущего мобильного приложения позволяет:

1. Выявить слабые и сильные стороны оцениваемых объектов.

2. Расширить понимание целевой аудитории и предметной области

3. Создать собственное видение проекта и генерировать собственные идеи

Стоит отметить, что польза от изучения целевой аудитории и предоставляет большой такие преимущества при проектировании приложения:

1. Определены основные и второстепенные цели пользователей.

2. Определена мотивация пользователей.

3. Выявлены типичные проблемы пользователей.

4. Создан приоритет потребностей пользователя.

5. Сформирован портрет целевого пользователя.

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

UI – это связь пользователя с системой, который сильно влияет на UX. И для его успешной реализации стоит придерживаться определенных правил:

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

2. Цвет – является функциональной частью приложения. Выбор цвета связан на взаимодействии пользователя с системой. Цвет помогает акцентировать внимание, выделять различие между определенными элементами, а не только быть инструментом эстетики.

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

получение данных чем формы.

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

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

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

Приложения оцениваются по доступным функциональным возможностям и его качеством, красивым и интуитивным дизайном UI в соответствии с паттернов Material и Cupertino, и эффективным и простым UX.

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

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

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

Детальное рассмотрение и тщательный анализ помогли выявить удачные и плохие решение. С помощью данных полученных из этого анализа был найден баланс между самыми современными решениями UI / UX проблем и самыми главными функциональными возможностями данного приложения.

Большинство приложений можно скачать с сервиса цифрового распространение "Play Market", управляемый и разработанный Google. Данный сервис доступен для всех мобильных телефонов с операционной системой Android умолчанию, при наличии активированного Google аккаунта.

2.2 Приложение «Class Register»

Приложение "Class Register" можно скачать с сервиса цифрового распространения «Play Market» и запустить на операционной системе Android.

При первом запуске приложение отображает страницу от которой предлагается перейти к авторизации и регистрации нажав единую кнопку на экране, рисунок 2.1.

Рисунок 2.1- Первая страница приложения «Class Register»

Дизайн первой страницы примитивен, а кнопка для перехода к следующему экрану считается ненужной.

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

Рисунок 2.2 - Страница авторизации приложения «Class Register»

00

Для регистрации предлагается форма с полями имени, фамилии, электронной почты и пароля, рисунок 2.3.

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

Рисунок 2.3 - Страница регистрации «Class Register»

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

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

Рисунок 2.4 - Страница главного меню приложения «Class Register»

Рисунок 2.5 - Страница для информирования обучающихся об изменениях в расписании «Class Register»

Рисунок 2.6 – Модальное окно формы авторизации при переходе до этой страницы приложения «Class Register»

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

Вывод от анализа данного приложения - этот программный продукт не является независимой системой, позволяющей любому пользователю в любое время и в любом месте получить доступ к функциональным возможностям оценки и организации контроля посещений студентов. Кроме того, приложение нарушает несколько паттернов UI / UX, что еще больше отталкивает потенциального пользователя.

2.3 Приложение «Easy Attendance»

Приложение "Easy Attendance" можно скачать с сервиса цифрового распространения "App Store" и запустить на операционной системе iOS.

При запуске приложение отображает страницу авторизации, от которой также предлагается перейти к регистрации нажав кнопку «Register now» на экране, рисунок 2.7. Для авторизации предлагается стандартной формой для заполнения, а само поле электронной почты и пароль. Кроме того, есть возможность восстановить пароль через электронную почту в случае его потери.

Страница регистрации имеет стандартные поля полного имени пользователя, его электронной почты и пароль, подтверждение пароля, что является хорошим примером хорошего UX, рисунок 2.8.

Стоит отметить, что приложение предлагает быструю регистрацию с помощью уже существующих аккаунтов «Google» и «Facebook», что является очень удобным и быстрым способом начать пользовательскую сессию при этом не создавая отдельный аккаунт.

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

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

Одна из вкладок на панели навигации называется «Add/View», рисунок 2.9, и дает возможность пользователю добавить новый курс определенного предмета, рисунок 2.10, если он нажмет кноку "Add Course".

Во вкладке контроля посещения «Take» и во вкладке «Add/View» появляется создан курс, рисунок 2.11. Если пользователь нажимает на поле с именем курса в вкладке "Add/View", появляется страница курса, где он может добавить расписание заполнив отдельную форму.

Рисунок 2.7 – Страница авторизации приложения «Easy Attendance»

Рисунок 2.8 – Страница регистрации приложения «Easy Attendance»

Рисунок 2.9 – Страница добавления курсов приложения «Easy Attendance»

Рисунок 2.10 – Страница просмотра курсов приложения «Easy Attendance»

Рисунок 2.11– Список созданных курсов приложения «Easy Attendance»

Рисунок 2.12 – Интерфейс выбора даты проведения контроля посещения

приложение «Easy Attendance»

Рисунок 2.13 – Страница контроля посещения приложения «Easy Attendance»

Если пользователь нажимает на поле с именем курса во вкладке «Take», он имеет выбрать дату, когда будет проведено занятие, рисунок 2.12.

После этого, пользователь оказывается на странице посещения и имеет возможность отметить группу, относящегося к этому курсу, рисунок 2.13.

На первый взгляд приложение «Easy Attendance» выглядит неплохо, пользовательский интерфейс не перегружен и имеет более удобный пользовательский интерфейс опыт, чем «Class Register».

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

2.4 Приложение «Attendance taker»

Приложение "Attendance taker" можно скачать с сервиса цифрового распространения «Play Market» и запустить на операционной системе Android.

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

Главная страница имеет верхнюю панель навигации по трем доступным вкладкам, что является менее удобным способом навигации, чем нижняя панель навигации, рисунок 2.14.

В первой вкладке под названием "Class" пользователь имеет доступ к списку созданных курсов студентов и опции их создания. Нажав на кнопку добавления курса, в центре нижней части экрана. Пользователь должен ввести название курса в модальное окно.

После этого, в списке курсов появляется UI виджет с названием нового курса. Если нажать на этот виджет, приложение открывает экран редакции курса и позволяет добавить расписание этого курса.

Алгоритм добавления нового расписания выбранного курса идентичен алгоритму добавления нового курса.

Во вкладке под названием «Attendance» пользователь имеет возможность выбрать нужный курс, нажав на виджет с его названием, рисунок 2.15.

После этого, пользователь окажется на странице расписаний, где он имеет возможность заменить существующие предметы, рисунок 2.16.

Рисунок 2.14 – Главная страница приложения «Attendance taker»

Рисунок 2.15 - Вкладка "Attendance" со списком существующих групп приложения «Attendance taker»

Рисунок 2.16 - Страница информирования обучающихся об изменениях в расписании выбранной группы «Attendance taker»

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

Выводы по разделу 2

В разделе рассмотрены основные UX / UI проблемы и важность различных функциональных возможностей для достижения поставленной цели.

Были рассмотрены существующие мобильные приложения, являющиеся аналогами для решения задачи. Приложения Class Register, Easy Attendance, attendance taker имеют разные методы решения проблемы.

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

При создании программного продукта были проанализированы аналоги и определена целевая аудитория. На основе результатов обработки этих данных, было решено каким именно построить мобильное приложение.

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

Обычно каждый предметный курс имеет лекционные и практические сессии. При этом лекционные сессии определенного курса проводят одновременно для всех групп, имеющих в учебном плане этот курс.

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

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

Таким образом, определяется будет ли этот курс только лекционный, или только практическим или лекционным.

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

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

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

3 НАБОР ИНСТРУМЕНТОВ ДЛЯ СОЗДАНИЯ UI

«FLUTTER И FIREBASE BAAS

3.1 Flutter

Для выполнения поставленной задачи был использован Flutter – набор инструментов для разработки программного обеспечения с открытым кодом, созданный Google.

Flutter - это набор инструментов от Google для создания пользовательского интерфейса для создания красивых приложений, созданных для мобильных устройств, веба и настольных компьютеров из единой базы кода [3].

Главными преимуществами Flutter выделяют:

- Пользовательский интерфейс имеет быстрый цикл создания

- Возможно создание гибкого и выразительного интерфейса корисутвача

- Производительность нативных приложений операционных систем iOS и Android не выше приложений созданных с помощью Flutter

Архитектура фреймворка состоит из нескольких частей. Основные компоненты Flutter включают:

- Платформа Dart

- Двигатель Flutter

- Основная библиотека

- Виджеты, характерные для определенных дизайнов

Набор инструментов Flutter написан на языке Dart и успешно использует много усовершенствованных функциональных возможностей этого нового языка.

В Windows, macOS и Linux с официальным проектом Flutter Desktop Embedding Flutter работает в виртуальной машине Dart, которая имеет функциональный механизм исполнения.

При написании и отладке программы Flutter использует компиляцию Just In Time обеспечивает «горячую перезагрузку», с помощью чего модификации исходных файлов можно вводить в запущенную программу. Flutter распространяет это на поддержку стационарного «горячей перезагрузки», где в большинстве случаев изменения исходного кода могут быть отображены немедленно в запущенном приложении, не требуя перезагрузки или потери состояния.

Эта функция, реализованная во Flutter, получила широкую положительную оценку. Версии выпуска программ Flutter составлены с помощью досрочной (AOT) компиляции для Android и iOS, благодаря чему возможны высокие показатели работы Flutter на мобильных устройствах [4].

Движок Flutter, написанный главным образом на C ++, обеспечивает поддержку низкоуровневого визуализации с помощью графической библиотеки Skia от Google.

Кроме того, он взаимодействует с платформой, ориентированной на платформу SDK, такими, которые предоставляются Android и iOS. [4] Flutter engine-имеет портативные приложения для размещения программ Flutter. Он реализует основные библиотеки Flutter, включая анимацию и графику, ввод / вывод файлов и сетей, поддержку доступности, архитектуру плагинов и набор инструментов Dart.

Большинство разработчиков взаимодействуют с Flutter через Flutter Framework, который обеспечивает современный, отзывчивый фреймворк и богатый набор виджетов платформы, верстку и фундамент.

Основная библиотека, написанная на языке программы Dart, содержит основные классы и функции, используемые для построенной программы Flutter, как API для коммуникации с движком Flutter. [4]

Набор инструментов Flutter содержит два набора сегментов, которые выполняют конкретную дизайнерскую конструкцию. Используя Material Design, разработчик явно использует паттерны дизайна от Google, если же Cupertino, то паттерны дизайна от Apple, известные под названием Apple iOS Human Interface [3].

Дизайн интерфейса во Flutter обеспечивает выполнение композиций для разработки / создания приложения с другими оттенками. Раньше в производстве было хитростью использовать то, что любые компоненты имели древовидную структуру, собранные в рамках одного метода build (), также называются одинарным воспроизведением. Более того, эти небольшие результативные виджеты состоят из еще меньших результативных виджетов, и у каждого из них есть собственный метод build (). Вот как Flutter использует компиляцию.

Согласно документации: виджет - это неизменное описание части интерфейса пользователя. Логика этого, как у чертежа, это лучший способ понять его смысл. Однако нужно помнить, что у Flutter существует много разных типов виджетов, и их нельзя увидеть или коснуться на экране интерфейса. Текст является виджетом, но также его стиль тоже является виджетом, который определяет такие вещи, как размер, цвет, семейство шрифтов и вес.

Есть виджеты, которые представляют вещи, такие, которые представляют характеристики (например, TextStyle) и даже другие, которые делают разные вещи, например, FutureBuilder или StreamBuilder.

Сложные виджеты можно создать, совместив множество более простых, и весьприложение является самым большим из всех виджетов (часто называется "MyApp"). Виджет MyApp содержит все другие виджеты, которые могут содержать еще меньшие виджеты, и вместе они составляют ваше приложение.

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

Эта способность Flutter была использована в нескольких фреймворках, таких как игровой движок с открытым кодом Flame[8].

3.2 Dart

Dart - это клиенто-оптимизированный язык программирования для создания приложений на разных платформах. Разработанная компанией Google, она используется для создание мобильных, компьютерных, серверных и веб приложений [3].

Стоит отметить, что язык Dart базируется на классах и является объектно-ориентированным языком, имеющим встроенную технологию "garbage collector" и имеющую синтаксис подобный языки C. Этот язык может компилироваться в нативный код или JavaScript. Язык программирования Dart поддерживает возможность создания интерфейсов, абстракных классов, комбинаций, расширенную шаблонизацию, и умозаключения.

Существует четыре способа выполнения кода, написанного на языке Dart:

- Скомпилирован как JavaScript

Для запуска в основных веб-браузерах Dart полагается на компилятор от источника к источнику в JavaScript.

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

При запуске кода Dart в веб браузере код предварительно компилируется в код языка JavaScript с помощью компилятор dart2js. Скомпилированный как JavaScript, Dart - код совместим со всеми основными браузерами, у которых браузеры не нуждаются в принятии Dart. Благодаря оптимизации скомпилированного вывода JavaScript, чтобы избежать дорогих проверок и операций, код, записанный на языке Dart, может в некоторых случаях работать быстрее, чем эквивалентный код, написанный вручную, используя идиомы JavaScript. [3]

- Автономность

Инструментарий разработки программного обеспечения Dart (SDK) поставляется с автономной программой Dart VM, позволяющей выполнять код языки Dart в интерфейсе командной строки. Поскольку языковые средства, включенные в SDK Dart, написанные по большей части на Dart, автономная Dart VM является важной частью SDK. Эти инструменты включают компилятор dart2js и менеджер пакетов под названием pub.

Dart поставляется с полной стандартной библиотекой, что позволяет пользователям писать полностью работающие системные приложения, такие как пользовательские веб-серверы.

- Скомпилирован Ahead-of-time

Программный код языка программирования Dart можно компилировать AOT в машинный код (нативный набор инструкций). Программы, созданные с помощью Flutter, SDK для мобильных приложений, созданных с помощью языка Dart, размещаются в магазинах приложений как AOT, являющийся скомпилированным кодом Dart [5].

- Нативность

Язык программирования Dart может быть скомпилирован в нативный код для запуска мобильных приложений на устройствах с операционными системами iOS и Android через Flutter.

Дополнительные пакеты с библиотеками и утилитами распространяются через хранилище pub, которое по состоянию на весну 2015 года имеет более полутора тысяч пакетов, включая фреймворки для разработки веб-приложений AngularDart и polymer.dart [5].

Особенности языка Dart:

- знакомый и простой в изучении синтаксис, естественный для программистов в JavaScript, C и Java;

- обеспечение быстрого запуска и высокой производительности для всех современных веб-браузеров и различных типов сред, от портативных устройств к мощным серверам [10];

- возможность определения классов и интерфейсов, позволяющих использовать инкапсуляцию и повторно использовать существующие методы и данные;

Дополнительные инструкции по типу, независимо от того, использовать статические типы или нет, зависит от разработчика. Определение типов облегчает настройка и идентификацию ошибок, делает код более понятным и читаемым, упрощает его доработку и анализ сторонними разработчиками [10].

Среди поддерживаемых типов: различные типы хэшей, массивов и списков, очередей, числовых и строчных типов, типы определения даты и времени, регулярные выражения (RegExp).

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

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

Набор готовых инструментов для поддержки развития на языке Dart, включая реализацию динамических инструментов разработки и отладки с исправлением кода на ходу ("редактирование и продолжение") [10].

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

3.3 Firebase

Firebase - это платформа для разработки мобильных и веб-приложений, разработанная Firebase, Inc. в 2011 году, затем приобретена Google в 2014 году. По состоянию на март 2021 года платформа Firebase насчитывает 19 продуктов, используемых свыше 1,5 миллиона приложений.

Сервисы Firebase включают:

- Google Analytics

- Google Analytics - это бесплатное решение для измерения приложений, которое обеспечивает понимание использования приложения и привлечение пользователей [6].

- Firebase Cloud Messaging o ранее известный как Google Cloud Messaging (GCM), Firebase Cloud Messaging (FCM) - это кросс-платформенное решение для сообщений и уведомлений для Android, iOS и веб-приложений, которое по состоянию на 2016 год можно использовать бесплатно [6].

- Firebase Authentication. Аутентификация Firebase - это услуга, которая может аутентифицировать пользователей, используя только код на стороне клиента. Он поддерживает провайдеров социальных входов Facebook, GitHub, Twitter и Google, а также других поставщиков услуг, таких как Google Play Games, Apple, Yahoo и Microsoft. Кроме того, она включает систему управления пользователем, с помощью которой разработчики могут включать аутентификацию пользователя с помощью электронной почты и входа пароля, хранящиеся с Firebase.

- Firebase Realtime Database. Firebase предоставляет базу данных в реальном времени и бэк-энд-сервис как услугу. Служба предоставляет разработчикам приложений API, который позволяет синхронизировать данные приложений между клиентами и сохранять их в облаке Firebase.

Компания предоставляет клиентские библиотеки, обеспечивают интеграцию с приложениями Android, iOS, JavaScript, Java, Objective-C, Swift и Node.js. База данных также доступна через API REST и привязки для нескольких фреймворков JavaScript, таких как AngularJS, React, Ember.js и Backbone.js. API REST использует протокол Server-Sent Events, который является API для создания HTTP-соединений для получения push-сообщений от сервера.

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

- Cloud Firestore. Cloud Firestore - это быстрая, полностью управляемая без сервера базовая база данных NoSQL, которая упрощает хранение, синхронизацию и запрос данных для мобильных приложений, Интернета и IoT в глобальном масштабе.

Клиентские библиотеки обеспечивают живую синхронизацию и поддержку в автономном режиме, в то время как его функции безопасности и интеграции с Firebase и Google Cloud Platform (GCP) ускоряют создание программ без серверов.

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

Cloud Firestore имеет полную автономную поддержку, поэтому есть возможность получить доступ к своим данным и изменить их, и эти изменения будут синхронизированы с облаком, когда клиент вернется в Интернет.

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

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

- Firebase Hosting. Firebase хостинг - это статическая и динамическая веб-хостинг-служба, которая запустилась 13 мая 2014 года. Он поддерживает размещение статических файлов, таких как CSS, HTML, JavaScript и другие файлы, а также поддержку с помощью облачных функций.

Услуга доставляет файлы через сеть доставки содержимого (CDN) по с помощью HTTP Secure (HTTPS) и шифрования слоя защищенных сокетов (SSL). Firebase сотрудничает с CDN быстро, чтобы обеспечить поддержку CDN-хостинга Firebase.

Компания заявляет, что Firebase хостинг вырос из запросов клиентов; разработчики использовали Firebase для базы данных в реальном времени, но им нужно было место для размещения их содержимого [6].

- ML Kit. o ML Kit-это система обучения мобильных машин для разработчиков, запущена 8 мая 2018 года в бета-версии во время Google I / O 2018.

API ML Kit имеют разнообразные функции, включая оптическое распознавание символов, обнаружение лиц, сканирование штрих-кодов, маркировка изображений и распознавание ориентиров. Сейчас он доступен для разработчиков iOS или Android. Вы также можете импортировать собственные модели TensorFlow Lite,

Если данных API не хватает. API можно использовать на устройстве или в облаке.

- Crashlytics. Crash Reporting создает подробные отчеты об ошибках в приложении. Ошибки сгруппированы в кластеры похожих следов стека и вызываются серьезностью воздействия на пользователей приложений. Кроме автоматических отчетов, разработчик может регистрировать собственные события, чтобы помочь фиксировать шаги, ведущие к аварии [6].

- Performance. Эффективность Firebase позволяет понять эффективность программы и задержки пользователей, которые пользователи приложения.

- Firebase Test Lab. Тестовая лаборатория Firebase обеспечивает облачную инфраструктуру для тестирования приложений Android и iOS для одной операции.

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

- Admob. Admob - продукт Google, который интегрируется с аудиторией Firebase.

- Firebase Dynamic Links. Ссылка Dynamic Firebase - это умные URL-адреса, которые динамически изменяют свое поведение, чтобы обеспечить лучший доступный опыт на различных платформах, включая веб-браузеры для настольных ПК, iOS и Android, а также углубленные ссылки на мобильные приложения.

Динамические ссылки работают во всех установках приложений: если пользователь откроет Dynamic Link на iOS или Android, а приложение не установлено, пользователю будет предложено сначала установить приложение. После установки программа начнет работать и будет иметь доступ к ссылке.

В данной работе были использованы сервисы Firebase, имеющие название Firebase Authentication и Cloud Firestore.

Выводы по разделу 3

В этом разделе были рассмотрены использованные технологии Flutter, Dart и Firebase и их функциональные возможности.

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

Каждая из представленных технологий использует самые современные методы разработки программного обеспечения и подкрепляется Google Inc.

4 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ

4.1 Структура программы

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

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

Клиент - серверное приложение, при использовании которого пользователь получает данные из одного из сервисов Firebase, название которого Cloud Firestore. Пользователь может получить доступ к Cloud Firestore, только если его данные провалидированы правилами сервиса, в которых указано, что только клиент получил разрешение Authentication Service, может считывать и изменять данные, связанные с его аккаунтом.

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

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

Класс Model является главным связным классом, контрлює всю систему.

Cloud Firestore - это не реляционная база данных, хранящая все необходимые данные пользователя. Диаграмма структуры базы данных демонстрирует в каком виде сохраняются данные, связанные с пользователем, рисунок 4.3.

Рисунок 4.1– Схема работы системы мобильного приложения

Рисунок 4.2 - Диаграмма классов мобильного приложения

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

Рисунок 4.3 - Структура базы данных

Используя классы сущности, а именно Student, Group, Practice, Lecture, класс Model управляет изменениями в активных данных и посылает запрос на эти изменения с помощью класса FirebaseService.

Задача класса FirebaseService-отослать определенный запрос к сервису Firebase и получить его ответ, чтобы затем отправить данные резльтата запроса на обработку классом Model.

Классы сущностей, а именно классы Student, Group, Practice, Lecture имеют две главные задачи. Первая – это представление данных в удобном виде, что позволяет строить надежное приложение и избегать ошибок, связанных с типизацией данных. Вторая – это конвертация данных json файла, что приходит в качестве результата на запрос к Cloud Firestore.

4.2 Описание разработанных алгоритмов

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

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

Прецеденты лекции и практики были декомпозированы и представлены на рисунках 4.5 и 4.6.

Из данных диаграмм можно вывести следующие алгоритмы действий пользователя для достижения своей цели.

- Чтобы войти в систему, пользователь должен:

1. Зарегистрироваться.

2. Подтвердить адрес электронной почты.

3. Авторизоваться.

Или

1. Авторизоваться, используя аккаунт Google.

- Чтобы создать новый лекционный и / или практический курс, пользователь должен:

1. Определить название курса.

2. Выбрать группы, принадлежащие к нему.

3. Выбрать тип курса для каждой из выбранных групп.

4. Подтвердить создание курса.