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

>Задание переделано из задания демо-экзамена по разработке мобильных приложений. Чтобы вёрстка на сайте выглядела как для мобильного устройства нужно в "инструменте разработчика" в браузере "показать панель инструментов устройства":
>
>![](../img/web_025.png)

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

Необходимо следовать предложенному дизайну. Макеты приложения доступны по ссылке (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. Создайте проект. [Настройте иконку приложения согласно макету](https://sky.pro/wiki/html/ispravlyaem-oshibku-404-pravilniy-import-favicon-ico-v-vue-js/). 

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

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

        >Для продвинутых пользователей: желательно реализовать валидацию форм используя библиотеку валидации, например [Vuelidate](https://vuelidate-next.netlify.app/)

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

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

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

        Используйте [условную маршрутизацию](./web_16.md#условная-маршрутизация)

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

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

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

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

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

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

        >Пример реализации карусели смотрите в [лекции "Карусель"](./web_18.md)

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

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

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

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

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

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