Создайте банковское приложение с помощью Ant Design + Strapi.io

Anima не зависит от бэк-энд, инструментов проектирования и хостинга. Мы можем помочь нашим пользователям выпускать продукты в 10 раз быстрее благодаря бесшовной интеграции с различными инструментами и решениями. Время от времени мы хотим проверить наш подход, создав решение для проектирования, которое обеспечивает это.

В рамках серии статей Anima Partners мы рассмотрим, как вы можете использовать технологические решения Anima в качестве партнера для оптимизации рабочего процесса design-to-code.

Мы перепроектировали банковское приложение Silicon Valley Bank (SVB), используя библиотеку компонентов Animas с открытым исходным кодом для Figma, подключили наши данные и запустили в эксплуатацию за два дня.

С готовыми к использованию React-компонентами Animas от Recharts и Ant Design нам потребовался 1 день на разработку и 1 день на запуск в эксплуатацию с использованием безголовой CMS Strapi в качестве бэк-энда, а приложение было развернуто на Netlify.

Как быстро создать React-приложение с помощью Figma + Anima + Strapi.io

Перед началом работы

1. Зарегистрируйтесь в Anima
2. Установите плагин Component Library for Figma
3. Установите Node.js

Совместные технические решения, использованные в этой сборке: Figma + Recharts + Ant Design + Strapi.io + Netlify

Часть первая: Сделайте свой дизайн интерактивным

В нашем плагине Figma есть тонна интерактивных компонентов React с открытым исходным кодом. Используйте их для создания собственного файла дизайна или продублируйте наш пример для начала работы.

Шаг первый: Изучите библиотеку компонентов

1. Откройте библиотеку компонентов для плагина Figma
2. Выберите Библиотека компонентов

Шаг второй: Вставьте диаграмму

1. Выберите Графики в меню Библиотеки компонентов
2. Выберите график, который вы хотите использовать, и настройте его для своего приложения
3. Нажмите кнопку вставить, чтобы добавить график на холст, а затем включить его в дизайн.

Вы можете использовать библиотеку компонентов для вставки любых компонентов, которые вам нравятся

Часть вторая: Преобразование дизайна Figma в код React с помощью Anima

Когда вы будете довольны своим дизайном, вы можете экспортировать его в удобный для разработчиков React-код с помощью Anima.

Шаг первый: Синхронизация с Anima

1. Откройте плагин в Figma
2. Нажмите кнопку Preview, затем Sync

Шаг второй: Экспортируйте код React

1. Откройте ваш проект в веб-приложении Anima и выберите Экспорт кода
2. Измените выбранный фреймворк на React
3. Экспортируйте код для всего проекта

Шаг третий: Запустите локально

1. Распакуйте скачанный код 2. Откройте терминал в папке с кодом Anima
2. Запустите npm install
3. Выполните npm start
4. Откройте http://localhost:1234

Теперь у вас есть приложение, работающее локально

Часть третья: Подключите графики к вашим данным

Далее вы хотите наполнить ваши графики реальными данными из API. Для этого мы настроим Strapi и подключим к нему наше приложение. При желании вы можете использовать REST API по своему усмотрению.

Шаг первый: Настройка Strapi

1. Чтобы запустить Strapi, следуйте этому краткому руководству по началу работы
2. Создайте учетную запись администратора

Шаг второй: Подключите ваше приложение к Strapi

1. В Strapi перейдите в раздел Настройки > API-токены > Создать новый API-токен
2. Скопируйте API-токен
3. В папке проекта создайте файл с именем .env
4. Добавьте URL и токен (без слова Bearer) в этот файл:

API_URL=http://localhost:1337/api/
API_TOKEN=[YOUR API TOKEN]

Шаг 3: Заполните данные в Strapi

1. В Strapi перейдите в Content-type builder и создайте новый тип коллекции
2. Назовите коллекцию BalanceHistory
3. Добавьте следующие поля:
   • Месяц: Дата
   • Сумма: Число (десятичная дробь)
4. Создайте записи для BalanceHistory и опубликуйте каждую из них.

Шаг 4: Наполните данные графика с помощью API

1. Откройте код одного из ваших графиков (например, BalanceChart).
2. Добавьте код для получения данных из Strapi API
3. Замените статические данные на полученные данные в аргументах графика (вот пример).

Теперь ваш график использует данные, полученные из API.

Сборка и публикация в Netlify

Netlify — это отличное облако для размещения приложений React. Следуйте их руководству по развертыванию, чтобы подключить репозиторий и автоматически развернуть приложение.

Вот как развернуть приложение в Netlify.

Хотите присоединиться к нашей партнерской программе или познакомиться с нашими техническими партнерами? Получите дополнительную информацию здесь.

Дополнительные ресурсы:

• Живое приложение на Netlify
• Исходный код на GitHub
• Файл сообщества Figma