So integrierst du eine Nutzerfeedback-Schleife in deine Web3-Dapp

Das Sammeln von Nutzerfeedback ist einer der wichtigsten Schritte, um Product-Market-Fit zu erreichen und eine erfolgreiche Anwendung zu entwickeln. In web3 ist dies sogar noch bedeutsamer, da die Standards für UX-Design noch im Entstehen und nicht klar definiert sind.

Für web3-Entwickler bleibt die beliebteste Methode zur Erfassung von Nutzerfeedback zu ihren Dapps weiterhin zentralisierte Lösungen von Unternehmen wie Google und Mailchimp. Inzwischen sind jedoch On-Chain-Feedback-Formulare verfügbar. Schauen wir uns diese web3-nativen Feedback-Formulare an, warum sie für den Erfolg deiner Dapp wichtig sind und wie du sie einsetzen kannst.

In einem früheren Beitrag haben wir Form-xChange vorgestellt: ein neues Open-Source-, dezentrales web3-Formular, das von Consensys entwickelt wurde, und gezeigt, wie du es mithilfe des MetaMask SDK in deine Dapp integrieren kannst.

In diesem Tutorial bauen wir auf diesen Schritten auf und zeigen dir, wie du ein Feedback-Formular in deinem Frontend bereitstellst und ein neues Formular erstellst, über das Nutzer ihr Feedback zu deiner Dapp teilen können. Zunächst jedoch eine kurze Erinnerung an die Bedeutung des Sammelns von Nutzerfeedback für die Produktentwicklung und das Produktmanagement.

Web3-Nutzerfeedback-Formulare für die Massenadoption

Native, dezentralisierte Feedback-Formulare werden in web3 dringend benötigt. Warum?

1. Sie senken die Kosten erheblich: Die einzigen (und einmaligen) Kosten, die mit der Erstellung eines Formulars verbunden sind, entstehen bei der Bereitstellung eines Smart Contracts. Und wenn es auf einem L2 wie Linea bereitgestellt wird, übersteigen die Kosten in der Regel nicht ein paar Dollar.

2. Sie bieten nahezu unbegrenzte Anpassungsmöglichkeiten: Du kannst dein Formular so gestalten, dass es jede Art von Feedback erfasst, die du möchtest (Text, Reaktionen, Links usw.). Darüber hinaus kannst du dein Frontend nach Bedarf anpassen, da es vollständig unabhängig vom Contract ist.

3. Du zahlst nur für das, was du nutzt: Bei dezentralisierten Formularen gibt es keine Zahlungsstufen basierend auf der Anzahl der Antworten. Theoretisch kannst du so viele Antworten aufzeichnen, wie du möchtest. Wenn du ein Modell verwendest, bei dem Kunden Gas bezahlen, entstehen dir keine Kosten über die Contract-Bereitstellung hinaus. Wenn du die Kosten für deine Kunden übernimmst, belaufen sich diese ebenfalls auf wenige Cent, wenn du in einem kosteneffizienten Netzwerk arbeitest.

4. Du kannst Token Gating implementieren: Mit dezentralisierten Formularen kannst du den Zugang dazu einschränken, wer auf deine Formularfragen antworten kann. Theoretisch könntest du den Zugang auf Wallets beschränken, die NFTs aus deiner Collection besitzen, Wallets mit einem bestimmten Nicht-Null-Guthaben an ETH oder einem ERC-20-Token deiner Wahl.

Ein Tutorial: Erstelle dein eigenes dezentralisiertes Nutzerfeedback-Formular

Schritt 1: MetaMask installieren

Wir werden unsere Contracts auf Linea bereitstellen und mit ihnen interagieren. Dazu benötigen wir eine Krypto-Wallet, die mit dem Linea-Netzwerk konfiguriert ist und ein kleines Guthaben an LineaETH hat.

Zunächst benötigst du eine web3-Wallet. In diesem Tutorial verwenden wir MetaMask – eine kostenlose, einfach zu bedienende Wallet, die automatisch mit Linea konfiguriert ist. Du kannst MetaMask hier als Erweiterung für deinen Browser installieren.

Hinweis: Für dieses Tutorial empfehlen wir, einen anderen Browser als Brave zu verwenden (z. B. Edge, Chrome, Safari usw.). Zum Zeitpunkt der Erstellung dieses Artikels hat Form-xChange bekannte Probleme beim Ausführen im Brave-Browser.

Nachdem du die Erweiterung hinzugefügt hast, fordert dich MetaMask auf, eine Reihe von Schritten abzuschließen, einschließlich der Ausgabe deiner Wallet-Recovery-Phrase. Bewahre diese Phrase sorgfältig auf. Wenn sie verloren geht, kannst du sie nicht wiederherstellen. Wenn sie gestohlen wird, hat jemand anderes Zugriff auf deine Gelder.

