Codex in Action: जीरो-कोड WeChat Mini Program डेवलपमेंट

हाल ही में, कला संकाय (Arts) पृष्ठभूमि वाले कई दोस्त Codex का उपयोग करके अपने स्वयं के उत्पाद विकसित करने का प्रयास कर रहे हैं।

पिछले दो लेखों में Codex का उपयोग करने के तरीके को कवर किया गया था; यह लेख व्यावहारिक अनुप्रयोग पर केंद्रित है: इसका उपयोग करके WeChat मिनी प्रोग्राम कैसे बनाया जाए।

पहले, आइए परिणाम देखें। इस बार, हमने "एक पेज" नामक एक रीडिंग चेक-इन मिनी प्रोग्राम बनाया है। नीचे WeChat डेवलपर टूल्स में इसका रनिंग इंटरफ़ेस है।

एक विचार से लेकर उपयोग करने योग्य मिनी प्रोग्राम तक की पूरी प्रक्रिया को इन चरणों में विभाजित किया जा सकता है:

Figma प्रोटोटाइप डिज़ाइन → Codex कोड जनरेशन → डेवलपर टूल्स सिमुलेशन → मोबाइल प्रीव्यू → ऑडिट और प्रकाशन के लिए सबमिशन।

Figma यह निर्धारित करने के लिए जिम्मेदार है कि पेज कैसे दिखेंगे और बटन कहाँ ले जाएंगे; Codex डिज़ाइन को कोड में लिखता है; WeChat डेवलपर टूल्स का उपयोग मिनी प्रोग्राम को चलाने, जाँचने और फ़ोन पर प्रीव्यू के लिए भेजने के लिए किया जाता है। अपना स्वयं का मिनी प्रोग्राम खाता तैयार करने के बाद, आप इसे WeChat बैकएंड के माध्यम से ऑडिट और रिलीज़ के लिए सबमिट करते हैं।

1. Figma क्या है, और पहले इसका उपयोग क्यों करें?

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

यह क्लिक करने योग्य उत्पाद प्रोटोटाइप भी बना सकता है। उदाहरण के लिए, होमपेज पर एक बटन को दूसरे पेज से लिंक करना ताकि उस पर क्लिक करने से जंप ट्रिगर हो, जिससे आप पहले से जाँच सकें कि ऑपरेशन सुचारू है या नहीं।

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

पहले, यह डिज़ाइन ड्राफ्ट आमतौर पर एक डेवलपर को सौंप दिया जाता था। अब, आप पुष्टि किए गए ड्राफ्ट को Codex को कोड लिखने के लिए दे सकते हैं। डिज़ाइनर अपने परिचित Figma से शुरुआत कर सकते हैं; जो पहले से Codex का उपयोग कर रहे हैं, वे इसे पहले एक ड्राफ्ट जनरेट करने दे सकते हैं और फिर Figma में समायोजित कर सकते हैं।

इस तरह "एक पेज" बनाया गया था। हमने पहले तीन मुख्य पेज—बुकशेल्फ़, रिकॉर्ड और सांख्यिकी—निर्धारित किए, और फिर रंग योजना और लेआउट को एकीकृत किया।

यह डिज़ाइन प्रदर्शन है। पृष्ठभूमि के लिए क्रीम व्हाइट, टेक्स्ट और मुख्य बटन के लिए डार्क ब्लू, और वर्तमान ऑपरेशन को हाइलाइट करने के लिए हल्का हरा उपयोग किया गया है। होमपेज वर्तमान में पढ़ी जा रही पुस्तक को सबसे प्रमुख स्थान पर रखता है, जबकि सांख्यिकीय जानकारी को एक अलग पेज पर रखा जाता है ताकि खोलने पर उपयोगकर्ता संख्याओं से अभिभूत न हो।

यह चरण समग्र प्रभाव के बारे में है। एक बार जब आप रंगों, फ़ॉन्ट आकार और पेज व्यवस्था से संतुष्ट हो जाते हैं, तो आप आगे बढ़ते हैं।

2. Codex को एक ड्राफ्ट जनरेट करने दें और Figma में प्रोटोटाइप पूरा करें

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

Codex को अपनी आवश्यकताएँ और विज़ुअल दिशा एक साथ बताएं:

