新闻中心

【以太坊开发】以太坊DAPP搭建实战—宠物商店
发布时间:{$itemInfo['publish_time']|date='Y-m-d H:i:s',_ _ _1xbet亚洲最佳娱乐平台为您服务.1xbet在线体育为您提供高品质、高赔率的娱乐游戏及所有线上投注的优惠.1xbet官网网上娱乐最权威的真人娱乐:世界杯、欧洲杯、欧冠杯、波胆,滚球!}##}来源:1xbet-1xbet在线体育-1xbet官网点击:3

  宠物商店

  

  VMWare10、Ubuntu16.04、Nodejs v9.11.1、Truffle v4.1.5、Ganache 1.1.0

  

  1、创建项目工程根目录。

  2、使用truffle unbox 创建项目。

  也可以使用truffle init 来创建一个全新的项目。

  3、项目目录结构如下:

  

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

  在部署合约之前,我们使用Ganache来开启一个私链来进行开发测试,默认端口:7545(区别:TestRPC的默认监听端口:8545)。

  Ganache的前身就是TestRPC,提供了两个版本:一个CLI版本,一个图形界面版本,可按需要安装。

  CLI版本安装:

  本文以图形界面为例,将下载至本地后,上传至(可以是任意目录),无需安装,直接运行即可。

  图形界面版本下载地址:https://github.com/trufflesuite/ganache/releases

  Windows: Ganache-.appx

  Mac: Ganache-.dmg

  Linux: Ganache-*.AppImage

  根据你的系统找到对应的文件下载即可。

  注意:这里需要在Ubuntu系统中执行,而不是Xshell连接客户端,否则弹不出图形界面。

  Ganache 启动之后界面如下,自动生成10个账号(默认交易对象为第1个账号):

  

  选择yes

  

  点击continue

  

  账号列表(钱包地址列表)

  

  

  补充:

  Ganache把所有东西都存在内存里,因此,节点一旦重启,将丢失以前的状态。

  如果想要远程访问Ganache,可以将127.0.0.1设置成对外的IP地址即可。

  现在我们来创建一个新的部署脚本,粘贴如下代码:

  接下来执行部署命令:

  执行后,输出如下:

  

  在打开的Ganache界面里可以看到区块链状态的变化,现在产生了4个区块。如下图:

  

  这时说明智能合约已经部署好了。

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

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

  Assert.sol 和 DeployedAddresses.sol是由Truffle框架提供,在test目录下并不提供truffle目录。

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

  在终端中执行:

  我们已经编写和部署及测试好了合约,接下我们为合约编写UI,让合约真正可以用起来。

  在Truffle Box 里,已经包含了应用的前端代码,代码在工程根目录下的文件夹下。

  在编辑器中打开

  可以看到用来管理整个应用的App对象,init函数加载宠物信息,就初始化web3。

  web3是一个实现了与以太坊节点通信的库,我们利用web3来和合约进行交互。

  1、初始化web3

  接下来,我们来编辑app.js修改initWeb3方法:

  删除注释,修改为:

  2、实例化合约

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

  3、处理领养

  修改markAdopted方法代码:

  修改handleAdopt方法代码:

  1、安装 MetaMask

  MetaMask 是一款插件形式的以太坊轻客户端,开发过程中使用MetaMask和我们的Dapp进行交互是个很好的选择。

  如果未安装,请移步到:以太坊钱包MetaMask使用教程

  2、配置钱包

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

  

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

  然后输入自己想要的密码,点击OK。如下图所示:

  

  3、连接开发区块链网络

  默认连接的是以太坊主网(左上角显示),选择Custom RPC,添加一个网络:http://127.0.0.1:7545,点返回后,显示如下:

  

  

  这时左上角显示为Private Network,账号是Ganache中默认的第一个账号。

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

  4、安装和配置lite-server

  接下来需要本地的web 服务器提供服务的访问, Truffle Box pet-shop里提供了一个lite-server可以直接使用,我们来查看看一下它是如何工作的。

  工程根目录下的bs-config.json指示了lite-server的工作目录。

  说明:

  https://www.jianshu.com/p/src 是网站文件目录

  https://www.jianshu.com/p/build/contracts 是合约输出目录

  与此同时,在package.json文件的scripts中添加了dev命令:

  以上两段代码无需做任何修改,当运行npm run dev的时候,就能启动lite-server了。

  5、启动服务

  会自动打开浏览器显示我们的Dapp,如本文的第一张图。

  现在领养一只宠物看看,当我们点击Adopt按钮时,MetaMask会提示我们交易的确认,如图:

  

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

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

  

  好了,恭喜你,即将成为一名去中心化式应用开发者的你已经成为迈出了坚实的一步。

  

  微信交流

  参考:

  https://learnblockchain.cn/2018/01/12/first-dapp/