创建一个DAPP的全流程写在前面 1. 昨天那篇创建Dapp的过程是不是太简单了，利用CHAINPIP社区进行发布代币，

写在前面

1. 昨天那篇创建Dapp的过程是不是太简单了，利用CHAINPIP社区进行发布代币，创建Dapp，感觉和程序员没啥关系，就点点就完事了，不写代码算啥子程序员啊。

2. 那么今天我就照着官方给的方法来一波吧。

3. 前提：对以太坊、智能合约有所了解，有一些JavaScript编程基础，看得懂简单的代码逻辑和HTML。

环境安装

首先，我们要安装项目代码的运行环境

1. Node 安装

进入Node官网：nodejs.org/en/download… ，下载适合你电脑的版本。

2. Truffle安装

安装完Node之后，使用命令行输入下面的命令

npm install -g truffle

安装完成后，输入命令 truffle version 显示下方信息就说明环境安装完成了。

3. 安装Ganache

进入Ganache官网：trufflesuite.com/ganache/ ，下载适合你电脑的版本。

下载项目模板pet-shop

接下来就是下载truffle提供的项目模板。

项目介绍：Pete有一个宠物店，有16只宠物，他想开发一个去中心化应用，让大家来领养宠物。

在truffle box中，已经提供了pet-shop的网站部分的代码，我们只需要编写合约及交互部分。

新建一个空文件夹，使用命令行进入其中，输入下载命令：

truffle unbox pet-shop

下载完成

添加合约和部署代码

使用代码编辑软件打开项目（我用的是vscode），下面是文件截图

1. 添加Adoption合约

在contracts文件夹下，新建Adoption.sol文件，输入以下代码：

pragma solidity ^0.5.0;
contract Adoption {
    address[16] public adopters;
    
    function adopt(uint256 petId) public returns (uint256) {
        require(petId >= 0 && petId <= 15);         
        adopters[petId] = msg.sender;
        return petId;
    }

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

2. 添加部署合约文件

在migrations文件夹下，新建adoption.js文件，输入以下代码：

var Adoption = artifacts.require("./Adoption.sol");
module.exports = function (deployer) {
  deployer.deploy(Adoption);
};

编译、部署合约

打开Ganche，点击第一个“QUICKSTART”，Ganche会自动开启一条本地私链，并提供10个钱包地址。

打开控制台（终端），开始编译部署合约：

编译命令：truffle compile

编译完成会生成build文件夹。

部署命令：truffle migrate

部署完成，合约就上到本地的私链上了。

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

我们已经编写和部署及测试好了我们的合约，接下我们要编写项目中的交互逻辑代码（就是前端部分）。

打开src/js/app.js文件，修改下面函数：


initWeb3: async function () {

    // Modern dapp browsers...

    if (window.ethereum) {

      App.web3Provider = window.ethereum;

      try {

        // Request account access

        await window.ethereum.enable();

      } catch (error) {

        // User denied account access...

        console.error("User denied account access");

      }

    }

    // Legacy dapp browsers...

    else if (window.web3) {

      App.web3Provider = window.web3.currentProvider;

    }

    // If no injected web3 instance is detected, fall back to Ganache

    else {

      App.web3Provider = new Web3.providers.HttpProvider("http://localhost:7545");

    }

    web3 = new Web3(App.web3Provider);
    return App.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();

  },

 

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;

          return adoptionInstance.adopt(petId, { from: account });

        })

        .then(function (result) {

          return App.markAdopted();

        })

        .catch(function (err) {

          console.log(err.message);

        });

    });

  },

};