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

Реализация интерфейса приложения

Реализация интерфейса осуществлялась с помощью инструмента построения интерфейса Storyboard. В силу того, что приложение подразумевает большой набор различных экранов, было принято решение разделить главный сториборд на несколько семантически разделённых сторибордов [18]:

Main (основной сториборд с главной страницей);

Scanning (сториборд для сценария сканирования);

Profile (сториборд для просмотра информации о профиле и датчиках).

Разделение сторибордов производилось с помощью инструмента Storyboard Reference. Сами сториборды изображены на рисунках 3.15-3.17:



Рисунок 3.15 - Storyboard «Main»

Рисунок 3.16 - Storyboard «Scanning» Рисунок 3.17 - Storyboard «Profile»



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

Рисунок 3.18 - Меню приложения

Просмотр информации

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

Профиль пользователя

Также пользователю необходима возможность просмотра данных о своём профиле. Экран с информацией о профиле изображён ниже (см. рис. 3.19):



Рисунок 3.19 - Экран профиля пользователя

При нажатии на кнопку Мои датчики происходит переход к списку датчиков, закрепленных за пользователем (см. рис. 3.20). Важно отметить, что формирование значений для каждого из датчиков происходит на основе генератора случайных чисел с определенным диапазоном. Для определения критического значения используется порог равный 0.8 от максимально допустимого значения.

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

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



Рисунок 3.20 - Экран с двумя критическими датчиками

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

Категории умного города

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

Главная страница изначально создаёт запрос на получение списка фильмов, а затем отображает их при успешном получении (см. рис. 3.23). Пока запрос находится в обработке, отображается индикатор загрузки, реализованный с помощью библиотеки Lottie [17] (см. рис. 3.22).

Рисунок 3.22 - Главный экран с загрузкой списка фильмов Рисунок 3.23 - Главный экран после получения данных

Нажимая на необходимый объект, пользователь может перейти к его детальному представлению (см. рис. 3.24). Поскольку, например, поле с описанием фильма не является обязательным объектом внимания, но может занимать весомое место в интерфейсе пользователя, было принято решение изменить стандартное значение высоты на уровень достаточный для просмотра первых 3 строк (1-2 предложения). Пользователь может увеличить высоту элемента нажатием на элемент (см. рис. 3.25):

Рисунок 3.24 - Экран с информацией о фильме, скрытое описание Рисунок 3.25 - Экран с информацией о фильме, открытое описание

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

Сканирование метки

Для получения информации о здании пользователь может просканировать соответствующую метку. Для реализации данной функциональности использовался фреймворк AVFoundation [5], созданный Apple. Важно отметить, что во избежание непреднамеренного сканирования любого кода, попавшего в объектив камеры, было принято решение ограничить сканируемую область до квадрата размером чуть менее одной трети экрана.

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

Рисунок 3.26 - Экран сканирования метки

При наведении целевой области на QR-код происходит проверка его значения на целое число. При недействительном QR-коде пользователь получает соответствующее уведомление (см. рис. 3.27). При успешной же проверке на сервер отправляется запрос, а пользователю показывается статус «Обрабатываем» (см. рис. 3.28).

Рисунок 3.27 - Уведомление о недействительном QR-коде Рисунок 3.28 - Ожидание выполнения запроса

При неполучении результата от сервера пользователь получает соответствующее уведомление (см. рис. 3.29). При успешном получении данных пользователю показывается диалоговое окно с уменьшенным изображением здания и его названием (см. рис. 3.30):



Рисунок 3.29 - Уведомление о неполучении результата Рисунок 3.30 - Экран подтверждения результата

Далее, при нажатии кнопки «Просмотреть» происходит переходит к списку организаций внутри здания (см. рис. 3.31):



Рисунок 3.31 - Экран со списком организаций внутри

Тестирование

Для того, чтобы система работала исправно и не выдавала необработанных исключений при работе с приложением, необходимо провести тестирование по стратегии черного ящика и выявить все возможные недочёты без знания внутреннего устройства программы [2]. Результаты тестирования представлены в таблицах В.1-В.3 приложения В. Общее количество проведённых тестов - 35. Необработанных исключений обнаружено не было.



