Cómo integrar un ciclo de retroalimentación de usuarios en tu dapp web3

Recopilar comentarios de los usuarios es uno de los pasos más importantes para lograr el product-market-fit y crear una aplicación exitosa. Y es aún más importante en web3, donde los estándares de diseño UX todavía están surgiendo y no están definidos.

Para los desarrolladores de web3, el método más popular para recopilar comentarios de los usuarios sobre sus dapps sigue siendo el de las soluciones centralizadas ofrecidas por empresas como Google y Mailchimp. Sin embargo, ahora existen formularios de feedback on-chain. Veamos estos formularios de feedback nativos de web3, por qué son importantes para el éxito de tu dapp y cómo utilizarlos.

En un artículo anterior, presentamos Form-xChange: un nuevo formulario web3 de código abierto y descentralizado creado por Consensys, y te mostramos cómo integrarlo en tu dapp usando el SDK de MetaMask.

En este tutorial, ampliaremos estos pasos mostrándote cómo desplegar un formulario de feedback en tu frontend y crear un nuevo formulario para que los usuarios compartan sus opiniones sobre tu dapp. Pero primero, un breve recordatorio sobre la importancia de recopilar comentarios de los usuarios para el desarrollo y la gestión de productos.

Formularios de feedback de usuarios en web3 para impulsar la adopción masiva

Los formularios de feedback nativos y descentralizados son urgentemente necesarios en web3. ¿Por qué?

1. Reducen los costos drásticamente: El único costo (y es único) asociado con la creación de un formulario se produce durante el despliegue de un smart contract. Y si se despliega en una L2 como Linea, el costo normalmente no supera unos pocos dólares.

2. Tienen posibilidades de personalización casi infinitas: Puedes diseñar tu formulario para recopilar cualquier tipo de feedback que desees (texto, reacciones, enlaces, etc.). Además, puedes personalizar tu frontend según tus necesidades, ya que es completamente independiente del contrato.

3. Solo pagas por lo que usas: Con los formularios descentralizados, no hay niveles de pago basados en el número de respuestas. En teoría, puedes registrar tantas respuestas como quieras. Si adoptas un modelo en el que los clientes pagan el gas, no incurrirás en ningún costo más allá del despliegue del contrato. Si decides pagar tú en nombre de tus clientes, el costo es de unos pocos centavos cuando operas en una red eficiente en costos.

4. Puedes implementar token gating: Usando formularios descentralizados, puedes controlar quién puede responder a las preguntas de tu formulario. Por lo tanto, en teoría podrías limitar el acceso a wallets que posean NFTs de tu colección, wallets que tengan un saldo distinto de cero en ETH, o un token ERC-20 de tu elección.

Un tutorial: cómo crear tu propio formulario de feedback descentralizado

Paso 1: Instala MetaMask

Desplegaremos e interactuaremos con nuestros contratos en Linea. Para ello, necesitaremos una wallet de criptomonedas configurada con la red Linea y con un pequeño saldo de LineaETH.

Primero necesitas una wallet web3. En este tutorial usaremos MetaMask, una wallet gratuita y fácil de usar que viene configurada automáticamente con Linea. Puedes instalar MetaMask como extensión para tu navegador aquí.

Nota: Para este tutorial, recomendamos usar un navegador distinto a Brave (por ejemplo, Edge, Chrome, Safari, etc.). En el momento de redactar este artículo, Form-xChange tiene problemas conocidos al ejecutarse en el navegador Brave.

Una vez que hayas añadido la extensión, MetaMask te pedirá que completes una serie de pasos, incluyendo la entrega de tu frase de recuperación de la wallet. Guarda esta frase con cuidado. Si la pierdes, no podrás recuperarla. Si te la roban, otra persona tendrá acceso a tus fondos.

Una vez configurada tu wallet, navega al menú desplegable de redes en la parte superior izquierda de la extensión de MetaMask y activa mostrar redes de prueba. En el nuevo menú desplegable, selecciona la red Linea Goerli. Si todo va bien, tu wallet debería verse así:

Paso 2: Obtén LineaETH desde un faucet

Si es la primera vez que trabajas con Linea, tu wallet tendrá (obviamente) un saldo de 0 LineaETH.

Vamos a cambiar eso. Infura tiene un faucet que te da acceso a 0,5 LineaETH gratis cada día. Para acceder a este faucet, es posible que se te pida que crees una cuenta gratuita en Infura.

Una vez completada la recarga, deberías ver un pequeño saldo de LineaETH:

Paso 3: Obtén un endpoint RPC de Linea

Inicia sesión en Infura nuevamente usando la cuenta que creaste en el paso anterior. Serás redirigido automáticamente al panel principal.

Aquí, crea un nuevo proyecto generando una nueva API key en la parte superior derecha.

