AWS Amplify Studio - приложение Figma для создания Fullstack React с минимальным программированием

AWS Amplify объявляет об AWS Amplify Studio, среде визуальной разработки, которая предлагает разработчикам интерфейсов новые функции (публичный предварительный просмотр) для ускорения разработки пользовательского интерфейса с минимальным кодированием, интегрируя при этом мощные возможности настройки и управления бэкендом Amplify. Amplify Studio автоматически переводит проекты, выполненные в Figma, в понятный человеку код компонента React UI. В Amplify Studio разработчики могут визуально подключать компоненты пользовательского интерфейса к внутренним данным приложения. Для настройки и управления бэкэндами существующие возможности пользовательского интерфейса администратора Amplify (такие как “данные”, “аутентификация”, “хранилище” и т. д.) станут частью программы Amplify Studio в будущем, предоставляя единый интерфейс, позволяющий разработчикам быстрее создавать приложения с полным стеком

Чтобы продемонстрировать новые возможности пользовательского интерфейса, давайте создадим приложение “Список домов”, в котором будут показаны самые последние добавленные дома.

Создайте свой бэкэнд и интерфейс в одной визуальной среде разработки

Во-первых, давайте развернем это начальное приложение React, которое включает серверную часть API GraphQL и интерфейс React с библиотеками. Нажмите на кнопку ниже, чтобы развернуть:

Этот рабочий процесс разветвляет репозиторий GitHub и развертывает новое приложение Amplify с предварительно настроенным бэкэндом. После развертывания щелкните «Open Studio», чтобы просмотреть конфигурации приложения Amplify.

Изучите модель данных в разделе “Data model”. В этом случае у нас есть “Home” модель с несколькими полями для представления списка

Затем давайте воспользуемся вкладкой "Содержимое", чтобы автоматически сгенерировать некоторые случайные исходные данные для вашего приложения.

Нажмите “Content”, а затем выберите “Auto-generate seed data” в меню “Actions”, чтобы заполнить вашу базу данных образцами данных. Давайте пока создадим 5 записей, а также введем ограничение “Street address” в поле адреса, чтобы сделать автоматически сгенерированные исходные данные более семантически точными.

