Intégrez un formulaire de feedback dans votre Dapp et collectez des données utilisateurs à grande échelle

Alors que le changement de paradigme web3 continue de remodeler Internet, les développeurs doivent constamment chercher de nouvelles façons d'accroître l'engagement des utilisateurs, de démocratiser la prise de décision et d'obtenir des informations précieuses auprès des personnes qui utilisent les applications qu'ils créent on-chain. L'une des méthodes pour recueillir les retours des utilisateurs consiste à intégrer un formulaire de feedback ou de sondage dans les dapps. Les formulaires de feedback comblent le fossé de communication entre les utilisateurs et les développeurs, et fournissent des retours en temps réel à grande échelle pour améliorer les applications. Ils favorisent également un environnement de participation active et de prise de décision collective.

Des Organisations Autonomes Décentralisées (DAOs) qui utilisent des formulaires de feedback pour la gouvernance on-chain, aux entreprises qui s'en servent pour évaluer le sentiment de leurs employés, l'utilité des formulaires de feedback est infinie.

Ce blog propose un tutoriel étape par étape pour intégrer un formulaire de feedback dans le backend de votre application et commencer à collecter les retours des utilisateurs. Pour ce faire, nous utiliserons un formulaire de feedback que nous avons développé en interne à l'aide du MetaMask SDK et d'autres outils Consensys, appelé Form xChange.

Form xChange

Que vous cherchiez à améliorer l'UX de votre dapp, à recueillir des retours post-conférence, ou que vous soyez membre d'une DAO souhaitant démocratiser la prise de décision, ce tutoriel vous montrera comment intégrer un formulaire de feedback et ouvrir un nouveau canal de communication au sein de votre application.

Qu'est-ce que Form xChange et comment fonctionne-t-il ?

Form xChange est un outil open source, développé pour la création et l'utilisation de formulaires de feedback sur la blockchain. Bien que le smart contract de Form xChange soit actuellement déployé sur Linea, son architecture adaptable permet un déploiement sur n'importe quel réseau compatible EVM.

La plateforme permet aux participants de voter anonymement sur les propositions intégrées dans ces formulaires, et offre aux participants comme aux créateurs de formulaires la possibilité de consulter les résultats, reflétant ainsi l'éthique de transparence du web3.

Form xChange utilise une interface conviviale développée avec Next.js et fonctionne à l'aide de deux smart contracts, tous deux écrits en Solidity : le contrat FeedbackForm et le contrat FeedbackFormFactory. Le processus est simple — chaque fois qu'un nouveau formulaire est créé, un nouveau contrat FeedbackForm est déployé, une tâche gérée efficacement par le contrat FeedbackFormFactory.

Pour utiliser Form xChange, les utilisateurs doivent d'abord se connecter et s'authentifier dans l'application à l'aide de leur portefeuille MetaMask. Parmi les rôles et responsabilités pris en charge, on trouve :

Auteur du formulaire

• Possibilité de créer de nouveaux formulaires contenant plusieurs questions pour la collecte de feedback.

• Possibilité de consulter un score moyen calculé à partir des réponses des utilisateurs pour chaque section, après la collecte des retours.

Participant

• Possibilité de soumettre des réponses à des formulaires ou des propositions tout en préservant l'anonymat.

• Accès aux résultats après la soumission des réponses.

Intégrez un formulaire de feedback dans votre dapp pour recueillir des retours utilisateurs à grande échelle

Les utilisateurs ayant des besoins moins complexes peuvent simplement s'appuyer sur l'instance déjà déployée de Form xChange. Mais si vous avez un cas d'usage particulier et souhaitez héberger votre propre instance ou contrôler l'apparence de l'interface utilisateur, cette partie du blog est faite pour vous.

Nous verrons comment cloner le dépôt sur votre machine locale et lancer le backend, nous déploierons une nouvelle instance du backend Form xChange sur Linea, et nous aborderons enfin le MetaMask SDK et la façon dont il facilite la connexion des clients de portefeuille MetaMask des utilisateurs depuis n'importe quelle plateforme.

Nous ne développerons pas d'interface utilisateur, car cela dépasse le cadre de ce tutoriel, mais n'hésitez pas à consulter ce dépôt pour avoir une idée de la façon dont vous pouvez aborder la création de votre propre interface utilisateur.

Comment cloner le backend de Form xChange

Cette section suppose que vous avez node.js v16 ou supérieur installé sur votre ordinateur, ainsi que l'environnement de développement Truffle.

1. Clonez le dépôt : git clone [email protected]:Consensys/Form-XChange.git

