以太坊智能合约DAPP区块链开发

ゞ浴缸里的玫瑰 2022-05-29 00:13 336阅读 0赞

**作者也是刚入坑的小白，查看了网上很多示例也踩了很多坑，现将自己实际部署的情况总结如下，亲测有效：**

**机器环境为：**

Ubuntu 14.04.5

Node (v9.0.0)

Truffle

Ganache

npm (5.3.0)

在搭建智能合约之前需要提前安装好Node、Truffle 、Ganache、npm等需要的软件。

**展示效果**

部署好之后就可以领养狗狗，效果图如下：

![Image 1][]

**项目背景**

Pete有一个宠物店，他想开发一个去中心化应用，让大家来领养宠物。在truffle box中，已经提供了pet-shop的网站部分的代码，我们只需要编写合约及交互部分。有关truffle box可在github上可以找到相应的相应的源代码信息https://github.com/truffle-box/pet-shop-box

## 环境搭建 ##

1.  安装Node
2.  安装 Truffle ：`npm install -g truffle`
3.  安装Ganache

> Ganache（或Ganache CLI）已经取代了 testrpc。

## 创建项目 ##

1. 建立项目目录并进入
 
 <table style="margin:0px 0px 10px;padding:0px;width:634.4px;max-width:100%;"> 
 <tbody style="margin:0px;padding:0px;max-width:100%;"> 
 <tr style="margin:0px;padding:0px;max-width:100%;background-color:rgb(249,249,249);"> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">1 2 </pre></td> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">&gt; mkdir pet-shop-tutorial &gt; cd pet-shop-tutorial </pre></td> 
 </tr> 
 </tbody> 
 </table>
2. 使用truffle unbox 创建项目
 
 <table style="margin:0px 0px 10px;padding:0px;width:634.4px;max-width:100%;"> 
 <tbody style="margin:0px;padding:0px;max-width:100%;"> 
 <tr style="margin:0px;padding:0px;max-width:100%;background-color:rgb(249,249,249);"> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">1 2 3 4 5 6 7 8 9 10 11 12 </pre></td> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;"> &gt; truffle unbox pet-shop Downloading... Unpacking... Setting up... Unbox successful. Sweet! Commands: &nbsp;Compile: &nbsp; &nbsp; &nbsp; &nbsp;truffle compile &nbsp;Migrate: &nbsp; &nbsp; &nbsp; &nbsp;truffle migrate &nbsp;Test contracts: truffle test &nbsp;Run dev server: npm run dev </pre></td> 
 </tr> 
 </tbody> 
 </table>

这一步需要等待一会

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

## 项目目录结构 ##

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

其他代码可以暂时不用管

## 编写智能合约 ##

智能合约承担着分布式应用的后台逻辑和存储。智能合约使用solidity编写，可阅读  
\[solidity系列文章\]（https://learnblockchain.cn/categories/ethereum/Solidity/）

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

## 编译部署智能合约 ##

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

### 编译 ###

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

输出

### 部署 ###

编译之后，就可以部署到区块链上。  
在migrations文件夹下已经有一个1\_initial\_migration.js部署脚本，用来部署Migrations.sol合约。  
Migrations.sol 用来确保不会部署相同的合约。

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

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

Ganache来开启一个私链来进行开发测试，默认会在7545端口上运行一个开发链。

Ganache 启动之后是这样：

![Image 1][]

接下来执行部署命令:

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

在打开的Ganache里可以看到区块链状态的变化，现在产生了4个区块。  
![Image 1][]

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

也可以直接下载liunx版本的ganache-cli ，直接启动ganache-cli，会生成10个账户，为私有链，账户中有100ETH的余额。执行界面如下：

![Image 1][]

接下来执行部署命令:

<table style="width:669.6px;margin:0px 0px 10px;padding:0px;max-width:100%;"> 
 <tbody style="margin:0px;padding:0px;max-width:100%;"> 
 <tr style="background-color:rgb(249,249,249);margin:0px;padding:0px;max-width:100%;"> 
 <td style="border-style:none;padding:0px;margin:0px;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">1 </pre></td> 
 <td style="border-style:none;padding:0px;margin:0px;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">&gt; truffle &nbsp;migrate</pre></td> 
 </tr> 
 </tbody> 
</table>

执行结果和上面相同，生成4个区块。

## 测试 ##

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

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

<table style="margin:0px 0px 10px;padding:0px;width:669.6px;max-width:100%;"> 
 <tbody style="margin:0px;padding:0px;max-width:100%;"> 
 <tr style="margin:0px;padding:0px;max-width:100%;background-color:rgb(249,249,249);"> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 </pre></td> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;"> pragma solidity ^0.4.17; import "truffle/Assert.sol"; &nbsp; // 引入的断言 import "truffle/DeployedAddresses.sol"; &nbsp;// 用来获取被测试合约的地址 import "../contracts/Adoption.sol"; &nbsp; &nbsp; &nbsp;// 被测试合约 contract TestAdoption {
 &nbsp;Adoption adoption = Adoption(DeployedAddresses.Adoption()); &nbsp;// 领养测试用例 &nbsp;function testUserCanAdoptPet() public {
 &nbsp; &nbsp;uint returnedId = adoption.adopt(8); &nbsp; &nbsp;uint expected = 8; &nbsp; &nbsp;Assert.equal(returnedId, expected, "Adoption of pet ID 8 should be recorded."); &nbsp;} &nbsp;// 宠物所有者测试用例 &nbsp;function testGetAdopterAddressByPetId() public {
 &nbsp; &nbsp;// 期望领养者的地址就是本合约地址，因为交易是由测试合约发起交易， &nbsp; &nbsp;address expected = this; &nbsp; &nbsp;address adopter = adoption.adopters(8); &nbsp; &nbsp;Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded."); &nbsp;} &nbsp; &nbsp;// 测试所有领养者 &nbsp;function testGetAdopterAddressByPetIdInArray() public {
 &nbsp;// 领养者的地址就是本合约地址 &nbsp; &nbsp;address expected = this; &nbsp; &nbsp;address[16] memory adopters = adoption.getAdopters(); &nbsp; &nbsp;Assert.equal(adopters[8], expected, "Owner of pet ID 8 should be recorded."); &nbsp;} } </pre></td> 
 </tr> 
 </tbody> 
