কিভাবে ফ্লো এবং ক্যাডেন্স ব্যবহার করে একটি ডিজিটাল সংগ্রহযোগ্য পোর্টাল তৈরি করবেন (পর্ব 2)

আপনার সংগ্রহযোগ্য পোর্টাল তৈরির চূড়ান্ত ধাপে স্বাগতম! (পার্ট 1 এর জন্য, এখানে দেখুন)

এই অংশে, আমরা ফ্রন্টএন্ড তৈরিতে ফোকাস করব—পাজলের শেষ অংশ।

আমরা যা অর্জন করব তা এখানে:

1. ফ্লো ওয়ালেট সংযোগ করুন।
2. আপনার অ্যাকাউন্ট চালু করুন এবং আপনার NFT মিন্ট করুন।
3. আপনার সংগ্রহে NFT ID চেক করুন।
4. আপনার সংগ্রহে থাকা NFT ID সহ NFT দেখুন।

আমরা ফ্রন্টএন্ড তৈরি করতে Next.js ব্যবহার করব।

চল শুরু করি!

1. ইনস্টলেশন

ঠিককরা

আপনার প্রজেক্ট flow-collectible-portal ডিরেক্টরি খুলুন। তারপর, চালান
টার্মিনালে npx create-next-app@latest frontend এবং enter টিপুন।

এটি আপনাকে বেশ কয়েকটি বিকল্প সরবরাহ করবে। এই টিউটোরিয়ালে, আমরা Typescript , ESLint, বা TailwindCSS ব্যবহার করব না এবং এই নিবন্ধের সময় আমরা src ডিরেক্টরি এবং অ্যাপ রাউটার ব্যবহার করব।

এখন আপনার কাছে একটি নতুন ওয়েব অ্যাপ প্রস্তুত।

আপনার ফ্রন্টএন্ড ফোল্ডারটি এইভাবে দেখায়:

2. কনফিগারেশন

ফ্লো ব্লকচেইনের সাথে ইন্টারঅ্যাক্ট করতে আমরা ফ্লো ক্লায়েন্ট লাইব্রেরি (FCL) ব্যবহার করব ওয়ালেট সংযোগ পরিচালনা করতে, স্ক্রিপ্ট চালাতে এবং আমাদের অ্যাপ্লিকেশনে লেনদেন পাঠাতে। এটি আমাদের সম্পূর্ণ ক্যাডেন্স ফাংশন লিখতে এবং জাভাস্ক্রিপ্ট ফাংশন হিসাবে চালানোর অনুমতি দেবে।

শুরু করতে, আসুন নিম্নলিখিত কমান্ডটি চালিয়ে আমাদের অ্যাপের জন্য FCL ইনস্টল করি:

 npm install @onflow/fcl --save

FCL ইনস্টল করার পরে, আমাদের এটি কনফিগার করতে হবে। আপনাকে যা করতে হবে তা এখানে:

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", });

এখন আপনি আপনার অ্যাপে FCL ব্যবহার করার জন্য প্রস্তুত।

3. প্রমাণীকরণ

একটি অ্যাপে ব্যবহারকারীর পরিচয় যাচাই করতে, আপনি বিভিন্ন ফাংশন ব্যবহার করতে পারেন:

1. লগ ইন করার জন্য, fcl.logIn() এ কল করুন।
2. সাইন আপ করার জন্য, fcl.signUp() কল করুন।
3. লগ আউট করার জন্য, fcl.unauthenticate() এ কল করুন।

আসুন জেনে নিই কিভাবে আমরা এই fcl ফাংশনগুলিকে আপনার ফ্রন্টএন্ডে প্রয়োগ করতে পারি।

প্রথমে, আমরা অ্যাপ ডিরেক্টরির ভিতরে আমাদের page.js ফাইলে নিম্নলিখিত কোড যোগ করব। এটি কিছু নির্ভরতা আমদানি করবে, আমাদের অ্যাপের অংশগুলির জন্য কিছু প্রাথমিক useState সেট আপ করবে এবং একটি মৌলিক UI তৈরি করবে।