Заключение

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

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

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

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

В дальнейшем планируется ряд дополнений к текущей реализации настоящего приложения:

локальное хранение данных (кэширование);

возможность просмотра PDF-документов (планировок квартир, расположения объектов и прочего);

уведомление пользователя на основе сервиса пуш-уведомлений;

добавление других категорий умного города.



Библиографический список

1. Harrison C. et al. Foundations for smarter cities // IBM Journal of research and development. - 2010. - Т. 54. - №. 4. - С. 1-16.

2. Huang X., Yuan J., Shi M. Condition and key issues analysis on the smarter tourism construction in China // International Conference on Multimedia and Signal Processing. - Springer, Berlin, Heidelberg, 2012. - С. 444-450.

3. Komninos N., Pallot M., Schaffers H. Special issue on smart cities and the future internet in Europe // Journal of the Knowledge Economy. - 2013. - Т. 4. - №. 2. - С. 119-134.

4. Lee J. H., Phaal R., Lee S. H. An integrated service-device-technology roadmap for smart city development //Technological Forecasting and Social Change. - 2013. - Т. 80. - №. 2. - С. 286-306.

5. Ritchie J. R. B., Crouch G. I. The competitive destination: A sustainable tourism perspective. - Cabi, 2003.



Приложение

Техническое задание

ПРОЕКТИРОВАНИЕ iOS-ПРИЛОЖЕНИЯ ДЛЯ УМНОГО ГОРОДА

Техническое задание

ЛИСТОВ 6

2020

УТВЕРЖДАЮ

Руководитель

к.т.н., доцент кафедры

информационных

технологий в бизнесе

технологий в бизнесе

_____________Дерябин А. И. “_____”____________202__

ПРОЕКТИРОВАНИЕ iOS-ПРИЛОЖЕНИЯ ДЛЯ УМНОГО ГОРОДА

Техническое задание

Лист утверждения

Руководитель

к.т.н., доцент кафедры

информационных

технологий в бизнесе

технологий в бизнесе

_______________Дерябин А. И. “_____”____________202__

Ответственный исполнитель Студент группы БИ-16-1 4 курса факультета экономики, менеджмента и бизнес-информатики

_____________Паршаков А. Э. “_____”____________202__

2020

Введение

Наименование программы

Мобильное приложение для считывания и предоставления информации о местах умного города, являющееся частью системы «Информационная система для сбора, хранения и обработки данных в умном городе» версии 1.0 (далее - Приложение и Система, соответственно).

Краткая характеристика области применения программы

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

Основание для разработки

Основание для проведения разработки

Тема работы на разработку мобильного приложения согласована с доцентом кафедры информационных технологий в бизнесе факультета экономики, менеджмента и бизнес-информатики НИУ ВШЭ - Пермь, Дерябиным А. И. 12.11.2020.

Наименование и условное обозначение темы разработки

Наименование темы разработки - «Проектирование iOS-приложения для умного города».

Назначение разработки

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

Функциональным назначением программы является предоставление пользователю возможности сканировать метку (QR-код) и предоставлять пользователю данные инфраструктурного, которая соответствует метке.

Эксплуатационное назначение программы

Программа предназначена для эксплуатации на смартфоне с операционной системой iOS.

Требования к программе

В таблице А.1 представлены требования к программе:



Таблица А.1 - Требования к программе

