मिनी ऐप्लिकेशन के लिए DevTools

Thomas Steiner

डेवलपर का अनुभव

मैंने हर समय पर मिनी ऐप्लिकेशन के बारे में जानकारी दे दी है. इसलिए, अब मैं अलग-अलग सुपर ऐप्लिकेशन प्लैटफ़ॉर्म के डेवलपर के अनुभव पर फ़ोकस करना चाहती हूं. सभी प्लैटफ़ॉर्म पर मिनी ऐप्लिकेशन डेवलपमेंट, IDE में होता है. यह सुविधा, सुपर ऐप्लिकेशन प्लैटफ़ॉर्म पर मुफ़्त में उपलब्ध कराई जाती है. हालांकि, कई विकल्प हैं, लेकिन मुझे सबसे ज़्यादा इस्तेमाल किए जाने वाले चार ऐप्लिकेशन पर फ़ोकस करना है. साथ ही, तुलना करने के लिए, 'क्विक ऐप्लिकेशन' के लिए पांचवां पेज है.

मिनी ऐप्लिकेशन आईडीई

सुपर ऐप्लिकेशन की तरह, ज़्यादातर IDE सिर्फ़ चाइनीज़ भाषा में उपलब्ध हैं. असल में आपको यह पक्का करना होगा कि आपने चाइनीज़ वर्शन इंस्टॉल किया हो, कभी-कभी अंग्रेज़ी (या विदेश में) उपलब्ध होने वाला वर्शन नहीं. ऐसा इसलिए, क्योंकि हो सकता है कि वह वर्शन अप-टू-डेट न हो. अगर आप macOS डेवलपर हैं, तो ध्यान रखें कि सभी IDEs पर हस्ताक्षर नहीं किए जाते हैं. इसका मतलब है कि macOS, इंस्टॉलर को चलाने से मना कर देता है. अपने जोखिम परApple सहायता में बताए गए तरीके से, इसे बायपास किया जा सकता है.

• WeChat DevTools
• Alipay DevTools
• Baidu DevTools
• ByteDance DevTools
• क्विक ऐप्लिकेशन DevTools

मिनी ऐप्लिकेशन स्टार्टर प्रोजेक्ट

मिनी ऐप्लिकेशन बनाने की शुरुआत करने के लिए, सभी सुपर ऐप्लिकेशन प्रोवाइडर ऐसे डेमो ऐप्लिकेशन ऑफ़र करते हैं जिन्हें तुरंत डाउनलोड और टेस्ट किया जा सकता है. ये कभी-कभी अलग-अलग IDE के "नया प्रोजेक्ट" विज़र्ड में भी इंटिग्रेट किए जाते हैं.

• WeChat का डेमो
• Alipay डेमो
• Baidu का डेमो
• ByteDance का डेमो
• क्विक ऐप्लिकेशन का डेमो

डेवलपमेंट फ़्लो

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

जैसा कि दिख रहा है, सभी आईडीई के बुनियादी कॉम्पोनेंट एक-दूसरे से काफ़ी मिलते-जुलते हैं. आपके पास हमेशा Monaco Editor पर आधारित एक कोड एडिटर होता है. यह वही प्रोजेक्ट है जिसमें VS Code भी होता है. सभी आईडीई में, Chrome DevTools फ़्रंटएंड पर आधारित एक डीबगर होता है. इसमें कुछ बदलाव किए जाते हैं. बाद में किए गए बदलावों के बारे में ज़्यादा जानकारी के लिए, डीबगर देखें. IDE per se को NW.js या Electron ऐप्लिकेशन के तौर पर इस्तेमाल किया जाता है, IDE में मौजूद सिम्युलेटर को NW.js <webview> टैग या Electron <webview> टैग के तौर पर इस्तेमाल किया जाता है, जो <webview> टैग पर आधारित होते हैं. अगर आपकी दिलचस्पी IDE इंटरनल में है, तो कीबोर्ड शॉर्टकट Control+Alt+I (या Mac पर Command+Option+I) का इस्तेमाल करके, Chrome DevTools की मदद से अक्सर इनकी जांच की जा सकती है.

सिम्युलेटर और असली डिवाइस की जांच और डीबग करना

इस सिम्युलेटर और Chrome DevTools के डिवाइस मोड में मौजूद जानकारी की तुलना की जा सकती है. अलग-अलग Android और iOS डिवाइसों को सिम्युलेट किया जा सकता है, स्केल और डिवाइस ओरिएंटेशन को बदला जा सकता है. साथ ही, नेटवर्क की अलग-अलग स्थितियों, मेमोरी दबाव, बारकोड रीडिंग इवेंट, अचानक बंद होने, और डार्क मोड को सिम्युलेट किया जा सकता है.

