以太坊开发教程(二) 利用truffle发布宠物商店 DAPP 到 以太坊测试环境Ropsten

 

1.环境安装  

 1) node安装

设置镜像地址:  curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -
下载安装
yum -y install nodejs
node -v 查看版本:
以太坊开发教程(二) 利用truffle发布宠物商店 DAPP 到 以太坊测试环境Ropsten

2)安装truffle  

$npm install -g truffle

3)安装python

npm install python

2.创建truffle项目

我的项目安装在 /usr/local下、

所以分别执行下面三个命令:  1)cd /usr/local

     2)mkdir pet_test  //创建项目文件地址

 

           3) truffle 帮我们打包了一些常用的经典示例,放在box中, 这个是我们用到的pet_shop的地址:https://truffleframework.com/boxes/pet-shop

    执行: truffle unbox pet-shop

这个命令会自动帮我们初始化 truffle init,然后创建前端的文件夹。

介绍一下truffle的文件架构:

  • contracts/ : 智能合约文件存在这里,后缀.sol (solidity)

  • migrations/ : 部署脚本

  • test/ : 测试脚本

  • truffle.js :truffle的配置文件

编写智能合约:

在 contracts/ 目录下创建 Adoption.sol 文件,内容如下:

 

pragma solidity ^0.4.17;

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;
   }

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

编写前端:

用户界面(UI)是前端工作,这里用的javascript。主要文件是app.js,存在目录 /src/js/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() {
   // 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();
 },

 initContract: function() {
   $.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();
});

   return App.bindEvents();
 },

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

 markAdopted: function(adopters, account) {
   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: 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;

   // 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);
 });
});
 }

};

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

 

到这里 整个项目的前端和合约部分都完成了。下面讲述如何编译部署合约和如何启动前端应用。


编译部署合约

1.首先执行 truffle compile

 

以太坊开发教程(二) 利用truffle发布宠物商店 DAPP 到 以太坊测试环境Ropsten

上一篇:Android 内存管理中的 Shallow heap Retained heap


下一篇:【Mac + Appium学习(四)】之常用的IOS自动化测试API总结