AlphaWeft
वर्कफ़्लो

एक खाली फोल्डर से एक टेस्ट की गई स्क्रीन तक dApp बनाएं

03
प्रोजेक्ट सेटअप करें

एक खाली प्रोजेक्ट फोल्डर से शुरू करें

dApp बनाने के लिए, एक ऐसे फोल्डर से शुरू करें जिसमें केवल आपकी कंट्रैक्ट की ABI फ़ाइल हो। उस फोल्डर को एक नई चैट के वर्किंग फोल्डर के रूप में खोलें, 'Ask first' चुनें और उस पेज का वर्णन करें जो आप चाहते हैं: एक कनेक्ट-वॉलेट बटन, एक बैलेंस और एक ट्रांज़ैक्शन स्टेटस लाइन। एजेंट फोल्डर को मैप करता है, फ़ाइलों को डिफ़ के रूप में प्रस्तावित करता है और हर बदलाव को स्वीकार करने के बाद ही पेज बनाता है। शुरू करने से पहले यह तय कर लें कि प्रोजेक्ट कहाँ चलेगा। आपकी अपनी पीसी पर एक लोकल चेन पहली कोशिश के लिए अच्छी होती है, क्योंकि उस पर मौजूद सिक्कों की कोई वैल्यू नहीं होती, और एक पब्लिक टेस्ट नेटवर्क अगला कदम है जब पेज काम कर ले। या तो किसी भी एक पर थ्रोअवे अकाउंट्स का उपयोग करें, कभी भी उस अकाउंट का उपयोग न करें जिसमें असली फंड्स हों, और हर प्राइवेट की और सीड फ्रेज़ को फोल्डर, चैट और रिपॉजिटरी से बाहर रखें। नतीजा एक छोटा, टेस्ट किया गया पेज और एक README है जिसे कोई दूसरा व्यक्ति भी फॉलो कर सकता है।

01

फोल्डर खोलें

प्रोजेक्ट फोल्डर को एक नई चैट के वर्किंग फोल्डर के रूप में चुनें और 'Ask first' सेलेक्ट करें, ताकि हर फ़ाइल लिखने वाला बदलाव आपकी डिसीजन का इंतज़ार करे। शुरू करने से पहले उस फोल्डर में ABI फ़ाइल रखें।

02

स्क्रीन का वर्णन करें

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

03

हर डिफ़ की समीक्षा करें

चैट में हर प्रस्तावित फ़ाइल बदलाव को पढ़ें, फिर उसे एक छोटी नोट के साथ स्वीकार या अस्वीकार करें। जब आप पूरा डिफ़ देखना चाहें तो कार्ड को एक्सपैंड करें, और उस चीज़ को अस्वीकार करें जिसे आप एक वाक्य में समझा न सकें।

04

चलाएं और जांचें

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

शुरुआत के लिए एक छोटी ABI फ़ाइल

balance-abi.json
[
 {
  "type": "function",
  "name": "balanceOf",
  "stateMutability": "view",
  "inputs": [{ "type": "address", "name": "account" }],
  "outputs": [{ "type": "uint256" }]
 }
]

यह JSON फ़्रैगमेंट एक केवल-पढ़ने वाली फंक्शन, balanceOf का वर्णन करता है, वह बैलेंस-रीडिंग फंक्शन जिसका उपयोग ERC-20 टोकन करते हैं। यह एक address नामक account लेता है और एक uint256 लौटाता है। एक फ्रंट एंड इस तरह की ABI का उपयोग कंट्रैक्ट को कॉल करने के लिए करता है, और फ़ाइल में कोई की या सीक्रेट नहीं होता। इसे प्रोजेक्ट फोल्डर में balance-abi.json के रूप में सेव करें, और पेज काम करने के बाद इसे अपनी स्वयं की कंट्रैक्ट की पूरी ABI से बदल दें, क्योंकि एक असली कंट्रैक्ट में आमतौर पर बहुत सारे फंक्शन होते हैं।

पहली dApp के लिए वॉकथ्रू

फोल्डर मैप करें और ABI पढ़ें

web3 सीखने की एक अच्छी शुरुआत यह है कि कुछ भी लिखने से पहले एक छोटी ABI फ़ाइल पढ़ें। एजेंट से balance-abi.json खोलने के लिए कहें। read_file फ़ाइल दिखाता है, list_dir फोल्डर में बाकी क्या है वह दिखाता है और grep फंक्शन के सही नाम की पुष्टि करता है। एजेंट फिर चैट में समझाता है कि balanceOf एक व्यू फंक्शन है: यह डेटा पढ़ता है और कोई ट्रांज़ैक्शन नहीं भेजता, इसलिए इसे कॉल करने से चेन पर कुछ नहीं बदलता। अभी तक कुछ लिखा नहीं गया है। यह यह भी सूचीबद्ध करता है कि पेज को किसकी ज़रूरत होगी, यानी एक नोड से कनेक्शन, डिप्लॉय किए गए कंट्रैक्ट का पता और एक अकाउंट जिसे खोजना है। हर बयान की जांच JSON कार्ड पर करें, क्योंकि एक मॉडल टाइप को गलत पढ़ सकता है या उस फंक्शन का नाम दे सकता है जो फ़ाइल में मौजूद नहीं है, और आगे बढ़ने से पहले सुधार मांगें।