1मैं रीडिंग चेक-इन के लिए "एक पेज" नामक एक WeChat मिनी प्रोग्राम बनाना चाहता हूँ।
2कृपया पहले तीन पेज डिज़ाइन करें: बुकशेल्फ़ होमपेज, रीडिंग रिकॉर्ड और रीडिंग सांख्यिकी। अभी तक कार्यात्मक कोड न लिखें।
3
4विज़ुअल शैली एक शांत रीडिंग जर्नल की तरह होनी चाहिए:
5क्रीम व्हाइट पृष्ठभूमि, डार्क ब्लू टेक्स्ट, हल्का हरा प्रमुख क्षेत्र, पर्याप्त खाली जगह के साथ।
6होमपेज पर पढ़ी जा रही पुस्तक और रिकॉर्डिंग के लिए प्रवेश बिंदु को हाइलाइट किया जाना चाहिए। अन्य पेजों को समान विज़ुअल शैली बनाए रखनी चाहिए।
7पुस्तक कवर के लिए मूल ज्यामितीय ग्राफिक्स का उपयोग करें; नमूना पुस्तकों के लिए काल्पनिक सामग्री का उपयोग करें।
8
9पहले, मुझे तीनों पेजों की एक साथ एक प्रीव्यू इमेज दें।
10साथ ही, तीन स्वतंत्र 390×844 SVG फ़ाइलें आउटपुट करें, टेक्स्ट, ग्राफिक्स और बटन समूहों को बरकरार रखें ताकि Figma में आगे समायोजन किया जा सके। कृपया मुख्य बटनों को अलग-अलग नाम दें।

SVG आउटपुट का अनुरोध करने से आप डिज़ाइन को Figma में रख सकते हैं। SVG एक वेक्टर ग्राफिक प्रारूप है; इस मामले में, इसे आयात करने से टेक्स्ट, ग्राफिक्स और समूह मिलते हैं जिन्हें अलग-अलग चुना और समायोजित किया जा सकता है।

ड्राफ्ट प्राप्त करने के बाद, इसे तब तक संशोधित करें जब तक आप संतुष्ट न हो जाएं। फीडबैक में यथासंभव विशिष्ट रहें, जैसे "होमपेज शीर्षक को थोड़ा छोटा करें," "मुख्य बटनों को डार्क ब्लू में एकीकृत करें," या "पुस्तक कवर को बड़ा करें।" एक बार जब सभी तीन पेज संतोषजनक हो जाएं, तो प्रोटोटाइप इंटरैक्शन को संभालें।

डिज़ाइन को Figma में रखना

एक Figma डिज़ाइन फ़ाइल खोलें, बाईं ओर पेज के आगे "+" पर क्लिक करें और एक नया पेज बनाएं।

इस उदाहरण में, SVG सामग्री को कॉपी करके और Figma कैनवास पर पेस्ट करके आयात पूरा किया जाता है। तीनों आर्टबोर्ड को "01-बुकशेल्फ़ होमपेज," "02-रीडिंग रिकॉर्ड," और "03-रीडिंग सांख्यिकी" नाम दें और उन्हें क्षैतिज रूप से व्यवस्थित करें। एक आर्टबोर्ड चुनने के बाद, दाईं ओर डिज़ाइन पैनल में चौड़ाई और ऊंचाई जांचें।

यदि आप पहली बार Figma खोल रहे हैं, तो इन क्षेत्रों को पहचानें: बाईं ओर लेयर्स सूची, बीच में कैनवास, दाईं ओर उपस्थिति के लिए डिज़ाइन पैनल और इंटरैक्शन सेट करने के लिए प्रोटोटाइप। किसी भी टेक्स्ट या बटन को बदलने के लिए, पहले लेयर्स सूची में उसे चुनें।

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

बटनों में जंप जोड़ना

होमपेज पर "पढ़ना जारी रखें" कार्ड को एक उदाहरण के रूप में लें। इसे चुनें, ऊपर दाईं ओर प्रोटोटाइप पर स्विच करें और इंटरैक्शन के आगे "+" पर क्लिक करें।

पॉप-अप इंटरैक्शन पैनल में, इन तीन विकल्पों को सेट करें:

• ट्रिगर: "क्लिक पर" चुनें।
• क्रिया: "नेविगेट करें" चुनें।
• गंतव्य: "02-रीडिंग रिकॉर्ड" (लक्ष्य आर्टबोर्ड) चुनें।

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

ऊपर दाईं ओर त्रिकोण "प्रस्तुत करें" आइकन पर क्लिक करके प्रोटोटाइप डेमो खोलें। पेजों के बीच रूट का परीक्षण करने के लिए होमपेज से क्लिक करें और वापस आएं।

Figma प्रोटोटाइप जंप प्रदर्शित करता है; वास्तविक इनपुट, सेविंग और डेटा अपडेट अगले चरण में मिनी प्रोग्राम कोड द्वारा कार्यान्वित किए जाएंगे।

3. डिज़ाइन तैयार है; मैं MCP का उपयोग कहाँ करूं?

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

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

