✍️
HyperGraph-Decentralized Data Engine
  • 欢迎了解 HyperGraph
  • 💰Farm - 挖矿帮助
    • 了解挖矿
      • DeFi挖矿的本质
      • 挖矿需要的准备工作
      • DeFi挖矿与其他挖矿的异同
      • 挖矿产出、轮次
      • 矿池介绍
    • 钱包基本操作
      • 火币钱包注册Heco地址
      • TokenPocket(Heco)
      • MetaMask 的网页版
      • MetaMask 连接 Heco 主网
      • BitKeep 钱包
    • 挖矿资产准备
      • 如何转入HT或者其他主流资产
      • 兑换所需币种
      • 添加流动性
    • 质押挖矿
    • 常用术语
    • 合约操作
      • 合约操作介绍
      • 合约操作环境准备
      • 合约数据读取
      • 合约写操作执行
  • 🛠️Product - 产品帮助
    • 产品使用篇
      • HyperGraph 的产品业务
      • 控制台注册与登录
      • 添加子图
      • 查看子图
    • 程序开发
      • 业务交互流程
      • 快速入门
      • 远程部署
      • 开发部署 FAQ
      • 子图开发
      • GraphQL API
      • AssemblyScript API(一)
      • AssemblyScript API(二)
    • 项目范例
      • Uniswap subgraph 范例
      • Uniswap-info 范例
    • 常用子图
    • 服务用户
  • 🪜HyperBridge
    • HyperBridge
    • Token 跨链
    • 主流跨链
    • 主流流动性提供
    • 主流购买Gas
  • 🧩 Network - 节点网络
    • 总体介绍
    • 网络建设
    • 节点角色
    • 节点设备
    • 节点查看与管理
    • 节点托管类型
    • 定价方案第二版
    • 节点网络 FAQ
    • Heco 网络公开归档节点
  • 📖 INTRODUCTION - 项目介绍
    • HyperGraph 简介
    • HyperGraph 优势
    • 跨链支持
    • 常用合约地址
    • 通证分配
    • HyperGraph 审计报告
  • 🔬DApp开发教程
    • DApp开发基础认识
    • 开发前的准备
    • 基础开发环境
    • Web3与Solidity基础
    • ERC720 开发实例
    • ERC721 DApp 开发实例
  • 🔗 Links - 其他链接
    • HyperGraph 官网
    • HyperGraph White Paper
    • HyperGraph 挖矿页
    • Heco 区块浏览器
    • BSC 区块浏览器
    • English Document
Powered by GitBook
On this page

Was this helpful?

  1. DApp开发教程

ERC721 DApp 开发实例

PreviousERC720 开发实例

Last updated 4 years ago

Was this helpful?

本教程是技术大牛 luofei614 的DApp开发学习笔记,编成教程分享给开发者。

DAPP例子:领取宠物

  • 拉群官方pet-shop的项目模板:

truffle unbox pet-shop

truffle unbox 可以下载一些项目模板代码。 更多查看: https://www.trufflesuite.com/boxes

  • 目录结构:

contracts/: 存放合约文件夹

migrations/: 部署迁移改变文件夹

test/: 测试文件

truffle-config.js: 配置文件

  • 安装node模块依赖

yarn install

  • 运行项目

yarn dev

浏览器看见界面如下:

此项目只显示了前端, 还没实现合约和交互。 我们继续添加代码让他可以实现区块链领宠物。

  • 下面来创建智能合约:

在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);

adopters[petId]=msg.sender;

return petId;

}

function getAdopters() public view returns(address[16] memory){

return adopters;

}

}

编译合约,在项目根目录运行命令

truffle compile

编译的结果是会在build/contracts 生成合约的json文件。 json文件中包含了合约的abi信息和bytecode编码。 这个json中还有一个networks字段,是合约部署完成后会显示出区块链网络内容。

  • 创建迁移文件

在migrations目录下创建2_deploy_contracts.js文件:

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

module.exports = function(deployer) {

deployer.deploy(Adoption);

};

  • 部署合约

本地打卡Ganache, 默认监听的端口是7545

truffle-config.js 中以及设置了开发环境的测试区块链RPC地址,默认就是为本地测试网络7545的

Ganache,默认有创建十个以太坊账号,并都充了100ETH

部署合约运行命令:

truffle migrate

部署成功后,可以在Ganache界面中看见区块增多,并且第一个账户的以太坊减少, 默认会以第一个账户作为部署账户, 减少的以太坊是部署合约是gas花费。

当 truffle migrate 运行多少时,已经部署过的合约不会再部署,需要重新部署需要在运行时加上参数 --reset

  • 编写js代码:

在/src/js/app.js文件中的initWeb3函数中添加如下代码:

初始化Web3,链接钱包:

// 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);

window.ethereum 是MetaMask插件的对象, window.ethereum.enable() 可以弹出MetaMask选择钱包。

初始化合约实例,设置Provider:

在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();

});

这个为什么Adoption.json可以直接获得数据, 是因为根目录下bs-config.json中配置了baseDir中有 build/contracts

在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);

});

此代码获取合约中已经被领取的代码,标记为已领取,其他人不能再领取。

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);

});

});

将上面代码替换注释 replace me

现在这个例子可以完整跑了。 注意在使用时,将自己MetaMask钱包地址切换为测试网络。 并添加一个有余额的账号。 可以Ganache界面上选一个有余额的账号,复制私钥, 在MetaMask钱包创建账号时选择导入私钥。

原始教程地址:

🔬
https://www.trufflesuite.com/tutorial
图片