Файл: СанктПетербургский государственный университет промышленных технологий и дизайна.pdf

3 Создание прототипа приложения на proto.io
Зарегистрируемся и зайдем в профиль на proto.io (рис. 1).
Рис. 1. Форма входа на proto.io
Нажмем кнопку +New project (Новый проект), находящуюся в правом верхнем углу (рис. 2).
Рис. 2. Начальный экран создания нового проекта
12

На появившемся экране можно:
 назвать проект (рис. 3);
Рис. 3. Название проекта
 выбрать тип проекта (рис. 4): Blank Project (Пустой проект) или from
Template (из Шаблона).
13

Рис. 4. Выбор типа проекта
 выбрать устройство, для которого будет создаваться приложение
(рис. 5).
Рис. 5. Выбор устройства
Устройства с нестандартными размерами экранов можно выбрать,
щелкнув на иконку, показанную на рис. 6.
14

Рис. 6. Выбор устройства с нестандартными размерами экрана
Можно создать своё новое устройство (рис. 7).
Рис. 7. Выбор своего устройства
Альтернативно, можно использовать уже существующие шаблоны с готовыми характеристиками (рис. 8), выбрав раздел from Template (из
Шаблона).
15

Рис. 8. Выбор существующего шаблона
Каждый шаблон был создан под конкретную модель устройства с фиксированным разрешением, о чем указано в заголовке (рис. 9).
Рис. 9. Параметры шаблона
16

Каждый шаблон можно предварительно посмотреть, щелкнув по кнопке
Preview (Предпросмотр), показанной на рис. 10.
Рис. 10. Предпросмотр шаблона
После выбора типа шаблона проекта, щёлкнем по кнопке Create project
(Создать проект), расположенной внизу экрана (рис. 11).
Рис. 11. Кнопка Create project (Создать проект)
В разделе Projects отображаются все текущие проекты (рис. 12).
17

Рис. 12. Текущие проекты
Отредактировать проект можно, наведя мышку на его изображение и щелкнув кнопку Edit Project (Отредактировать проект), появляющуюся при наведении (рис. 13).
Рис. 13. Кнопка редактирования проекта
Интерфейс редактора выглядит так: в центре – рабочая область, справа –
панель с элементами (рис. 14).
18

Рис. 14. Интерфейс редактора
Уменьшить масштаб можно, сдвинув ползунок в центре в верхней части окна (рис. 15).
Рис. 15. Изменение масштаба
19

Перетащим один из элементов с панели справа на рабочую область
(рис. 16).
Рис. 16. Вставка элемента
Как только элемент помещен в проект, появляется окно его свойств,
которые можно тут же отредактировать (рис. 17).
Рис. 17. Окно свойств элемента
20

Поместим следующие элементы – заголовок, навигацию и изображение
(рис. 18).
Рис. 18. Размещение элементов в проекте
Изображения можно выбирать из библиотеки proto.io или загружать свои
(рис. 19 – 21).
21

Рис. 19. Открытие библиотеки proto.io
Рис. 20. Выбор изображения из библиотеки
Рис. 21. Выбор изображения из библиотеки
22

Добавим следующий экран для разработки (рис. 22), щёлкнув по пункту
Screens
 Add new screen (Экраны  Добавить новый экран).
Рис. 22. Добавление нового экрана
Введём название нового экрана и щелкнем кнопку ОК (рис. 23).
Рис. 23. Ввод названия нового экрана
Добавим несколько различных элементов на новый экран (рис. 24).
23

Рис. 24. Добавление различных элементов
Для связи двух экранов между собой переключимся на тот, с которого нужно перейти (рис. 25), и перетащим с боковой панели элемент-кнопку Button
with Background (Кнопка с фоном) (рис. 26).
Рис. 25. Переключение экранов
24

Рис. 26. Добавление кнопки с фоном
Переименуем её, щелкнув на надпись на ней и введя нужный текст
(рис. 27).
Рис. 27. Переименование кнопки с фоном
25

Переход можно подключить, переключившись в окне свойств элемента- кнопки на вкладку Interactions (Взаимодействия), щёлкнув на кнопку c волшебной палочкой Add quick interactions (Добавить быстрое взаимодействие)
(рис. 28) и выбрав затем название экрана, к которому должна вести кнопка
(рис. 29).
Рис. 28. Кнопка добавления быстрого взаимодействия
Рис. 29. Выбор экрана для перехода
26

