Краткое руководство по созданию замечательного приложения с нуля
Концепция дизайна на основе компонентов популярна в области разработки интерфейсных приложений и веб-сайтов. Многие распространенные интерфейсные фреймворки и библиотеки, такие как React JS и Angular, продвигают этот подход к проектированию. Чтобы приступить к созданию приложения или веб-сайта, самым первым шагом является разбиение экрана на компоненты.
Фактически, многие современные приложения используют набор общих шаблонов пользовательского интерфейса, таких как Accordion, Calendar, Clock и т. Д. Вместо того, чтобы изобретать колесо, чтобы самостоятельно кодировать эти компоненты, ваша разработка может быть в 10 раз быстрее, если вы освоите существующий хорошо разработанный пользовательский интерфейс. библиотека компонентов.
Хорошая новость заключается в том, что в вашем распоряжении имеется ряд готовых для чтения библиотек компонентов пользовательского интерфейса, большинство из которых имеют открытый исходный код и сильную поддержку сообщества. В этой статье я покажу вам, как использовать популярную библиотеку компонентов React - Grommet, после чего вы получите мощные инструменты, чтобы вы могли быстрее разрабатывать приложение или веб-сайт с меньшими усилиями.
Что такое втулка? Почему?
Когда дело доходит до библиотек компонентов React UI, есть много знакомых имен, таких как React bootstrap и Material UI. Grommet привлек мое внимание тем, что предоставляет исчерпывающий набор компонентов пользовательского интерфейса, которые подходят для большинства случаев использования. Кроме того, он предлагает бесплатные шаблоны, так что мы можем создавать дизайны на основе его компонентов пользовательского интерфейса, используя дизайнерские комплекты, такие как Sketch, Adobe XD и Figma. Это способствует плавному процессу разработки от дизайна пользовательского интерфейса до фактического кодирования. Его системы дизайна или рекомендации по дизайну упрощают проектирование и разработку экранов.
Краткий обзор компонентов пользовательского интерфейса с возможностью многократного использования
Grommet предоставляет ряд готовых компонентов, которые подходят для большинства сценариев и вариантов использования. Вот снимок экрана с компонентами для быстрого ознакомления.
Бесплатный шаблон дизайна для дизайнерских наборов
Дизайн - это важная работа, предшествующая написанию кода. Работа может стать проще, если у вас есть готовый набор компонентов в вашем конструкторском наборе, так что вы можете просто создать свой дизайн, как будто играете с блоками LEGO в своем конструкторском наборе. Вы можете перейти на Grommet’s GitHub, чтобы получить шаблоны бесплатно.
Размеры футболки
Возможно, вам потребуется время, чтобы определить правильный размер и интервал, когда вы экспериментируете с разными значениями в пикселях. Втулка упрощает его, определяя размеры футболок, такие как маленький, средний, большой, большой и т. Д. Таким образом, вы можете просто определить подходящую посадку, смешав и сопоставив размеры.
Сценарий использования
Чтобы применить компоненты в процессе разработки, я собираюсь продемонстрировать, как создать приложение Forex Trade, используя компоненты пользовательского интерфейса Grommet.
Приведенная ниже блок-схема экрана иллюстрирует путь пользователя от отображения курса до завершения сделки на форексе:
- Отображение курса. Путешествие пользователя начинается с экрана отображения курса, на котором отображается список валютных пар с курсами продажи и покупки.
- Ввод сделок на Форекс. Пользователи могут нажимать кнопки и вводить сумму для торговли валютой.
- Обзорная ставка. Непосредственно перед отправкой сделки система зарезервирует ее и запросит подтверждение со сроком действия 5 секунд. Пользователи могут продолжить, если их устраивает зарезервированная ставка, или отменить. Если пользователи не примут никакого решения в течение 5 секунд, появится диалоговое окно с вопросом о том, хотят ли они зарезервировать новую ставку.
- Завершение - по завершении публикации транзакции будет отображена история транзакций.
Дизайн экрана
Прежде чем вдаваться в подробности использования компонентов, давайте посмотрим на дизайн экрана. Компоновка экрана стандартная, состоит из верхнего меню и фрагмента контента с полями с обеих сторон.
Экран просмотра оценок
На основе макета экрана мы помещаем компоненты пользовательского интерфейса во фрагмент контента. На приведенном ниже экране показан список валютных пар и ставки в таблице данных, чтобы пользователи могли выбрать, по какой из них создать торговую сделку на Форекс.
Экран создания валютной сделки
Когда пользователи нажимают кнопку покупки или продажи, отображается экран для ввода суммы.
Экран обзора сделок Forex
На основе введенной валютной пары и суммы система зарезервирует курс и запросит подтверждение. Есть таймер, показывающий период времени, когда истечет срок действия ставки.
Экран завершения сделки Forex
Пользователи увидят подтверждение транзакции, что транзакция форекс успешно размещена.
Экран истории сделок Форекс
В конце пользовательского пути пользователи будут видеть историю сделок форекс для обзора предыдущих транзакций форекс.
Настраивать
Установка пакета
Чтобы ваше приложение могло использовать компоненты Grommet, вам необходимо установить следующие пакеты:
npm install grommet grommet-icons styled-components --save
Затем заключите свой контент внутрь <Grommet>, чтобы можно было использовать его компоненты пользовательского интерфейса, и все.
Макет
Создание всех экранов на основе одного и того же макета имеет решающее значение для интерфейсных приложений или веб-сайтов для обеспечения единообразия цифрового взаимодействия.
Для создания макета экрана компонент <Grid> позволяет определять строки и столбцы определенного размера. В этом примере вы можете видеть верхнюю строку меню и контент в макете экрана.
В React JS вы можете определить макет с помощью компонента <Grid>. В приведенном ниже фрагменте кода вы можете видеть, что строка меню представляет собой компонент <TopMenu>, за которым следует <Grid>, который определяет 3 столбца для левого поля, фрагмента содержимого и правого поля. Размер обоих полей равен «xsmall», что составляет 96 пикселей в конфигурации темы Grommet. .
Экран отображения рейтинга
Экран отображения курса Forex состоит из поля поиска базовой валюты и таблицы валютных пар. Каждый компонент помещается в контейнер <Box>, а родительский контейнер <Box> находится на более высоком уровне. Он предназначен для управления полями, заполнением и последовательностью размещения (например, строка или столбец). <Box> является одним из ключевых строительных блоков в Grommet, вы, вероятно, будете часто использовать его во всем приложении.
Таблица данных
<DataTable> компонент - подходящий выбор для отображения списка записей данных. Что вам нужно сделать, так это указать определение столбца для рендеринга заголовка и содержимого, размер столбца, выравнивание и ключ данных. Он поддерживает сортировку и другие расширенные функции, такие как группировка.
Вот пример кода о том, как настроить столбцы таблицы для таблицы курсов валют.
Экран ввода транзакции Forex
Отправка формы
Экран ввода Forex содержит простую форму, есть одно поле ввода для суммы, а другие поля предназначены только для отображения. На приведенном ниже экране показаны компоненты экрана в разбивке по компонентам втулки. Grommet предоставляет компоненты для полей формы, поддержки проверки формы, отображения сообщений об ошибках и отправки формы. Компонент <FormField> - это контейнер, представляющий поле в целом, включая метку и поле ввода.
Вот фрагмент кода, который переводит компоненты в исходный код:
Настройка темы
Иногда стили компонентов в теме Grommet по умолчанию могут не соответствовать дизайну экрана. В этом примере поле формы Grommet отображает нижнюю границу в стиле темы по умолчанию. Однако это выглядит довольно странно, и мы хотим удалить границы.
Чтобы настроить тему Grommet, вы можете указать настройку и объединиться с темой Grommet. Затем вы можете применить его к <Grommet> компоненту, чтобы сделать его эффективным на уровне приложения, или использовать <ThemeContext.Extend> , чтобы ограничить настройку на уровне экрана.
Этот фрагмент кода является примером того, как настраивать стили темы на уровне приложения. Вы можете сначала создать настраиваемую тему, а затем применить ее к <Grommet>, установив ее атрибут темы.
Экран обзора транзакции Forex
Таймер обратного отсчета
Экран просмотра транзакции похож на экран ввода, но в нем есть таймер обратного отсчета, который указывает, когда истечет зарезервированная скорость. <Clock> - полезный компонент, поскольку он не только может отображать время в цифровом и аналоговом формате, но также поддерживает режим таймера обратного отсчета.
Как только таймер обратного отсчета достигнет 00:00, цвет шрифта будет обновлен до цвета критического состояния, чтобы предупредить пользователей об истечении срока действия.
Всплывающее диалоговое окно
Чтобы обеспечить лучший пользовательский опыт, будет отображаться диалоговое окно с вопросом, желают ли они зарезервировать новую ставку по истечении срока действия ставки. Для этого компонент Grommet <Layer> может помочь нам создать оверлей поверх текущего пользовательского интерфейса экрана для отображения диалогового окна.
В приведенном ниже фрагменте кода вы можете видеть, что компонент <Layer> условно отображается на основе флага showDialog, и этот флаг устанавливается, когда таймер простоя достигает 00:00.
Экран истории транзакций Forex
Наконец, на экране истории транзакций отображается список исторических записей сделок в компоненте <DataTable> с фильтром поиска по полям даты с использованием компонента <DateInput>. На приведенном ниже экране показаны компоненты Grommet на экране истории сделок.
Подобно другим библиотекам компонентов пользовательского интерфейса, <DateInput> component, предоставляемый Grommet, поддерживает выбор даты в календаре.
Во фрагменте кода показано, как применять <DateInput> компоненты к экрану истории транзакций.
Заключение
Без сомнения, использование готовых компонентов пользовательского интерфейса может значительно сократить усилия и сократить время доставки для разработки интерфейсных приложений и веб-сайтов. Grommet - одна из популярных библиотек компонентов пользовательского интерфейса, она заслуживает нашего внимания, поскольку предлагает полный набор полезных компонентов и проста в освоении.
Более того, он удобен для UI / UX-дизайнера, потому что команда Grommet предоставляет бесплатный файл шаблона, который доступен для большинства дизайнерских комплектов. Вы можете легко создать новое приложение за короткое время, если освоите использование этой библиотеки компонентов пользовательского интерфейса.
Репозиторий GitHub
Вы можете найти полный исходный код в этом репозитории GitHub, если хотите подробно изучить код.
Это статическое приложение для демонстрации компонентов пользовательского интерфейса и потока экрана, поэтому нет управления состоянием или интеграции API.