Para la red, elige web3 API. Puedes nombrar la key como quieras.

Una vez creada tu key, serás redirigido nuevamente a un panel de proyecto que contiene una colección de endpoints. Desde aquí, toma nota del endpoint asociado con la testnet de Linea. Lo necesitaremos en un paso posterior para desplegar nuestros contratos de Form-xChange.

Paso 4: Instala node y npm

La solución Form-xChange funciona sobre una pila de Infura, Next.js, Truffle y la Dapp API. Para instalar y usar estas tecnologías, necesitaremos node y npm en nuestra máquina local.

Puedes descargar ambos para tu sistema operativo aquí.

Una vez hecho, verifica que se hayan instalado correctamente comprobando sus números de versión en tu terminal.

$ node -v
$ npm -v
Copiar

Paso 5: Clona el repositorio de Form-xChange

Como se mencionó anteriormente, Form-xChange es un repositorio de código abierto cuyo código fuente está disponible públicamente en GitHub.

Clonemos este repositorio e instalemos todos los paquetes necesarios usando los siguientes comandos:

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

Abre el repositorio de Form-xChange en tu editor de código favorito (por ejemplo, VS Code). Este es un proyecto listo para usar, por lo que no necesitaremos escribir mucho código, aparte de configurar algunas variables de entorno.

Paso 6: Despliega el formulario de feedback

Navega a la subcarpeta que contiene el proyecto Truffle y los smart contracts del formulario:

En esta carpeta, verás una subcarpeta contracts que contiene dos contratos principales: un FeedbackForm y un FeedbackFormFactory.

El primero implementa un formulario individual capaz de almacenar una lista de preguntas y las respuestas a esas preguntas.

El segundo es un contrato factory que puede usarse para desplegar versiones personalizadas del primero.

Puedes revisar el código fuente y hacer modificaciones según el tipo de formulario que desees crear. Para este tutorial, nos quedaremos con la configuración predeterminada.

En este paso, vamos a desplegar el contrato FeedbackFormFactory. Esto nos permitirá, como creadores, crear formularios desde nuestro frontend en Next.

Para ello, crea un archivo llamado .env y añade la siguiente información:

A continuación, en el archivo truffle-config.js, reemplaza el endpoint RPC genérico con el endpoint de Infura que generaste en el Paso 3. El archivo de configuración final debería verse así:

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

¡Todo listo! Despliega el contrato factory del formulario de feedback ejecutando el siguiente comando:

Si todo va bien, deberías ver una salida similar a 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

Toma nota de la dirección del contrato. La necesitaremos en un paso posterior.

Paso 7: Despliega el frontend factory de Next

Con nuestro contrato factory del formulario de feedback activo, centrémonos en el frontend de Next. Navega al proyecto de la app de Next ejecutando el siguiente comando:

Necesitaremos conectar nuestra app con el contrato que desplegamos en el paso anterior. Podemos hacerlo abriendo el archivo lib/contract.ts/config.ts y añadiendo la dirección del contrato.

En la carpeta apps/web, crea otro archivo .env y esta vez, añade la key de Infura asociada a tu proyecto del Paso 3.

¡Todo listo! Ahora desplieguemos la app en localhost:

Ahora puedes ver la app en localhost:3000. Debería verse así:

¡Vamos a crear un nuevo formulario!

Conecta tu wallet de MetaMask usando la funcionalidad disponible en la esquina superior derecha de la app. Una vez hecho esto, la app reconoce automáticamente que fuiste tú quien desplegó el contrato factory y, por lo tanto, también eres el creador de la app.

Esto te permitirá crear nuevos formularios desde la interfaz aquí.

Añade un título, una descripción y al menos una pregunta al formulario, y haz clic en Create Form.

Esto le pedirá a MetaMask que apruebe una transacción. Recuerda que se te solicita esto porque la creación de un formulario implica efectivamente la creación de un nuevo contrato FeedbackForm.

Vuelve a la página de inicio y deberías ver tu formulario allí. ¡Ya puedes enviar respuestas en tu formulario!

Ten en cuenta que deberás pagar una pequeña cantidad de gas para registrar esta respuesta (a través de MetaMask).

Sigue construyendo con el stack de web3: Infura, Linea y MetaMask

¡Y eso es todo! Sin escribir casi ningún código, hemos desplegado una solución de formulario descentralizado completa para nuestra dapp y hemos obtenido la capacidad no solo de capturar comentarios de los usuarios, sino de hacerlo en un formulario descentralizado y nativo de web3. Proyectos como Form-xChange serán un gran paso hacia llevar el diseño UX de web2 a las aplicaciones web3. Siéntete libre de modificar el aspecto y la funcionalidad de tu frontend en Next, así como la funcionalidad ofrecida por los smart contracts. Eres libre (y de hecho, te animamos) a hacerlo tuyo.