区块链(2)以太坊开发框架Truffle教程(Windows)

版权声明: https://blog.csdn.net/ShuSheng0007/article/details/79312300

区块链(1)开发环境搭建及Hello World合约展示
区块链(2)以太坊开发框架Truffle教程(Windows)
区块链(3):在以太坊私有链建立节点集群并发生交易

概述

上一篇博客介绍了如何搭建一个私有链的以太坊开发环境,并部署一个简单“hello world”智能合约到区块链上,详情请前往区块链开发环境搭建

本文进一步介绍区块链的一个主流开发框架Truffle

环境搭建

使用 Truffle需要三个东西,分别如下

  1. Nodejs :是一个基于google浏览器Chrome里面的JavaScript引擎(V8)的一个平台,可以很容易的构建快速而具有扩展性的网络程序。
  2. Truffle :以太坊开发框架
  3. Ganache CLI:是在本地使用内存模拟的一个以太坊环境,其基于Node.js,以前叫TestRPC在开发过程中使用。

Node 安装

前往Node.js官方网站下载相应的版本,一路next安装。安装完成后打开命令行窗口,输入node –v 来验证是否安装成功。输入npm –version 来确认node 包管理工具安装成功。npm 是node package manager的简称

Truffle 安装

Truffle使用npm来安装,如果node是使用installer安装的,系统应该已经将环境变量配置好了,所以在任何路径下都可以使用npm,如果发现不能使用则需要到相应的路径下去执行命令。
在命令行中输入npm –g install truffle 回车。

Ganache CLI 安装

Ganache CLI的安装仍然使用npm,在命令行中输入npm install -g ganache-cli 回车

完成以上三步则可以开始使用Truffle

接下来通过官方的一个示例来展示Truffle的具体开发流程

项目背景
一所狗狗收容所想利用区块链来跟踪被收养的狗狗

使用Truffle Box 创建一个Truffle 项目

Truffle Box 可以理解为Truffle 的项目模板

  1. 使用在命令行窗口新建文件夹pet-shop-tutorial并导航至其中

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

  2. 在命令行窗口中使用命令 truffle unbox pet-shop 来创建项目模板 pet-shop
    命令完成后就会在pet-shop-tutorial文件夹下面生成项目文件,如下图所示
    truffle project
    contracts/:存放智能合约文件。
    migrations/:存放部署智能合约相关的文件。
    test/:智能合约测试文件,测试文件可以使用JavaScript或者Solidity编写。
    truffle.js:Truffle的配置文件。如果你使用Windowscmd命令行的话,需要将文件名改为truffle-config.js之类的。

编写智能合约

contracts/目录下新建文件Adoption.sol

pragma solidity ^0.4.17;//告诉编译器使用大于0.4.17小于0.5版本的solidity语言
contract Adoption {
    address[16] public adopters;    
    // Adopting a pet
    function adopt(uint petId) public returns (uint) {
      require(petId >= 0 && petId <= 15);    
      adopters[petId] = msg.sender;    
      return petId;
    }

    // Retrieving the adopters
    function getAdopters() public view returns (address[16]) {
      return adopters;
    }
}

编译智能合约

由于名称冲突,如果你使用的是CMD命令行,则需要将根目录下的truffle.js文件重命名为truffle-config.js

truffle-config.js文件的内容为

module.exports = {
  // See <http://truffleframework.com/docs/advanced/configuration>
  // for more about customizing your Truffle configuration!
  networks: {
    development: {
      host: "127.0.0.1",
      port: 8545,
      network_id: "*" // Match any network id
    }
  }
};

在命令行中输入truffle compile 如果出现类似于下面的结果,说明编译成功了。

Compiling ./contracts/Migrations.sol...
Compiling ./contracts/Adoption.sol...
Writing artifacts to ./build/contracts

编译成功后,你会在项目的根目录下面发现多了一个build文件夹,里面存放的是智能合约编译后的结果。

部署智能合约

