创建一个DAPP的全流程
写在前面
- 对以太坊、智能合约有所了解。
- 有一些编程基础，看得懂简单的代码逻辑和HTML。
环境安装
首先，我们要安装项目代码的运行环境
1.Node 安装
进入Node官网：Download | Node.js ，下载适合你电脑的版本。
2.Truffle安装
安装完Node之后，使用命令行输入下面的命令
npm install -g truffle
安装完成后，输入命令 truffle version 显示下方信息就说明环境安装完成了。
3.安装Ganache
进入Ganache官网：Ganache - Truffle Suite ，下载适合你电脑的版本。
下载项目模板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钱包安装教程：CHAINPIP
安装完成后，我们要配置私链信息和导入钱包账户。
- 配置私链信息
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就部署完成了，想要了解更多的区块链知识或是有什么相关的问题和想法，可以来我的交流社区CHAINPIP提出来，欢迎你的到来哦。
创建一个DAPP的全流程相关推荐
- 基于 Spring Boot 2.x 使用 Activiti 创建一个简易的请假流程
文章目录 1 摘要 2 准备工作 3 请假流程图 3 核心代码 3.1 数据库表 3.2 流程管理工具类 3.3 流程的使用 4 推荐参考资料 5 Github 源码 1 摘要 工作流是需 ...
- 电信物联网平台SOTA升级（软件升级）的全流程说明
中国电信物联网开放平台(以下简称"平台")提供了基于LWM2M的固件升级功能,用于模组的固件升级.但是由于多数模组并未提供升级接口给MCU,所以MCU升级只能基于应用层来实现升 ...
- 教程干货——零基础创建简单的在线审批流程
简介:[零起点入门系列教程]将会带给大家从业务视角出发由浅入深地学习用宜搭实现应用搭建.即便是没有任何代码基础的新手只要跟着系列课程,从0开始慢慢修炼,也能找到成功搭建应用的乐趣.今天第三讲,分步教学 ...
- Blender2.9全流程创建逼真未来科幻蝙蝠汽车视频教程
Blender2.9全流程创建逼真未来科幻蝙蝠汽车视频教程 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2通道 含课程工程素材 体裁:在线学习|语言:英语+中文字幕( ...
- 【blender教程】从头到尾全流程创建一辆吉普车
[blender教程]从头到尾全流程创建一辆吉普车 持续时间41小时 30分 包括项目文件 1280X720 MP4 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕 大小解压后:34.7 ...
- 【Heritrix基础教程之4】开始一个爬虫抓取的全流程代码分析
在创建一个job后,就要开始job的运行,运行的全流程如下: 1.在界面上启动job 2.index.jsp 查看上述页面对应的源代码 <a href='"+request.getCo ...
- 一个方案搞定从模型量化到端侧部署全流程
量化的背景 得益于海量数据.超强算力和最新技术,深度学习在视觉.自然语言处理等领域都取得了巨大成功.然而,深度学习模型的网络结构越来越复杂.参数越来越多.计算量越来越大,给模型部署应用带来了不小挑战, ...
- 一个模型就2000？次世代PBR游戏枪械道具建模全流程，学到就是赚到
此次为大家带来的是一篇用3ds Max&SP来做游戏次时代枪械道具的全流程,具体使用到了3ds Max 2018,Zbrush,SubstancePainter,MarmosetToolbag ...
- Bitcoin.com开发人员正创建一个用Rust语言编写的BCH全节点
近日,Bitcoin.com开发人员Gabriel Cardona在推特表示,自己正创建一个用Rust语言编写的BCH全节点,目的是为了改变完整节点的范式,让BCH代码库更加安全.编程人员技术贡献更加 ...
最新文章
- python print 换行_Python小课堂第21课：规整一下我们的输出之打印格式化与字符串...
- C#——Ellipse（椭圆）类[继承Circle（圆）类][实现IComparable接口、IComparerrT接口]DEMO
- 可视化动画：数据结构和算法
- 将mp3格式的音频转换为采样率8k的wav
- INVENTOR结构件生成器，新建型材
- php商店管理系统,基于PHP的商店管理系统.doc
- 微软输入法数字有间隔_各种中文输入法中输入间隔号“·”的措施
- Win 批处理生成文件目录树
- Netstat -tln 命令是Linux查看端口使用情况
- 数据库04—约束条件
- 计算机系统怎么装到u盘启动不了,电脑开机就进入BIOS界面,设置了u盘启动准备从装系统但是进不了U盘,这些是为什么啊?...
- Power BI Power Query页面使用python进行数据处理
- 蚁群优化算法（ACO）详细介绍
- 计算机专业英语博士就业情况,北京外国语大学博士就业前景怎么样
- escape()与unescape()
- SOD-MTGAN: Small Object Detection via Multi-Task Generative Adversarial Network
- 22年前雷军写的代码，你见过吗？
- 贸易顺差与人民币升值的关系
- 学好ps应该怎么做？这几点你必须知道
- 用计算机求解问题一般包括两个步骤,计算机问题求解过程包括哪些步骤