Ethereum DApps: ब्लॉकचेन को कैसे लोड करें

ट्रफल, रिएक्ट, रेडक्स, वेब 3, और मेटामास्क का उपयोग करके अच्छे उपयोगकर्ता अनुभवों के लिए अभ्यास

पिक्साबे पर टुमिसु द्वारा छवि

परिचय

आवश्यकताएँ: प्रतिक्रिया, Redux और बुनियादी ब्लॉकचैन / डीएपी अवधारणाओं को समझना।

Truffle डेवलपर्स को ब्लॉकचैन बैक एंड के साथ एक पूर्ण-स्टैक एप्लिकेशन बनाने में सक्षम बनाता है। इस उदाहरण में, मैं एक ब्लॉकचैन बैक एंड के साथ एक रिएक्ट और रिडक्स फ्रंट एंड को लागू करने के लिए ट्रफल का उपयोग कर रहा हूं।

समग्र वेब उपयोगकर्ताओं की तुलना में अंतरिक्ष के शैशव और छोटे उपयोगकर्ता आधार के कारण ब्राउज़र में वेब 3 के साथ बातचीत करने के लिए व्यापक रूप से स्वीकृत मानक नहीं हैं। यह सुनिश्चित करने का आसान तरीका है कि आपके Ethereum DApp का उपयोग करते समय उपयोगकर्ताओं के पास एक अच्छा अनुभव हो।

ब्लॉकचेन लोड हो रहा है

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

प्रस्ताव: ब्लॉकचेन ➼ खाता: बातचीत

एक बार में सब कुछ लोड करने के बजाय, मैं आपके DApp को लोड करने के लिए निम्नलिखित पैटर्न का प्रस्ताव देता हूं: ब्लॉकचेन ➼ खाता। इंटरैक्शन। उपयोगकर्ता के लिए स्पष्ट दृश्य प्रतिक्रिया के साथ प्रत्येक चरण दूसरे का अलग है।

  • चरण 1: ब्लॉकचेन लोड करें
  • चरण 2: खाता लोड करें
  • चरण 3: सहभागिता सक्षम करें

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

यहां हुईं कई बातें:

  • जब पृष्ठ लोड होता है, तो Web3 लोड नहीं होता है
  • ब्लॉकचैन - उपयोगकर्ता मेटाबेस में अपने चुने हुए ब्लॉकचेन से वेबपेज को जोड़ने के लिए "कनेक्ट ब्लॉकचैन" पर क्लिक करता है
  • खाता - एक बार लोड होने के बाद, एप्लिकेशन उनके बटुए को जोड़ने के लिए एक दूसरा बटन प्रदान करता है
  • इंटरैक्शन - उपयोगकर्ता अब डीएपी के साथ बातचीत करने में सक्षम है

ब्लॉकचेन को जोड़ना

चित्रा 1:

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

चित्र 1 में, ConnectBlockchain onSubmit क्रिया वेब 3 आवृत्ति को एक इंटरैक्शन के साथ पकड़ लेती है, जिसे चित्र 2 में प्रदर्शित किया गया है। यह web3Loaded (web3) reducer को भेजता है, जो Web3 आवृत्ति को राज्य में सहेजता है।

चित्र 2: राज्य में वेब 3 लोड कर रहा है

खाता जोड़ना

चित्र 3: बटुए को जोड़ना

चित्र 3 एक समान प्रतिपादन दिखाता है, जहाँ हम "कनेक्ट वॉलेट" बटन के समान नियम लागू करते हैं, इस पर निर्भर करता है कि क्या कोई खाता पहले से लोड किया गया है। इस समय, हालाँकि, यदि Web3 लोड किया गया है, तो हम एक अतिरिक्त शर्त लागू करते हैं कि क्या कोई खाता लोड है या नहीं:

(खाता? == अशक्त) "बीटीएन-सफलता": "बीटीएन-चेतावनी"

ConnectWallet onSubmit एक्शन एक ऐसा फंक्शन है, जो लोडब्लैकचैनडाटा () नामक एक इंटरैक्शन को कॉल करता है, जैसा कि चित्र 4 में देखा गया है।

चित्रा 4: ब्लॉकचेन डेटा लोड हो रहा है

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

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

निष्कर्ष

डीएपी के साथ मेटामास्क का उपयोग करना एक घिनौना अनुभव हो सकता है जो उपयोगकर्ताओं को आपके डीएपी के साथ बातचीत करने से रोक सकता है। अपने DAPs के निर्माण के लिए ब्लॉकचैन-अकाउंट-इंटरेक्शन जैसे सरल प्रवाह का उपयोग करें।

पढ़ने के लिए धन्यवाद!