Файл: Разработка мобильного интерфейса.docx

Министерство науки и высшего образования РФ
Федеральное государственное бюджетное образовательное учреждение высшего образования

«Санкт-Петербургский государственный университет телекоммуникаций им. проф. М.А.Бонч-Бруевича»

Факультет: Информационные системы и технологии


КУРСОВАЯ РАБОТА

По дисциплине «Информатика»

На тему: «Разработка мобильного интерфейса»
Выполнил:

студентка 1 курса,

группы ИСТ-911,

Марзаганов Георгий Игоревич

Работу принял:

Сосновских Александр Михайлович

Санкт-Петербург, 2019

Содержание

Введение

Цель: приложение для бесконтактных карт метро и наземного транспорта

Задача: создать удобное, простое приложение для понимания пользователей всех возрастов, которое позволит сэкономить время и следить за своей БСК картой.

Мобильное приложение — программное обеспечение, предназначенное для работы на смартфонах, планшетах и других мобильных устройствах, разработанное для конкретной платформы (iOS, Android, Windows Phone и т. д.). 

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

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

Почему нужно выбирать Figm-у, а не Photoshop? Вот несколько причин:

• 
  Figma — это лучшие наработки от таких продуктов как: Sketch, Zeplin, InVision и всё в одной вкладке
  
• 
  Figma работает в любом современном браузере и доступна на любой платформе
  
• 
  Существует командная работа, что порой даже очень спасает
  
• 
  Кривая в Figma одна из лучших и удобных, как и остальные объекты
  
• 
  Есть сетки
  
• 
  Существуют компоненты
  
• 
  В Figma шрифты тянутся из Google Fonts, а те, которые используются с локально, подкачиваются в проект
  
• 
  Качественный экспорт
  

---

Идеи и концепции

Современное мобильное приложение под названием “БСК Метро” поможет абсолютно любому человеку – ребёнку, подростку, молодёжи, взрослым и пожилым людям. Приложение поможет контролировать баланс на карте, как денежный, так и проездной. Тем самым, вы сможете всегда узнать сколько поездок, дней у вас осталось до конца тарифа, и сколько денежный средств у вас осталось на счету. Удобный и минималистичный дизайн, созданный в известном приложении FIGMA, не даст человеку запутаться в функционале приложения, а наоборот – интуитивно понятен.

Задумка возникла из-за собственной проблемы: заказ карты. Было найдено официальное приложение, однако его функционал и работоспособность оставляло желать лучшего. Это приложение будет представлено в Аналогах. Концепт приложения и его минимализм взят с мобильного приложения сотового оператора “Yota”.
В мобильном также реализована функция оплаты через любую банковскую карту без НДС на пополнения средств. Можно также заказать новую карту при потере или если еще не было карты. При заказе обычных карт, вам будет предоставлен выбор заказа карты: ПБ (проездной билет), БСК (бесконтактная смарт-карта), БЭПК (бесконтактная электронная пластиковая карта). Более подробно о карах написано в разделе помощь в личном кабинете мобильного приложения.
В наше время люди пытаются сэкономить уже свое время, пытаются уменьшить волокиты по мелким проблемам, и это приложение устраняет все эти минусы, не только пользователю мобильного приложения, но и работнику метрополитена.

Аналоги приложения

1. 
   Оплата Транспорта
   

Рис. 1

На картинке (рис. 1) мы можем увидеть, как выглядит иконка самого мобильного приложения.

Ссылка на приложение: https://play.google.com/store/apps/details?id=com.uglev.oplatatransporta&hl=ru

Теперь поговорим о плюсах и минусах данного мобильного приложения.

Минусы:

- Ужасный дизайн. Оранжевые буквы на синих прямоугольных кнопках, расположенные на белом фоне(рис.2)



Рис. 2

- В личном кабинете невозможно просмотреть какие-либо данные и отредактировать их, кроме просмотра карт. Однако это точно не положительный аспект этого приложения. Невозможно просмотреть и изменить имя, фамилию, отчество. Хотя эти данный почти никогда не изменяются. Невозможно изменить пароль и почту в самом личном кабинете, и сменить пользователя. Так же при возникновении вопросов нельзя просмотреть справку о приложении. Одно из единственных изменений, которое можно осуществить, это смена имя аккаунта, что на мой взгляд совершенно бесполезно. (рис. 3)

---

Рис. 3

- Из возможности заказа карт есть только карты для пенсионеров и студентов. То есть нет возможности заказать карту ветеранам, инвалидам и т.д. (Рис. 4)



