Comment intégrer une boucle de feedback utilisateur dans votre dapp web3

La collecte des retours utilisateurs est l'une des étapes les plus cruciales pour atteindre l'adéquation produit-marché et créer une application réussie. C'est encore plus important dans le web3, où les standards de conception UX sont encore en train d'émerger et restent flous.

Pour les développeurs web3, la méthode la plus populaire pour collecter les retours utilisateurs sur leurs dapps reste les solutions centralisées proposées par des entreprises comme Google et Mailchimp. Cependant, des formulaires de retour on-chain sont désormais disponibles. Découvrons ces formulaires de retour natifs au web3, pourquoi ils sont importants pour le succès de votre dapp, et comment les utiliser.

Dans un article précédent, nous avons présenté Form-xChange : un nouveau formulaire web3 open-source et décentralisé développé par Consensys, et nous vous avons montré comment l'intégrer à votre dapp à l'aide du SDK MetaMask.

Dans ce tutoriel, nous allons approfondir ces étapes en vous montrant comment déployer un formulaire de retour sur votre frontend et créer un nouveau formulaire permettant aux utilisateurs de partager leurs avis sur votre dapp. Mais d'abord, un bref rappel sur l'importance de la collecte des retours utilisateurs pour le développement et la gestion de produits.

Des formulaires de retour utilisateur web3 pour favoriser l'adoption de masse

Les formulaires de retour natifs et décentralisés sont cruellement nécessaires dans le web3. Pourquoi ?

1. Ils réduisent considérablement les coûts : Le seul coût associé à la création d'un formulaire — et il est unique — intervient lors du déploiement d'un smart contract. Et s'il est déployé sur un L2 comme Linea, le coût ne dépasse généralement pas quelques dollars.

2. Ils offrent des possibilités de personnalisation quasi infinies : Vous pouvez concevoir votre formulaire pour collecter tout type de retour souhaité (texte, réactions, liens, etc.). De plus, vous pouvez personnaliser votre frontend selon vos besoins, car il est entièrement distinct du contrat.

3. Vous ne payez que ce que vous utilisez : Avec les formulaires décentralisés, il n'existe pas de paliers tarifaires basés sur le nombre de réponses. En théorie, vous pouvez enregistrer autant de réponses que vous le souhaitez. Si vous adoptez un modèle où les clients paient le gas, vous n'aurez aucun coût au-delà du déploiement du contrat. Si vous choisissez de prendre en charge les frais pour vos clients, le coût reste là encore de quelques centimes lorsque vous opérez sur un réseau économique.

4. Vous pouvez mettre en place un token gating : Grâce aux formulaires décentralisés, vous pouvez contrôler qui peut répondre à vos questions. Vous pourriez ainsi, en théorie, limiter l'accès aux wallets détenant des NFT de votre collection, aux wallets ayant un solde d'ETH non nul, ou encore à un token ERC-20 de votre choix.

Un tutoriel : créer votre propre formulaire de retour utilisateur décentralisé

Étape 1 : Installer MetaMask

Nous allons déployer nos contrats et interagir avec eux sur Linea. Pour ce faire, nous aurons besoin d'un wallet crypto configuré avec le réseau Linea et disposant d'un petit solde de LineaETH.

Vous avez d'abord besoin d'un wallet web3. Dans ce tutoriel, nous utiliserons MetaMask — un wallet gratuit et facile à utiliser, automatiquement configuré avec Linea. Vous pouvez installer MetaMask en tant qu'extension pour votre navigateur ici.

Remarque : Pour ce tutoriel, nous recommandons d'utiliser un navigateur autre que Brave (par exemple Edge, Chrome, Safari, etc.). Au moment de la rédaction de cet article, Form-xChange présente des problèmes connus lors de son utilisation sur le navigateur Brave.

Une fois l'extension ajoutée, MetaMask vous invitera à suivre une série d'étapes, notamment la remise de votre phrase de récupération de wallet. Conservez cette phrase précieusement. En cas de perte, vous ne pourrez pas la récupérer. En cas de vol, quelqu'un d'autre aura accès à vos fonds.

Une fois votre wallet configuré, accédez au menu déroulant des réseaux en haut à gauche de l'extension MetaMask et activez afficher les réseaux de test. Dans le nouveau menu déroulant, sélectionnez le réseau Linea Goerli. Si tout se passe bien, votre wallet devrait ressembler à ceci :

Étape 2 : Obtenir des LineaETH depuis un faucet

Si c'est la première fois que vous travaillez avec Linea, votre wallet aura (évidemment) un solde de 0 LineaETH.

Remédions à cela. Infura dispose d'un faucet qui vous donne accès à 0,5 LineaETH gratuit chaque jour. Pour accéder à ce faucet, il vous sera peut-être demandé de créer un compte Infura gratuit.

Une fois le rechargement effectué, vous devriez voir un petit solde de LineaETH :

Étape 3 : Obtenir un endpoint RPC Linea

Connectez-vous à nouveau sur Infura en utilisant le compte créé à l'étape précédente. Vous serez automatiquement redirigé vers le tableau de bord principal.

Ici, créez un nouveau projet en générant une nouvelle clé API en haut à droite.

