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 benutzt, welche Funktionen integriert sind und zusätzliche Ideen erhalten, wie man sie erweitern kann. Gestartet von Paul Razvan Berg, dem Gründer von Sablier (opens in a new tab), wird diese App 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

Unter der Haube wird create-react-app (opens in a new tab) verwendet. Um Ihre App zu sehen, öffnen Sie http://localhost:3000/. Wenn Sie bereit sind, in die Produktion zu gehen, 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), aber es wird immer noch 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.
• Autoprefixed CSS, sodass Sie keine -webkit- oder andere Präfixe benötigen.
• Einen schnellen, interaktiven Unit-Test-Runner mit integrierter Unterstützung für Coverage-Reporting.
• 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 Stammordner 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 Graph-Integration, die beide Teil der 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 auf Web3 umstellen 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). Es bietet mehrere Vorteile gegenüber Restful APIs, insbesondere für dezentralisierte 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-Blockchain-Knoten in Ihre Dapp abruft. Aber was ist, wenn Sie Hunderte von verschiedenen Datenpunkten benötigen? Das würde zu Hunderten von Datenabrufen beim Blockchain-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-Call-Funktion 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 letzte Handelszeit 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 möglicherweise sogar schon einen Subgraph. Schauen Sie sich den Subgraph Explorer (opens in a new tab) an.

Sobald Sie einen Subgraph haben, können Sie eine einfache Abfrage in Ihrer Dapp 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 React-Dapp 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:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
Kopieren

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 einfach die Vorlage zum Erstellungsbefehl hinzu, wie z. B. yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) ist ein dezentralisierter Geldleihmarkt. Einleger stellen dem Markt Liquidität zur Verfügung, um ein passives Einkommen zu erzielen, während Kreditnehmer in der Lage sind, Kredite gegen Sicherheiten aufzunehmen. Ein einzigartiges Merkmal von Aave sind die Flash Loans (opens in a new tab) (Blitzkredite), die es Ihnen ermöglichen, Geld ohne Sicherheiten 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 Subgraphs 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 dezentralisierte Börse (DEX). Liquiditätsanbieter können Gebühren verdienen, indem sie die erforderlichen Token oder Ether für beide Seiten eines Handels bereitstellen. Sie ist weit verbreitet und weist daher eine der höchsten Liquiditäten für eine sehr breite Palette von Token auf. Sie können sie einfach in Ihre Dapp integrieren, um Benutzern beispielsweise zu ermöglichen, ihre ETH gegen DAI zu tauschen.

Leider ist die Integration zum Zeitpunkt der Erstellung 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 kontinuierlich und 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 das Deployment einrichten.

Letzte Aktualisierung der Seite: 29. September 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Mitwirkende ansehen