Truffle Web3.js -开发、部署第一个去中心化应用(Dapp) - 宠物商店

2023-12-23 17:32
文章标签 部署 应用 开发 js 第一个 web3 中心化 dapp 宠物商店 truffle

本文主要是介绍Truffle Web3.js -开发、部署第一个去中心化应用(Dapp) - 宠物商店，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

阅读本文前，你应该对以太坊、智能合约有所了解，如果你还不了解，建议你先看以太坊是什么 除此之外，你最好还了解一些 HTML 及
JavaScript 知识。

修改后完整源代码: 下载 pet-shop-tutorial.zip
本文通过实例教大家来开发去中心化应用，应用效果如图：
在这里插入图片描述

从本文，你可以学习到：

  • 搭建智能合约开发环境
  • 创建 Truffle 项目
  • 编写智能合约
  • 编译和部署智能合约到区块链
  • 如何通过 Web3 和智能合约交互
  • MetaMask 的使用

项目背景

Pete 有一个宠物店，有 16 只宠物，他想开发一个去中心化应用，让大家来领养宠物。
在 truffle box 中，已经提供了 pet-shop 的网站部分的代码，我们只需要编写合约及交互部分。

环境搭建

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

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

创建项目

  1. 建立项目目录并进入
> mkdir pet-shop-tutorial
> cd pet-shop-tutorial

2.使用 truffle unbox 创建项目

 > truffle unbox pet-shopDownloading...Unpacking...Setting up...Unbox successful. Sweet!Commands:Compile:        truffle compileMigrate:        truffle migrateTest contracts: truffle testRun dev server: npm run dev

这一步需要等待一会

项目目录结构

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

其他代码可以暂时不用管

编写智能合约

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

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

pragma solidity ^0.5.0;contract Adoption {address[16] public adopters;  // 保存领养者的地址// 领养宠物function adopt(uint petId) public returns (uint) {require(petId >= 0 && petId <= 15);  // 确保id在数组长度内adopters[petId] = msg.sender;        // 保存调用这地址return petId;}// 返回领养者function getAdopters() public view returns (address[16] memory) {return adopters;}}

编译部署智能合约

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

编译

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

> truffle compile

输出

Compiling ./contracts/Adoption.sol...
Writing artifacts to ./build/contracts

部署

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

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

var Adoption = artifacts.require("Adoption");module.exports = function(deployer) {deployer.deploy(Adoption);
};

在执行部署之前，需要确保有一个区块链运行， 可以使用
Ganache 来开启一个私链来进行开发测试，默认会在 7545 端口上运行一个开发链。
Ganache 启动之后是这样：
在这里插入图片描述
接下来执行部署命令：

> truffle  migrate

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

Using network 'develop'.Running migration: 1_initial_migration.jsDeploying Migrations...... 0x3076b7dac65afc44ec51508bf6f2b6894f833f0f9560ecad2d6d41ed98a4679fMigrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0
Saving successful migration to network...... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956
Saving artifacts...
Running migration: 2_deploy_contracts.jsDeploying Adoption...... 0x2c6ab4471c225b5473f2079ee42ca1356007e51d5bb57eb80bfeb406acc35cd4Adoption: 0x345ca3e014aaf5dca488057592ee47305d9b3e10
Saving successful migration to network...... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0
Saving artifacts...

在打开的 Ganache 里可以看到区块链状态的变化，现在产生了多个新的区块。
在这里插入图片描述
这时说明已经智能合约已经部署好了。

测试

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

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

pragma solidity ^0.5.0;import "truffle/Assert.sol";   // 引入的断言
import "truffle/DeployedAddresses.sol";  // 用来获取被测试合约的地址
import "../contracts/Adoption.sol";      // 被测试合约contract TestAdoption {Adoption adoption = Adoption(DeployedAddresses.Adoption());// 领养测试用例function testUserCanAdoptPet() public {uint returnedId = adoption.adopt(8);uint expected = 8;Assert.equal(returnedId, expected, "Adoption of pet ID 8 should be recorded.");}// 宠物所有者测试用例function testGetAdopterAddressByPetId() public {// 期望领养者的地址就是本合约地址，因为交易是由测试合约发起交易，address expected = this;address adopter = adoption.adopters(8);Assert.equal(adopter, expected, "Owner of pet ID 8 should be recorded.");}// 测试所有领养者function testGetAdopterAddressByPetIdInArray() public {// 领养者的地址就是本合约地址address expected = this;address[16] memory adopters = adoption.getAdopters();Assert.equal(adopters[8], expected, "Owner of pet ID 8 should be recorded.");}
}

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

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

