美文网首页
Truffle宠物市场

Truffle宠物市场

作者: Jayden梅 | 来源:发表于2018-04-22 23:38 被阅读91次

    打造一个基于区块链的宠物销售市场

    1.安装Truffle模板

    • 安装truffle
    npm install -g truffle
    
    • 安装truffle模板

      我们选择安装pet-shop模板,它给我们提供了快捷的UI模板来打造我们的宠物市场。

    truffle unbox pet-shop
    
    • 安装轻服务器
    npm install lite-server --save-dev
    

    2.运行模板应用

    • 启动服务
    npm run dev
    

    服务将在3000端口启动,我们可以打开浏览器,http://localhost:3000/ 进入模板

    image.png

    但是这只是一个静态页面,前端工程,需要我们进行操作定义,方法的实现。

    3.填充程序

    pragma solidity ^0.4.17;
    
    contract DogMarket {
           
           //保存领养信息
           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;
           }
    }
    
    • 编译和部署合约

    启动测试网络 testrpc
    编译合约 truffle compile
    部署合约 truffle migrate

    • 编写Js代码

    初始化Web3

      initWeb3: function() {
        /// web3入口
          if (typeof web3 !== 'undefined') {
              App.web3Provider = web3.currentProvider;
          } else {
              // 测试网络
              App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545'); //这里是我指定的端口88
          }
          web3 = new Web3(App.web3Provider);
    
        return App.initContract();
      }
    

    这里我们连接至测试网络http://localhost:8545,即刚才启动的testrpc

    初始合约

    我们定义一个DogMarket对象,来标示我们的合约对象

    initContract: function() {
         //加载合约.json
          $.getJSON('DogMarket.json', function(data) {
              // 智能合约实例化
              var DogMarketArtifact = data;
              App.contracts.DogMarket = TruffleContract(DogMarketArtifact);
    
              // 设置合约提供者
              App.contracts.DogMarket.setProvider(App.web3Provider);
    
              // 检索操作
              return App.markAdopted();
          });
    
        return App.bindEvents();
      }
    

    定义markAdopted() 方法标记那些已经被领养了的宠物

    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();

    监听绑定事件

    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("领养宠物:"+petId);
                    return adoptionInstance.adoptDog(petId, {from: account});
                  }else{
                    console.log("你来晚了,宠物已经被"+user+"领养了");
                    return null;
                  }
            }).then(function(result) {
              console.log("befor ===> "+result);
                  return App.markAdopted();
              }).catch(function(err) {
                  console.log(err.message);
              });
          });
      }
    

    结果预览

    image.png

    途中我们点击Adop就会领养一只宠物,该宠物信息将和我们的地址绑定在一起,写入区块链网络,一个基于区块链技术的小应用就这么简单。当然这只是一小步,之后我们可以优化我们的UI,web3,合约等技术,来实现我们的虚拟数字宠物。

    相关文章

      网友评论

          本文标题:Truffle宠物市场

          本文链接:https://www.haomeiwen.com/subject/snkhlftx.html