一步步教你开发部署第一个去中心化应用(Dapp)宠物商店区块链技术剖析

本文通过实例教大家来开发去中心化应用,应用效果如图:

从本文,你可以学习到:

Pete有一个宠物店,有16只宠物,他想开发一个去中心化应用,让大家来领养宠物。在trufflebox中,已经提供了pet-shop的网站部分的代码,我们只需要编写合约及交互部分。

1、建立项目目录并进入

>mkdirpet-shop-tutorial>cdpet-shop-tutorial2、使用truffleunbox创建项目

>truffleunboxpet-shopDownloading...Unpacking...Settingup...Unboxsuccessful.Sweet!Commands:Compile:trufflecompileMigrate:trufflemigrateTestcontracts:truffletestRundevserver:npmrundev这一步需要等待一会

contracts/智能合约的文件夹,所有的智能合约文件都放置在这里,里面包含一个重要的合约Migrations.sol(稍后再讲)migrations/用来处理部署(迁移)智能合约,迁移是一个额外特别的合约用来保存合约的变化。test/智能合约测试用例文件夹truffle.js/配置文件

其他代码可以暂时不用管

在contracts目录下,添加合约文件Adoption.sol

pragmasolidity^0.4.17;contractAdoption{address[16]publicadopters;//保存领养者的地址//领养宠物functionadopt(uintpetId)publicreturns(uint){require(petId>=0&&petId<=15);//确保id在数组长度内adopters[petId]=msg.sender;//保存调用这地址returnpetId;}//返回领养者functiongetAdopters()publicviewreturns(address[16]){returnadopters;}}编译部署智能合约Truffle集成了一个开发者控制台,可用来生成一个开发链用来测试和部署智能合约。

Solidity是编译型语言,需要把可读的Solidity代码编译为EVM字节码才能运行。dapp的根目录pet-shop-tutorial下,

>trufflecompile输出

Compiling./contracts/Adoption.sol...Writingartifactsto./build/contracts部署编译之后,就可以部署到区块链上。在migrations文件夹下已经有一个1_initial_migration.js部署脚本,用来部署Migrations.sol合约。Migrations.sol用来确保不会部署相同的合约。

现在我们来创建一个自己的部署脚本2_deploy_contracts.js

接下来执行部署命令:

>trufflemigrate执行后,有一下类似的输出,

Usingnetwork'develop'.Runningmigration:1_initial_migration.jsDeployingMigrations......0x3076b7dac65afc44ec51508bf6f2b6894f833f0f9560ecad2d6d41ed98a4679fMigrations:0x8cdaf0cd259887258bc13a92c0a6da92698644c0Savingsuccessfulmigrationtonetwork......0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956Savingartifacts...Runningmigration:2_deploy_contracts.jsDeployingAdoption......0x2c6ab4471c225b5473f2079ee42ca1356007e51d5bb57eb80bfeb406acc35cd4Adoption:0x345ca3e014aaf5dca488057592ee47305d9b3e10Savingsuccessfulmigrationtonetwork......0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0Savingartifacts...在打开的Ganache里可以看到区块链状态的变化,现在产生了4个区块。这时说明已经智能合约已经部署好了。

现在我们来测试一下智能合约,测试用例可以用JavaScriptorSolidity来编写,这里使用Solidity。

在test目录下新建一个TestAdoption.sol,编写测试合约

pragmasolidity^0.4.17;import"truffle/Assert.sol";//引入的断言import"truffle/DeployedAddresses.sol";//用来获取被测试合约的地址import"../contracts/Adoption.sol";//被测试合约contractTestAdoption{Adoptionadoption=Adoption(DeployedAddresses.Adoption());//领养测试用例functiontestUserCanAdoptPet()public{uintreturnedId=adoption.adopt(8);uintexpected=8;Assert.equal(returnedId,expected,"AdoptionofpetID8shouldberecorded.");}//宠物所有者测试用例functiontestGetAdopterAddressByPetId()public{//期望领养者的地址就是本合约地址,因为交易是由测试合约发起交易,addressexpected=this;addressadopter=adoption.adopters(8);Assert.equal(adopter,expected,"OwnerofpetID8shouldberecorded.");}//测试所有领养者functiontestGetAdopterAddressByPetIdInArray()public{//领养者的地址就是本合约地址addressexpected=this;address[16]memoryadopters=adoption.getAdopters();Assert.equal(adopters[8],expected,"OwnerofpetID8shouldberecorded.");}}Assert.sol及DeployedAddresses.sol是Truffle框架提供,在test目录下并不提供truffle目录。

TestAdoption合约中添加adopt的测试用例

在终端中,执行

truffletest如果测试通过,则终端输出:

Usingnetwork'develop'.Compiling./contracts/Adoption.sol...Compiling./test/TestAdoption.sol...Compilingtruffle/Assert.sol...Compilingtruffle/DeployedAddresses.sol...TestAdoptiontestUserCanAdoptPet(62ms)testGetAdopterAddressByPetId(53ms)testGetAdopterAddressByPetIdInArray(73ms)3passing(554ms)创建用户接口和智能合约交互我们已经编写和部署及测试好了我们的合约,接下我们为合约编写UI,让合约真正可以用起来。

在TruffleBoxpet-shop里,已经包含了应用的前端代码,代码在src/文件夹下。

接下来,我们来编辑app.js修改initWeb3():删除注释,修改为:

使用truffle-contract会帮我们保存合约部署的信息,就不需要我们手动修改合约地址,修改initContract()代码如下:

initContract:function(){//加载Adoption.json,保存了Adoption的ABI(接口说明)信息及部署后的网络(地址)信息,它在编译合约的时候生成ABI,在部署的时候追加网络信息$.getJSON('Adoption.json',function(data){//用Adoption.json数据创建一个可交互的TruffleContract合约实例。varAdoptionArtifact=data;App.contracts.Adoption=TruffleContract(AdoptionArtifact);//SettheproviderforourcontractApp.contracts.Adoption.setProvider(App.web3Provider);//UseourcontracttoretrieveandmarktheadoptedpetsreturnApp.markAdopted();});returnApp.bindEvents();}处理领养修改markAdopted()代码:

markAdopted:function(adopters,account){varadoptionInstance;App.contracts.Adoption.deployed().then(function(instance){adoptionInstance=instance;//调用合约的getAdopters(),用call读取信息不用消耗gasreturnadoptionInstance.getAdopters.call();}).then(function(adopters){for(i=0;i

在接受隐私说明后,会出现页面如下:

这里我们通过还原一个Ganache为我们创建好的钱包,作为我们的开发测试钱包。点击页面的ImportExistingDEN,输入Ganache显示的助记词。

candymaplecakesugarpuddingcreamhoneyrichsmoothcrumblesweettreat然后自己想要的密码,点击OK。如图:

至此MetaMask的安装,配置已经完成。

接下来需要本地的web服务器提供服务的访问,TruffleBoxpet-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:notestspecified\"&&exit1"},当运行npmrundev的时候,就会启动lite-server

>npmrundev会自动打开浏览器显示我们的dapp,如本文的第一张图。现在领养一直宠物看看,当我们点击Adopt时,MetaMask会提示我们交易的确认,如图:

点击Submit确认后,就可以看到成功领养了这次宠物。

在MetaMask中,也可以看到交易的清单:

区块链技术专家,《精通以太坊智能合约开发》的作者,北京航空航天大学硕士,创新工场高级工程师,猎豹移动技术项目负责人,以太坊基金会讲师,登链科技创始人兼CTO。对底层公链技术,区块链技术落地都有深入研究。

THE END
1.江汉路为什么这么多的领养馆?江汉路为什么这么多的领养馆?#0元玩转这座城 #宠物 #宠物领养专区 #宠物店 #宠物超市 #去宠物店吸萌宠 我比较喜欢宠物,时不时的回去领养馆溜达每天看看那些可爱到爆的小猫咪真的好治愈但是最近发现江汉路的领养馆特别多是什么情况!不知道有没有人从里面买过宠物大部分都是猫咪领养没啥没狗狗呢?啥也不敢问...https://m.dianping.com/ugcdetail/237511261?bizType=29
2.免费领养品种猫,我成了最大的冤种在掺杂了经营因素之后,高悬的“领养”招牌变得格外可疑,“领养代替购买”的概念也与大多数消费者理解的爱心举动相去甚远。 相比这类“免费领养”的宠物店,正规领养猫狗的机构并不收取费用,只会通过志愿者回访、领养问卷等形式和审核制度保障宠物和领养人的权益。 https://news.pedaily.cn/202403/530975.shtml
3.撸宠:通过芝麻证优化体验,领养成功率提升30%通过芝麻证与预授权赋能送领养双方,一方面可以保障双方顺利完成宠物领养与持续跟踪宠物领养近况;另一方面还...https://open.alipay.com/portal/forum/post/102501055
4.“免费领养”宠物的套路也太多了在某App上看到这样的信息后,爱宠人士黄女士走进宠物店,相中了一只非常可爱的猫咪。卖家告诉她“可‘无偿领养’,但需支付两年的猫粮费用(每个月188元,在店家提供的App商城购买)”。黄女士心想猫粮是必需品,不论在哪里购买都要花钱,便与商家签订了协议。 http://www.xinhuanet.com/legal/20240405/ec2348701146495ab7ff960ceff173c5/c.html
1.全国十大宠物领养平台领养猫狗的平台推荐可领养宠物的app有哪些...领养宠物的意义在于,给流浪动物一个赖以生存的家,解决它们的温饱、健康、居住问题。那么,你知道全国宠物领养中心有哪些吗?下面买购网编辑就带大家看一份宠物领养平台名单,一起了解下宠安家、幸运土猫、宠物帮领养中心,以及有只宠物、宠胖胖、搜栖、宠友社等流浪猫/流浪狗领养平台。 01 宠安家 互联网线上公益领养...https://www.maigoo.com/top/430609.html
2.号称“上海最大宠物救助组织”暗地里却非法贩卖(视频)送养收养两边收钱 送养的狗去了哪里?收养的狗又从哪来? 记者以希望收养流浪狗的名义,来到“上海宠物领养救助网”对外公布的地点——海宁路1403号。和李先生所述情况一样,这里是一家沙县小吃。在拨通对方电话之后,对方才将记者带到了1399号金城大厦6楼的612房间。该组织人员表示,用假地址,是为了“防止被其它宠物...https://www.guancha.cn/society/2016_12_06_383017_2.shtml
3.成都可以去什么地方收养流浪狗近些年随着成都的经济发展,许多外地人来到成都打拼、定居,因此也产生了许多的问题,其中成都可以去什么地方收养流浪狗就是人们的重点关注问题,华律网小编整理相关内容,欢迎大家阅读,希望这些内容对大家有所帮助。 一、成都收养流浪宠物的地方 四川省启明小动物保护中心(The Center Of Protect Beastie In Sichuan Province)...https://www.66law.cn/laws/1408885.aspx
4.重庆宠物狗领养中心地址在哪里?免费领养,宠物狗领养中心一览重庆宠物狗领养中心地址在哪里?2、你可以登陆小动物保护协会网址www cqsapa com,上面有可以领养的狗的...https://go.cqmmgo.com/forum-173-thread-47091569558017383-1-1.html
5.网络热传“免费领养宠物”:联系领养,只让你转发和看广告按她的要求,记者转发7个群并截图给她后,迟迟未得到回应。按步骤,她应该发狗狗相册给领养人士挑选了,在记者的反复索要下,对方发来一个链接,点击进入,记者看到了一个纯广告网站,多是与宠物相关的广告信息。 发了网站链接后,对方没有再说话。对方给出三个的“领养”步骤却不是一个具体、可操作的程序。到哪去领...https://www.sc.gov.cn/10462/12771/2015/11/9/10358086.shtml
6.2024英国购买及领养宠物详细流程(手续+费用+渠道+注意事项),领养...那么,身处在英国的你,知道哪里可以购买或者领养宠物吗?接下来就跟着小编一起来看看,在英国可以领养到宠物的网站以及领养宠物的详细流程,需要的手续,费用,以及注意事项(宠物疫苗、绝育等)都有!满满的干货,希望可以帮助到大家! 封面图来自于pixabay.com,版权属于Dimhou...https://www.extrabux.cn/chs/guide/4484640
7.狗狗繁殖场的背后看完还愿意去宠物店买小狗吗法制频道狗狗繁殖场的背后 看完还愿意去宠物店买小狗吗 每年都会有成千上万只宠物狗在这里出生和长大。这是格鲁吉亚(Georgia)一个狗狗繁殖场,从2014年开始,许多从这里出售的小狗没过几天就死了。繁殖场被取缔后,由驯狗师,西特·维尔(Victoria Stilwell)带队的救援组织赶到了现场,哪里关押着大概500只狗狗。它们被关在狭小...https://m.dbw.cn/fazhi/system/2015/11/24/056955418_05.shtml
8.“免费领养宠物”套路深,当心落入骗局南方+不法分子还会在社交平台上发布免费领养、优惠售卖的消息,用“猫舍倒闭”“家中猫咪太多”“和对象分手了”“自己无法再养”等看起来正当的理由包装自己,让受害人放下戒心。 在受害人上当后,不法分子通过教授养宠物知识、让受害人做出不弃养承诺的固定话术,进一步攻下受害人的心防。然后他们会根据受害人的特征定价,一...https://static.nfapp.southcn.com/content/202305/05/c7647258.html
9.成都首家必胜客宠物友好餐厅亮相携手公益人哈哥倡导领养代替购买...此次,成都必胜客宠物友好餐厅携手哈哥可以更好的延续此项公益事业。此次领养人的聚会,哈哥和左耳的故事感动了在座的领养人。左耳是一只流浪猫,被砍去了前腿和右耳,2016年哈哥救助了左耳,左耳也在爱中恢复了对人的信任。流浪狗可可,经历了数次领养弃养,在现任主人的呵护下,不但健康成长,还成为了可以治愈人心的“狗...https://www.jrtzb.com.cn/m/cfsh/202105/58162223.html
10.擦亮眼!宠物店“免费领养”或是“高价”伪装“喜欢品种宠物的看过来,免费把小猫咪带回家!”看到这样的消息,你是否会动心?近日,不少宠物店在社交媒体上宣传“免费领养宠物”,对囊中羞涩的爱宠人士产生了极大吸引力。据这些店家的宣传,金渐层、布偶猫、金毛犬、拉布拉多都在可领养的范围内。 在广州,也有不少宠物店打出了“免费领养”的招牌。品种宠物“零元购...https://finance.sina.cn/tech/2024-01-29/detail-inafchuy1811075.d.html