以太坊Dapp终极教程——如何构建一个完整的全栈去中心化应用（一）

今天，我将向您展示如何在以太坊区块链上构建您的第一个去中心化应用程序或 dApp。 我将向您展示如何编写您的第一个以太坊智能合约，我们将在两名候选人之间进行选举。 我们将针对智能合约编写测试，将其部署到以太坊区块链，并开发允许账户投票的客户端应用程序。 我们还将研究关键概念，例如“什么是区块链？”、“什么是智能合约？”和“dApps 如何工作？”。

什么是区块链？

让我们用一个类比来理解区块链是什么以及它是如何工作的。 让我们看一个 Web 应用程序。

图片

通常，当您与 Web 应用程序交互时，您会使用 Web 浏览器通过网络连接到中央服务器。 此 Web 应用程序的所有代码都驻留在这个中央服务器上，所有数据都驻留在中央数据库中。 每当与应用程序进行交易时，它都必须与 Web 上的中央服务器进行通信。

如果我们要在网络上构建我们的投票应用程序，我们会遇到一些问题：

我们不想在网络上构建我们的应用程序。 我们想把它建立在区块链上，任何连接到网络的人都可以参与选举。 我们要确保他们的选票被计算在内，并且只计算一次。 那么让我们看看它是如何工作的。

区块链没有网络、中央服务器和数据库，而是有网络和数据库。 区块链是一个点对点的计算机网络，称为节点，共享网络中的所有数据和代码。 所以，如果你是连接到区块链的设备，你就是网络中的一个节点，你可以与网络中的所有其他计算机节点进行通信。 您现在拥有区块链上所有数据和代码的副本。 不再有中央服务器。 只是一堆计算机在同一个网络上互相交谈。

图片

区块链中节点之间共享的所有交易数据都包含在称为块的记录包中，而不是集中式数据库，这些记录包捆绑在一起以创建公共分类帐。 这个公共分类账代表区块链中的所有数据。 公共分类账中的所有数据都通过加密散列法进行保护，并通过共识算法进行验证。 网络上的节点参与以确保分布在网络中的所有数据副本都是相同的。 这是我们在区块链上构建投票应用程序的一个非常重要的原因，因为我们想确保我们的投票被计算在内并且没有改变。

我们的应用程序用户在区块链上投票会是什么样子？ 好吧，对于初学者来说，用户需要一个带有钱包地址的帐户，其中包含以太坊的加密货币 Ether。 一旦他们连接到网络，他们就会投票并支付少量交易费用以将此交易写入区块链。 这笔交易费用称为天然气。 每当投票时，网络上的一些节点（称为矿工）竞争完成此交易。 完成此交易的矿工将收到我们的以太币支付投票。

回顾一下，当我投票时，我会支付 gas price 来投票，当我的投票被记录下来时，网络上的一台计算机会收到我的以太币费用。 反过来，我相信我的投票将始终得到准确记录。

因此，同样重要的是要注意，在区块链上投票需要以太币，但只看候选人名单则不需要。 这是因为从区块链读取数据是免费的，但写入数据则不是。

什么是智能合约？

这就是投票过程的工作原理，但我们如何实际编写应用程序代码呢？ 好吧，以太坊区块链允许我们使用称为智能合约的东西使用以太坊虚拟机 (EVM) 在区块链上执行代码。

智能合约是我们应用程序所有业务逻辑所在的地方。 这是我们实际编写应用程序的去中心化部分的地方。 智能合约负责读取和写入区块链数据，以及执行业务逻辑。 智能联系人是用一种名为 Solidity 的编程语言编写的，它看起来很像 Javascript。 它是一种完整的编程语言，允许我们做许多 Javascript 可以做的相同类型的事情，但由于它的用例，它的行为有点不同，正如我们将在本教程中看到的那样。

区块链上的智能合约功能很像网络上的微服务。 如果公共分类账代表区块链的数据库层，那么智能合约就是处理该数据的所有业务逻辑所在的地方。

