以太坊开发------使用Truffle打造去中心化的宠物商店
pet-shop Box项目地址:http://truffleframework.com/boxes/pet-shop
pet-shop Box官方教程:http://truffleframework.com/tutorials/pet-shop
本文在原文基于Truffle Box中的pet-shop Box代码,使用图形化的Ganache以及插件形式的以太坊轻客户端MetaMask,编写一个去中心化的宠物商店的基础上,加入了在实际操作过程中解决遇到的问题。例如页面无法正常显示的问题。
项目背景
Pete有一个宠物店,有16只宠物,他想开发一个去中心化应用,让大家来领养宠物。
在truffle box中,已经提供了pet-shop的网站部分的代码,我们只需要编写合约及交互部分。
环境搭建
- 安装Node
- 安装 Truffle
第1,2步骤请查看区块链开发(一)Truffle入门指南 - 安装Ganache
创建项目
- 建立项目目录并进入
yuyangdeMacBook-Pro:~ yuyang$ mkdir pet-shop-tutorial
yuyangdeMacBook-Pro:~ yuyang$ cd pet-shop-tutorial
- 使用truffle unbox 创建项目
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle unbox pet-shop
这一步需要等待一会。
也可以使用truffle init
来创建一个全新的项目。
项目目录结构
contracts/ 智能合约的文件夹,所有的智能合约文件都放置在这里,里面包含一个重要的合约Migrations.sol(稍后再讲)。
migrations/ 用来处理部署(迁移)智能合约 ,迁移是一个额外特别的合约用来保存合约的变化。
test/ 智能合约测试用例文件夹。
truffle.js/ 配置文件。
其他代码可以暂时不用管。
编写智能合约
智能合约承担着分布式应用的后台逻辑和存储。智能合约使用solidity
编写。
在contracts
目录下,添加合约文件Adoption.sol
pragma solidity ^0.4.17;contract Adoption {address[16] public adopters; // 保存领养者的地址// 领养宠物function adopt(uint petId) public returns (uint) {require(petId >= 0 && petId <= 15); // 确保id在数组长度内adopters[petId] = msg.sender; // 保存调用这地址 return petId;}// 返回领养者function getAdopters() public view returns (address[16]) {return adopters;}
}
编译部署智能合约
Truffle
集成了一个开发者控制台,可用来生成一个开发链用来测试和部署智能合约。
编译
Solidity
是编译型语言,需要把可读的Solidity
代码编译为EVM
字节码才能运行。
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle compile
输出
Compiling ./contracts/Migrations.sol...
Compiling ./contracts/Adoption.sol...
Writing artifacts to ./build/contracts
部署
编译之后,就可以部署到区块链上。
在migrations
文件夹下已经有一个1_initial_migration.js
部署脚本,用来部署Migrations.sol
合约。
Migrations.sol
用来确保不会部署相同的合约。
现在我们来创建一个自己的部署脚本2_deploy_contracts.js
var Adoption = artifacts.require("Adoption");module.exports = function(deployer) {deployer.deploy(Adoption);
};
在执行部署之前,需要确保有一个区块链运行, 可以使用
Ganache来开启一个私链来进行开发测试,默认会在7545
端口上运行一个开发链。
Ganache 启动之后是这样:
接下来执行部署命令:
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle migrate
执行后,有以下类似的输出:
Using network 'development'.Running migration: 1_initial_migration.jsDeploying Migrations...... 0x3f72ba590249446eea8e90d124450b341fe58505b6976c0ab334cb413b64257bMigrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0
Saving successful migration to network...... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956
Saving artifacts...
Running migration: 2_deploy_contracts.jsDeploying Adoption...... 0xe85b10cb23f3e026b5252a8666393c074ad3f32d1e66f2d42eca034f5bfb1cc4Adoption: 0x345ca3e014aaf5dca488057592ee47305d9b3e10
Saving successful migration to network...... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0
Saving artifacts...
在打开的Ganache
里可以看到区块链状态的变化,现在产生了4
个区块。
这时说明已经智能合约已经部署好了。
测试
现在我们来测试一下智能合约,测试用例可以用 JavaScript
or Solidity
来编写,这里使用Solidity
。
在test
目录下新建一个TestAdoption.sol
,编写测试合约。
pragma solidity ^0.4.17;import "truffle/Assert.sol"; // 引入的断言
import "truffle/DeployedAddresses.sol"; // 用来获取被测试合约的地址
import "../contracts/Adoption.sol"; // 被测试合约contract TestAdoption {Adoption adoption = Adoption(DeployedAddresses.Adoption());// 领养测试用例function testUserCanAdoptPet() public {uint returnedId = adoption.adopt(8);uint expected = 8;Assert.equal(returnedId, expected, "Adoption of pet ID 8 should be recorded.");}// 宠物所有者测试用例function testGetAdopterAddressByPetId() public {// 期望领养者的地址就是本合约地址,因为交易是由测试合约发起交易,address expected = this;address adopter = adoption.adopters(8);Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded.");}// 测试所有领养者function testGetAdopterAddressByPetIdInArray() public {// 领养者的地址就是本合约地址address expected = this;address[16] memory adopters = adoption.getAdopters();Assert.equal(adopters[8], expected, "Owner of pet ID 8 should be recorded.");}
}
Assert.sol
及 DeployedAddresses.sol
是Truffle
框架提供,在test
目录下并不提供truffle
目录。
TestAdoption
合约中添加adopt
的测试用例。
运行测试用例
在终端中,执行:
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ truffle test
如果测试通过,则终端输出:
Using network 'development'.Compiling ./contracts/Adoption.sol...
Compiling ./test/TestAdoption.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...TestAdoption✓ testUserCanAdoptPet (62ms)✓ testGetAdopterAddressByPetId (43ms)✓ testGetAdopterAddressByPetIdInArray (119ms)3 passing (539ms)
创建用户接口和智能合约交互
我们已经编写和部署及测试好了我们的合约,接下我们为合约编写UI,让合约真正可以用起来。
在Truffle Box pet-shop
里,已经包含了应用的前端代码,代码在src/
文件夹下。
在编辑器中打开src/js/app.js
可以看到用来管理整个应用的App对象,init函数加载宠物信息,就初始化web3。
web3是一个实现了与以太坊节点通信的库,我们利用web3来和合约进行交互。
初始化web3
接下来,我们来编辑app.js修改initWeb3()
:
删除注释,修改为:
initWeb3: function() {// Is there an injected web3 instance?if (typeof web3 !== 'undefined') {App.web3Provider = web3.currentProvider;} else {// If no injected web3 instance is detected, fall back to GanacheApp.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');}web3 = new Web3(App.web3Provider);return App.initContract();
}
代码中优先使用Mist 或 MetaMask提供的web3实例,如果没有则从本地环境创建一个。
实例化合约
使用truffle-contract会帮我们保存合约部署的信息,就不需要我们手动修改合约地址,修改initContract()
代码如下:
initContract: function() {// 加载Adoption.json,保存了Adoption的ABI(接口说明)信息及部署后的网络(地址)信息,它在编译合约的时候生成ABI,在部署的时候追加网络信息$.getJSON('Adoption.json', function(data) {// 用Adoption.json数据创建一个可交互的TruffleContract合约实例。var AdoptionArtifact = data;App.contracts.Adoption = TruffleContract(AdoptionArtifact);// Set the provider for our contractApp.contracts.Adoption.setProvider(App.web3Provider);// Use our contract to retrieve and mark the adopted petsreturn App.markAdopted();});return App.bindEvents();
}
处理领养
修改markAdopted()
代码:
markAdopted: function(adopters, account) {var adoptionInstance;App.contracts.Adoption.deployed().then(function(instance) {adoptionInstance = instance;// 调用合约的getAdopters(), 用call读取信息不用消耗gasreturn 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()
代码:
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);});});
}
在浏览器中运行
安装 MetaMask
MetaMask 是一款插件形式的以太坊轻客户端,开发过程中使用MetaMask和我们的dapp进行交互是个很好的选择,通过此链接安装,安装完成后,浏览器工具条会显示一个小狐狸图标。
配置钱包
在接受隐私说明后,会出现页面如下:
这里我们通过还原一个Ganache为我们创建好的钱包,作为我们的开发测试钱包。点击页面的 Import Existing DEN
,输入Ganache显示的助记词。
candy maple cake sugar pudding cream honey rich smooth crumble sweet treat
连接开发区块链网络
默认连接的是以太坊主网(左上角显示),选择Custom RPC
,添加一个网络:http://127.0.0.1:7545
,点返回后,显示如下:
这时左上角显示为Private Network
,账号是Ganache中默认的第一个账号。
至此MetaMask的安装,配置已经完成。
安装和配置lite-server
接下来需要本地的web 服务器提供服务的访问, Truffle Box pet-shop
里提供了一个lite-server
可以直接使用,我们看看它是如何工作的。
bs-config.json
指示了lite-server
的工作目录。
{"server": {"baseDir": ["./src", "./build/contracts"]}
}
./src
是网站文件目录
./build/contracts
是合约输出目录
以此同时,在package.json
文件的scripts
中添加了dev
命令:
"scripts": {"dev": "lite-server","test": "echo \"Error: no test specified\" && exit 1"
},
当运行npm run dev
的时候,就会启动lite-server
启动服务
yuyangdeMacBook-Pro:pet-shop-tutorial yuyang$ npm run dev
会自动打开浏览器显示我们的dapp。
注:这里可能会遇到页面无法正常显示的问题,例如只显示Pete's Pet Shop标题,而不显示内容。原因在于
src/index.html
引用了Google的jQuery文件被墙:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
解决方法有三种:
- 翻墙。
- 使用百度的库文件地址替换。
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script>`。
- 下载jQuery文件放在
src/js/
下,然后修改index.html
文件。
<script src="js/jquery-2.1.0.min.js"></script>
现在领养一直宠物看看,当我们点击Adopt
时,MetaMask会提示我们交易的确认,如图:
点击Submit
确认后,就可以看到成功领养了这次宠物。
在MetaMask中,也可以看到交易的清单:
专业承接虚拟币一切相关业务,如开发代币,撰写白皮书,搭建官网,上交易所等,咨询方式:15830024981(手机微信同步)
以太坊开发------使用Truffle打造去中心化的宠物商店相关推荐
- 3步! 老司机教你如何在以太坊上构建基于Token去中心化投票系统!
作者 | Doug Crescenzi 译者 | 王柯凝 出品 | CSDN.区块链大本营 如果想在以太坊平台上构建一个去中心化的自治系统,其实有很多种不同的方法可供你选择.其中,最常用的方法之一就是 ...
- 以太坊V神大著:去中心化社会:寻找Web3的灵魂
通过Web 3的区块来标注各自的社会身份及生态系统可摆脱现有体制的束缚去呈现一个"去中心化"的社会. Web 3这个概念在不到10年的时间内就打造了一个震惊了世界,前所未有的极具灵 ...
- 去中心化 去区块链_使用JavaScript和坚固性在以太坊区块链上构建去中心化应用程序dapp...
去中心化 去区块链 In this blog, I build a decentralized application, also known as a "dapp". While ...
- 搭建一个国内高可用的IPFS网关节点,低价打造去中心化无限存储节点
前言 首先介绍一下IPFS(InterPlanetary File System)中文称为星际文件系统,是一个旨在实现文件的分布式存储.共享和持久化的网络传输协议. IPFS是WEB 3.0时代的基石 ...
- 以太坊学习路线——(五)DApp开发:简易版去中心化微博
这篇博客演示的基本操作系统环境是CentOS 7,参考书籍:以太坊开发实战--以太坊关键技术与案例分析 第十一章(吴寿鹤.冯翔.刘涛.周广益 著). 项目地址,包含该项目所需大部分文件,前端因为依 ...
- 精通以太坊:开发智能合约和去中心化应用
为什么微软.纳斯达克以及其他数百个组织都在尝试以太坊? 因为以太坊打开了通向去中心化计算的大门,在这个平台上,我们可以运行去中心化的应用程序(DApp)和智能合约.以太坊是WEB 3.0 和 NFT的 ...
- 安全链生态发展官Mingo:打造去中心化安全社群,让每个人贡献安全力量
Mingo是中国第一批黑客之一,13岁创办"黑客力量",两年内成为位居全国前列的黑客组织.可贵的是,他没有囿于技术.现在身为区块链安全专家的Mingo认为,技术是服务于社群共识的, ...
- 微盟WOS正式发布,打造去中心化商业操作系统
10月27日,微盟WOS新商业操作系统正式发布.作为微盟大客化战略和生态化战略的共同载体,WOS系统以"All in one,One in all"为核心理念,是目前业界首个面向去 ...
- Tiger VC DAO打造去中心化VC,为NFT、DAO带来新叙事
有人说现在是比特币的熊市,NFT的牛市. 从去年下半年开始,NFT无疑是最受关注的赛道之一.在加密市场不断下滑的情况下,BAYC.Azuiki.Moonbirds.EightBit Me等大火的NFT ...
最新文章
- java memcachedclient_memcached client — memcached client for java使用 | 学步园
- Java自学笔记(16):常用类:Math,Data和Calender,Format,Scanner
- mysql三高讲解(三)3.2:如何确定用哪条索引
- aws rds监控慢sql_将AWS S3存储桶与AWS RDS SQL Server集成
- Free DOS 1.0发布!
- android 自动生成aidl,[Android]用AIDL生成Service
- 4*4矩阵式键盘识别技术c语言程序,4×4矩阵式键盘识别技术
- [转帖]DRAM芯片战争,跨越40年的生死搏杀
- Python 批量推送微信公众号模板消息
- hackthissite 闯关日记
- 如何制作一面智能镜子
- 计算机网络波动大,电脑网络总是不稳定的解决方法
- 地平线机器人上海待遇_目前室内机器人、SLAM现状如何?行业内顶尖技术在哪些高校或企业 ?...
- poi 启用保护后取消_关于POI锁定保护Excel表格后的操作
- 如何查看谷歌账户的实际消费金额和扣款金额是否一致?
- 使用U盘安装 mac os
- 0043-使用Grabcut函数完成前景与背景的分割
- python sdklive2d_Unity使用Live2DSDK制作游戏(Demo制作1)
- 北邮复试 | 北邮机试往年题汇总 | 计算机院 | 网研院 | 网安院 | 软院
- 本地笔记软件mybase8.x破解试用用时长限制
热门文章
- 内标法or外标法? 如何选择
- FreeCodeCamp和JavaScript纹身
- Failed to transform artifact ‘support-v4.aar (com.android.support:support-v4:22.0.0)‘ to match attri
- 周六想和女友浪不知道怎么选酒店?Python告诉你全国著名高校附近酒店评论!...
- python爬取王者_教你用Python爬取手机APP数据!以王者荣耀的数据信息为例
- 小米9 android q 内测,小米MIUI 10新版安卓q系统内测开启 支持机型小米9_投诉举报...
- 最*新政*策:镇長、村長要完蛋了,8月1号正式实*施!
- 掌控板+麦轮,Mixly + Blynk,让你的麦轮战甲嗨炸全场!
- 各高校考研gis真题
- 操作系统与网络 2019-1-28