Для того чтобы приложение имело высокий рейтинг среди пользователей, оно должно быть максимально простым и практичным для работы. Что такое простой и понятный функционал приложения? Это когда процесс работы приложения состоит из, сведенного до минимума количества команд! Так что же необходимо для написания простого в работе приложения?
Предлагаем рассмотреть пример библиотеки Webix и ее характеристик
Webix UI — это JavaScript библиотека, создающая отличный дизайн. Возможности представленных компонентов имеют разный уровень, от одиночной простой — до целого комплекса решения задач.
Так же библиотека имеет несколько дополнительных инструментов.
А именно:
- Механизм обработки действий;
- Способы работы с информацией;
- Взаимодействие с системой (сервером).
Как реализовать форму заказа с помощью компонентов Webix? Лучше всего это сделать на примере простого одностраничного приложения.
Для начала рассмотрим самые простые, базовые настройки.
Для использования библиотеки необходимо подключить ее. Webix имеет базовую и расширенную версии. В работе лучше использовать расширенную Pro-версию. После создания базового файла и подключения всех инструментов, переходим непосредственно к приложению и формам.
После базовых настроек переходим к изучению разработки самого приложения.
Приложение может состоять из устройств:
- Перечень товаров;
- Характеристика интересующего товара;
- Личные данные;
- Платежная информация.
Информационная архитектура состоит в свою очередь из блоков. В каждом отдельном блоке, имеется основная информация о товаре и система оформление покупки.
Любая форма должна содержать поля ввода информации, выбора товара, переключение и прочее.
Особое место, если не главное, занимает — форма оформления заказа.
Обычно форма для заполнения заказа имеет два блока: в первом — поля для ввода информации, а во втором — информация о доставке покупки.
Функции "Back" и "Next" используются для навигации.
"Back" возвращает к списку товаров, а "Next" отображает поля для ввода данных о клиенте. Для сбора данных предусмотрен целый ряд свойств.
Форма регистрации имеет несколько наименований полей:
- Наименование продукта;
- Количества товаров;
- Дисконтная или скидочной карта;
- Ценой заказа, выбор способа для получения товара;
- Delivery information;
- Выбор страны;
- Пояснение адреса доставки;
- Определение даты отправки;
- Дополнительные данные; страхование;
- Выбор цвета;
- Настройка навигации.
После заполнения информации о товаре, необходимо уточнить данные о пользователе, чтобы идентифицировать его, при получении заказа от курьера.
Основная информация для предоставления личных данных:
- Личные данные пользователя (ФИО);
- Возраст;
- Пол;
- Контактная информация: электронная почта и номер телефона.
После предоставления, в строке ввода своих личных данных, следует указать номер и срок действия кредитной карты. Информация необходима для оформления оплаты через платежный сервис.
После того, как создали форму ввода данных, о карте расчета, получаем следующую необходимую информацию:
- Номер карты владельца;
- Имя владельца;
- Срок действия карты;
- CVV код карты.
После ввода всех данных необходимо, чтобы приложение начало работать.
Инструменты:
- Перечень товаров (через определенные свойство on Click виджета dataview);
- Определение цены заказа;
- Навигация между формами (кнопки Back и Next);
- Валидация форм;
- Оформление покупки.
В заключении:
В материале приведены основные термины и процессы разработки, необходимы для создания приложения с помощью библиотеки Webix:
- Подключение библиотеки;
- Описание UI компонентов с использованием json синтаксиса;
- Использование методов компонентов;
- Установка обработки на действия.
Данный материал поясняет, как работать с формами Webix. Объясняет, как использовать различные контролы и применять на практике методы для управления формой.
Наименование всех команд, их методов и свойств, понятны и просты в разработке приложений.
