区块链web3项目实战-Truffle petshop

文章目录

• 前言
• 一、设置开发环境？
• [二、使用 Truffle Box 创建 Truffle 项](#二、使用 Truffle Box 创建 Truffle 项)
• • [1.Truffle Boxpet-shop](#1.Truffle Boxpet-shop)
  • 2.目录结构
• 三、编写智能合约
• • 变量设置
  • 第一个功能：领养宠物
  • 第二个功能：检索采用者
  • 编译和迁移智能合约
  • 迁移
• 四、创建用户界面与智能合约进行交互
• • [实例化 web3](#实例化 web3)
  • 实例化合约
  • [获取已领养的宠物并更新 UI](#获取已领养的宠物并更新 UI)
  • [处理 adopt() 函数](#处理 adopt() 函数)
• [5.在浏览器中与 dapp 交互](#5.在浏览器中与 dapp 交互)
• • dapp交互
• 总结

---

前言

提示：这里可以添加本文要记录的大概内容：

最近一直在学习寻找关于web3相关的实战小项目，这段时间的学习有过迷茫也有过不知所措，但是学习的路上总是枯燥无味的。

接下来给大家介绍一下web3的一个dapp小项目--petshop宠物商店

本教程将介绍

1. 设置开发环境
2. 使用 Truffle Box 创建 Truffle 项目
3. 编写智能合约
4. 编译和迁移智能合约
5. 测试智能合约
6. 创建用户界面与智能合约进行交互
7. 在浏览器中与 dapp 交互

---

一、设置开发环境？

大家需要自行安装node.js和npm
https://nodejs.org/en/

安装完成后，我们只需要一个命令即可安装Truffle

npm install -g truffle

要验证 Truffle 是否正确安装，请truffle version在终端中输入。如果看到错误，请确保 npm 模块已添加到路径中。

我们还需要安装一个Ganache

我们还将使用Ganache，这是一个用于以太坊开发的个人区块链，您可以用它来部署合约、开发应用程序和运行测试。您可以访问 https://trufflesuite.com/ganache 并点击"下载"按钮下载 Ganache。

二、使用 Truffle Box 创建 Truffle 项

1.Truffle Boxpet-shop

本教程创建了一个名为 的Truffle Boxpet-shop，其中包含基本的项目结构以及用户界面代码。使用truffle unbox命令 解压此 Truffle Box

truffle unbox pet-shop

2.目录结构

默认的 Truffle 目录结构包含以下内容：

• contracts/：包含我们智能合约的Solidity源文件。这里有一个很重要的合约Migrations.sol，叫做
  ，我们稍后会讨论。
• migrations/：Truffle 使用迁移系统来处理智能合约的部署。迁移是一种额外的特殊智能合约，用于跟踪变更。
• test/：包含我们的智能合约的 JavaScript 和 Solidity 测试
• truffle-config.js：Truffle 配置文件
• Truffle pet-shopBox 中有额外的文件和文件夹，但我们现在还不必担心这些。
  

三、编写智能合约

我们将通过编写充当后端逻辑和存储的智能合约来启动我们的 dapp。

1.在contracts/目录中创建一个名为的新文件Adoption.sol。

2.在文件中添加以下内容：

pragma solidity ^0.5.0;

contract Adoption {

}

变量设置

Solidity 是一种静态类型语言，这意味着必须定义字符串、整数和数组等数据类型。Solidity有一种称为地址的独特类型。地址是以太坊地址，存储为 20 个字节的值。以太坊区块链上的每个账户和智能合约都有一个地址，并且可以从该地址发送和接收以太币。

address[16] public adopters;

第一个功能：领养宠物

// Adopting a pet
function adopt(uint petId) public returns (uint) {
  require(petId >= 0 && petId <= 15);

  adopters[petId] = msg.sender;

  return petId;
}

• 在 Solidity 中，函数参数和输出的类型都必须指定。在本例中，我们将输入一个petId整数，并返回一个整数。
• 我们正在检查以确保petId它在数组范围内adopters。Solidity 中的数组索引从 0 开始，因此 ID 值需要介于 0 到
  15 之间。我们使用require()语句来确保 ID 在范围内。
• 如果 ID 在范围内，我们将调用该函数的地址添加到adopters数组中。调用此函数的个人或智能合约的地址用 表示msg.sender。
• 最后，我们返回petId所提供的信息作为确认。

第二个功能：检索采用者

如上所述，数组 getter 函数只会从给定的键返回一个值。我们的 UI 需要更新所有宠物的领养状态，但进行 16 次 API 调用并不理想。因此，下一步是编写一个函数来返回整个数组。

// Retrieving the adopters
function getAdopters() public view returns (address[16] memory) {
  return adopters;
}

• 由于adopters已经声明，我们可以直接返回它。请务必将返回类型（在本例中为 的类型adopters）指定为address[16]
  memory。memory给出了变量的数据位置。
• 函数声明中的关键字view表示该函数不会修改合约的状态。

编译和迁移智能合约

Solidity 是一种编译型语言，这意味着我们需要将 Solidity 编译成字节码，以供以太坊虚拟机 (EVM) 执行。我们可以将其理解为将人类可读的 Solidity 代码翻译成 EVM 能够理解的代码。

truffle compile

迁移

现在我们已经成功编译了我们的合约，是时候将它们迁移到区块链了！
迁移是一种部署脚本，用于更改应用程序合约的状态，使其从一个状态迁移到另一个状态。对于第一次迁移，您可能只是部署新代码，但随着时间的推移，其他迁移可能会移动数据或用新合约替换旧合约。

1. 在migrations/目录中创建一个名为的新文件2_deploy_contracts.js。
2. 在文件中添加以下内容2_deploy_contracts.js：

var Adoption = artifacts.require("Adoption");

module.exports = function(deployer) {
  deployer.deploy(Adoption);
};

迁移命令

truffle migrate

四、创建用户界面与智能合约进行交互

现在我们已经创建了智能合约，将其部署到我们的本地测试区块链，并确认我们可以通过控制台与其交互，现在是时候创建一个 UI 以便 Pete 可以在他的宠物店使用一些东西了！

Truffle Box中包含了pet-shop该应用前端的代码。该代码位于src/目录中。

前端不使用构建系统（webpack、grunt 等），以便尽可能简化上手。应用程序的架构已经确定；我们将逐步完善以太坊独有的功能。这样，您就可以将这些知识运用到自己的前端开发中。

实例化 web3

1. /src/js/app.js在文本编辑器中打开。
2. 检查该文件。请注意，有一个全局App对象用于管理我们的应用程序，加载宠物数据init()，然后调用函数initWeb3()。web3
   JavaScript 库与以太坊区块链交互。它可以检索用户帐户、发送交易、与智能合约交互等等。
3. 删除其中的多行注释initWeb3并将其替换为以下内容：

// Modern dapp browsers...
if (window.ethereum) {
  App.web3Provider = window.ethereum;
  try {
    // Request account access
    await window.ethereum.enable();
  } catch (error) {
    // User denied account access...
    console.error("User denied account access")
  }
}
// Legacy dapp browsers...
else if (window.web3) {
  App.web3Provider = window.web3.currentProvider;
}
// If no injected web3 instance is detected, fall back to Ganache
else {
  App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
}
web3 = new Web3(App.web3Provider);

实例化合约

现在我们可以通过 web3 与以太坊交互，我们需要实例化我们的智能合约，以便 web3 知道在哪里找到它以及它如何工作。Truffle 有一个名为 的库可以帮助实现这一点@truffle/contract。它将合约信息与迁移保持同步，因此您无需手动更改合约的部署地址。

1. 仍然在 中/src/js/app.js，删除其中的多行注释initContract并将其替换为以下内容

$.getJSON('Adoption.json', function(data) {
  // Get the necessary contract artifact file and instantiate it with @truffle/contract
  var AdoptionArtifact = data;
  App.contracts.Adoption = TruffleContract(AdoptionArtifact);

  // Set the provider for our contract
  App.contracts.Adoption.setProvider(App.web3Provider);

  // Use our contract to retrieve and mark the adopted pets
  return App.markAdopted();
});

获取已领养的宠物并更新 UI

1. 仍然在 中/src/js/app.js，删除多行注释markAdopted并将其替换为以下内容：

var adoptionInstance;

App.contracts.Adoption.deployed().then(function(instance) {
  adoptionInstance = instance;

  return adoptionInstance.getAdopters.call();
}).then(function(adopters) {
  for (i = 0; i < adopters.length; i++) {
    if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
      $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
    }
  }
}).catch(function(err) {
  console.log(err.message);
});

注意事项：

• 我们访问已部署的Adoption合约，然后调用getAdopters()该实例。
• 我们首先在智能合约调用之外声明变量，adoptionInstance以便我们可以在最初检索实例后访问它。
• 使用call()允许我们从区块链读取数据而无需发送完整的交易，这意味着我们不必花费任何以太币。
• 调用 之后getAdopters()，我们循环遍历所有方法，检查是否为每只宠物存储了地址。由于数组包含地址类型，因此以太坊会使用 16
  个空地址初始化该数组。因此，我们检查地址字符串是否为空，而不是 null 或其他 false 值。
• 一旦petId找到具有相应地址的，我们就会禁用其采用按钮并将按钮文本更改为"成功"，以便用户获得一些反馈。
• 任何错误都会记录到控制台。

处理 adopt() 函数

1. 仍然在 中/src/js/app.js，删除多行注释handleAdopt并将其替换为以下内容：

var adoptionInstance;

web3.eth.getAccounts(function(error, accounts) {
  if (error) {
    console.log(error);
  }

  var account = accounts[0];

  App.contracts.Adoption.deployed().then(function(instance) {
    adoptionInstance = instance;

    // Execute adopt as a transaction by sending account
    return adoptionInstance.adopt(petId, {from: account});
  }).then(function(result) {
    return App.markAdopted();
  }).catch(function(err) {
    console.log(err.message);
  });
});

5.在浏览器中与 dapp 交互

大家自行注册MetaMask
https://metamask.io/

注册完成之后我们会在浏览器的插件上面有一个小狐狸的标

我先在Ganache里面创建对应的空间，注意要设置对于的链ID；新版本的MetaMask只支持1337

然后在MetaMask中设置新的网络

然后在MetaMask中去添加的Address；链接上本地的链

dapp交互

代码中输入

npm run dev

点击Adopt；MetaMask会让你同意请求，点击确认即可

总结

本文介绍了如何开发一个基于Web3的宠物商店DApp。主要内容包括：1）搭建开发环境，安装Node.js、Truffle和Ganache；2）使用Truffle Box创建项目结构；3）编写Adoption智能合约，实现宠物领养和查询功能；4）编译和部署合约到本地测试链；5）创建前端界面与合约交互，包括初始化web3实例和合约实例。这是一个完整的DApp开发流程，适合初学者入门Web3开发。通过这个项目可以学习到智能合约编写、部署和前端交互等核心概念。