Feedback-Formular in deine Dapp integrieren & Nutzerdaten in großem Umfang erfassen

Da der Web3-Paradigmenwechsel das Internet weiterhin neu gestaltet, müssen Entwickler kontinuierlich nach neuen Wegen suchen, um das User Engagement zu steigern, Entscheidungsprozesse zu demokratisieren und wertvolle Erkenntnisse von den Menschen zu gewinnen, die die On-Chain entwickelten Apps nutzen. Eine Methode zur Erfassung von Nutzerfeedback ist die Integration eines Feedback- oder Umfrageformulars in dApps. Feedback-Formulare überbrücken die Kommunikationslücke zwischen Nutzern und Entwicklern und liefern Echtzeit-Feedback in großem Maßstab zur Verbesserung von Anwendungen. Sie fördern außerdem ein Umfeld aktiver Beteiligung und kollektiver Entscheidungsfindung.

Von Decentralized Autonomous Organizations (DAOs), die Feedback-Formulare für On-Chain-Governance einsetzen, bis hin zu Unternehmen, die sie nutzen, um die Stimmung ihrer Mitarbeiter zu erfassen – der Nutzen von Feedback-Formularen ist unbegrenzt.

Dieser Blog bietet ein Schritt-für-Schritt-Tutorial zur Integration eines Feedback-Formulars in Ihr Anwendungs-Backend und zum Einstieg in die Erfassung von Nutzerfeedback. Dafür verwenden wir ein intern entwickeltes Feedback-Formular, das mit dem MetaMask SDK und anderen Consensys-Tools erstellt wurde und Form xChange heißt.

Form xChange

Ob Sie die UX Ihrer dApp verbessern, Post-Conference-Feedback sammeln oder als DAO-Mitglied die Entscheidungsfindung demokratisieren möchten – dieses Tutorial zeigt Ihnen, wie Sie ein Feedback-Formular integrieren und einen neuen Kommunikationskanal innerhalb Ihrer Anwendung eröffnen.

Was ist Form xChange und wie funktioniert es?

Form xChange ist ein Open-Source-Tool, das für die Erstellung und Nutzung von Feedback-Formularen auf der Blockchain entwickelt wurde. Während der Smart Contract für Form xChange derzeit auf Linea deployed ist, ermöglicht seine anpassungsfähige Architektur den Einsatz auf jedem EVM-kompatiblen Netzwerk.

Die Plattform ermöglicht es Teilnehmern, anonym über die in diesen Formularen enthaltenen Vorschläge abzustimmen, und bietet sowohl Teilnehmern als auch Formularerstellern Zugang zur Einsicht der Ergebnisse – ein Ausdruck des Transparenz-Ethos von Web3.

Form xChange nutzt eine benutzerfreundliche Oberfläche, die mit Next.js entwickelt wurde, und arbeitet mit zwei in Solidity geschriebenen Smart Contracts: dem FeedbackForm-Contract und dem FeedbackFormFactory-Contract. Der Prozess ist unkompliziert – jedes Mal, wenn ein neues Formular erstellt wird, wird ein neuer FeedbackForm-Contract deployed, eine Aufgabe, die vom FeedbackFormFactory-Contract effizient übernommen wird.

Um Form xChange zu nutzen, müssen sich Benutzer zunächst mit ihrem MetaMask Wallet verbinden und in der Anwendung anmelden. Einige der unterstützten Rollen und Verantwortlichkeiten sind:

Formularautor

• Möglichkeit, neue Formulare mit mehreren Fragen zur Feedback-Erfassung zu erstellen.

• Möglichkeit, einen Durchschnittswert aus den Nutzerantworten zu jedem Abschnitt nach der Feedback-Erfassung einzusehen.

Teilnehmer

• Möglichkeit, Antworten auf Formulare oder Vorschläge einzureichen und dabei die Anonymität zu wahren.

• Zugang zur Einsicht der Ergebnisse nach der Einreichung der Antworten.

Integrieren Sie ein Feedback-Formular in Ihre dApp für Nutzerfeedback in großem Maßstab

Nutzer mit weniger komplexen Anwendungsfällen können sich einfach auf die bereits deployed Instanz von Form xChange verlassen. Wenn Sie jedoch einen einzigartigen Anwendungsfall haben und Ihre eigene Instanz hosten oder die Benutzeroberfläche selbst gestalten möchten, ist dieser Teil des Blogs für Sie.

Wir erläutern, wie Sie das Repository auf Ihren lokalen Rechner klonen und das Backend zum Laufen bringen, wie Sie eine neue Instanz des Form xChange-Backends auf Linea deployen und schließlich, wie das MetaMask SDK die einfache Verbindung der MetaMask Wallet-Clients der Nutzer von jeder Plattform aus ermöglicht.

Wir werden keine Benutzeroberfläche entwickeln, da dies den Rahmen dieses Tutorials sprengen würde. Schauen Sie sich jedoch gerne dieses Repository an, um eine Vorstellung davon zu bekommen, wie Sie Ihre eigene Benutzeroberfläche entwickeln können.

So klonen Sie das Form xChange-Backend

Dieser Abschnitt setzt voraus, dass Sie node.js v16 oder höher auf Ihrem Computer installiert haben sowie die Truffle-Entwicklungsumgebung.