Все взаимодействия элемента указаны в меню свойств на вкладке
Interaction (Взаимодействия), показанной на рис. 30, откуда можно перейти к их редактированию, кликнув на иконку с карандашом (рис. 31).
Рис. 30. Вкладка Interaction
Рис. 31. Редактирование меню свойств
Проекты в proto.io сохраняются автоматически через некоторое время, но также можно использовать кнопку Save Project (Сохранить проект) в правом верхнем углу (рис. 32).
27

Рис. 32. Кнопка сохранения проекта
Для предпросмотра проекта щёлкнем кнопку Preview (Предпросмотр),
находящуюся над кнопкой Save Project (рис. 33), откроется новое окно браузера, в котором можно протестировать приложение (рис. 34).
Рис. 33. Кнопка предпросмотра проекта
28

Рис. 34. Предпросмотр проекта
4 Оформление результатов практики
В рамках данной работы следует разработать приложение, потенциально обладающее способностью конкурировать на выбранном рынке. Не требуется создание полностью функционального приложения, достаточно ограничиться только разработкой интерактивного интерфейса.
4.1 Формы отчетности по практике
Отчет о практике обучающиеся выполняют индивидуально в соответствии с требованиями ГОСТ 7.32 – 2001, изменение №1.
Отчет о практике – основной документ, характеризующий работу студента во время практики.
Объем отчета не менее 30 страниц (без списка использованной литературы и приложений). Текст отчета должен быть отредактирован и напечатан с соблюдением правил оформления научных работ,
предусмотренных ГОСТ.
29

Отчет по практике должен содержать следующие основные разделы:
 титульный лист;
 задание (печатается с двух сторон);
 реферат;
 содержание;
 введение;
 основная часть;
 заключение;
 список использованных источников (включая интернет-ресурсы).
Содержание основной части пояснительной записки следует делить на разделы и подразделы.
Во введении обосновывается актуальность выбранной темы, т. е.
предметной области, а также выбранной технологии и инструментальных средств проектирования и разработки.
Основная часть содержит описание современных средств визуального моделирования для разработки прототипов веб-интерфейсов и обоснованный выбор используемого веб-сервиса.
Необходимо выполнить постановку задачи на разработку прототипа веб- интерфейса выбранного электронного магазина. При анализе предметной области требуется показать специфику предметной области, которую необходимо учесть при разработке интернет-системы и прототипа веб- интерфейса соответственно. Следует также указать общие требования к интернет-системе, включая все ее компоненты.
При выполнении разработки прототипа следует описать этапы проектирования интернет-системы в целом и более подробно описать реализацию этапа прототипирования.
В рамках данной работы следует разработать приложение, потенциально обладающее способностью конкурировать на выбранном рынке. Не требуется создание полностью функционального приложения, достаточно ограничиться
30

только разработкой интерактивного интерфейса. Для демонстрации использованных сервисов и полученных результатов следует включить в отчет рисунки – копии экрана.
Заключение должно содержать оценку полученных результатов и изложение основных направлений дальнейшего совершенствования работы.
Пояснительная записка оформляется на листах формата А4. При оформлении текста используется шрифт Times New Roman 14 пт, интервал полуторный; поля должны иметь следующие размеры: левое – 30 мм, правое –
10 мм, верхнее – 25 мм, нижнее – 20 мм.
Нумерация страниц должна быть сквозной, порядковый номер листа ставится внизу по центру. Абзацы в тексте начинают отступом, равным 5
знакам.
Примеры оформления титульной страницы отчета, отзыва руководителя,
задания на практику и списка источников можно скопировать с сайта кафедры информационных технологий http://kit.sutd.ru.
4.2 Презентация по материалам практики
Обучающиеся выполняют и демонстрируют слайды с основными результатами работы по разработке прототипа веб-интерфейса выбранной темы.
5 Типовые контрольные задания по результатам
прохождения практики
1. Разработать прототип мобильного приложения. Тема приложения –
«Заказ такси»;
2. Разработать прототип мобильного приложения. Тема приложения –
«ИС кинотеатры»;
31