此外，它们被称为智能合约，因为它们代表合同或协议。 In the case of our voting dApp, it's an agreement that my vote will be counted, other votes will be counted only once, and the candidate with the most votes will actually win the election.

现在让我们快速浏览一下我们正在构建的 dApp 的结构。

图片

我们将有一个用 HTML、CSS 和 Javascript 编写的传统前端客户端。 该客户端将连接到我们将安装的本地以太坊区块链，而不是与后端服务器通信。 我们将使用 Solidity 编程语言在选举智能合约中编写有关 dApp 的所有业务逻辑。 我们将这个智能合约部署到我们本地的以太坊区块链，并允许账户开始投票。

现在我们已经了解了区块链是什么以及它是如何工作的。 我们已经明白了为什么我们要在区块链而不是当前的网络上构建我们的投票 dApp。 我们已经看到，我们希望通过编写将部署到以太坊区块链的智能合约来编写我们的 dApp。 现在让我们开始编程吧！

我们要建造什么

下面是我们将要构建的投票 dApp 的演示。

图片

我们将构建一个客户端应用程序，它将与我们在区块链上的智能合约进行对话。 这个客户端应用程序将有一个候选人表，列出每个候选人的 ID、姓名和投票数。 它将有一个表格，我们可以在其中投票给我们想要的候选人。 它还将在您的帐户下显示我们与区块链关联的帐户。

安装依赖项

为了构建我们的 dApp，我们首先需要一些依赖项。

节点包管理器 (NPM)

我们需要的第一个依赖项是 Node.js 附带的节点包管理器或 NPM。 您可以通过转到终端并键入以下内容来查看是否安装了节点：

$ node -v

松露框架

下一个依赖项是 Truffle 框架，它允许我们在以太坊区块链上构建去中心化应用程序。 它提供了一组工具，使我们能够使用 Solidity 编程语言对智能触点进行编程。 它还允许我们测试我们的智能合约并将它们部署到区块链。 它还为我们提供了开发客户端应用程序的空间。

您可以使用 NPM 从命令行安装 Truffle，如下所示：

$ npm install -g truffle

伽纳彻

下一个依赖项是 Ganache，一个本地内存区块链。 您可以通过从 Truffle Framework 网站下载它来安装 Ganache。 它将为我们提供 10 个外部帐户，这些帐户的地址位于我们本地的以太坊区块链上。 每个账户都预装了 100 个假以太币。

元掩码

下一个依赖项是 Google Chrome 的 Metamask 扩展。 为了使用区块链，我们必须连接到它（记住，我说过区块链是一个网络）。 我们必须安装一个特殊的浏览器扩展才能使用以太坊区块链。 这就是 metamask 的用武之地。我们将能够通过我们的个人账户连接到我们本地的以太坊区块链，并与我们的智能合约进行交互。

我们将在本教程中使用 Metamask chrome 扩展程序，因此如果您还没有安装 Google Chrome，则需要安装它。 要安装 Metamask，请在 Google Chrome Web Store 中搜索 Metamask Chrome 插件。 安装后，确保在扩展列表中选中它。 安装后，您会在 Chrome 浏览器的右上角看到一个狐狸图标。 如果卡住了，请参考视频演示！

语法高亮

依赖项是可选的，但建议使用。 我建议为 Solidity 编程语言安装语法高亮显示。 大多数文本编辑器和 IDE 没有开箱即用的 Solidity 语法高亮功能，因此您必须安装一个包来支持此功能。 我正在使用 Sublime Text，我已经下载了 Ethereum 包，它为 Solidity 提供了很好的语法高亮显示。

烟雾测试 - 第 1 步

现在我们已经安装了依赖项，让我们开始构建我们的 dApp！

首先，找到您下载 Ganache 的位置并打开它。 现在 Ganache 启动了，你有一个本地区块链正在运行。

图片

Ganache 为我们提供了 10 个预装了 100 个假以太币的账户（这在以太坊主网络上是不值得的）。 每个帐户都有一个唯一的地址和一个私钥。 每个帐户地址都将作为我们选举中每个选民的唯一标识符。

