उपरोक्त स्मार्ट अनुबंध में ध्यान देने योग्य महत्वपूर्ण बातें:

• हम आयात कर रहे हैं NonFungibleToken तथा MetadataViews फ्लो मानकों का उपयोग करके हमारे एनएफटी बनाने के लिए अनुबंध
• हम अपने एनएफटी संसाधन को परिभाषित करते हैं pub resource NFT समारोह
• mintNFT फ़ंक्शन फ़ंक्शन को कॉल करने वाले खाते में एक NFT बनाता है

अब हमें अपने में वापस जाने की जरूरत है flow.json कुछ चीज़ें जोड़ने के लिए फ़ाइल:

• में contracts अनुभाग, अनुबंध और उसका पथ जोड़ें।
• में deployments अनुभाग नेटवर्क जोड़ें (testnet), वह खाता जिसका उपयोग हम परिनियोजन करने के लिए करेंगे (testnet-account), और अनुबंध का नाम (FlowTutorialMint).

"emulators": 
"default": 
"port": 3569,
"serviceAccount": "emulator-account"

,
"contracts": 
"FlowTutorialMint": "./FlowTutorialMint.cdc"
,
"networks": 
"emulator": "127.0.0.1:3569",
"mainnet": "access.mainnet.nodes.onflow.org:9000",
"testnet": "access.devnet.nodes.onflow.org:9000"
,
"accounts": 
"emulator-account": 
"address": "f8d6e0586b0a20c7",
"key": "2becfbede2fb89796ab68df3ec2a23c3627235ec250a3e5da41df850a8dd4349"
,
"testnet-account": 
"address": "0x8e0dac5df6e8489e",
"key": "c91f4716a51a66683ccb090ca3eb3e213b90e9f9ae2b1edd12defffe06c57edc"

,
"deployments": 
"testnet": 
"testnet-account": [
"FlowTutorialMint"
]

स्मार्ट अनुबंध स्थापित करने का अंतिम चरण इसे टेस्टनेट पर परिनियोजित करना है। ऐसा करने के लिए, अपने टर्मिनल में प्रोजेक्ट फ़ोल्डर में निम्न आदेश टाइप करें:

flow project deploy -n=testnet

हमें यह कहते हुए एक आउटपुट प्राप्त करना चाहिए कि अनुबंध सफलतापूर्वक लागू किया गया था:

यहां यह नोट करना महत्वपूर्ण है कि कैडेंस स्मार्ट कॉन्ट्रैक्ट्स उस खाते के स्टोरेज में मौजूद होते हैं जो उन्हें तैनात करता है, जबकि सॉलिडिटी के साथ स्मार्ट कॉन्ट्रैक्ट ब्लॉकचेन पर अपने स्वयं के पते पर मौजूद होता है।

हालांकि खाते की भंडारण क्षमता की सीमाएं हैं, ये खाते में आरक्षित फ्लो टोकन की संख्या के सापेक्ष हैं। आप में खाता संग्रहण के बारे में अधिक जान सकते हैं फ्लो डेवलपर पोर्टल.

बहुत बढ़िया! अब हमारे अनुबंध के साथ बातचीत करने के लिए एक सरल दृश्यपटल का निर्माण करते हैं।

इस परियोजना के दृश्यपटल के लिए, हम रिएक्ट का उपयोग करेंगे। सबसे पहले, एक नए फोल्डर में नेविगेट करें और रिएक्ट प्रोजेक्ट बनाने के लिए निम्नलिखित कमांड चलाएँ:

npx create-react-app flow-tutorial

इसके बाद, फ्लो-ट्यूटोरियल फोल्डर में नेविगेट करें और इंस्टॉल करें फ्लो क्लाइंट लाइब्रेरी (एफसीएल):

npm i -S @onflow/fcl

FCL हमें फ्लो ब्लॉकचैन के साथ संवाद करने, लेनदेन कॉल करने और अन्य सभी FCL- संगत वॉलेट को कस्टम इंटीग्रेशन जोड़ने की आवश्यकता के बिना एकीकृत करने की अनुमति देगा। एक बार जब यह पूरा हो जाता है, तो हम कुछ अतिरिक्त निर्भरताएँ स्थापित करेंगे:

