第六课 技术小白如何开发一个DAPP区块链应用(以宠物商店为例)

欧易(OKX)最新版本

【遇到注册下载问题请加文章最下面的客服微信】永久享受返佣20%手续费！

APP下载   全球官网 大陆官网

币安(Binance)最新版本

币安交易所app【遇到注册下载问题请加文章最下面的客服微信】永久享受返佣20%手续费！

APP下载   官网地址

火币HTX最新版本

火币老牌交易所【遇到注册下载问题请加文章最下面的客服微信】永久享受返佣20%手续费！

APP下载   官网地址

1. 文章摘要

【本文目标】

通过逐步的指导和截图举证，一步步带领一个技术小白完成一个宠物商店DAPP应用的开发和部署。

The development and deployment of a pet shop, DAPP applications, was led step by step by step, through step-by-step guidance and screen evidence.

【环境前置条件】

参考《第一课 如何在WINDOWS环境下搭建以太坊开发环境》，已完成Ubuntu的安装，已完成TRUFFLE，Ganache-cli，lite-server的安装；

Reference: has completed the installation of Ubuntu and has completed the installation of TRUFFLE, Ganache-cli, lite-serv;

本案例是通过WINDOWS的XSHELL客户端同本机的Ubuntu命令操作进行的。

This case was conducted through an Ubuntu command from the XSHELL client of WINDOWS.

已在本地WIDOWS环境完成MetaMask轻钱包客户端的安装。

The installation of the MetaMask light wallet client has been completed in the local WIDOWS environment.

最好遵循从头开始的课程学习顺序。不过如果你想半途插入实操学习，问题也不大，遇到障碍时反向找对应文章的指导内容即可完成。

It is best to follow the course of study from the beginning.

【技术收获】

从本实践中，你可以学习到：

From this practice, you can learn:

搭建智能合约开发环境

Create an intelligent contract development environment

创建Truffle项目

Create Truffle Project

编写智能合约

Write an intelligent contract.

编译和部署智能合约到区块链

Compile and deploy smart contracts to block chains

如何通过Web3和智能合约交互

How to interact with a smart contract through Web3

MetaMask 的使用

Usage of MetaMask

Pete有一个宠物店，有16只宠物狗，他想开发一个去中心化应用，让大家来领养宠物。

Pete had a pet shop and 16 pet dogs, and he wanted to develop a decentralised application for adoption.

在truffle box中，已经提供了pet-shop的网站部分的代码，我们只需要编写合约及交互部分。

In truffle box, the code for the web section of the post-shop is already available, and we just have to prepare the contract and the interactive part.

【官网原始参考】

[Original reference for official network]

代码框架下载：http://truffleframework.com/boxes/pet-shop

Code frame download:

开发指导：http://truffleframework.com/tutorials/pet-shop

Development guide:

环境需要NodeJS, Truffle，Ganache-Cli, Lite-Server, Meta-Mask等程序，按照步骤可以参考《第一课 如何在WINDOWS环境下搭建以太坊开发环境》 搜索对应关键字在已安装的UBUNTU操作系统完成安装。

The environment needs NodeJS, Truffle, Ganache-Cli, Lite-Server, Meta-Mask, etc., which can be consulted step by step from Search key words have been installed in the installed UBUNTU operating system.

1. 安装Node:

sudo apt-get install curl curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash sudo apt-get install -y nodejs

1. 安装 Truffle ：

npm install -g truffle

1. 安装Ganache

sudo npm install -g ganache-cli

【说明】Ganache（或Ganache CLI）已经取代了 testrpc。

[Note] Ganache (or Ganache CLI) has replaced testrpc.

4.Lite-Server, Meta-Mask安装

4. Lite-Server, Meta-Mask installation

本文后面章节描述。

The following sections of this paper are described.

1. 建立项目目录并进入

1. 使用truffle unbox 创建项目 下载官方程序代码

truffle unbox pet-shop

输出成功结果：

Output successful result:

智能合约的文件夹，所有的智能合约文件都放置在这里，里面包含一个重要的合约Migrations.sol（稍后再讲）

A folder for smart contracts, where all smart contract files are placed, contains a major contract, Migrations.sol (to be discussed later)

