3、宠物商店智能合约实战（truffle智能合约项目实战）

1-宠物商店环境搭建、运行
2-webjs与宠物逻辑实现
3-领养智能合约初始化
4-宠物领养实现
5-更新宠物领养状态

1-宠物商店环境搭建、运行

https://www.trufflesuite.com/boxes/pet-shop

这个还是不行

在这里插入图片描述

或者在github下载相对应的项目

直接使用课件源码

在这里插入图片描述

执行前修改jQuery及端口等

在这里插入图片描述

基本修改已经完成

连接ganache的私有链，再编译部署

先打开ganache
在这里插入图片描述

truffle develop
truffle(develop)> compile

truffle(develop)> deploy

在这里插入图片描述

Npm run dev

在这里插入图片描述

后续对应按钮，一旦领养成功就存到区块链上

所有的客户端都能

唯一要分析的就是App.js

在这里插入图片描述

具体的一些逻辑分析没有记录，可以看视频

jQuery的解决方案，需要模板才能

另一个react解决的方案

2-webjs与宠物逻辑实现

实现领养功能，及用户点击领养时，用户与狗狗就建立关系，关系要存到合约并不能被篡改

点击领养按钮可以

谁调用此函数就获得当前调用者的地址，而且地址在合约中是唯一的

领养者的地址可以知道，但宠物如何获取

总共16个宠物，并且获得唯一编号
在这里插入图片描述

能否创建一个数组用来存储领养者与宠物的关联信息
在这里插入图片描述

领养的合约代码如下

pragma solidity ^0.5.0;

contract Adoption {
    // 创建一个固定数组,用来存储领养者与宠物的关联信息
    //宠物只能被领养一次，即一个宠物对应一个用户地址
    address[16] public adopters;   // storage

    // 完成宠物领养功能
    function adopt(uint petId) public returns (uint){
        // 判断当前petId的合法性
        require(petId >=0 && petId <=15);
        // 存储当前领养人的地址信息
        adopters[petId] = msg.sender;
        // 返回被领养的petID
        return petId;
    }

    // 返回已领养者的信息 (只读) view 只读  pure 不读写
    function getAdopters() public view returns (address[16] memory){
         return adopters;
    }
}

数组、结构体、映射都是引用类型
数据的存储位置，全局变量默认storyge是部署到合约中的

引用类型的话默认memory并且指定

可以尝试先在remix测试编译，编译成功后再在本地进行编译

类型相同之间赋值是指针间的
类型不同之间赋值是复制有副本的
在这里插入图片描述

initWeb3: async function() {
    /*
     * Replace me...
     */
     //如果web3不是undefined，说明上下文有web3对象，直接获取web3.currentProvider链
    if(typeof web3 !== 'undefined'){
       console.log('if......');
       App.web3Provider = web3.currentProvider;
    }else{
      //如果当前没有，则重新new个web3对象，链接到私有链
      console.log('else......');
      App.web3Provider = new Web3.providers.HttpProvider('http://127.0.0.1:7545')
      web3 = new Web3(App.web3Provider);  //创建一个web3对象
    }

    return App.initContract();
  },

在这里插入图片描述

Truffle develop

Deploy

未打开ganache，直接部署到开发者模式的私有链

Npm run dev

使用chrome浏览器，无metamask，可以直接运行，看控制台执行到哪里

在这里插入图片描述

3-领养智能合约初始化

接着上节课完成合约的初始化

第一步是创建web3对象，完成

合约的初始化，变量已经在前面设置了
在这里插入图片描述

写法不是很熟悉，典型的nodejs写法

Nodejs不仅仅是js的运行环境还是升级版

有案例

如果将变量设置为json格式{，后续可以任意的向json变量中添加键和值}（视频有讲解）

web3Provider保存的公有链或者私有链地址，同一时间只能有一个，默认空
Constracts为json对象，后续可能有多个合约

此种方式可存储

第二步，初始化合约

上一个代币项目要通过jQuery获取编译好的json格式，然后通过TruffleContract构建智能合约
在这里插入图片描述

获取合约是json文件，将对象data给第一个AdoptionArtifact

Js文件导入到了index.html中，越在后面的js就可以使用上一个js声明的变量
在这里插入图片描述

 initContract: function() {
    // jquery $.getJSON用来获取json格式的文件
    $.getJSON('Adoption.json', function(data) {
      // Get the necessary contract artifact file and instantiate it with truffle-contract.
      var AdoptionArtifact = data;
      // 获取json文件中的合约名词
      App.contracts.Adoption = TruffleContract(AdoptionArtifact);
      // 配置合约关联的私有链
      App.contracts.Adoption.setProvider(App.web3Provider);
      // Use our contract to retieve and mark the adopted pets.
      return App.markAdopted();
    });
    console.info('initContract......');
    return App.bindEvents();
  },