npm i elliptic sha3 styled-components

अपनी सभी निर्भरताओं को स्थापित करने के बाद, हम डैप फ्रंटएंड पर काम करना शुरू करने के लिए तैयार हैं।

3.क. एफसीएल को कॉन्फ़िगर करें

इससे पहले कि हम चीजों को संरचित और स्टाइल करना शुरू करें, चलिए एक FCL कॉन्फ़िगरेशन फ़ाइल बनाते हैं जहाँ हम महत्वपूर्ण सेटिंग्स को परिभाषित करेंगे, जैसे कि हम टेस्टनेट या मेननेट के साथ इंटरैक्ट करेंगे या नहीं।

में src निर्देशिका, नाम का एक नया फ़ोल्डर बनाएँ flow. इस नए फोल्डर में एक फाइल बनाएं जिसका नाम है config.js.

इसमें config.js फ़ाइल, हम FCL आयात करेंगे, कॉल करें fcl.config कार्य करें और हमारे डैप के लिए कुछ सेटिंग्स बनाएं, जैसे:

• app.detail.title
• accessNode.api
• discovery.wallet

खोलें config.js फाइल करें और इसे निम्नलिखित कोड से भरें:

const fcl = require("@onflow/fcl");
fcl.config(
"app.detail.title": "Flow Mint Page Tutorial", // this adds a custom name to our wallet
"accessNode.api": " // this is for the local emulator
"discovery.wallet": " // this is for the local dev wallet
)

वहाँ हैं अतिरिक्त सेटिंग्स हम कॉन्फ़िगर कर सकते हैं हमारे डैप के लिए, लेकिन अभी के लिए, हमें बस इतना ही चाहिए।

कॉन्फ़िगरेशन समाप्त होने के साथ, चलिए बिल्डिंग पर चलते हैं!

3.बी. प्रारंभिक संरचना

सबसे पहले, नेविगेट करें App.js फ़ाइल में src फ़ोल्डर और इसके साथ कोड बदलें:

import './App.css';
function App() 
return (

Mint Your Dog!


);
export default App;

यह हमें हमारे डैप की प्रारंभिक संरचना प्रदान करेगा, जिससे हम विस्तार करेंगे।

अगला, हम इस संरचना को शैलीबद्ध करेंगे। खोलें index.css फ़ाइल और कोड को निम्न के साथ बदलें:

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@200;300;600;700&display=swap');
body 
margin: 0;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
code 
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;

यदि आप एनपीएम स्टार्ट चलाते हैं, तो आपको मिंट योर डॉग शीर्षक वाला एक खाली पृष्ठ दिखाई देगा!

अगला, चलिए कुछ घटक बनाते हैं!

3.ग. नव घटक

के अंदर src निर्देशिका, नामक एक नया फ़ोल्डर बनाएँ componentsजहां हम अपने सभी कस्टम रिएक्ट घटकों का निर्माण करेंगे।

पहला घटक जो हम बनाएंगे वह नेवबार है, जो उपयोगकर्ता के कनेक्ट न होने पर लॉगिन बटन दिखाएगा, या उपयोगकर्ता के पते के आगे लॉग आउट बटन और खाते में मौजूद फ्लो टोकन की संख्या दिखाएगा यदि वे जुड़े हुए हैं।

नाम की एक फाइल बनाएं Navbar.jsx और इसे निम्नलिखित कोड से भरें:

यहां क्या हो रहा है यह देखने के लिए आइए कोड के माध्यम से चलते हैं।

• सबसे पहले, हम फ्लो क्लाइंट लाइब्रेरी का आयात कर रहे हैं, जो हमें कार्य प्रदान करेगा authenticate, unauthenticateऔर निर्धारित करें currentUser.
• अगला, हम उन अन्य निर्भरताओं को आयात करते हैं जिनकी हमें आवश्यकता होती है और फिर उपयोग करते हैं styled-components अंदर हमारे नवबार की मूल शैली बनाने के लिए Wrapper चर।
• फिर, हम कुछ रिएक्ट स्टेट वेरिएबल्स को परिभाषित करते हैं (user तथा flow).
• अगला डैप की कार्यक्षमता है, जैसे logOut, logInतथा getFlow (कनेक्टेड अकाउंट का फ्लो बैलेंस प्राप्त करें)।
• उसके बाद, हम वापस कर देते हैं html हमारे स्टाइल में लिपटे नेवबार के लिए।

