开发、部署第一个去中心化应用(Dapp) - 宠物商店

环境部署

1.安装Node:

http://nodejs.org/
在官网进行下载
查看npm是否安装完成：

2.创建项目并进入

mkdir pet-shop-tutorial
cd pet-shop-tutorial

3.使用truffle unbox 创建项目

truffle unbox pet-shop

4.项目目录结构

contracts/ 智能合约的文件夹，所有的智能合约文件都放置在这里，里面包含一个重要的合约 Migrations.sol（稍后再讲）
migrations/ 用来处理部署（迁移）智能合约，迁移是一个额外特别的合约用来保存合约的变化。
test/ 智能合约测试用例文件夹
truffle.js/ 配置文件

5.编写智能合约

在 contracts 目录下，添加合约文件 Adoption.sol

cd contracts
vim Adoption.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.5.0;
//
contract Adoption {
//
address[16] public adopters; // 保存领养者的地址

// 领养宠物
function adopt(uint petId) public returns (uint) {
require(petId >= 0 && petId <= 15); // 确保id>在数组长度内

adopters[petId] = msg.sender; // 保存调>用这地址
return petId;
}

// 返回领养者
function getAdopters() public view returns (address[16] memory) {
return adopters;
}

}

编译部署智能合约

1.编译

Solidity 是编译型语言，需要把可读的 Solidity 代码编译为 EVM 字节码才能运行。
需要在dapp 的目录 pet-shop-tutorial 下编译

cd pet-shop-tutorial
truffle compile

2.部署

编译之后，就可以部署到区块链上。
在 migrations 文件夹下已经有一个 1_initial_migration.js 部署脚本，用来部署 Migrations.sol 合约。
Migrations.sol 用来确保不会部署相同的合约。
创建一个自己的部署脚本 2_deploy_contracts.js

cd migrations
vim 2_deploy_contracts.js

将代码复制进去

var Adoption = artifacts.require(“Adoption”);
//
module.exports = function(deployer) {
deployer.deploy(Adoption);
};

3.创建一条私有链

使用Ganache 来开启一个私链来进行开发测试，会在 7545 端口上运行一个开发链。
Ganache 启动之后是这样：

执行部署命令：

truffle migrate

在打开的 Ganache 里可以看到区块链状态的变化，现在产生了 4 个区块。

4.测试智能合约

现在我们来测试一下智能合约，测试用例可以用 JavaScript 或 Solidity 来编写，这里使用 Solidity。
在 test 目录下新建一个 TestAdoption.sol，编写测试合约

cd test
vim TestAdoption.sol

合约代码

// SPDX-License-Identifier: MIT
pragma solidity ^0.5.0;
//
import “truffle/Assert.sol”; // 引入的断言
import “truffle/DeployedAddresses.sol”; // 用来获取被测试合约的地址
import “…/contracts/Adoption.sol”; // 被测试合约
//
contract TestAdoption {
Adoption adoption = Adoption(DeployedAddresses.Adoption());

// 领养测试用例
function testUserCanAdoptPet() public {
uint returnedId = adoption.adopt(8);
//
uint expected = 8;
Assert.equal(returnedId, expected, “Adoption of pet ID 8 should be recorded.”);
}

// 宠物所有者测试用例
function testGetAdopterAddressByPetId() public {
// 期望领养者的地址就是本合约地址，因为交易是由测试合约发起交易，
address expected = address(this);
address adopter = adoption.adopters(8);
Assert.equal(adopter, expected, “Owner of >pet ID 8 should be recorded.”);
}

// 测试所有领养者
function testGetAdopterAddressByPetIdInArray() public {
// 领养者的地址就是本合约地址
address expected = address(this);
address[16] memory adopters = adoption.getAdopters();
Assert.equal(adopters[8], expected, “Owner of pet ID 8 should be recorded.”);
}
}

5.运行测试用例

在终端中，执行

truffle test

成功截图

6.创建用户接口和智能合约交互

在 Truffle Box pet-shop 里，已经包含了应用的前端代码，代码在 src/ 文件夹下。
在编辑器中打开 src/js/app.js
可以看到用来管理整个应用的 App 对象，init 函数加载宠物信息，就初始化 web3.
web3 是一个实现了与以太坊节点通信的库，我们利用 web3 来和合约进行交互。

cd …#进入项目根目录
vim src/js/app.js
gedit src/js/app.js

