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

фронтенд

JavaScript

ethers.js

the graph

defi

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

Маркус Ваас

soliditydeveloper.com

27 квітня 2020 р.

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

Минулого разу ми розглянули загальну картину Solidity (відкривається в новій вкладці) і вже згадували про create-eth-app (відкривається в новій вкладці). Тепер ви дізнаєтеся, як його використовувати, які функції в нього інтегровані, а також отримаєте додаткові ідеї щодо його розширення. Створений Полом Разваном Бергом (Paul Razvan Berg), засновником Sablier (відкривається в новій вкладці), цей застосунок дасть швидкий старт розробці вашого фронтенду та постачається з кількома додатковими інтеграціями на вибір.

Встановлення

Для встановлення потрібен 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 (відкривається в новій вкладці). Щоб побачити свій застосунок, відкрийте http://localhost:3000/. Коли ви будете готові розгорнути його у робочому середовищі, створіть мініфікований пакет за допомогою команди yarn build. Одним із простих способів розміщення є Netlify (відкривається в новій вкладці). Ви можете створити репозиторій на GitHub, додати його до Netlify, налаштувати команду збирання — і готово! Ваш застосунок буде розміщено в мережі та доступно для всіх. І все це абсолютно безкоштовно.

Функції

React та create-react-app

Перш за все, серце застосунку: React та всі додаткові функції, що постачаються з create-react-app. Використання лише цього інструменту є чудовим варіантом, якщо ви не хочете інтегрувати Етеріум. Сам по собі React (відкривається в новій вкладці) робить створення інтерактивних інтерфейсів користувача (UI) дуже простим. Можливо, він не такий дружній до новачків, як Vue (відкривається в новій вкладці), але він все ще є найпопулярнішим, має більше функцій і, що найважливіше, тисячі додаткових бібліотек на вибір. create-react-app також значно полегшує початок роботи з ним і включає:

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

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

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

Робочі простори Yarn (відкривається в новій вкладці) дозволяють мати кілька пакетів, але керувати ними всіма з кореневої папки та встановлювати залежності для всіх одночасно за допомогою yarn install. Це особливо має сенс для невеликих додаткових пакетів, таких як керування адресами смарт-контрактів/ABI (інформація про те, де ви розгорнули які смарт-контракти та як з ними взаємодіяти) або інтеграція The Graph, які є частиною create-eth-app.

ethers.js

Хоча Web3 (відкривається в новій вкладці) все ще використовується найчастіше, ethers.js (відкривається в новій вкладці) за останній рік набув значної популярності як альтернатива і саме він інтегрований у create-eth-app. Ви можете працювати з ним, змінити його на Web3 або розглянути можливість оновлення до ethers.js v5 (відкривається в новій вкладці), який майже вийшов із бета-версії.

The Graph

GraphQL (відкривається в новій вкладці) — це альтернативний спосіб обробки даних порівняно з RESTful API (відкривається в новій вкладці). Він має кілька переваг над RESTful API, особливо для децентралізованих даних блокчейну. Якщо вас цікавить обґрунтування цього, перегляньте статтю GraphQL Will Power the Decentralized Web (відкривається в новій вкладці).

Зазвичай ви отримуєте дані безпосередньо зі свого смарт-контракту. Хочете дізнатися час останньої угоди? Просто викличте MyContract.methods.latestTradeTime().call(), що отримає дані з вузла Етеріуму у ваш dapp. Але що, якщо вам потрібні сотні різних точок даних? Це призведе до сотень запитів даних до вузла, кожен з яких вимагатиме RTT (відкривається в новій вкладці) (часу прийому-передачі), що зробить ваш dapp повільним і неефективним. Одним із варіантів вирішення може бути функція виклику збирача (fetcher) всередині вашого контракту, яка повертає кілька даних одночасно. Однак це не завжди ідеально.

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

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

Apollo

Завдяки інтеграції Apollo Boost (відкривається в новій вкладці) ви можете легко інтегрувати The Graph у свій React dapp. Особливо при використанні хуків React та Apollo (відкривається в новій вкладці), отримання даних стає таким же простим, як написання одного запиту 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 (відкривається в новій вкладці) — це децентралізований ринок кредитування. Вкладники надають ліквідність ринку для отримання пасивного доходу, тоді як позичальники можуть брати позики під заставу. Однією з унікальних особливостей Aave є флеш-кредити (відкривається в новій вкладці), які дозволяють позичати гроші без будь-якої застави, за умови, що ви повернете позику в межах однієї транзакції. Це може бути корисним, наприклад, для отримання додаткових коштів під час арбітражної торгівлі.

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

Якщо ви вирішите інтегрувати Aave з create-eth-app, ви отримаєте інтеграцію підграфа (відкривається в новій вкладці). Aave використовує The Graph і вже надає вам кілька готових до використання підграфів у мережах Ропстен (відкривається в новій вкладці) та Головна мережа (відкривається в новій вкладці) у необробленому (відкривається в новій вкладці) або відформатованому (відкривається в новій вкладці) вигляді.

Compound

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

Юнісвоп

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

На жаль, на момент написання цієї статті інтеграція доступна лише для Юнісвоп v1, а не для щойно випущеної v2 (відкривається в новій вкладці).

Sablier

Sablier (відкривається в новій вкладці) дозволяє користувачам здійснювати потокові грошові платежі. Замість одного дня виплати ви фактично отримуєте свої гроші постійно без подальшого адміністрування після початкового налаштування. Інтеграція включає його власний підграф (відкривається в новій вкладці).

Що далі?

Якщо у вас є запитання щодо create-eth-app, перейдіть на сервер спільноти Sablier (відкривається в новій вкладці), де ви можете зв'язатися з авторами create-eth-app. Як перші наступні кроки ви можете інтегрувати фреймворк інтерфейсу користувача, наприклад Material UI (відкривається в новій вкладці), написати запити GraphQL для даних, які вам дійсно потрібні, та налаштувати розгортання.