月亮链 月亮链
Ctrl+D收藏月亮链
首页 > TRX > 正文

Graph:Web3全栈开发指南_Polygon

作者:

时间:1900/1/1 0:00:00

本文将详细介绍Web3DApp开发的架构、技术,以及使用哪些工具,并给出完整示例。我们先介绍Web3用到的技术:区块链,以以太坊为主流,也包括Solana、Aptos等其他非EVM链。区块链本身是软件,需要运行在一系列节点上,这些节点组成P2P网络或者半中心化网络。节点不仅负责接收新的输入并生成新的区块,还需要存储区块链运行时产生的所有数据,并负责同步、对外提供查询等RPC服务。钱包:帮助用户管理自己在区块链上资产的软件,加密存储用户的私钥。当用户需要和区块链交互时,就需要用到私钥签名;智能合约:运行在区块链上的一段托管程序,主要用来和外部账户交互;UI:这里特指前端页面,因为直接通过RPC调用合约仅限个别高级用户,普通用户仍需要一个前端页面,并通过JavaScript脚本配合钱包签名与合约交互。因为区块链上所有数据全透明,要查询任意区块的数据,可以通过EtherScan这个网站查。其他公链,无论是与Ethereum兼容的BSC、Polygon,还是不兼容的Solana、Aptos等,也提供类似XxxScan这样的查询网站。这些Scan能提供基本的读写合约的能力,有助于开发阶段的测试。区块链本身以及钱包、EtherScan等属于基础设施,如何基础设施不在本文讨论范围之内。本文仅限定如何开发DApp。一个完整的DApp需要开发以下部分:智能合约:将逻辑写入合约,并部署在链上;UI:为用户提供一个交互式UI,配合钱包完成特定功能。此外,对后端开发有经验的同学应该知道,通常来说,App数据会存储在数据库中,前端与后端交互,离不开后端对数据的查询和修改。在DApp中,同样需要一个查询的“后端”,但这个后端通常不是数据库。有的同学会认为,既然节点本身提供了查询链上全部数据的PRC接口,那么,前端直接查询节点是否可行?答案是不行。因为节点提供的数据,是用户产生的原始日志。举个例子,假设有个NFT合约,允许用户创建NFT,那么,一段时间内,节点产生的日志如下:用户A创建了NFT-1;用户B创建了NFT-2;用户B把NFT-2转移给了用户X;用户C创建了NFT-3;...这些未经聚合处理的数据没法生成一个不断更新的数据库表:OwnerNFTID用户A1用户X2用户C3所以,一个DApp除了前端外,还需要一个后端服务,它主要功能是不断聚合链上产生的数据,并根据DApp的业务需求设计表结构以方便查询。一个直观的想法是用Java或者Go语言等编写一个后端服务,再配上一个数据库,就可以为前端提供RESTAPI来实现查询。只不过自己维护后端服务比较麻烦,还需要租用云端服务器、数据库等资源,费时费力。我们推荐另一种后端服务:TheGraph。它本身也可看作是一个基础设置。TheGraph可以让我们部署一个Graph查询服务,如何定义表结构以及如何更新则由我们提供一个预编译的WASM。整个配置、WASM代码以及查询服务都托管在TheGraph中,无需自己搭建服务器,非常方便。因此,一个完整的DApp架构如下:┌───────┐┌───────────│DApp│───────────┐│└───────┘││read/writequery││contractdata│▼▼┌───────┐┌───────┐│Wallet││Graph│└───────┘└───────┘│▲│signindex││broadcastdata││││┌─────────────││┌────┐┌────┐┌────┐││└──┼?│Node││Node│...│Node│───┘└────┘└────┘└────┘││Ethereum─────────────┘我们看看开发各个组件所需的技能树需求。由于本文仅讨论ETH以及ETH兼容链的DApp开发,所以,以下技能树仅适用于ETH系:合约开发:使用Solidity语言;合约部署工具:可以选择Hardhat、Truffle或Foundry,建议使用Hardhat;数据聚合服务:选择TheGraph提供的托管服务;数据聚合开发:TheGraph给出的模板代码是TypeScript,因此这里使用TypeScript;前端页面:HTML+JavaScript/TypeScript,也可配合任意前端框架如Vue、React等;合约交互框架:虽然理论上使用JSONRPC就可以读写合约,但使用Ethers.js可以大大简化开发;钱包支持:如果仅支持MetaMask,则使用Ethers.js已足够,如果要支持多种钱包,尤其是需要连接手机钱包,则需要使用Web3Modal。综上所述,我们可以总结一个基本的Web3全栈开发技术需求:Solidity语言;JavaScript语言;TypeScript语言;HTML/CSS等前端技能。以及用到的服务:将所有源码托管在GitHub;使用TheGraph提供的HostedService;使用GitHubPage实现静态页托管;可选:绑定一个域名。下面我们以一个具体的项目来演示Web3全栈开发的完整流程。该项目允许用户在Polygon上创建属于自己的NFT卡片,并可在页面查看链上铸造的所有NFT卡片:图片Polygon是兼容以太坊的PoS链,特点是Gas便宜,速度快,领测试币方便。编写合约创建Web3DApp的第一步是编写合约。我们使用Hardhat工具,它是Node.js开发的,确保本机安装了Node.js和NPM,先安装Solidity编译器:$npminstall-gsolc$solc--versionsolc,thesoliditycompilercommandlineinterfaceVersion:0.8.17然后创建目录web3stack并安装Hardhat:$mkdirweb3stack$cdweb3stack$npminstall--save-devhardhat然后输入命令npxhardhat开始创建一个新的合约项目:$npxhardhatHardhat提示选择项目类型:?Whatdoyouwanttodo?…?CreateaJavaScriptprojectCreateaTypeScriptprojectCreateanemptyhardhat.config.jsQuit这里选择JavaScript项目。后续接着提示项目根目录、是否添加.gitignore、是否安装相关依赖等:?Whatdoyouwanttodo?·CreateaJavaScriptproject?Hardhatprojectroot:·/path/to/web3stack?Doyouwanttoadda.gitignore?(Y/n)·y?Doyouwanttoinstallthissampleproject'sdependencieswithnpm(@nomicfoundation/hardhat-toolbox)?(Y/n)·y全部按默认值来。完成后查看package.json应该有两个dev依赖:{"devDependencies":{"@nomicfoundation/hardhat-toolbox":"^2.0.1","hardhat":"^2.12.7"}}Hardhat默认创建了一个Lock合约,以及相关配置。我们可以自己再写一个Card合约://SPDX-License-Identifier:GPL-v3pragmasolidity=0.8.17;import"@openzeppelin/contracts/token/ERC721/ERC721.sol";contractCardisERC721{...}直接编译:$npxhardhatcompileErrorHH411:Thelibrary@openzeppelin/contracts,importedfromcontracts/Card.sol,isnotinstalled.Tryinstallingitusingnpm.编译提示找不到library报错,因为我们引用了OpenZeppelin的库,所以要先用NPM安装一下:npminstall--save@openzeppelin/contracts这条命令会在package.json中添加一个新的依赖:{..."dependencies":{"@openzeppelin/contracts":"^4.8.1"}}再次编译:npxhardhatcompile生成的合约存放在artifacts/contracts/Card.sol/Card.json,它包括了ABI接口、字节码等所有信息。部署合约就是把字节码部署到链上。Hardhat提供了一个示例代码script/deploy.js用于部署Lock合约,我们可以仿照这个脚本,复制一份script/deploy-card.js来部署Card合约:consthre=require("hardhat");asyncfunctionmain(){//合约工厂:constCard=awaithre.ethers.getContractFactory("Card");//部署:constcard=awaitCard.deploy();awaitcard.deployed();//打印部署的地址:console.log(`Carddeployedto${card.address}`);}main().catch((error)=>{console.error(error);process.exitCode=1;});部署时,直接运行脚本:$npxhardhatrunscripts/deploy-card.js但是,我们并没有在本地配置任何关于链的信息,也没有配置私钥等账户信息,这个合约是不可能部署到链上的,那它部署到哪了?实际上合约默认部署到Hardhat提供的“虚拟JavaScript环境”,它可以在本地用Node执行合约代码,主要用于测试。要部署到真实的链上,我们首先要在hardhat.config.js中加一点关于链的配置:module.exports={...//定义所有的链:networks:{//定义名为testnet的链:testnet:{//配置私钥:accounts:,//配置为PolygonTestnet节点的PRC:url:"https://matic-mumbai.chainstacklabs.com"}},...}这里为了方便我们把私钥直接写进配置里,实际开发可从环境变量读取。在部署前,确保私钥对应的地址有一点MATIC测试币。可以从这里领测试币。然后用带--network参数的命令部署:$npxhardhatrunscripts/deploy-card.js--networktestnet如果部署成功,则显示Card合约被部署的地址:Carddeployedto0x8131aa1B766966f9F8ec3E1132D9d29D92311AB0在PolygonScan上就能查看该合约。顺便可以将合约源码在PolygonScan上验证,验证后即可在PolygonScan对合约进行基本的读写操作。开发DAppUIDAppUI就是前端页面,既可以手写HTML+JavaScript,也可以使用React、Vue等任何前端框架与Webpack等前端工具。为了简化开发流程,这里我们直接手写一个index.html页,让用户能在页面创建一个NFT。页面引入的第三方库包括jQuery、BootstrapCSS、Vue,以及用于合约交互的Ethers.js:<scriptsrc="https://cdn.jsdelivr.net/npm/ethers@5.0.32/dist/ethers.umd.min.js"></script>安装了MetaMask插件后,页面会获得一个注入的window.ethereum全局变量,通过此变量与钱包进行交互,例如,连接钱包:awaitwindow.ethereum.request({method:'eth_requestAccounts',});调用合约方法则使用Ethers.js。下面的代码创建了Card合约并调用mint()方法创建NFT:asyncfunction(){//创建合约:letcontract=newethers.Contract(//合约地址:'0x8131aa1b766966f9f8ec3e1132d9d29d92311ab0',//合约的ABI接口'',//钱包签名对象:newethers.providers.Web3Provider(window.ethereum,"any").getSigner());//调用mint()方法:lettx=awaitcontract.mint();//等待1个确认:awaittx.wait(1);//TODO:解析tx的日志并拿到TokenID}异步调用mint()方法时,会拉起MetaMask,提示用户对交易进行签名。签名后返回tx对象代表已发送的交易。等待1个确认后,如果要获取交易信息,则需要解析tx的日志以便拿到TokenID等信息。最后注意到合约的ABI接口包含了合约完整的读写方法以及输入输出,它是一个JSON对象,这里以字符串形式传入。Card合约的ABI可以在Card.json中找到并复制出来,不过我们可以使用Hardhat的一个插件直接输出ABI文件。我们先用NPM安装插件:$npminstall--save-devhardhat-abi-exporter然后在hardhat.config.js中添加插件配置://用require引入插件:require('hardhat-abi-exporter');...module.exports={...//使用ABIExporter插件:abiExporter:{//输出到abi目录:path:"./abi",clear:false,flat:true,pretty:false,//编译时输出:runOnCompile:true,}};再运行一次编译,我们就可在abi目录下看到若干.json文件。找到Card.json,整理下格式,变成一个字符串粘贴至HTML:...window.NFT_ABI=',"stateMutability":"nonpayable","type":"constructor"}...';...这样,通过前端页面,就可以调用合约方法。通过mint()方法写入后,NFT已经生成,在PolygonScan查找对应的tx可查看详细信息。通过PolygonScan的ReadContract页面调用getImage()可获得NFT图片信息:图片把返回的data:image/svg...复制到浏览器的地址栏,可查看图片:图片也可在OpenSea等第三方NFT市场看到该NFT的图片。不过我们还有最后一个问题,就是如何在我们自己的页面上展示用户创建的NFT。有的同学会想到在页面调用Card合约的读方法,依次读出每个NFT的信息,这种方式会非常慢,因为需要反复多次调用读方法,且无法实现条件查询,比如根据地址查询该地址拥有的NFT,或者创建于一个月内的NFT。因此,我们还需要用到TheGraph提供的数据聚合服务。创建Graph查询为了创建Graph查询,我们需要使用TheGraph提供的托管服务。先注册TheGraph,然后安装全局命令行工具,只需运行一次:npminstall-g@graphprotocol/graph-cli安装后可使用命令graph,例如查看版本:$graph--version0.38.0第二步是在TheGraph的HostedService-MyDashboard-AddSubgraph创建一个项目,创建成功后TheGraph显示状态为未部署。为了把Subgraph部署上去,我们在本地项目根目录创建一个subgraph目录,然后在此目录下执行命令:$graphinit--producthosted-servicemichaelliao/web3stack注意将登录名替换为你的GitHub用户名,将项目名替换为TheGraph上创建的项目名。接下来依次输入信息:选择协议的类型:选ethereum;填写subgraph名称:用默认的名称;填写目录名:用默认目录名;选择链:选mumbai;填写合约地址:填入部署的地址0x8131...1ab0;尝试自动获取ABI,一般都能成功;填写从指定的块开始:查看合约部署的TX所在块填入区块高度;填写合约名字:与合约代码保持一致,此处必须为Card;是否索引事件:默认是。接下来会安装一系列依赖。如果填写的信息有问题,或者NPM运行出错,删掉subgraph目录再来一遍即可。然后按照提示,先运行graphauth输入TheGraph给的一个AccessToken,然后进入subgraph/web3stack目录,运行:npmrundeploy几秒钟后,就可以在TheGraph提供的Playground输入查询并查看结果:图片为什么我们可以直接查询transfers?首先,我们查看schema.graphql,默认有3个Entity,把Entity看作是数据库表,这3个Entity是TheGraph根据合约定义的Event自动生成的:typeApproval@entity(immutable:true){...}typeApprovalForAll@entity(immutable:true){...}typeTransfer@entity(immutable:true){...}但并不是我们的业务需要的。我们需要的是Card类型,包括owner、image等信息。因此,删掉自动生成的代码,换成我们自定义的Card:typeCard@entity(immutable:false){id:String!owner:Bytes!blockNumber:BigInt!blockTimestamp:BigInt!transactionHash:Bytes!image:String!}其中,id是唯一主键,这里用NFT的TokenID即可,但类型是String而不是BigInt。接下来,在subgraph.yaml中定义了如何处理事件,需要修改的有两处,一是entities,删除原有的3个Entity,换成我们定义的Card:dataSources:-kind:ethereum...mapping:...entities:-Card二是在eventHandlers中删除我们不关心的Approval和ApprovalForAll事件,仅保留Transfer:dataSources:-kind:ethereum...mapping:...eventHandlers:-event:Transfer(indexedaddress,indexedaddress,indexeduint256)handler:handleTransfer当TheGraph的节点扫描到我们部署的合约产生了Transfer事件后,它将调用handleTransfer处理,这个函数定义在src/card.ts中,自动生成的代码如下:exportfunctionhandleTransfer(event:TransferEvent):void{letentity=newTransfer(event.transaction.hash.concatI32(event.logIndex.toI32()))entity.from=event.params.fromentity.to=event.params.toentity.tokenId=event.params.tokenIdentity.blockNumber=event.block.numberentity.blockTimestamp=event.block.timestampentity.transactionHash=event.transaction.hashentity.save(。因此,每捕获到一个Transfer事件,会保存一个Transfer的Entity,这就是我们前面在TheGraph的Playground中能查询transfers的原因。现在我们不需要Transfer这个Entity,改成Card,先定义Card这个Entity:exportclassCardextendsEntity{...}再修改handleTransfer()的代码:exportfunctionhandleTransfer(event:TransferEvent):void{lettokenId=event.params.tokenId;letcontract=CardContract.bind(event.address);if(event.params.from.equals(Address.zero())){//如果from=0,表示创建了新的NFT:letnft=newCard(tokenId.toString());nft.owner=event.params.to;nft.image=contract.getImage(tokenId);nft.blockNumber=event.block.number;nft.blockTimestamp=event.block.timestamp;nft.transactionHash=event.transaction.hash;nft.save();}else{//from!=0,表示NFT发生了转移,需要更新owner和image:letnft=Card.load(tokenId.toString());if(nft===null){log.error('failedloadNFTbytoken:{}',);}else{nft.owner=event.params.to;nft.image=contract.getImage(tokenId);nft.save();}}}再次运行npmrundeploy,我们可以在TheGraph的Playground中查询到cards:图片这样,支持页面显示的后端查询服务就准备就绪。下一步,我们在页面中添加一点查询代码:asyncfunctionquery(){letquery={"query"://输入为Graph查询字符串:`{cards(first:20,orderBy:blockTimestamp,orderDirection:desc){idownerimage}}`};//调用jQuery发送POST请求并获得JSON结果:letopt={type:'POST',dataType:'json',contentType:'application/json',//与Graph服务接口保持一致:url:'https://api.thegraph.com/subgraphs/name/michaelliao/web3stack',data:JSON.stringify(query。;letresult=await$.ajax(opt);letcards=result.data.cards;}拿到查询结果,我们就能直接在页面展示:图片最后一步就是把页面发布到GitHubPages,然后绑一个域名,就可以让用户访问了:https://web3stack.itranswarp.com至此,一个完整的DApp就开发完毕。FAQQ:可以不用TheGraph,自己写后端服务吗?A:可以,很多需求,例如用户实名认证、发送Email是TheGraph服务无法支持的,必须自己编写后端服务,配合数据库实现。Q:可以同时支持多链吗?A:可以,用户在钱包切换链时,DApp可以通过chainChanged事件拿到链ID,提前配置好链ID与不同链的合约地址,就可以正常在不同链调用不同合约。Q:可以支持多种钱包吗?A:可以,需要使用Web3Modal这个库,能简化连接多个钱包的代码。小结从本文给出的完整示例来看,Web3全栈开发,最适合前端开发人员。当年国外有个前端开发叫Hayden,在17年失业了,他决定自学Solidity并花了几个月的时间为以太坊开发了一个DeFi应用,后来这个应用火爆了,它叫Uniswap。

