从零到一：构建你的第一个Ethereum DApp

介绍

欢迎来到本篇博客，今天我们将一起探索如何从头开始构建你的第一个Ethereum DApp（去中心化应用程序）。Ethereum 是一个开源的区块链平台，它允许开发者构建智能合约和去中心化应用程序。在本文中，我们将使用以太坊区块链平台和 Solidity 编程语言来构建一个简单的去中心化投票应用程序。

环境设置

在开始之前，我们需要先设置开发环境。以下是我们需要的几个工具：

安装 Node.js - 我们将使用它来运行我们的 DApp。
安装 Truffle - 它是一个用于构建以太坊 DApp 的开发框架。
安装 Ganache - 它是一个本地区块链模拟器，用于开发和测试以太坊应用程序。
安装 Metamask - 它是一个浏览器插件，用于与以太坊网络进行交互。

编写智能合约

我们将从编写智能合约开始。智能合约是在以太坊上运行的编程代码，用于定义 DApp 的逻辑。在本例中，我们将创建一个简单的投票智能合约。

pragma solidity ^0.8.0;

contract Voting {
    mapping (string => uint256) public votes;

    function vote(string memory candidate) public {
        votes[candidate] += 1;
    }
}

上述 Solidity 代码定义了一个名为 Voting 的合约，并实现了一个 vote 函数用于给候选人投票。我们使用一个映射（mapping）来记录每个候选人的票数。

部署智能合约

接下来，我们将使用 Truffle 来部署智能合约到 Ganache 本地区块链上。

打开终端，进入你的项目文件夹。
运行以下命令初始化一个 Truffle 项目：
```
truffle init
```
在项目文件夹中创建一个名为 migrations 的文件夹，并在其中创建一个 2_deploy_contracts.js 文件。

在 2_deploy_contracts.js 文件中，添加以下代码来部署智能合约：

const Voting = artifacts.require("Voting");

module.exports = function(deployer) {
  deployer.deploy(Voting);
};

打开终端，运行以下命令来编译和部署智能合约：
```
truffle migrate --network development
```
这将在 Ganache 上部署智能合约。

构建前端界面

现在，我们将构建一个简单的前端界面，允许用户与我们的 DApp 进行交互。我们将使用 HTML、CSS 和 JavaScript 来完成这个任务。

在项目文件夹中创建一个名为 index.html 的文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Voting DApp</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>欢迎来到投票 DApp</h1>

  <h2>候选人列表：</h2>
  <ul id="candidates"></ul>

  <form id="voteForm">
    <h2>投票：</h2>
    <input type="radio" name="candidate" value="Candidate 1"> 候选人一<br>
    <input type="radio" name="candidate" value="Candidate 2"> 候选人二<br>
    <input type="submit" value="提交">
  </form>

  <h2>投票结果：</h2>
  <ul id="results"></ul>

  <script src="app.js"></script>
</body>
</html>

在项目文件夹中创建一个名为 app.js 的文件，并在其中添加以下代码：

window.addEventListener('load', async () => {
  // 连接到区块链网络
  if (window.ethereum) {
    window.web3 = new Web3(window.ethereum);
    await window.ethereum.enable();
  } else {
    console.log('请安装 Metamask 插件。');
  }

  // 加载智能合约
  const contractAddress = "合约地址";
  const contract = new window.web3.eth.Contract(abi, contractAddress);

  // 显示候选人列表
  const candidatesElement = document.getElementById('candidates');
  const candidates = await contract.methods.getAllCandidates().call();
  candidates.forEach(candidate => {
    const li = document.createElement('li');
    li.innerHTML = candidate;
    candidatesElement.appendChild(li);
  });

  // 提交投票表单
  const voteForm = document.getElementById('voteForm');
  voteForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const candidate = document.querySelector('input[name="candidate"]:checked').value;
    await contract.methods.vote(candidate).send({ from: window.web3.eth.defaultAccount });
    alert('投票成功！');
  });

  // 显示投票结果
  const resultsElement = document.getElementById('results');
  const votes = await contract.methods.getAllVotes().call();
  Object.entries(votes).forEach(([candidate, voteCount]) => {
    const li = document.createElement('li');
    li.innerHTML = `${candidate}: ${voteCount}`;
    resultsElement.appendChild(li);
  });
});

在项目文件夹中创建一个名为 styles.css 的文件，并在其中添加样式代码来美化界面。

运行 DApp

现在，我们已经完成了 DApp 的构建。让我们通过以下步骤来运行它：

在终端中运行以下命令启动 Ganache：
```
ganache-cli --deterministic
```
这将模拟一个本地的以太坊区块链。
在浏览器中安装并启用 Metamask 插件，并将其连接到 Ganache。
在终端中运行以下命令来启动 DApp：
```
truffle migrate --reset
npm run dev
```
这将启动一个本地服务器，并在浏览器中打开 DApp。
现在，你可以在浏览器中访问 http://localhost:3000 来使用投票 DApp 了。

结论

恭喜！你成功地构建了你的第一个 Ethereum DApp。在本篇博客中，我们使用了以太坊和 Solidity 来编写智能合约，并使用了 Truffle 和 Ganache 来部署和测试我们的合约。我们还创建了一个简单的前端界面，以便用户可以与我们的 DApp 进行交互。希望这篇博客对你的学习和探索有所帮助！

本文来自极简博客，作者：编程之路的点滴，转载请注明原文链接：从零到一：构建你的第一个Ethereum DApp