八、开发和部署dapp

发表于 | 分类于 ， | 阅读量

环境搭建

安装Node

安装 Truffle ：npm install -g truffle
安装Ganache
Ganache（或Ganache CLI）已经取代了 testrpc。

创建项目

建立项目目录并进入

1
2
mkdir five
> cd five

使用truffle unbox 创建项目

1
2
3
4
5
> truffle unbox pet-shop
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!

truffle基本命令有下面几条
Commands:
Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Run dev server: npm run dev

这一步需要等待一会
也可以使用truffle init 来创建一个全新的项目。

编写智能合约

智能合约承担着分布式应用的后台逻辑和存储。智能合约使用solidity编写
在contracts目录下，添加合约文件Adoption.sol

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
  }

}

dapp的根目录five下，

1
2
3
4
[guoqiang@masterhadoop five]$ truffle compile --compile-all
Compiling ./contracts/Adoption.sol...
Compiling ./contracts/Migrations.sol...
Writing artifacts to ./build/contracts

部署智能合约

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

1
2
3
4
5
var Adoption = artifacts.require("Adoption");

module.exports = function(deployer) {
  deployer.deploy(Adoption);
};

在执行部署之前，需要确保有一个区块链运行, 可以使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
ganache-cli -p 7545
ganache-cli -p 7545
Ganache CLI v6.1.0 (ganache-core: 2.1.0)

Available Accounts
==================
(0) 0x40fd708c3739a1df595f938e74e395922b99e9ce
(1) 0xb2ff4293f669add7226d2269d3fa71eff0c87cfb
(2) 0xc3c6148af935b34d18af4661551b4a9bbe84efbc
(3) 0xcdab2754c0b296548b5c18f2bcc0eab6ceb62918
(4) 0xf8090d48ab83db3416fb97d7a1a9c40e2ab57c7b
(5) 0xddac41dfbadb62395f3dfb68daab314732d028ed
(6) 0x519910ffa60afc9bca81d03ef39b9b0428fcf2d6
(7) 0x4742293a7fa1f33db49799c047f5a461a3f68ab0
(8) 0x7394eae9417b874d61c9191397b159695febcd73
(9) 0xe8c7d2e67cfc5a776448da8eedef659b3561d576

Private Keys
==================
(0) ecf4613bbdaf8cc65ff152e775a972bdd4832374df229d3345f81b830895dcde
(1) f6838b0b964a74d991e54eb885edb09dda0289b9488970d0f066b446cec88e86
(2) c23a6b6baab67ea4150bcea309590684573284d4018e20cf9544c634593e183f
(3) 94fb7c0a5119c53ad25dcf0e2df359d7d43fa32b501c49bc4f6ca6baca440595
(4) 7085c04a986a70db6455363e5872bcf6c21ef3d33852cb922321050ff6e558e3
(5) 56ad542de309ea5bb9030549f6430ceacdb7f52e17f3b9bc0e39133196d56ae6
(6) 085d5db0672a6d78bda6bf48315fa75dff03c8281907bf0099bbb920a0fb72fe
(7) 84ef421220e995545f8ac317aaf21e15f3c0a21e82f03141ed082a42a40d1d0a
(8) 608952359b42b8eb724bc0ee3435f38666abd4168c3c9dcc0e25158f6d42910a
(9) 5a925cc3028c9b7423154063ca9122c67a78be5108b2c259c20738dd1c5fdb5d

HD Wallet
==================
Mnemonic:      trend shallow nut swap hole magic whale long account regret kite major
Base HD Path:  m/44'/60'/0'/0/{account_index}

Listening on localhost:7545

它所做的，就是告诉ganache-cli从端口7545启动。
Ganache会为我们生成测试账户，默认情况下，每个账户都有未锁定的100个以太币并，所以我们可以自由地从那里发送以太币。第一个示例账户就是这个家伙：
0x40fd708c3739a1df595f938e74e395922b99e9ce
现在，回到我们的第一个命令行界面，执行两个命令：

1
2
truffle compile --compile-all
truffle migrate --network development

Compile 将把我们的 Solidity 代码编译成字节码（以太坊虚拟机 (EVM) 能理解的代码），在我们的例子中，Ganache 模拟了 EVM。
Migrate（迁移） 会把代码部署到区块链，我们之前在 “truffle.js” 文件中设置了 “development” 网络，我们可以在那里找到区块链。