এটি সুন্দর দেখাচ্ছে তা নিশ্চিত করতে, অ্যাপ ডিরেক্টরির মধ্যে page.module.css ফাইলটি মুছুন এবং পরিবর্তে page.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 ফাংশনের পরে এই Cadence স্ক্রিপ্ট কোড যোগ করুন।

 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. ফ্লো ব্লকচেইন পরিবর্তন করা

যদিও আমাদের আগের ফাংশনগুলি ছিল শুধুমাত্র "রিড অনলি", আমাদের পরবর্তী ফাংশনগুলি এমন অ্যাকশন থাকবে যা ব্লকচেইন স্টেটকে পরিবর্তন করতে পারে এবং এতে লিখতে পারে; ওরফে "মিন্ট এবং এনএফটি।"

এটি করার জন্য আমরা একটি ধ্রুবক হিসাবে আরেকটি Cadence স্ক্রিপ্ট লিখব।

 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. চূড়ান্ত কোড

আমাদের প্রধান ফাংশনগুলি জায়গায় রেখে, আমরা এখন সেগুলিকে আমাদের UI এ প্লাগ করতে পারি।

যাইহোক, আমরা এটি করার আগে, আমরা প্রাথমিক অবস্থা লোড করতে সাহায্য করার জন্য কিছু useEffect কল যোগ করব। আপনি ইতিমধ্যে বিদ্যমান useEffect কলের উপরে এইগুলি যোগ করতে পারেন।

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

এখন UI এর সাথে আমাদের 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> );

এখানে চূড়ান্ত কোড চেক করুন.

এখন অ্যাপটি সম্পূর্ণ হয়ে গেছে, আসুন কীভাবে এটি ব্যবহার করবেন তা জেনে নেই!

প্রথমে, উপরের ডানদিকে "সংযুক্ত ওয়ালেট" বোতামে ক্লিক করে আপনার ওয়ালেট সংযোগ করুন৷

এখন আপনি একটি NFT মিন্ট করতে পারেন! আপনার NFT এর নাম লিখুন এবং আপনি যে ছবিটি ব্যবহার করতে চান তার একটি লিঙ্কে পেস্ট করুন। আপনি "মিন্ট" ক্লিক করার পরে এটি আপনাকে আপনার ওয়ালেটের সাথে একটি লেনদেন স্বাক্ষর করতে অনুরোধ করবে।

লেনদেন সম্পূর্ণ হতে একটু সময় লাগতে পারে। এটি সম্পূর্ণ হওয়ার পরে, আপনি আপনার NFT গুলির আইডি দেখতে নীচের বোতামটি ক্লিক করতে সক্ষম হবেন৷ যদি এটি আপনার প্রথমটি হয়, তাহলে আইডিটি কেবল "1" হওয়া উচিত।

এখন আপনি আপনার এনএফটি আইডি কপি করতে পারেন, এটি ভিউ বিভাগে পেস্ট করতে পারেন এবং "এনএফটি দেখুন" এ ক্লিক করুন৷

উপসংহার

সাবাশ! আপনি সংগ্রহযোগ্য পোর্টাল প্রকল্পের অংশ 2 শেষ করেছেন। সংক্ষেপে, আমরা আমাদের সংগ্রহযোগ্য পোর্টালের ফ্রন্টএন্ড তৈরির দিকে মনোনিবেশ করেছি।

আমরা এটি করেছিলাম:

• Next.js দিয়ে একটি অ্যাপ তৈরি করা
• ফ্লো ওয়ালেট সংযোগ করা হচ্ছে
• মিন্টিংয়ের জন্য আমাদের নিজস্ব এনএফটি তৈরি করা
• আপনার NFT দেখা হচ্ছে

একটি সত্যিই মহান দিন আছে!