---
title: "Быстрый старт разработки фронтенда вашего децентрализованного приложения (dapp) с помощью create-eth-app"
description: "Обзор использования create-eth-app и его функций"
author: "Маркус Ваас"
tags:
  - фронтенд
  - javascript
  - ethers.js
  - the graph
  - defi
skill: beginner
breadcrumb: create-eth-app
lang: ru
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 будет управлять децентрализованным интернетом](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 медленным и неэффективным. Одним из обходных путей может быть функция вызова сборщика внутри вашего контракта, которая возвращает несколько данных одновременно. Однако это не всегда идеально.

Кроме того, вас могут заинтересовать исторические данные. Вы хотите знать не только время последней сделки, но и время всех сделок, которые вы когда-либо совершали сами. Используйте пакет подграфа _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 в свое dapp на React. Особенно при использовании [хуков 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) в [необработанном (raw)](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_. В качестве первых следующих шагов вы можете интегрировать UI-фреймворк, такой как [Material UI](https://mui.com/material-ui/), написать запросы GraphQL для данных, которые вам действительно нужны, и настроить развертывание.