1
2
3
4
5
6
7
8
9
10
11
12
13
  Deploying Migrations...
  ... 0xd37174abb4fe4ab4fae76dd2764ee63e218f3f6ad0482613479946b4892d245d
  Migrations: 0x47d5215d5aa0d18c7069da33bbe3b0f039f144d5
Saving successful migration to network...
  ... 0xa3d5035f6323e1ec0b867f637733d962b6522ee81df53003b7dd7c4caf559fbb
Saving artifacts...
Running migration: 2_deploy_contracts.js
  Deploying Adoption...
  ... 0x3556ccc6ba7eaa2f97bb4db79273addaa750a3ae9af6971e6bb025c2a8d6faf5
  Adoption: 0xf99ecc99d9b836126a82e83ef7aeff39bd04a86f
Saving successful migration to network...
  ... 0xefc70a4012af967884d3ebe9265e4cf4459ca128281c8633dca872f37a31d844
Saving artifacts...

在 ganache-cli 运行的命令行界面上，你可以看到正在执行的交易：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
net_version
eth_accounts
eth_accounts
net_version
net_version
eth_sendTransaction

  Transaction: 0xd37174abb4fe4ab4fae76dd2764ee63e218f3f6ad0482613479946b4892d245d
  Contract created: 0x47d5215d5aa0d18c7069da33bbe3b0f039f144d5
  Gas usage: 269607
  Block Number: 1
  Block Time: Thu Mar 15 2018 13:27:38 GMT+0800 (CST)

eth_newBlockFilter
eth_getFilterChanges
eth_getTransactionReceipt
eth_getCode
eth_uninstallFilter
eth_sendTransaction

  Transaction: 0xa3d5035f6323e1ec0b867f637733d962b6522ee81df53003b7dd7c4caf559fbb
  Gas usage: 41981
  Block Number: 2
  Block Time: Thu Mar 15 2018 13:27:38 GMT+0800 (CST)

eth_getTransactionReceipt
eth_accounts
net_version
net_version
eth_sendTransaction

  Transaction: 0x3556ccc6ba7eaa2f97bb4db79273addaa750a3ae9af6971e6bb025c2a8d6faf5
  Contract created: 0xf99ecc99d9b836126a82e83ef7aeff39bd04a86f
  Gas usage: 247573
  Block Number: 3
  Block Time: Thu Mar 15 2018 13:27:38 GMT+0800 (CST)

eth_newBlockFilter
eth_getFilterChanges
eth_getTransactionReceipt
eth_getCode
eth_uninstallFilter
eth_sendTransaction

  Transaction: 0xefc70a4012af967884d3ebe9265e4cf4459ca128281c8633dca872f37a31d844
  Gas usage: 26981
  Block Number: 4
  Block Time: Thu Mar 15 2018 13:27:38 GMT+0800 (CST)

eth_getTransactionReceipt

现在输入以下命令启动 Truffle 控制台，这会帮助我们与ganache的区块链进行交互。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
truffle console --network development
truffle(development)> web3.eth.accounts
[ '0x40fd708c3739a1df595f938e74e395922b99e9ce',
  '0xb2ff4293f669add7226d2269d3fa71eff0c87cfb',
  '0xc3c6148af935b34d18af4661551b4a9bbe84efbc',
  '0xcdab2754c0b296548b5c18f2bcc0eab6ceb62918',
  '0xf8090d48ab83db3416fb97d7a1a9c40e2ab57c7b',
  '0xddac41dfbadb62395f3dfb68daab314732d028ed',
  '0x519910ffa60afc9bca81d03ef39b9b0428fcf2d6',
  '0x4742293a7fa1f33db49799c047f5a461a3f68ab0',
  '0x7394eae9417b874d61c9191397b159695febcd73',
  '0xe8c7d2e67cfc5a776448da8eedef659b3561d576' ]
truffle(development)> web3.getBalance(web3.eth.accounts[0])
TypeError: web3.getBalance is not a function
truffle(development)> web3.eth.getBalance(web3.eth.accounts[0])
BigNumber { s: 1, e: 19, c: [ 999413, 85800000000000 ] }
truffle(development)> web3.eth.getBalance(web3.eth.accounts[1])
BigNumber { s: 1, e: 20, c: [ 1000000 ] }
truffle(development)> web3.eth.getBalance(web3.eth.accounts[3])
BigNumber { s: 1, e: 20, c: [ 1000000 ] }
truffle(development)> 
truffle(development)> web3.eth.blockNumber
4

