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

Beim letzten Mal haben wir uns das Gesamtbild von Solidity (öffnet in einem neuen Tab) angesehen und bereits die create-eth-app (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen Tab) selbst macht das Erstellen interaktiver Benutzeroberflächen (UIs) wirklich einfach. Es ist vielleicht nicht so anfängerfreundlich wie Vue (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen Tab) immer noch am häufigsten verwendet wird, hat Ethers.js (öffnet in einem neuen 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 (öffnet in einem neuen Tab) in Betracht ziehen, das die Beta-Phase fast verlassen hat.

The Graph

GraphQL (öffnet in einem neuen Tab) ist ein alternativer Weg zur Datenverarbeitung im Vergleich zu einer RESTful API (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen 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 (öffnet in einem neuen Tab). Aave verwendet The Graph und stellt Ihnen bereits mehrere einsatzbereite Subgraphen auf Ropsten (öffnet in einem neuen Tab) und im Mainnet (öffnet in einem neuen Tab) in roher (öffnet in einem neuen Tab) oder formatierter (öffnet in einem neuen Tab) Form zur Verfügung.

Compound

Compound (öffnet in einem neuen Tab) ist ähnlich wie Aave. Die Integration beinhaltet bereits den neuen Compound v2 Subgraph (öffnet in einem neuen Tab). Die zinsbringenden Token werden hier überraschenderweise cTokens genannt.

Uniswap

Uniswap (öffnet in einem neuen 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 (öffnet in einem neuen Tab) verfügbar.

Sablier

Sablier (öffnet in einem neuen 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 (öffnet in einem neuen Tab).

Wie geht es weiter?

Wenn Sie Fragen zur create-eth-app haben, besuchen Sie den Sablier-Community-Server (öffnet in einem neuen 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 (öffnet in einem neuen Tab) integrieren, GraphQL-Abfragen für die Daten schreiben, die Sie tatsächlich benötigen, und die Bereitstellung einrichten.