Starte deine Dapp-Frontend-Entwicklung mit create-eth-app

Zuletzt haben wir uns das große Ganze von Solidity (opens in a new tab) angesehen und bereits create-eth-app (opens in a new tab) erwähnt. Jetzt erfährst du, wie du sie verwenden kannst, welche Funktionen integriert sind und wie du sie weiter ausbauen kannst. Diese App, die von Paul Razvan Berg, dem Gründer von Sablier (opens in a new tab), gestartet wurde, wird deine 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). Die Ausführung ist denkbar einfach:

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

Es verwendet create-react-app (opens in a new tab) unter der Haube. Um deine App zu sehen, öffne http://localhost:3000/. Wenn du bereit für den Einsatz in der Produktion bist, erstelle mit yarn build ein minifiziertes Bundle. Eine einfache Möglichkeit, dies zu hosten, wäre Netlify (opens in a new tab). Du kannst ein GitHub-Repo erstellen, es zu Netlify hinzufügen, den Build-Befehl einrichten und schon bist du fertig! Deine App wird gehostet und ist für alle nutzbar. Und all das 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 kommen. Die alleinige Nutzung ist eine gute Option, wenn du Ethereum nicht integrieren möchtest. React (opens in a new tab) selbst macht die Erstellung interaktiver UIs wirklich einfach. Es mag nicht so einsteigerfreundlich sein wie Vue (opens in a new tab), aber es wird immer noch am häufigsten verwendet, hat mehr Funktionen und, was am wichtigsten ist, es stehen Tausende von zusätzlichen Bibliotheken zur Auswahl. Die create-react-app macht den Einstieg ebenfalls sehr einfach und umfasst:

• Unterstützung für React-, JSX-, ES6-, TypeScript- und Flow-Syntax.
• Spracherweiterungen über ES6 hinaus, wie der Object-Spread-Operator.
• CSS mit automatischen Präfixen, sodass du keine -webkit- oder andere Präfixe benötigst.
• Ein schneller, interaktiver Unit-Test-Runner mit integrierter Unterstützung für Coverage-Reporting.
• Ein 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.

Die create-eth-app macht insbesondere von den neuen Hooks-Effekten (opens in a new tab) Gebrauch. Eine Methode, um leistungsstarke und dennoch sehr kleine sogenannte funktionale Komponenten zu schreiben. Wie sie in create-eth-app verwendet werden, steht im folgenden Abschnitt über Apollo.

Yarn Workspaces

Yarn Workspaces (opens in a new tab) ermöglichen es, mehrere Pakete zu haben, diese aber alle vom Stammverzeichnis aus zu verwalten und die Abhängigkeiten für alle auf einmal mit yarn install zu installieren. Dies ist vor allem bei kleineren Zusatzpaketen wie dem Management von Smart-Contract-Adressen/ABIs (die Information darüber, wo man welche Smart Contracts eingesetzt hat und wie man mit ihnen kommuniziert) oder der Graph-Integration sinnvoll, die beide Teil von create-eth-app sind.

ethers.js

Obwohl 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 viel Anklang gefunden und ist in create-eth-app integriert. Du kannst damit arbeiten, zu Web3 wechseln oder ein Upgrade auf ethers.js v5 (opens in a new tab) in Erwägung ziehen, das fast die Beta-Phase abgeschlossen hat.

The Graph

GraphQL (opens in a new tab) ist im Vergleich zu einer RESTful-API (opens in a new tab) eine alternative Methode für den Umgang mit Daten. Sie haben mehrere Vorteile gegenüber RESTful-APIs, insbesondere für dezentrale Blockchain-Daten. Wenn du an der Begründung dafür interessiert bist, schau dir GraphQL Will Power the Decentralized Web (opens in a new tab) an.

Normalerweise würdest du Daten direkt von deinem Smart Contract abrufen. Willst du die Zeit des letzten Handels auslesen? Rufe einfach MyContract.methods.latestTradeTime().call() auf, was die Daten von einem Ethereum-Node in deine Dapp holt. Aber was ist, wenn du Hunderte verschiedener Datenpunkte benötigst? Das würde zu Hunderten von Datenabrufen beim Node führen, die jedes Mal eine RTT (opens in a new tab) erfordern, was deine Dapp langsam und ineffizient machen würde. Eine Problemumgehung könnte eine Abruffunktion in deinem Contract sein, die mehrere Daten auf einmal zurückgibt. Das ist aber nicht immer ideal.

