Разработанная для ВКонтакте форма бронирования переговорной по приложенному ТЗ.
Результат: https://it-sun-code.github.io/Booking-form/
Код варианта с TypeScript: https://github.com/IT-sun-code/Booking-form-typescript.git
Форма должна содержать следующие элементы:
- выпадающий список с выбором башни (А или Б)
- выпадающий список с выбором этажа (с 3 по 27)
- выпадающий список с выбором переговорки. На каждом этаже 10 переговорок
- выбор даты и интервала времени (в произвольном виде, например выпадающие списки, data- picker)
- поле ввода комментария (textarea)
- кнопка "Отправить" (по нажатию - выводить в консоль данные формы в виде json)
- кнопка "Очистить" (по нажатию очищает форму)
Код необходимо писать либо на чистом JavaScript, либо с использованием React.
При выполнении задания можно пользоваться готовыми библиотеками компонентов, в верстке желательно использовать флексбоксы.
Для того, чтобы запустить данный проект на своем компьютере, есть два способа: загрузка архива и клонирование репозитория.
1. Загрузка архива
1.1 Нажмите кнопку "Code" в верхней части страницы рядом с именем репозитория.
1.2 В выпадающем меню выберите "Download ZIP".
1.3 Архив со всем содержимым репозитория загрузится на ваш компьютер.
1.4 Распакуйте архив.
1.5 После распаковки архива пользователь сможет открыть проект в любом редакторе кода и запустить его на своем компьютере.
1.6 Откройте терминал (командную строку) на вашем компьютере.
1.7 Перейдите в директорию проекта, используя команду cd <путькдиректории_проекта>.
1.8 Убедитесь, что у вас установлен Node.js и npm (Node Package Manager). Вы можете проверить установку, введя команды node -v и npm -v в терминале. Если они не установлены, вам нужно будет сначала установить их.
1.9 Установите зависимости проекта, выполнив команду yarn install в терминале. Это установит все необходимые пакеты и зависимости, указанные в файле package.json.
1.10 После успешной установки зависимостей запустите проект командой yarn dev или npm run dev. Эта команда запустит процесс разработки и веб-сервер, который будет слушать указанный порт и автоматически перезагружать проект при внесении изменений в исходный код.
1.11 Откройте веб-браузер и перейдите по адресу http://localhost:... (указано в проекте). Вы должны увидеть запущенное приложение.
1.12 Теперь вы успешно запустили проект с помощью команды yarn dev и можете начать работу с ним на своем компьютере.
2. Клонирование репозитория
2.1 Нажмите кнопку "Code" в верхней части страницы рядом с именем репозитория.
2.2 В выпадающем меню выберите "HTTPS" или "SSH", чтобы скопировать URL-адрес репозитория.
2.3 Откройте терминал на компьютере и перейдите в папку, куда хотите клонировать репозиторий.
2.4 Введите команду git clone и вставьте скопированный URL-адрес репозитория, например: git clone https://github.com/имя-пользователя/название-репозитория.git.
2.5 Нажмите "Enter", чтобы начать клонирование репозитория.
2.6 Клонированный репозиторий появится в выбранной папке на компьютере.
2.7 После клонирования репозитория вы сможете открыть проект в любом редакторе кода и запустить его на своем компьютере.
2.8 Инструкция для запуска с помощью yarn dev описана выше.
1. Использование React
1.1 React является одной из самых популярных библиотек JavaScript для создания пользовательских интерфейсов.
1.2 React предоставляет модульную архитектуру разработки, которая позволяет повторно использовать компоненты и легко комбинировать их для создания сложного интерфейса. Это особенно полезно для небольших приложений, где часто требуется создание нескольких похожих компонентов.
1.3 Быстрое обновление интерфейса: Реакт использует виртуальный DOM (VDOM), который позволяет эффективно обновлять только изменившиеся части интерфейса. Это делает процесс рендеринга и обновления интерфейса очень быстрым, что особенно важно для небольших приложений с небольшим объемом данных.
2. Использование Ant Design
2.1 Ant Design - это набор готовых компонентов пользовательского интерфейса (UI), разработанный на базе React, который предоставляет разработчикам множество полезных инструментов и функций.
2.2 Ant Design предлагает широкий выбор готовых компонентов, таких как формы, таблицы, навигационные элементы и многое другое. Это позволяет разработчикам быстро создавать качественные пользовательские интерфейсы без необходимости писать компоненты с нуля.
2.3 Однородный стиль обеспечивает единообразный стиль внешнего вида приложения. Все компоненты Ant Design разработаны в соответствии с общими дизайн-принципами и имеют согласованный внешний вид и поведение. Это помогает создавать приятный пользовательский опыт и упрощает работу с интерфейсом для пользователей.
3. Валидация формы
3.1 Отправить форму пустой нельзя, но поле Комментарии является необязательным на случай, если посетителям не понадобится ничего дополнительного из техники.
3.2 Выбор даты и времени раньше текущих невозможен, чтобы нельзя было забронировать переговорку на Вчера.
3.3 Конечный выбор времени на текущий день заканчивается на 23:45. 15 минут до 00:00 выделяется на сухую и влажную уборку помещения.
3.4 Выбор минут 0, 15, 30, 45: посетители могут забронировать переговорку минимум на 15 минут для очень быстрых совещаний.
3.5 Выбрать переговорку на период 0 часов 0 минут невозможно, например, 15:00-15:00 (это бы привело к ошибке в дальнейшей обработке на сервере) Можно выбрать:
- 15:00-15:15,
- 15:00-15:30,
- 15:00-15:45,
- 15:00-16:00 И так далее...
3.6 Можно выбрать ночное время на случай, если башни открыты и работают круглосуточно, а у посетителей есть острая необходимость в совещании.
3.7 Кнопка отправить - отправляет значения из формы в консоль в формате json (по техническому заданию) и в LocalStorage. Затем открывается модальное окно с данными(берутся из LocalStorage), чтобы пользователь мог проверить, корректно ли он заполнил форму. По кнопке Спасибо LocalStorage очищается.
3.8 Форма реализована в виде модального окна с использованием React Portal, чтобы рендерить ее вне иерархии компонентов React. Это полезно для модальных окон, поскольку они обычно должны быть размещены на верхнем уровне и не зависеть от положения компонентов на странице.
3.9 Модальное окно - переиспользуемый компонент. Благодаря этому, можно отображать в нем как саму форму, так и другие элементы, например, сообщение об успешной отправке данных.
4. Управление формой с клавиатуры
Для удобства пользователя есть возможность управления формой/модальным окном с клавиатуры
- Стрелки (вверх, вниз) - выбор башни, этажа, переговорки
- Enter - подтвердить выбор
- Esc - закрыть форму
5. Дизайн-решение
5.1 Минималистичный сайт - удобен для пользователя, в нем нет ничего лишнего: ссылка на информацию про стажировку, правила использования формы, кнопка открытия формы.
5.2 Ограниченная цветовая гамма - для достижения визуальной гармонии было выбрано 3 цвета, которые сочетаются между собой:
- #557eff - фиолетовый для заголовков
- #3d4f88 - темно-фиолетовый для обычного текста
- #fec7ff - розовый для логотипа и декоративных линий, рамок
5.3 Размер отступов - в основном были использованы размеры, кратные 2, например: 12, 16, 32 итд. Отступы между элементами, имеющими 1 уровень значимости меньше, чем отступы от их блока до другого блока, например:
отступы между элеменотами списка 16px,
отступы между двумя списками 32px и тд.
6. Адаптивность и запуск с мобильного устройства
Приложение адаптировано для различных устройств:
- Есть возможность посмотреть и протестировать проект с телефона/планшета/ноутбука
- Адаптивность помогает улучшить пользовательский опыт