Pour le réseau, choisissez l'API web3. Vous pouvez nommer la clé comme vous le souhaitez.

Une fois votre clé créée, vous serez à nouveau redirigé vers un tableau de bord de projet contenant une collection d'endpoints. À partir de là, notez l'endpoint associé au testnet Linea. Nous en aurons besoin lors d'une étape ultérieure pour déployer nos contrats Form-xChange.

Étape 4 : Installer node et npm

La solution Form-xChange fonctionne sur une stack composée d'Infura, Next.js, Truffle et de la Dapp API. Pour installer et utiliser ces technologies, nous aurons besoin de node et npm sur notre machine locale.

Vous pouvez télécharger les deux pour votre système d'exploitation ici.

Une fois l'installation terminée, vérifiez qu'elle s'est déroulée correctement en consultant leurs numéros de version dans votre terminal.

$ node -v
$ npm -v
Copier

Étape 5 : Cloner le dépôt Form-xChange

Comme mentionné précédemment, Form-xChange est un dépôt open-source dont le code source est publiquement disponible sur GitHub.

Clonons ce dépôt et installons tous les packages requis à l'aide des commandes suivantes :

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

Ouvrez le dépôt Form-xChange dans votre éditeur de code favori (par exemple VS Code). Il s'agit d'un projet clé en main, nous n'aurons donc pas besoin d'écrire beaucoup de code, si ce n'est pour configurer quelques variables d'environnement.

Étape 6 : Déployer le formulaire de retour

Accédez au sous-dossier contenant le projet Truffle et les smart contracts du formulaire :

Dans ce dossier, vous trouverez un sous-dossier contracts contenant deux contrats principaux : un FeedbackForm et un FeedbackFormFactory.

Le premier implémente un formulaire individuel capable de stocker une liste de questions et les réponses associées.

Le second est un contrat factory pouvant être utilisé pour déployer des versions personnalisées du premier.

Vous pouvez consulter le code source et y apporter des modifications selon le type de formulaire que vous souhaitez créer. Pour ce tutoriel, nous conserverons la configuration par défaut.

Dans cette étape, nous allons déployer le contrat FeedbackFormFactory. Cela nous permettra, en tant que créateur, de créer des formulaires depuis notre frontend Next.

Pour ce faire, créez un fichier nommé .env et ajoutez les informations suivantes :

Ensuite, dans le fichier truffle-config.js, remplacez l'endpoint RPC générique par l'endpoint Infura que vous avez généré à l'étape 3. Le fichier de configuration final devrait ressembler à ceci :

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",
    },
  },
};
Copier

Tout est prêt ! Déployez le contrat factory du formulaire de retour en exécutant la commande suivante :

Si tout se passe bien, vous devriez voir une sortie ressemblant à ceci :

> [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
Copier

Notez l'adresse du contrat. Nous en aurons besoin lors d'une étape ultérieure.

Étape 7 : Déployer le frontend Next factory

Notre contrat factory de formulaire de retour étant désormais actif, concentrons-nous sur le frontend Next. Accédez au projet d'application Next en exécutant la commande suivante :

Nous devrons connecter notre application au contrat déployé à l'étape précédente. Pour ce faire, ouvrez le fichier lib/contract.ts/config.ts et ajoutez l'adresse du contrat.

Dans le dossier apps/web, créez un autre fichier .env et ajoutez cette fois la clé Infura associée à votre projet depuis l'étape 3.

Tout est prêt ! Déployons maintenant l'application sur localhost :

Vous pouvez maintenant consulter l'application sur localhost:3000. Elle devrait ressembler à ceci :

Allons-y et créons un nouveau formulaire !

Connectez votre wallet MetaMask en utilisant la fonctionnalité disponible dans le coin supérieur droit de l'application. Une fois cela fait, l'application reconnaît automatiquement que c'est vous qui avez déployé le contrat factory et, par conséquent, que vous êtes également le créateur de l'application.

Cela vous permettra de créer de nouveaux formulaires depuis l'interface ici.

Ajoutez un titre, une description et au moins une question à votre formulaire, puis cliquez sur Créer un formulaire.

MetaMask vous demandera alors d'approuver une transaction. Rappelons que cette demande est nécessaire car la création d'un formulaire implique concrètement la création d'un nouveau contrat FeedbackForm.

Retournez à la page d'accueil, et vous devriez y voir votre formulaire. Vous pouvez maintenant soumettre des réponses sur votre formulaire !

Notez que vous devrez payer un petit montant de gas pour enregistrer cette réponse (via MetaMask).

Continuez à construire avec la stack web3 : Infura, Linea et MetaMask

Et voilà ! Sans presque écrire de code, nous avons déployé une solution de formulaire entièrement décentralisée pour notre dapp et acquis la capacité non seulement de collecter les retours utilisateurs, mais de le faire sous une forme décentralisée et native au web3. Des projets comme Form-xChange constitueront une avancée majeure vers l'intégration de l'expérience UX du web2 dans les applications web3. N'hésitez pas à modifier l'apparence et la convivialité de votre frontend Next, ainsi que les fonctionnalités offertes par les smart contracts. Vous êtes libre — et même encouragé — de vous l'approprier.