docs: Initialize README.md
This commit is contained in:
125
README.md
Normal file
125
README.md
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
# НТО 2025. II отборочный этап. Командные задания — UI/UX
|
||||||
|
|
||||||
|
## 📖 Предыстория
|
||||||
|
В компании S есть возможность бронирования мест в пространствах, предназначенных под общее использование (open-space). На данный момент для бронирования места используются различные способы бронирования, разработанные в каждом офисе индивидуально.
|
||||||
|
Администрации компании S требуется мобильное приложение, как для рядовых сотрудников, так и для администрации с возможностью просмотра забронированных мест.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 📋 Системные требования
|
||||||
|
|
||||||
|
| **Параметр** | **Требование** |
|
||||||
|
|-----------------------------|---------------------------------------|
|
||||||
|
| **Минимальная версия Android** | 9.0 (API 28) |
|
||||||
|
| **Целевая версия Android** | 16 (API 36) |
|
||||||
|
| **Поддерживаемые устройства** | смартфоны, планшеты |
|
||||||
|
| **Ориентация экранов** | портретная |
|
||||||
|
| **Языки** | русский |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 📱 Техническое задание
|
||||||
|
Тебе предстоит доработать существующий проект, в котором уже реализована логика управления и передачи состояний. Твоя цель — создать полноценный визуальный интерфейс экрана авторизации, соответствующий всем требованиям Material Design 3 и условиям автотестов.
|
||||||
|
|
||||||
|
### 1. Основные элементы интерфейса
|
||||||
|
|
||||||
|
Тебе необходимо разработать экран авторизации, в котором присутствуют следующие компоненты:
|
||||||
|
|
||||||
|
#### Заголовок
|
||||||
|
|
||||||
|
- Тип: текстовое поле (без возможности ввода)
|
||||||
|
- Тег: `auth_title`
|
||||||
|
- Содержание: "Вход в систему"
|
||||||
|
- Стиль: `MaterialTheme.typography.headlineMedium`
|
||||||
|
|
||||||
|
#### Поле ввода Email
|
||||||
|
|
||||||
|
- Тип: Поле ввода с возможностью отображения следующих текстовых полей - введённый текст, текст при отсутствии введённого текста (текст-подсказка), подпись поля ввода.
|
||||||
|
- Тег: `auth_input_email`
|
||||||
|
- Содержание:
|
||||||
|
- подпись поля ввода: "Email"
|
||||||
|
- для отображения текущего значения использовать `email`
|
||||||
|
- для ввода использовать `onEmailChange`
|
||||||
|
- Компонент: `OutlinedTextField`
|
||||||
|
|
||||||
|
#### Поле ввода пароля
|
||||||
|
|
||||||
|
- Тип: Поле ввода с возможностью отображения следующих текстовых полей - введённый текст, текст при отсутствии введённого текста (текст-подсказка), подпись поля ввода.
|
||||||
|
- Тег: `auth_input_password`
|
||||||
|
- Содержание:
|
||||||
|
- подпись поля ввода: "Пароль"
|
||||||
|
- соответствующий формат ввода для данных
|
||||||
|
- обязательна иконка для показа/скрытия пароля (с тегом: `auth_input_password_visibility`)
|
||||||
|
- для отображения текущего значения использовать `password`
|
||||||
|
- для ввода использовать `onPasswordChange`
|
||||||
|
- Компонент: `OutlinedTextField` с `VisualTransformation`
|
||||||
|
|
||||||
|
#### Кнопка "Войти"
|
||||||
|
|
||||||
|
- Тип: Элемент, поддерживающий обработку нажатия и содержащий внутри себя неизменяемое поле ввода.
|
||||||
|
- Тег: `auth_login`
|
||||||
|
- Содержание:
|
||||||
|
- текст: "Войти"
|
||||||
|
- вызов функции: `onLoginClick`
|
||||||
|
- Особенности внешнего вида: `fillMaxWidth()`
|
||||||
|
|
||||||
|
#### Ссылки (текстовые кнопки)
|
||||||
|
|
||||||
|
- Тип: Элемент с возможностью обработки нажатия.
|
||||||
|
- Тег: `auth_forgot_pass` и `auth_create_account`
|
||||||
|
- Содержание:
|
||||||
|
- текст: "Забыли пароль?" и "Создать аккаунт"
|
||||||
|
- вызов функции: `onForgotPasswordClick` и `onCreateAccountClick`
|
||||||
|
- Особенности внешнего вида: расположить на одной строке по краям (`Arrangement.SpaceBetween`).
|
||||||
|
|
||||||
|
### 2. Поддержка состояний
|
||||||
|
|
||||||
|
Реализовать визуальное представление всех четырех логических состояний: Default, Loading, Error, Success.
|
||||||
|
|
||||||
|
#### Default
|
||||||
|
|
||||||
|
Отображается форма авторизации (см. 1. Основные элементы интерфейса).
|
||||||
|
|
||||||
|
#### Loading
|
||||||
|
|
||||||
|
Отображается индикатор загрузки (аналог ProgressBar).
|
||||||
|
|
||||||
|
Требование к компоненту: CircularProgressIndicator или кастомный индикатор.
|
||||||
|
|
||||||
|
#### Error
|
||||||
|
|
||||||
|
Тоже самое, что и состояние Default, но дополнительно появляется текстовое поле об ошибке.
|
||||||
|
- Тип: текстовое поле без возможности редактирования
|
||||||
|
- Тег: `auth_error`
|
||||||
|
- Содержание: "Ошибка: неверный логин или пароль"
|
||||||
|
- Особенности внешнего вида: `MaterialTheme.colorScheme.error`.
|
||||||
|
|
||||||
|
#### Success
|
||||||
|
|
||||||
|
Все элементы скрываются, отображается только одно текстовое поле.
|
||||||
|
|
||||||
|
- Тип: текстовое поле без возможности редактирования
|
||||||
|
- Тег: `auth_success`
|
||||||
|
- Содержание: "Добро пожаловать!"
|
||||||
|
- Особенности внешнего вида: `MaterialTheme.typography.headlineSmall`.
|
||||||
|
|
||||||
|
### 3. Поддержка UX и визуального отклика
|
||||||
|
|
||||||
|
Добавить визуальную отзывчивость, соответствующую Material Design 3, к существущим элементам.
|
||||||
|
|
||||||
|
#### Поле ввода Email
|
||||||
|
|
||||||
|
- Установить текст-подсказку при пустом поле: "Введите email"
|
||||||
|
|
||||||
|
#### Поле ввода пароля
|
||||||
|
|
||||||
|
- Установить текст-подсказку при пустом поле: "Введите пароль"
|
||||||
|
|
||||||
|
#### Кнопка "Войти"
|
||||||
|
|
||||||
|
- Добавить обработку состояния `isButtonEnabled`. Активное (enabled = true) и Неактивное (enabled = false) состояние должны быть четко различимы визуально. В неактивном состоянии нажатие на кнопку должно быть заблокировано.
|
||||||
|
|
||||||
|
|
||||||
|
## ✅ Особенности оценивания
|
||||||
|
|
||||||
|
Оценивание происходит с помощью автоматической системы тестирования, которая самостоятельно находит элементы и взаимодействует с ними (именно для этого у каждого элемента указан уникальный идентификатор, по которому будет производится поиск). Каждый тест происходит с чистой установки приложения.
|
||||||
Reference in New Issue
Block a user