Начните разработку интерфейса для вашего децентрализованного приложения с помощью create-eth-app

В прошлый раз мы рассмотрели общую картину Solidity (opens in a new tab) и уже упоминали create-eth-app (opens in a new tab). Теперь вы узнаете, как его использовать, какие функции интегрированы, а также дополнительные идеи по его расширению. Это приложение, созданное Полом Разваном Бергом, основателем Sablier (opens in a new tab), ускорит разработку вашего интерфейса и поставляется с несколькими дополнительными интеграциями на выбор.

Установка

Для установки требуется Yarn 0.25 или выше (npm install yarn --global). Это так же просто, как запустить:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

Под капотом используется create-react-app (opens in a new tab). Чтобы увидеть свое приложение, откройте http://localhost:3000/. Когда вы будете готовы к развертыванию в производственной среде, создайте минимизированный пакет с помощью yarn build. Один из простых способов разместить его — Netlify (opens in a new tab). Вы можете создать репозиторий GitHub, добавить его в Netlify, настроить команду сборки, и все готово! Ваше приложение будет размещено и доступно для всех. И все это бесплатно.

Возможности

React и create-react-app

Прежде всего, сердце приложения: React и все дополнительные возможности, которые предоставляет create-react-app. Использование только этого — отличный вариант, если вы не хотите интегрировать Ethereum. Сам React (opens in a new tab) значительно упрощает создание интерактивных пользовательских интерфейсов. Он может быть не таким дружелюбным для новичков, как Vue (opens in a new tab), но он все еще наиболее широко используется, имеет больше возможностей и, что наиболее важно, тысячи дополнительных библиотек на выбор. create-react-app также очень упрощает начало работы и включает в себя:

• Поддержка синтаксиса React, JSX, ES6, TypeScript, Flow.
• Дополнительные языковые возможности помимо ES6, такие как оператор расширения объекта.
• Автоматически добавляемые префиксы в CSS, поэтому вам не понадобятся -webkit- или другие префиксы.
• Быстрое интерактивное средство для запуска модульных тестов со встроенной поддержкой отчетов о покрытии.
• Сервер для разработки в реальном времени, который предупреждает о распространенных ошибках.
• Скрипт сборки для объединения JS, CSS и изображений для производственной среды с хэшами и картами исходного кода.

В частности, create-eth-app использует новые эффекты хуков (opens in a new tab). Это метод для написания мощных, но очень маленьких так называемых функциональных компонентов. См. раздел об Apollo ниже, чтобы узнать, как они используются в create-eth-app.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) позволяют иметь несколько пакетов, но при этом управлять ими всеми из корневой папки и устанавливать зависимости для всех сразу с помощью yarn install. Это особенно полезно для небольших дополнительных пакетов, таких как управление адресами/ABI умных контрактов (информация о том, где вы развернули какие умные контракты и как с ними взаимодействовать) или интеграция с The Graph, которые являются частью create-eth-app.

ethers.js

Хотя Web3 (opens in a new tab) все еще используется чаще всего, ethers.js (opens in a new tab) в последний год набирает популярность в качестве альтернативы, и именно он интегрирован в create-eth-app. Вы можете работать с ним, заменить его на Web3 или рассмотреть возможность обновления до ethers.js v5 (opens in a new tab), который почти вышел из бета-версии.

The Graph

GraphQL (opens in a new tab) — это альтернативный способ обработки данных по сравнению с RESTful API (opens in a new tab). У них есть несколько преимуществ перед RESTful API, особенно для децентрализованных данных блокчейна. Если вас интересуют причины, ознакомьтесь со статьей GraphQL Will Power the Decentralized Web (opens in a new tab).

