Como criar um ciclo de feedback de usuários no seu dapp web3

Coletar feedback dos usuários é uma das etapas mais críticas para alcançar o product-market-fit e criar uma aplicação de sucesso. E isso é ainda mais importante no web3, onde os padrões de design de UX ainda estão surgindo e não foram definidos.

Para desenvolvedores web3, o método mais popular de coletar feedback dos usuários sobre seus dapps continua sendo as soluções centralizadas oferecidas por empresas como Google e Mailchimp. No entanto, formulários de feedback on-chain já estão disponíveis. Vamos explorar esses formulários de feedback nativos do web3, por que eles são importantes para o sucesso do seu dapp e como utilizá-los.

Em um post anterior, apresentamos o Form-xChange: um novo formulário web3 open-source e descentralizado desenvolvido pela Consensys, e mostramos como integrá-lo ao seu dapp usando o MetaMask SDK.

Neste tutorial, vamos avançar nesses passos mostrando como implantar um formulário de feedback no seu frontend e criar um novo formulário para que os usuários compartilhem suas opiniões sobre o seu dapp. Mas primeiro, um lembrete rápido sobre a importância de coletar feedback dos usuários para o desenvolvimento e a gestão de produtos.

Formulários de feedback web3 para impulsionar a adoção em massa

Formulários de feedback nativos e descentralizados são urgentemente necessários no web3. Por quê?

1. Eles reduzem os custos drasticamente: O único custo (e único pagamento) associado à criação de um formulário ocorre durante a implantação de um smart contract. E se implantado em uma L2 como a Linea, o custo geralmente não passa de alguns dólares.

2. Eles oferecem possibilidades de personalização quase infinitas: Você pode criar seu formulário para coletar qualquer tipo de feedback que desejar (texto, reações, links, etc.). Além disso, você pode personalizar seu frontend conforme necessário, pois ele é completamente independente do contrato.

3. Você paga apenas pelo que usa: Com formulários descentralizados, não há planos de pagamento baseados no número de respostas. Teoricamente, você pode registrar quantas respostas quiser. Se você adotar um modelo em que os clientes pagam o gas, não terá nenhum custo além da implantação do contrato. Se optar por pagar em nome dos seus clientes, o custo também é de apenas alguns centavos ao operar em uma rede com custos eficientes.

4. Você pode implementar token gating: Usando formulários descentralizados, você pode controlar quem pode responder às perguntas do seu formulário. Assim, você poderia, teoricamente, limitar o acesso a carteiras que possuam NFTs da sua coleção, carteiras com um determinado saldo não nulo de ETH ou um token ERC-20 de sua escolha.

Um tutorial: criando seu próprio formulário de feedback descentralizado

Passo 1: Instale o MetaMask

Vamos implantar e interagir com nossos contratos na Linea. Para isso, precisaremos de uma carteira de criptomoedas configurada com a rede Linea e com um pequeno saldo de LineaETH.

Primeiro, você precisa de uma carteira web3. Neste tutorial, usaremos o MetaMask — uma carteira gratuita e fácil de usar que já vem configurada automaticamente com a Linea. Você pode instalar o MetaMask como uma extensão para o seu navegador aqui.

Observação: Para este tutorial, recomendamos usar um navegador diferente do Brave (por exemplo, Edge, Chrome, Safari, etc.). No momento em que este artigo foi escrito, o Form-xChange apresenta problemas conhecidos ao ser executado no navegador Brave.

Após adicionar a extensão, o MetaMask solicitará que você conclua uma série de etapas, incluindo o fornecimento da sua frase de recuperação da carteira. Guarde essa frase com cuidado. Se perdida, não será possível recuperá-la. Se roubada, outra pessoa terá acesso aos seus fundos.

Após configurar sua carteira, navegue até o menu suspenso de redes no canto superior esquerdo da extensão MetaMask e ative a opção mostrar redes de teste. No novo menu suspenso, selecione a rede Linea Goerli. Se tudo correr bem, sua carteira deverá ter uma aparência parecida com esta:

Passo 2: Obtenha LineaETH de um faucet

Se esta é a sua primeira vez trabalhando com a Linea, sua carteira terá (obviamente) um saldo de 0 LineaETH.

Vamos mudar isso. A Infura tem um faucet que oferece acesso a 0,5 LineaETH gratuitos por dia. Para acessar este faucet, pode ser necessário criar uma conta gratuita na Infura.

Após a recarga, você deverá ver um pequeno saldo de LineaETH:

Passo 3: Obtenha um endpoint RPC da Linea

Faça login na Infura novamente usando a conta criada na etapa anterior. Você será redirecionado automaticamente para o painel principal.

Aqui, crie um novo projeto gerando uma nova chave de API no canto superior direito.

