Integre um Formulário de Feedback ao seu Dapp e Colete Dados de Usuários em Escala

À medida que a mudança de paradigma do web3 continua a remodelar a internet, os desenvolvedores precisam buscar constantemente novas formas de aumentar o engajamento dos usuários, democratizar a tomada de decisões e obter insights valiosos das pessoas que utilizam os aplicativos criados on-chain. Um método para coletar feedback dos usuários é integrar um formulário de feedback ou pesquisa aos dapps. Os formulários de feedback eliminam a lacuna de comunicação entre usuários e desenvolvedores e fornecem feedback em tempo real em escala para aprimorar os aplicativos. Eles também promovem um ambiente de participação ativa e tomada de decisões coletiva.

Desde Organizações Autônomas Descentralizadas (DAOs) que utilizam formulários de feedback para governança on-chain até empresas que os usam para avaliar o sentimento dos colaboradores, a utilidade dos formulários de feedback é infinita.

Este blog oferece um tutorial passo a passo para integrar um formulário de feedback ao backend do seu aplicativo e começar a coletar feedback dos usuários. Para isso, utilizaremos um formulário de feedback desenvolvido internamente com o MetaMask SDK e outras ferramentas da Consensys, chamado Form xChange.

Form xChange

Seja para melhorar a UX do seu dapp, coletar feedback pós-conferência ou, como membro de uma DAO, democratizar a tomada de decisões, este tutorial mostrará como integrar um formulário de feedback e abrir um novo canal de comunicação dentro do seu aplicativo.

O que é o Form xChange e como funciona?

Form xChange é uma ferramenta de código aberto desenvolvida para a criação e utilização de formulários de feedback na blockchain. Embora o smart contract do Form xChange esteja atualmente implantado na Linea, sua arquitetura adaptável permite a implantação em qualquer rede compatível com EVM.

A plataforma permite que os participantes votem anonimamente nas propostas incorporadas nesses formulários e oferece tanto aos participantes quanto aos criadores dos formulários acesso para visualizar os resultados, refletindo o ethos de transparência do web3.

O Form xChange utiliza uma interface amigável construída com Next.js e opera por meio de dois smart contracts, ambos escritos em Solidity: o contrato FeedbackForm e o contrato FeedbackFormFactory. O processo é simples — toda vez que um novo formulário é criado, um novo contrato FeedbackForm é implantado, tarefa gerenciada de forma eficiente pelo contrato FeedbackFormFactory.

Para utilizar o Form xChange, os usuários devem primeiro conectar e fazer login no aplicativo usando sua carteira MetaMask. Alguns dos papéis e responsabilidades suportados são:

Autor do Formulário

• Capacidade de criar novos formulários contendo múltiplas perguntas para coleta de feedback.

• Capacidade de visualizar uma pontuação média derivada das respostas dos usuários a cada seção após a coleta de feedback.

Participante

• Capacidade de enviar respostas a formulários ou propostas preservando o anonimato.

• Acesso para visualizar os resultados após o envio das respostas.

Integre um formulário de feedback ao seu dapp para coletar feedback dos usuários em escala

Usuários com casos de uso menos complexos podem simplesmente utilizar a instância já implantada do Form xChange. Porém, se você tem um caso de uso específico e deseja hospedar sua própria instância ou controlar a aparência da interface do usuário, esta parte do blog é para você.

Vamos explicar como clonar o repositório para sua máquina local e colocar o backend em funcionamento, como implantar uma nova instância do backend do Form xChange na Linea e, por fim, abordaremos o MetaMask SDK e como ele facilita a conexão dos clientes de carteira MetaMask dos usuários a partir de qualquer plataforma.

Não abordaremos a construção de uma interface de usuário, pois isso está além do escopo deste tutorial, mas fique à vontade para conferir este repositório para ter uma ideia de como você pode construir sua própria interface.

Como clonar o backend do Form xChange

Esta seção pressupõe que você tenha o node.js v16 ou superior instalado em seu computador, bem como o ambiente de desenvolvimento Truffle.

1. Clone o repositório: git clone [email protected]:Consensys/Form-XChange.git