Требования	Методика проверки требований
Система должна обладать следующими свойствами: Привычно-ассоциируемым интерфейсом. Надёжность. Быстрота ответа на запрос. Корректная и верная реализация запросов пользователя.	Для работы с программой пользователю не требуется специальное обучение. Интерфейс привычно-ассоциируем. Программа не расходует чрезмерное количество ресурсов и не приводит систему к затормаживанию. Программа оперативно выполняет все запросы пользователя. Программа корректно отображает результаты запросов пользователя.
Функции системы: Сканирование визуальной метки. Отправка запросов к серверу. Отображение данных от сервера.	Предоставить доступ к камере и навести зону сканирования на метку. Отправить запрос на получение полной информации о здании. Принять данные от сервера и отобразить их для пользователя.
Входные данные: вводятся вручную	Проверка вручную
Требования к обеспечению надёжного (устойчивого) функционирования программы	Надёжное функционирование программы должно быть обеспечено выполнением совокупности организационно-технических мероприятий: Организацией достаточного питания мобильного устройства. Организацией подключения к интернету. Допуска приложения к регулярным обновлениям.
Условия эксплуатации: Климатические условия эксплуатации Требования к видам обслуживания Требования к численности и квалификации персонала	Климатические условия не имеют значения. Требования к видам обслуживания отсутствуют. Требования к численности и квалификации персонала отсутствуют.
Требования к составу и параметрам технических средств	Минимальная версия системы: iOS 10.
Требования к исходным кодам и языкам программирования	В качестве языка программирования должен использоваться Swift.
Требования к защите информации и программ	Требования к защите информации и программ отсутствуют.
Требования к маркировке и упаковке	Требования к маркировке и упаковке отсутствуют.
Требования к транспортированию и хранению	Требования к транспортированию и хранению отсутствуют.

Требования к программной документации

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

Таблица А.2. Требования к программной документации

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

Технико-экономические показатели

Ориентировочная экономическая эффективность

Ориентировочная экономическая эффективность не рассчитывается.

Предполагаемая годовая потребность

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

Экономические преимущества разработки

Экономические преимущества разработки не рассчитывается.

Стадии и этапы разработки

Стадии разработки

Разработка должна быть проведена в две стадии:

1) разработка технического задания;

2) проектирование;

3) реализация.

Этапы разработки

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

На стадии проектирования должны быть выполнены перечисленные ниже этапы работ:

1) построение модели процесса TO-BE;

2) проектирование пользовательского интерфейса.

На стадии реализации должны быть выполнены перечисленные ниже этапы работ:

1) Создание API;

2) Реализация мобильного приложения в полном или частичном (обсуждается с заказчиком) соответствии с результатами, полученными на стадии проектирования.

Содержание работ по этапам

На этапе разработки технического задания должны быть выполнены перечисленные ниже работы:

постановка задачи;

определение требований к программе;

определение стадий, этапов и сроков разработки программы и документации на неё;

выбор языков программирования и прочих технологий;

согласование и утверждение технического задания.

На этапе разработки программы должна быть выполнена работа по программированию и отладке программы.

На этапе разработки программной документации должна быть выполнена разработка программных документов в соответствии с требованиями ГОСТ 19.101-77 и требованием п. «Предварительный состав программной документации» настоящего технического задания.

На этапе испытаний программы должны быть выполнены перечисленные ниже виды работ:

1) разработка, согласование и утверждение программы и методики испытаний;

2) проведение приёмо-сдаточных испытаний;

3) корректировка программы и программной документации по результатам испытаний.

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

Описание прецедентов

Таблица Б.1. Описание прецедента «Сканировать метку»

Краткое описание	Сканирование метки, находящейся на здании, с помощью камеры смартфона.
Акторы	Пользователь.
Предусловия	Пользователь подошёл к сканируемой метке на расстояние не более 2 метров.
Основной поток	Нажать кнопку сканирования. Дать доступ к использованию камеры (при первичном использовании). Направить камеру на метку так, чтобы она поместилась в специально выделенной сканируемой области.
Альтернативные потоки	Если доступ к камере не предоставлен, приложение предложит перейти в настройки для предоставления доступа. В случае отказа сканирование невозможно до тех пор, пока пользователь не перейдёт к настройкам приложения вручную и не предоставит доступ.
Постусловия	Серверу отправлен запрос на получение данных о метке.

Таблица Б.2. Описание прецедента «Просмотреть данные об объекте с соответствующей меткой»

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



Таблица Б.3. Описание прецедента «Просмотреть список объектов»