宠物领养有没有初始化的需求，有

如一个账户领养了一个宠物，另一个账户在另一个页面应该看到已有的狗已经被设置成领养状态了

哪些狗被领养了，领养的按钮就使用不了了

//初始化完毕显示当前哪些狗被领养

//标记宠物的领养状态


//实现了领养功能，大量使用了jQuery的功能
  // 实现了给页面领养按钮的事件绑定
  bindEvents: function() {
    // 给页面所有的领养按钮注册了click事件
    $(document).on('click', '.btn-adopt', App.handleAdopt);
  },

当全部的无钱包模式开发完成的完整运行如下
前面进行cmd的develop开发者模式部署合约等消耗第一个账户钱

我们在chrome浏览器打开，直接点击领养，会成功，内部已经消耗了gas
消耗的是默认的第一个账户

在这里插入图片描述

在控制台可以看到，查询余额明显变少了，所以前面的代币转账也是消耗的账户的gas

只是一切在内部发生，没有metamask，无法明显显示，若安装metamask就会是否确认转钱的

在这里插入图片描述

4-宠物领养实现

上节完成智能合约json文件加载，并设置私有链信息

又调用了一个领养按钮事件绑定

Class样式，

每个宠物有个adopt

  // 实现了给页面领养按钮的事件绑定
  bindEvents: function() {
    // 给页面所有的领养按钮注册了click事件
    $(document).on('click', '.btn-adopt', App.handleAdopt);
  },

点击那个按钮就获取那个按钮的对象

Data-id属性很好用
在这里插入图片描述

所以html4

Id属性

获取当前单机的按钮的宠物的id
在按钮事件中进行合约的实例化，以此调用合约函数
老版本的api和新版本的api差别很大

handleAdopt: function(event) {
    // 获取当前单击按钮对应宠物的id
    var petId = parseInt($(event.target).data('id'));
    console.info('宠物的ID为:' + petId);
    // 此变量用来存储实例化的合约
    var adoptionInstance;
    // 由于当前采用的是truffle 4.x + web3 0.x的版本,因此选择合适API查看
    web3.eth.getAccounts(function(error, accounts) {
      // 异步调用：
      if (error) {
        console.log(error);
      }
      // 拿到测试的第一个账户
      var account = accounts[0];
      console.info('account --->' + account);
      web3.eth.defaultAccount = account;
      // 通过合约名词实例化智能合约， 还可以通过ABI + address进行实例化
      App.contracts.Adoption.deployed().then(function(instance) {
        // 获取已经实例化的智能合约对象
        adoptionInstance = instance;
        return adoptionInstance.adopt(petId);
      }).then(function(result) {
        console.info('result --->' + result);
        // 调用标记宠物状态函数
        return App.markAdopted();
      }).catch(function(err) {
        console.log(err.message);
      });
    });
  }

};

领养成功才会标记宠物

注意部署时迁移文件的，判断合约是否全部被部署

在代码中获取了第一个账户的地址，是内部部署的

选择哪个账户部署合约或者调用

在目前没有钱包的时候使用默认第一个账户的，当未指定账户地址就使用
web3.eth.defaultAccount进行

当点击领养就会调用默认的地址

5-更新宠物领养状态

前面合约实例化和调用合约函数

给宠物设计标记避免重复领养

标记函数的调用合约函数前对合约实例化

在这里插入图片描述

地址总共40个长度

 // 标记宠物的领养状态
  markAdopted: function(adopters, account) {
     console.info('markAdopted......');
     var adoptionInstance;
     // 1: 根据宠物的状态来修改按钮
     App.contracts.Adoption.deployed().then(function(instance) {
       // 获取已经实例化的智能合约对象
       adoptionInstance = instance;
       // 返回 address[16] public adopters;
       return adoptionInstance.getAdopters();
     }).then(function(adopters) {	//adopters = adoptionInstance.getAdopters();
         console.log(adopters.length);
         for(i=0;i<adopters.length;i++){
            // 如果当前宠物被领养则地址不为 address(0x0)
            if(adopters[i]!='0x0000000000000000000000000000000000000000'){
                // 当前宠物已经被领养,通过jquery设置按钮状态为不可见
                $('.panel-pet').eq(i).find('button').text('success').attr('disabled',true);
            }
         }
     }).catch(function(err) {
       console.log(err.message);
     });
  },

如果当前交易量很大，很多交易会迟迟得不到处理
交易执行的函数
在这里插入图片描述