प्रवाह और ताल का उपयोग करके डिजिटल संग्रहणीय पोर्टल कैसे बनाएं (भाग 2)

अपना संग्रहणीय पोर्टल बनाने के अंतिम चरण में आपका स्वागत है! (भाग 1 के लिए, यहां देखें)

इस भाग में, हम फ्रंटएंड-पहेली के अंतिम भाग के निर्माण पर ध्यान केंद्रित करेंगे।

यहां बताया गया है कि हम क्या हासिल करेंगे:

1. फ़्लो वॉलेट कनेक्ट करें.
2. अपना खाता आरंभ करें और अपना एनएफटी बनाएं।
3. अपने संग्रह में एनएफटी आईडी जांचें।
4. आपके संग्रह में मौजूद एनएफटी आईडी से एनएफटी देखें।

हम फ्रंटएंड बनाने के लिए Next.js का उपयोग करेंगे।

आएँ शुरू करें!

1. स्थापना

की स्थापना

अपनी परियोजना flow-collectible-portal निर्देशिका खोलें। तो भागो
टर्मिनल में npx create-next-app@latest frontend और enter दबाएँ।

यह आपको कई विकल्प प्रदान करेगा. इस ट्यूटोरियल में, हम टाइपस्क्रिप्ट , ईएसलिंट, या टेलविंडसीएसएस का उपयोग नहीं करेंगे, और हम इस लेख के समय src निर्देशिका और ऐप राउटर का उपयोग करेंगे।

अब आपके पास एक ताज़ा वेब ऐप तैयार है।

आपका फ्रंटएंड फ़ोल्डर इस प्रकार दिखता है:

2. विन्यास

फ्लो ब्लॉकचेन के साथ इंटरैक्ट करने के लिए हम वॉलेट कनेक्शन प्रबंधित करने, स्क्रिप्ट चलाने और अपने एप्लिकेशन में लेनदेन भेजने के लिए फ्लो क्लाइंट लाइब्रेरी (एफसीएल) का उपयोग करेंगे। यह हमें संपूर्ण कैडेंस फ़ंक्शंस लिखने और उन्हें जावास्क्रिप्ट फ़ंक्शंस के रूप में चलाने की अनुमति देगा।

आरंभ करने के लिए, आइए निम्नलिखित कमांड चलाकर अपने ऐप के लिए FCL इंस्टॉल करें:

 npm install @onflow/fcl --save

एफसीएल स्थापित करने के बाद, हमें इसे कॉन्फ़िगर करने की आवश्यकता है। यहां आपको क्या करना है:

1. app फ़ोल्डर के अंदर flow नाम का एक नया फ़ोल्डर बनाएं और config.js नाम की एक फ़ाइल जोड़ें।
2. इस फ़ाइल में, FCL के लिए कॉन्फ़िगरेशन सेट करें, जैसे एक्सेस नोड और वॉलेट डिस्कवरी एंडपॉइंट निर्दिष्ट करना। यह आपको टेस्टनेट या स्थानीय एमुलेटर का उपयोग करने के बीच चयन करने में मदद करता है।
3. आप उस संग्रहणीय अनुबंध पते को भी निर्दिष्ट करना चाहेंगे जिसे हमने भाग 1 में तैनात किया था।

config.js फ़ाइल में निम्न कोड जोड़ें:

 import { config } from "@onflow/fcl"; config({ "app.detail.title": "Flow Name Service", "app.detail.icon": "https://placekitten.com/g/200/200", "accessNode.api": "https://rest-testnet.onflow.org", "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", "0xCollectibles": "ADD YOUR CONTRACT ACCOUNT ADDRESS", "0xNonFungibleToken": "0x631e88ae7f1d7c20", });

अब आप अपने ऐप में एफसीएल का उपयोग करने के लिए पूरी तरह तैयार हैं।

3. प्रमाणीकरण

किसी ऐप में उपयोगकर्ता की पहचान सत्यापित करने के लिए, आप कई फ़ंक्शन का उपयोग कर सकते हैं:

