Starten Sie Ihre Dapp-Frontend-Entwicklung mit create-eth-app

Beim letzten Mal haben wir uns das Gesamtbild von Solidity (opens in a new tab) angesehen und bereits die create-eth-app (opens in a new tab) erwähnt. Nun werden Sie herausfinden, wie man sie verwendet, welche Funktionen integriert sind und zusätzliche Ideen erhalten, wie man sie erweitern kann. Diese App, die von Paul Razvan Berg, dem Gründer von Sablier (opens in a new tab), ins Leben gerufen wurde, wird Ihre Frontend-Entwicklung in Schwung bringen und bietet mehrere optionale Integrationen zur Auswahl.

Installation

Die Installation erfordert Yarn 0.25 oder höher (npm install yarn --global). Es ist so einfach wie das Ausführen von:

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

Intern verwendet es create-react-app (opens in a new tab). Um Ihre App zu sehen, öffnen Sie http://localhost:3000/. Wenn Sie bereit sind, sie für die Produktion bereitzustellen, erstellen Sie ein minimiertes Bundle mit yarn build. Eine einfache Möglichkeit, dies zu hosten, wäre Netlify (opens in a new tab). Sie können ein GitHub-Repo erstellen, es zu Netlify hinzufügen, den Build-Befehl einrichten und schon sind Sie fertig! Ihre App wird gehostet und ist für jeden nutzbar. Und das alles kostenlos.

Funktionen

React & create-react-app

Zunächst einmal das Herzstück der App: React und all die zusätzlichen Funktionen, die mit create-react-app einhergehen. Nur dies zu verwenden, ist eine großartige Option, wenn Sie Ethereum nicht integrieren möchten. React (opens in a new tab) selbst macht das Erstellen interaktiver Benutzeroberflächen (UIs) wirklich einfach. Es ist vielleicht nicht so anfängerfreundlich wie Vue (opens in a new tab), wird aber dennoch am häufigsten verwendet, hat mehr Funktionen und vor allem Tausende von zusätzlichen Bibliotheken zur Auswahl. Die create-react-app macht den Einstieg ebenfalls sehr einfach und beinhaltet:

• Unterstützung für React, JSX, ES6, TypeScript und Flow-Syntax.
• Sprach-Extras über ES6 hinaus, wie den Object-Spread-Operator.
• CSS mit automatischen Präfixen, sodass Sie keine -webkit- oder andere Präfixe benötigen.
• Einen schnellen, interaktiven Unit-Test-Runner mit integrierter Unterstützung für Coverage-Berichte.
• Einen Live-Entwicklungsserver, der vor häufigen Fehlern warnt.
• Ein Build-Skript zum Bündeln von JS, CSS und Bildern für die Produktion, mit Hashes und Sourcemaps.

Insbesondere die create-eth-app nutzt die neuen Hooks-Effekte (opens in a new tab). Eine Methode, um leistungsstarke, aber dennoch sehr kleine sogenannte funktionale Komponenten zu schreiben. Im folgenden Abschnitt über Apollo erfahren Sie, wie sie in der create-eth-app verwendet werden.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) ermöglichen es Ihnen, mehrere Pakete zu haben, diese aber alle aus dem Stammverzeichnis zu verwalten und Abhängigkeiten für alle auf einmal mit yarn install zu installieren. Dies ist besonders sinnvoll für kleinere Zusatzpakete wie die Verwaltung von Smart-Contract-Adressen/ABIs (die Informationen darüber, wo Sie welche Smart Contracts bereitgestellt haben und wie Sie mit ihnen kommunizieren) oder die The Graph-Integration, die beide Teil von create-eth-app sind.

Ethers.js

Während Web3 (opens in a new tab) immer noch am häufigsten verwendet wird, hat Ethers.js (opens in a new tab) im letzten Jahr als Alternative stark an Zugkraft gewonnen und ist in die create-eth-app integriert. Sie können damit arbeiten, es zu Web3 ändern oder ein Upgrade auf Ethers.js v5 (opens in a new tab) in Betracht ziehen, das die Beta-Phase fast verlassen hat.

The Graph

GraphQL (opens in a new tab) ist ein alternativer Weg zur Datenverarbeitung im Vergleich zu einer RESTful API (opens in a new tab). Sie haben mehrere Vorteile gegenüber RESTful APIs, insbesondere für dezentrale Blockchain-Daten. Wenn Sie an den Gründen dafür interessiert sind, werfen Sie einen Blick auf GraphQL Will Power the Decentralized Web (opens in a new tab).

Normalerweise würden Sie Daten direkt von Ihrem Smart Contract abrufen. Möchten Sie die Zeit des letzten Handels auslesen? Rufen Sie einfach MyContract.methods.latestTradeTime().call() auf, was die Daten von einem Ethereum-Knoten in Ihre dezentrale Anwendung (Dapp) abruft. Aber was ist, wenn Sie Hunderte von verschiedenen Datenpunkten benötigen? Das würde zu Hunderten von Datenabrufen beim Knoten führen, die jedes Mal eine RTT (opens in a new tab) erfordern und Ihre Dapp langsam und ineffizient machen. Ein Workaround könnte eine Fetcher-Aufruffunktion innerhalb Ihres Vertrags sein, die mehrere Daten auf einmal zurückgibt. Dies ist jedoch nicht immer ideal.

