23_ИСТ_1_1_Какушкина_Ольга_ЛР5

Цели и задачи

Цель работы: Разработка архитектуры и шаблонов SPA.

Задачи:

1. Разработать архитектуру приложения

2. Разработать дизайн

3. Разработать шаблоны

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

3

Изм.

Лист

№ докум.

Подпись

Дата

Описание проделанной работы

Был разработан макет страниц приложения и форм с использованием Figma, по следующим причинам:

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

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

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

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

4

Изм.

Лист

№ докум.

Подпись

Дата

Макеты приложения:

Рисунок 1 – Список доступных секций.

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

5

Изм.

Лист

№ докум.

Подпись

Дата

Рисунок 2 – Поля записи на секцию.

Рисунок 3 – Окно оплаты.

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

6

Изм.

Лист

№ докум.

Подпись

Дата

Рисунок 4 – Личный кабинет преподавателя.

Рисунок 5 – Настройки личного кабинета преподавателя.

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

7

Изм.

Лист

№ докум.

Подпись

Дата

Рисунок 6 – Страница студентов в личном кабинете преподавателя.

Рисунок 7 – Личный кабинет студента.

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

8

Изм.

Лист

№ докум.

Подпись

Дата

Рисунок 7 – Окна авторизации для преподавателя (слева)

и для студента (справа).

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

9

Изм.

Лист

№ докум.

Подпись

Дата

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

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

Установлен json server для дальнейшего хранения данных приложения.

Вывод

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

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

10

Изм.

Лист

№ докум.

Подпись

Дата

Используемые источники:

1. Руководство по Angular. [Электронный ресурс]. https://metanit.com/web/angular2/

2. Руководство по Figma. [Электронный ресурс]. https://vc.ru/design/184941-figma-vse- chto-vam-nuzhno-znat

3. Правила дизайна. [Электронный ресурс]. https://habr.com/ru/companies/logomachine/articles/337758/

4. Документация ангуялр [Электронный ресурс]. https://angdev.ru/angular/component- overview/

ЛР1 – НГТУ – 23-ИСТ-1-1 – 005 – 24

Лист

11

Изм.

Лист

№ докум.

Подпись

Дата