1. लॉग इन करने के लिए, fcl.logIn() कॉल करें।
2. साइन अप करने के लिए, fcl.signUp() कॉल करें।
3. लॉग आउट करने के लिए, fcl.unauthenticate() पर कॉल करें।

आइए जानें कि हम इन fcl फ़ंक्शंस को आपके फ्रंटएंड में कैसे कार्यान्वित कर सकते हैं।

सबसे पहले, हम ऐप डायरेक्टरी के अंदर अपनी page.js फ़ाइल में निम्नलिखित कोड जोड़ेंगे। यह कुछ निर्भरताएँ आयात करेगा, हमारे ऐप के कुछ हिस्सों के लिए कुछ प्रारंभिक useState सेट करेगा और एक बुनियादी यूआई बनाएगा।

यह सुनिश्चित करने के लिए कि यह अच्छा लगे, ऐप निर्देशिका के अंदर page.module.css फ़ाइल को हटा दें और इसके बजाय पेज.सीएसएस नामक एक फ़ाइल बनाएं। फिर इस फ़ाइल की सामग्री को इसके अंदर पेस्ट करें। अब हम अपना प्रारंभिक पृष्ठ लिख सकते हैं।

 "use client"; import React, { useState, useEffect, useRef } from "react"; import * as fcl from "@onflow/fcl"; import "./page.css"; import "./flow/config"; export default function Page() { const [currentUser, setCurrentUser] = useState({ loggedIn: false, addr: undefined, }); const urlInputRef = useRef(); const nameInputRef = useRef(); const idInputRef = useRef(); const [isInitialized, setIsInitialized] = useState(); const [collectiblesList, setCollectiblesList] = useState([]); const [loading, setLoading] = useState(false); const [ids, setIds] = useState([]); const [nft, setNFT] = useState({}); useEffect(() => fcl.currentUser.subscribe(setCurrentUser), []); function handleInputChange(event) { const inputValue = event.target.value; if (/^\d+$/.test(inputValue)) { idInputRef.current = +inputValue; } else { console.error("Invalid input. Please enter a valid integer."); } } return ( <div> <div className="navbar"> <h1>Flow Collectibles Portal</h1> <span>Address: {currentUser?.addr ?? "NO Address"}</span> <button onClick={currentUser.addr ? fcl.unauthenticate : fcl.logIn}> {currentUser.addr ? "Log Out" : "Connect Wallet"} </button> </div> {currentUser.loggedIn ? ( <div className="main"> <div className="mutate"> <h1>Mutate Flow Blockchain</h1> <form onSubmit={(event) => { event.preventDefault(); }} > <input type="text" placeholder="enter name of the NFT" ref={nameInputRef} /> <input type="text" placeholder="enter a url" ref={urlInputRef} /> <button type="submit">Mint</button> </form> <mark>Your Collection will be initialized while minting NFT.</mark> </div> <div className="query"> <h1>Query Flow Blockchain</h1> <mark>Click below button to check 👇</mark> <button>Check Collection</button> <p> Is your collection initialized: {isInitialized ? "Yes" : "No"} </p> <button onClick={viewIds}> View NFT IDs you hold in your collection </button> <p>NFT Id: </p> </div> <div className="view"> <h1>View Your NFT</h1> <input type="text" placeholder="enter your NFT ID" onChange={handleInputChange} /> <button>View NFT</button> <div className="nft-card"> <p>NFT id: </p> <p>NFT name: </p> <img src="" alt="" /> </div> </div> </div> ) : ( <div className="main-2"> <h1>Connect Wallet to mint NFT!!</h1> </div> )} </div> ); }

इस कोड को जोड़ने के बाद, यह सुनिश्चित करने के लिए कि सब कुछ सही ढंग से लोड हो रहा है, npm run dev चलाएँ।

4. फ्लो ब्लॉकचेन को क्वेरी करना