1कृपया Figma MCP के माध्यम से इस आर्टबोर्ड के डिज़ाइन संदर्भ और स्क्रीनशॉट पढ़ें।
2पहले, पेज संरचना, फ़ॉन्ट आकार, रंग, स्पेसिंग और आपके द्वारा पढ़े गए एसेट की व्याख्या करें।
3मुझे स्पष्ट रूप से बताएं कि क्या ऐसे भाग हैं जिन्हें आप नहीं पढ़ सकते; अनुमान न लगाएं।
4
5इसके बाद, हम WXML, WXSS, JavaScript और JSON का उपयोग करके एक नेटिव WeChat मिनी प्रोग्राम बनाएंगे।
6कृपया इस तकनीकी स्टैक के अनुसार इसे लागू करें, प्रोजेक्ट से मौजूदा शैलियों और एसेट का पुन: उपयोग करें।
7पहले होमपेज को पूरा करें, और पुष्टि के बाद अन्य पेजों के साथ जारी रखें।

"नेटिव WeChat मिनी प्रोग्राम" निर्दिष्ट करना सुनिश्चित करें। Figma द्वारा प्रदान की गई डिज़ाइन जानकारी को लक्ष्य प्लेटफ़ॉर्म के अनुसार लागू करने की आवश्यकता है; आप मिनी प्रोग्राम के लिए केवल वेब कोड का उपयोग नहीं कर सकते।

इस उदाहरण में, डिज़ाइन को SVG के माध्यम से Figma में आयात किया गया था, और कोड उसी डिज़ाइन फ़ाइल और एसेट का अनुसरण करता है; MCP एक अंतर को पाटने का एक तरीका है जब कोई Figma डिज़ाइन ड्राफ्ट पहले से मौजूद हो। विधि के बावजूद, Codex को जो सौंपा जाना चाहिए वह एक पुष्टि किया गया डिज़ाइन है।

4. डिज़ाइन को मिनी प्रोग्राम में लिखना

Codex में प्रोजेक्ट फ़ोल्डर खोलें, डिज़ाइन फ़ाइलें और पुस्तक कवर एसेट रखें, और आप कार्यान्वयन शुरू कर सकते हैं।

इस चरण में, तकनीक निर्दिष्ट करने के अलावा, आपको स्पष्ट रूप से बताना होगा कि आप क्या प्राप्त करना चाहते हैं: एक प्रोजेक्ट जिसे सीधे WeChat डेवलपर टूल्स में आयात किया जा सके।

1कृपया पुष्टि किए गए "एक पेज" डिज़ाइन के आधार पर नेटिव WeChat मिनी प्रोग्राम को पूरा करें।
2
3WXML, WXSS, JavaScript और JSON का उपयोग करें।
4कोड को miniprogram फ़ोल्डर में रखें और app.json और project.config.json प्रदान करें ताकि इसे सीधे WeChat डेवलपर टूल्स में आयात किया जा सके।
5
6बुकशेल्फ़, रीडिंग रिकॉर्ड, सांख्यिकी और पुस्तक जोड़ें पेजों को लागू करें।
7पुष्टि की गई रंग योजना, लेआउट और मूल पुस्तक कवर एसेट का पालन करें।
8अभी के लिए wx.setStorageSync का उपयोग करके डेटा को स्थानीय रूप से सहेजें, और पुनः खोलने पर इसे पढ़ें।
9इनपुट सत्यापन, खाली स्थितियाँ और सहेजने में विफलता संकेत जोड़ें।
10
11पूरा होने पर कोड की जाँच करें और मुझे बताएं कि किस निर्देशिका को आयात करना है और कैसे कंपाइल करना है।
12यदि ऐसी वस्तुएँ हैं जिन्हें मुझे कॉन्फ़िगर करने की आवश्यकता है, तो कृपया उन्हें अलग से सूचीबद्ध करें।

Codex द्वारा जनरेट किए गए प्रोजेक्ट में, WXML पेज संरचना को संभालता है, WXSS शैलियों को संभालता है, JavaScript क्लिक और सेविंग को संभालता है, और JSON पेज पथों को कॉन्फ़िगर करता है। एक बार जब आप पहचान लेते हैं कि प्रत्येक फ़ाइल क्या करती है, तो आप वितरित निर्देशिका को समझ सकते हैं।

यहाँ अभिभूत न हों; बस Codex को इसे आपके लिए हल करने दें। आपको कोड समझने की आवश्यकता नहीं है; बस प्रॉम्प्ट कॉपी करें, अपना डिज़ाइन ड्राफ्ट डालें और इसे अपने नाम में बदलें।

5. इसे WeChat डेवलपर टूल्स में रखें और देखें कि यह चलता है या नहीं

