创建一个DAPP的全流程
原创
写在前面
- 昨天那篇创建Dapp的过程是不是太简单了，利用CHAINPIP社区进行发布代币，创建Dapp，感觉和程序员没啥关系，就点点就完事了，不写代码算啥子程序员啊。
- 那么今天我就照着官方给的方法来一波吧。
- 前提：对以太坊、智能合约有所了解，有一些JavaScript编程基础，看得懂简单的代码逻辑和HTML。
环境安装
首先，我们要安装项目代码的运行环境
- Node 安装 进入Node官网：https://nodejs.org/en/download/ ，下载适合你电脑的版本。
- Truffle安装 安装完Node之后，使用命令行输入下面的命令 npm install -g truffle 安装完成后，输入命令 truffle version 显示下方信息就说明环境安装完成了。
3. 安装Ganache 进入Ganache官网：https://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);
});
});
},
};
配置私链信息和导入钱包账户
编写完交互逻辑，现在我们要让项目跑起来。
首先，我们要安装钱包插件，推荐使用chorme浏览器的metamask钱包插件，这是metamask钱包安装教程：https://www.chainpip.com/dynamic/4
安装完成后，我们要配置私链信息和导入钱包账户。
1. 配置私链信息
Network Name：私链名称，随便设置 New RPC URL：这是私链的交互接口，填Ganache顶部的RPC SERVER的值 Chain ID：这是Ganache私链的ID，默认是1337 Currency Symbol：主币的符号，就填ETH，方便学习
点击Save保存网络
2. 导入钱包账户 在Ganache中，左侧有个钥匙符号，点击它，弹出账户私钥（PRIVATE KEY）信息，复制私钥。
打开钱包，点击头像，选择下方的“Import Account”
将之前复制的私钥粘贴到输入框中，点击Import，这样就完成账户导入了。
测试DAPP
接下来就可以测试DAPP了，在vscode终端输入命令：npm run dev 项目就运行起来了。
接下来，连接刚刚导入的钱包账户
测试领养功能，点击Adopt，确认上链请求，领养完成，显示Success。
最后
这样一个DAPP就部署完成了，有点程序员的感觉没？
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。