फ्लो ब्लॉकचेन को क्वेरी करने के लिए हम fcl उपयोग कैसे कर सकते हैं, इसके बारे में गहराई से जानने से पहले, page.js फ़ाइल में handleInput फ़ंक्शन के बाद इन कैडेंस स्क्रिप्ट कोड को जोड़ें।

 const CHECK_COLLECTION = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles pub fun main(address: Address): Bool? { return Collectibles.checkCollection(_addr: address) }` const GET_NFT_ID = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles pub fun main(user: Address): [UInt64] { let collectionCap = getAccount(user).capabilities.get <&{Collectibles.CollectionPublic}>(/public/NFTCollection) ?? panic("This public capability does not exist.") let collectionRef = collectionCap.borrow()! return collectionRef.getIDs() } ` const GET_NFT = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles pub fun main(user: Address, id: UInt64): &NonFungibleToken.NFT? { let collectionCap= getAccount(user).capabilities.get<&{Collectibles.CollectionPublic}>(/public/NFTCollection) ?? panic("This public capability does not exist.") let collectionRef = collectionCap.borrow()! return collectionRef.borrowNFT(id: id) }

हमारी कैडेंस स्क्रिप्ट तैयार होने के साथ, अब हम कुछ जावास्क्रिप्ट फ़ंक्शंस घोषित कर सकते हैं और कैडेंस स्थिरांक को `fcl` प्रश्नों में पास कर सकते हैं।

 async function checkCollectionInit() { const isInit = await fcl.query({ cadence: CHECK_COLLECTION, args: (arg,t) => [arg(currentUser?.addr, t.Address)], }); console.log(isInit); } async function viewNFT() { console.log(idInputRef.current); const nfts = await fcl.query({ cadence: GET_NFT, args: (arg,t) => [arg(currentUser?.addr,t.Address), arg(idInputRef.current, t.UInt64)] }); setNFT(nfts); console.log(nfts); } async function viewIds() { const ids = await fcl.query({ cadence: GET_NFT_ID, args: (arg,t) => [arg(currentUser?.addr,t.Address)] }); setIds(ids); console.log(ids); }

आइए अब हमारे द्वारा लिखे गए सभी कार्यों पर एक नज़र डालें। ध्यान देने योग्य दो बातें हैं:

1. fcl.query
2. और args: (arg,t) => [arg(addr,t.Address)], पंक्ति।

चूंकि स्क्रिप्ट सॉलिडिटी में view फ़ंक्शन के समान हैं और उन्हें चलाने के लिए किसी भी गैस शुल्क की आवश्यकता नहीं होती है, हम अनिवार्य रूप से केवल ब्लॉकचेन को क्वेरी कर रहे हैं। इसलिए हम फ़्लो पर स्क्रिप्ट चलाने के लिए fcl.query उपयोग करते हैं।

किसी चीज़ पर प्रश्न पूछने के लिए, हमें एक तर्क पारित करना होगा। उसके लिए, हम arg का उपयोग करते हैं, जो एक फ़ंक्शन है जो तर्क का प्रतिनिधित्व करने वाला एक स्ट्रिंग मान लेता है, और t , जो एक ऑब्जेक्ट है जिसमें कैडेंस के सभी अलग-अलग डेटा प्रकार शामिल हैं। तो हम arg बता सकते हैं कि हम जिस तर्क को पारित कर रहे हैं उसे कैसे एनकोड और डीकोड करें।

5. फ्लो ब्लॉकचेन को बदलना

जबकि हमारे पिछले फ़ंक्शन केवल "केवल पढ़ने के लिए" थे, हमारे अगले कार्यों में ऐसी क्रियाएं होंगी जो ब्लॉकचेन स्थिति को बदल सकती हैं और उस पर लिख सकती हैं; उर्फ "मिंट एन एनएफटी।"