Краткое описание	Просмотреть различные списки объектов умного города.
Акторы	Пользователь.
Предусловия	Пользователь открыл меню необходимой категории.
Основной поток	Перейти в меню «Главная» или меню категории на выбор. Просмотреть список объектов.
Альтернативные потоки	Отсутствие подключения к интернету, вследствие чего отправка запроса к серверу невозможна, и пользователю показывается соответствующее предупреждение.
Постусловия	Отсутствуют.

Таблица Б.4. Описание прецедента «Просмотреть данные об объекте»

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

Таблица Б.5. Описание прецедента «Просмотреть информацию с датчиков»

Краткое описание	Просмотр информации об интересных исторических событиях, связанных с отсканированным зданием.
Акторы	Пользователь.
Предусловия	Пользователь отсканировал метку и подтвердил найденный адрес.
Основной поток	Перейти в профиль пользователя. Нажать кнопку «Датчики». Просмотреть данные, при необходимости используя прокрутку вниз/вверх.
Альтернативные потоки	Отсутствуют датчики, привязанные к пользователю. В таком случае кнопка перехода к просмотру данной информации будет отсутствовать. Отсутствие подключения к интернету, вследствие чего отправка запроса к серверу невозможна, и пользователю показывается соответствующее предупреждение.
Постусловия	Данные об инфраструктуре и данные о датчиках сохранены локально, а также записаны в историю просмотров.

Тестирование

Таблица В.1. Тестирование главного экрана

№	Входные данные	Ожидаемый результат	Реальный результат	Рез-т
1	Первичный запуск приложения	Фильмы и рестораны отображаются	Запросы серверу отправлены	+
2	Пролистывание списка фильмов вправо	Правый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	Правый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	+
3	Пролистывание списка фильмов влево	Левый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	Левый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	+
4	Нажатие на контейнер с фильмом	Открывается экран просмотра информации о фильме	Открывается экран просмотра информации о фильме	+
5	Нажатие на изображение с фильмом	Анимированное открытие информации о фильме (перенос контейнера с изображением и названием на верх нового экрана)	Анимированное открытие информации о фильме (перенос контейнера на верх нового экрана)	+
6	Пролистывание списка ресторанов вправо	Правый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	Правый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	+
7	Пролистывание списка ресторанов влево	Левый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	Левый контейнер обретает более полный цвет и увеличивается; Центральный контейнер выцветает и уменьшается	+
8	Нажатие на контейнер с фильмом	Открывается экран просмотра информации о фильме	Открывается экран просмотра информации о фильме	+

Таблица В.2. Тестирование меню

№	Входные данные	Ожидаемый результат	Реальный результат	Рез-т
9	В меню нажата кнопка «Профиль», предыдущая страница отлична	Происходит переход к экрану профиля с перезагрузкой жизненного цикла	Происходит переход к экрану профиля с перезагрузкой жизненного цикла	+
10	В меню нажата кнопка «Профиль», предыдущая страница идентична	Происходит переход к экрану профиля без перезагрузки жизненного цикла	Происходит переход к экрану профиля без перезагрузки жизненного цикла	+
11	В меню нажата кнопка «Главная», предыдущая страница отлична	Происходит переход к главному экрану с перезагрузкой жизненного цикла	Происходит переход к главному экрану с перезагрузкой жизненного цикла	+
12	В меню нажата кнопка «Главная», предыдущая страница идентична	Происходит переход к главному экрану без перезагрузки жизненного цикла	Происходит переход к главному экрану без перезагрузки жизненного цикла	+
13	В меню нажата кнопка «Развлечения», предыдущая страница отлична	Происходит переход к экрану развлечений с перезагрузкой жизненного цикла	Происходит переход к экрану развлечений с перезагрузкой жизненного цикла	+
14	В меню нажата кнопка «Развлечения», предыдущая страница идентична	Происходит переход к экрану развлечений без перезагрузки жизненного цикла	Происходит переход к экрану развлечений без перезагрузки жизненного цикла	+
15	В меню нажата кнопка «Кафе и рестораны», предыдущая страница отлична	Происходит переход к экрану кафе и ресторанов с перезагрузкой жизненного цикла	Происходит переход к экрану кафе и ресторанов с перезагрузкой жизненного цикла	+
16	В меню нажата кнопка «Кафе и рестораны», предыдущая страница идентична	Происходит переход к экрану кафе и ресторанов без перезагрузки жизненного цикла	Происходит переход к экрану кафе и ресторанов без перезагрузки жизненного цикла	+