WeChat डेवलपर टूल्स को स्थापित और लॉग इन करने के बाद, "प्रोजेक्ट" मेनू से "प्रोजेक्ट आयात करें" चुनें और Codex द्वारा जनरेट किया गया miniprogram फ़ोल्डर ढूंढें।

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

"बनाएं" पर क्लिक करें, प्रोजेक्ट में प्रवेश करें और कंपाइलेशन की प्रतीक्षा करें। एक बार दाईं ओर सिम्युलेटर पेज प्रदर्शित करता है, तो आप सीधे अपने माउस से इसे संचालित कर सकते हैं। Codex द्वारा कोड संशोधित करने के बाद, परिणाम देखने के लिए पुन: कंपाइल करें।

यहाँ, मुख्य रूप से तीन चीजों की जाँच करें: क्या पेज गलत संरेखित हैं, क्या बटन सही पेजों पर ले जाते हैं, और क्या दर्ज की गई सामग्री को सहेजा जा सकता है। साथ ही, यह देखने के लिए सिम्युलेटर के स्क्रीन आकार को स्विच करें कि क्या लंबे शीर्षक, इनपुट बॉक्स और निचला नेविगेशन तंग हैं।

यदि समस्याएँ आती हैं, तो त्रुटि टेक्स्ट या स्क्रीनशॉट Codex को भेजें, साथ ही आपने अभी क्या किया और आप क्या देखने की उम्मीद कर रहे थे। उदाहरण के लिए:

1यह WeChat डेवलपर टूल्स में एक त्रुटि का स्क्रीनशॉट है।
2जब मैं होमपेज से रिकॉर्ड पेज में प्रवेश करता हूँ, तो पुस्तक कवर प्रदर्शित नहीं होता है।
3कृपया इमेज पथ और पेज लोडिंग समय की जाँच करें। मौजूदा लेआउट को अपरिवर्तित रखते हुए इसे ठीक करें।

इस मामले में, हमें वास्तव में एक इमेज लोडिंग समस्या का सामना करना पड़ा: कोड ने पेज डेटा तैयार होने से पहले इमेज एड्रेस को जोड़ना शुरू कर दिया, जिसके परिणामस्वरूप पथ में पुस्तक कवर का नाम गायब हो गया। कोड को डेटा तैयार होने तक इमेज प्रदर्शित करने की प्रतीक्षा करने के लिए कहने से समस्या हल हो गई।

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

6. कंप्यूटर सिम्युलेटर से मोबाइल प्रीव्यू और प्रकाशन तक

एक बार जब यह कंप्यूटर पर चलता है, तो इसे अपने फ़ोन पर जाँचें।

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

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

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

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

यह उदाहरण डेवलपर टूल्स में चलने योग्य होने के चरण तक पहुँच गया है। पाठक अपने स्वयं के मिनी प्रोग्राम खातों का उपयोग करके मोबाइल प्रीव्यू, अपलोड और ऑडिट के लिए सबमिशन के साथ आगे बढ़ सकते हैं।

पूरी प्रक्रिया को जोड़ना

पहले, पेज और बटन जंप निर्धारित करने के लिए Figma का उपयोग करें जब तक कि आप डिज़ाइन से संतुष्ट न हो जाएं; फिर डिज़ाइन फ़ाइल या आर्टबोर्ड लिंक Codex को सौंपें ताकि वह इसे WeChat मिनी प्रोग्राम में लिखे; फिर इसे सिम्युलेट करने, चलाने और त्रुटियों की जाँच करने के लिए डेवलपर टूल्स में आयात करें; अंत में, इसे फ़ोन पर प्रीव्यू करें और पुष्टि के बाद अपलोड, ऑडिट और प्रकाशित करें।

भविष्य में, चाहे आप एक चेक-इन टूल, एक रेसिपी ऐप या अन्य छोटी उपयोगिताएँ बना रहे हों, आप अभी भी इस वर्कफ़्लो का पालन कर सकते हैं। यदि डिज़ाइन असंतोषजनक है, तो समायोजित करने के लिए Figma पर वापस जाएं; यदि कोई कार्यात्मक समस्या है, तो विशिष्ट ऑपरेशन और त्रुटि Codex को सौंपें, और फिर डेवलपर टूल्स में संशोधन परिणामों की पुष्टि करें।

मैं माइल्स हूँ, एक AI एल्गोरिदम विशेषज्ञ जो एक बड़ी तकनीकी कंपनी से FDE में परिवर्तित हुआ। मैंने एल्गोरिदम R&D, ऑप्टिमाइज़ेशन और डिप्लॉयमेंट के साथ-साथ कॉर्पोरेट प्रशिक्षण पर भी काम किया है। मुझे फॉलो करें @miles_mazy एक साथ बढ़ें और एक साथ पैसा कमाएं।