|
@@ -14,6 +14,8 @@ https://www.figma.com/file/wwDCPGa4AyPXdeuFnKU95M/KOD1.4-Variant2
|
|
|
|
|
|
|
|
https://swagger.kolei.ru?url=https://cinema.kolei.ru/swagger/cinema.yml
|
|
https://swagger.kolei.ru?url=https://cinema.kolei.ru/swagger/cinema.yml
|
|
|
|
|
|
|
|
|
|
+>Работа со swagger расписана в [старых лекциях](./f6_demo_1.md#запрос-регистрации-изучаем-работу-со-swagger)
|
|
|
|
|
+
|
|
|
При разработке приложения используйте возможности **SPA** (разные страницы, переходы между ними) и **pinia** (хранение данных об авторизации, возможно кеширование списка фильмов)
|
|
При разработке приложения используйте возможности **SPA** (разные страницы, переходы между ними) и **pinia** (хранение данных об авторизации, возможно кеширование списка фильмов)
|
|
|
|
|
|
|
|
Необходимо реализовать следующий функционал:
|
|
Необходимо реализовать следующий функционал:
|
|
@@ -22,15 +24,15 @@ https://swagger.kolei.ru?url=https://cinema.kolei.ru/swagger/cinema.yml
|
|
|
|
|
|
|
|
1. Реализуйте экран `SignUp Screen` (регистрация) согласно макету:
|
|
1. Реализуйте экран `SignUp Screen` (регистрация) согласно макету:
|
|
|
|
|
|
|
|
- * При нажатии на кнопку "Зарегистрироваться" необходимо проверять поля для ввода на пустоту, а также `email` на корректность (требования к `email` описаны в документации к API). При некорректном заполнении необходимо отобразить ошибку с помощью диалогового окна. Так же необходимо проверять равенство пароля и его повтора.
|
|
|
|
|
|
|
+ * При нажатии на кнопку "Зарегистрироваться" необходимо проверять поля для ввода на пустоту, а также `email` на корректность (требования к `email` описаны в документации к API). При некорректном заполнении необходимо отобразить ошибку с помощью диалогового окна или средствами валидации. Так же необходимо проверять равенство пароля и его повтора.
|
|
|
|
|
|
|
|
- >Для продвинутых пользователей: желательно реализовать валидацию форм используя библиотеку валидации, например [Vuelidate](https://vuelidate-next.netlify.app/)
|
|
|
|
|
|
|
+ Реализовать валидацию форм используя библиотеку [Vuelidate](https://vuelidate-next.netlify.app/) (реферат на эту тему в процессе написания)
|
|
|
|
|
|
|
|
* При корректном заполнении формы необходимо отправлять запрос регистрации на сервер. При получении ошибки от сервера ее необходимо отобразить с помощью диалогового окна. При успешной регистрации нужно автоматически осуществить авторизацию и перейти на `Main Screen`.
|
|
* При корректном заполнении формы необходимо отправлять запрос регистрации на сервер. При получении ошибки от сервера ее необходимо отобразить с помощью диалогового окна. При успешной регистрации нужно автоматически осуществить авторизацию и перейти на `Main Screen`.
|
|
|
|
|
|
|
|
* При нажатии на кнопку "У меня уже есть аккаунт" необходимо осуществлять переход на `SignIn Screen`.
|
|
* При нажатии на кнопку "У меня уже есть аккаунт" необходимо осуществлять переход на `SignIn Screen`.
|
|
|
|
|
|
|
|
- * При первом запуске приложения должен отображаться `SignUp Screen`, при последующих - `SignIn Screen` (используйте **localStorage** для сохранения статуса входа).
|
|
|
|
|
|
|
+ * При первом запуске приложения должен отображаться `SignUp Screen`, при последующих - `SignIn Screen` (используйте [**localStorage**](./web_17.md#использование-localstorage-для-хранения-данных-при-перезапуске-приложения) для сохранения статуса входа).
|
|
|
|
|
|
|
|
Используйте [условную маршрутизацию](./web_16.md#условная-маршрутизация)
|
|
Используйте [условную маршрутизацию](./web_16.md#условная-маршрутизация)
|
|
|
|
|
|
|
@@ -61,3 +63,47 @@ https://swagger.kolei.ru?url=https://cinema.kolei.ru/swagger/cinema.yml
|
|
|
- В случае успеха аватар пользователя заменяется на новый, в случае ошибки она отображается с помощью диалогового окна.
|
|
- В случае успеха аватар пользователя заменяется на новый, в случае ошибки она отображается с помощью диалогового окна.
|
|
|
|
|
|
|
|
* При нажатии на кнопку "Выход" необходимо осуществлять переход на экран авторизации.
|
|
* При нажатии на кнопку "Выход" необходимо осуществлять переход на экран авторизации.
|
|
|
|
|
+
|
|
|
|
|
+ * При нажатии на кнопку «Обсуждения» необходимо переходить на экран "Chat List Screen".
|
|
|
|
|
+
|
|
|
|
|
+1. Реализуйте экран "Chat List Screen" согласно макету:
|
|
|
|
|
+
|
|
|
|
|
+ * Информацию необходимо запрашивать с сервера (запрос чатов пользователя). Если информация с сервера содержит дубли – их необходимо удалить. Если ваш пользователь еще не имеет чатов, сервер присылает пустой список, отправьте сообщение от текущего пользователя в чате с `id = 1` с помощью Swagger или Postman.
|
|
|
|
|
+
|
|
|
|
|
+ * В подзаголовке ячейки необходимо отобразить последнее сообщение в соответствующем чате + имя его автора. Текст сообщения необходимо обрезать до двух строк.
|
|
|
|
|
+
|
|
|
|
|
+ * Реализуйте отображение постеров к фильмам. Для получения постеров используйте подходящий запрос из API. Если постер для данного фильма нельзя получить из API - сгенерируйте абревиатуру по следующему правилу: если название фильма состоит и одного слова - необходимо взять первые две буквы слова; иначе - первые буквы первого и второго слова.
|
|
|
|
|
+
|
|
|
|
|
+ * При нажатии на ячейку необходимо осуществлять переход на "Chat Screen" для выбранного фильма.
|
|
|
|
|
+
|
|
|
|
|
+1. Реализуйте экран "Chat Screen" согласно макету:
|
|
|
|
|
+
|
|
|
|
|
+ * Сообщения необходимо упорядочить от старых к новым сверху вниз. Для сегодняшних сообщений необходимо отобразить заголовок "Сегодня".
|
|
|
|
|
+
|
|
|
|
|
+ * "Облако" сообщения должно растягиваться по содержимому.
|
|
|
|
|
+
|
|
|
|
|
+ * Последовательно идущие сообщения одного автора необходимо группировать (расстояния между сообщениями должны быть меньше, как на макете).
|
|
|
|
|
+
|
|
|
|
|
+ * Реализуйте блок отправки сообщения как на макете. При вводе сообщения поле для ввода должно растягиваться по вертикали.
|
|
|
|
|
+
|
|
|
|
|
+ * При нажатии на кнопку "Отправить" необходимо отправить сообщение на сервер. При позитивном ответе от сервера необходимо отобразить сообщение в чате. При возникновении ошибки - отобразить ошибку с помощью диалогового окна.
|
|
|
|
|
+
|
|
|
|
|
+ * Необходимо валидировать поле для ввода на пустоту. При отсутствии текста сообщения необходимо отобразить ошибку с помощью диалогового окна.
|
|
|
|
|
+
|
|
|
|
|
+1. Реализуйте экран "Collections Screen" согласно макету (переход на экран из панели навигации в подвале):
|
|
|
|
|
+
|
|
|
|
|
+ * При нажатии на иконку в правом верхнем углу необходимо переходить на экран Create Collection Screen.
|
|
|
|
|
+
|
|
|
|
|
+ * На экране необходимо отображать созданные коллекции. **Информация о коллекциях должна храниться в памяти устройства (localStorage)**. Необходимо хранить название коллекции и иконку.
|
|
|
|
|
+
|
|
|
|
|
+ * Реализуйте Swipe-to-delete для удаления коллекции, в том числе из памяти устройства.
|
|
|
|
|
+
|
|
|
|
|
+1. Реализуйте экран "Create Collection Screen" согласно макету:
|
|
|
|
|
+
|
|
|
|
|
+ * При открытии экрана в качестве иконки должно быть выбрано случайное изображение из коллекции иконок.
|
|
|
|
|
+
|
|
|
|
|
+ * При нажатии на кнопку "Выбрать иконку" необходимо осуществлять переход на экран Icon Selection. Реализуйте данный экран в соответствии с макетом.
|
|
|
|
|
+
|
|
|
|
|
+ * При нажатии на кнопку "Сохранить" необходимо сохранить новую коллекцию в памяти устройства и закрыть экран.
|
|
|
|
|
+
|
|
|
|
|
+ * Необходимо проверять на пустоту поле для ввода названия коллекции. При отсутствии значения необходимо отобразить сообщение об ошибке.
|