पूर्ण के साथ Navbar घटक, अब हम इसे इसमें आयात कर सकते हैं App.js फ़ाइल:

import './App.css';
import Navbar from './components/Navbar.jsx';
function App() 
return (


Mint your Dog!


);
export default App;

अब, अगर हम प्रोजेक्ट को चलाते हैं npm startहम अपना देखते हैं Navbar हमें वह कार्यक्षमता देता है जिसे हमने अपने कोड में परिभाषित किया है। बहुत बढ़िया!

अगला, आइए अपना NFT मिंटिंग कंपोनेंट बनाएं!

3.घ। एनएफटी खनन घटक

के अंदर components फ़ोल्डर, नामक एक नई फ़ाइल बनाएँ MintComponent.jsxफिर निम्न कोड कॉपी करें:

फिर से, यह सुनिश्चित करने के लिए कोड के माध्यम से चलते हैं कि हम समझ रहे हैं कि क्या हो रहा है।

• हमें इस घटक में FCL आयात करने की आवश्यकता है ताकि हम अपने NFT को मिंट करने वाले फ़ंक्शन तक पहुँच प्राप्त कर सकें।
• दोबारा, हम प्रयोग करते हैं styled-components कुछ स्टाइल जोड़ने के लिए।

mintNFT समारोह का उपयोग करता है fcl.mutate द्वारा वास्तविक टकसाल प्रदर्शन करने के लिए कार्य:

• यह सत्यापित करना कि क्या उपयोगकर्ता के खाते में फ्लो ट्यूटोरियल मिंट एनएफटी संग्रह है और यदि नहीं है तो एक बना रहा है।
• FlowTutorialMint अनुबंध के अंदर मौजूदा मिंट फ़ंक्शन को कॉल करना और पैरामीटर पास करना।
• फ़ंक्शन संसाधन (एनएफटी) लौटाता है, जिसे हम उपयोगकर्ता के खाते में जमा करते हैं।
• में fcl.mutate कार्य, हम उस स्मार्ट अनुबंध को आयात कर रहे हैं जिसे हमने लाइन के साथ तैनात किया था: import FlowTutorialMint from 0x8e0dac5df6e8489e
• हम भी आयात करते हैं NonFngibleToken तथा MetadataViews मानकों।
• लेनदेन में, हम एनएफटी निर्दिष्ट करते हैं type तथा url छवि का।

कैडेंस लेनदेन के दो चरण होते हैं: prepare तथा execute

• prepare – हम उनके खाते तक पहुंचने और निजी कार्य करने के लिए उपयोगकर्ता के हस्ताक्षर मांगते हैं। इस मामले में, एक नया बनाना FlowTutorial टकसाल संग्रह अगर उनके पास पहले से एक नहीं है। हम एक सार्वजनिक भी आरंभ करते हैं Capability के लिए प्रतिबंधित NonFungibleToken.CollectionPublic. क्षमताओं पर अधिक संदर्भ के लिए, इस लिंक को देखें.
• execute – बुलाएं mintNFT टेस्टनेट पर हमारे अनुबंध के अंदर कार्य करें।
• में html कोड के भाग में, हम तीन चित्र प्रदर्शित करते हैं जिनसे उपयोगकर्ता एक NFT बना सकता है।

हमारे साथ MintComponent पूरा, हम इसे में आयात कर सकते हैं App.js फ़ाइल:

import './App.css';
import Navbar from './components/Navbar.jsx';
import MintComponent from './components/MintComponent.jsx';
function App() 
return (


Mint your Dog!



);
export default App;

अब उपयोगकर्ता डैप में लॉग इन कर सकते हैं और अपने खाते में एनएफटी बना सकते हैं!