पहले से मौजूद सिम्युलेटर से यह पता लगाने में आसानी होती है कि ऐप्लिकेशन कैसे काम करता है, लेकिन डिवाइस पर सामान्य वेब ऐप्लिकेशन की तरह ही जांच करने की सुविधा की जगह कोई बदलाव नहीं किया जा सकता. इन-डेवलपमेंट मिनी ऐप्लिकेशन को आज़माने के लिए, आपको बस क्यूआर कोड स्कैन करना होगा. उदाहरण के लिए, ByteDance DevTools में आईडीई से डाइनैमिक तौर पर जनरेट हुए क्यूआर कोड को, किसी असली डिवाइस से स्कैन किया जाता है. इसके बाद, मिनी ऐप्लिकेशन का क्लाउड-होस्ट किया गया वर्शन बन जाता है, जिसे डिवाइस पर तुरंत टेस्ट किया जा सकता है. ByteDance के लिए यह इस तरह काम करता है कि क्यूआर कोड (उदाहरण) के पीछे का यूआरएल, होस्ट किए गए पेज (उदाहरण) पर रीडायरेक्ट करता है, जिसमें विशेष यूआरआई स्कीम वाले लिंक होते हैं, जैसे कि snssdk1128://, Douyin या Toutiao जैसे कई ByteDance सुपर ऐप्लिकेशन पर मिनी ऐप्लिकेशन की झलक देखने के लिए (यहां एक उदाहरण दिया गया है). सुपर ऐप्लिकेशन की सेवा देने वाली अन्य कंपनियां, बीच के पेज पर नहीं जाती. हालांकि, वे सीधे झलक खोलती हैं.

क्लाउड-आधारित प्रीव्यू रिमोट डीबगिंग, और भी आकर्षक सुविधा है. इसी तरह, IDE से जनरेट किए गए क्यूआर कोड को स्कैन करने के बाद, फ़िज़िकल डिवाइस पर मिनी ऐप्लिकेशन खुलता है. साथ ही, कंप्यूटर पर Chrome की DevTools विंडो चलती है, ताकि रिमोट डीबगिंग की जा सके.

डीबगर

एलिमेंट डीबग करना

मिनी ऐप्लिकेशन डीबग करने का अनुभव उन सभी लोगों के लिए जाना-पहचाना है जिन्होंने पहले कभी Chrome DevTools के साथ काम किया है. हालांकि, कुछ काम के अंतर की वजह से मिनी ऐप्लिकेशन के हिसाब से वर्कफ़्लो तय किया जा सकता है. Chrome DevTools के एलिमेंट पैनल के बजाय, मिनी ऐप्लिकेशन आईडीई में कस्टम पैनल होता है. इसे उनकी एचटीएमएल की खास भाषा के हिसाब से बनाया गया है. उदाहरण के लिए, WeChat के मामले में, पैनल को Wxml कहा जाता है, जिसका मतलब है WeiXin मार्कअप लैंग्वेज. Baidu DevTools में इसे स्वान एलिमेंट कहा जाता है. ByteDance DevTools इसे Bxml कहते हैं. Alipay इसका नाम AXML रख सकता है और Quick App पैनल को सिर्फ़ UX के तौर पर दिखाता है. मैं बाद में इन मार्कअप भाषाओं के बारे में ज़्यादा जानूंगा.

हुड के तहत कस्टम एलिमेंट

about://inspect/#devices की मदद से किसी असली डिवाइस पर वेबव्यू की जांच करने पर, पता चलता है कि WeChat DevTools जान-बूझकर सच छिपा रहा था. WeChat DevTools ने एक <image> दिखाया. असल में, मुझे <wx-image> नाम का कस्टम एलिमेंट दिख रहा है. सिर्फ़ <div> को इसका चाइल्ड एलिमेंट माना गया है. यह ध्यान रखना दिलचस्प है कि यह कस्टम एलिमेंट, शैडो DOM का इस्तेमाल नहीं करता है. इन कॉम्पोनेंट के बारे में बाद में ज़्यादा जानकारी दें.

सीएसएस डीबग करना

दूसरा अंतर है, सीएसएस की अलग-अलग बोलियों में रिस्पॉन्सिव पिक्सल के लिए लंबाई की नई यूनिट rpx (इस यूनिट के बारे में ज़्यादा जानकारी बाद में देखें). WeChat DevTools, डिवाइस पर निर्भर सीएसएस लंबाई यूनिट का इस्तेमाल करता है, ताकि डिवाइस के अलग-अलग साइज़ के लिए ऐप्लिकेशन डेवलप करना ज़्यादा आसान हो.

परफ़ॉर्मेंस ऑडिटिंग

मिनी ऐप्लिकेशन की परफ़ॉर्मेंस सबसे अहम है. इसलिए, इसमें कोई हैरानी की बात नहीं है कि WeChat DevTools और कुछ अन्य DevTools में लाइटहाउस से प्रेरित ऑडिटिंग टूल को इंटिग्रेट किया गया है. इन ऑडिट में टोटल, परफ़ॉर्मेंस, एक्सपीरियंस, और सबसे सही तरीका शामिल हैं. IDE के व्यू को अपनी पसंद के मुताबिक बनाया जा सकता है. नीचे दिए गए स्क्रीनशॉट में, मैंने ऑडिट टूल के लिए ज़्यादा स्क्रीन रीयल एस्टेट के लिए, कोड एडिटर को कुछ समय के लिए छिपा दिया है.

एपीआई मॉकिंग

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

स्वीकार हैं

इस लेख की समीक्षा जो मेडली, कायस बास्क्स, मिलिका मिहाजलिया, ऐलन केंट, और कीथ गू ने की है.