चरण 3: एक डैप डेवलपर पोर्टल लॉन्च करें

    तीसरा चरण

    इसलिए, आपको मूल बातें नीचे मिल गई हैं। पिछले भाग में, आपने एक स्मार्ट कॉन्ट्रैक्ट विकसित किया, और इसे Truffle का उपयोग करके तैनात किया। हालाँकि, पिछले भाग में, आपके स्मार्ट कॉन्ट्रैक्ट्स को एक स्थानीय विकास नेटवर्क में तैनात किया गया था – और यह कोई मज़ेदार नहीं है, क्योंकि केवल आप चीजों को तैनात कर सकते हैं और उस स्थानीय टेस्ट नेटवर्क के साथ बातचीत कर सकते हैं! हम दोस्त चाहते हैं! और अन्य स्मार्ट कॉन्ट्रैक्ट्स तक पहुंच जो अन्य लोगों ने तैनात किए हैं!

    इसलिए, इस खंड में, हम एक सार्वजनिक Ethereum testnet का उपयोग करने में संक्रमण करेंगे, इसलिए आप Ethereum पारिस्थितिकी तंत्र के आसपास होने वाली सभी क्रियाओं में शामिल हो सकते हैं!

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

    पहले, हम इस बारे में बात करने जा रहे हैं कि आपको इन सार्वजनिक Ethereum नेटवर्क तक कैसे पहुँच प्राप्त होती है.

    इन नेटवर्क तक पहुंचने के लिए, आपको एक नोड से कनेक्ट करने की आवश्यकता है जो संबंधित नेटवर्क से जुड़ा हुआ है। आप प्रत्येक Ethereum नेटवर्क को अपनी छोटी Ethereum दुनिया के रूप में देख सकते हैं, और आप Ethereum नोड को अपने प्रत्येक विश्व के प्रवेश द्वार या पहुंच बिंदु के रूप में देख सकते हैं! क्योंकि Ethereum एक वितरित नेटवर्क है, प्रत्येक Ethereum नोड पूरे नेटवर्क को संग्रहीत करता है, जो इससे जुड़ा होता है (ऐसे नोड होते हैं, जिन्हें पूर्ण स्थिति को संग्रहीत करने की आवश्यकता नहीं होती है, लेकिन अब इसके लिए चिंता न करें), और लगातार संचार करता है उस स्थिति को अप-टू-डेट रखने के लिए नेटवर्क में अन्य नोड्स के साथ! इसलिए, इस राज्य से पढ़ने और लिखने में सक्षम होने के लिए, हमें इन नोड्स में से किसी एक पर पहुंचने की आवश्यकता होगी.

    आप वर्तमान में उपलब्ध कई Ethereum ग्राहकों में से एक (Hyperenger Besu (ConsenSys द्वारा विकसित जावा क्लाइंट), Geth (गो क्लाइंट), Parity (रस्ट क्लाइंट), आदि) का उपयोग करके अपने स्वयं के नोड को बहुत अच्छी तरह से होस्ट कर सकते हैं – हालांकि, वहाँ एक बहुत है थोड़ा DevOps ओवरहेड जो होस्टिंग और अपने स्वयं के Ethereum नोड को बनाए रखने के साथ आता है – खासकर यदि आप इसे मज़बूती से करना चाहते हैं! जैसे, कंसेन्स में हमने इन्फ्रा – एक विश्वस्तरीय एथेरेम इन्फ्रास्ट्रक्चर की पेशकश की है। Infura आपके लिए पूरे management नोड प्रबंधन ’टुकड़े का ख्याल रखता है, जो आपको Ethereum नोड्स के क्लस्टर्स के लिए त्वरित, विश्वसनीय और स्केलेबल पहुंच प्रदान करता है! आप Infura के बारे में सोच सकते हैं “Ethereum-nodes-as-a-Service” &# 128578;

    इन्फ्रा के साथ शुरुआत करना

    Infura के साथ आरंभ करने के लिए, आप किसी खाते को पंजीकृत करना चाहते हैं infura.io. चिंता न करें – यह आरंभ करने के लिए पूरी तरह से स्वतंत्र है, और आपको किसी भी संवेदनशील जानकारी को दर्ज करने की आवश्यकता नहीं है!

    एक बार पंजीकृत होने के बाद, आपको एक पृष्ठ पर निर्देशित किया जाएगा, जो इस तरह दिखता है:

    infuraLogin

    जैसा कि यह पृष्ठ बताता है, आरंभ करने के लिए, आप पहला विकल्प चुनें “आरंभ करें और Ethereere नेटवर्क तक पहुंचने के लिए अपनी पहली परियोजना बनाएं!”

    आप अपनी परियोजना को जो भी पसंद करते हैं उसे नाम दे सकते हैं – हम अपना नाम “परीक्षण-परियोजना”.

    InfuraNP

    अब, आपको उन क्रेडेंशियल्स के साथ प्रस्तुत किया जाएगा जिन्हें आपको इन्फ्रा नोड्स तक पहुंचने की आवश्यकता होगी!


    InfuraC

    इस पृष्ठ को खुला रखें! हम बाद में इसमें वापस आएंगे &# 128578;

    अगली बात जो हम करेंगे, वह है एक नई Truffle परियोजना को प्रारंभ करना। यदि आपको Truffle को स्थापित करने में सहायता की आवश्यकता है, तो कृपया इस दस्तावेज़ के पिछले भाग को देखें.

    एक नया Truffle प्रोजेक्ट इनिशियलाइज़ करने के लिए, एक नया फ़ोल्डर बनाएँ, और रन करें

    ट्रफल इनिट

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

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

    अपने नए आरंभिक प्रोजेक्ट प्रकार में Truffle HD वॉलेट प्रदाता को अपने टर्मिनल में जोड़ने के लिए:

    npm स्थापित – save @ truffle / hdwallet- प्रदाता

    यह कुछ चेतावनी दे सकता है, लेकिन जब तक यह स्थापित होता है, तब तक आप जाने के लिए अच्छा है!

    अब हम अपने आवेदन का उपयोग करने के लिए एक Ethereum खाता बना सकते हैं! चूँकि हमारा वॉलेट प्रदाता एक HD (पदानुक्रमित नियतात्मक) वॉलेट है, हम एक ही बीज वाक्यांश, या mnemonic का उपयोग करके खातों को निर्धारित कर सकते हैं।.

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

    गणेश-क्लि

    यदि आपने इस मार्गदर्शिका के चरण 2 को पूरा कर लिया है, तो आपके पास पहले से स्थापित Ganache / ganache-cli होना चाहिए – यदि आप नहीं हैं, तो आप इसे npm कमांड का उपयोग करके स्थापित कर सकते हैं:

    npm स्थापित -g ganache-cli

    या यदि आप यार्न का उपयोग कर रहे हैं 

    यार्न ग्लोबल जोड़ें ganache-cli

    इसके बाद, हमें अपने ऐप को गनाचे से बात करने की अनुमति देनी होगी। अपने प्रोजेक्ट डायरेक्टरी पर जाएं और truffle-config.js फ़ाइल को चेक करें, बस नेटवर्क के लिए निम्न पंक्तियों को असहज करें (या जोड़ें):

    विकास: {मेजबान: "127.0.0.1", // लोकलहोस्ट (डिफ़ॉल्ट: कोई नहीं) पोर्ट: 8545, // स्टैंडर्ड एथेरियम पोर्ट (डिफ़ॉल्ट: कोई नहीं) network_id: "*" // कोई भी नेटवर्क (डिफ़ॉल्ट: कोई नहीं)},

    अनमनापन

    अच्छा लगा! अब हमारा ऐप 127.0.0.1:8545 पर चलने वाले हमारे गनाचे विकास नेटवर्क से बात कर सकता है! अब, एक नई टर्मिनल विंडो में (लेकिन अभी भी आपके प्रोजेक्ट फ़ोल्डर में) कमांड चलाएं

    ट्रफल कंसोल

     अपने Ganache नेटवर्क से कनेक्ट करने के लिए। चिंता न करें – हम बाद में एक सार्वजनिक नेटवर्क से जुड़ेंगे! हमें अभी अपनी चाबी बनाने के लिए गान्चे से जुड़ने की जरूरत है &# 128578;

    ध्यान दें: यदि आप समस्याओं में चल रहे हैं तो सुनिश्चित करें कि आपका RPC सर्वर पोर्ट नंबर आपकी ट्रफल कॉन्फिग फाइल से मेल खाता है। डिफ़ॉल्ट मामले में, 8545 को काम करना चाहिए, अन्यथा गानचे से मिलान करने के लिए अपनी कॉन्फ़िगरेशन फ़ाइल को बदल दें.

    अब अपना बटुआ बनाने के लिए Truffle कंसोल में निम्न कमांड दर्ज करें:

    const HDWletletProvider = आवश्यकता (‘@ ट्रफल / एचडीवले-प्रदाता’);

    यह “अपरिभाषित” की प्रतिक्रिया में परिणाम होना चाहिए

    अपने 12-शब्द के एमनोमोनिक के लिए, आप एक एमनेमिक जनरेटर का उपयोग कर सकते हैं जैसे कि यह वाला यदि आप चाहते हैं!

    यह सुनिश्चित करें कि आप अपने MNEMONIC (बीज) PHRASE को सेव करें! हमें बाद में इसकी आवश्यकता होगी &# 128515;

    अगला, अपने टर्मिनल में निम्नलिखित आदेश जोड़ें (जबकि ट्रफल विकास में अभी भी):

    const mnemonic = ’12 शब्द यहाँ ‘; const wallet = नया HDWletletProvider (mnemonic), "http: // लोकलहोस्ट: 8545");

    अब, अपने ट्रफल कंसोल में कमांड दर्ज करें 

    बटुआ

    यदि आप स्क्रॉल करते हैं, तो आपको इस तरह से खातों की एक सूची देखनी चाहिए!

    एडी

    उस खाते के उत्पन्न होने के बावजूद जब हम गैंचे से जुड़े हुए थे, हम उसी इथेरियम नेटवर्क (कृपया ध्यान दें) पर उसी Ethereum खाते (कृपया ध्यान दें) का उपयोग कर सकते हैं, हालाँकि, उसी खाते का उपयोग किसी भी Ethereum नेटवर्क में किया जा सकता है, इससे संबंधित संपत्ति / गतिविधियाँ खाता नेटवर्क-विशिष्ट हैं – उदाहरण के लिए, अगर मैं एथेरियम मेननेट पर लेनदेन करता हूं, तो यह लेन-देन केवल Ethereum Mainnet पर होगा, और कोई अन्य नेटवर्क नहीं)। हम अब गनाचे (स्थानीय देव नेटवर्क) के साथ बातचीत बंद करने जा रहे हैं, और कुछ सार्वजनिक नेटवर्क के साथ बातचीत करने के लिए उस खाते का उपयोग करना शुरू करते हैं!!

    आमतौर पर, सार्वजनिक नेटवर्क के साथ सहभागिता करते समय सबसे पहले आपको उस नेटवर्क के ईथर से कुछ प्राप्त करना होगा। हमारे मामले में, हम Ropsten सार्वजनिक परीक्षण नेटवर्क से जुड़ रहे हैं, इसलिए हमें कुछ Ropsten ईथर (ETH) प्राप्त करने की आवश्यकता होगी! चिंता मत करो – परीक्षण शुद्ध ETH स्वतंत्र और भरपूर है, और प्राप्त करने के लिए सुपर आसान है &# 128077;

    परीक्षण ETH प्राप्त करने का समय

    कुछ रोपस्टेन ईटीएच प्राप्त करने के लिए, सिर पर रोपस्टन नल. अपने खाते के पते, और viola में चिपकाएँ! आपको कुछ रोपस्टेन ईटीएच प्राप्त हुए हैं और रोपस्ट नेटवर्क को लेनदेन भेजना शुरू कर सकते हैं (यानी राज्य परिवर्तन कर रहे हैं)!

    संदर्भ के लिए, रोपस्टेन टेस्ट नेट एक सार्वजनिक Ethereum परीक्षण नेटवर्क है, जहां आप अपने कोड को एक ऐसे वातावरण में परीक्षण कर सकते हैं जो Ethereum mainnet को बारीकी से दिखाता है। रोपस्टीन टेस्ट नेट (और अन्य सार्वजनिक एथेरम टेस्ट नेट) के बीच मुख्य अंतर यह है कि टेस्टनेट-लैंड में, ईटीएच बहुतायत से है और इसका कोई वास्तविक दुनिया मूल्य नहीं है! जब आप Ethereum mainnet के साथ बातचीत करना शुरू करते हैं, तो आप अपने लेन-देन (गैस की लागत) का भुगतान करने के लिए जिस ईथर का उपयोग करते हैं, उसकी कीमत ACTUAL डॉलर होगी – और इसलिए हमें यह सुनिश्चित करने की आवश्यकता है कि हम चीजें पहले से कर रहे हैं, ताकि हम अपनी मेहनत न खोएं -रोज़्ड कैश / हमारा कीमती मेननेट ETH!

    अन्य सार्वजनिक परीक्षण नेटवर्कों के साथ-साथ रोपस्टेन टेस्ट नेट, आपके लिए कई ब्लॉक खोजकर्ता हैं जो गतिविधि को देखने के लिए ऑन-चेन (https://ropsten.etherscan.io/) का है। अपने वित्त पोषित खाते को देखने के लिए, बस अपने खाते के पते को एक्सप्लोरर में पेस्ट करें – और आप इससे जुड़े सभी इतिहास देख सकते हैं:

    स्क्रीन शॉट 2020 09 01 बजे 4 34 21 बजे

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

    पहली चीज जो हम करना चाहते हैं, वह है कि हमारे कीमती SECRETS को घर बनाने के लिए एक .env फ़ाइल बनाई जाए! इन रहस्यों में हमारी Infura API कुंजी (जेनरेट की गई है जब हमने अपना Infura अकाउंट बनाया था), और हमारे mnemonic वाक्यांश.

    अपनी परियोजना के मूल स्तर पर, बस एक नई फ़ाइल “.env” बनाएँ। इसके अलावा, आपको टर्मिनल में निम्न कमांड दर्ज करके dotenv NPM पैकेज स्थापित करना होगा

    npm स्थापित – save dotenv

    इस नई फ़ाइल में, आपको दो चीजों की आवश्यकता होगी:

    INFURA_API_KEY = अपना एपीआई कुंजी यहाँ दर्ज करें (कोई उद्धरण नहीं)

    MNEMONIC = “लेंस व्हेल फैन वायर बबल ऑनलाइन सीट एक्सपोज़ स्टॉक नंबर वाक्य विजेता”

    INFURA_API_KEY उस परियोजना की परियोजना आईडी है जिसे आपने पहले infura में बनाया था:

    स्क्रीन शॉट 2020 09 01 बजे 4 37 12 बजे

    और MNEMONIC 12-शब्द का बीज वाक्यांश है जिसका उपयोग आपने पहले अपना खाता बनाने के लिए किया था.

    आपकी फ़ाइल अब इस तरह दिखनी चाहिए:

    स्क्रीन शॉट 2020 09 01 बजे 4 41 53 बजे

    ठीक है, हम पास हो रहे हैं!

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

    अब, हमें ट्रफल-config.js फ़ाइल पर जाने की आवश्यकता है। यहां, हमें अपने प्रदाता को सूचित करने के लिए कुछ चीजें जोड़ने की आवश्यकता होगी (जिसका उपयोग इन्फ्रा के साथ बातचीत करने के लिए किया जाता है (Truffle HDWallet प्रदाता जो हमने पहले स्थापित किया था), और हमारे ऐप को रोपस्टेन इंफ्रा नोड पर इंगित करें.

    फ़ाइल के शीर्ष पर, जोड़ें:

    आवश्यकता ("डॉटनव") .config (); const HDWletletProvider = आवश्यकता ("@ truffle / hdwallet- प्रदाता");

    अगला, “नेटवर्क” के तहत, आप निम्नलिखित नेटवर्क जोड़ना चाहेंगे:

    रोपस्टन: {प्रदाता: () => नया HDWletletProvider (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), network_id: 3, // रोपस्टन की आईडी गैस: 5500000, // रोपस्टन में एक है। मेननेट पुष्टिकरणों की तुलना में निम्न ब्लॉक सीमा: तैनाती के बीच प्रतीक्षा करने के लिए 2, // # का। (डिफ़ॉल्ट: 0) टाइमआउटब्लॉक: 200, // # परिनियोजन समय से पहले ब्लॉक (न्यूनतम / डिफ़ॉल्ट: 50) (डिफ़ॉल्ट: सार्वजनिक जाल के लिए गलत)}

     

    अब आपकी ट्रफल-config.js फ़ाइल को कुछ इस तरह दिखना चाहिए!

    पक्षीय लेख:

    यदि आप Infura एंडपॉइंट का उपयोग कर रहे हैं, तो `from` पैरामीटर की आवश्यकता है, क्योंकि उनके पास एक बटुआ नहीं है। यदि आप Ganache या Geth RPC समापन बिंदु का उपयोग कर रहे हैं, तो यह एक वैकल्पिक पैरामीटर है.

    स्क्रीन शॉट 2020 09 01 बजे 4 50 54 बजे

    अब हम जादू के लिए तैयार हैं! ROPSTEN को एक स्मार्ट अनुबंध तैनात करने का समय है!

    एक स्मार्ट अनुबंध की स्थापना

    सॉलिडिटी सेटअप

    सबसे पहले, हम तैनाती के लिए एक स्मार्ट अनुबंध बनाना चाहते हैं! आप इस गाइड के पिछले भाग में विकसित स्मार्ट अनुबंध को पकड़ सकते हैं, अपने स्मार्ट अनुबंध का निर्माण कर सकते हैं, या बस निम्नलिखित (अत्यंत सरल) नमूना अनुबंध का उपयोग कर सकते हैं:

    pragma की दृढ़ता >= 0.5.8; अनुबंध SimpleStorage {uint256 संग्रहित; फ़ंक्शन सेट (uint256 x) सार्वजनिक {संग्रहित = x; } फ़ंक्शन मिलता है () सार्वजनिक दृश्य रिटर्न (uint256) {वापसी संग्रहित; }}

    इस अनुबंध को आपकी परियोजना के “अनुबंध” फ़ोल्डर में “.sol” (सॉलिडिटी) फ़ाइल के रूप में बनाया जाना चाहिए (इस परिदृश्य में, हमने SimpleStorage.sol फ़ाइल बनाई है, जो हमारा SimpleStorage अनुबंध है:

    मचान

    माइग्रेशन सेटअप

    इसके बाद, हमें अपनी माइग्रेशन फ़ाइल सेट करनी होगी!

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

    हमारे अनुबंध को तैनात करने के लिए हमारी माइग्रेशन फ़ाइल इस तरह दिखाई देगी:

    कास्ट"SimpleStorage.sol"); मॉड्यूल.एक्सपोर्ट्स = फ़ंक्शन (परिनियोजक) {परिनियर .eploy (SimpleStorage); };

    इस फ़ाइल को “2_deploy_contracts.js” नाम के तहत “माइग्रेशन” फ़ोल्डर में सहेजें.

    आपका पहला सार्वजनिक अनुबंध नियुक्त करना

    प्रवास का समय

    अब आप वास्तव में जादू के लिए तैयार हैं! कंसोल पर वापस जाएं, और टाइप करें

    ट्रफल प्रवास

    बूम!&# 128163; आपका कोड सार्वजनिक रोपस्टन एथेरियम टेस्ट नेट में तैनात किया गया था!!! 

    अभी क्या हुआ था:

    1. आपका सॉलिडिटी स्मार्ट कॉन्ट्रैक्ट (“कॉन्ट्रैक्ट्स” फ़ोल्डर में) बायटेकोड तक संकलित किया गया था – एथेरम वर्चुअल मशीन का उपयोग करने के लिए मशीन-पठनीय कोड.

    2. यह बाइटकोड, + कुछ अन्य डेटा, एक साथ लेनदेन में बंडल किया गया था.

    3. वह लेन-देन आपके खाते द्वारा हस्ताक्षरित किया गया था.

    4. वह लेन-देन Infura नोड को भेजा गया था जो कि Ropsten से जुड़ा है.

    5. लेन-देन पूरे नेटवर्क में प्रचारित किया गया था, एक रोपस्टेन माइनर द्वारा उठाया गया था, और एक रोपस्टेन ब्लॉक में शामिल था.

    6. आपका स्मार्ट अनुबंध अब Ropsten ब्लॉकचेन पर LIVE है!

    आप इथरस्कैन का उपयोग करके अपना अनुबंध देख सकते हैं: https://ropsten.etherscan.io/ – बस इसे देखने के लिए अनुबंध के पते (अपने टर्मिनल में होना चाहिए) में पेस्ट करें!

    स्क्रीन शॉट 2020 09 01 बजे 5 19 12 बजे

    गजब का! हमने अभी-अभी PUBLIC Ethereum नेटवर्क में अपना पहला स्मार्ट अनुबंध लागू किया है! &# 129327;

    Ethereum mainnet परिनियोजन के लिए यह प्रक्रिया ठीक वैसी ही है, सिवाय इसके कि आप Ethereum mainnet के लिए truffle-config.js फ़ाइल में नेटवर्क स्वैप करेंगे (और, निश्चित रूप से, Ropsten एक के बजाय mainnet Truffle माइग्रेशन चलाएँ) ! हमने आपको इस प्रक्रिया के माध्यम से यहां नहीं चलने दिया, क्योंकि Ethereum mainnet पर तैनात करने से आपको वास्तविक $ का खर्च आएगा – लेकिन अगर आप इसके साथ सहायता चाहते हैं, तो इस पर आशा करें कंसेंसेस डिसॉर्डर और हम मदद करने से ज्यादा खुश नहीं होंगे!

    एक वेब 3 फ्रंटेंड का निर्माण 

    अब जब हमने अपना अनुबंध रोपस्टेन में तैनात किया है, तो इसके साथ बातचीत करने के लिए एक सरल उपयोगकर्ता इंटरफ़ेस बनाएं!

    नोट: dApp “फ्रंट-एंड्स” सिर्फ आपके रोजमर्रा के, नियमित पुराने फ्रंट-एंड्स हैं – जैसे, हम अपने पुराने टूल का उपयोग कर सकते हैं, जिनसे हम परिचित हैं (क्रिएक्ट-रिएक्शन-ऐप आदि)। , और तब सामने वाले को एथेरियम से पढ़ने और लिखने की अनुमति देने के लिए कुछ चीजें जोड़ें! इसका अर्थ है, आपके सभी पुराने वेब देव कौशल सीधे Ethereum-land / Web3 के लिए हस्तांतरणीय हैं!!

    हमारे रिएक्ट प्रोजेक्ट को स्पिन करें 

    ठीक है, चलो शुरू हो जाओ.

    पहले सुनिश्चित करें कि आपके पास एक निर्देशिका है जिसमें वह सभी जानकारी है जो हमने अभी अपने भंडारण अनुबंध के लिए बनाई थी। मैंने अपने फ़ोल्डर को “स्टोरेज-बैक” नाम दिया है और इसमें वह काम शामिल है जिसे हमने अपना अनुबंध सेटअप और तैनात करने के लिए पूरा किया है. 

    स्क्रीन शॉट 2020 09 01 बजे 5 26 33 बजे

    अब हम एक प्रतिक्रिया परियोजना को शुरू करके शुरू करने जा रहे हैं, आइए इस उदाहरण “भंडारण-प्रयोगशाला” में हमारी कॉल करें

    हमारे प्रोजेक्ट को शुरू करने के लिए हमारे टर्मिनल में निम्नलिखित चलाएं 

    npx create-reaction-app स्टोरेज-लैब

    अब जब हमें अपनी नई परियोजना बॉयलरप्लेट मिल गई है, तो परियोजना निर्देशिका में चलें

    सीडी भंडारण-प्रयोगशाला

    अब जब हम अपनी परियोजना के अंदर हैं, हम अब Web3 पैकेज जोड़ेंगे, जो हमारे प्रोजेक्ट को Ethereum के साथ बातचीत करने की अनुमति देगा! वेब 3 पर अधिक यहां

    npm वेब 3 स्थापित करें

    Web3 दो प्रमुख पैकेजों में से एक है जिसका हम उपयोग कर सकते हैं, दूसरा है ethers.js। इस उदाहरण के लिए हम web3 का उपयोग करेंगे, लेकिन यदि आप ethers के बारे में अधिक पढ़ना चाहते हैं यहां 

    दो के विस्तृत विवरण के लिए, इस पर एक नज़र डालें web3 बनाम ईथर्स

    वाह् भई वाह! अब हम अपने कॉन्ट्रैक्ट के साथ हमारे रिएक्ट प्रोजेक्ट को इंटरैक्ट करने के लिए लगभग तैयार हैं!

    पहले, हमारी निर्देशिका को पहले से ले लें (मेरे लिए यह “स्टोरेज-बैक”) जिसमें अभी वह कार्य है जिसमें हमने पहले से ही अपने स्मार्ट अनुबंधों को शामिल किया है और अब इसे हमारी नई प्रतिक्रिया परियोजना में शामिल करते हैं। यह हमारे src के समान स्तर पर रहेगा, और अब हमें अपनी प्रतिक्रिया REPO के अंदर वह सब कुछ होना चाहिए जो हमें एक साथ चाहिए.

    स्क्रीन शॉट 2020 09 01 बजे 5 31 38 बजे

    इसके बाद, हमें अपनी फाइल को हमारे ABI जानकारी के साथ सेट करना होगा.

    “अबी?”

    खुशी है कि आपने पूछा! 

    कॉन्ट्रैक्ट एप्लिकेशन बाइनरी इंटरफेस (ABI) ब्लॉकचेन के बाहर और कॉन्ट्रैक्ट-टू-कॉन्ट्रैक्ट इंटरैक्शन के लिए, एथेरियम इकोसिस्टम के भीतर अनुबंधों के साथ बातचीत करने का मानक तरीका है। जब हमने अपने SimpleStorage अनुबंध को पहले चरण में संकलित किया, तो इसने हमारे लिए एक JSON फ़ाइल बनाई। अपने लिए जांचें, हमारे पास हमारे बिल्ड / कॉन्ट्रैक्ट्स के अंदर एक SimpleStorage.json फ़ाइल है

    स्क्रीन शॉट 2020 09 01 बजे 6 04 20 बजे

    इस फ़ाइल पर प्रारंभिक नज़र रखने से बहुत सी जानकारी सामने आएगी, अभी हमें केवल अपने अनुबंध को आगे बढ़ाने के लिए एबीआई पर ध्यान केंद्रित करने की आवश्यकता है जो हम विकसित कर रहे हैं। इस JSON में वह जानकारी है जो हमें अपने अनुबंध को हमारे सामने के छोर से संप्रेषित करने की आवश्यकता है.

    हमारा ABI एक सरणी है जो वस्तुओं को धारण करता है। फ़ाइल को करीब से देखने पर आप देख सकते हैं कि वास्तव में प्रत्येक वस्तु हमारे फंक्शन सिंपलस्टोरेज अनुबंध में शामिल है.

    स्क्रीन शॉट 2020 09 01 बजे 5 33 23 बजे

    आप जल्दी से देख सकते हैं

    “नाम”: “सेट”

    “नाम”: “प्राप्त करें”

    दोनों एक “प्रकार:” फ़ंक्शन के साथ दोनों फ़ंक्शन हमने अपने स्मार्ट अनुबंध को लिखते समय घोषित किए!

    हालाँकि ट्रफ़ल अगले कुछ कदमों को दूर कर देता है, लेकिन हम कुछ और “मैनुअल” तरीके से काम करने जा रहे हैं ताकि आप सभी मूल बातें उजागर कर सकें &# 128578;

    सबसे पहले, आगे बढ़ो और अपनी अबी जानकारी को कॉपी करें – हमें बस एक पल में इसकी आवश्यकता होगी. 

    चलो हमारे src के अंदर एक फ़ोल्डर बनाते हैं जिसका नाम “अबी” है.

    हमारे नए सिरे से बनाए गए अबी फोल्डर के अंदर अब एक फ़ाइल बनाते हैं, जिसका नाम अबी.जेएस है

    नोट: हमें तकनीकी रूप से अलग होने की जरूरत नहीं है और हमारे abi.js को हमारे src में जोड़ सकते हैं, लेकिन हमारे abi.js फ़ाइलों को रखना संगठन के साथ मदद करता है.

    अब हम अपने abi एरे को कॉपी कर लेंगे जिसे हमने SimpleStorage.JSON फ़ाइल से पहले पकड़ा था और इसे अपनी नई बनी abi.js फ़ाइल में जोड़ें। हम अपने प्रोजेक्ट को अपने App.js. में जानकारी आयात करने की अनुमति देने के लिए फ़ाइल को थोड़ा बदल देंगे। चूंकि यह a.js फ़ाइल है, इसलिए हमें भूल जाना चाहिए, हमें एक निर्यात जोड़ना होगा ताकि हम इसे बाद में अपने app.js में खींच सकें। कैमलकेस को छोड़कर कॉन्ट्रैक्ट का नाम कॉन्ट्रैक्ट की तरह ही रखें (नीचे कोड देखें):

    यह वह कोड होगा जिसे हम अपनी abi.js फ़ाइल में संग्रहीत करते हैं

    निर्यात कास्ट सरल "एक्स", प्रकार: "uint256", },], नाम: "सेट", आउटपुट: [], देय: असत्य, स्थिति "न देने योग्य", प्रकार: "समारोह", }, {निरंतर: सत्य, इनपुट: [], नाम: "प्राप्त", आउटपुट: [{नाम: "", प्रकार: "uint256", },], देय: गलत, राज्यसुविधा: "राय", प्रकार: "समारोह", },];

    हमारे App.js के लिए समय और दोनों web3 और हमारे हौसले से बने abi.js फ़ाइल आयात करें.

    हम इस उदाहरण में हुक का उपयोग करने जा रहे हैं (यही कारण है कि हम {यूज़स्ट्रेट} भी आयात कर रहे हैं) आप उपयोग के बारे में अधिक पढ़ सकते हैं यहां.

    हमारी App.js फ़ाइल का शीर्ष अब इस तरह दिखना चाहिए:

    आयात प्रतिक्रिया, {का उपयोग करें} से "प्रतिक्रिया"; आयात {simpleStorage} से "./ अबी / अबी"; से Web3 आयात करें "web3"; आयात "./App.css";

    अब हमें यह सुनिश्चित करने की आवश्यकता है कि हमारे पास किसी भी मनमाने उपयोगकर्ताओं के लिए हमारे डीएपी को जोड़ने और उपयोग करने की क्षमता है, जब तक कि उनके पास एक वॉलेट प्रदाता है!

    डीएपी इंटरैक्शन के लिए एथेरम स्पेस में उपयोग किया जाने वाला मुख्य वॉलेट मेटामास्क है, जिसे चरण 1 में पेश किया गया है.

    यदि आपके पास मेटामास्क नहीं है, तो जाएँ metamask.io

    MetaMask स्थापित होने के साथ, हम अपने वॉलेट के अंदर अपने वॉलेट तक पहुँच सकते हैं:

    const web3 = नया Web3 (Web3.givenProvider);

    “Web3.givenProvider” एक Ethereum समर्थित ब्राउज़र में सेट किया जाएगा.

    (आप इस बारे में अधिक पढ़ सकते हैं कि यह क्यों आवश्यक है यहां)

    तो अब हमारे कोड को इस तरह दिखना चाहिए:

    आयात प्रतिक्रिया, {का उपयोग करें} से "प्रतिक्रिया"; आयात {simpleStorage} से "./ अबी / अबी"; से Web3 आयात करें "web3"; आयात "./App.css"; const web3 = नया Web3 (Web3.givenProvider);

    ठीक है! अब तक हम:

    • एक प्रतिक्रिया परियोजना को छोड़ दिया
    • स्थापित वेब 3
    • हमारे रिएक्टर प्रोजेक्ट में हमारे बिल्ड + कॉन्ट्रैक्ट + माइग्रेशन वाले हमारे फ़ोल्डर को जोड़ा गया
    • एक abi.js फ़ाइल बनाई जिसे abi डेटा हमने SimpleStorage.json से खींचा है
    • हमारे अनुबंध के साथ सहभागिता करने के लिए आवश्यक डेटा आयात किया
    • एक वैरिएबल बनाया गया है जो हमारे dApp को उपयोगकर्ता के बटुए के साथ संवाद करने की अनुमति देता है

    फिर से, हालांकि ट्रफल अगले कुछ कदमों को अनावश्यक बनाता है (हम आपको बाद में बहुत सरल संस्करण के माध्यम से चलते हैं), हम शैक्षिक उद्देश्यों के लिए हमारे डीएपी में थोड़ी अधिक मैन्युअल जटिलता जोड़ देंगे.

    अब हम क्या करेंगे दो नए चर बनाएंगे: एक, जो हमने Ropsten पर तैनात अनुबंध के पते को संग्रहीत करने के लिए, और दूसरा उस अनुबंध को हमारे ABI से मिलान करने के लिए, ताकि हमारा ऐप जानता है कि उससे कैसे बात की जाए! 

    अनुबंध के पते का पता लगाने के लिए, उस JSON फ़ाइल पर नेविगेट करें जो हम पहले थे (जिसमें ABI (SimpleStorage.json)), और नीचे स्क्रॉल करें। यहां पता “पता” फ़ील्ड में है:

    "संकलक": { "नाम": "एकांत", "संस्करण": "०.५. 0.5 + कमिट ।२ डी ३३५ एफ २.इस्मस्क्रिप्टेन.क्लैंग" }, "नेटवर्क": { "३": { "आयोजन": {}, "लिंक": {}, "पता": "0x24164F46A62a73de326E55fe46D1239d136851d8", "लेनदेन": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "योजना": "3.0.16 है", "अपडेट किया गया": "2020-06-30T20: 45: 38.686Z", "देवदोक": { "तरीकों": {}}, "उपयोगकर्ता": { "तरीकों": {}}}

    वैकल्पिक रूप से, आप कर सकते हैं https://ropsten.etherscan.io/ और अनुबंध को तैनात करने वाले खाते का पता देखें! इथरस्कैन में, “कॉन्ट्रैक्ट क्रिएशन” पर क्लिक करने से कॉन्ट्रैक्ट एड्रेस खुद ही सामने आ जाएगा.

    स्क्रीन शॉट 2020 09 01 बजे 5 43 46 बजे

    अब हम आपके अनुबंध के पते की प्रति ले लेंगे और इसे संग्रहीत करने के लिए एक नया चर बनाएंगे. 

    इसके बिना, हमारे पास अनुबंध के साथ संवाद करने की क्षमता नहीं है और हमारा dApp काम नहीं कर सकता है.

    आप इसे हमारे const web3 = new Web3 (Web3.givenProvider) के तहत जोड़ देंगे;

    const contractAddress = "यहां आपका अनुबंध पता";

    फिर हम “StorageContract” नाम से एक और नया वैरिएबल बनाएंगे जिसमें हमारा कॉन्ट्रैक्ट एड्रेस होगा (इसलिए हमारा ऐप जानता है कि कॉन्ट्रैक्ट कहां है), और ABI (इसलिए हमारा ऐप कॉन्ट्रैक्ट के साथ बातचीत करना जानता है).

    const storageContract = new web3.eth.Contract (simpleStorage, contractAddress);

    हमारे App.js को अब इस तरह दिखना चाहिए

    आयात प्रतिक्रिया, {का उपयोग करें} से "प्रतिक्रिया"; आयात {simpleStorage} से "./ अबी / अबी"; से Web3 आयात करें "web3"; आयात "./App.css"; const web3 = नया Web3 (Web3.givenProvider); const contractAddress = "यहां आपका अनुबंध पता"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress);

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

    आयात प्रतिक्रिया, {का उपयोग करें} से "प्रतिक्रिया"; आयात {simpleStorage} से "./ अबी / अबी"; से Web3 आयात करें "web3"; आयात "./App.css"; const web3 = नया Web3 (Web3.givenProvider); const contractAddress = "आपका अनुबंध पता"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const [संख्या, setUint] = useState (0); const [getNumber, setGet] = useState ("०");

    उपयोग का हमारा पहला उपयोग (0) उपयोगकर्ता द्वारा घोषित किए गए uint256 को रखेगा.

    (संख्या, समुच्चय, getNumber, setGet के नामकरण परंपराओं को उम्मीद है कि जो हो रहा है उसे दिखाने में मदद करें)

    उपयोग करें (“0”) मान एक प्लेसहोल्डर के रूप में कार्य करता है जब तक कि हमारे हस्ताक्षरित कार्रवाई (हमारे घोषित uint256) पर पुष्टि नहीं होती है

    setUint हम जल्द ही हमारी वापसी पर कॉल करेंगे (इस पर बाद में)

    हमारे तर्क के लिए समय

    आगे हम अपना नंबरसेट और नंबरगेट लॉजिक जोड़ेंगे (हम अपने फंक्शन ऐप के अंदर नंबरसेट जोड़ें)

    const नंबरसेट = async (t) => {t.preventDefault (); const खातों = window.ethereum.enable () की प्रतीक्षा करें; const खाता = खातों [को ०]; const गैस = भंडारण का इंतजार करो। const पद = भंडारण का इंतजार करो। }; const संख्या = async (t) => {t.preventDefault (); const पद = भंडारण का इंतजार करो। सेटगेट (पोस्ट); };

    हमने एक StopDefault (StopDefault पर विवरण पाया) यहां)

    हम अनुबंध के लिए पाने के लिए एक async कॉल का भी उपयोग करते हैं (async पाया गया विवरण) यहां)

    हमारा हुक सेटगेट () एक डिफ़ॉल्ट मान रखता है जिसे हम शुरू में देखते हैं (“0”)

    const खातों = window.ethereum.enable () की प्रतीक्षा करें;

    यह सुनिश्चित करता है कि हम मेटा कनेक्ट के माध्यम से अपने जुड़े पते को कॉल कर रहे हैं.

    const खाता = खातों [को ०];

    कनेक्ट खाते में खींचता है

    आप सोच रहे होंगे कि व्हाट्सएप चल रहा है 

    const गैस = भंडारण का इंतजार करो।

    हमारे ऐप को गैस शुल्क के भुगतान के लिए उपयोगकर्ता फंड तक पहुंचने की अनुमति की आवश्यकता है, चाहे वह किसी भी तरह से हो, चाहे वह टेस्टनेट या मेननेट पर हो। यह वह जगह है जहां मेटामास्क से हमारा कनेक्शन इस उपयोग के लिए साइन अप करने के लिए आता है ताकि हमारे uint256 को सेट किया जा सके और इसके लिए भुगतान किया जा सके (परीक्षण ETH के साथ).

    इसलिए किसी भी फ़ंक्शन के लिए जिसे गैस की आवश्यकता होती है, आपको उपयोग की जाने वाली संभावित गैस की गणना करना होगा.

    हमारे अनुबंध के “सेट” फ़ंक्शन के लिए गैस की आवश्यकता होती है

    “मुझे नहीं मिलता.

    (ऐसा इसलिए है क्योंकि “गेट” देख रहा है कि “सेट” के साथ पहले ही घोषित किया गया है)

    कॉन्स्ट पोस्ट uint256 में पारित होने जा रहा है, रोपस्टेन नेटवर्क पर अपने मेटामास्क वॉलेट से लेनदेन (गैस शुल्क का भुगतान करने वाली पोस्ट) की पुष्टि करें.

    अगला हम फ़ंक्शंस मापदंडों को मेथड्स.सेट () के माध्यम से पास करते हैं और अपने घोषित पते (उपयोगकर्ता पते) के साथ हम फिर सेट फ़ंक्शन को संभालते हैं.

    हम अपने फंक्शन पैरामीटर को स्मार्ट कॉन्ट्रैक्ट मेथड्स.सेट (), और अनुमानित गैस और यूजर अकाउंट एड्रेस to.send () में पास करके अपना स्मार्ट कॉन्ट्रैक्ट ट्रांजेक्शन बनाते हैं।.

    const पद = भंडारण का इंतजार करो।

    यह तर्क होना चाहिए कि हमें अपने नंबरसेट को कवर करने की आवश्यकता है.

    अब हमें अपना नंबरगेट चाहिए

    const संख्या = async (t) => {t.preventDefault (); const पद = भंडारण का इंतजार करो। सेटगेट (पोस्ट); };

    हमारी कांस्ट पोस्ट हमारे निर्धारित संख्या और सेटगेट को पुनः प्राप्त करती है जो हमने नए मूल्य में घोषित किया है

    तो हमारा “0” हमारे नंबरगेट को संदर्भित करेगा और हमारे unint256 को प्रस्तुत करेगा!

     तो अब आपका app.js इस तरह दिखना चाहिए

    आयात प्रतिक्रिया, {का उपयोग करें} से "प्रतिक्रिया"; आयात {simpleStorage} से "./ अबी / अबी"; से Web3 आयात करें "web3"; आयात "./App.css"; const web3 = नया Web3 (Web3.givenProvider); const contractAddress = "आपका अनुबंध पता"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const [संख्या, setUint] = useState (0); const [getNumber, setGet] = useState ("०"); const नंबरसेट = async (t) => {t.preventDefault (); const खातों = window.ethereum.enable () की प्रतीक्षा करें; const खाता = खातों [को ०]; const गैस = भंडारण का इंतजार करो। const पद = भंडारण का इंतजार करो। }; const संख्या = async (t) => {t.preventDefault (); const पद = भंडारण का इंतजार करो। सेटगेट (पोस्ट); };

    यदि हम कर सकते हैं तो हम परीक्षण कर सकते हैं ताकि हम रेंडर करने के लिए एक बहुत ही मूल रिटर्न बनाएँ 

    • एक unint256 मान सेट करें,
    • हमारे मेटामैस्क बटुए को खींचो और लेनदेन की पुष्टि करें
    • गैस की कीमत चुकाएं
    • उसके बाद मूल्य (unint256) प्राप्त करें जिसे हमने लेनदेन पूरा होने के बाद संग्रहीत किया है.

    हमारी वापसी इस तरह दिखती है: 

    वापसी (अपना uint256 सेट करें: setUint (t.target.value)} /)> पुष्टि करें

    अपना uint256 {getNumber} प्राप्त करें; } निर्यात डिफ़ॉल्ट ऐप;

    कुछ त्वरित सीएसएस

    आइए अब App.css फ़ाइल पर जाएं, बॉयलर प्लेट कोड हटाएं और इसके बजाय इसे जोड़ें

    .मुख्य {पाठ-संरेखण: केंद्र; प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; पृष्ठभूमि-रंग: # f2f1f5; ऊंचाई: 100vh; } .कार्ड {न्यूनतम-ऊंचाई: 50 वीएच; चौड़ाई: 50vw; प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: स्तंभ; संरेखित-आइटम: केंद्र; औचित्य-सामग्री: केंद्र; } .फॉर्म {ऊंचाई: 20vh; चौड़ाई: 20vw; प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: अंतरिक्ष-समान रूप से; फ्लेक्स-दिशा: स्तंभ; } .बटन {चौड़ाई: 20vw; ऊंचाई: 5vh; }

    अब हम परीक्षण के लिए तैयार हैं!

    अपने टर्मिनल रन में

    यार्न की शुरुआत

    हमारी लोकलहोस्ट: 3000 में हमें इस तरह दिखना चाहिए

     

    स्क्रीन शॉट 2020 09 01 बजे 6 12 49 बजे

    अब हमें अपने इनपुट क्षेत्र में एक unint256 मान दर्ज करने में सक्षम होना चाहिए!

    हमारे डीएपी में हम अपने नंबर की पुष्टि करने के बाद, फिर हम मेटामास्क के माध्यम से हस्ताक्षर करते हैं (सुनिश्चित करें कि आपका वॉलेट रोपस्टेन नेटवर्क पर सेट है)

    confrim1

    हमने कर दिया! &# 129303;

    अब हमारे पास अपना स्मार्ट कॉन्ट्रैक्ट एक फ्रंट एंड से जुड़ा हुआ है और सेट फ़ंक्शन को मैनिपुलेट करने की क्षमता है (बशर्ते हमारे पास लेनदेन के लिए गैस शुल्क का भुगतान करने के लिए परीक्षण ईटीएच है)। तब हम गेट फ़ंक्शन पर कॉल कर सकते हैं और संग्रहीत uint265 मान को पुनः प्राप्त कर सकते हैं.

    बहुत अच्छा हुह!?!

    अतिरिक्त स्टाइलिंग 

    अब यह दिखाने का समय है कि हमारी परियोजना में और भी लोकप्रिय वेब 2 तकनीक को लागू करना कितना आसान हो सकता है.

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

    * यह एक बहुत ही छोटा उदाहरण होगा कि MUI को किसी प्रोजेक्ट में कैसे जोड़ा जाए, इसके लिए छोटे परिवर्धन के साथ प्रदर्शित किया जा सकता है कि आप हमारी परियोजना को कितनी जल्दी शामिल कर सकते हैं क्योंकि यह एक वेब 2 तकनीक के साथ खड़ा है।. 

    MUI को जोड़ना

    हम कमांड को चलाने से शुरू करेंगे (टर्मिनल में हमारी परियोजना निर्देशिका में रहते हुए भी (यदि आप अभी भी ऐप चला रहे हैं, तो आपको इसे बंद करने की आवश्यकता होगी (ctrl + c), या एक नया टैब खोलना होगा))

    Npm के साथ स्थापित करने के लिए:

    npm @ सामग्री-उई / कोर स्थापित करें

    या यार्न के साथ:

    यार्न @ सामग्री-उई / कोर जोड़ें

    अब जब हमने MUI इंजेक्ट किया है तो हम अपनी स्टाइल बदलने के साथ शुरुआत करेंगे। हमारे app.js फ़ाइल के शीर्ष पर हम कुछ नई चीजें आयात करने जा रहे हैं:

    आयात {simpleStorage} से "./ अबी / अबी"; से आयात करें बटन "@ सामग्री- ui / कोर / बटन"; से TextField आयात करें "@ सामग्री- ui / कोर / TextField"; आयात {makeStyles} से "@ सामग्री- ui / कोर / शैलियों";

    {MakeStyles} का आयात हमें स्टाइल (इस मामले में) डिफ़ॉल्ट MUI स्टाइल को आयात करने के साथ हमारे बटन और पाठ क्षेत्र में हेरफेर करने की अनुमति देता है. 

    अब हम एक वेरिएबल (हमारे फंक्शन के ऊपर) बनाएंगे जो एमयूआई से बॉयलरप्लेट स्टाइल में लाता है

    const का उपयोग करता है> ({जड़: { "& > *": {मार्जिन: theme.spacing (1),},},}));

    अब हमारे ऐप फंक्शन के भीतर हम “क्लासेस” नाम का एक वैरिएबल भी जोड़ेंगे, जिसे हम ऊपर घोषित किए गए परिभाषित शैलियों में खींच रहे हैं.

    function App () {const classes = useStyles (); const [संख्या, समुच्चय] = useState (0); const [getNumber, setGet] = useState ("०");

    अब हम अपने कुछ क्षेत्रों को बदलने के लिए अपनी वापसी के भीतर समायोजन करेंगे, जिसे हम अभी आयात कर रहे हैं.

    वापसी (सेट यूंट (t.target.value)) वेरिएंट ="उल्लिखित" /> पुष्टि करें

    अपना uint256 {getNumber} प्राप्त करें; } निर्यात डिफ़ॉल्ट ऐप;

    आपका कोड अब इस तरह दिखना चाहिए

    आयात प्रतिक्रिया, {का उपयोग करें} से "प्रतिक्रिया"; आयात {simpleStorage} से "./ अबी / अबी"; से Web3 आयात करें "web3"; आयात "./App.css"; आयात {makeStyles} से "@ सामग्री- ui / कोर / शैलियों"; से आयात करें बटन "@ सामग्री- ui / कोर / बटन"; से TextField आयात करें "@ सामग्री- ui / कोर / TextField"; const का उपयोग करता है> ({जड़: { "& > *": {मार्जिन: theme.spacing (1),},},})); const web3 = नया Web3 (Web3.givenProvider); const contractAddress = "यहां आपका अनुबंध पता"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const classes = useStyles (); const [संख्या, समुच्चय] = useState (0); const [getNumber, setGet] = useState ("०"); const नंबरसेट = async (t) => {t.preventDefault (); const खातों = window.ethereum.enable () की प्रतीक्षा करें; const खाता = खातों [को ०]; const गैस = भंडारण का इंतजार करो। const पद = भंडारण का इंतजार करो। }; const संख्या = async (t) => {t.preventDefault (); const पद = भंडारण का इंतजार करो। सेटगेट (पोस्ट); }; वापसी (सेट यूंट (t.target.value)) वेरिएंट ="उल्लिखित" /> पुष्टि करें

    अपना uint256 {getNumber} प्राप्त करें; } निर्यात डिफ़ॉल्ट ऐप;

    अब अगर हम अपनी प्रतिक्रिया परियोजना पर एक नज़र डालते हैं तो इसे इस तरह देखना चाहिए!

    स्क्रीन शॉट 2020 09 01 बजे 6 48 55 बजे

    बहुत बढ़िया!

    हमारे पास अभी भी पहले की सभी कार्यक्षमता है और अब अपनी परियोजना को और अधिक अनुकूलित करने के लिए फ्रेमवर्क का उपयोग करने के लिए आसान इंजेक्शन लगाया गया है। MUI पर एक नजर है प्रलेखन अपने स्वयं के परिवर्धन / संशोधनों के साथ प्रयोग करने के लिए!

    बोनस दौर 

    हमारे डीएपी के भीतर उपयोगकर्ताओं को कनेक्ट पता दिखाना अच्छा होगा, यह नहीं होगा?

    ठीक है कि ऐसा करने के लिए एक बहुत जल्दी और बुनियादी घटक है!

    हम एक अलग घटक बनाकर शुरू करेंगे जिसे हम अपनी App.js फ़ाइल में वापस आयात कर सकते हैं। यह हमारे तर्क को अलग करने के लिए एक अच्छा विचार है कि न केवल हमारे App.js को नेविगेट करना आसान है, बल्कि एक घटक का अभ्यास भी आदर्श रूप से केवल एक ही कार्य करना है। यदि यह बढ़ता हुआ समाप्त हो जाता है, तो इसे छोटे उपकेंद्रों में विघटित किया जाना चाहिए.

    घटक का निर्माण 

    हम अपने src के समान घटक पर एक नया फ़ोल्डर बनाएंगे और उस फ़ोल्डर के भीतर हम एक Nav.js फ़ाइल बनाएंगे। हमारी परियोजना मचान अब कुछ इस तरह दिखना चाहिए

    स्क्रीन शॉट 2020 09 01 बजे 6 47 07 बजे

    हम अपने कंपोनेंट फोल्डर के भीतर एक Nav.css फाइल भी बनाएंगे, ताकि हम किसी भी स्टाइल को इंपोर्ट कर सकें, जो कि हम खास तौर पर नेव कंपोनेंट पर लागू करते हैं.

    आइए हमारे Nav.js को खोलें और अपने React, Web3 और हमारी खाली फ़ाइल को आयात करें

    से आयात प्रतिक्रिया "प्रतिक्रिया"; से Web3 आयात करें "web3"; आयात "./Nav.css"

    अब हम Nav नामक एक क्लास बनाएंगे और अपने जुड़े पते को प्रदर्शित करने के लिए हम इसमें कुछ चीजें जोड़ेंगे। हम खाते को पढ़ने के लिए अपना राज्य सेट करके शुरू करेंगे

    कक्षा नव का विस्तार React.Component {राज्य = {खाता: "" };

    अभी भी हमारी कक्षा के भीतर हम अपने async loadAccount तर्क को जोड़कर पढ़ने के लिए खाते को लोड करेंगे

    async loadAccount () {const web3 = new Web3 (Web3.givenProvider) || "http: // लोकलहोस्ट: 8080"); const network = wait web3.eth.net.getNetworkType (); const खातों = web3.eth.getAccounts () की प्रतीक्षा करें; this.setState ({खाता: खातों [0]}); }

    हम आगे एक कंपोनेंटडीडमाउंट बनाएंगे (जो कंपोनेंट माउंट के तुरंत बाद इनवॉइस किया जाएगा) हमारे मामले में लोड किए गए खाते में खींच रहा है। अधिक पढ़ें यहां

    घटकडिमाउंट () {this.loadAccount (); }

    पक्षीय लेख:

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

    फिर हम अपनी वापसी के ऊपर एक रेंडर बनाएंगे, रेंडर एक ऐसी विधि है जिसकी आवश्यकता तब होती है जब आप एक क्लास विधि का उपयोग करके रिएक्ट घटक लिख रहे होते हैं। अपनी वापसी के भीतर हम अपने पते के लिए एक वर्ग जोड़ते हैं (बाद में बुनियादी स्टाइल देने के लिए) एक पी टैग के साथ जुड़ा हुआ पता दिखाने के लिए जिसे हम {this.state.account} का उपयोग करके प्राप्त करते हैं

    रेंडर () {रिटर्न (आपका जुड़ा हुआ पता: {this.state.account}); }} निर्यात डिफ़ॉल्ट नव;

    हमारी Nav.js फ़ाइल को अब इस तरह दिखना चाहिए

    से आयात प्रतिक्रिया "प्रतिक्रिया"; से Web3 आयात करें "web3"; आयात "./Nav.css" कक्षा नव का विस्तार React.Component {राज्य = {खाता: "" }; async loadAccount () {const web3 = new Web3 (Web3.givenProvider) || "http: // लोकलहोस्ट: 8080"); const network = wait web3.eth.net.getNetworkType (); const खातों = web3.eth.getAccounts () की प्रतीक्षा करें; this.setState ({खाता: खातों [0]}); } ComponentsDidMount () {this.loadAccount (); } रेंडर () {रिटर्न (आपका जुड़ा हुआ पता: {this.state.account}); }} निर्यात डिफ़ॉल्ट नव;

     

    Nav.css फ़ाइल पर जाने दें और बहुत मूल स्टाइल जोड़ें

    .पता {प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; }

    आप तकनीकी रूप से इसे App.css फ़ाइल में जोड़ सकते हैं, ध्यान रखें कि बहुत जल्दी गड़बड़ हो सकती है। घटकों को पुन: प्रयोज्य होना चाहिए और अपने काम को डिब्बे में बंद करके जितना संभव हो उतना घर्षण से बचने के लिए यह आपको सड़क पर सिरदर्द से बचा सकता है.

    अब हमारे App.js पर वापस जाएं और अपने नए बनाए गए घटक को आयात करें और सुनिश्चित करें कि हम इसे अपनी वापसी में इसे प्रदर्शित करने के लिए जोड़ते हैं!

    हमारी तैयार App.js फ़ाइल को इस तरह दिखना चाहिए

    आयात प्रतिक्रिया, {का उपयोग करें} से "प्रतिक्रिया"; आयात {simpleStorage} से "./ अबी / अबी"; से Web3 आयात करें "web3"; से आयात नव "./ संगोष्ठी / nav.js"; आयात "./App.css"; आयात {makeStyles} से "@ सामग्री- ui / कोर / शैलियों"; से आयात करें बटन "@ सामग्री- ui / कोर / बटन"; से TextField आयात करें "@ सामग्री- ui / कोर / TextField"; const का उपयोग करता है> ({जड़: { "& > *": {मार्जिन: theme.spacing (1),},},})); const web3 = नया Web3 (Web3.givenProvider); const contractAddress = "आपका पता यहाँ"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const classes = useStyles (); const [संख्या, समुच्चय] = useState (0); const [getNumber, setGet] = useState ("०"); const नंबरसेट = async (t) => {t.preventDefault (); const खातों = window.ethereum.enable () की प्रतीक्षा करें; const खाता = खातों [को ०]; const गैस = भंडारण का इंतजार करो। const पद = भंडारण का इंतजार करो। }; const संख्या = async (t) => {t.preventDefault (); const पद = भंडारण का इंतजार करो। सेटगेट (पोस्ट); }; वापसी ( setUint (t.target.value)} वेरिएंट ="उल्लिखित" /> पुष्टि करें

    अपना uint256 {getNumber} प्राप्त करें; } निर्यात डिफ़ॉल्ट ऐप;

    हमें अब अपने कनेक्टेड पते को ऊपर देखना चाहिए और फिर भी अपनी कार्यक्षमता को बनाए रखना चाहिए!

    बोनस वी १

    &# 127881; हमने कर दिया! &# 127881;

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

    बहुत बढ़िया! यह आपके Web3 विकास कारनामों के लिए बस शुरुआत है और आपके पास पहले से ही कुछ ऐसा है जो आप न केवल बना सकते हैं बल्कि अपने सिर को भी लपेट सकते हैं। हमारे पास पहुंचें और अपने प्रोजेक्ट को साझा करें (विशेषकर यदि आपने हमारे साथ कोई संशोधन या परिवर्धन किया है)!

      डेवलपर ऑनबोर्डिंग: चरण 1डेवलपर ऑनबोर्डिंग चरण 1

      डेवलपर ऑनबोर्डिंग: चरण 1

      डेवलपर ऑनबोर्डिंग: चरण 2डेवलपर ऑनबोर्डिंग चरण 2

      डेवलपर ऑनबोर्डिंग: चरण 2

      10-मिनट एथेरियम ओरिएंटेशन10 मिनट एथेरियम ओरिएंटेशन

      10-मिनट एथेरियम ओरिएंटेशन
    Mike Owergreen Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map