用来处理部署（迁移）智能合约 ，迁移是一个额外特别的合约用来保存合约的变化。

To handle deployment (relocation) smart contracts, migration is an extra special contract to preserve contract changes.

智能合约测试用例文件夹

Case Folder for Smart Contract Testing

配置文件

Profile

其他代码可以暂时不用管

The rest of the code can be left out for the time being.

【说明】如果想了解TRUFFLE框架更详细的内容，可参考文章《第四课 以太坊开发框架Truffle从入门到实战》

[Note] If you want to know more about the TRUFFLE framework, please refer to the article

智能合约承担着分布式应用的后台逻辑和存储。智能合约使用solidity编写。

The smart contract is written by solidity.

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

Add contract file Adoption.sol under Contractors directory

Truffle集成了一个开发者控制台，可用来生成一个开发链用来测试和部署智能合约。

Truffle has assembled a Developer Console, which can be used to generate a development chain for testing and deploying smart contracts.

编译

Solidity是编译型语言，需要把可读的Solidity代码编译为EVM字节码才能运行。

Solidity is a compilation language that requires the translation of the readable Solidity code into an EVM byte code to run.

进入dapp的根目录dapp-guide-pet-shop执行命令，

To enter the root directory of dapp, dapp-guide-pet-shop executes the command.

输出

Output

编写部署代码

编译之后，就可以部署到区块链上。

Once compiled, they can be deployed on the block chain.

在migrations文件夹下已经有一个1_initial_migration.js部署脚本，用来部署Migrations.sol合约。

A 1_initial_migration.js deployment script is already available under the migrations folder for deployment of the Migrations.sol contract.

Migrations.sol 用来确保不会部署相同的合约。

Migrations.sol is used to ensure that the same contract is not deployed.

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

Now we're going to create our own deployment script.

安装启动Ganache测试环境

在执行部署之前，需要确保有一个区块链运行, 可以使用

Prior to deployment, there is a need to ensure that there is a block chain that can be used

Ganache来开启一个私链来进行开发测试。

Ganache to open a private chain for development testing.

参考文章《第一课 如何在WINDOWS环境下搭建以太坊开发环境》 对应的章节，完成ganache-cli的安装。

Reference article

sudo npm install -g ganache-cli

在新的命令行窗口运行ganache-cli程序：

Run the ganache-cli program in the new command line window:

cd /usr/work/Ganache ganache-cli >> trace.log

这个>>目的是把ganache-cli的结果输出到文件，便于后面复制钱包地址用于查看ETH余额。作者实践时把这2行命令合并成一行执行。

This > > aims to export the ganache-cli results to a file so that the wallet address can be reproduced later to view the ETH balance. The authors combine these two lines into one line for execution in their practice.

ganache-cli >> /usr/work/Ganache/trace.log

这个命令窗口用于运行Ganache程序输出，不可关闭。需要新开一个命令窗口用于执行TRUFFLE的命令。

This command window is used to run the Ganache program output and cannot be closed. A new command window is required to execute the TRUFFLE command.

输出截图

Output Screenshot

打开trace.log文件，可查看默认启动的10个钱包账户和对应的私钥地址：

Opens the trade.log file to view the 10 wallet accounts and the corresponding private key addresses that the default start-up:

配置以太坊客户端本地环境

ruffle.js是truffle的配置文件,位于dapp-guide-pet-shop目录下，启动好以太坊本地结点以后，我们需要让truffle去识别它并使用它，这就需要在truffle.js中配置相关属性：

Ruffle.js is a truffle configuration file, located under the dapp-guide-pet-shop directory, and we need to have the truffle recognize it and use it, which requires the truffle.js to configure the properties in the truffle.js:

执行部署命令

接下来在新的命令窗口执行部署命令

Next you will execute the deployment command in the new command window.

cd /usr/work/dapp-guide-pet-shop truffle migrate

执行后，有一下类似的输出，

After the execution, there was a similar output.

查看Ganache-cli的输出文件：trace.log,可以看到区块链状态的变化，现在产生了4个区块。

Looking at the Ganache-cli output file: Trade.log, you can see changes in the block chain status, which now produces four blocks.

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

That means the smart contract is already in place.

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

Now let's test the smart contract, and the test case can be written by JavaScript or Solidity, which is used here.