运行测试用例

在终端中，执行

truffle test

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

Using network 'develop'.Compiling ./contracts/Adoption.sol...
Compiling ./test/TestAdoption.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...TestAdoption✓ testUserCanAdoptPet (62ms)✓ testGetAdopterAddressByPetId (53ms)✓ testGetAdopterAddressByPetIdInArray (73ms)3 passing (554ms)

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

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

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

在编辑器中打开 src/js/app.js

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

初始化 web3

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

  initWeb3: async function() {// Modern dapp browsers...if (window.ethereum) {App.web3Provider = window.ethereum;try {// Request account accessawait 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 Ganacheelse {App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');}web3 = new Web3(App.web3Provider);return App.initContract();}

新的 Dapp 浏览器或 MetaMask 的新版本，注入了一个 ethereum 对象到 window 对象里， 应该优先使用 ethereum 来构造 web3， 同时使用 ethereum.enable() 来请求用户授权访问链接账号。

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

实例化合约

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

initContract: function() {// 加载Adoption.json，保存了Adoption的ABI（接口说明）信息及部署后的网络(地址)信息，它在编译合约的时候生成ABI，在部署的时候追加网络信息$.getJSON('Adoption.json', function(data) {// 用Adoption.json数据创建一个可交互的TruffleContract合约实例。var AdoptionArtifact = data;App.contracts.Adoption = TruffleContract(AdoptionArtifact);// Set the provider for our contractApp.contracts.Adoption.setProvider(App.web3Provider);// Use our contract to retrieve and mark the adopted petsreturn App.markAdopted();});return App.bindEvents();
}

处理领养

修改 markAdopted()代码：

  markAdopted: function(adopters, account) {var adoptionInstance;App.contracts.Adoption.deployed().then(function(instance) {adoptionInstance = instance;// 调用合约的getAdopters(), 用call读取信息不用消耗gasreturn 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);});}

修改 handleAdopt()代码：

 handleAdopt: function(event) {event.preventDefault();var petId = parseInt($(event.target).data('id'));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;// 发送交易领养宠物return adoptionInstance.adopt(petId, {from: account});}).then(function(result) {return App.markAdopted();}).catch(function(err) {console.log(err.message);});});}

在浏览器中运行

如下MetaMak操作可分三步，可通过其他文章查阅。

1.安装 MetaMask

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

2.配置钱包

3.连接开发区块链网络

在这里插入图片描述

在这里插入图片描述

启动服务

> npm run dev

会自动打开浏览器显示我们的 dapp，如下图。
现在领养一直宠物看看，当我们点击 Adopt 时，MetaMask 会提示我们交易的确认，待确认后，领用状态发生变化，如图：
在这里插入图片描述

这篇关于Truffle Web3.js -开发、部署第一个去中心化应用(Dapp) - 宠物商店的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/528837。

相关文章

闲置电脑也能活出第二春？鲁大师AiNAS让你动动手指就能轻松部署

闲置电脑也能活出第二春？鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言，在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况，这使得“存储焦虑”不再是个别现象，而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得，我们似乎正处在互联网信息飞速增长的阶段，对于存储的需求也将会不断扩大。对于苹果用户而言，这一问题愈发严峻，毕竟512GB和1TB版本的iPhone可不是人人都消费得起的，因此成熟的外置存储方案开
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
从去中心化到智能化：Web3如何与AI共同塑造数字生态

从去中心化到智能化：Web3如何与AI共同塑造数字生态

在数字时代的演进中，Web3和人工智能（AI）正成为塑造未来互联网的两大核心力量。Web3的去中心化理念与AI的智能化技术，正相互交织，共同推动数字生态的变革。本文将探讨Web3与AI的融合如何改变数字世界，并展望这一新兴组合如何重塑我们的在线体验。 Web3的去中心化愿景 Web3代表了互联网的第三代发展，它基于去中心化的区块链技术，旨在创建一个开放、透明且用户主导的数字生态。不同于传统
阅读更多...
好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu1394(线段树点更新的应用)

hdu1394(线段树点更新的应用)

题意：求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质，在0到n-1这些数字组成的乱序排列，将第一个数字A移到最后一位，得到的逆序数为res-a+(n-a-1) 知道上面的知识点后，可以用暴力来解 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2