Web3: Wie und warum man Frontend-Apps schreibt

Web3 ist in letzter Zeit zweifelsohne ein oft genannter Begriff geworden. Was bringt dir dieses dezentralisierte Internet der Zukunft und was bedeutet es für Entwickler und User? Wie können wir es zu unserem Vorteil nutzen?

In diesem Artikel werfen wir einen Blick auf die Möglichkeiten von Web 3.0 in Bezug auf das Frontend und gehen auf einen konkreten Fall in der App-Entwicklung ein.

Web x.0

Wir können Web3 (oder Web 3.0) als ein technologisches Konzept direkter Kommunikation des Webs mit der Blockchain verstehen sowie als eine neue Richtung, in die sich die gesamte Webwelt und damit das Internet bewegt.

Web3 ist somit der nächste Schritt. Zuerst kam Web 1.0 mit seinen statischen Inhalten, die nur von Entwicklern/Content Creators des Webs erstellt werden konnten. Dann kam Web 2.0 – im Wesentlichen das Web, wie wir es heute kennen. Typisch für das Web 2.0 ist, dass die Apps interaktiv sind und von den Usern selbst gepflegt und mit Inhalten gefüllt werden können. Das bedeutet, dass eine Vielzahl von Blogs, Redaktionssystemen, kollaborativen Plattformen, sozialen Netzwerken und anderen Web Apps entstehen.

Das Web 2.0 wird also größtenteils von den Usern geschaffen. Im Hintergrund wirken allerdings zentralisierte Dienste, die von Instanzen betrieben werden, die nicht nur alle User-Daten besitzen, sondern auch die komplette Kontrolle über die Daten sowie die Apps selbst haben.

Web3

Das Hauptthema von Web 3 ist daher die Dezentralisierung und die Unabhängigkeit von jeglichen zentralen Instanzen. Frontend-Web3-Apps oder DApps (dezentrale Apps) sind daher nicht mit einem regulären Backend-Server oder einer Datenbank verbunden, sondern kommunizieren direkt mit der Blockchain.

Eine typische Web3 App besteht aus den folgenden Teilen:

• Frontend – Basierend auf den Eingaben des Users erstellt und sendet es Anfragen an Smart Contracts,
• Wallet – signiert Transaktionen und sendet sie an die Blockchain,
• Smart Contracts – enthält die wesentliche Business-Logik der App.

Wie man eine einfache Frontend-DApp erstellt

Der folgende Abschnitt konzentriert sich auf eine praktische Demonstration wie man das Frontend mit einer MetaMask Krypto-Wallet verbindet sowie auf die grundlegenden Kommunikation mit Smart Contracts.

Krypto-Wallets

Krypto-Wallets spielen im Web3 eine Schlüsselrolle, da sie neben der Wallet-Funktionalität auch als Online-Identität dienen, die es dem User ermöglicht, sich zu authentifizieren und zu bezahlen, ohne sich an reguläre Zahlungs- oder Identifikationsdienste wenden zu müssen.

Für diese Demonstration verwenden wir die Wallet MetaMask. Falls du keine MetaMask-Wallet hast, lade dir eine Erweiterung für deinen Chrome-Browser herunter und erstelle deine eigene Wallet. Wenn das erfolgreich war, solltest du deine Wallet und deinen Kontostand sehen.

Wie man die Web3 App mit der Wallet verbindet

Für die Verbindung der Krypto-Wallet mit der React-Anwendung verwenden wir den DAppProvider aus der Library @usedapp/core. Er erstellt den benötigten Context und ermöglicht somit den Aufruf anderer Methoden aus dieser Library innerhalb nested Elements. In der folgenden Demonstration ist das die App-Komponente.

import { DAppProvider } from '@usedapp/core'
return (
  <DAppProvider config={{}}>
    <App />
  </DAppProvider>
)d

Der bereitgestellte Context ermöglicht den Aufruf einzelner Funktionen aus der @usedapp/core innerhalb der Komponente. Dies ermöglicht uns die Kommunikation mit der Wallet oder einem Smart Contract. Die Verwendung des Hilfspräfixes deutet darauf hin, dass es sich um React Hooky handeln wird, was gewährleistet, dass die Daten in der Komponente immer auf dem neuesten Stand sind. Dank der Hooks erhalten wir die benötigten Informationen von der Wallet, die dann mit der @ethersproject/units Library zu einem lesbaren Wert formatiert werden. In der Wallet können wir einfach zwischen den Konten wechseln, deren Wert automatisch in deiner web3 App gespiegelt wird.

import { useEthers, useEtherBalance } from '@usedapp/core';
import { formatEther } from '@ethersproject/units';

const { activateBrowserWallet, account } = useEthers();
const etherBalance = useEtherBalance(account);

<p>{parseFloat(formatEther(etherBalance)).toFixed(2)} ETH</p>