Обычно вы получаете данные напрямую из своего умного контракта. Хотите узнать время последней сделки? Просто вызовите MyContract.methods.latestTradeTime().call(), который получает данные из узла Ethereum в ваше децентрализованное приложение. Но что, если вам нужны сотни разных точек данных? Это приведет к сотням запросов данных к узлу, каждый из которых требует RTT (opens in a new tab), что делает ваше децентрализованное приложение медленным и неэффективным. Одним из обходных путей может быть функция в вашем контракте, которая возвращает сразу несколько данных. Однако это не всегда идеально.

Кроме того, вас могут заинтересовать исторические данные. Вы хотите знать не только время последней сделки, но и время всех сделок, которые вы когда-либо совершали сами. Используйте пакет подграфа create-eth-app, прочтите документацию (opens in a new tab) и адаптируйте его к своим собственным контрактам. Если вы ищете популярные умные контракты, для них уже может существовать подграф. Ознакомьтесь с обозревателем подграфов (opens in a new tab).

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

Apollo

Благодаря интеграции Apollo Boost (opens in a new tab) вы можете легко интегрировать The Graph в свое децентрализованное приложение на React. Особенно при использовании хуков React и Apollo (opens in a new tab) получение данных сводится к написанию одного GraphQL-запроса в вашем компоненте:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
Копировать

Шаблоны

Кроме того, вы можете выбрать один из нескольких различных шаблонов. На данный момент вы можете использовать интеграцию с Aave, Compound, UniSwap или Sablier. Все они добавляют важные адреса умных контрактов сервисов вместе с готовыми интеграциями подграфов. Просто добавьте шаблон в команду создания, например: yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) — это децентрализованный рынок денежного кредитования. Вкладчики предоставляют ликвидность рынку для получения пассивного дохода, в то время как заемщики могут брать займы под залог. Одной из уникальных особенностей Aave являются срочные займы (opens in a new tab), которые позволяют вам брать деньги в долг без какого-либо залога, при условии, что вы вернете заем в рамках одной транзакции. Это может быть полезно, например, для получения дополнительных денежных средств при арбитражной торговле.

Торгуемые токены, которые приносят вам проценты, называются aTokens.

Когда вы решите интегрировать Aave с create-eth-app, вы получите интеграцию подграфа (opens in a new tab). Aave использует The Graph и уже предоставляет несколько готовых к использованию подграфов в сетях Ropsten (opens in a new tab) и Mainnet (opens in a new tab) в необработанном (opens in a new tab) или отформатированном (opens in a new tab) виде.

Compound

Compound (opens in a new tab) похож на Aave. Интеграция уже включает в себя новый подграф Compound v2 (opens in a new tab). Токены, приносящие проценты, здесь, как ни странно, называются cTokens.

Uniswap

Uniswap (opens in a new tab) — это децентрализованная биржа (DEX). Поставщики ликвидности могут зарабатывать комиссии, предоставляя необходимые токены или эфир для обеих сторон сделки. Она широко используется и поэтому имеет одну из самых высоких ликвидностей для очень широкого спектра токенов. Вы можете легко интегрировать ее в свое децентрализованное приложение, чтобы, например, позволить пользователям обменивать свои ETH на DAI.

К сожалению, на момент написания этой статьи интеграция доступна только для Uniswap v1, а не для только что выпущенной v2 (opens in a new tab).

Sablier

Sablier (opens in a new tab) позволяет пользователям осуществлять потоковые денежные платежи. Вместо одного дня выплаты вы фактически получаете деньги постоянно без дополнительного администрирования после первоначальной настройки. Интеграция включает в себя собственный подграф (opens in a new tab).

Что дальше?

Если у вас есть вопросы о create-eth-app, зайдите на сервер сообщества Sablier (opens in a new tab), где вы сможете связаться с авторами create-eth-app. В качестве следующих шагов вы можете интегрировать фреймворк пользовательского интерфейса, например Material UI (opens in a new tab), написать GraphQL-запросы для данных, которые вам действительно нужны, и настроить развертывание.

Последнее обновление страницы: 29 сентября 2025 г.

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Посмотреть участников