Und dann könnten Sie auch an historischen Daten interessiert sein. Sie möchten nicht nur die Zeit des letzten Handels wissen, sondern die Zeiten für alle Trades, die Sie jemals selbst getätigt haben. Verwenden Sie das Subgraph-Paket der create-eth-app, lesen Sie die Dokumentation (opens in a new tab) und passen Sie es an Ihre eigenen Verträge an. Wenn Sie nach beliebten Smart Contracts suchen, gibt es vielleicht sogar schon einen Subgraph. Sehen Sie sich den Subgraph-Explorer (opens in a new tab) an.

Sobald Sie einen Subgraph haben, ermöglicht er es Ihnen, eine einfache Abfrage in Ihrer Dapp zu schreiben, die alle wichtigen Blockchain-Daten einschließlich der historischen abruft, die Sie benötigen – es ist nur ein einziger Abruf erforderlich.

Apollo

Dank der Apollo Boost (opens in a new tab)-Integration können Sie The Graph ganz einfach in Ihre dezentrale Anwendung (Dapp) mit React integrieren. Besonders bei der Verwendung von React-Hooks und Apollo (opens in a new tab) ist das Abrufen von Daten so einfach wie das Schreiben einer einzigen GraphQL-Abfrage in Ihrer Komponente:

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

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

Vorlagen

Darüber hinaus können Sie aus mehreren verschiedenen Vorlagen wählen. Bisher können Sie eine Integration für Aave, Compound, Uniswap oder Sablier verwenden. Sie alle fügen wichtige Service-Smart-Contract-Adressen zusammen mit vorgefertigten Subgraph-Integrationen hinzu. Fügen Sie die Vorlage einfach dem Erstellungsbefehl hinzu, wie yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) ist ein dezentraler Markt für die Kreditvergabe. Einleger stellen dem Markt Liquidität zur Verfügung, um ein passives Einkommen zu erzielen, während Kreditnehmer in der Lage sind, Kredite unter Verwendung von Sicherheiten aufzunehmen. Ein einzigartiges Merkmal von Aave sind diese Blitzkredite (opens in a new tab), die es Ihnen ermöglichen, Geld ohne jegliche Sicherheit zu leihen, solange Sie den Kredit innerhalb einer einzigen Transaktion zurückzahlen. Dies kann beispielsweise nützlich sein, um Ihnen zusätzliches Kapital für Arbitrage-Handel zu verschaffen.

Gehandelte Token, die Ihnen Zinsen einbringen, werden aTokens genannt.

Wenn Sie sich entscheiden, Aave in die create-eth-app zu integrieren, erhalten Sie eine Subgraph-Integration (opens in a new tab). Aave verwendet The Graph und stellt Ihnen bereits mehrere einsatzbereite Subgraphen auf Ropsten (opens in a new tab) und im Mainnet (opens in a new tab) in roher (opens in a new tab) oder formatierter (opens in a new tab) Form zur Verfügung.

Compound

Compound (opens in a new tab) ist ähnlich wie Aave. Die Integration beinhaltet bereits den neuen Compound v2 Subgraph (opens in a new tab). Die zinsbringenden Token werden hier überraschenderweise cTokens genannt.

Uniswap

Uniswap (opens in a new tab) ist eine dezentrale Börse (DEX). Liquiditätsanbieter können Gebühren verdienen, indem sie die erforderlichen Token oder Ether für beide Seiten eines Handels bereitstellen. Es ist weit verbreitet und weist daher eine der höchsten Liquiditäten für eine sehr breite Palette von Token auf. Sie können es einfach in Ihre dezentrale Anwendung (Dapp) integrieren, um Benutzern beispielsweise den Tausch ihrer ETH gegen DAI zu ermöglichen.

Leider ist die Integration zum Zeitpunkt des Schreibens dieses Artikels nur für Uniswap v1 und nicht für das gerade veröffentlichte v2 (opens in a new tab) verfügbar.

Sablier

Sablier (opens in a new tab) ermöglicht Benutzern das Streamen von Geldzahlungen. Anstelle eines einzigen Zahltags erhalten Sie Ihr Geld nach der anfänglichen Einrichtung tatsächlich kontinuierlich ohne weiteren Verwaltungsaufwand. Die Integration beinhaltet ihren eigenen Subgraph (opens in a new tab).

Wie geht es weiter?

Wenn Sie Fragen zur create-eth-app haben, besuchen Sie den Sablier-Community-Server (opens in a new tab), wo Sie mit den Autoren der create-eth-app in Kontakt treten können. Als erste nächste Schritte möchten Sie vielleicht ein UI-Framework wie Material UI (opens in a new tab) integrieren, GraphQL-Abfragen für die Daten schreiben, die Sie tatsächlich benötigen, und die Bereitstellung einrichten.