手把手教你开发dapp (1)

本教程将带您完成构建您的第一个 dapp 的过程——宠物店的收养跟踪系统！

本教程适用于对以太坊和智能合约有基本知识，对 HTML 和 JavaScript 有一定了解，但对 dapp 不熟悉的人。

注意：对于以太坊基础知识，请在继续之前阅读 Truffle Ethereum 概述教程。

在本教程中，我们将介绍：

1. 设置开发环境

2. 使用 Truffle Box 创建 Truffle 项目

3. 编写智能合约

4. 编译和迁移智能合约

5. 测试智能合约

6. 创建用户界面以与智能合约交互

7. 在浏览器中与 dapp 交互

背景¶

Pete's Pet Shop 的 Pete Scandlon 对使用以太坊作为处理宠物收养的有效方式很感兴趣。该商店在给定时间有 16 只宠物的空间，并且他们已经有一个宠物数据库。作为概念的初步证明，Pete 希望看到一个将以太坊地址与要收养的宠物相关联的 dapp。

将提供网站结构和样式。我们的工作是为其使用编写智能合约和前端逻辑。

设置开发环境¶

在我们开始之前，有一些技术要求。请安装以下内容：

• Node.js v12+ LTS 和 npm（Node 自带）

• 吉特

一旦我们安装了这些，我们只需要一个命令来安装 Truffle：

npm install -g truffle

要验证 Truffle 是否已正确安装，请truffle version在终端上键入。如果您看到错误，请确保您的 npm 模块已添加到您的路径中。

我们还将使用Ganache，这是一个用于以太坊开发的个人区块链，您可以使用它来部署合约、开发应用程序和运行测试。您可以通过导航到 https://trufflesuite.com/ganache 并单击“下载”按钮来下载 Ganache。

注意：如果您在没有图形界面的环境中进行开发，您也可以使用 Truffle Develop，Truffle 内置的个人区块链，而不是 Ganache。您将需要更改一些设置——例如区块链运行的端口——以适应 Truffle Develop 的教程。

使用 Truffle Box 创建 Truffle 项目¶

1. Truffle 在当前目录中初始化，因此首先在您选择的开发文件夹中创建一个目录，然后在其中移动。

mkdir pet-shop-tutorialcd pet-shop-tutorial

1. 我们为本教程创建了一个特殊的Truffle Boxpet-shop ，名为，其中包括基本的项目结构以及用户界面的代码。使用truffle unbox命令解压这个 Truffle Box。

truffle unbox pet-shop

注意： Truffle 可以通过几种不同的方式进行初始化。另一个有用的初始化命令是“truffle init”，它会创建一个没有示例合约的空 Truffle 项目。有关详细信息，请参阅有关创建项目的文档。

目录结构¶

默认的 Truffle 目录结构包含以下内容：

• contracts/：包含我们智能合约的Solidity源文件。这里有一个重要的合约叫做Migrations.sol，我们稍后会谈到。

• migrations/：Truffle 使用迁移系统来处理智能合约部署。迁移是一种额外的特殊智能合约，用于跟踪更改。

• test/: 包含我们智能合约的 JavaScript 和 Solidity 测试

• truffle-config.js: 松露配置文件

Truffle Box 里面有额外的pet-shop文件和文件夹，但我们暂时不用担心这些。

编写智能合约¶

我们将通过编写充当后端逻辑和存储的智能合约来启动我们的 dapp。

1. Adoption.sol在目录中创建一个名为的新文件contracts/。

2. 将以下内容添加到文件中：

pragma solidity ^0.5.0;contract Adoption {}

注意事项：

• 所需的 Solidity 最低版本在合同顶部注明：pragma solidity ^0.5.0;. 该pragma命令表示“只有编译器关心的附加信息”，而插入符号 (^) 表示“指示的版本或更高版本”。

• 与 JavaScript 或 PHP 一样，语句以分号结尾。

变量设置¶

Solidity 是一种静态类型语言，这意味着必须定义字符串、整数和数组等数据类型。Solidity 有一个独特的类型，称为地址。地址是以太坊地址，存储为 20 字节值。以太坊区块链上的每个账户和智能合约都有一个地址，并且可以向该地址发送和接收以太币。

1. 在 .之后的下一行添加以下变量contract Adoption {。

address[16] public adopters;

注意事项：

• 我们定义了一个变量：adopters. 这是一组以太坊地址。数组包含一种类型，并且可以具有固定或可变长度。在这种情况下，类型是address，长度是16。

• 您还会注意到adopters是公开的。公共变量具有自动 getter 方法，但在数组的情况下，键是必需的，并且只会返回一个值。稍后，我们将编写一个函数来返回整个数组以在我们的 UI 中使用。

你的第一个功能：收养宠物¶

让我们允许用户提出采用请求。

1. 在我们上面设置的变量声明之后，将以下函数添加到智能合约中。

// Adopting a petfunction adopt(uint petId) public returns (uint) { require(petId >= 0 && petId <= 15); adopters[petId] = msg.sender; return petId;}

注意事项：

• 在 Solidity 中，必须指定函数参数和输出的类型。在这种情况下，我们将接收一个petId(integer) 并返回一个整数。

• 我们正在检查以确保petId在我们的adopters数组范围内。Solidity 中的数组从 0 开始索引，因此 ID 值需要在 0 到 15 之间。我们使用该require()语句来确保 ID 在范围内。

• 如果 ID 在范围内，然后我们将调用我们的adopters数组的地址添加。调用此函数的人或智能合约的地址用 表示msg.sender。

• 最后，我们返回petId提供的确认信息。

未完待续。。。敬请期待