</table>

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

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

### 运行测试用例 ###

在终端中，执行

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

## 创建用户接口和智能合约交互 ##

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

在Truffle Box `pet-shop`里，已经包含了应用的前端代码，代码在`src/`文件夹下。

在编辑器中打开`src/js/app.js`  
可以看到用来管理整个应用的App对象，init函数加载宠物信息，就初始化web3.  
web3是一个实现了与以太坊节点通信的库，我们利用web3来和合约进行交互。

### 初始化web3 ###

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

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

### 实例化合约 ###

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

<table style="margin:0px 0px 10px;padding:0px;width:738px;max-width:100%;"> 
 <tbody style="margin:0px;padding:0px;max-width:100%;"> 
 <tr style="margin:0px;padding:0px;max-width:100%;background-color:rgb(249,249,249);"> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">initContract: function() {
 &nbsp;// 加载Adoption.json，保存了Adoption的ABI（接口说明）信息及部署后的网络(地址)信息，它在编译合约的时候生成ABI，在部署的时候追加网络信息 &nbsp;$.getJSON('Adoption.json', function(data) {
 &nbsp; &nbsp;// 用Adoption.json数据创建一个可交互的TruffleContract合约实例。 &nbsp; &nbsp;var AdoptionArtifact = data; &nbsp; &nbsp;App.contracts.Adoption = TruffleContract(AdoptionArtifact); &nbsp; &nbsp;// Set the provider for our contract &nbsp; &nbsp;App.contracts.Adoption.setProvider(App.web3Provider); &nbsp; &nbsp;// Use our contract to retrieve and mark the adopted pets &nbsp; &nbsp;return App.markAdopted(); &nbsp;}); &nbsp;return App.bindEvents(); } </pre></td> 
 </tr> 
 </tbody> 
</table>

### 处理领养 ###

修改markAdopted()代码：

修改handleAdopt()代码：

<table style="margin:0px 0px 10px;padding:0px;width:669.6px;max-width:100%;"> 
 <tbody style="margin:0px;padding:0px;max-width:100%;"> 
 <tr style="margin:0px;padding:0px;max-width:100%;background-color:rgb(249,249,249);"> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </pre></td> 
 <td style="margin:0px;padding:0px;border-style:none;max-width:100%;vertical-align:middle;"><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;max-width:100%;">handleAdopt: function(event) {
 &nbsp;event.preventDefault(); &nbsp;var petId = parseInt($(event.target).data('id')); &nbsp;var adoptionInstance; &nbsp;// 获取用户账号 &nbsp;web3.eth.getAccounts(function(error, accounts) {
 &nbsp; &nbsp;if (error) {
 &nbsp; &nbsp; &nbsp;console.log(error); &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp;var account = accounts[0]; &nbsp; &nbsp; &nbsp;App.contracts.Adoption.deployed().then(function(instance) {
 &nbsp; &nbsp; &nbsp;adoptionInstance = instance; &nbsp; &nbsp; &nbsp; &nbsp;// 发送交易领养宠物 &nbsp; &nbsp; &nbsp;return adoptionInstance.adopt(petId, {
 from: account}); &nbsp; &nbsp;}).then(function(result) {
 &nbsp; &nbsp; &nbsp;return App.markAdopted(); &nbsp; &nbsp;}).catch(function(err) {
 &nbsp; &nbsp; &nbsp;console.log(err.message); &nbsp; &nbsp;}); &nbsp;}); } </pre></td> 
 </tr> 
 </tbody> 
</table>

## 在浏览器中运行 ##

### 安装 MetaMask ###

MetaMask 是一款插件形式的以太坊轻客户端，开发过程中使用MetaMask和我们的dapp进行交互是个很好的选择，通过此链接安装，安装完成后，浏览器工具条会显示一个小狐狸图标。

### 配置钱包 ###

在接受隐私说明后，会出现页面如下：  
                                      ![Image 1][]

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

然后自己想要的密码，点击OK。  
如图：  
                                        ![Image 1][]

### 连接开发区块链网络 ###

默认连接的是以太坊主网（左上角显示），选择Custom RPC，添加一个网络：http://127.0.0.1:7545 （这里替换成自己的IP的端口）点返回后，显示如下：  
                                         ![Image 1][]

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

如要替换账号点击右上角的圆圈，然后点击Import Account ，将Ganache生成的私钥(Private Keys)填写即可。

![Image 1][]