开发第一个以太坊 DApp：从零到上线的全流程实战

很多 H5 工程师一听到“以太坊”“智能合约”“去中心化”就头大。其实，只要先把 以太坊智能合约、web3.js、Ganache 和 MetaMask 四者之间的架构理清，整个 DApp（去中心化应用）的开发流程会像搭积木一样简单。本文用通俗语言拆解核心概念，并给出 8 个可落地的步骤，带你 30 分钟跑出第一个网页版 DApp。

先弄清楚 4 个核心组件

web3.js
说白了就是一个 JavaScript 库，用来通过 RPC 与以太坊节点对话。所有转账、查询、部署合约等指令都要靠它。
Ganache（旧称 testrpc）
本地内存里的“假链”，自带 N 个账号，每个账号预充 测试以太币，真正零手续费做实验。
MetaMask
浏览器钱包插件，可直接帮 DApp 提供可用账号与网络切换。用户授权后，web3 就能拿到 web3.currentProvider，省去手写 RPC 的烦恼。
Truffle
一站式开发框架：帮你编译 Solidity、部署合约、跑测试、连前端一把梭。

把这 4 件工具像乐高一样拼好，DApp 的“地基”就打好了。

8 步跑出第一个 DApp

以下命令均在 Mac / Linux / Windows 通用，确保 Node.js ≥ 16。

1. 安装 Node.js

直接去官网或使用包管理器 brew install node。

2. 全局安装 Truffle

npm install -g truffle

3. 本地启动 Ganache

npm install -g ganache-cli
ganache-cli

默认会开辟 8545 端口，同时送你 10 个账户，每个 100 ETH。

4. 初始化项目

mkdir pet-shop-dapp && cd pet-shop-dapp
truffle init

如果想一步到位跑官方示例：

truffle unbox pet-shop

5. 编写智能合约

在 contracts/ 下放 .sol 文件，示例 Division.sol 关键代码略。

6. 配置网络端口

打开 truffle.js 或 truffle-config.js，把端口改成 8545：

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 8545,
      network_id: "*"
    }
  }
}

7. 编译 & 部署

truffle compile
truffle migrate

成功即可看到合约地址输出，余额仍为 0 消耗。

8. 前端交互三步走

8-1 安装并启动轻量服务器

npm install lite-server --save-dev

package.json 追加脚本：

"scripts": {
  "dev": "lite-server"
}

新建 bs-config.json：

{
  "server": {
    "baseDir": ["./src", "./build/contracts"]
  }
}

8-2 准备前端脚本

核心就是 app.js，步骤有三：

initWeb3：检测 MetaMask → 无则回退本地 RPC；
initContract：加载合约 ABI；
bindEvents 与 handlePlot：用户点击 → 合约调用。

示例片段：

// 略 ...
web3.eth.getAccounts()
  .then(accounts => {
    const account = accounts[2];
    return contract.methods.buyPlot(id).send({ from: account, value: 1e18 });
  })
  .then(receipt => refreshUI());

👉 查看完整前端模板，直接复制即可跑通！

8-3 运行 DApp

npm run dev

浏览器自动打开 http://localhost:3000，MetaMask 切到 Localhost 8545，你就可以 免费转账、领养宠物、更新链上数据 了，全都在本机完成。

DApp 如何上线测试网

完成本地调试后，只需：

申请 Infura 或 Alchemy 节点地址（Goerli、Sepolia 等）。
在 Truffle config 里新增一个 goerli 网络，配置 provider 与私钥。
truffle migrate --network goerli，把合约真正部署到测试链。
用户用 MetaMask 切换到 Goerli，即可与真实节点交互。

👉 3 分钟配置测试网，无需本地跑全节点

常见问答（FAQ）

Q1：Web3.js 与传统 Ajax 有何区别？
A：Ajax 对接中心化 API，Web3.js 通过 RPC 与 以太坊节点 对话，交易签名、gas 计费都在链上完成，而非服务器。

Q2：Ganache 与 Goerli 用哪个？
A：开发时用 Ganache，零手续费，一键回滚；调试完毕再切 Goerli 测试网，贴近真实环境。

Q3：MetaMask 安装后没出现 web3 对象怎么办？
A：从 2021 起，MetaMask 变为了 异步注入，需要在 window.ethereum.request({ method: 'eth_requestAccounts' }) 获取授权，并手动 new Web3。

Q4：合约升级怎么办？
A：用 OpenZeppelin 的代理合约模式（Transparent / UUPS），可在不改动地址的情况下升级逻辑。如要展示，可加 200 字简要说明。

Q5：Gas 太高怎么优化？
A：

Solidity 中使用 view / pure 关键字；
事件用 emit 而非存储；
Truffle 的 truffle-config.js 里可配置 gasPrice，静态压测。

Q6：如何让用户无需安装 MetaMask？
A：引入 WalletConnect 或 Web3Modal，可支持手机钱包一键扫码登录，具体实现后续文章再深聊。

结语

把 本地开发环境 与 真实测试网 结合起来，DApp 的开发门槛将会降到普通 Web 工程级别。先跑通 Ganache 上的 8 步流程，再扩展事件监听、Graph 查询、The Graph Subgraph 部署……你也能成为 全面的区块链前端工程师。下一步不妨试着给宠物商店加个竞拍功能——一旦成功，你就能真正体会到 去中心化 的魅力。