1. Repository klonen: git clone [email protected]:Consensys/Form-XChange.git

2. Zum Contract-Verzeichnis navigieren: cd Form-XChange/packages/form-XChange

3. Contract kompilieren: truffle compile

4. Test ausführen: truffle test

So deployen Sie Ihre eigene Instanz des Form xChange-Backends auf Linea

Was ist Linea und warum auf Linea deployen? Linea ist eine Type-2-Zero-Knowledge-Ethereum-Virtual-Machine (zkEVM), die die Ethereum-Umgebung als Rollup repliziert und es Entwicklern ermöglicht, mit der Erfahrung und Sicherheit von Ethereum, jedoch mit niedrigeren Transaktionskosten, darauf aufzubauen.

Linea bietet Vorteile wie schnellere Finalität, Kompatibilität mit allen Entwicklungstools, standardmäßige Integration mit MetaMask und hohen Durchsatz – unter anderem –, was es zu einer ausgezeichneten Wahl für das Deployment des Form xChange-Backends macht.

Nachdem wir nun verstehen, was Linea ist und warum es eine großartige Wahl ist, wollen wir uns damit befassen, wie man auf Linea deployen kann. Um diesem Abschnitt zu folgen, stellen Sie sicher, dass Sie die MetaMask Wallet-Erweiterung installiert haben sowie etwas Linea Eth. Weitere Informationen dazu, wie Sie Linea Eth erhalten, finden Sie in der Dokumentation.

1. Truffle Dashboard ausführen: truffle dashboard.

2. Öffnen Sie localhost:24012 in Ihrem Browser, verbinden Sie Ihr MetaMask Wallet und wählen Sie Linea aus dem Netzwerk-Dropdown aus.

3. Führen Sie truffle migrate --network dashboard in einem separaten Terminal aus.

4. Kehren Sie zu localhost:24012 zurück und klicken Sie auf „Bestätigen" bei der Aufforderung zur Bestätigung des Deployments.

Das war's – Sie sollten die neu deployete Contract-Adresse im Terminalfenster sehen, in dem Sie den Befehl truffle migrate --network dashboard ausgeführt haben. Sie können das erfolgreiche Deployment überprüfen, indem Sie den Linea Block Explorer aufrufen.

Verwenden Sie das MetaMask SDK, um Ihre dApp nahtlos mit den Wallets der Nutzer zu verbinden

Nachdem das Form XChange-Backend auf Linea deployed wurde, möchten wir sicherstellen, dass Nutzer bei der Interaktion mit unseren dApps auf keine Schwierigkeiten stoßen. Mit anderen Worten: Wir möchten es Nutzern ermöglichen, ihren Wallet-Client problemlos und ohne Aufwand mit unserer dApp zu verbinden.

MetaMask bietet die effektivste Methode zur Verbindung mit jeder auf Linea deployeten dApp, da die MetaMask Wallet-Erweiterung nun standardmäßig eine Linea-Netzwerkoption enthält. Darüber hinaus hat MetaMask kürzlich das MetaMask SDK veröffentlicht, das mit JavaScript-, Mobile- und Gaming-Plattformen verwendet werden kann, um Entwicklern die Integration von MetaMask-Unterstützung in ihre dApps zu erleichtern.

Um das MetaMask SDK in Ihrer React-Frontend-Codebasis zu verwenden, können Sie folgende Schritte befolgen:

1. Installieren Sie das MetaMask SDK mit Yarn oder NPM: yarn add @metamask/sdk or npm install @metamask sdk

2. Importieren Sie das MetaMask SDK in Ihr React-Projekt: import { MetaMaskSDK } from '@metamask/sdk';

3. Instanziieren Sie das MetaMask SDK mit diesen Optionen

 const sdk = new MetaMaskSDK(options);
 sdk.getProvider(); 
Kopieren

1. Greifen Sie überall in Ihrer React-Codebasis auf das MetaMask SDK zu: window.ethereum.request({ method: 'eth_requestAccounts', params: [] });

Der Aufruf von eth_requestAccounts über ethereum.request() löst das Installations- oder Verbindungs-Popup aus. Es empfiehlt sich daher, diese Funktion immer zuerst aufzurufen.

Weitere Informationen zur Verwendung des MetaMask SDK mit Node.js, iOS, Unity und mehr finden Sie in der MetaMask SDK-Dokumentation.

Form xChange verbessert Ihre dApp, indem es die wertvolle Feedback-Erfassung erleichtert und eine stärkere Nutzerbeteiligung sowie partizipative Entscheidungsfindung fördert. Und seine Fähigkeit, auf jedem EVM-kompatiblen Netzwerk zu laufen, sowie die benutzerfreundliche Oberfläche machen die Integration zum Kinderspiel.

Dieses Tutorial bietet die Schritte zur Integration eines Feedback-Formulars in Ihre dApp. Von der Vorbereitung des Backends und dessen Deployment auf Linea bis hin zur Herstellung einer Verbindung mit MetaMask über das MetaMask SDK für eine bessere Nutzererfahrung – Sie sind bestens gerüstet, um ein engagiertes und demokratisches Umfeld in Ihrer dApp zu fördern. Vergessen Sie nie: Die Stärke von Web3 liegt in Ihren Händen!

Um mehr über das MetaMask SDK zu erfahren, besuchen Sie metamask.com/developer/sdk.