以太坊：Truffle开发第一个DAPP应用

Posted 2021-02-27 市井俗人

1.创建项目

mkdir pet-shop
cd pet-shop
truffle unbox pet-shop

2.编写智能合约

在contracts目录下，添加合约文件Adoption.sol

pragma solidity >=0.4.25 <0.7.0;

contract Adoption {

  address[16] public adopters;  // 保存领养者的地址

    // 领养宠物
  function adopt(uint petId) public returns (uint) {
    require(petId >= 0 && petId <= 15);  // 确保id在数组长度内

    adopters[petId] = msg.sender;        // 保存调用这地址 
    return petId;
  }

  // 返回领养者
  function getAdopters()  public view returns (address[16] memory) {
    return adopters;
  }

}

在test下部署脚本2_deploy_contracts.js

var Adoption = artifacts.require("Adoption");

module.exports = function(deployer) {
  deployer.deploy(Adoption);
};

3.编译部署

启动Geth

这里不再复述，可以看之前的文章

编译

truffle compile

 修改配置文件truffle-config.js

 加gas这个配置的原因，可以参考上一篇博客。

 部署

truffle migrate

 测试

truffle test

4.创建用户接口和智能合约交互

初始化web3

修改src/js/app.js中的initWeb3()部分

initWeb3: function() {
    if (typeof web3 !== \'undefined\') {
      App.web3Provider = web3.currentProvider;
    } else {
      App.web3Provider = new Web3.providers.HttpProvider(\'http://localhost:8545\');
    }
    web3 = new Web3(App.web3Provider);

    return App.initContract();
}

实例化合约

修改src/js/app.js中的initContract()部分

initContract: function() {
    $.getJSON(\'Adoption.json\', function(data) {
      var AdoptionArtifact = data;
      App.contracts.Adoption = TruffleContract(AdoptionArtifact);
    
      App.contracts.Adoption.setProvider(App.web3Provider);
    
      return App.markAdopted();
    });

    return App.bindEvents();
},

处理领养

修改src/js/app.js中的markAdopted()部分

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

修改src/js/app.js中的handleAdopt()部分

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;

        return adoptionInstance.adopt(petId, {from: account});
      }).then(function(result) {
        return App.markAdopted();
      }).catch(function(err) {
        console.log(err.message);
      });
    });
}

修改Jquery引用

src\\index.html文件引用jquery的地址

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

5.启动lite-service

npm run dev

6.使用MetaMask连接Geth

修改Geth启动命令

geth --datadir ./db/dev/ --dev --rpc --rpcaddr 0.0.0.0 console 2>>output.log

主要是这里的--rpc --rpcaddr 0.0.0.0，可以使本地连接上服务器的Geth

MetaMask连接Geth

启动metamask，选择网络，选择自定义RPC

 输入服务器ip等信息

配置完成后，就可以连接成功了。

下载keystore

将账户信息下载到本地，keystore里的文件都是json。

 导入账户

点击账户，点击导入账户

选择类型：JSON文件，选择keystore的文件，在下方输入创建账户时的密码，点击导入，即可完成账户导入

 

 这里我们就可以看到账户的一些信息了。

7.领养宠物

在浏览器输入 ip:3000，即可看到我们的Dapp

 点击Adopt