Kommunikation von dApp mit Smart Contract

Zum Testen der Methoden, die der Smart Contract bietet, werden wir die Web-IDE Remix verwenden. Sie funktioniert sehr ähnlich wie beispielsweise Postman zum Testen von REST-API. Damit können wir uns mit einem Smart Contract verbinden, der auf einer bestimmten Adresse veröffentlicht ist, und bestimmte Methoden mit eingegebenen Inputs aufrufen.

In der Abbildung sehen Sie zwei Arten von Methoden, nämlich RPC-Call (blau), bei denen Daten nur gelesen werden sowie Transaktionen (orange), bei denen der Netzwerkstatus geändert wird.

Verbindung der web3 App mit Smart Contract

Die oben erwähnte Library @usedapp/core bietet wiederum über benutzerdefinierte Hooks eine Schnittstelle sowohl für RPC-Aufrufe als auch für Transaktionen.

Für den Aufruf von RPC-Call-Methoden verwenden wir useContractCall, das als Argumente nimmt:

• Schnittstelle des mit einer ABI-Datei erstellten Smart Contracts (JSON-Definition und Beschreibung der bereitgestellten Methoden),
• Adresse, unter der der intelligente Vertrag läuft,
• Name der Methode (balanceOf),
• spezifische Argumente der ausgewählten Methode.

In der folgenden Demonstration gibt dieser Hook direkt ein Feld zurück, in dem an erster Stelle der Saldo Ihres Kontos in der spezifischen App steht.

import { useContractCall, useContractFunction } from '@usedapp/core';
import { Contract } from '@ethersproject/contracts';
import { ethers } from 'ethers';

import simpleContractAbi from './ABI.json'; // JSON defined interface of methods

export const simpleContractAddress = '0xa788C207749F123bE722720b6629F6Ac52A1b8C9';
const simpleContractInterface = new ethers.utils.Interface(simpleContractAbi);

// RPC call - reading interaction
const [balance]: any =
  useContractCall({
    abi: simpleContractInterface,
    address: simpleContractAddress,
    method: 'balanceOf',
    args: ['0xEC28e6671Bcb93979DFB1734e5240c0cF52bC152', '1'],
  }) ?? [];

Um eine Transaktion aufzurufen, müssen wir einen declarativen Ansatz mit dem Hook useContractFunction verwenden. Dabei müssen wir ein Vertragsobjekt erstellen und den Namen der Methode übergeben. Dieser Hook meldet den Status der Transaktion einschließlich möglicher Fehler und einer bestimmten Funktion zurück.

import { useContractCall, useContractFunction } from '@usedapp/core';
import { Contract } from '@ethersproject/contracts';
import { ethers } from 'ethers';

import simpleContractAbi from './ABI.json'; // JSON defined interface of methods

// smart contract deployed address
export const simpleContractAddress = '0xa788C207749F123bE722720b6629F6Ac52A1b8C9';
const simpleContractInterface = new ethers.utils.Interface(simpleContractAbi);

const contract = new Contract(simpleContractAddress, simpleContractInterface);

// Transaction - modifying interaction
const { state, send } = useContractFunction(contract, 'safeTransferFrom');
send()

Durch den Aufruf der Transaktion-Methode wird automatisch deine Krypto-Wallet kontaktiert, die Informationen über die eingeleitete Transaktion erhält und dir anbietet, diese zu bestätigen oder abzulehnen. Auf diese Weise ist die Transaktion sicher und wird von deiner Wallet und nicht von der jeweiligen App verwaltet.

Um alle Interaktionen einer Web3-App mit einem Smart Contract zu überwachen, kannst du den Dienst EtherScan nutzen, bei dem man einfach die Adresse des Smart Contracts direkt in die URL https://etherscan.io/address/ eingibt und einen perfekten Überblick darüber bekommt, was innerhalb der App passiert.

Web3: eine neue Ära von Web Apps

Web 3.0 steht für ein neues Konzept der Architektur und ein neues Geschäftsmodell für Web-Apps. Weil die Frontend-App direkt mit der Blockchain kommuniziert, ist es nicht mehr notwendig, den Betreibern des Services private Schlüssel oder Token anzuvertrauen, alles unterliegt der Kontrolle des Users.

Wir haben uns die Demo einer Frontend App angesehen, die mit der Ethereum Blockchain verbunden ist. Bei Ackee gehen wir diesen Weg, um Web3-Apps zu entwickeln. Wenn du also nach Entwicklern für dein Projekt suchst, zögere nicht, uns zu kontaktieren!

Ein eigenes Thema, das den Rahmen dieses Artikels sprengen würde, ist das Programmieren des "Backends" oder des erwähnten Smart Contracts, mit dem die web3 Frontend App kommuniziert. Dabei kann dich unsere Schwesterfirma Ackee Blockchain unterstützen.