Швидкий старт розробки фронтенду вашого децентралізованого застосунку (dapp) за допомогою create-eth-app

фронтенд

JavaScript

ethers.js

the graph

defi

Для початківців

Маркус Ваас

soliditydeveloper.com

27 квітня 2020 р.

6 хвилин на читання

Минулого разу ми розглянули загальну картину Solidity (opens in a new tab) і вже згадували про create-eth-app (opens in a new tab). Тепер ви дізнаєтеся, як його використовувати, які функції в нього інтегровані, а також отримаєте додаткові ідеї щодо його розширення. Створений Полом Разваном Бергом (Paul Razvan Berg), засновником 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. Використання лише цього інструменту є чудовим варіантом, якщо ви не хочете інтегрувати Етеріум. Сам по собі React (opens in a new tab) робить створення інтерактивних інтерфейсів користувача (UI) дуже простим. Можливо, він не такий дружній до новачків, як Vue (opens in a new tab), але він все ще є найпопулярнішим, має більше функцій і, що найважливіше, тисячі додаткових бібліотек на вибір. create-react-app також значно полегшує початок роботи з ним і включає:

Підтримку синтаксису React, JSX, ES6, TypeScript, Flow.
Додаткові можливості мови поза ES6, як-от оператор розширення об'єктів (object spread operator).
CSS з автопрефіксами, тому вам не потрібні -webkit- або інші префікси.
Швидкий інтерактивний засіб виконання модульних тестів із вбудованою підтримкою звітів про покриття.
Сервер для розробки в реальному часі, який попереджає про типові помилки.
Скрипт збирання для об'єднання JS, CSS та зображень для робочого середовища з хешами та картами коду (sourcemaps).

Зокрема, create-eth-app використовує нові ефекти хуків (hooks effects) (opens in a new tab). Це метод написання потужних, але дуже компактних так званих функціональних компонентів. Дивіться розділ про Apollo нижче, щоб дізнатися, як вони використовуються в create-eth-app.

Робочі простори Yarn (Yarn Workspaces)

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

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

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

Apollo

Завдяки інтеграції Apollo Boost (opens in a new tab) ви можете легко інтегрувати The Graph у свій React dapp. Особливо при використанні хуків React та Apollo (opens in a new tab), отримання даних стає таким же простим, як написання одного запиту GraphQL у вашому компоненті:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

Шаблони

Крім того, ви можете вибрати з кількох різних шаблонів. Наразі ви можете використовувати інтеграцію з Aave, Compound, Юнісвоп або 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 і вже надає вам кілька готових до використання підграфів у мережах Ропстен (opens in a new tab) та Головна мережа (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.

Юнісвоп

Юнісвоп (opens in a new tab) — це децентралізована біржа (DEX). Постачальники ліквідності можуть заробляти на комісіях, надаючи необхідні токени або етер для обох сторін угоди. Вона широко використовується і тому має одну з найвищих ліквідностей для дуже широкого спектра токенів. Ви можете легко інтегрувати її у свій dapp, щоб, наприклад, дозволити користувачам здійснювати обмін свого ETH на DAI.

На жаль, на момент написання цієї статті інтеграція доступна лише для Юнісвоп 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 для даних, які вам дійсно потрібні, та налаштувати розгортання.