Таблица В.3. Тестирование экранов профиля и датчиков

№	Входные данные	Ожидаемый результат	Реальный результат	Рез-т
17	Осуществлён переход к экрану профиля	Кнопка «Мои датчики» акцентирована градиентной заливкой	Кнопка «Мои датчики» акцентирована градиентной заливкой	+
18	Осуществлён переход к экрану профиля	Отображаются опции по настройке профиля	Происходит переход к экрану профиля без перезагрузки жизненного цикла	+
19	Осуществлён переход к экрану с датчиками	Датчики отображаются в виде списка	Датчики отображаются в виде списка	+
20	Среди датчиков есть превышающий максимально допустимый порог	Значок статуса в красном цвете и анимируется раз в 5 секунд	Значок статуса в красном цвете и анимируется раз в 5 секунд	+
21	Среди датчиков есть превышающий максимально допустимый порог, пользователь остаётся внутри приложения в течение 30 секунд	Появляется уведомление о наличии критического значения у датчика	Появляется уведомление о наличии критического значения у датчика	+
22	Среди датчиков есть превышающий максимально допустимый порог, пользователь покидает приложение (не выбрасывая из памяти) на 30 секунд	Появляется уведомление о наличии критического значения у датчика	Появляется уведомление о наличии критического значения у датчика	+
23	Среди датчиков есть приближающийся к максимально допустимому порогу	Значок статуса в жёлтом цвете, не анимируется	Значок статуса в жёлтом цвете, не анимируется	+
24	Среди датчиков есть находящийся в пределах нормы	Значок статуса в зелёном цвете, не анимируется	Значок статуса в зелёном цвете, не анимируется	+

Таблица В.4. Тестирование экрана с информацией о фильме

№	Входные данные	Ожидаемый результат	Реальный результат	Рез-т
25	Пролистывание экрана вверх на максимум	Динамическое изменение размера картинки, размер картинки обратно пропорционален отступу содержимого	Динамическое изменение размера картинки, размер картинки обратно пропорционален длине прокрутки	+
26	Пролистывание экрана вниз	Динамическое изменение размера картинки, размер картинки прямо пропорционален отступу содержимого	Динамическое изменение размера картинки, размер картинки прямо пропорционален отступу содержимого	+
27	Нажатие на контейнер с описанием фильма	Анимированное открытие полного описания фильма	Анимированное открытие полного описания фильма	+

Таблица В.5. Тестирование экрана сканирования

№	Входные данные	Ожидаемый результат	Реальный результат	Рез-т
28	Пользователь навел нецелевую область на QR-код	QR-код не сканируется	QR-код не сканируется	+
29	Пользователь навел целевую область на QR-код	QR-код сканируется	QR-код сканируется	+
30	Сканируемый QR-код является недействительным	Пользователь получает уведомление о недействительном QR-коде	Пользователь получает уведомление о недействительном QR-коде	+
31	Сканируемый QR-код является действительным	Начинается обработка	Начинается обработка	+
32	Обработка закончена	Пользователю показывается форма подтверждения	Пользователю показывается форма подтверждения	+
33	Показана форма подтверждения, пользователь нажал кнопку «Отмена»	Форма подтверждения исчезает, сканирование целевой области продолжается	Форма подтверждения исчезает, сканирование целевой области продолжается	+
34	Показана форма подтверждения, пользователь нажал кнопку «Просмотреть»	Переход к экрану с информацией об объекте	Переход к экрану с информацией об объекте	+
35	Сканирование началось, пользователь нажал кнопку «Назад»	Переход на главную страницу, обработка запроса прекращена	Переход на главную страницу, обработка запроса прекращена	+

Размещено на Allbest.ru

...