打造一個基于區(qū)塊鏈的寵物銷售市場

1.安裝Truffle模板

• 安裝truffle

npm install -g truffle

• 安裝truffle模板

  我們選擇安裝pet-shop模板，它給我們提供了快捷的UI模板來打造我們的寵物市場。

truffle unbox pet-shop

• 安裝輕服務(wù)器

npm install lite-server --save-dev

2.運行模板應(yīng)用

• 啟動服務(wù)

npm run dev

服務(wù)將在3000端口啟動，我們可以打開瀏覽器，http://localhost:3000/ 進入模板

image.png

但是這只是一個靜態(tài)頁面，前端工程，需要我們進行操作定義，方法的實現(xiàn)。

3.填充程序

• 編寫合約
  可參考 http://www.itdecent.cn/p/51775527e858 實現(xiàn)合約的部署

pragma solidity ^0.4.17;

contract DogMarket {
       
       //保存領(lǐng)養(yǎng)信息
       address[16]  public adopters;

       
       function adoptDog(uint dogId) public returns(uint) {
               adopters[dogId] = msg.sender;
               return dogId;
       }

       function getAdoptUser(uint dogId) public returns(address) {
           return adopters[dogId];
       }

       function getAdopter() public returns(address[16]) {
               return adopters;
       }
}

• 編譯和部署合約

啟動測試網(wǎng)絡(luò) testrpc
編譯合約 truffle compile
部署合約 truffle migrate

• 編寫Js代碼

初始化Web3

  initWeb3: function() {
    /// web3入口
      if (typeof web3 !== 'undefined') {
          App.web3Provider = web3.currentProvider;
      } else {
          // 測試網(wǎng)絡(luò)
          App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545'); //這里是我指定的端口88
      }
      web3 = new Web3(App.web3Provider);

    return App.initContract();
  }

這里我們連接至測試網(wǎng)絡(luò)http://localhost:8545，即剛才啟動的testrpc

初始合約

我們定義一個DogMarket對象，來標(biāo)示我們的合約對象

initContract: function() {
     //加載合約.json
      $.getJSON('DogMarket.json', function(data) {
          // 智能合約實例化
          var DogMarketArtifact = data;
          App.contracts.DogMarket = TruffleContract(DogMarketArtifact);

          // 設(shè)置合約提供者
          App.contracts.DogMarket.setProvider(App.web3Provider);

          // 檢索操作
          return App.markAdopted();
      });

    return App.bindEvents();
  }

定義markAdopted() 方法標(biāo)記那些已經(jīng)被領(lǐng)養(yǎng)了的寵物

markAdopted: function(adopters, account) {
     //實例
     var adoptionInstance;

     App.contracts.DogMarket.deployed().then(function(instance) {
         adoptionInstance = instance;
          console.log(adoptionInstance);
          return adoptionInstance.getAdopter.call();
     }).then(function(adopters) {
         adopters.forEach(function(val,index,arr){
           console.log(val +"=>>>>> "+ index);
                         if( null != val&& val !="0x0000000000000000000000000000000000000000"){
                            $('.panel-pet').eq(index).find('button').text('Success').attr('disabled', true);
              }
         });
     }).catch(function(err) {
         console.log(err.message);
     });
  },

定義點擊事件App.bindEvents();

監(jiān)聽綁定事件

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.DogMarket.deployed().then(function(instance) {
              adoptionInstance = instance;
              // Execute adopt as a transaction by sending account
              console.log("petId =>>>"+petId);
              var user = adoptionInstance.getAdoptUser(petId, {from: account});
              console.log("user =>>>"+user);
              return user;
          }).then(function(user) {
            console.log("user =>>>>" +user);
            if(null == user || user == "0x0000000000000000000000000000000000000000")
              {
                console.log("領(lǐng)養(yǎng)寵物："+petId);
                return adoptionInstance.adoptDog(petId, {from: account});
              }else{
                console.log("你來晚了，寵物已經(jīng)被"+user+"領(lǐng)養(yǎng)了");
                return null;
              }
        }).then(function(result) {
          console.log("befor ===> "+result);
              return App.markAdopted();
          }).catch(function(err) {
              console.log(err.message);
          });
      });
  }

結(jié)果預(yù)覽

image.png

途中我們點擊Adop就會領(lǐng)養(yǎng)一只寵物，該寵物信息將和我們的地址綁定在一起，寫入?yún)^(qū)塊鏈網(wǎng)絡(luò)，一個基于區(qū)塊鏈技術(shù)的小應(yīng)用就這么簡單。當(dāng)然這只是一小步，之后我們可以優(yōu)化我們的UI，web3，合約等技術(shù)，來實現(xiàn)我們的虛擬數(shù)字寵物。