Und dann bist du vielleicht auch an historischen Daten interessiert. Du willst nicht nur die Zeit des letzten Handels wissen, sondern die Zeiten aller Handelsgeschäfte, die du jemals selbst getätigt hast. Verwende das Subgraph-Paket von create-eth-app, lies die Dokumentation (opens in a new tab) und passe es an deine eigenen Contracts an. Wenn du nach beliebten Smart Contracts suchst, gibt es möglicherweise sogar bereits einen Subgraph. Sieh dir den Subgraph-Explorer (opens in a new tab) an.

Sobald du einen Subgraph hast, kannst du eine einfache Abfrage in deiner Dapp schreiben, die alle wichtigen Blockchain-Daten, einschließlich historischer Daten, die du benötigst, abruft; dafür ist nur ein Abruf erforderlich.

Apollo

Dank der Apollo Boost (opens in a new tab)-Integration kannst du den Graphen einfach in deine React-Dapp integrieren. Besonders bei der Verwendung von React Hooks und Apollo ist das Abrufen von Daten so einfach wie das Schreiben einer einzigen GraphQL-Abfrage in deiner 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 kannst du aus verschiedenen Vorlagen wählen. Bisher kannst du eine Aave-, Compound-, UniSwap- oder Sablier-Integration verwenden. Sie alle fügen wichtige Smart-Contract-Adressen für Dienste zusammen mit vorgefertigten Subgraph-Integrationen hinzu. Füge einfach die Vorlage zum Erstellungsbefehl hinzu, wie yarn create eth-app my-eth-app --with-template aave.

Aave

Aave (opens in a new tab) ist ein dezentraler Geldleihmarkt. Die Einleger stellen dem Markt Liquidität zur Verfügung, um passives Einkommen zu generieren, während Kreditnehmer sich mithilfe von Sicherheiten Geld leihen können. Eine einzigartige Funktion von Aave sind die Flash Loans (opens in a new tab), die es dir ermöglichen, Geld ohne jegliche Sicherheiten zu leihen, solange du das Darlehen innerhalb einer einzigen Transaktion zurückzahlst. Das kann zum Beispiel nützlich sein, um zusätzliches Geld für das Arbitrage-Trading zu erhalten.

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

Wenn du dich für die Integration von Aave mit create-eth-app entscheidest, erhältst du eine Subgraph-Integration (opens in a new tab). Aave verwendet The Graph und stellt dir bereits mehrere einsatzbereite Subgraphs auf Ropsten (opens in a new tab) und 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 enthält 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. Es ist weit verbreitet und hat daher eine der höchsten Liquiditäten für eine sehr breite Palette von Token. Du kannst es einfach in deine Dapp integrieren, um beispielsweise Benutzern 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 die gerade veröffentlichte v2 (opens in a new tab) möglich.

Sablier

Sablier (opens in a new tab) ermöglicht Benutzern das Streamen von Geldzahlungen. Anstelle eines einzelnen Zahltages erhältst du dein Geld nach der anfänglichen Einrichtung kontinuierlich und ohne weitere Verwaltung. Die Integration umfasst einen eigenen Subgraph (opens in a new tab).

Was kommt als Nächstes?

Wenn du Fragen zu create-eth-app hast, besuche den Sablier Community-Server (opens in a new tab), wo du mit den Autoren von create-eth-app in Kontakt treten kannst. Als erste nächste Schritte könntest du ein UI-Framework wie Material UI (opens in a new tab) integrieren, GraphQL-Abfragen für die Daten schreiben, die du tatsächlich benötigst, und das Deployment einrichten.

Seite zuletzt aktualisiert: 29. September 2025

m (opens in a new tab)

c (opens in a new tab)

b (opens in a new tab)

+2

Siehe Mitwirkende