Разработанная для ВКонтакте форма бронирования переговорной по приложенному ТЗ.
Результат: https://it-sun-code.github.io/Booking-form-typescript/
Код варианта без TypeScript здесь: https://github.com/IT-sun-code/Booking-form.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 описана выше.
0. Использование TypeScript
0.1 Тайпскрипт является мощным инструментом разработки веб-приложений и может принести значительные преимущества даже в небольших проектах.
0.2 Тайпскрипт предоставляет статическую типизацию, что позволяет выявить и предотвратить ошибки во время компиляции кода.
0.3 Улучшенное автодополнение и интеллектуальная подсказка: используя Тайпскрипт, разработчики получают более точные и полезные подсказки во время разработки. Интегрированная среда разработки (IDE) может предлагать автодополнение кода, предлагая доступные методы, свойства и типы данных, что упрощает и ускоряет процесс разработки.
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. Адаптивность и запуск с мобильного устройства
Приложение адаптировано для различных устройств:
- Есть возможность посмотреть и протестировать проект с телефона/планшета/ноутбука
- Адаптивность помогает улучшить пользовательский опыт