游戏开发商Mino Games筹集1500万美元用于创建Web3游戏:2月9日消息,移动游戏公司 Mino Games 已筹集 1500 万美元用于创建具有 Web3 功能的 Dimensionals 收藏角色游戏。Standard Crypto领投,Boost VC、Collab Currency、Earl Gray Capital 和 Konvoy Ventures 跟投。

这家角色驱动的游戏公司正在通过新的 Dimensionals 特许经营权过渡到 Web3 游戏。之前的投资者包括 Sybo Games 和 Andreessen Horowitz,该公司迄今已筹集了 2500 万美元。[2023/2/9 11:57:38]

Web3时尚和生活方式平台Yoloyolo完成350万美元种子轮融资,ParaFi Capital参投:金色财经报道,Web3 时尚和生活方式平台 Yoloyolo 宣布完成 350 万美元种子轮融资,ParaFi Capital、Mirana Ventures 和 Morningstar Ventures、Avalanche Ventures、UOB Ventures、Signum Capital、Genblock、Yolo Investments、以及软银愿景基金的 Neil Cunha-Gomes 和前币安合伙人 Nicole Zhang 参投。Yoloyolo 是一个将 NFT 所有者与品牌联系起来以销售合作商品的新平台, 把顶级 NFT 知识产权 (IP) 持有者与时尚和生活方式行业的品牌和创作者联系起来,预计将于 2023 年 3 月推出 alpha 版。(coindesk)[2022/10/17 17:29:22]

