1. 参考资料
http://truffleframework.com/tutorials/pet-shop
这是一个使用以太坊开发的完整的去中心化应用(Dapp)，出自tuffle suite。
Pete有一个宠物店，养了16只宠物，他想开发一个去中心化应用，让大家来领养宠物。
应用效果如下:
屏幕快照 2018-02-09 上午11.00.25 (2).png
2. 环境搭建
- 安装nodejs
- 安装truffle
- 安装ganache-cli
- 安装MetaMask
3. 创建项目
感谢truffle unbox，你不必从头开始创建项目。
truffle unbox pet-shop
这一步需要稍等一会，truffle会自动下载pet-shop项目，项目目录如下:
屏幕快照 2018-02-09 上午11.05.31.png
- contracts 存放智能合约；
- migrations 存放部署脚本；
- test 存放测试用例；
- truffle.js 配置文件，例如区块链地址和端口;
4. 编写智能合约
在contracts目录下，添加合约文件Adoption.sol
pragma solidity ^0.4.17;
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]) {
return adopters;
}
}
5. 编译智能合约
truffle compile
6. 启动以太坊客户端
yangang:~ yangang$ ganache-cli
Ganache CLI v6.0.3 (ganache-core: 2.0.2)
Available Accounts
==================
(0) 0xebbc700bb15e3aa969f9d8ece9090aeb262cbf6e
(1) 0x940ead554300f8b0a40530f6f77b138d24b9359b
(2) 0xf47f7cd72e1377a6220bf512f5690d1027313dee
(3) 0x1c22e4df38807b47f26ad1f25503c23947e9e7e1
(4) 0xb8cf54c3ebdf06ae887222c23930bad155453891
(5) 0xc8232b9bc251ab9c393071747616e0a831b143ec
(6) 0x01c05db44cfbb7bf7b5671cc0e197e72607f0166
(7) 0xa08e0b2855556167afd44c63c6429c8372a6cf01
(8) 0x18ca58212d87cca4842471475ada5d78183d7fdb
(9) 0xcb465d0d7a7b067c7b0c8272078710bc4937d134
Private Keys
==================
(0) 0eb629b963b89ef28272b68437cf65f52a92a963188fa41ed86578158388f0f5
(1) a9c3f1332bd3d7b42b45c6aec59f2d966478c831ca4e71e0ebd251d248cfecf4
(2) b50d1f99eca8a322c2968265a48017be275fcf1f8e9f6ff382b9d1d4c4495443
(3) 6a14cbcb204156880cf663557cf0f919aa297ddf9bed83afc7c4bfe2a1aa5aef
(4) af1c52412f92380d7536324106875e0f30106fa9e50da3e0336eef17779da3ca
(5) 13d45f5707aab605bc42c411aa455c77b7346371609b3606bf001a6359a3a37c
(6) 3763c2a208e5c690a187e8228344a7ff6f25494ed5af907f0c14660074f9484d
(7) 230a4a6beb106e20f5204b14a3ce293e240ffcdf58c8c349ea297af446724c43
(8) 80410ba728a87b877921a8614cd802e5f06c638bf38d3df2b774bc2ecb969ea8
(9) 0f0b78f8b517f065e8a57d4ddcfbc6b3dcfa480f70a51bdd260d7cf530a543be
HD Wallet
==================
Mnemonic: powder omit enforce twelve student rigid large caution eternal sibling pepper human
Base HD Path: m/44'/60'/0'/0/{account_index}
Listening on localhost:8545
注意这里的Mnemonic和Accounts，后面MetaMask需要用到。
7. 部署合约(migrate)
在migrations目录下，创建一个部署脚本2_deploy_contracts.js：
var Adoption = artifacts.require("Adoption");
module.exports = function(deployer) {
deployer.deploy(Adoption);
};
注意这里的写法，artifacts.require("Adoption")的参数为合约名称。
此外，为什么部署脚本要以数字开头呢？这是truffle部署时用的ID。
接下来执行部署命令:
yangang:migrations yangang$ truffle migrate --reset
Using network 'development'.
Running migration: 1_initial_migration.js
Replacing Migrations...
... 0xb61538c615d6268399b938d9d143ae6b941f5042047a352f282000e28d477968
Migrations: 0x359208970726992a5c8fc91fd73f4bd5e85ec797
Saving successful migration to network...
... 0x2d647da26ab9cec9023f9f6cf472a88d4b6c80589c5411dcd0625008f628c46c
Saving artifacts...
Running migration: 2_deploy_contracts.js
Replacing Adoption...
... 0x8794814a4af225df5034f55ac34b9ec93fb803286b5b12c152b151881b9d389b
Adoption: 0x3dd3623e515a405921f0479205cfa41596efe755
Saving successful migration to network...
... 0x58fac81009ebbe60969e4f13ff69bc63db5649abd1161e36a7a15613969442b4
Saving artifacts..
使用--reset来强制重编译并部署所有合约。
8. 测试合约
在test目录下，新建测试案例TestAdoption.sol
pragma solidity ^0.4.17;
import "truffle/Assert.sol";
import "truffle/DeployedAddresses.sol";
import "../contracts/Adoption.sol";
contract TestAdoption {
Adoption adoption = Adoption(DeployedAddresses.Adoption());
// Testing the adopt() function
function testUserCanAdoptPet() public {
uint returnedId = adoption.adopt(8);
uint expected = 8;
Assert.equal(returnedId, expected, "Adoption of pet ID 8 should be recorded.");
}
// Testing retrieval of a single pet's owner
function testGetAdopterAddressByPetId() public {
// Expected owner is this contract
address expected = this;
address adopter = adoption.adopters(8);
Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded.");
}
// Testing retrieval of all pet owners
function testGetAdopterAddressByPetIdInArray() public {
// Expected owner is this contract
address expected = this;
// Store adopters in memory rather than contract's storage
address[16] memory adopters = adoption.getAdopters();
Assert.equal(adopters[8], expected, "Owner of pet ID 8 should be recorded.");
}
}
接下来，运行测试案例:
yangang:test yangang$ truffle test
Using network 'development'.
Compiling ./contracts/Adoption.sol...
Compiling ./test/TestAdoption.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...
TestAdoption
✓ testUserCanAdoptPet (98ms)
✓ testGetAdopterAddressByPetId (62ms)
✓ testGetAdopterAddressByPetIdInArray (90ms)
3 passing (781ms)
9. 创建UI和智能合约交互
在pet-shop项目中，已经包含了前端代码，在src目录下。
我们主要是修改app.js:
App = {
web3Provider: null,
contracts: {},
init: 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 App.initWeb3();
},
initWeb3: function() {
/*
* Replace me...
*/
// Is there an injected web3 instance?
if (typeof web3 !== 'undefined') {
App.web3Provider = web3.currentProvider;
} else {
// If no injected web3 instance is detected, fall back to Ganache
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
}
web3 = new Web3(App.web3Provider);
return App.initContract();
},
initContract: function() {
/*
* Replace me...
*/
// 加载Adoption.json，保存了Adoption的ABI（接口说明）信息及部署后的网络(地址)信息，它在编译合约的时候生成ABI，在部署的时候追加网络信息
$.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: function(adopters, account) {
/*
* Replace me...
*/
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') {
console.log('hahahah');
console.log(adopters[i]);
$('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
}
}
}).catch(function(err) {
console.log(err.message);
});
},
handleAdopt: function(event) {
event.preventDefault();
var petId = parseInt($(event.target).data('id'));
/*
* Replace me...
*/
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();
});
});
9.1 实例化合约
Adoption部署成功后，在build/contracts目录下会生成Adoption.json文件，记录合约部署信息；
initContract函数读取Adoption.json文件，创建一个合约实例contracts.Adoption.
markAdopted函数使用合约实例，调用getAdopters()方法，获取所有领养者列表，回到页面上，把对应宠物的领养按钮置灰，改名为Success。
屏幕快照 2018-02-09 上午11.41.58.png
9.2 处理领养
handleAdopt函数处理领养按钮，首先获取区块链用户账号，然后调用合约实例的adopt(petId)方法，领养宠物。
10. 在浏览器中访问区块链
MetaMask是一款插件形式的以太坊客户端，我使用的是firefox浏览器。
MetaMask登录界面:
屏幕快照 2018-02-09 下午1.33.30.png
选择可供连接的网络:
屏幕快照 2018-02-09 下午1.35.47.png
因为ganache-cli的监听端口为8545，所以我们选择“Localhost 8545”:
点击“Restore from seed phrase”，
屏幕快照 2018-02-09 下午1.40.04.png
注意，"Wallet Seed"框中填入ganache-cli的Mnemonic：
HD Wallet
==================
Mnemonic: powder omit enforce twelve student rigid large caution eternal sibling pepper human
设置密码，确认即可，下次登录直接使用该密码。
屏幕快照 2018-02-09 下午1.44.04.png
登录后，能看到用户及相关交易信息，默认用户名为Account 1，查看该用户地址:
0xebBc700bb15e3aA969f9D8ECe9090aEb262CBf6e
与ganache-cli的用户列表相比:
Available Accounts
==================
(0) 0xebbc700bb15e3aa969f9d8ece9090aeb262cbf6e
(1) 0x940ead554300f8b0a40530f6f77b138d24b9359b
(2) 0xf47f7cd72e1377a6220bf512f5690d1027313dee
(3) 0x1c22e4df38807b47f26ad1f25503c23947e9e7e1
(4) 0xb8cf54c3ebdf06ae887222c23930bad155453891
(5) 0xc8232b9bc251ab9c393071747616e0a831b143ec
(6) 0x01c05db44cfbb7bf7b5671cc0e197e72607f0166
(7) 0xa08e0b2855556167afd44c63c6429c8372a6cf01
(8) 0x18ca58212d87cca4842471475ada5d78183d7fdb
(9) 0xcb465d0d7a7b067c7b0c8272078710bc4937d134
发现什么了吗？其实就是第一个用户。
11. 安装和配置lite-server
接下来需要本地的web服务器提供服务的访问，Truffle Box pet-shop里面，提供了一个lite-server可以直接使用，我们看看它是如何工作的。
bs-config.json指示了lite-server的工作目录:
{
"server": {
"baseDir": ["./src", "./build/contracts"]
}
}
与此同时，在pckage.json的scriptes中添加了dev命令:
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
这样，当运行npm run dev的时候，就会启动lite-server.
12. 启动服务
npm run dev
会自动打开浏览器，显示我们的dapp：
屏幕快照 2018-02-09 下午1.54.01 (2).png
现在领养第四只宠物Melissa看看，当我们点击Adopt时，MetaMask会提示我们交易的确认:
屏幕快照 2018-02-09 下午1.55.21.png
注意：MetaMask和dapp必须在同一个浏览器中哦，否则不会提示的。
点击submit确认后，如图所示，交易29执行成功了。
屏幕快照 2018-02-09 下午1.57.33.png
刷新页面，我们可以发现，Melissa已经被领养了。
屏幕快照 2018-02-09 下午1.58.57 (2).png
13. 总结
到此为止，我们已经完成了一个简单的dapp，恭喜自己吧。
后续还有其他问题，例如如何控制用户权限，如何处理并发领养等等。
