---
title: "Швидкий старт розробки фронтенду вашого децентралізованого застосунку (dapp) за допомогою create-eth-app"
description: "Огляд того, як використовувати create-eth-app та його функції"
author: "Маркус Ваас"
tags:
  ["фронтенд", "JavaScript", "ethers.js", "the graph", "defi"]
skill: beginner
breadcrumb: create-eth-app
lang: uk
published: 2020-04-27
source: soliditydeveloper.com
sourceUrl: https://soliditydeveloper.com/create-eth-app
---

Минулого разу ми розглянули [загальну картину Solidity](https://soliditydeveloper.com/solidity-overview-2020) і вже згадували про [create-eth-app](https://github.com/PaulRBerg/create-eth-app). Тепер ви дізнаєтеся, як його використовувати, які функції в нього інтегровані, а також отримаєте додаткові ідеї щодо його розширення. Створений Полом Разваном Бергом (Paul Razvan Berg), засновником [Sablier](https://sablier.com/), цей застосунок дасть швидкий старт розробці вашого фронтенду та постачається з кількома додатковими інтеграціями на вибір.

## Встановлення {#installation}

Для встановлення потрібен Yarn версії 0.25 або вище (`npm install yarn --global`). Це так само просто, як виконати:

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

Внутрішньо він використовує [create-react-app](https://github.com/facebook/create-react-app). Щоб побачити свій застосунок, відкрийте `http://localhost:3000/`. Коли ви будете готові розгорнути його у робочому середовищі, створіть мініфікований пакет за допомогою команди yarn build. Одним із простих способів розміщення є [Netlify](https://www.netlify.com/). Ви можете створити репозиторій на GitHub, додати його до Netlify, налаштувати команду збирання — і готово! Ваш застосунок буде розміщено в мережі та доступно для всіх. І все це абсолютно безкоштовно.

## Функції {#features}

### React та create-react-app {#react--create-react-app}

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

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

Зокрема, _create-eth-app_ використовує нові [ефекти хуків (hooks effects)](https://legacy.reactjs.org/docs/hooks-effect.html). Це метод написання потужних, але дуже компактних так званих функціональних компонентів. Дивіться розділ про Apollo нижче, щоб дізнатися, як вони використовуються в _create-eth-app_.

### Робочі простори Yarn (Yarn Workspaces) {#yarn-workspaces}

[Робочі простори Yarn](https://classic.yarnpkg.com/en/docs/workspaces/) дозволяють мати кілька пакетів, але керувати ними всіма з кореневої папки та встановлювати залежності для всіх одночасно за допомогою `yarn install`. Це особливо має сенс для невеликих додаткових пакетів, таких як керування адресами смарт-контрактів/ABI (інформація про те, де ви розгорнули які смарт-контракти та як з ними взаємодіяти) або інтеграція The Graph, які є частиною `create-eth-app`.

### ethers.js {#ethersjs}

Хоча [Web3](https://docs.web3js.org/) все ще використовується найчастіше, [ethers.js](https://docs.ethers.io/) за останній рік набув значної популярності як альтернатива і саме він інтегрований у _create-eth-app_. Ви можете працювати з ним, змінити його на Web3 або розглянути можливість оновлення до [ethers.js v5](https://docs.ethers.org/v5/), який майже вийшов із бета-версії.

### The Graph {#the-graph}

[GraphQL](https://graphql.org/) — це альтернативний спосіб обробки даних порівняно з [RESTful API](https://restfulapi.net/). Він має кілька переваг над RESTful API, особливо для децентралізованих даних блокчейну. Якщо вас цікавить обґрунтування цього, перегляньте статтю [GraphQL Will Power the Decentralized Web](https://medium.com/graphprotocol/graphql-will-power-the-decentralized-web-d7443a69c69a).

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

Крім того, вас можуть зацікавити історичні дані. Ви хочете знати не лише час останньої угоди, але й час усіх угод, які ви коли-небудь здійснювали. Використовуйте пакет підграфа _create-eth-app_, прочитайте [документацію](https://thegraph.com/docs/en/subgraphs/developing/creating/starting-your-subgraph) та адаптуйте його до власних контрактів. Якщо ви шукаєте популярні смарт-контракти, для них, можливо, вже існує підграф. Перегляньте [провідник підграфів](https://thegraph.com/explorer/).

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

### Apollo {#apollo}

Завдяки інтеграції [Apollo Boost](https://www.apollographql.com/docs/react/get-started/) ви можете легко інтегрувати The Graph у свій React dapp. Особливо при використанні [хуків React та Apollo](https://www.apollographql.com/blog/apollo-client-now-with-react-hooks), отримання даних стає таким же простим, як написання одного запиту GraphQL у вашому компоненті:

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

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

## Шаблони {#templates}

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

### Aave {#aave}

[Aave](https://aave.com/) — це децентралізований ринок кредитування. Вкладники надають ліквідність ринку для отримання пасивного доходу, тоді як позичальники можуть брати позики під заставу. Однією з унікальних особливостей Aave є [флеш-кредити](https://aave.com/docs/developers/flash-loans), які дозволяють позичати гроші без будь-якої застави, за умови, що ви повернете позику в межах однієї транзакції. Це може бути корисним, наприклад, для отримання додаткових коштів під час арбітражної торгівлі.

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

Якщо ви вирішите інтегрувати Aave з _create-eth-app_, ви отримаєте [інтеграцію підграфа](https://docs.aave.com/developers/getting-started/using-graphql). Aave використовує The Graph і вже надає вам кілька готових до використання підграфів у мережах [Ропстен](https://thegraph.com/explorer/subgraph/aave/protocol-ropsten) та [Головна мережа](https://thegraph.com/explorer/subgraph/aave/protocol) у [необробленому](https://thegraph.com/explorer/subgraph/aave/protocol-raw) або [відформатованому](https://thegraph.com/explorer/subgraph/aave/protocol) вигляді.

![Aave Flash Loan meme – "Yeahhh, if I could keep my flash loan longer than 1 transaction, that would be great"](./flashloan-meme.png)

### Compound {#compound}

[Compound](https://compound.finance/) схожий на Aave. Інтеграція вже включає новий [підграф Compound v2](https://medium.com/graphprotocol/https-medium-com-graphprotocol-compound-v2-subgraph-highlight-a5f38f094195). Токени, що приносять відсотки, тут, як не дивно, називаються _cTokens_.

### Юнісвоп {#uniswap}

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

На жаль, на момент написання цієї статті інтеграція доступна лише для Юнісвоп v1, а не для [щойно випущеної v2](https://uniswap.org/blog/uniswap-v2/).

### Sablier {#sablier}

[Sablier](https://sablier.com/) дозволяє користувачам здійснювати потокові грошові платежі. Замість одного дня виплати ви фактично отримуєте свої гроші постійно без подальшого адміністрування після початкового налаштування. Інтеграція включає його [власний підграф](https://thegraph.com/explorer/subgraph/sablierhq/sablier).

## Що далі? {#whats-next}

Якщо у вас є запитання щодо _create-eth-app_, перейдіть на [сервер спільноти Sablier](https://discord.gg/bsS8T47), де ви можете зв'язатися з авторами _create-eth-app_. Як перші наступні кроки ви можете інтегрувати фреймворк інтерфейсу користувача, наприклад [Material UI](https://mui.com/material-ui/), написати запити GraphQL для даних, які вам дійсно потрібні, та налаштувати розгортання.