（vim和gedit都可以打开文件，gedit在记事本中打开）
将app.js文件修改为：
完整代码：

App = {
web3Provider: null,
contracts: {},
//
init: async function() {
// Load pets.
$.getJSON(’…/pets.json’, function(data) {
var petsRow = $(’#petsRow’);
var petTemplate = $(’#petTemplate’);
//
for (i = 0; i < data.length; i ++) {
petTemplate.find(’.panel-title’).text(data[i].name);
petTemplate.find(‘img’).attr(‘src’, data[i].picture);
petTemplate.find(’.pet-breed’).text(data[i].breed);
petTemplate.find(’.pet-age’).text(data[i].age);
petTemplate.find(’.pet-location’).text(data[i].location);
petTemplate.find(’.btn-adopt’).attr(‘data-id’, data[i].id);
//
petsRow.append(petTemplate.html());
}
});

return await App.initWeb3();
},

（初始化web3编辑 app.js 修改 initWeb3()）

initWeb3: async function() {
if (window.ethereum) {
App.web3Provider = window.ethereum;
try {
// Request account access
await window.ethereum.enable();
} catch (error) {
// User denied account access…
console.error(“User denied account access”)
}
}
// Legacy dapp browsers…
else if (window.web3) {
App.web3Provider = window.web3.currentProvider;
}
// If no injected web3 instance is detected, fall back to Ganache
else {
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:7545’);
}
web3 = new Web3(App.web3Provider);

return App.initContract();
},

（实例化合约
使用 truffle-contract 会帮我们保存合约部署的信息，就不需要我们手动修改合约地址，修改 initContract()代码如下
）

initContract: function() {
$.getJSON(‘Adoption.json’, function(data) {
// 用Adoption.json数据创建一个可交互的TruffleContract合约实例。
var AdoptionArtifact = data;
App.contracts.Adoption = TruffleContract(AdoptionArtifact);
//
// Set the provider for our contract
// App.contracts.Adoption.setProvider(App.web3Provider);

// Use our contract to retrieve and mark the adopted pets
return App.markAdopted();
});

return App.bindEvents();
},

bindEvents: function() {
$(document).on(‘click’, ‘.btn-adopt’, App.handleAdopt);
},

（处理领养
修改 markAdopted()代码：

markAdopted: function() {
var adoptionInstance;
//
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
//
// 调用合约的getAdopters(), 用call读取信息不用消耗gas
return adoptionInstance.getAdopters.call();
}).then(function(adopters) {
for (i = 0; i < adopters.length; i++) {
if (adopters[i] !== ‘0x0000000000000000000000000000000000000000’) {
$(’.panel-pet’).eq(i).find(‘button’).text(‘Success’).attr(‘disabled’, true);
}
}
}).catch(function(err) {
console.log(err.message);
});
},

修改 handleAdopt()代码：）

handleAdopt: function(event) {
event.preventDefault();
//
var petId = parseInt($(event.target).data(‘id’));
//
var adoptionInstance;

// 获取用户账号
web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}
//
var account = accounts[0];

// >App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
//
// 发送交易领养宠物
return adoptionInstance.adopt(petId, {from: account});
}).then(function(result) {
return App.markAdopted();
}).catch(function(err) {
console.log(err.message);
});
});
}

};
//
$(function() {
$(window).load(function() {
App.init();
});
});

在浏览器中运行

1.安装 MetaMask

MetaMask 是一款插件形式的以太坊轻客户端，开发过程中使用 MetaMask 和我们的 dapp 进行交互是个很好的选择
下载地址：https://metamask.io/
这里选择安装的是谷歌浏览器版本，将下载好的MetaMask 安装在谷歌浏览器扩展程序中，打开程序并注册。
进入：

2.连接开发区块链网络

默认连接的是以太坊主网（左上角显示），选择自定义 RPC，

在新增RPC URL中填入：

http://127.0.0.1:7545

点击右上角○选择导入用户

复制ganance中链的私匙
点击钥匙图片
复制PRIVATE KEY并粘贴

导入成功后显示：

在项目目录中启动服务

npm run dev

会在浏览器显示dapp如下：

现在领养一只宠物，当我们点击 Adopt 时，MetaMask 会提示我们交易的确认，如图：

交易成功：

可以在MetaMask看到交易记录：

至此dapp完成！