Sobald deine Wallet eingerichtet ist, navigiere zum Netzwerk-Dropdown oben links in der MetaMask-Erweiterung und aktiviere Testnetzwerke anzeigen. Wähle aus dem neuen Dropdown das Linea Goerli-Netzwerk aus. Wenn alles gut geht, sollte deine Wallet in etwa so aussehen:

Schritt 2: LineaETH von einem Faucet erhalten

Wenn du zum ersten Mal mit Linea arbeitest, hat deine Wallet (natürlich) ein Guthaben von 0 LineaETH.

Lass uns das ändern. Infura hat einen Faucet, der dir täglich kostenlosen Zugang zu 0,5 LineaETH gibt. Um auf diesen Faucet zuzugreifen, wirst du möglicherweise aufgefordert, ein kostenloses Infura-Konto zu erstellen.

Sobald das Aufladen abgeschlossen ist, solltest du ein kleines LineaETH-Guthaben sehen:

Schritt 3: Einen Linea-RPC-Endpunkt erhalten

Melde dich erneut bei Infura mit dem Konto an, das du im vorherigen Schritt erstellt hast. Du wirst automatisch zum Haupt-Dashboard weitergeleitet.

Erstelle hier ein neues Projekt, indem du oben rechts einen neuen API-Schlüssel erstellst.

Wähle als Netzwerk die web3-API aus. Du kannst den Schlüssel beliebig benennen.

Sobald dein Schlüssel erstellt wurde, wirst du erneut zu einem Projekt-Dashboard weitergeleitet, das eine Sammlung von Endpunkten enthält. Notiere dir von hier aus den Endpunkt, der mit dem Linea-Testnetz verknüpft ist. Wir werden diesen in einem späteren Schritt benötigen, um unsere Form-xChange-Contracts bereitzustellen.

Schritt 4: Node und npm installieren

Die Form-xChange-Lösung läuft auf einem Stack aus Infura, Next.js, Truffle und der Dapp-API. Um diese Technologien zu installieren und zu verwenden, benötigen wir Node und npm auf unserem lokalen Rechner.

Hier kannst du beides für dein Betriebssystem herunterladen.

Überprüfe anschließend, ob die Installation korrekt durchgeführt wurde, indem du ihre Versionsnummern im Terminal überprüfst.

$ node -v
$ npm -v
Kopieren

Schritt 5: Das Form-xChange-Repository klonen

Wie bereits erwähnt, ist Form-xChange ein Open-Source-Repository, dessen Quellcode öffentlich auf GitHub verfügbar ist.

Lass uns dieses Repository klonen und alle erforderlichen Pakete mit den folgenden Befehlen installieren:

$ git clone https://github.com/Consensys/Form-XChange
$ cd Form-XChange
$ npm install
Kopieren

Öffne das Form-xChange-Repository in deinem bevorzugten Code-Editor (z. B. VS Code). Dies ist ein schlüsselfertiges Projekt, sodass wir abgesehen von der Konfiguration einiger Umgebungsvariablen kaum Code schreiben müssen.

Schritt 6: Das Feedback-Formular bereitstellen

Navigiere zum Unterordner, der das Truffle-Projekt und die Formular-Smart-Contracts enthält:

In diesem Ordner siehst du einen contracts-Unterordner, der zwei Hauptcontracts enthält: einen FeedbackForm und einen FeedbackFormFactory.

Ersterer implementiert ein einzelnes Formular, das in der Lage ist, eine Liste von Fragen und Antworten auf diese Fragen zu speichern.

Letzterer ist ein Factory-Contract, der verwendet werden kann, um angepasste Versionen des ersteren bereitzustellen.

Du kannst dir den Quellcode ansehen und Änderungen entsprechend der Art des Formulars vornehmen, das du erstellen möchtest. Für dieses Tutorial bleiben wir bei der Standardkonfiguration.

In diesem Schritt werden wir den FeedbackFormFactory-Contract bereitstellen. Dies ermöglicht es uns als Ersteller, Formulare aus unserem Next-Frontend zu erstellen.

Erstelle dazu eine Datei namens .env und füge die folgenden Informationen hinzu:

Ersetze anschließend in der Datei truffle-config.js den generischen RPC-Endpunkt durch den Infura-Endpunkt, den du in Schritt 3 generiert hast. Die endgültige Konfigurationsdatei sollte in etwa so aussehen:

require("dotenv").config();
const mnemonic = process.env["MNEMONIC"];