我们已经成功编译了我们的项目,现在需要将其部署到区块链中。

  1. 要将智能合约部署到区块链中去,自然需要一条区块链了。我们使用Truffle内置的Truffle Dev即可。
    导航到truffle-config.js所在目录,在cmd窗口中输入truffle dev,启动一条区块链,默认会生成10个账户,每个账户里有100个以太 坊。默认监听localhost:9545

    (我们也可以使用Ganache CLI。 在命令行中输入ganache-cli
    启动一条区块链,默认会生成10个账户,每个账户里有100个以太坊。默认监听localhost:8545)

  2. /migrations目录下新建一个文件2_deploy_contracts.js

    var Adoption = artifacts.require("Adoption");    
    module.exports = function(deployer) {
       deployer.deploy(Adoption);
    };
  3. 在命令行中输入truffle migrate,如果发现如下输出,则表示部署成功

    Using network 'development'.
    
    Running migration: 1_initial_migration.js   Deploying Migrations... 
    ...
    0xcc1a5aea7c0a8257ba3ae366b83af2d257d73a5772e84393b0576065bf24aedf  
    Migrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0 Saving
    successful migration to network...   ...
    0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956
    Saving artifacts... Running migration: 2_deploy_contracts.js  
    Deploying Adoption...   ...
    0x43b6a6888c90c38568d4f9ea494b9e2a22f55e506a8197938fb1bb6e5eaa5d34  
    Adoption: 0x345ca3e014aaf5dca488057592ee47305d9b3e10 Saving
    successful migration to network...   ...
    0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0
    

    至此,我们已经成功将智能合约部署到了测试用的区块链中,接下来就是测试区块链的正确性,以及与其交互的工作了。

测试智能合约

待续

创建UI界面与智能合约交互

本文以web的方式与智能合约交互,就是我们要创建一个网页,用来与区块链上的智能合约交互。

web3.js 是以太坊提供的一个Javascript库,它封装了以太坊的JSON RPC API,提供了一系列与区块链交互的Javascript对象和函数,包括查看网络状态,查看本地账户、查看交易和区块、发送交易、编译/部署智能合约、调用智能合约等,其中最重要的就是与智能合约交互的API。

进入/src/js目录下,修改app.js文件如下

1.安装web3

将函数initWeb3里面的注释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 = new
Web3(App.web3Provider);
```

2.安装合约

将函数initContract里面的注释Replace me...替换为如下代码

$.getJSON('Adoption.json', function(data) {
  // Get the necessary contract artifact file and instantiate it with truffle-contract
  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();
});

3.领养宠物

将函数markAdopted里面的注释Replace me...替换为如下代码

var adoptionInstance;
App.contracts.Adoption.deployed().then(function(instance) {
  adoptionInstance = instance;
  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里面的注释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;

    // Execute adopt as a transaction by sending account
    return adoptionInstance.adopt(petId, {from: account});
  }).then(function(result) {
    return App.markAdopted();
  }).catch(function(err) {
    console.log(err.message);
  });
});

经过以上步骤,我们的第一个DApp就开发完成了,是时候展示一下成果了。

在浏览器中使用dapp

在浏览器中使用dapp最简单的方式就安装一个叫MetaMask的插件,其支持ChromeFirefox

  1. Chrome中安装MetaMask 插件
  2. 在弹出的窗口中接受使用许可
  3. MetaMask主页中点击Import Existing DEN

    这里写图片描述

4.在Wallet Seed的输入框中输入
candy maple cake sugar pudding cream honey rich smooth crumble sweet treat
输入密码,确认即可。
这里写图片描述

5.将MetaMask 连接到我们使用Truffle Dev创建的区块链上去。点击MetaMask 左上角的下三角箭头,打开选择项,选择* Custom RPC*
后输入http://127.0.0.1:9545保存

使用dapp

  1. 启动本地server

    导航到truffle 根目录下面,在cmd窗口中输入npm run dev,本地dev server 将会启动,并使用默认浏览器打开我们的dapp。
    这里写图片描述

  2. 在其中一只要领养的宠物下面点击Adopt按钮。

  3. MetaMask会弹出要求你同意此次交易,点击Submit同意此次交易。

  4. 你会看到下面的按钮变成了Success,而且不可点击了,因为此宠物已经被领养了。如果按钮没有变化,就主动刷新一下网页。
    在MetaMask上面你可以看到此次交易。

至此,我们就完整的建立了自己的第一个DAPP了,我对web开发不是很熟悉,有机会还是要写一篇使用手机APP作为UI来与区块链交互的文章。

猜你喜欢

转载自blog.csdn.net/ShuSheng0007/article/details/79312300