vue_film.md 12 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
Работа со swagger расписана в старых лекциях
При разработке приложения используйте возможности SPA (разные страницы, переходы между ними) и pinia (хранение данных об авторизации, возможно кеширование списка фильмов)
Необходимо реализовать следующий функционал:
Создайте проект. Настройте иконку приложения согласно макету.
Реализуйте экран
SignUp Screen(регистрация) согласно макету:При нажатии на кнопку "Зарегистрироваться" необходимо проверять поля для ввода на пустоту, а также
emailна корректность (требования кemailописаны в документации к API). При некорректном заполнении необходимо отобразить ошибку с помощью диалогового окна или средствами валидации. Так же необходимо проверять равенство пароля и его повтора.Реализовать валидацию форм используя библиотеку Vuelidate (реферат на эту тему в процессе написания)
При корректном заполнении формы необходимо отправлять запрос регистрации на сервер. При получении ошибки от сервера ее необходимо отобразить с помощью диалогового окна. При успешной регистрации нужно автоматически осуществить авторизацию и перейти на
Main Screen.При нажатии на кнопку "У меня уже есть аккаунт" необходимо осуществлять переход на
SignIn Screen.При первом запуске приложения должен отображаться
SignUp Screen, при последующих -SignIn Screen(используйте localStorage для сохранения статуса входа).Используйте условную маршрутизацию
Реализуйте экран
SignIn Screen(авторизация) согласно макету:При нажатии на кнопку "Войти" необходимо проверять поля для ввода на пустоту, а также
emailна корректность (требования кemailописаны в документации к API). При некорректном заполнении необходимо отобразить ошибку с помощью диалогового окна. При корректном заполнении формы необходимо отправить на сервер соответствующий запрос.При нажатии на кнопку "Регистрация" необходимо осуществлять переход на
SignUp Screen.При успешной авторизации необходимо осуществлять переход на экран
Main Screen. При получении ошибки от сервера необходимо отобразить ее с помощью диалогового окна.
Реализуйте экран
Main Screenсогласно макету:На экране необходимо отобразить обложки фильмов из подборки «new» (информацию о фильмах необходимо запрашивать с сервера). Обложки должны быть отображены в виде карусели, необходимо реализовать возможность пролистывания с помощью жеста swipe.
Пример реализации карусели смотрите в лекции "Карусель"
При пролистывании обложек название фильма в верхней части экрана должно меняться.
Реализуйте экран
Profile Screenсогласно макету:Данные о пользователе необходимо запрашивать с сервера.
При нажатии на кнопку "Изменить" необходимо реализовать изменение аватара пользователя:
- Пользователь выбирает фотографию.
- Фотография отправляется на сервер.
- В случае успеха аватар пользователя заменяется на новый, в случае ошибки она отображается с помощью диалогового окна.
При нажатии на кнопку "Выход" необходимо осуществлять переход на экран авторизации.
При нажатии на кнопку «Обсуждения» необходимо переходить на экран "Chat List Screen".
Реализуйте экран "Chat List Screen" согласно макету:
Информацию необходимо запрашивать с сервера (запрос чатов пользователя). Если информация с сервера содержит дубли – их необходимо удалить. Если ваш пользователь еще не имеет чатов, сервер присылает пустой список, отправьте сообщение от текущего пользователя в чате с
id = 1с помощью Swagger или Postman.В подзаголовке ячейки необходимо отобразить последнее сообщение в соответствующем чате + имя его автора. Текст сообщения необходимо обрезать до двух строк.
Реализуйте отображение постеров к фильмам. Для получения постеров используйте подходящий запрос из API. Если постер для данного фильма нельзя получить из API - сгенерируйте абревиатуру по следующему правилу: если название фильма состоит и одного слова - необходимо взять первые две буквы слова; иначе - первые буквы первого и второго слова.
При нажатии на ячейку необходимо осуществлять переход на "Chat Screen" для выбранного фильма.
Реализуйте экран "Chat Screen" согласно макету:
Сообщения необходимо упорядочить от старых к новым сверху вниз. Для сегодняшних сообщений необходимо отобразить заголовок "Сегодня".
"Облако" сообщения должно растягиваться по содержимому.
Последовательно идущие сообщения одного автора необходимо группировать (расстояния между сообщениями должны быть меньше, как на макете).
Реализуйте блок отправки сообщения как на макете. При вводе сообщения поле для ввода должно растягиваться по вертикали.
При нажатии на кнопку "Отправить" необходимо отправить сообщение на сервер. При позитивном ответе от сервера необходимо отобразить сообщение в чате. При возникновении ошибки - отобразить ошибку с помощью диалогового окна.
Необходимо валидировать поле для ввода на пустоту. При отсутствии текста сообщения необходимо отобразить ошибку с помощью диалогового окна.
Реализуйте экран "Collections Screen" согласно макету (переход на экран из панели навигации в подвале):
При нажатии на иконку в правом верхнем углу необходимо переходить на экран Create Collection Screen.
На экране необходимо отображать созданные коллекции. Информация о коллекциях должна храниться в памяти устройства (localStorage). Необходимо хранить название коллекции и иконку.
Реализуйте Swipe-to-delete для удаления коллекции, в том числе из памяти устройства.
Реализуйте экран "Create Collection Screen" согласно макету:
При открытии экрана в качестве иконки должно быть выбрано случайное изображение из коллекции иконок.
При нажатии на кнопку "Выбрать иконку" необходимо осуществлять переход на экран Icon Selection. Реализуйте данный экран в соответствии с макетом.
При нажатии на кнопку "Сохранить" необходимо сохранить новую коллекцию в памяти устройства и закрыть экран.
Необходимо проверять на пустоту поле для ввода названия коллекции. При отсутствии значения необходимо отобразить сообщение об ошибке.