CC BY
27
БУТКИНА А. А., КОМАРОВ Р. В.
ПРОЕКТИРОВАНИЕ И РЕАЛИЗАЦИЯ МОБИЛЬНОГО ПРИЛОЖЕНИЯ ДЛЯ ИНФОРМАЦИОННОГО ПОРТАЛА «ГОРОДСКИЕ РЕЙТИНГИ | САРАНСК»
Аннотация. В статье описан процесс создания мобильного приложения для информационного портала «Городские рейтинги | Саранск». На примере процесса реализации данного приложения рассмотрены базовые этапы разработки мобильного приложения: формулирование требований, проектирование и программная реализация компонентов, тестирование.
Ключевые слова: проектирование, разработка, тестирование, мобильное приложение, iOS, унифицированный язык моделирования, Model-View-Controller.
BUTKINA A. A., KOMAROV R. V.
DESIGN AND IMPLEMENTATION OF MOBILE APPLICATION FOR THE INFORMATION PORTAL "CITY RATINGS | SARANSK"
Abstract. The article considers the process of creating a mobile application for the information portal "City ratings | Saransk". Doing this project, the authors provide a description of the basic stages of the development of а mobile application: the formulation of requirements, design and implementing of the system components, testing.
Keywords: design, development, testing, mobile application, iOS, unified modeling language, Model-View-Controller.
Введение. В течение последнего десятилетия быстрыми темпами развивается рынок мобильных устройств. По данным отчета о состоянии цифровой сферы Digital 2020 [1], уже более 5 миллиардов людей используют мобильные телефоны. При этом на мобильные телефоны в настоящее время приходится больше половины времени, которое люди проводят в интернете — 50,1%, что естественно связано с появлением и бурным развитием мобильного Интернета. Изменилась в последний период и специфика использования «мобильного времени». Аналитическая платформа «App Annie» заявляет, что на мобильные приложения теперь приходится 10 из каждых 11 минут пользования мобильным устройством, а на просмотр веб-страниц уходит соответственно только 9% нашего «мобильного времени». Поэтому сложно переоценить все более возрастающую актуальность разработки мобильных приложений.
Целью данной работы является разработка мобильного приложения для операционной системы iOS, которое позволит пользователям получить доступ к информационному
контенту портала «Городские Рейтинги | Саранск». Для достижения поставленной цели в работе были поставлены и решены следующие задачи:
- изучить предметную область и сформулировать функциональные и нефункциональные требования к приложению;
- разработать архитектурную модель приложения;
- создать минималистичный и удобный дизайн мобильного приложения;
- реализовать приложение, отвечающее всем сформулированным требованиям;
- выполнить тестирование приложения.
Технологии реализации мобильного приложения. При разработке мобильного приложения для информационного портала «Городские Рейтинги | Саранск» был использован следующий стек технологий:
- кросс-платформенный онлайн-сервис Figma [2], применяемый при разработке дизайна экранов мобильного приложения;
- интегрированная среда разработки Xcode [3], выбранная для разработки приложения;
- язык программирования Swift [4], на котором создавалось приложение для iOS;
- библиотека Moya [5], выбранная для организации работы с сетью;
- библиотека Kingfisher [6], выбранная для загрузки и кэширования изображений из
сети;
- распределённая система контроля версий Git.
Проектирование мобильного приложения. Перед проектированием мобильного приложения были разработаны функциональные требования, нашедшие отражение в диаграмме вариантов использования, построенной при разработке концептуальной модели приложения (рис. 1).
Рис. 1. Диаграмма вариантов использования.
После описания приложения на концептуальном уровне была разработана его логическая модель, включающая описание основных классов системы и используемых в них полей и методы, а также диаграмму наиболее важных модулей приложения, описания значимых классов, показанную на рис. 2.
Рис. 2. Диаграмма классов.
Среди продемонстрированных на рисунке 2 классов наиболее важными являются:
- класс «MainViewController», который отвечает за отображение информации на главном экране. В этом классе происходит запрос к API для получения данных, а также выполняется конвертация полученных данных в вид, понятный пользователю;
- класс «PostViewController», который отвечает за отображение выбранной статьи при нажатии на соответствующую ячейку в таблице;
- класс «MenuViewController», который отвечает за управление основными экранами приложения, также в данном классе содержатся строка поиска и кнопки меню для перехода к нужной рубрике;
- структура «PostResponse», которая включает атрибут, содержащий в себе массив данных типа Post, в котором хранится вся информация, получаемая от сервера.
На следующем этапе проектирования архитектуры приложения была разработана модель реализации, учитывающая применяемый архитектурный шаблон Model-ViewController (MVC). Для представления модели реализации используется диаграмма компонентов, представленная на рисунке 3.
Рис. 3. Диаграмма компонентов.
В соответствии с разработанной моделью архитектура мобильного приложения делится на три уровня:
1. Уровень представления информации, на котором осуществляется взаимодействие приложения с пользователем посредством графического пользовательского интерфейса.
2. Уровень логики, на котором выполняется всё внутреннее взаимодействие между модулями приложения - происходят сетевые запросы, осуществляется передача данных между контроллерами, выполняется заполнение данными элементов отображения на экране.
3. Уровень данных, который содержит массив структур данных, который формируется в результате сетевого запроса к API из полученного в нем JSON ответа.
После завершения этапа разработки архитектурной модели приложения был разработан дизайн основных экранов мобильного приложения с помощью сервиса Figma -экран запуска приложения, главный экран, экран рубрик, экран статьи, экран поиска и меню.
Обзор основных модулей реализованного мобильного приложения. Перейдем к рассмотрению основных модулей, реализованных в мобильном приложении, которые были продемонстрированы на диаграмме компонентов (рис. 3):
1. Модуль «Статьи». Основной функцией мобильного приложения «Городские рейтинги | Саранск» является возможность просматривать статьи с одноименного портала. На главном экране представлены статьи, которые отображаются, начиная с последней опубликованной на данном портале (рис. 4).
Рис. 4. Главный экран приложения.
2. Модуль «Рубрики», который отображает статьи, соответствующие определенной рубрике с информационного портала, что является для той категории пользователей, которая следит только за новостями определенной тематики (рис. 5).
Сидим дома: готов
Рис. 5. Раздел рубрики.
3. Модуль «Просмотр статьи», который отвечает за отображение информации, содержащейся в статье, включая не только название и вступление, а также вложения, которые содержатся внутри статьи (рис. 6).
Рис. 6. Просмотр статьи.
4. Модуль «Поиск», отвечающий за поиск статей по ключевым словам (рис. 7).
X
Парк
ЛЮДИ ЕДА УСЛУГИ
МЕСТА ТОВАРЫ СОБЫТИЯ
БЛОГ РЕКЛАМА
А
К0Р0НЭ1 житель». 1стория ¿ранска
.|| МТ5 ПиБ ^
ицукенгшщзх фывапролджэ оячсмитьбюо
ф Пробел
Рис. 7. Поиск статей по словам.
123
"/У1"'
ПОИСК: ПАРК
Главный торговый центр Саранска: интервью с директором «Сити-Парка»
Вкусный дайджест: чем можно перекусить в Пушкинском парке
5. Модуль «Добавление комментариев», который позволяет пользователям просматривать существующие и оставлять новые комментарии под статьями (рис. 8).
.■I MTSRUS LTE
i
не в
a C0VID-19?
Чаще всего в вирус не верит старшее поколение, которое непосредственно находится в зоне риска, аргументируя это фразой «как можно верить в то, чего не видишь?». На такое реагирую негативно. Потому что это действительно очень страшно. Ты не знаешь, с чем борешься. Ты не знаешь, что будет с твоими родными. Ты не знаешь, как и чем помочь себе и своим близким. Но у меня, таких знакомых нет Я рада, что большинство относится к ситуации ответственно и делают все, чтобы вирус прекратил своё существование.
Комментарии (0)
I I Введите текст сообщения
Комментировать
Il MTS RUS LTE 19:30 ® < 100 %«Я
< = Û Ты не знаешь, что будет с твоими родными Ты не знаешь, как и чем помочь себе и своим близким. Но у меня, таких знакомых нет. Я рада, что большинство относится к ситуации ответственно и делают все, чтобы вирус прекратил своё существование.
Комментарии (0)
Тестовый комментарий
Комментировать
ицукен гшщз х
ф ы в а п Р О Л Д ж э
о я ч с M и т ь 6 ю а
123 4 S « Пробел L Готово 1
illMTSRUSLTE 19:30 ® -MOO Х Ш
< = й Ты не знаешь, что будет с твоими родными. Ты не знаешь, как и чем помочь себе и своим близким. Но у меня, таких знакомых нет, Я рада, что большинство относится к ситуации ответственно и делают все, чтобы вирус прекратил своё существование.
Комментарии (1)
К I Введите текст сообщения
Роман 2019.06.0419:30 Тестовый комментарий Ответить
Рис. 8. Добавление комментариев.
6. Модуль «Поделиться статьей», с помощью которого можно поделиться ссылкой на статью - отправить в различные социальные сети, в виде сообщения или на электронную почту, сохранить в облачное хранилище данных БгорЬох или же просто скопировать ссылку.
Рис. 9. Поделиться статьей.
7. Модуль «Оповещения», который позволяет уведомлять пользователей о публикации новых статей на портале.
Тестирование пользовательского интерфейса мобильного приложения. В
современном мире используется огромное количество устройств с различными характеристиками. Даже в актуальной линейке смартфонов Apple находится более 10 моделей с различными размерами экранов. Зачастую проблемой современных приложений является то, что не все интерфейсы хорошо адаптированы под это большое
количество диагоналей и разрешений. Если же интерфейс настроен только под одно устройство, то возникают большие проблемы при открытии приложения на других устройствах, поскольку все графические элементы могут «плавать по экрану» или же вообще пропадут из зоны видимости. Для проверки корректного отображения разработанного мной интерфейса я решил запустить приложение на 3 устройствах, на мой взгляд, с самыми распространенными размерами экранов:
1) ¡РИопе 5Б - экран 4 дюйма с разрешением 1136x640 пикселей;
2) ¡РИопе 8 - экран 4,7 дюйма с разрешением 1334x750 пикселей;
3) ¡РИопе 11 - экран 6,1 дюйм с разрешением 1792x828 пикселей.
В результате проведенного анализа работоспособности были получены следующие результаты, представленные на рис. 10. Таким образом, было продемонстрировано обеспечение соответствия стандартам пользовательского интерфейса разработанного мобильного приложения.
¡Phone 5S ¡Phone 8 ¡Phone 11
Рис. 10. Тестирование пользовательского интерфейса приложения.
Заключение. В ходе достижения поставленной цели работы были изучены принципы разработки мобильного приложения на платформе ЮБ, включая все основные стадии: формулирование функциональных и нефункциональных требований к приложению; проектирование архитектурой модели приложения, содержащей концептуальную и логическую модели, а также модель реализации; разработка дизайна 6 основных экранов приложения в соответствии с современными тенденциями; программная реализация всех модулей мобильного приложения, отвечающего всем сформулированным требованиям; тестирование приложения на мобильных устройствах с различными характеристиками.
СПИСОК ЛИТЕРАТУРЫ
1. Вся статистика интернета на 2020 год - цифры и тренды в мире и в России [Электронный ресурс]. - Режим доступа: https://www.web-canape.ru/business/internet-2020-globalnaya-statistika-i-trendy/ (дата обращения 25.09.2020).
2. Что такое Figma: возможности и принципы работы [Электронный ресурс]. - Режим доступа: https://skillbox.ru/media/design/chto_takoe_figma/ (дата обращения 25.09.2020).
3. Что такое Xcode? [Электронный ресурс]. - Режим доступа: https://apps.apple.com/ru/story/что-такое-xcode/id1439636456 (дата обращения 25.09.2020).
4. Swift (язык программирования) [Электронный ресурс]. - Режим доступа: https://ru.wikipedia.org/wiki/Swift_(язык_программирования) (дата обращения 25.09.2020).
5. Moya - как перестать беспокоиться о сетевой части и начать жить [Электронный ресурс]. - Режим доступа: https://habr.com/ru/post/332570/ (дата обращения 25.09.2020).
6. Kingfisher. [Электронный ресурс]. - Режим доступа: https://github.com/onevcat/Kingfisher (дата обращения 25.09.2020).