2. Accédez au répertoire du contrat : cd Form-XChange/packages/form-XChange

3. Compilez le contrat : truffle compile

4. Lancez les tests : truffle test

Comment déployer votre propre instance du backend Form xChange sur Linea

Qu'est-ce que Linea et pourquoi déployer sur Linea ? Linea est une Ethereum Virtual Machine (zkEVM) à connaissance zéro de type 2 qui réplique l'environnement Ethereum sous forme de rollup, permettant aux développeurs de construire dessus avec l'expérience et la sécurité d'Ethereum, mais avec des coûts de transaction réduits.

Linea offre des avantages tels qu'une finalité plus rapide, la compatibilité avec tous les outils de développement, une intégration native avec MetaMask et un débit élevé, entre autres, ce qui en fait un excellent choix pour déployer le backend de Form xChange.

Maintenant que nous comprenons ce qu'est Linea et pourquoi c'est un excellent choix, voyons comment déployer sur Linea. Pour suivre cette section, assurez-vous d'avoir l'extension de portefeuille MetaMask installée ainsi que quelques Linea Eth. Consultez la documentation pour plus d'informations sur la façon d'obtenir des Linea Eth.

1. Lancez le tableau de bord Truffle : truffle dashboard.

2. Rendez-vous sur localhost:24012 dans votre navigateur, connectez votre portefeuille MetaMask, puis sélectionnez Linea dans le menu déroulant des réseaux.

3. Exécutez truffle migrate --network dashboard dans un terminal séparé.

4. Revenez sur localhost:24012 et cliquez sur confirmer dans la fenêtre vous demandant de valider le déploiement.

C'est tout — vous devriez voir l'adresse du contrat nouvellement déployé dans la fenêtre du terminal où vous avez exécuté la commande truffle migrate --network dashboard. Vous pouvez vérifier le succès du déploiement en visitant l'explorateur de blocs Linea.

Utilisez le MetaMask SDK pour connecter votre dapp aux portefeuilles des utilisateurs en toute fluidité

Le backend de Form xChange étant déployé sur Linea, nous voulons nous assurer que les utilisateurs ne rencontrent aucune difficulté lorsqu'ils interagissent avec nos dapps. Autrement dit, nous souhaitons permettre aux utilisateurs de connecter leur client de portefeuille à notre dapp sans aucune friction.

MetaMask représente la méthode la plus efficace pour se connecter à n'importe quelle dapp déployée sur Linea, car l'extension de portefeuille MetaMask inclut désormais une option réseau Linea par défaut. De plus, pour simplifier le processus permettant aux développeurs d'ajouter la prise en charge de MetaMask à leurs dapps, MetaMask a récemment publié le SDK MetaMask, utilisable avec JavaScript, les plateformes mobiles et de gaming.

Pour utiliser le MetaMask SDK dans votre base de code frontend React, voici quelques étapes à suivre :

1. Installez le MetaMask SDK avec Yarn ou NPM : yarn add @metamask/sdk or npm install @metamask sdk

2. Importez le MetaMask SDK dans votre projet React : import { MetaMaskSDK } from '@metamask/sdk';

3. Instanciez le MetaMask SDK avec ces options

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

1. Accédez au MetaMask SDK depuis n'importe quel endroit de votre base de code React : window.ethereum.request({ method: 'eth_requestAccounts', params: [] });

L'appel de eth_requestAccounts via ethereum.request() déclenche l'affichage de la fenêtre d'installation ou de connexion. Il est donc conseillé d'appeler cette fonction en premier.

Consultez la documentation du MetaMask SDK pour plus d'informations sur la façon d'utiliser le MetaMask SDK avec Node.js, iOS, Unity et bien d'autres.

Form xChange enrichit votre dapp en facilitant la collecte de retours précieux et en favorisant une plus grande participation des utilisateurs ainsi qu'une prise de décision collaborative. Sa capacité à fonctionner sur n'importe quel réseau compatible EVM et son interface conviviale en font un outil facile à intégrer.

Ce tutoriel fournit les étapes pour intégrer un formulaire de feedback dans votre dapp. De la préparation du backend et de son déploiement sur Linea, à l'établissement d'une connexion avec MetaMask via le MetaMask SDK pour une meilleure expérience utilisateur, vous êtes désormais bien équipé pour favoriser un environnement engageant et démocratique au sein de votre dapp. N'oubliez jamais : la puissance du web3 est entre vos mains !

Pour en savoir plus sur le MetaMask SDK, consultez metamask.com/developer/sdk.