区块链DAPP-基于Truffle框架的宠物商店

1.业务背景

Pete有一个宠物店（Pete's Pet Shop），该商店在给定时间可以容纳16只宠物，并且已经有了宠物数据。他希望基于Truffle框架开发一个完全去中心化应用，让大家来领养宠物。

2.环境准备

• 安装Node：下载地址https://nodejs.org/en/download/
• 安装 Truffle ：npm install -g truffle
• 安装ganache-cli：npm install -g ganache-cli

注意：Node、Truffle、ganache-cli版本间的差异，使用过程中也会有区别。我这里用的版本是Node v8.9.3、Truffle v5.0.1、ganache-cli v6.2.5。在安装时可以指定版本，如：

npm install -g truffle@5.0.1

npm install -g ganache-cli@6.2.5

3.创建项目

3.1.本地新建目录

C:\Windows\system32>cd D:\j2eeServer\IDE\truffle

C:\Windows\system32>d:

D:\j2eeServer\IDE\truffle>mkdir dapp-guide-pet-shop

D:\j2eeServer\IDE\truffle>cd dapp-guide-pet-shop

3.2.使用truffle unbox 创建项目

D:\j2eeServer\IDE\truffle\dapp-guide-pet-shop>

truffle unbox pet-shop

4.目录结构说明

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

lcontracts/：智能合约的Solidity源文件。这里有一个重要的合约Migrations.sol（在后面介绍）。

lmigrations/：Truffle使用迁移系统来处理智能合约部署。迁移是一个附加的特殊智能合约，用于跟踪更改。

ltest/：智能合约的JavaScript和Solidity测试

ltruffle-config.js：配置文件

5.编写智能合约

通过编写充当后端逻辑和存储的智能合约来启动dapp，在contracts目录下，添加合约文件Adoption.sol。

6.编译智能合约

Truffle集成了一个开发者控制台，可用来生成一个开发链用来测试和部署智能合约。

6.1.编译合约

Solidity是一种编译语言，我们需要将Solidity编译为字节代码，以供以太坊虚拟机（EVM）执行。

进入目录D:\j2eeServer\IDE\truffle\dapp-guide-pet-shop，执行如下命令

truffle compile

输出：

Compiling .\contracts\Adoption.sol...

Compiling .\contracts\Migrations.sol...

Writing artifacts to .\build\contracts

6.2.新增合约脚本文件

在migrations/目录中创建一个新文件2_deploy_contracts.js。

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

var Adoption = artifacts.require("Adoption");

module.exports = function(deployer) {

  deployer.deploy(Adoption);

};

在合约部署区块链之前，我们需要一个可运行区块链。

我们将使用ganache-cli，来开启一个私链来进行开发测试，可用于部署合同，开发应用程序和运行测试，设置端口：8545。

输入命令：ganache-cli >> D:\j2eeServer\IDE\ganachetrace.log

日志输出至指定的文件，默认启动的10个钱包账户和对应的私钥地址，账户余额均为100ETH。

7.修改配置文件

修改dapp-guide-pet-shop配置文件truffle-config.js，连接本地地址和端口。

8.部署智能合约

D:\j2eeServer\IDE\truffle\dapp-guide-pet-shop>truffle migrate

  Important 

If you're using an HDWalletProvider, it must be Web3 1.0 enabled or your migration will hang.

Starting migrations...

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

> Network name:    'development'

> Network id:      1547863519268

> Block gas limit: 6721975

1_initial_migration.js

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

   Deploying 'Migrations'

   ----------------------

   > transaction hash:

   0xb19e2023d80a06753e1f4798a5bc1eb388d9308e9e4205b523943d700e185803

   > Blocks: 0            Seconds: 0

   > contract address:    0x7E922ceDd5D580915074a036339F89bdb67b301f

   > account:             0x495207075A6a98FC8A32F4f06e451BCb8736a555

   > balance:             99.99430184

   > gas used:            284908

   > gas price:           20 gwei

   > value sent:          0 ETH

   > total cost:          0.00569816 ETH

   > Saving migration to chain.

   > Saving artifacts

   -------------------------------------

   > Total cost:          0.00569816 ETH