测试智能合约

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
pragma solidity ^0.4.17;

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 = this;
    address adopter = adoption.adopters(8);
    Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded.");
  }

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

Assert.sol 及 DeployedAddresses.sol是Truffle框架提供，在test目录下并不提供truffle目录。
TestAdoption合约中添加adopt的测试用例
运行测试用例
在终端中，执行

1
truffle test

如果测试通过，则终端输出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[guoqiang@masterhadoop five]$ truffle test
Using network 'development'.

Compiling ./contracts/Adoption.sol...
Compiling ./test/TestAdoption.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...


  TestAdoption
    ✓ testUserCanAdoptPet (59ms)
    ✓ testGetAdopterAddressByPetId (51ms)
    ✓ testGetAdopterAddressByPetIdInArray (60ms)


  3 passing (535ms)

[guoqiang@masterhadoop five]$

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

我们已经编写和部署及测试好了我们的合约，接下我们为合约编写UI，让合约真正可以用起来。

在Truffle Box pet-shop里，已经包含了应用的前端代码，代码在src/文件夹下。

在编辑器中打开src/js/app.js
可以看到用来管理整个应用的App对象，init函数加载宠物信息，就初始化web3.
web3是一个实现了与以太坊节点通信的库，我们利用web3来和合约进行交互。

初始化web3

接下来，我们来编辑app.js修改initWeb3():
删除注释，修改为：

1
2
3
4
5
6
7
8
9
10
11
12
initWeb3: function() {
  // 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:7545');
  }
  web3 = new Web3(App.web3Provider);

  return App.initContract();
}

initWeb3: function() {
代码中优先使用Mist 或 MetaMask提供的web3实例，如果没有则从本地环境创建一个。

实例化合约

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
initContract: function() {
  // 加载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();
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
markAdopted: function(adopters, account) {
  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()代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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);
    });
  });
}

在浏览器中运行

安装 MetaMask

MetaMask 是一款插件形式的以太坊轻客户端，开发过程中使用MetaMask和我们的dapp进行交互是个很好的选择，通过此链接安装，安装完成后，浏览器工具条会显示一个小狐狸图标。
配置钱包
在接受隐私说明后，
这里我们通过还原一个Ganache为我们创建好的钱包，作为我们的开发测试钱包。点击页面的 Import Existing DEN，输入Ganache显示的助记词。
candy maple cake sugar pudding cream honey rich smooth crumble sweet treat
然后自己想要的密码，点击OK。
连接开发区块链网络
默认连接的是以太坊主网（左上角显示），选择Custom RPC，添加一个网络：http://127.0.0.1:7545，点返回后，显示如下：
这是左上角显示为Private Network，账号是Ganache中默认的第一个账号。

至此MetaMask的安装，配置已经完成。

安装和配置lite-server

接下来需要本地的web 服务器提供服务的访问， Truffle Box pet-shop里提供了一个lite-server可以直接使用，我们看看它是如何工作的。
bs-config.json指示了lite-server的工作目录。

1
2
3
4
5
{
  "server": {
    "baseDir": ["./src", "./build/contracts"]
  }
}

./src 是网站文件目录
./build/contracts 是合约输出目录

以此同时，在package.json文件的scripts中添加了dev命令：

1
2
3
4
"scripts": {
  "dev": "lite-server",
  "test": "echo \"Error: no test specified\" && exit 1"
},

当运行npm run dev的时候，就会启动lite-server

启动服务

npm run dev
会自动打开浏览器显示我们的dapp。
现在领养一直宠物看看，当我们点击Adopt时，MetaMask会提示我们交易的确认，
点击Submit确认后，就可以看到成功领养了这次宠物。

在MetaMask中，也可以看到交易的清单：

总结，dapp步骤：

1，窗口1中，这个是区块链，ganache-cli -p 7545
2，窗口2中，编译和部署智能合约
truffle compile –compile-all
truffle migrate –network development
truffle test
3，npm run dev，浏览器打开，，http://xx.xx.xx.xx:3001
http://xx.xx.xx.xx:3000，这个是pet shop
4，在chrome浏览器中安装插件MetaMask，配置custom rpc,http://xx.xx.xx.xx:7545，然后import account
5,http://xx.xx.xx.xx:3000，操作购买
6,可以在窗口3中，truffle console，来直接链接ganache-cli创建的区块链，后台，来做相关操作

坚持原创技术分享，您的支持将鼓励我继续创作！