现在让我们在命令行上为 dApp 创建一个项目目录，如下所示：

$ mkdir election
$ cd election

现在我们在我们的项目中，我们可以使用 Truffle box 快速启动和运行。 我们将在本教程中使用 Pet Shop 盒子。 在项目目录中，通过命令行安装 Pet Shop box，如下所示：

$ truffle unbox pet-shop

让我们看看 Pet Shop 盒子给了我们什么：

图片

现在让我们开始编写我们的智能合约吧！ 该智能合约将包含我们 dApp 的所有业务逻辑。 它将负责读取和写入以太坊区块链。 这将使我们能够列出将参加选举的候选人名单，并跟踪所有选票和选民。 它还将管理所有选举规则，例如强制执行只投票一次的账户。 从项目的根目录开始，在 contracts 目录中创建一个新的合约文件，如下所示：

$ touch contracts/Election.sol

让我们首先创建一个冒烟测试，以确保我们正确设置了项目，并且我们可以成功地将合约部署到区块链。 打开文件并从以下代码开始：

pragma solidity 0.4.2;
contract Election {
    // Read/write candidate

    string public candidate;
    // Constructor
    function Election () public {
        candidate = "Candidate 1";
    }
}

让我解释一下这段代码。 我们首先使用 pragma solidity 语句声明 solidity 版本。 接下来，我们使用 contract 关键字声明智能合约，后跟合约名称。 接下来，我们声明一个状态变量，它将存储候选人姓名的值。 状态变量允许我们将数据写入区块链。 我们已经声明这个变量将是一个字符串，并且我们已经将它的可见性设置为公开。 由于它是公开的，solidity 将为我们提供免费的 getter 函数，这将允许我们在合约之外访问这个值。 我们稍后会在控制台中看到它！

然后，我们创建一个构造函数以太坊交易所app教程，每当我们将智能合约部署到区块链时都会调用该构造函数。 这是我们将设置候选状态变量的值，该变量将在迁移时存储到区块链中。 请注意，构造函数与智能合约同名。 这就是 Solidity 知道函数是构造函数的方式。

现在我们已经为智能合约创建了基础，让我们看看是否可以将它部署到区块链上。 为此，我们需要在迁移目录中创建一个新文件。 在项目根目录中，通过命令行创建一个新文件，如下所示：

$ touch migrations/2_deploy_contracts.js

请注意，我们用数字对迁移目录中的所有文件进行编号，以便 Truffle 知道执行它们的顺序。 让我们创建一个新的迁移来部署合约，如下所示：

var Election = artifacts.require("./Election.sol");
module.exports = function(deployer) {
  deployer.deploy(Election);

};

首先，我们需要我们创建的合约，并将其分配给一个名为 Election 的变量。 接下来以太坊交易所app教程，我们将它添加到已部署合约的清单中，以确保它在我们运行迁移时得到部署。 现在让我们从命令行运行我们的迁移，如下所示：

$ truffle migrate

现在我们已经成功将我们的智能合约迁移到本地以太坊区块链，让我们打开控制台与智能合约进行交互。 您可以从命令行打开 Truffle 控制台，如下所示：

$ truffle console

现在我们在控制台中，让我们获取已部署的智能合约的实例，看看我们是否可以从合约中读取候选人的姓名。 从控制台运行以下代码：

Election.deployed().then(function(instance) { app = instance })

这里的 Election 是我们在迁移文件中创建的变量的名称。 我们使用 deployed() 函数检索已部署的合约实例，并将其分配给 promise 回调函数中的 app 变量。

现在我们可以像这样读取候选变量的值：

app.candidate()
// => 'Candidate 1'

恭喜！ 您刚刚编写了第一个智能合约，部署到区块链，并检索了一些数据。 继续学习终极以太坊Dapp教程——如何构建完整的全栈去中心化应用（二）

================================================ == =====================

分享一些与比特币、以太坊、EOS、Fabric等区块链相关的交互式在线编程实战教程：