इस project के लिए source code खोजने के लिए इस Github repo को देखें। repo को clone करने और इसके साथ खेलने, या code साथ लिखने के लिए स्वतंत्र महसूस करें।
Web3 Actions को समझना
Smart contracts आपको तब custom code execute करने की अनुमति देते हैं जब कोई event trigger होता है, कोई function invoke होता है, या शायद समय-समय पर। Tenderly आपको Web3 Actions के साथ इस प्रक्रिया को सुव्यवस्थित करने में मदद करता है। आप अपनी Web3 Actions को एक single Javascript file में लिख सकते हैं या उन्हें NodeJS project के रूप में deploy कर सकते हैं। Web3 Actions आपको वे सभी actions करने की अनुमति भी देते हैं जो आप आम तौर पर NodeJS के साथ करते हैं। यह tutorial आपको दिखाएगा कि अपनी Web3 Actions को deploy करने के लिए Tenderly CLI का उपयोग कैसे करें और यह सुनिश्चित करें कि जब विशिष्ट शर्तें पूरी हों तो वे चलें।Web3 Actions के बारे में अधिक जानें और Web3 Actions की Basics के साथ अपने projects में उनका उपयोग कैसे कर सकते हैं इसका अन्वेषण करें।
Project अवलोकन
इस project का उद्देश्य आपको यह दिखाना है कि एक smart contract कैसे deploy करें और कई Javascript functions कैसे लिखें जिन्हें Tenderly किसी event के होने पर invoke करेगा। आप सीखेंगे कि अपनी Web3 Actions को Tenderly की infrastructure पर deploy करने के लिए Tenderly CLI का उपयोग कैसे करें। यहाँ ऐसा करने का step-by-step अवलोकन है:- smart contract को test network पर deploy करें
- Web3 Actions चलाने के लिए आवश्यक Javascript और config files सेट अप करने के लिए Tenderly CLI का उपयोग करें
- game events पर प्रतिक्रिया देने वाले functions develop करें
- उन functions को CLI का उपयोग करके Tenderly की infrastructure पर deploy करें
0: smart contract deploy करें
यदि आप साथ code कर रहे हैं, तो आप इस चरण को skip कर सकते हैं और उस contract का उपयोग कर सकते हैं जिसे हमने Tenderly में deploy और verify किया।
- Game start
- Player joins the game
- Player makes a move
- Game over
पूर्वापेक्षा
दो Accounts बनाएँ - किसी भी Tenderly द्वारा समर्थित network पर smart contract deploy करें। ऐसा करने का सबसे सुविधाजनक तरीका Remix और Metamask wallet plugin के साथ है। आपको सकारात्मक Ether balance वाले दो accounts की आवश्यकता है। ये accounts दो खिलाड़ियों का प्रतिनिधित्व करेंगे। इस tutorial के प्रयोजन के लिए हम Sepolia का उपयोग करते हैं। यदि आप इस tutorial के साथ चलने की योजना बनाते हैं, तो आप accounts में Ether जोड़ने के लिए Sepolia faucet का उपयोग कर सकते हैं। contract को Compile करें - smart contract को compile करने के लिए Remix IDE का उपयोग करें। एक नया contract file बनाएँ और यहाँ पाया गया code जोड़ें।.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=6f20b3090790b771b014692cdcf7be9a)
Injected Web3 का चयन करें। यह सुनिश्चित करने के बाद कि account Metamask में account का reference देता है, “Deploy” पर क्लिक करें।
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=a8cfef3f43f563adbb3dfdd62177b50f)
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=4a2339153a44fa17921bce22e01e703b)
0x133...) copy करने के लिए copy icon पर क्लिक करें और इसे कहीं store करें क्योंकि हमें अगले चरणों के लिए इसकी आवश्यकता होगी।
अब contract को verify करने के लिए Tenderly Dashboard पर जाएँ। इससे हमारे लिए tutorial में बाद में contract के साथ interact करना संभव हो जाएगा।
1: Tenderly CLI के माध्यम से Web3 Actions सेट अप करें
इस tutorial के साथ जारी रखने के लिए, आपके पास अपनी machine पर Tenderly CLI स्थापित होना चाहिए। इसे सेट अप करने और access authenticate करने के तरीके के बारे में जानने के लिए इस गाइड का पालन करें। CLI स्थापित होने के साथ, एक नई directory बनाएँ औरcd इसमें। tenderly actions init command चलाकर अपनी Web3 Actions को initialize करें:
example
tenderly actions init --language javascript।
package.json npm dependencies रखता है जो आपके Web3 Action को deploy करने पर उपलब्ध होंगी। tsconfig.json file में केवल actions directory के भीतर .ts files से संबंधित Typescript configuration है।1.1. Tic-Tac-Toe Contract का ABI जोड़ें
code में गहराई से जाने से पहले, compiler द्वारा उत्पन्न ABI को actions directory में copy करें। हमारे उदाहरण में, यहtdly-actions directory है।
Remix में, files/artifacts/TicTacToe.json पर जाएँ, file की contents copy/paste करें और उन्हें अपने project की TicTacToe.json file में paste करें।
1.2. Typescript को JSON File को Module के रूप में Import करने के लिए Configure करें
default रूप से, Typescript आपको JSON files को modules के रूप में import करने की अनुमति नहीं देता है। आपको Typescript को कॉन्फ़िगर करने की आवश्यकता है ताकिTicTacToe.json file को module के रूप में import कर सकें और object के रूप में access कर सकें।
अपनी tsconfig.json file पर जाएँ और compilerOptions entry के तहत निम्न दो configurations शामिल करें:
example
2: New Game Event को Handle करने के लिए Function लिखें
एक function लिखें जो नया game शुरू होने पर execute होगा। आइए Typescript file का नाम कुछ अधिक वर्णनात्मक में बदलें:example
players object में खिलाड़ी के address को उनकी turn (पहली, दूसरी, आदि) से map करेंगे।
2.1. एक Action जोड़ें
example.ts
example.ts
GameCreated event को handle करेगी।
smart contract को देखकर, हम देख सकते हैं कि newGame function से केवल एक event fire हो रहा है, इसलिए हम पहली log entry में रुचि रखते हैं। हम TicTacToe.abi के आधार पर GameCreated event के txEvent.logs[0].data को decode करके ethers.js के साथ result प्राप्त कर सकते हैं।
यहाँ हम इस विशेष game के साथ जुड़े ID तक पहुँच सकते हैं जब यह बनाया गया हो: result.gameId। हम इस विशेष game के लिए data को track करना चाहते हैं: खिलाड़ी और उनके द्वारा किए गए moves, एक बिल्कुल नए Game instance का उपयोग करते हुए। हम नए game का प्रतिनिधित्व करने वाले object को Storage में इस command के साथ save कर रहे हैं: context.storage.putJson(gameId, game)।
एक खाली board के साथ, हम भविष्य के परिवर्तनों को persist करने की नींव सेट कर रहे हैं जो अन्य actions द्वारा संभाले जाते हैं।
आप Web3 Action के behaviour को verify करने के लिए automated tests भी लिख सकते हैं। कुछ tests repository में उपलब्ध हैं, लेकिन यह इस tutorial के दायरे से बाहर है।
2.2. New Game Action Invocation निर्दिष्ट करें
tenderly.yaml खोलें।specs अनुभाग में, newGame (arbitrary name) के लिए specs परिभाषित करें ताकि function newGameAction को invoke करें। आप इसे इस तरह कर सकते हैं newGameAction:newGameAction, पहले हम function वाली file का नाम परिभाषित करते हैं और फिर function name।
इसके बाद, trigger निर्दिष्ट करें जिसे Tenderly action को invoke करने के लिए देखने वाला है। यह एक transaction trigger है जो block mine होने पर चलेगा। हम इसे network 3 के लिए कर रहे हैं जब निर्दिष्ट address पर contract से event NewGame emit होता है।
TTT_CONTRACT_ADDRESS को अपने smart contract के वास्तविक address से बदलें। यदि आप contract को Sepolia के अलावा किसी अन्य network पर deploy करना चाहते हैं, तो network के ID को network के मान के रूप में निर्दिष्ट करें।
YOUR_USERNAME और YOUR_PROJECT_SLUG को अपने Tenderly username और अपने project के slug से बदलें। आप उन्हें Dashboard URL से copy कर सकते हैं: https://dashboard.tenderly.co/{YOUR_USERNAME}/{YOUR_PROJECT_SLUG}/transactionsexample.yaml
2.3. Tenderly पर अपने Tic-Tac-Toe Smart Contract को Verify करें
contract को deploy करने से पहले, आपको इसे अपने Tenderly Dashboard में verify करना होगा। यदि आप चाहें, तो आप contract को अपने browser के माध्यम से upload कर सकते हैं। एक बार upload होने के बाद, TicTacToe contract, आपने जिस network पर इसे deploy किया, और contract address का चयन करें। Add Contract पर क्लिक करें और नीचे दी गई तस्वीर में दिखाए अनुसार compiler options भरें:.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=01b598bfc2a6fbdf63ddb1533f10d40c)
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=e99c1eb47857101c573bddf8131cf40d)
2.4. Web3 Action को Tenderly पर Deploy करें
अपनी Web3 Action deploy करने के लिए, Tenderly CLI का उपयोग करकेdeploy command execute करें:
example
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=265837ec27e0378acfbc192074661c47)
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=c35821d0a7d044029d8e1047cfa89ff6)
2.5. एक New Game में शामिल होने का प्रयास करें 🎉
यह सत्यापित करने के लिए कि सब कुछ ठीक से काम कर रहा है, Remix पर वापस जाएँ और एक नया game या यहाँ तक कि कई games बनाएँ। TicTacToe contract खोलें औरnewGame दबाएँ। Metamask को आपको Web3 Action के execution की पुष्टि करने के लिए prompt करना चाहिए।
एक बार transaction chain पर submit हो जाने पर, Remix को इसी तरह का output produce करना चाहिए:
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=a0aad1196ca95ba6470b8b5f0edcee12)
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=7b2dedf972e0e4a6f9bc11fe27a33f85)
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=ec2d6994130b322e35d858124d104898)
0xb है, जिसका अर्थ है कि यह इस contract के लिए शुरू किया गया 11वाँ game है।
2.6. अपनी Web 3 Actions के Storage की जाँच करें
Storage की contents देखने के लिए “Go To Storage” बटन पर क्लिक करें। शुरू किए गए प्रत्येक game को इस key-value map में अपना खुद का storage slot मिलेगा। जब आप हमारे अभी बनाए गए game को ID 11 के साथ खोलते हैं, तो आपको सभी fields में zeros दिखाई देंगे, जिसका अर्थ है कि किसी भी खिलाड़ी ने अभी तक game नहीं खेला है।.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=88f11391c94122ab621cac47f2bc8bdd)
3: नए खिलाड़ी Game में शामिल होने को Handle करने के लिए Web3 Action जोड़ें
game में शामिल होने वाले खिलाड़ी को खिलाड़ी के address और उनके move (1 या 2) को register करके process किया जाना चाहिए। boilerplate code के अलावा जो हमें event data retrieve करने में मदद करता है,playerJoinAction.ts file में वह code भी होता है जो हमें अनुमति देता है:
- game के ID (
storage.getJson) का उपयोग करके storage से वर्तमान game state पढ़ें। - खिलाड़ी के address को retrieve करें और उनकी turn store करें:
game.players[player] = playerNumber storage.putJsonका उपयोग करके Web3 Action के storage में updated game object save करें।
example.ts
3.1. PlayerJoinedGame Action Invocation निर्दिष्ट करें
हमें Web3 Action को invoke करने के लिए आवश्यक specifications शामिल करने के लिएtenderly.yaml file से specs का विस्तार करने की भी आवश्यकता है।
example.yaml
3.2. action को Tenderly पर deploy करें
deploy command चलाकर अपनी Web3 Action deploy करें। यह command पहले deploy की गई Web3 Actions को भी redeploy करेगा।
example.js
3.3. एक New Game में शामिल होने का प्रयास करें
newGame input field में logs से game number जोड़कर Remix पर जाकर एक नए game में शामिल हों। transaction submit करने के लिए, joinGame बटन पर क्लिक करें:
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=b775e77378e6a2706fe73eed98a3d79d)
playerNumber: 1 दिखाई देगा।
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=c528321ee8ce731435000c561537e60a)
joinGame पर क्लिक करें। transaction के पूरा होने पर, आप Execution History में एक समान log output देखेंगे।
3.4. अपनी Web 3 Actions के Storage की जाँच करें
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=0e7db1401134a1407e2857804a9ec87e)
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=d98b4d0220c38499bde2925eabcc1a6c)
3.5. जब खिलाड़ी Move करे उसे Handle करने के लिए एक Action जोड़ें
Ethers का उपयोग करके, हम game ID प्राप्त करते हैं और storage से game instance load करते हैं। इसके बाद, rowresult.boardRow और column result.boardCol में field को खिलाड़ी के input game.players[player] से update करें।
function processNewGameState, board को console में log करेगा, लेकिन आप move होने पर एक tweet भी भेज सकते हैं, chain पर एक नया transaction trigger कर सकते हैं, या इसे किसी अन्य तरीके से उपयोग कर सकते हैं।
example.ts
example.yaml
3.6. Game खेलने के लिए Move करें
move करने के लिए, Metamask का उपयोग करके game में शामिल होने वाले पहले खिलाड़ी पर switch करें। इसके बाद, आपको प्राप्त game number, साथ ही board (0, 1) पर row और column दर्ज करें।.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=d87ef8ceb06a0bbd9474af3eb12c2169)
.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=781967b49bfe714430a3558cbdb95f5d)
चरण 4. Game समाप्त होने पर Handle करने के लिए Web3 Action जोड़ें
नीचे आपकोGameOver event के लिए code मिलेगा। GameOver event तब fire होता है जब कोई खिलाड़ी ऐसा move करता है जो game जीतता है या जब board भर जाता है। यह event PlayerMadeMove event के बाद fire होता है। txEvent.logs list में, GameOver event दूसरा element है।
GameOver event प्राप्त करने का एक आसान तरीका इसे txEvent.logs[1] के माध्यम से access करना है। हालाँकि, हम एक अधिक मजबूत समाधान implement करेंगे जो fire होने वाले events के order और संख्या पर निर्भर नहीं करता है।
पहले, आपको iface.getEventTopics के माध्यम से ethers का उपयोग करके gameOverTopic प्राप्त करने की आवश्यकता है। यह आपको संबंधित hexadecimal value देगा। इसके बाद, आपको txEvent.logs में log entry खोजनी होगी, जिसकी topics list में gameOverTopic है। यह हमारा GameOver event log है जिसे हम Ethers का उपयोग करके decode कर सकते हैं।
example.js
4.1. GameOver Action Invocation निर्दिष्ट करें
अंत में, हमेंtenderly.yaml में specs का विस्तार करके GameOver action को invoke करने के लिए specification जोड़ने की आवश्यकता है:
example.yaml
4.2. Game खेलें
तब तक खेलते रहें जब तक कि एक खिलाड़ी game जीत नहीं जाता या board पूरी तरह से भर नहीं जाता। game के अंत में, Execution History इस तरह दिखनी चाहिए:.webp?fit=max&auto=format&n=XsEZlaGXYskrtN68&q=85&s=eb6b64f3d40bbc512205c312c51d4c04)