在目录下新建一个，编写测试合约

Create a new test contract under the directory

Assert.sol 及 DeployedAddresses.sol是Truffle框架提供，在test目录下并不提供truffle目录。

Assert.sol and DeployedAddresses.sol are provided by the Truffle framework and do not provide a truffle directory under the test directory.

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

Test example for adding adopt to the TestAdoption contract

运行测试用例

在终端中，执行

In terminal, execute

如果测试通过，则终端输出：

If the test passes, the terminal output:

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

We've prepared and deployed and tested our contract, and we've prepared an UI for the contract, so that it can actually be used.

在Truffle Box 里，已经包含了应用的前端代码，代码在文件夹下。

In the Truffle Box, you already have the application front-end code, which is under the folder.

在编辑器中打开

Open in Editor

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

App objects that can be used to manage the whole application can be seen: the init function loads pet information and initializes web3.

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

Web3 is a library that has been able to communicate with Ethernodes, and we use web3 to interact with contracts.

初始化web3

接下来，我们来编辑app.js修改initWeb3():

Next, we will edit app.js to modify initWeb3:

删除注释，修改为：

Delete the comment and amend it to read:

代码中优先使用 MetaMask提供的web3实例，如果没有则从本地环境创建一个。

The code prioritizes the use of Metamask example from https%2Fmetamsk.io%2F&source=articleId=1182382" "target="_blank" rel=nofollownolownoplener" >Metamaskweb3 if not created from local environment.

实例化合约

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

Using the truffle-contract to help us keep the contract deployment information, we do not need to manually modify the contract address and modify the initContact() code as follows:

处理领养

修改markAdopted()代码：

Modify MarkAdopted() code:

修改handleAdopt()代码：

Modify the handleAdopt() code:

【定义】lite-server 是一个全功能的网站架设工具软件包轻量级的，仅适用于开发 的 node 服务器， 它仅支持 web app。 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时，它将自动后退页面。

[Definition] lite-server is a fully-functional web-set tool package that is lightweight and applies only to the developed node server, which supports only web app. It can open the browser for you, and when your html or JavaScript file changes, it will recognize and automatically refresh the browser, and it can use the strap to automatically inject a changed CSS, which automatically returns the page when the router is not found.

参考文章《第一课 如何在WINDOWS环境下搭建以太坊开发环境》的"（8）安装 lite-server 【可选】”章节完成lite-server的安装。

Reference article

bs-config.json文件指示了lite-server的工作目录。

The bs-config.json file indicates the work directory of the lite-server.

是网站文件目录

Cannot initialise Evolution's mail component.

是合约输出目录

It's a contract output directory.

以此同时，在package.json文件的scripts中添加了dev命令：

At the same time, the dev command has been added to the package.json file's scripts:

当在新的命令窗口运行npm run dev的时候，就会启动lite-server

When running npm run dev on the new command window , the lite-server will be activated

cd /usr/work/dapp-guide-pet-shop npm run dev

正常的运行结果有如下类似输出内容：

The normal operating result is a similar output as follows:

安装 MetaMask

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

[Definitions] Metamask is a fine, easy-to-be customer in the form of a plugin, and using MetaMask to interact with our dapp is a good option.

作者是在本地WINDOWS的CHROME浏览器上安装MetaMask钱包工具，具体的安装方法参考文章《第一课 如何在WINDOWS环境下搭建以太坊开发环境》的“（7）安装 MetaMask 【可选】”章节。

The author installed the MetaMask Wallet Tool on the local WINDOWS browser, with a specific method reference article .

说明下，最详细的MetaMask安装/配置文章可参考欧阳哥哥的《以太坊钱包MetaMask使用教程》

Note that the most detailed installation/configuring article by MetaMask can be found in Brother Ouyang's

配置钱包

1. 接受隐私条款

1. Acceptance of privacy provisions

点击浏览器地址栏右侧，MetaMask的狐狸头图标，第一次使用时，会出一个隐私提示，如下图：

Click on the right side of the browser address bar, the Fox Head icon of MetaMask. When used for the first time, a private tip will appear, as follows:

隐私提示

Privacy hints

2. 接受服务条款

2. Acceptance of service terms

点击按钮，显示的是MetaMask的服务条款，如下图2-2：

