如何在您的 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 合約。

返回首頁，您應該會看到您的表單。現在您可以在表單上提交回應了！

請注意，您需要支付少量 gas 費用才能記錄此回應（透過 MetaMask）。

持續使用 web3 技術堆疊構建：Infura、Linea 和 MetaMask

大功告成！幾乎無需撰寫任何程式碼，我們就為 dapp 部署了一套完整的去中心化表單解決方案，不僅能夠收集用戶反饋，更能以去中心化、web3 原生的方式進行收集。Form-xChange 等專案將是推動 web2 UX 設計融入 web3 應用程式的重要一步。歡迎自由修改 Next 前端的外觀與風格，以及智能合約提供的功能。您完全可以（事實上，我們也鼓勵您）將其打造成獨具特色的作品。