Приложение в формате мастера
Цели и задачи
Тема
Структура приложения
Структура приложения
Работа приложения
Работа приложения
Работа приложения
Работа приложения
2.62M

Приложение в формате мастера

1. Приложение в формате мастера

2. Цели и задачи

Цель: Реализовать приложение в формате Мастера (Wizard).
Задачи:
-Должны быть Route guards.
-На каждом шаге мастера должна быть представлена цепочка
шагов
-При выполнении запроса должен блокироваться интерфейс и
появляться loader.
-Должны быть описаны типы используемых объектов.

3. Тема

- В качестве темы проекта была выбрана регистрация на турнир по
шахматам и шашкам.

4. Структура приложения

Сервисы:
- Mock-api service имитирует запросы к серверу. В нем
хранятся данные, такие как форматы турниров, тип
игры и т.д. Методы для отправки и получения данных.
- Wizard-state service – сервис для управления
состоянием мастера. В нем хранятся данные каждого
шага, сброс и обновление формы.

5. Структура приложения

Главная страница:
- Стандартная главная страница с
перенаправлением на форму.
Страница мастера:
- Мастер. Это layout, на котором отрисовывается каждый
шаг. При переходе между шагами существует имитация
загрузки там, где у mock-api запрашиваются какиенибудь данные.

6. Работа приложения

- В моем приложении также присутствует полноценная адаптивность для
мобильных устройств.

7. Работа приложения

Цепочка состоит из 4 шагов:
1. Выбор дисциплины
2. Личные данные
3. Формат турнира
4. Проверка данных
Степпер:
- В приложении также реализован степпер. По
которому можно переходить назад по уже
пройденным шагам. Он отображает
заполненные, активные и заблокированные
шаги.

8. Работа приложения

Работа формы:
- В форме есть обязательные валидируемые поля, без правильного заполнения которых, нельзя
перейти к следующим шагам.
- При изменении данных на N шаге, все последующие заполненные шаги будут сброшены.

9. Работа приложения

Защита маршрута:
- Через адресную строку можно перейти на любой
заполненный шаг или первый незаполненный.
- При попытке перехода на недоступный шаг
пользователь остается на текущем шаге.
- При попытке перехода по несуществующему адресу
пользователя перенаправит на главную страницу.
English     Русский Rules