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

Thomas Steiner

डेवलपर के लिए उपलब्ध सुविधाएं

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

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

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

• WeChat DevTools
• Alipay DevTools
• Baidu DevTools
• ByteDance DevTools
• Quick App DevTools

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

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

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

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

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

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

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

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

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

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

डीबगर

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

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

कस्टम एलिमेंट के बारे में ज़्यादा जानकारी

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

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

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

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

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

एपीआई मॉकिंग

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

Acknowledgements

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