पहेली का अंतिम भाग एक घटक बनाना है जो उपयोगकर्ता के एनएफटी को लाएगा और उन्हें प्रदर्शित करेगा।

3.ई. उपयोगकर्ता के एनएफटी दिखा रहा है

में components फ़ोल्डर, नामक एक नई फ़ाइल बनाएँ ShowNfts.jsxऔर हम निम्नलिखित कोड का उपयोग करेंगे:

अनिवार्य रूप से हम इस कोड में जो कर रहे हैं वह एफसीएल का उपयोग करके फ्लो ब्लॉकचैन से पूछताछ कर रहा है, और एनएफटी को हमारे खाते से जुड़े खाते में इकट्ठा कर रहा है। FlowTutorialMint संग्रह।

हमें बस इस घटक को अपने साथ जोड़ने की जरूरत है App.jsऔर हम जाने के लिए अच्छे हैं!

import './App.css';
import Navbar from './components/Navbar.jsx';
import MintComponent from './components/MintComponent.jsx';
import ShowNfts from './components/ShowNfts';
function App() 
return (


Mint your Dog!




);
export default App;

वह सब कुछ है! अब आइए अपने डैप का परीक्षण करें और सुनिश्चित करें कि हम कुछ एनएफटी बना सकते हैं।

4. चलिए कुछ NFT मिन्ट करते हैं!

तो चलिए सबसे पहले ऐप को शुरू करते हैं npm start और उसके बाद हमारे ब्राउज़र को खोलें http://localhost:3000/.

यदि सब कुछ ठीक रहा, तो आपकी स्क्रीन इस तरह दिखनी चाहिए:

हमारे लॉगिन अनुक्रम में एफसीएल का उपयोग करने के बारे में सुंदर बात यह है कि यह हमारे उपयोगकर्ताओं को सिर्फ एक ईमेल पते का उपयोग करके खाते को सही जगह पर खाता बनाने की आसान पहुंच प्रदान करता है। यह ठीक से काम करता है यह सुनिश्चित करने के लिए आइए प्रक्रिया के माध्यम से चलते हैं। लॉगिन बटन पर क्लिक करने पर, एक डायलॉग पॉप अप होगा, जिसमें हमें लॉग इन करने के लिए दो विकल्प मिलेंगे। हम ब्लोक्टो को चुनेंगे।

ब्लॉक्टो हमें एक ईमेल पता दर्ज करने के लिए संकेत देगा और ऐसा करने पर, हमें एक नया खाता पंजीकृत करने की क्षमता देता है। फिर, एक बार जब हम अपने पते पर ईमेल किए गए कोड को इनपुट करते हैं, तो ब्लॉक्टो हमें एक चमकदार, नए प्रवाह पते के साथ सेट करता है!

यहां से, हम चुन सकते हैं कि हम किस कुत्ते की छवि को एनएफटी के रूप में ढालना चाहते हैं। मैंने स्वैग डॉग को चुना क्योंकि यह मुझे खुद की थोड़ी याद दिलाता है!

मिंट बटन दबाने पर एक और डायलॉग पॉप अप होगा जो हमें उस लेन-देन के बारे में बताएगा जो हम करने वाले हैं। हम देख सकते हैं कि ब्लोक्टो कृपापूर्वक खनन शुल्क को कवर कर रहा है, और यदि हम उस स्क्रिप्ट को देखना चाहते हैं जिसे हम कॉल कर रहे हैं, तो हम ऐसा कर सकते हैं।

अप्रूव हिट करने के कई सेकंड बाद, हमें एक संदेश प्राप्त करना चाहिए कि हमारा मिंट सफल रहा, और हमारा नवनिर्मित स्वैग डॉग हमारे डैप के My NFTs सेक्शन के तहत प्रदर्शित होगा।

यहां हमारे डैप इन एक्शन का लिंक दिया गया है:

https://s1.gifyu.com/images/flow_tutorial-min.gif

इस परियोजना के लिए संपूर्ण स्रोत कोड पाया जा सकता है यह भंडार.

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

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

फ्लो पर बिल्डिंग के बारे में अधिक जानकारी के लिए देखें फ्लो डेवलपर पोर्टल.

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