创建一个DAPP的全流程

写在前面1. 对以太坊、智能合约有所了解。2. 有一些编程基础，看得懂简单的代码逻辑和HTML。  

环境安装首先，我们要安装项目代码的运行环境1. Node 安装进入Node官网：https://nodejs.org/en/download/ ，下载适合你电脑的版本。 2. Truffle安装安装完Node之后，使用命令行输入下面的命令npm install -g truffle安装完成后，输入命令 truffle version 显示下方信息就说明环境安装完成了。3. 安装Ganache进入Ganache官网：https://trufflesuite.com/gana... ，下载适合你电脑的版本。  

下载项目模板pet-shop接下来就是下载truffle提供的项目模板。项目介绍：Pete有一个宠物店，有16只宠物，他想开发一个去中心化应用，让大家来领养宠物。在truffle box中，已经提供了pet-shop的网站部分的代码，我们只需要编写合约及交互部分。新建一个空文件夹，使用命令行进入其中，输入下载命令：truffle unbox pet-shop下载完成

添加合约和部署代码使用代码编辑软件打开项目（我用的是vscode），下面是文件截图

1. 添加Adoption合约

1. 在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);        });    });  },};  

配置私链信息和导入钱包账户编写完交互逻辑，现在我们要让项目跑起来。首先，我们要安装钱包插件，推荐使用chorme浏览器的metamask钱包插件，这是metamask钱包安装教程：https://www.chainpip.com/arti...安装完成后，我们要配置私链信息和导入钱包账户。1. 配置私链信息 Network Name：私链名称，随便设置New RPC URL：这是私链的交互接口，填Ganache顶部的RPC SERVER的值Chain ID：这是Ganache私链的ID，默认是1337Currency Symbol：主币的符号，就填ETH，方便学习 点击Save保存网络 2. 导入钱包账户在Ganache中，左侧有个钥匙符号，点击它，弹出账户私钥（PRIVATE KEY）信息，复制私钥。 打开钱包，点击头像，选择下方的“Import Account”  将之前复制的私钥粘贴到输入框中，点击Import，这样就完成账户导入了。  测试DAPP接下来就可以测试DAPP了，在vscode终端输入命令：npm run dev项目就运行起来了。 接下来，连接刚刚导入的钱包账户 测试领养功能，点击Adopt，确认上链请求，领养完成，显示Success。  最后这样一个DAPP就部署完成了，想要了解更多的区块链知识或是有什么相关的问题和想法，可以来我的交流社区CHAINPIP提出来，欢迎你的到来哦。