Затем добавьте некоторые URL-адреса изображений в поле “image_url” записи. (Совет: если у вас нет под рукой URL-адреса изображения, попробуйте с помощью генератора случайных фотографий Unsplash.

Ваша вкладка содержимого должна выглядеть примерно так:

Пришло время создать интерфейс. Давайте рассмотрим новую функцию предварительного просмотра "UI Library”.

Безупречная передача функций от дизайнера к разработчику

С помощью новой Studio’s “UI Library (Preview)”, вы можете синхронизировать компоненты из Figma с Amplify Studio. Amplify также предоставляет вам удобный файл Figma,чтобы начать работу быстрее. Файл Amplify Figma включает в себя как примитивы пользовательского интерфейса, так и готовые компоненты. Studio также может синхронизировать любые новые компоненты, созданные в Figma! Давайте клонируем файл Figma, как предлагает студия Amplify. Примечание: этот шаг потребует от вас наличия бесплатной учетной записи Figma.

Изучите примитивы компонентов пользовательского интерфейса Amplify на странице Figma “Primitives”. Вы также можете найти ряд готовых компонентов пользовательского интерфейса на странице “My Components”.

При желании вы также можете создать свой новый компонент Figma. Вы можете пропустить этот шаг и вместо этого использовать встроенный компонент “CardB”, если хотите. Разработайте новый компонент в Figma, как вы обычно это делаете! Я создам новый компонент с поддержкой автоматической компоновки изображения сверху и несколькими текстовыми элементами ниже.

Вернувшись в студию, вставьте ссылку на файл Figma, чтобы импортировать все компоненты из вашего файла Figma. Вы можете либо выбрать отдельные компоненты для импорта, либо импортировать их все с помощью кнопки “Принять все” в правом верхнем углу.

Привязка компонентов UI к данным

Когда ваша библиотека UI заполнена, давайте привяжем некоторые из этих компонентов к данным.

Выберите компонент и нажмите “Configure”. В редакторе компонентов UI можно определить свойства компонентов, а затем привязать их к различным элементам UI. Для нашего приложения давайте добавим новое свойство под названием “home” и выберем тип “Home".

Чтобы привязать изображения, вы можете просто выбрать свойство “src” и привязать его к полю “image_url” дома.

Затем выберите дочерние элементы и привяжите их “метку” к значению из свойства списка. Мы можем привязать текстовый элемент к домашнему адресу. Для цены мы даже можем использовать какое-нибудь упрощенное синтаксическое выражение, чтобы UI отображал “Price: $” + “home.price” + “/night”.

Чтобы увидеть, как ваш компонент масштабируется с различной информацией и данными, нажмите “Shuffle preview data” и Studio перетасует данные вашего приложения и заполнит компонент живыми данными.

Создание коллекции

Отдельные компоненты великолепны, но в большинстве случаев вам захочется показать “коллекцию” компонента. С помощью Amplify Studio вы можете создать коллекцию любого компонента, нажав кнопку “Create collection” в правом верхнем углу. Настройте все параметры макета с левой стороны, а затем настройте источники данных с правой стороны.

Давайте используем макет сетки для этой коллекции и установим количество столбцов равным 3. Кроме того, давайте добавим отступ 10px со всех сторон элемента для дополнительного интервала.

Затем давайте изменим набор данных, используемый для заполнения коллекции, и добавим новое условие сортировки для сортировки по самым новым домам в самые старые дома. Выберите “Add sort”, затем выберите “createdAt” и “Descending” в качестве условия сортировки

Зайдите в свое приложение React

Давайте добавим код компонента в наше приложение React! Чтобы получить исходный React code, все, что вам нужно сделать, это клонировать свою вилку репозитория GitHub, команда должна выглядеть примерно так:

git clone git@github.com:<GITHUB_USERNAME>/amplify-homes.git

Затем перейдите в каталог “amplify-homes”:

cd amplify-homes

Обратите внимание, что если вы впервые настраиваете проект Amplify локально, вам потребуется установить Amplify CLI, запустив:

npm install -g @aws-amplify/cli

Затем нажмите “Get component code”, чтобы получить код компонента. В этом образце репозитория “initial project setup”, которая включает добавление правильных зависимостей и импорт стилей CSS по умолчанию, в основном уже завершена. Вам нужно только установить все зависимости npm локально:

npm install

Далее следуйте инструкциям в модале “Get component code”. Перенесите компоненты UI в базу кода вашего приложения:

amplify pull --appId <YOUR_APP_ID> --envName <YOUR_ENV>

После amplify pull, в вашу базу кода React было добавлено несколько ключевых файлов:

• “ui-components/”содержит все компоненты UI из вашего файла Figma в виде React code • “models/” содержит локальное представление вашей модели данных, позволяющее использовать ее с хранилищем данных для извлечения, обновления и подписки на данные вашего приложения • “aws-exports.js ” определяет все сведения о внутреннем подключении, такие как конечные точки API, ключи API или идентификаторы пула пользователей Amazon Cognito

Теперь давайте добавим компоненты UI в ваше приложение. Иди к своему App.js и импортируйте компонент UI. Затем поместите их в функцию визуализации. Ваш App.js файл должен выглядеть примерно так:

import './App.css'
import { NewHomes, NavBar, MarketingFooter } from './ui-components'

function App() {
  return (
    <div className="App">
      <NavBar />
      <NewHomes />
      <MarketingFooter />
    </div>
  )
}

export default App

Мы также импортировали элемент “Navbar” и “Marketingfooter”, чтобы сделать приложение более приятным и быстрым. Чтобы протестировать свое приложение, запустите:

yarn start

Вы должны увидеть что-то подобное в своем браузере:

Расширение в коде

Созданные компоненты UI принимают свойства, доступные в компоненте “Flex”, или свойства, доступные в компоненте “Collection”.

Например, чтобы сделать компонент на всю ширину, вы можете использовать все свойства, доступные в компоненте “Flex” Amplify UI. В этом случае я установил width={“100vw”} для NaveBar и MarketingFooter, поэтому он масштабируется в соответствии с размером окна моего браузера. Мы также можем включить разбивку на страницы для новых домов, установив свойства Ispaginated и itemsPerPage.

import './App.css';
import { NewHomes, NavBar, MarketingFooter } from './ui-components'

function App() {
  return (
    <div className="App">
      <NavBar width={"100vw"}/>
      <NewHomes isPaginated itemsPerPage={3}/>
      <MarketingFooter width={"100vw"}/>
    </div>
  );
}

export default App;

Теперь вы можете изменить размер окна, а также просмотреть коллекцию по страницам.

В коде можно применить множество других настроек, таких как применение переопределений к дочерним элементам, настройка обработчиков onClick для элементов коллекции или установка состояний наведения на значки. Ознакомьтесь с расширением с помощью кода в документации Amplify Studio.

Расширьте библиотеку пользовательского интерфейса – от предварительного просмотра до общедоступной

Функция Amplify Studio’s UI library в настоящее время все еще находится в предварительном просмотре для разработчиков. Существует ряд улучшений, которые вносит Amazon до общей доступности:

• Возможность определять действия на основе событий в Studio (например, при нажатии на компонент перейдите на определенную страницу)

• Добавьте поиск, разбивку на страницы и фильтрацию в коллекциях

• Возможность определять привязки хранилища S3 (например, привязывать аватар к изображению профиля пользователя)

• Дополнительные компоненты UI (палитры цветов, карты, аватар, загрузчик файлов)

Ссылки

Оригинальную статью по AWS Amplify Studio