RKIS/articles/vue_film.md

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

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

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

Необходимо следовать предложенному дизайну. Макеты приложения доступны по ссылке (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 согласно макету:

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

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

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

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