Click on the button to show the service terms of MetaMask, as follows:

image.png

按钮默认是灰色的，将滚动条拉到底部，就可以点击按钮了

Button defaults to be gray, pulls the scrollbar to the bottom, and clicks on the button.

3、创建新账号

3, create a new account

• 创建新账号：输入一串8位以上的密码，再次重复输入，点击按钮，即可完成。 下面以创建新账号为例：

作者启动大写键使用自己的通用密码设置

Authors start uppercase buttons with their own universal password settings

在点击按钮后，MetaMask会为用户创建12个英文助记词，一定要保存好这些助记词，点击可以将助词词以文件的形式保存到本地，建议使用纸笔手工记录并收藏于安全的地方。

After clicking on the button, MetaMask will create 12 English assistive words for the user. It is important to keep them. Click to save the assistive words locally in the form of a file. It is recommended that they be recorded manually in paper and in a secure place.

SEED

连接开发区块链网络

默认连接的是以太坊主网（左上角显示），选择Custom RPC，添加Ubuntu的IP地址作为客户自定义RPC网络

The default connection is in the Taiwan main network (extra-left corner display), selecting Custom RPC and adding Ubuntu's IP address as a custom RPC network for clients

http://192.168.80.144:8545

链接测试机以太坊客户端成功，菜单有链接成功的橙色√提示。

The link tester was successful on the Taiwan client, and the menu has an orange tip for a successful link.

连接成功

Connected successfully

这是左上角显示为Private Network，此时显示的是默认的Account 1空账号，ETH数量为0。

This is the upper left corner shown as PrivateNetwork, which shows the default Account 1 empty account number with an ETH number of zero.

导入Ganache-cli的第一个钱包账号

查看“trace.log”文件，可以Ganache-cli的第一个默认钱包地址为

View "trace.log" files with the first default wallet address of Ganache-cli

选择MetaMask的“Import Account”输入私钥，获取账号，可以查看对应ETH余额。

Select the 'Import Account' of MetaMask to enter the private key, get the account number, and see the corresponding ETH balance.

输入私钥

Enter private key

第一个钱包账户的余额：

Balance of the first wallet account:

99.211ETH,智能合约运行已消耗

99.211ETH, smart contract running consumed

第二个钱包账户的余额：

Balance of the second wallet account:

100ETH，未消耗过

100 ETH, not consumed

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

To this end, the installation of MetaMask has been completed.

修改文件引用jquery的地址

Modify file reference to jquery

在WINDOWS浏览器输入测试网站地址

Enter test site address on WINDOWS browser

http://192.168.80.144:3000/

可以看到宠物商店的入口界面：

You can see the entry interface to the pet store:

可爱的狗狗

Cute dog.

点击“Adopt”按钮，领养这个最漂亮的狗狗宝贝。MetaMask会提示我们交易的确认，如图：

Click on the Adopt button to adopt the prettiest dog baby. MetaMask will give us confirmation of the transaction, for example:

要从当前账号6扣除交易费用

To deduct transaction costs from current account number 6

点击“SUBMIT”按钮成功后，这个狗狗的按钮变为"SUCCESS"，该狗狗已被包养了。

After clicking on the SUBMIT button, the dog's button becomes &quat; SUCCES&quat; the dog is already covered.

领养成功

The adoption was successful.

查看当前打开的账号ACCOUNT6，发现金额不再是100ETH，而是99.999ETH了。

Checking the currently open account number ACCoUNT6 found that the amount was no longer 100 ETH, but 99.9999 ETH.

账户余额消耗

Consumption of account balances

恭喜你，开发并成功部署了一个DAPP区块链应用程序，并且领养了几只小狗狗。

Congratulations on the development and successful deployment of a DAPP block chain application and the adoption of a few puppies.

欧易(OKX)最新版本

【遇到注册下载问题请加文章最下面的客服微信】永久享受返佣20%手续费！

APP下载   全球官网 大陆官网

币安(Binance)最新版本

币安交易所app【遇到注册下载问题请加文章最下面的客服微信】永久享受返佣20%手续费！

APP下载   官网地址

火币HTX最新版本

火币老牌交易所【遇到注册下载问题请加文章最下面的客服微信】永久享受返佣20%手续费！

APP下载   官网地址