पेज को एक लोकल चेन से कनेक्ट करें

एक ऐसे पेज के लिए कहें जो एक थ्रोअवे टेस्ट अकाउंट का बैलेंस पढ़े। write_file app.js बनाता है जिसमें JSON-RPC के माध्यम से आपकी लोकल चेन के लिए कॉल होती है, और edit_file index.html में एक स्क्रिप्ट लाइन जोड़ता है। आपको dApp के लिए क्रॉस चेन टूल्स की ज़रूरत तब होती है जब वह कई चेन से बात करता है; एक लोकल चेन पर पहली प्रोजेक्ट को किसी की ज़रूरत नहीं होती, इसलिए उन्हें बाहर रखें। Ask first मोड में दोनों बदलाव डिफ़ के रूप में इंतज़ार करते हैं। उन्हें पढ़ें और स्वीकार करें। Shell फिर आपका बिल्ड कमांड चलाता है, और कार्ड असली एग्जिट कोड दिखाता है। पेज खोलें, उस नंबर की तुलना करें जो वह दिखा रहा है उस लोकल चेन के नंबर से जो उसी अकाउंट के लिए रिपोर्ट करता है, और अगर दोनों अलग हैं तो एजेंट से पेज ठीक करने के लिए कहें। चेन एड्रेस को एक ही जगह रखें, ताकि नेटवर्क बदलने का मतलब बाद में केवल एक लाइन एडिट करना हो।

ट्रांज़ैक्शन स्टेट्स हैंडल करें

डेव के रूप में web2 से web3 में ट्रांज़िशन करने का मतलब मुख्य रूप से एक वॉलेट, एक नेटवर्क और एक ट्रांज़ैक्शन स्टेट्स को उन स्क्रीन्स में जोड़ना है जिन्हें आप बनाना जानते हैं। एजेंट से एक स्टेटस लाइन 5 स्टेट्स के साथ जोड़ने के लिए कहें: not sent, waiting for the wallet, pending, confirmed और failed। edit_file स्क्रिप्ट और स्टाइलशीट को बदलता है, और grep उस जगह को ढूंढता है जहां कोई स्टेट्स अभी भी मिसिंग है। वॉलेट साइन करता है; आपका कोड कभी प्राइवेट की या सीड फ्रेज़ को टच नहीं करता। एक मिसिंग वॉलेट, गलत नेटवर्क और एक रिजेक्टेड सिग्नेचर के लिए मैसेज भी मांगें, क्योंकि एक असली यूजर जल्द ही उनसे मिलेगा। थ्रोअवे अकाउंट के साथ टेस्ट नेटवर्क पर पेज चलाएं, जानबूझकर सिग्नेचर रिजेक्ट करें और जांचें कि failed स्टेट्स एक स्पष्ट मैसेज के साथ आता है या नहीं।

टेस्ट करें, फिर प्रोजेक्ट को दस्तावेज़ करें

एजेंट से हर स्टेट के लिए एक फ्रंट-एंड टेस्ट और एक छोटा README लिखने के लिए कहें जो समझाता है कि प्रोजेक्ट कैसे चलाएं। write_file दोनों फ़ाइलें बनाता है, Shell आपका टेस्ट कमांड चलाता है और कार्ड असली एग्जिट कोड रिपोर्ट करता है। एक dApp डेवलपर जो एक महीने बाद प्रोजेक्ट में वापस आएगा, वह पहले उस README को पढ़ेगा, इसलिए जांचें कि वह केवल उन कमांड्स का नाम बताता है जिन्हें आप वास्तव में उपयोग करते हैं और यह कहता है कि पेज किस नेटवर्क की उम्मीद करता है। Plan only मोड का उपयोग पहले करें यदि आप किसी फ़ाइल बनाने से पहले स्टेप्स की सूची देखना चाहते हैं, फिर उसे लागू करने के लिए Ask first पर स्विच करें। हर डिफ़ पढ़ें, थ्रोअवे अकाउंट्स के साथ टेस्ट नेटवर्क पर एक बार खुद टेस्ट चलाएं, और README को ABI फ़ाइल के बगल में रखें ताकि दोनों सिंक में रहें।

Windows के लिए AlphaWeft

अपना पहला प्रोजेक्ट फोल्डर शुरू करें

AlphaWeft डाउनलोड करें ↗