随着 web3 范式转变持续重塑互联网,开发者必须不断探索新方法来提升用户参与度、推动决策民主化,并从使用其链上应用的用户那里获取有价值的洞察。收集用户反馈的方法之一,是将反馈表单或调查问卷集成到 dapp 中。反馈表单弥合了用户与开发者之间的沟通鸿沟,能够大规模实时收集反馈,从而改进应用程序。它们还营造了一种积极参与和集体决策的环境。
从去中心化自治组织(DAO)将反馈表单用于链上治理,到企业借助它们衡量员工情绪,反馈表单的应用场景可谓无穷无尽。
本文提供了一份分步教程,帮助你将反馈表单集成到应用后端,并开始收集用户反馈。为此,我们将使用一款由我们内部基于 MetaMask SDK 及其他 Consensys 工具构建的反馈表单——Form xChange。
Form xChange
无论你是希望改善 dapp 的用户体验、收集会后反馈,还是作为 DAO 成员致力于推动决策民主化,本教程都将向你展示如何集成反馈表单,并在应用内开辟一条全新的沟通渠道。
Form xChange 是什么,它如何运作?
Form xChange 是一款开源工具,专为在区块链上创建和使用反馈表单而开发。虽然 Form xChange 的智能合约目前部署在 Linea 上,但其灵活的架构支持部署到任何 EVM 兼容网络。
该平台允许参与者对表单中包含的提案进行匿名投票,并为参与者和表单创建者提供查看结果的权限,充分体现了 web3 的透明精神。
Form xChange 采用基于 Next.js 构建的友好用户界面,并通过两个用 Solidity 编写的智能合约运行:FeedbackForm 合约和 FeedbackFormFactory 合约。流程十分简洁——每次创建新表单时,都会部署一个新的 FeedbackForm 合约,而这一任务由 FeedbackFormFactory 合约高效处理。
使用 Form xChange 时,用户须先通过 MetaMask 钱包连接并登录应用。部分支持的角色与职责如下:
表单作者
能够创建包含多个问题的新表单,用于收集反馈。
能够查看反馈收集完成后,用户对每个部分回答的平均得分。
参与者
能够在保持匿名的前提下,提交对表单或提案的回复。
提交回复后可查看结果。
将反馈表单集成到你的 dapp,大规模收集用户反馈
使用场景较为简单的用户,可以直接使用已部署的 Form xChange 实例。但如果你有独特的使用场景,希望自行托管实例或自定义用户界面,那么本部分内容正是为你准备的。
我们将介绍如何将代码仓库克隆到本地计算机并启动后端,如何将新的 Form xChange 后端实例部署到 Linea,最后还会介绍 MetaMask SDK 如何让你轻松地从任何平台连接用户的 MetaMask 钱包客户端。
本教程不涉及用户界面的构建,因为这超出了本教程的范围,但欢迎参考这个代码仓库,了解如何构建自己的用户界面。
如何克隆 Form xChange 后端
本节假设你的计算机已安装 node.js v16 或更高版本,以及 Truffle 开发环境。
克隆代码仓库:git clone [email protected]:Consensys/Form-XChange.git
进入合约目录:cd Form-XChange/packages/form-XChange
编译合约:truffle compile
运行测试:truffle test
如何将你自己的 Form xChange 后端实例部署到 Linea
什么是 Linea,为什么要部署在 Linea 上?Linea 是一种 2 型零知识以太坊虚拟机(zkEVM),它以 rollup 的形式复现以太坊环境,让开发者能够以以太坊的开发体验和安全性进行构建,同时享受更低的交易成本。
Linea 具备更快的最终确认性、与所有开发工具的兼容性、与 MetaMask 的默认集成以及高吞吐量等优势,使其成为部署 Form xChange 后端的绝佳选择。
了解了 Linea 是什么以及它为何是优选之后,让我们深入探讨如何部署到 Linea。在继续本节操作之前,请确保你已安装 MetaMask 钱包扩展,并持有一定数量的 Linea ETH。有关如何获取 Linea ETH 的更多信息,请参阅文档。
运行 Truffle dashboard:truffle dashboard。
在浏览器中访问 localhost:24012,连接你的 MetaMask 钱包,然后从网络下拉菜单中选择 Linea。
在另一个终端中运行 truffle migrate --network dashboard。
返回 localhost:24012,在弹出的确认部署提示中点击确认。
就这些!你应该能在运行 truffle migrate --network dashboard 命令的终端窗口中看到新部署的合约地址。你可以通过访问 Linea 区块浏览器来验证部署是否成功。
使用 MetaMask SDK 将你的 dapp 无缝连接到用户钱包
将 Form xChange 后端部署到 Linea 后,我们希望确保用户在与 dapp 交互时不会遇到任何困难。换句话说,我们希望让用户能够毫无障碍地将其钱包客户端连接到我们的 dapp。
MetaMask 是连接任何部署在 Linea 上的 dapp 的最有效方式,因为 MetaMask 钱包扩展现已默认内置 Linea 网络选项。此外,为了简化开发者为 dapp 添加 MetaMask 支持的流程,MetaMask 近期发布了 MetaMask SDK,可与 JavaScript、移动端和游戏平台配合使用。
要在你的 React 前端代码库中使用 MetaMask SDK,可以按照以下步骤操作:
使用 Yarn 或 NPM 安装 MetaMask SDK:yarn add @metamask/sdk or npm install @metamask sdk
将 MetaMask SDK 导入你的 React 项目:import { MetaMaskSDK } from '@metamask/sdk';
使用以下选项实例化 MetaMask SDK
const sdk = new MetaMaskSDK(options);
sdk.getProvider();
在 React 代码库的任意位置访问 MetaMask SDK:window.ethereum.request({ method: 'eth_requestAccounts', params: [] });
使用 ethereum.request() 调用 eth_requestAccounts 会触发安装或连接弹窗,因此建议始终优先调用此函数。
查看 MetaMask SDK 文档,了解如何将 MetaMask SDK 与 Node.js、iOS、Unity 等平台配合使用的更多信息。
Form xChange 通过促进有价值的反馈收集、提升用户参与度和推动参与式决策,为你的 dapp 赋能。其在任何 EVM 兼容网络上运行的能力以及友好的用户界面,使集成过程轻松便捷。
本教程提供了将反馈表单集成到 dapp 的完整步骤——从准备后端并将其部署到 Linea,到使用 MetaMask SDK 建立与 MetaMask 的连接以提升用户体验,你已做好充分准备,可以在 dapp 中营造一个充满活力的民主化环境。请记住,web3 的力量就掌握在你手中!
如需了解更多关于 MetaMask SDK 的信息,请访问 metamask.com/developer/sdk。