创建一个DAPP的全流程创建一个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），下面是文件截图

文章图片

【创建一个DAPP的全流程】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 accessawait 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. 配置私链信息