1.摘要[本文的目的]
通过一步一步的指导和截图证明，一步一步带领一个技术小白在一家宠物店完成DAPP应用的开发和部署。
[环境先决条件]
参考《第一课 如何在WINDOWS环境下搭建以太坊开发环境》，已经完成Ubuntu、TRUFFLE、Ganache-cli、lite-server的安装；
这个案例是通过WINDOWS的XSHELL客户端和本机的Ubuntu命令操作进行的。
MetaMask light wallet客户端已安装在本地WIDOWS环境中。
最好一开始就按照课程学习顺序来。不过如果想中途插入动手学习，问题不大。当你遇到障碍时，可以反向找到相应文章的指导内容。
[技术收益]
通过本练习，您可以了解到：
构建智能合约开发环境。
创建一个松露项目
编写智能合同
编译智能合同并将其部署到区块链。
如何通过Web3与智能合约交互
元掩码的使用
[实践课程列表]
第一课如何在WINDOWS环境下构建以太坊开发环境
第二课如何实现以太坊最简单的智能合约“Hello World”的操作
第四课松露，以太坊的开发框架，从入门到实战
第六课技术小白如何开发一个DAPP区块链应用(以宠物店为例)
第7课技术小白如何在45分钟内发行代币并进行在线交易？
第八课以太坊官网智能合约众筹案例如何调试
【说明】未列出的课程均为非实践性课程，知识普及。所有区块链的文章都提到了“区块链条目”一栏。
2.下载/编写松露框架的智能合约项目背景。
皮特有一家宠物店，里面有16只宠物狗。他想开发一个去中心化的应用，让每个人都可以领养宠物。
在松露盒子里，已经提供了宠物店网站部分的代码，我们只需要写合同和互动部分。
【官网原文参考】
代码下载：http://truffleframework.com/boxes/pet-shop
发展指南：http://truffleframework.com/tutorials/pet-shop
环境建设
需要Environment NodeJS、Truffle、Ganache-CLI、Lite-Server、Meta-Mask等程序。根据步骤，可以参考《第一课 如何在WINDOWS环境下搭建以太坊开发环境》在已安装的UBUNTU操作系统中搜索相应的关键字完成安装。
安装节点： sudo apt-get install curl
https://deb.nodesource.com/setup_6.x | sudo-E bash
sudo apt-get install -y节点
安装块菌：npm install -g块菌
安装加纳切苏多NPM安装-g加纳切-CLI
[描述] Ganache(或Ganache CLI)已取代testrpc。
4.精简服务器，元掩码安装
以下章节描述。
创建项目
建立项目目录，输入mkdir dapp-guide-pet-shop。
CD dapp-指南-宠物店
用truffle unbox创建一个项目，并下载官方程序代码truffle unbox pet-shop
输出成功结果：
下载.拆包.安装.拆箱成功。太棒了。命令：编译3360洗牌编译迁移3360洗牌迁移测试契约3360洗牌测试运行开发服务器： NPM运行开发项目目录结构
放置所有智能合同文件的contracts/smart contracts文件夹包含一个重要的contract Migrations.sol(我们将在后面讨论)。
迁移/用于处理智能合同的部署(迁移)。迁移是一个附加的特殊契约，用来保存契约的变更。
测试/智能合同测试案例文件夹
Truffle.js/简介
其他代码可以暂时忽略。
【描述】如果您想了解更多关于松露框架的信息，请参考文章《第四课 以太坊开发框架Truffle从入门到实战》
编写智能合同
智能合约承载了分布式应用的后台逻辑和存储。智能合同是用可靠性写的。
在合同目录中，添加合同文件Adoption.sol
^0.4.17实用主义；合同收养{地址[16]公共收养人；//保存领养者的地址//领养宠物函数Adopt(uint petid)public returns(uint){ require(petid=0 petid=15)；//确保id在数组长度adopters[petId]=msg.sender内；//保存调用此地址的返回petId}//返回采纳者函数get adopters()public view Returns(address[16]){ return adopters；}}编译和部署智能合约。
Truffle集成了一个开发者控制台，可以用来生成测试和部署智能合约的开发链。
编辑和翻译
固态是编译型语言，需要把可读的固态代码编译为EVM字节码才能运行。
进入分布式应用的根目录dapp-导游-宠物店执行命令，
块菌编译输出
正在编译。/合同/收养。溶胶.
将工件写入。/构建/合同
编写部署代码
编译之后，就可以部署到区块链上。
在迁移文件夹下已经有一个1 _初始_迁移。射流研究…部署脚本，用来部署迁移。溶胶合约。
迁移。溶胶用来确保不会部署相同的合约。
现在我们来创建一个自己的部署脚本2_deploy_contracts.js
定义变量采用=artifacts.require(\ ‘采用\ ‘);模块。exports=function(部署者){ deployer。部署(采用)；};安装启动加纳切测试环境
在执行部署之前，需要确保有一个区块链运行，可以使用
加纳切来开启一个私链来进行开发测试。
参考文章《第一课 如何在WINDOWS环境下搭建以太坊开发环境》 对应的章节，完成加纳切-cli的安装。
sudo npm install -g ganache-cli
在新的命令行窗口运行加纳切-cli程序：
cd /usr/work/Ganache
ganache-cli trace.log
这个目的是把加纳切-cli的结果输出到文件，便于后面复制钱包地址用于查看埃塞俄比亚余额。作者实践时把这注射毒品行命令合并成一行执行。
gan ache-CLI/usr/work/gan ache/trace。原木
这个命令窗口用于运行加纳切程序输出，不可关闭。需要新开一个命令窗口用于执行松露的命令。
输出截图
打开trace.log文件，可查看默认启动的10个钱包账户和对应的私钥地址：
可用账号=====================(0)0x 7554 cc 8c 721712 add 43 e 67 a 5669225 bb E8 f 21 f 6(1)0 x3e 6 ce 6a 43 C1 fa 565 b5 b 90963 bef 090625d 3 EDC 6c(2)0 xeb 2 EB 6 ed 4b 325 e 77 f 5a 597497 EC 5 ffaa 2 f 5c 2650(3)0x 1d配置以太坊客户端本地环境
ruffle.js是松露的配置文件，位于dapp-导游-宠物店目录下，启动好以太坊本地结点以后，我们需要让松露去识别它并使用它，这就需要在块菌。射流研究…中配置相关属性：
module.exports={ //参见//了解更多关于定制您的松露配置的信息！网络： {开发： {主机： \ ‘ 127。0 .0 .1 \ ‘，port: 8545，network_id: \’*\’ //匹配任意网络id } } }执行部署命令
接下来在新的命令窗口执行部署命令
CD/usr/work/dapp-guide-pet-shop
块菌迁移
执行后，有一下类似的输出，
利用网络’开发。
运行迁移： 1_initial_migration.js
部署迁移.
.0x 29612 ceea 67 BC 946 cc 6 AE 82 AFB EDC 546 f 9 a 53 ba 8 cab 5d 804 f 9025 FB 8 f 15 e 48 f 8
迁移：0x8af 912046664 ba 26738 b 811 c 34068d 42216528 c 0
将成功的迁移保存到网络.
.0x6c 968 a3 c 492439 ab 22028 e 1956360 a6b 73 a 02716 c 436 b 15234 CD 29804 DAC 7298
保存工件.
运行迁移： 2_deploy_contracts.js
部署采用.
.0x 27448 E4 f 75 b 608015 f 3670 e 3650 cf 607 c 882 Fe 7 f1 a 32 f 98 E8 a 94 BF 7a 406 c 871 c
采用：0x e 42 f 434105 a7 E0 eacf 4 f 4229 c 76 E1 e 135d 536 db 6
将成功的迁移保存到网络.
.0x 9375 CD 6 fa 143d 01 a 520 C5 ed 0d 46 cfe 859 f 482 b 01 e 37 cf 678d 751 C5 db 6 a 278 e5f
保存工件.
查看加纳切-cli的输出文件：trace.log，可以看到区块链状态的变化，现在产生了四个区块。
net _ version eth _ accounts eth _ accounts net _ version net _ version eth _ send交易交易：0x 29612 ceea 67 BC 946 cc 6 AE 82 afbed c 546 F9 a 53 ba 8 cab 5d 804 f 9025 FB 8 f 15 e 48 f 8合同创建：0x8a f 912046664 ba 26738 b 811 c 34068d 42216528 c 0气用法33333这时说明已经智能合约已经部署好了。
测试
现在我们来测试一下智能合约，测试用例可以用Java Script语言还是固态来编写，这里使用坚固性.
在试验目录下新建一个TestAdoption.sol，编写测试合约
^0.4.17实用主义；导入\ ‘块菌/断言。sol \ ‘；//引入的断言导入\ ‘块菌/部署地址。sol \ ‘；//用来获取被测试合约的地址导入\ ‘./合同/收养。sol \ ‘；//被测试合约契约遗嘱收养{收养收养=收养(已部署的地址.领养());//领养测试用例函数testUserCanAdoptPet()public { uint returned id=adoption。采用(8)；无符号整型应为=8;Assert.equal(returnedId，应为，\ ‘应该记录对宠物ID 8的收养。\’);} //宠物所有者测试用例函数testGetAdopterAddressByPetId()public {//期望领养者的地址就是本合约地址，因为交易是由测试合约发起交易，预期地址=thisaddress领养者=领养。收养者(8人)；应该记录宠物ID 8的所有者。\’);} //测试所有领养者函数testgetadopteraddressbypetidinaray()public {//领养者的地址就是本合约地址预期地址=this address[16]记忆采纳者=采纳。获取采纳者()；Assert.equal(采纳者[8]，预期，\ ‘应该记录宠物ID 8的所有者。\’);} }断言.溶胶及部署地址.溶胶是松露框架提供，在试验目录下并不提供松露目录。
遗嘱认证合约中添加采取的测试用例
运行测试用例
在终端中，执行
块菌试验
如果测试通过，则终端输出：
利用网络’开发’。正在编译。/合同/收养.溶胶.正在编译/test/TestAdoption.sol.编译块菌/Assert.sol.正在编译块菌/部署地址. sol.遇到编译警告：块菌/断言。溶胶：156:933:警告：不推荐使用\’var\ ‘关键字var nstr=_itoa(值，10);^-^,truffle/assert.sol:1580:9:警告：不推荐使用\’var\ ‘关键字var nstr=_utoa(值，10);^-^,truffle/assert.sol:1597:9:警告：不推荐使用\’var\ ‘关键字var nstr=_ltoa(值);^-^,truffle/assert.sol:1347:13:警告：不推荐使用不带\ ‘发出\ ‘前缀的调用事件TestEvent(true，\ ‘ \ ‘)；^-^,truffle/assert.sol:1349:13:警告：不推荐使用不带\ ‘发出\ ‘前缀的调用事件TestEvent(假，消息);^-^ testadoption testusercanadoptpet(246毫秒)传球(2秒)3 .创建用户接口和智能合约交互我们已经编写和部署及测试好了我们的合约，接下我们为合约编写UI，让合约真正可以用起来。
在松露盒宠物店里，已经包含了应用的前端代码，代码在src/文件夹下。
在编辑器中打开src/js/app.js
可以看到用来管理整个应用的应用对象，初始化函数加载宠物信息，就初始化网络3 .
web3是一个实现了与以太坊节点通信的库，我们利用web3来和合约进行交互。
初始化web3
接下来，我们来编辑app.js修改initWeb3():
删除注释，修改为：
initWeb3: function() { //是否存在注入的Web3实例web3的类型！==’未定义’){ app。web 3提供商=web 3。当前提供商；} else { //如果没有检测到注入的web3实例，回退到Ganache app。web 3提供商=新web 3。提供商。http提供程序(“http://localhost :8545”)；} web 3=新web 3(app。web 3提供商)；返回app。初始化合同()；}代码中优先使用元掩码提供的web3实例，如果没有则从本地环境创建一个。
实例化合约
使用块菌合同会帮我们保存合约部署的信息，就不需要我们手动修改合约地址，修改initContract()代码如下：
initContract: function() { //加载Adoption.json，保存了采用的ABI(接口说明)信息及部署后的网络(地址)信息，它在编译合约的时候生成ABI，在部署的时候追加网络信息$.getJSON(‘Adoption.json ‘，function(data) { //获取必要的契约工件文件，用松露-合同//实例化用领养.数据数据创建一个可交互的块菌合同合约实例var AdoptionArtifact=dataapp。合同。领养=松露契约(领养神器)；//为我们的契约app。合同。领养。设置提供商(应用程序。web 3提供商)设置提供者；//使用我们的契约检索并标记领养的宠物返回app。markadopted()；});返回app。绑定事件()；},处理领养
修改markAdopted()代码：
markAdopted:函数(采用者，帐户){
定义变量采用实例；
app。合同。领养。已部署().然后(函数(实例){
adoptionInstance=实例
//调用合约的getAdopters()，用呼叫读取信息不用消耗气体
返回收养实例。获得领养者。call()；
}).然后(功能(采用者){
for(I=0；一、收养人我){
如果(领养者[我]!==’0x 0000000000000000000000000000000000000000000 ‘ } {
$(‘.面板-宠物)。等式(一)。查找(‘按钮’)。文本(“成功”)。attr(‘disabled ‘，true)；
}
}
}).接住(函数(错误){
控制台。日志(错误。消息)；
});
}
修改handleAdopt()代码：
handleAdopt:函数(事件){ event . prevent default()；var petId=parse int($(event . target)。数据(‘ id ‘)；var采用实例；//获取用户账号web 3 . eth . Get accounts(function(error，accounts){ if(error){ console . log(error))；} var帐户=accounts[0]；app . contracts . adoption . deployed()。然后(function(instance){ adoption instance=instance；//发送事务领养pet returnadoptioninstance . adopt(petid，{ from : account })；}).then(function(result){ return app . markadopted()；}).catch(function(err){ console . log(err . message)；});});}4.安装和配置lite-server【定义】lite-server是一个全功能的网站架设工具包。它是轻量级的，只适用于开发的节点服务器。它只支持web app。它可以为你打开浏览器。当您的html或JavaScript文件发生变化时，它会识别并自动刷新您的浏览器。它还可以使用socket自动注入更改后的CSS。找不到路线时，会自动返回页面。
请参考文章《第一课 如何在WINDOWS环境下搭建以太坊开发环境》中的章节\'(8)安装lite-server[可选]来完成lite-server的安装。
bs-config.json文件表示lite-server的工作目录。
{ \ ‘ server \ ‘ 3360 { \ ‘ basedir \ ‘ 3360[\ ‘。/src \ ‘，\ ‘。/build/contracts \’]}}。/src是网站文件目录。
./build/contracts是合同的输出目录。
同时，dev命令被添加到package.json文件的脚本中：
{ \’name\’: \’pet-shop\ ‘，\’version\’: \’1.0.0\ ‘，\’description\’: \’\ ‘，\’main\’: \’truffle.js\ ‘，\ ‘ directory \ ‘ : { \’test\ ‘: \ ‘ test \ ‘ }，\ ‘ scripts \ ‘ : { \ ‘ dev \ ‘ : \ ‘ lite-server \ ‘，\ ‘ test \ ‘ 333
CD/usr/work/dapp-guide-pet-shop
npm运行开发
正常运行结果具有以下类似的输出内容：
pet-shop @ 1 . 0 . 0 dev/usr/work/dapp-guide-pet-shop lite-server * * browser-sync config * * { inject changes : false，files: [‘。/**/*.{html，htm，css，js}’ ]，watch options : { ignored : ‘ node _ modules ‘ }，server: { baseDir: [‘。/src ‘，’。/build/contracts’ ]、middleware: [ [Function]，[Function] ] } }[Browsersync]访问URL :-local : http://localhost :3000 external : http://192 . 168 . 80 . 1443:3000–UI 3http://localhost :3001 UI external 33: 3360/src [browsersync]提供来自3360的文件。/build/contracts [browsersync]监视文件.5.安装元掩码并配置区块链网络以安装元掩码。
【定义】MetaMask是以太坊轻客户端的插件形式。在开发过程中使用MetaMask与我们的dapp进行交互是一个不错的选择。
作者在本地WINDOWS的CHROME浏览器上安装了MetaMask钱包工具。具体安装方法请参考文章《第一课 如何在WINDOWS环境下搭建以太坊开发环境》章节“(7)安装meta mask[可选]”。
注意，最详细的MetaMask安装/配置文章请参考欧阳师兄的《以太坊钱包MetaMask使用教程》。
配置钱包
1.接受隐私条款
点击浏览器地址栏右侧MetaMask的狐狸头图标。第一次使用时，会出现隐私提示，如下所示：
隐私提示
2.接受服务条款
点击接受按钮，显示MetaMask的服务条款，如下图2-2所示：
image.png
默认情况下，“接受”按钮是灰色的。将滚动条拉到底部，然后单击接受按钮。
3.创建一个新帐户
创建新帐户：输入一串8位以上的密码，再次重复，点击创建按钮完成。以创建一个新帐户为例：作者启动capital key，使用他的通用密码设置。点击创建按钮后，MetaMask将为用户创建12个英文助记符。一定要保存好这些助记符。单击将种子单词保存为文件，将助记符保存在本地。建议用纸笔手工记录，并妥善保管。
种子
连接区块链网络
默认连接是以太坊的主网络(显示在左上角)。选择自定义RPC并添加Ubuntu的IP地址作为客户定义的RPC网络。
http://192.168.80.144:8545
测试机器以太坊客户端成功，菜单有链接成功的橙色提示。
连接成功
这在左上角显示为专用网络。此时显示默认账号1空账号，ETH号为0。导入Ganache-cli的第一个wallet帐户。
查看“trace.log”文件，您可以看到Ganache-cli的第一个默认wallet地址是
(0)629551 aa 45 c 594 ce 822 C5 B4 a 378d 01 cf 46 FB 57 C5 b 69 a 61 EB 400 a 4867 ffab 002(1)a 90103 a 95 ed 805 ACC 52782 ea 29 EB 061 f 6 C2 a 9431 fed 3 a 18 a 683 a 3143 a 29 b 6选择MetaMask的”
输入私钥
第一个钱包帐户的余额：
99.211ETH，智能合约运行已消耗
第二钱包账户余额：
100ETH，不消耗。
到目前为止，已经安装并配置了MetaMask。
6.领养一只宠物来修改。\ dapp-guide-pet-shop \ src \ index.html文件引用jquery的地址。
在WINDOWS浏览器中输入测试网站地址。
http://192.168.80.144:3000/
可以看到宠物店的入口界面：
可爱的小狗
点击“领养”按钮，领养这只最美的狗狗宝宝。MetaMask会提示我们确认交易，如图所示：
从6号活期账户中扣除交易费用
成功点击“提交”按钮后，这只狗的按钮变为“成功”，这只狗被收养了。
成功收养
看了一下目前开通的账户ACCOUNT6，发现金额不再是100ETH，而是99.999ETH
账户消费
恭喜您，您已经开发并成功部署了DAPP区块链应用程序，并收养了几只小狗。
6.知识对接服务。我们在知识星球上开设了区块链的介绍专栏，用来存放这个项目的工程源代码，并设立了专门的微信群进行技术交流。欢迎加入我们。
https://t.zsxq.com/ZFaaYVF
暂无讨论，说说你的看法吧