3. Разработать прототип мобильного приложения. Тема приложения –
«Парки СПб»;
4. Разработать прототип мобильного приложения. Тема приложения –
«Пригороды СПб»;
5. Разработать прототип мобильного приложения. Тема приложения –
«Эрмитаж».
6. Разработать прототип мобильного приложения. Тема приложения –
«Заказ билетов»;
7. Разработать прототип мобильного приложения. Тема приложения –
«Рестораны СПб»;
8. Разработать прототип мобильного приложения. Тема приложения –
«Концертные залы СПб»;
9. Разработать прототип мобильного приложения. Тема приложения –
«Экскурсии по СПб»;
10.
Разработать прототип мобильного приложения. Тема приложения –
«ВУЗы СПб»;
11.
Разработать прототип мобильного приложения. Тема приложения –
«Средние специальные учреждения СПб»;
12.
Разработать прототип мобильного приложения. Тема приложения –
«Школы СПб»;
13.
Разработать прототип мобильного приложения. Тема приложения –
«Полиция СПб»;
14.
Разработать прототип мобильного приложения. Тема приложения –
«Экскурсии по пригородам СПб»;
15.
Разработать прототип мобильного приложения. Тема приложения –
«МЧС СПб».
Защита отчета по практике осуществляется перед комиссией,
назначенной заведующим кафедрой из числа штатных преподавателей кафедры. Членами комиссии задаются вопросы, связанные с научными и
32

практическими результатами практики. Дифференцированная оценка выставляется руководителем кафедры с учетом отзыва руководителя практики.
5.1 Перечень контрольных вопросов
1.
Использование визуального моделирования при проектировании программного обеспечения.
2.
Обзор существующих приложений визуального моделирования.
3.
Использование визуального моделирования на этапе анализа проектируемой системы.
4.
Постановка задачи для разработки приложения.
5.
Разработка технического задания на прототип мобильного приложения.
6.
Дизайн пользовательского интерфейса мобильного приложения.
7.
Особенности моделирования интерфейса мобильного приложения для смартфонов.
8.
Разработка прототипа мобильного приложения.
9.
Выбор сервиса для создания интерактивного прототипа.
10.
Создание интерактивного прототипа мобильного приложения.
11.
Тестирование готового прототипа мобильного приложения.
12.
Преимущества визуального моделирования при проектировании программного обеспечения.
13.
Постановка задачи для разработки прототипа мобильного приложения.
14.
Проектирование прототипа мобильного приложения.
15.
Тестирование интерфейса прототипа мобильного приложения.
16.
Разработка интерфейса прототипа мобильного приложения.
17.
Дизайн прототипа мобильного приложения.
18.
Проектирование дизайна пользовательского интерфейса мобильного приложения.
33

Список рекомендуемой литературы
1. Учебная практика [Электронный ресурс]: учебно-методическое пособие/
В.А. Аляев [и др.]. – Электрон. текстовые данные. – Казань: Казанский национальный исследовательский технологический университет, 2018. –
88 c. – Режим доступа: http://www.iprbookshop.ru/63522.html. – ЭБС
«IPRbooks»
2. Тузовский А.Ф. Проектирование и разработка web-приложений
[Электронный ресурс]: учебное пособие/ А.Ф. Тузовский –
Электрон.текстовые данные. – Томск: Томский политехнический университет, 2017. – 219 c. – Режим доступа:
http://www.iprbookshop.ru/34702.— ЭБС «IPRbooks», по паролю
3. Семенов А.А. Сетевые технологии и Интернет [Электронный ресурс] :
учебное пособие / А.А. Семенов. – Электрон. текстовые данные. – СПб. :
Санкт-Петербургский государственный архитектурно-строительный университет, ЭБС АСВ, 2019. – 148 c. – 978-5-9227-0662-9. – Режим доступа: http://www.iprbookshop.ru/66840.html.
4. Баканов А.С. Проектирование пользовательского интерфейса.
Эргономический подход [Электронный ресурс] / А.С. Баканов,
А.А. Обознов. – Электрон. текстовые данные. – М. : Институт психологии
РАН, 2019. – 184 c. – 978-5-9270-0165-1. – Режим доступа:
http://www.iprbookshop.ru/15585.html.
5. Визуальное моделирование: теория и практика [Электронный ресурс]. –
URL: http://www.intuit.ru/studies/courses/1041/218/lecture/27257 (дата обращения: 20.03.2019).
6. Онлайн-сервис для прототипирования HotGloo [Электронный ресурс]. –
URL: http://www.hotgloo.com (дата обращения: 20.03.2017).
7. Официальный сайт Axure. [Электронный ресурс]. – URL:
http://www.axure.com (дата обращения: 20.03.2019).
34

8. Онлайн-сервис для прототипирования Proto [Электронный ресурс]. –
URL: https://proto.io (дата обращения: 20.03.2019).
35