Web3风投工作室LiquidX收购Anime Metaverse 70%股份:8月25日消息,Web3风投工作室LiquidX宣布,已经收购专注于动漫和漫画出版和授权公司Anime Metaverse 70%的股份,具体金额未披露。LiquidX计划投资并运营Anime Metaverse的Web3业务。

据悉,LiquidX由波卡和BNB Chain早期投资者Kendrick Wong创立。(Techinasia)[2022/8/25 12:47:48]

数字银行平台Cogni扩大执行团队以整合Web3和金融服务:8月24日消息,数字银行平台Cogni宣布了其领导团队的新成员,Simon Grunfeld将加入Cogni担任Web3副总裁。Grunfeld将领导该平台的Web3扩展,以无缝地为用户提供对传统银行、加密、NFT、游戏和元宇宙服务的访问。(Business Wire)[2022/8/24 12:46:07]

动态 | ONTology已在谷歌云、Amazon Web和微软Azure发布公链:据coingape消息,根据最新发布的消息,ONTology宣布已第一个在谷歌云、Amazon Web服务和微软Azure上发布了公共区块链。在这些云提供商上使用本体开发平台,用户可以使用和开发智能契约,而不必在本地配置和设置环境。受利好因素影响,ONT的交易量在过去24小时内大幅增长了15%,根据coinmarketcap的数据,其市值为2.95亿美元,排在第21位,较上周上升6位。[2019/2/24]