Рис. 4

- Всего лишь 2 типа выбора карт. Что приносит определенные проблемы в заказе карт и бесполезности самого приложения. (Рис. 5)



Рис. 5

Плюсы:

+ При входе, ярко выделена функция изменения пароля, если он был забыт. (рис. 6)



Рис. 6

+ Реализованы функции карты наземного (рис. 7) и подземного (рис. 8) транспорта с возможностью поиска маршрута с его ценой, длительностью и пошагового выполнения.





(рис. 7) (рис. 8)

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

Карта-онлайн.рф.



Рис. 9

На картинке (рис. 9) мы можем увидеть, как выглядит логотип официального сайта для карт наземного и подземного транспорта.

Ссылка на приложение: http://xn----7sbab9bbkpdfty.xn--p1ai/

Теперь поговорим о плюсах и минусах данного сайта.

Минусы:

- Сайт не адаптирован для пользования телефоном, точнее нет его мобильной версии. (рис. 10)



Рис. 10

Плюсы:

+ Сайт довольно удобен и комфортен в использовании (рис. 9)

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

---

Рис. 9

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

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

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

Архитектура приложения

Полная архитектура мобильного приложения представлена так

(рис. 13)


Рис.13

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



Рис. 14

Д

алее мы видим кнопку регистрации, где все довольно банально просто. Нужно ввести почту и пароль. (Рис. 15) А в смене пароль нужно указать только почту, на которую был зарегистрирован аккаунт, чтобы в виде письма пришли дальнейшие указания.(Рис. 16)

Рис. 15 Рис. 16

После того, как ввели все нужные данные, нажимаем кнопку войти. Мы попадаем в Личный кабинет с вашими личными данными: Фамилией, именем, отчеством, серией и номером паспорта, номером бск карты. Есть так же возможность сменить пароль и почту в самом ЛК. Так же вы можете сохранить измененные данные и сменить пользователя, выйдя на слайд с регистрацией. Так же есть кнопа “помощь”, которая объясняет работу с приложением. (Рис. 15)

---

Рис. 15

Сохранив все данные, вы выходите на главный экран, где можно увидеть точное количеств поездок в численном виде и в графическом, что на метро, что на транспорте. Так же можно узнать через сколько закончиться тариф. Если закончились поездки, то можно докупить их, так же можно изменить условия карты, узнать баланс и пополнить его. (Рис. 16)



Рис. 16

Нажав на кнопку сверху слева, можно вый в меню-навигацию приложения, в которой находятся разделы: “личный кабинет”, “Карта метро СПБ”, “Заказ льготных БСК”. Также снизу присутствуют 2 виджета, которые показывают дату и время. (Рис. 17)




Рис. 17

Н

ажав на кнопку “личный кабинет”, вы перейдете в личный кабинет (Рис. 15). Нажав на кнопку “Карта метро СПБ”, очевидно вам покажет карту метро СПБ (Рис. 18). Однако в моем приложении нет карты наземного транспорта, так как считаю наиболее приемлемыми для составления маршрутов Яндекс.крты и Google maps. И третьей кнопкой можно заказать карты БСК, где в свою очередь вы можете выбрать заказать льготную БСК или обычную. (Рис. 19)

Рис. 18 Рис. 19

Отличия заказа обычных (Рис. 20) карт от льготных (Рис. 21) заключаются в том, что в обычных вы можете выбрать тип карты, а в льготной у вас этого выбора нет, так же вместо кнопки “Заказать”, у льготных карт, стоит кнопка ”Найти”, то есть система ищет вас по паспортным данным, есть ли вы базе данных льготниках или нет.








Рис. 19 Рис. 20

Последняя функция – это пополнение счета. Пополнить можно через баковскую карту. (Рис. 21)


Рис. 21

Заключение

В ходе работы удалось создать максимально удобное, простое и комфортное приложение для людей любого возраста. Данное мобильное приложение очень актуально на данный момент, ведь многим людям не хочется стоять в очередях, чтобы получить карту, и с этим приложением можно просто заказать и в установленный срок просто прийти с паспортом и забрать свою карту. Также это мобильное приложение позволит следить за с количеством оставшихся поездок и за числом дней в тарифе. Пизолит изменят тариф так, как вам хочется каждый месяц. Удобно просматривать карту метро СПБ не, выходя из приложения. Редактировать личные данные, заказывать карты и удобно пополнять баланс. И все это в красивом и минималистичным дизайном.

---