Швидко розпочніть розробку фронтенду для вашого dapp за допомогою 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 використовує нові ефекти хуків (hooks effects) (opens in a new tab). Це метод для написання потужних, але дуже малих так званих функціональних компонентів. Дивіться розділ про Apollo нижче, щоб дізнатися, як вони використовуються в create-eth-app.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) дозволяють мати кілька пакетів, але керувати ними всіма з кореневої папки та встановлювати залежності для всіх одночасно за допомогою yarn install. Це особливо доцільно для невеликих додаткових пакетів, таких як керування адресами/ABI смарт-контрактів (інформація про те, де і які смарт-контракти ви розгорнули та як з ними взаємодіяти) або інтеграція графа, які є частиною 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 у ваш dapp. Але що, якщо вам потрібні сотні різних точок даних? Це призведе до сотень запитів даних до вузла, кожен з яких вимагатиме RTT (opens in a new tab), що зробить ваш dapp повільним і неефективним. Одним з обхідних шляхів може бути функція виклику засобу отримання даних у вашому контракті, яка повертає кілька даних одночасно. Однак це не завжди ідеальний варіант.

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

Щойно у вас з’явиться підграф, ви зможете написати у своєму dapp один простий запит, який отримує всі важливі дані блокчейну, включно з потрібними вам історичними даними, і для цього знадобиться лише один запит.

Apollo

Завдяки інтеграції Apollo Boost (opens in a new tab) ви можете легко інтегрувати граф у свій React dapp. Особливо при використанні хуків 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 є миттєві позики (flash loans) (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) у необробленому (raw) (opens in a new tab) або відформатованому (formatted) (opens in a new tab) вигляді.

Compound

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

Uniswap

Uniswap (opens in a new tab) — це децентралізована біржа (DEX). Постачальники ліквідності можуть заробляти комісійні, надаючи необхідні токени або етер для обох сторін угоди. Він широко використовується і тому має одну з найвищих ліквідностей для дуже широкого спектра токенів. Ви можете легко інтегрувати його у свій dapp, щоб, наприклад, дозволити користувачам обмінювати свої 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

Переглянути учасників