标签:GraphNFTPolygonGraph币是什么币NFT价格NFT币Polygon币是什么币

TRX热门资讯
SHIB:Shiba Inu可能会摆脱狗狗币的阴影,它正在成为真正加密生态系统_SHI

ShibaInu尽管以模因的形式出现,但它正在发展成为一个真正的DeFi生态系统。ShibaInu的代币经济学在纸面上认为它明显优于狗狗币.

1900/1/1 0:00:00
:为什么说gas费,质押币,线性释放对矿工来说是好事_

第一,gas费的大量燃烧机制,导致fil一直处于通缩的状态,全网已经销毁2000多万枚fil,这些fil销毁以后就不能再生了。这样就导致了fil以后只会越来越少。币越来越少就会导致币价越来越高.

1900/1/1 0:00:00
Hearts:银子怎么卖出金子价?|小众品牌研究之 Chrome Hearts 克罗心_Hearts币是什么币

“ChromeHearts的银子卖金子价,K金卖钻石价。”这句来自潮流爱好者们的评价,完美形容了品牌有多“贵”。即便如此,仍有许多热爱街头潮流文化的年轻人们,对ChromeHearts趋之若鹜.

1900/1/1 0:00:00
ARB:Arbitrum (ARB) 2023 年价格预测—ARB 会很快达到 2 美元吗?_Arbitrum

2023年看涨的ARB价格预测为1.2484美元至1.3625美元。Arbitrum(ARB)价格可能很快达到2美元。2023年的看跌ARB价格预测为1.0522美元.

1900/1/1 0:00:00
NFT:NFT开拓IP授权新模式_元宇宙概念是什么意思NFT

分享作者:DanielLi 自从NBA球星史蒂芬·库里,花了大约18万美元购买了一个穿着西装的无聊猿NFT之后,关于明星购买NFT的新闻从此不绝于耳.

1900/1/1 0:00:00
区块链:腾讯云卖向“有币”区块链_Avalanche币是什么币加密货币是什么意思啊

图片来源@视觉中国 文|元宇宙日爆 曾经坚决“不涉币”的腾讯云将业务延伸向“有币区块链”。在首届Web3全球峰会“腾讯云Web3构建日”上,腾讯云宣布进军Web3,并公开了与Ankr、Avala.

1900/1/1 0:00:00