ऐसा करने के लिए हम एक स्थिरांक के रूप में एक और कैडेंस स्क्रिप्ट लिखेंगे।

 const MINT_NFT = ` import NonFungibleToken from 0xNonFungibleToken import Collectibles from 0xCollectibles transaction(name:String, image:String){ let receiverCollectionRef: &{NonFungibleToken.CollectionPublic} prepare(signer:AuthAccount){ // initialise account if signer.borrow<&Collectibles.Collection>(from: Collectibles.CollectionStoragePath) == nil { let collection <- Collectibles.createEmptyCollection() signer.save(<-collection, to: Collectibles.CollectionStoragePath) let cap = signer.capabilities.storage.issue<&{Collectibles.CollectionPublic}>(Collectibles.CollectionStoragePath) signer.capabilities.publish( cap, at: Collectibles.CollectionPublicPath) } //takes the receiver collection refrence self.receiverCollectionRef = signer.borrow<&Collectibles.Collection>(from: Collectibles.CollectionStoragePath) ?? panic("could not borrow Collection reference") } execute{ let nft <- Collectibles.mintNFT(name:name, image:image) self.receiverCollectionRef.deposit(token: <-nft) } }

अब page.js फ़ाइल में लेनदेन कोड के बाद नीचे दिया गया फ़ंक्शन जोड़ें।

 async function mint() { try{ const txnId = await fcl.mutate({ cadence: MINT_NFT, args: (arg,t) => [arg(name,t.String), arg(image, t.String)], payer: fcl.authz, proposer: fcl.authz, authorizations: [fcl.authz], limit:999,}); } catch(error){ console.error('Minting failed:' error) } console.log(txnId); }

फ़ंक्शन के लिए, fcl.mutate सिंटैक्स fcl.query के समान है। हालाँकि, हम निम्नलिखित जैसे कई अतिरिक्त पैरामीटर प्रदान करते हैं:

 payer: fcl.authz, proposer: fcl.authz, authorizations: [fcl.authz], limit: 50,

• ये फ्लो-विशिष्ट चीजें हैं जो परिभाषित करती हैं कि कौन सा खाता लेनदेन (भुगतानकर्ता), लेनदेन को प्रसारित करने (प्रस्तावकर्ता) के लिए भुगतान करेगा, और जिन खातों से हमें प्राधिकरण की आवश्यकता है। (यदि किसी खाते में कई कुंजियाँ जुड़ी हुई हैं, तो यह मल्टी-सिग वॉलेट की तरह व्यवहार कर सकता है।)
• fcl.authz वर्तमान में कनेक्टेड खाते को संदर्भित करता है।
• limit एथेरियम दुनिया में गैसलिमिट की तरह है, जो गणना की अधिकतम मात्रा पर ऊपरी सीमा लगाती है। यदि गणना सीमा पार कर जाती है, तो लेनदेन विफल हो जाएगा।

हमें एक और फ़ंक्शन जोड़ने की आवश्यकता होगी जो हमारे द्वारा अभी बनाए गए mintNFT फ़ंक्शन को कॉल और हैंडल करेगा।

 const saveCollectible = async () => { if (urlInputRef.current.value.length > 0 && nameInputRef.current.value.length > 0) { try { setLoading(true); const transaction = await mintNFT(nameInputRef.current.value, urlInputRef.current.value); console.log('transactionID:', transaction); // Handle minting success (if needed) } catch (error) { console.error('Minting failed:', error); // Handle minting failure (if needed) } finally { setLoading(false); } } else { console.log('Empty input. Try again.'); } };

6. अंतिम कोड

हमारे मुख्य कार्यों के साथ, अब हम उन्हें अपने यूआई में प्लग कर सकते हैं।

हालाँकि, ऐसा करने से पहले, हम प्रारंभिक स्थिति को लोड करने में मदद के लिए कुछ useEffect कॉल जोड़ेंगे। आप इन्हें पहले से मौजूद useEffect कॉल के ठीक ऊपर जोड़ सकते हैं।

 useEffect(() => { checkCollectionInit(); viewNFT(); }, [currentUser]); useEffect(() => { if (currentUser.loggedIn) { setCollectiblesList(collectiblesList); console.log('Setting collectibles...'); } }, [currentUser]);

अब यूआई के साथ हमारे return सेक्शन में, हम अपने कार्यों को ऐप के उपयुक्त हिस्सों में जोड़ सकते हैं।

 return ( <div> <div className="navbar"> <h1>Flow Collectibles Portal</h1> <span>Address: {currentUser?.addr ?? "NO Address"}</span> <button onClick={currentUser.addr ? fcl.unauthenticate : fcl.logIn}> {currentUser.addr ? "Log Out" : "Connect Wallet"} </button> </div> {currentUser.loggedIn ? ( <div className="main"> <div className="mutate"> <h1>Mutate Flow Blockchain</h1> <form onSubmit={(event) => { event.preventDefault(); saveCollectible(); }} > <input type="text" placeholder="enter name of the NFT" ref={nameInputRef} /> <input type="text" placeholder="enter a url" ref={urlInputRef} /> <button type="submit">Mint</button> </form> <mark>Your Collection will be initialized while minting NFT.</mark> </div> <div className="query"> <h1>Query Flow Blockchain</h1> <mark>Click below button to check 👇</mark> <button onClick={checkCollectionInit}>Check Collection</button> <p> Is your collection initialized: {isInitialized ? "Yes" : "No"} </p> <button onClick={viewIds}> View NFT IDs you hold in your collection </button> <p>NFT Id: </p> {ids.map((id) => ( <p key={id}>{id}</p> ))} </div> <div className="view"> <h1>View Your NFT</h1> <input type="text" placeholder="enter your NFT ID" onChange={handleInputChange} /> <button onClick={viewNFT}>View NFT</button> <div className="nft-card"> <p>NFT id: {nft.id}</p> <p>NFT name: {nft.name}</p> <img src={nft.image} alt={nft.name} /> </div> </div> </div> ) : ( <div className="main-2"> <h1>Connect Wallet to mint NFT!!</h1> </div> )} </div> );

अंतिम कोड यहां जांचें।

अब ऐप पूरा होने पर, आइए जानें कि इसका उपयोग कैसे करें!

सबसे पहले, ऊपर दाईं ओर "कनेक्ट वॉलेट" बटन पर क्लिक करके अपने वॉलेट को कनेक्ट करें।

अब आप एनएफटी बना सकते हैं! अपने एनएफटी का नाम दर्ज करें और उस छवि का लिंक पेस्ट करें जिसका आप उपयोग करना चाहते हैं। आपके द्वारा "मिंट" पर क्लिक करने के बाद यह आपको अपने वॉलेट से लेनदेन पर हस्ताक्षर करने के लिए प्रेरित करेगा।

लेन-देन पूरा होने में थोड़ा समय लग सकता है. इसके पूरा होने के बाद, आपको अपने एनएफटी की आईडी देखने के लिए नीचे दिए गए बटन पर क्लिक करने में सक्षम होना चाहिए। यदि यह आपका पहला है, तो आईडी केवल "1" होनी चाहिए।

अब आप अपने एनएफटी की आईडी को कॉपी कर सकते हैं, इसे व्यू सेक्शन में पेस्ट कर सकते हैं और "एनएफटी देखें" पर क्लिक कर सकते हैं।

निष्कर्ष

बहुत अच्छा! आपने संग्रहणीय पोर्टल प्रोजेक्ट का भाग 2 पूरा कर लिया है। संक्षेप में, हमने अपने संग्रहणीय पोर्टल के फ्रंटएंड के निर्माण पर ध्यान केंद्रित किया।

हमने इसके द्वारा ऐसा किया:

• Next.js के साथ एक ऐप बनाना
• फ्लो वॉलेट को कनेक्ट करना
• ढलाई के लिए अपने स्वयं के एनएफटी बनाना
• अपना एनएफटी देखना

आपका दिन सचमुच बहुत अच्छा हो!