2_deploy_contracts.js

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

   Deploying 'Adoption'

   --------------------

   > transaction hash:

   0xb47673a4b893fd8968064281a5465229b4311fba90224f1d7fa402c0938d0364

   > Blocks: 0            Seconds: 0

   > contract address:    0xc399F02A88D2f4c0130Fb9176579C264aE065c77

   > account:             0x495207075A6a98FC8A32F4f06e451BCb8736a555

   > balance:             99.98838476

   > gas used:            253820

   > gas price:           20 gwei

   > value sent:          0 ETH

   > total cost:          0.0050764 ETH

   > Saving migration to chain.

   > Saving artifacts

   -------------------------------------

   > Total cost:           0.0050764 ETH

 

Summary

=======

> Total deployments:   2

> Final cost:          0.01077456 ETH

智能合约部署需要消耗gas，所以我们能看到生成10个区块链账户的第一个账户，余额不是100ETH。

9.智能合约测试

Truffle在智能合约测试方面非常灵活，因为测试可以用JavaScript或Solidity编写。

在test目录下新建一个TestAdoption.sol，编写测试合约。

输入命令：

D:\j2eeServer\IDE\truffle\dapp-guide-pet-shop>truffle test

Using network 'development'.

Compiling .\test\TestAdoption.sol...

10.创建用户接口以与智能合约进行交互

前端界面主要js文件在dapp-guide-pet-shop\src\js目录下。

10.1.实例化web3

在dapp-guide-pet-shop\src\js\app.js，文本编辑器中打开

从内部删除多行注释，initWeb3并将其替换为以下内容：

注意：

这里使用的兼容MetaMask新老版本的写法（如不这样写，出现常见问题是取不到区块链账户信息），首先检查，如果使用DAPP浏览器或更新至最新的版本MetaMask其中一个ethereum供应商被注入window对象。如果是这样，我们使用它来创建我们的web3对象，但是我们还需要使用显式请求访问帐户ethereum.enable()。

如果ethereum对象不存在，则检查注入的web3实例。如果存在，则表明我们使用的是较旧的dapp浏览器（如Mist或较旧的MetaMask版本）。如果是这样，我们获取其提供程序并使用它来创建我们的web3对象。

如果不存在注入的web3实例，我们将基于本地提供程序创建web3对象。

10.2.实例化合约

在dapp-guide-pet-shop\src\js\app.js中，从内部删除多行注释，initContract并将其替换为以下内容：

10.3.获取被领养的宠物和前端用户界面更新

在dapp-guide-pet-shop\src\js\app.js中，从中删除多行注释，markAdopted并将其替换为以下内容：

10.4.处理handleAdopt()方法

11.与浏览器中的dapp交互

11.1.安装和配置MetaMask

在浏览器中与我们的dapp交互的最简单方法是通过MetaMask（Chrome和Firefox的浏览器扩展）。

在浏览器中安装MetaMask，安装后，浏览器中的标签页应打开，并显示以下内容：

单击“入门”后，您应该会看到初始的MetaMask屏幕。点击导入钱包。

接下来看到一个屏幕，选择拒绝或同意。

在【我的账户】-【导入账户】，输入ganache-cli生成的账户私钥

将MetaMask连接到ganache-cli创建的区块链。单击显示“主网络”的菜单，然后选择“自定义RPC”。

在 “新网络”的框中，输入http://127.0.0.1:8545并点击保存。

返回到“帐户”页面，ganache-cli创建的每个帐户都将获得100ETH。第一个账户的费用略有减少，因为在部署合约本身和进行测试时会消耗gas。

11.2.安装和配置lite-server

编辑文件dapp-guide-pet-shop/ bs-config.json

./src为网站文件目录，./build/contracts为智能合约输出目录。

在package.json文件的scripts中添加了dev命令：

12.运行dapp

启动本地Web服务器：

D:\j2eeServer\IDE\truffle\dapp-guide-pet-shop>npm run dev

输出：

访问地址：http://localhost:3000

点击“Adopt”按钮，领养宠物。MetaMask会提示我们交易的确认

点击【确认】后，状态变为“Success”,领养成功。

在MetaMask中，可以看到一笔交易记录：

恭喜您！您已迈出了一大步，成为一名成熟的dapp开发人员。

13.参考

官网：https://www.trufflesuite.com/tutorial

 

长按或扫描关注作者的公众号，获取更多干货！