const HDWalletProvider = require("@truffle/hdwallet-provider");

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1", // Localhost
      port: 9545,
      network_id: "5777",
      chain_id: 1337,
    },
    linea: {
      provider: () =>
        new HDWalletProvider(mnemonic, `< INFURA LINEA ENDPOINT >`),
      network_id: 59140,
      chain_id: 59140,
    },
  },
  mocha: {
    timeout: 100000,
  },
  compilers: {
    solc: {
      version: "0.8.13",
    },
  },
};
Kopieren

Alles bereit! Stelle den Feedback-Formular-Factory-Contract bereit, indem du den folgenden Befehl ausführst:

Wenn alles gut geht, solltest du eine Ausgabe sehen, die in etwa so aussieht:

> [email protected] linea
> npm run compile && npm run generate-types && npm run migrate:linea

> [email protected] compile
> truffle compile

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

> [email protected] generate-types
> typechain --target=truffle-v5 'build/contracts/*.json'

Successfully generated 5 typings!

> [email protected] migrate:linea
> truffle migrate --network linea

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

Starting migrations...
======================
> Network name:    'linea'
> Network id:      59140
> Block gas limit: 61000000 (0x3a2c940)

1_deploy_contracts.js
=====================

   Replacing 'FeedbackFormFactory'
   -------------------------------
   > transaction hash:    0x50ba2c362cb463d0b763ba5f092e3f1a8591dd9cd358f2feda035438ce02cee0
   > Blocks: 2            Seconds: 21
   > contract address:    0xBDAb1F857dC80968022784cc1C868820BFD2F7c5
   > block number:        1099121
   > block timestamp:     1688991002
   > account:             0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
   > balance:             0.62878173171592041
   > gas used:            2636875 (0x283c4b)
   > gas price:           2.500000007 gwei
   > value sent:          0 ETH
   > total cost:          0.006592187518458125 ETH

   > Saving artifacts
   -------------------------------------
   > Total cost:     0.006592187518458125 ETH

Summary
=======
> Total deployments:   1
> Final cost:          0.006592187518458125 ETH
Kopieren

Notiere dir die Contract-Adresse. Wir werden diese in einem späteren Schritt benötigen.

Schritt 7: Das Next-Frontend-Factory bereitstellen

Da unser Feedback-Formular-Factory-Contract nun live ist, wenden wir uns dem Next-Frontend zu. Navigiere zum Next-App-Projekt, indem du den folgenden Befehl ausführst:

Wir müssen unsere App mit dem Contract verbinden, den wir im vorherigen Schritt bereitgestellt haben. Dazu öffnen wir die Datei lib/contract.ts/config.ts und fügen die Contract-Adresse hinzu.

Erstelle im Ordner apps/web eine weitere .env-Datei und füge diesmal den Infura-Schlüssel hinzu, der mit deinem Projekt aus Schritt 3 verknüpft ist.

Alles bereit! Lass uns nun die App auf localhost bereitstellen:

Du kannst die App jetzt auf localhost:3000 aufrufen. Sie sollte in etwa so aussehen:

Lass uns ein neues Formular erstellen!

Verbinde deine MetaMask-Wallet über die Funktion in der oberen rechten Ecke der App. Sobald dies erledigt ist, erkennt die App automatisch, dass du derjenige bist, der den Factory-Contract bereitgestellt hat, und daher bist du auch der Ersteller der App.

Dies ermöglicht es dir, hier neue Formulare über die Benutzeroberfläche zu erstellen.

Füge einen Formulartitel, eine Beschreibung und mindestens eine Frage hinzu und klicke auf Formular erstellen.

Daraufhin wird MetaMask aufgefordert, eine Transaktion zu genehmigen. Denke daran, dass du dazu aufgefordert wirst, weil die Erstellung eines Formulars effektiv die Erstellung eines neuen FeedbackForm-Contracts bedeutet.

Gehe zurück zur Startseite, und du solltest dein Formular dort sehen. Du kannst jetzt Antworten auf dein Formular einreichen!

Beachte, dass du einen kleinen Betrag an Gas zahlen musst, um diese Antwort aufzuzeichnen (über MetaMask).

Weiter bauen mit dem web3-Stack: Infura, Linea und MetaMask

Und das war's! Ohne kaum Code zu schreiben haben wir eine vollständige dezentralisierte Formularlösung für unsere Dapp bereitgestellt und die Möglichkeit erlangt, nicht nur Nutzerfeedback zu erfassen, sondern es in einer dezentralisierten, web3-nativen Form zu erfassen. Projekte wie Form-xChange werden ein wichtiger Schritt sein, um web2-UX-Design in web3-Anwendungen zu bringen. Passe das Aussehen und die Funktionalität deines Next-Frontends sowie die von den Smart Contracts angebotenen Funktionen gerne an. Du bist frei (und wirst sogar dazu ermutigt), dies zu deinem eigenen Projekt zu machen.