如何在您的 Web3 DApp 中构建用户反馈循环

收集用户反馈是实现产品市场契合度、打造成功应用程序最关键的步骤之一。在 Web3 领域，这一点尤为重要——因为 UX 设计标准仍在不断演进，尚未形成定论。

对于 Web3 开发者而言，收集用户对 dapp 反馈最常用的方式，依然是 Google、Mailchimp 等公司提供的中心化解决方案。然而，链上反馈表单如今已经出现。让我们来了解这些 Web3 原生反馈表单、它们对 dapp 成功的重要性，以及如何使用它们。

在此前的文章中，我们介绍了 Form-xChange：这是一款由 Consensys 构建的全新开源去中心化 Web3 表单，并演示了如何使用 MetaMask SDK 将其集成到 dapp 中。

在本教程中，我们将在此基础上进一步介绍如何将反馈表单部署到前端，并创建一个新表单，供用户分享对 dapp 的意见。但首先，让我们简要回顾一下收集用户反馈对产品开发与管理的重要性。

Web3 用户反馈表单助力大规模普及

Web3 迫切需要原生去中心化反馈表单。原因如下：

1. 大幅降低成本： 创建表单唯一（且一次性）的费用，仅发生在部署智能合约时。如果部署在 Linea 等 L2 上，费用通常不超过几美元。

2. 近乎无限的自定义可能性： 您可以自由设计表单，收集任何类型的反馈（文字、表情回应、链接等）。此外，由于前端与合约完全独立，您可以按需自定义前端。

3. 按需付费： 使用去中心化表单，无需根据响应数量支付分级费用。理论上，您可以记录任意数量的响应。 如果采用由用户支付 gas 的模式，除合约部署外无需承担任何费用。 如果选择代替用户支付费用，在高效低成本的网络上运行时，每笔费用也仅需几美分。

4. 可实现代币门控： 使用去中心化表单，您可以限制哪些用户有权回答表单问题。例如，理论上可以将访问权限限定为：持有您系列 NFT 的钱包、ETH 余额不为零的钱包，或持有您指定 ERC-20 代币的钱包。

教程：创建您自己的去中心化用户反馈表单

第一步：安装 MetaMask

我们将在 Linea 上部署合约并与之交互。为此，您需要一个已配置 Linea 网络、并持有少量 LineaETH 的加密钱包。

首先，您需要一个 Web3 钱包。本教程将使用 MetaMask——这是一款免费、易用的钱包，已自动配置好 Linea 网络。您可以在此将 MetaMask 安装为浏览器扩展程序。

注意：本教程建议使用 Brave 以外的浏览器（例如 Edge、Chrome、Safari 等）。在撰写本文时，Form-xChange 在 Brave 浏览器上存在已知问题。

添加扩展程序后，MetaMask 将引导您完成一系列步骤，包括获取钱包助记词。请妥善保管此助记词。一旦丢失，将无法找回；一旦被盗，他人将可访问您的资产。

钱包设置完成后，点击 MetaMask 扩展程序左上角的网络下拉菜单，开启显示测试网络。在新的下拉菜单中，选择 Linea Goerli 网络。一切顺利的话，您的钱包界面应如下所示：

第二步：从水龙头获取 LineaETH

如果您是第一次使用 Linea，钱包中的 LineaETH 余额（显然）为 0。

让我们来解决这个问题。Infura 提供了一个水龙头，每天可免费领取 0.5 LineaETH。访问该水龙头时，您可能需要注册一个免费的 Infura 账户。

充值完成后，您应该能看到少量 LineaETH 余额：

第三步：获取 Linea RPC 端点

使用上一步创建的账户再次登录 Infura，系统将自动跳转至主控制台。

在此，点击右上角的"创建新 API 密钥"来新建一个项目。

网络类型选择 Web3 API，密钥名称可自由填写。

密钥创建完成后，您将再次跳转至包含一系列端点的项目控制台。请记录与 Linea 测试网关联的端点，后续部署 Form-xChange 合约时将会用到。

第四步：安装 node 和 npm

Form-xChange 解决方案基于 Infura、Next.js、Truffle 和 Dapp API 构建。为了安装和使用这些技术，我们需要在本地机器上安装 node 和 npm。

您可以在此处下载适合您操作系统的版本。

完成后，在终端中检查版本号，确认安装是否正确。

$ node -v
$ npm -v
复制

第五步：克隆 Form-xChange 仓库

如前所述，Form-xChange 是一个开源仓库，源代码已在 GitHub 上公开。

使用以下命令克隆该仓库并安装所有依赖包：

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

在您常用的代码编辑器（如 VS Code）中打开 Form-xChange 仓库。这是一个开箱即用的项目，除了配置少量环境变量外，几乎无需编写代码。

第六步：部署反馈表单

进入包含 Truffle 项目和表单智能合约的子文件夹：

在该文件夹中，您会看到一个 contracts 子文件夹，其中包含两个主要合约：FeedbackForm 和 FeedbackFormFactory。

前者实现了一个独立表单，能够存储问题列表及对应的回答。

后者是一个工厂合约，可用于部署前者的自定义版本。

您可以查看源代码，并根据所需表单类型进行修改。本教程将沿用默认配置。

在此步骤中，我们将部署 FeedbackFormFactory 合约。这将使我们（创建者）能够从 Next 前端创建表单。

为此，创建一个名为 .env 的文件，并添加以下信息：

接下来，在 truffle-config.js 文件中，将通用 RPC 端点替换为您在第三步中生成的 Infura 端点。最终配置文件应如下所示：

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

一切就绪！运行以下命令部署反馈表单工厂合约：

如果一切顺利，您应该会看到类似如下的输出：

> [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
复制

请记录合约地址，后续步骤将会用到。

第七步：部署 Next 前端工厂

反馈表单工厂合约已上线，现在让我们将注意力转向 Next 前端。运行以下命令进入 Next 应用项目：

我们需要将应用与上一步部署的合约连接起来。打开 lib/contract.ts/config.ts 文件并添加合约地址即可完成连接。

在 apps/web 文件夹中，再创建一个 .env 文件，这次添加第三步中与您项目关联的 Infura 密钥。

一切就绪！现在将应用部署到本地：

您现在可以在 localhost:3000 查看应用，界面应如下所示：

让我们来创建一个新表单！

使用应用右上角的功能连接您的 MetaMask 钱包。连接完成后，应用会自动识别您是工厂合约的部署者，因此您也是该应用的创建者。

这将允许您从此处的 UI 创建新表单。

填写表单标题、描述以及至少一个问题，然后点击"创建表单"。

此时 MetaMask 将提示您确认一笔交易。请记住，之所以需要此操作，是因为创建表单实际上意味着部署一个新的 FeedbackForm 合约。

返回主页，您应该能看到刚创建的表单。现在可以在表单上提交回答了！

请注意，记录回答时需要通过 MetaMask 支付少量 gas 费用。

继续使用 Web3 技术栈构建：Infura、Linea 与 MetaMask

大功告成！几乎无需编写任何代码，我们就为 dapp 部署了一套完整的去中心化表单解决方案，不仅能够收集用户反馈，更能以去中心化、Web3 原生的方式实现这一目标。Form-xChange 这类项目将是推动 Web2 UX 设计走进 Web3 应用的重要一步。欢迎自由修改 Next 前端的外观与功能，以及智能合约提供的特性。您完全可以（也非常鼓励）将其打造成独属于您的产品。