Главная Обзор Помощь
Вход
ekolesnikov
/
RKIS
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: 3d8576865f
Ветки Метки
RKIS
/
articles
/
vue_film.md

vue_film.md 6.8 KB
История Исходник

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

Задание переделано из задания демо-экзамена по разработке мобильных приложений. Чтобы вёрстка на сайте выглядела как для мобильного устройства нужно в "инструменте разработчика" в браузере "показать панель инструментов устройства":

Необходимо корректно обрабатывать запросы к серверу. В случае получения ошибки от сервера или отсутствия соединения с сетью Интернет необходимо отобразить соответствующий текст ошибки с помощью диалогового окна.

Необходимо следовать предложенному дизайну. Макеты приложения доступны по ссылке (launch screen делать не нужно):

https://www.figma.com/file/wwDCPGa4AyPXdeuFnKU95M/KOD1.4-Variant2

Описание протокола API доступно по ссылке:

https://swagger.kolei.ru?url=https://cinema.kolei.ru/swagger/cinema.yml

При разработке приложения используйте возможности SPA (разные страницы, переходы между ними) и pinia (хранение данных об авторизации, возможно кеширование списка фильмов)

Необходимо реализовать следующий функционал:

  1. Создайте проект. Настройте иконку приложения согласно макету.

  2. Реализуйте экран SignUp Screen (регистрация) согласно макету:

    • При нажатии на кнопку "Зарегистрироваться" необходимо проверять поля для ввода на пустоту, а также email на корректность (требования к email описаны в документации к API). При некорректном заполнении необходимо отобразить ошибку с помощью диалогового окна. Так же необходимо проверять равенство пароля и его повтора.

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

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

    • При нажатии на кнопку "У меня уже есть аккаунт" необходимо осуществлять переход на SignIn Screen.

    • При первом запуске приложения должен отображаться SignUp Screen, при последующих - SignIn Screen (используйте localStorage для сохранения статуса входа).

      Используйте условную маршрутизацию

  3. Реализуйте экран SignIn Screen (авторизация) согласно макету:

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

    • При нажатии на кнопку "Регистрация" необходимо осуществлять переход на SignUp Screen.

    • При успешной авторизации необходимо осуществлять переход на экран Main Screen. При получении ошибки от сервера необходимо отобразить ее с помощью диалогового окна.

  4. Реализуйте экран Main Screen согласно макету:

    • На экране необходимо отобразить обложки фильмов из подборки «new» (информацию о фильмах необходимо запрашивать с сервера). Обложки должны быть отображены в виде карусели, необходимо реализовать возможность пролистывания с помощью жеста swipe.

      Пример реализации карусели смотрите в лекции "Карусель"

    • При пролистывании обложек название фильма в верхней части экрана должно меняться.

  5. Реализуйте экран Profile Screen согласно макету:

    • Данные о пользователе необходимо запрашивать с сервера.

    • При нажатии на кнопку "Изменить" необходимо реализовать изменение аватара пользователя: 

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

    • При нажатии на кнопку "Выход" необходимо осуществлять переход на экран авторизации.