引言：为什么想学会这个？

说到区块链和以太坊上的智能合约，最近我身边的朋友特别感兴趣，大家都想了解怎么从网页上直接和合约互动，尤其是用 Metamask。别觉得没意思，实际上它有很多应用，比如做去中心化金融（DeFi）产品、NFT 市场等等，听上去很酷吧？那么，今天我们就来聊聊如何在前端搭建一个和以太坊智能合约互动的用户界面，这样大家就能在自己的项目中实现这些功能了。

准备工作：Metamask 怎么用？

首先，你得有个 Metamask 钱包。去他们的官方网站下载一个浏览器插件，安装后创建一个钱包，记得保存好助记词！这玩意儿可是你未来访问自己以太坊资产的钥匙哦！

其实用 Metamask 也不难，主要是要熟悉它的界面。打开后你能看到目前钱包里的以太坊（ETH）和其他 ERC20 代币的余额，简单来说，就是你所有的“数字资产”。在顶部，你会发现有网络选择的下拉框，通常我们会选择“主网络”或“测试网络”，具体选择哪个要看你在哪个环境下开发和测试了。

一点小知识：Web3.js 和 ethers.js

为了和以太坊进行交互，通常我们会用一些工具库。最流行的就是 Web3.js 和 ethers.js。它们能让你方便地调用智能合约的函数、发送交易、查询状态等等功能。讲真，ethers.js 要更轻量级，有些开发者更喜欢用它。接下来的步骤，我会用 ethers.js 作为例子，帮大家铺路。

搭建开发环境：让我们开始吧！

首先，确保你有 Node.js 和 npm，这样才能安装依赖项。如果没有，可以去官网下载。接下来，在你喜欢的目录下创建一个新项目，使用命令：

mkdir my-dapp