2. Navegue até o diretório do contrato: cd Form-XChange/packages/form-XChange

3. Compile o contrato: truffle compile

4. Execute o teste: truffle test

Como implantar sua própria instância do backend do Form xChange na Linea

O que é a Linea e por que implantar na Linea? Bem, a Linea é uma Ethereum Virtual Machine de conhecimento zero (zkEVM) do tipo 2 que replica o ambiente Ethereum como um rollup, permitindo que os desenvolvedores construam nela com a experiência e a segurança do Ethereum, mas com custos de transação mais baixos.

A Linea oferece vantagens como finalidade mais rápida, compatibilidade com todas as ferramentas de desenvolvimento, integração padrão com a MetaMask e alto throughput, entre outras, o que a torna uma excelente escolha para implantar o backend do Form xChange.

Agora que entendemos o que é a Linea e por que ela é uma ótima escolha, vamos ver como implantar na Linea. Para acompanhar esta seção, certifique-se de ter a extensão de carteira MetaMask instalada, bem como algum Linea Eth. Consulte a documentação para mais informações sobre como obter Linea Eth.

1. Execute o Truffle dashboard: truffle dashboard.

2. Acesse localhost:24012 no seu navegador, conecte sua carteira MetaMask e selecione Linea no menu suspenso de redes.

3. Execute truffle migrate --network dashboard em um terminal separado.

4. Volte para localhost:24012 e clique em confirmar no prompt que solicita a confirmação da implantação.

Pronto! Você verá o endereço do contrato recém-implantado na janela do terminal onde executou o comando truffle migrate --network dashboard. Você pode verificar a implantação bem-sucedida visitando o explorador de blocos da Linea.

Use o MetaMask SDK para conectar seu dapp às carteiras dos usuários de forma integrada

Com o backend do Form xChange implantado na Linea, queremos garantir que os usuários não encontrem dificuldades ao interagir com nossos dapps. Em outras palavras, queremos tornar simples para os usuários conectar seu cliente de carteira ao nosso dapp sem complicações.

A MetaMask apresenta o método mais eficaz para se conectar a qualquer dapp implantado na Linea, já que a extensão de carteira MetaMask agora inclui uma opção de rede Linea por padrão. Além disso, para simplificar o processo de adição de suporte à MetaMask nos dapps dos desenvolvedores, a MetaMask lançou recentemente o SDK da MetaMask, que pode ser usado com plataformas JavaScript, Mobile e Gaming.

Para usar o MetaMask SDK na sua base de código frontend em React, siga estas etapas:

1. Instale o MetaMask SDK usando Yarn ou NPM: yarn add @metamask/sdk or npm install @metamask sdk

2. Importe o MetaMask SDK para o seu projeto React: import { MetaMaskSDK } from '@metamask/sdk';

3. Instancie o MetaMask SDK usando estas opções

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

1. Acesse o MetaMask SDK em qualquer lugar da sua base de código React: window.ethereum.request({ method: 'eth_requestAccounts', params: [] });

Chamar eth_requestAccounts usando ethereum.request() aciona o popup de instalação ou conexão, por isso é recomendável sempre chamar esta função primeiro.

Confira a documentação do MetaMask SDK para mais informações sobre como usar o MetaMask SDK com Node.js, iOS, Unity e muito mais.

O Form xChange aprimora seu dapp facilitando a coleta de feedback valioso e promovendo maior participação dos usuários e tomada de decisões participativa. E sua capacidade de funcionar em qualquer rede compatível com EVM, aliada à interface amigável, torna a integração muito simples.

Este tutorial fornece os passos para integrar um formulário de feedback ao seu dapp. Desde a preparação do backend e sua implantação na Linea até o estabelecimento de uma conexão com a MetaMask usando o MetaMask SDK para uma melhor experiência do usuário, você está bem preparado para promover um ambiente engajador e democrático dentro do seu dapp. Nunca se esqueça: o potencial do web3 está nas suas mãos!

Para saber mais sobre o MetaMask SDK, acesse metamask.com/developer/sdk.