Para a rede, escolha web3 API. Você pode nomear a chave como quiser.

Após a criação da sua chave, você será redirecionado novamente para um painel de projeto contendo uma coleção de endpoints. A partir daqui, anote o endpoint associado ao testnet da Linea. Precisaremos dele em uma etapa posterior para implantar nossos contratos do Form-xChange.

Passo 4: Instale o node e o npm

A solução Form-xChange funciona em uma stack composta por Infura, Next.js, Truffle e a Dapp API. Para instalar e usar essas tecnologias, precisaremos do node e do npm na nossa máquina local.

Você pode baixar ambos para o seu sistema operacional aqui.

Após a instalação, verifique se foi feita corretamente conferindo os números de versão no seu terminal.

$ node -v
$ npm -v
Copiar

Passo 5: Clone o repositório do Form-xChange

Como mencionado anteriormente, o Form-xChange é um repositório open-source cujo código-fonte está publicamente disponível no GitHub.

Vamos clonar este repositório e instalar todos os pacotes necessários usando os seguintes comandos:

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

Abra o repositório do Form-xChange no seu editor de código favorito (ex.: VS Code). Este é um projeto pronto para uso, então não precisaremos escrever muito código além de configurar algumas variáveis de ambiente.

Passo 6: Implante o formulário de feedback

Navegue até a subpasta que contém o projeto Truffle e os smart contracts do formulário:

Nesta pasta, você verá uma subpasta contracts que contém dois contratos principais: um FeedbackForm e um FeedbackFormFactory.

O primeiro implementa um formulário individual capaz de armazenar uma lista de perguntas e respostas feitas a essas perguntas.

O segundo é um contrato factory que pode ser usado para implantar versões personalizadas do primeiro.

Você pode conferir o código-fonte e fazer modificações de acordo com o tipo de formulário que deseja criar. Para este tutorial, manteremos a configuração padrão.

Nesta etapa, vamos implantar o contrato FeedbackFormFactory. Isso nos permitirá, como criadores, criar formulários a partir do nosso frontend Next.

Para isso, crie um arquivo chamado .env e adicione as seguintes informações:

Em seguida, no arquivo truffle-config.js, substitua o endpoint RPC genérico pelo endpoint da Infura gerado no Passo 3. O arquivo de configuração final deverá ter uma aparência parecida com esta:

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

Estamos prontos! Implante o contrato factory do formulário de feedback executando o seguinte comando:

Se tudo correr bem, você deverá ver uma saída parecida com esta:

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

Anote o endereço do contrato. Precisaremos dele em uma etapa posterior.

Passo 7: Implante o factory do frontend Next

Com nosso contrato factory do formulário de feedback ativo, vamos voltar nossa atenção para o frontend Next. Navegue até o projeto do app Next executando o seguinte comando:

Precisaremos conectar nosso app ao contrato implantado na etapa anterior. Podemos fazer isso abrindo o arquivo lib/contract.ts/config.ts e adicionando o endereço do contrato.

Na pasta apps/web, crie outro arquivo .env e, desta vez, adicione a chave da Infura associada ao seu projeto do Passo 3.

Estamos prontos! Vamos agora implantar o app no localhost:

Agora você pode acessar o app em localhost:3000. Ele deverá ter uma aparência parecida com esta:

Vamos em frente e criar um novo formulário!

Conecte sua carteira MetaMask usando a funcionalidade disponível no canto superior direito do app. Feito isso, o app reconhecerá automaticamente que você foi quem implantou o contrato factory e, portanto, você também é o criador do app.

Isso permitirá que você crie novos formulários pela interface aqui.

Adicione um título, uma descrição e pelo menos uma pergunta ao formulário e clique em Create Form.

Isso solicitará que o MetaMask aprove uma transação. Lembre-se de que você está sendo solicitado a fazer isso porque a criação de um formulário significa efetivamente a criação de um novo contrato FeedbackForm.

Volte para a página inicial e você deverá ver seu formulário lá. Agora você pode enviar respostas no seu formulário!

Observe que será necessário pagar uma pequena quantidade de gas para registrar essa resposta (via MetaMask).

Continue construindo com a stack web3: Infura, Linea e MetaMask

E pronto! Sem escrever quase nenhum código, implantamos uma solução completa de formulário descentralizado para nosso dapp e ganhamos a capacidade de não apenas capturar o feedback dos usuários, mas de capturá-lo em um formulário descentralizado e nativo do web3. Projetos como o Form-xChange serão um grande passo em direção à adoção do design de UX do web2 nas aplicações web3. Sinta-se à vontade para modificar a aparência e a experiência do seu frontend Next, bem como as funcionalidades oferecidas pelos smart contracts. Você é livre (e, na verdade, encorajado) a tornar este projeto seu.