মিনি অ্যাপ DevTools

Thomas Steiner

ডেভেলপার অভিজ্ঞতা

এখন যেহেতু আমি মিনি অ্যাপ নিয়ে আলোচনা করেছি, আমি বিভিন্ন সুপার অ্যাপ প্ল্যাটফর্মের ডেভেলপার অভিজ্ঞতার উপর মনোযোগ দিতে চাই। সমস্ত প্ল্যাটফর্মে মিনি অ্যাপ ডেভেলপমেন্ট এমন সব IDE-তে করা হয়, যা সুপার অ্যাপ প্ল্যাটফর্মগুলো বিনামূল্যে সরবরাহ করে। যদিও এরকম আরও অনেক প্ল্যাটফর্ম আছে, আমি সবচেয়ে জনপ্রিয় চারটি এবং তুলনার জন্য কুইক অ্যাপের পঞ্চম একটির উপর আলোকপাত করতে চাই।

মিনি অ্যাপ আইডিই

সুপার অ্যাপগুলোর মতোই, বেশিরভাগ IDE শুধুমাত্র চীনা ভাষায় পাওয়া যায়। আপনাকে নিশ্চিত করতে হবে যে আপনি চীনা সংস্করণটিই ইনস্টল করছেন, মাঝে মাঝে পাওয়া যায় এমন কোনো ইংরেজি (বা বিদেশী) সংস্করণ নয়, কারণ সেটি হালনাগাদ নাও থাকতে পারে। আপনি যদি একজন macOS ডেভেলপার হন, তবে জেনে রাখুন যে সব IDE স্বাক্ষরিত (signed) থাকে না, যার ফলে macOS ইনস্টলারটি চালাতে অস্বীকার করে। আপনি নিজের ঝুঁকিতে , অ্যাপলের সহায়তায় বর্ণিত পদ্ধতি অনুসরণ করে এটি এড়িয়ে যেতে পারেন।

• WeChat DevTools
• আলিপে ডেভটুলস
• বাইদু ডেভটুলস
• বাইটড্যান্স ডেভটুলস
• কুইক অ্যাপ ডেভটুলস

মিনি অ্যাপ স্টার্টার প্রজেক্ট

মিনি অ্যাপ ডেভেলপমেন্ট দ্রুত শুরু করার জন্য, সকল সুপার অ্যাপ প্রোভাইডার ডেমো অ্যাপ অফার করে যা তাৎক্ষণিকভাবে ডাউনলোড ও পরীক্ষা করা যায় এবং যা কখনও কখনও বিভিন্ন IDE-এর "নিউ প্রজেক্ট" উইজার্ডের সাথেও ইন্টিগ্রেটেড থাকে।

• WeChat ডেমো
• আলিপে ডেমো
• Baidu ডেমো
• বাইটড্যান্স ডেমো
• দ্রুত অ্যাপ ডেমো

উন্নয়ন প্রবাহ

IDE চালু করার পর এবং একটি (ডেমো) মিনি অ্যাপ লোড বা তৈরি করার পর, প্রথম ধাপটি হলো লগ ইন করা। সাধারণত, আপনাকে শুধু সুপার অ্যাপ (যেখানে আপনি ইতিমধ্যেই লগ ইন করা আছেন) দিয়ে IDE দ্বারা তৈরি একটি QR কোড স্ক্যান করতে হয়। খুব কম ক্ষেত্রেই আপনাকে পাসওয়ার্ড দিতে হয়। একবার লগ ইন করলে, IDE আপনার পরিচয় জেনে যায় এবং আপনাকে প্রোগ্রামিং, ডিবাগিং, টেস্টিং এবং পর্যালোচনার জন্য আপনার অ্যাপ জমা দেওয়ার কাজ শুরু করতে দেয়। নিচে, আপনি উপরের অনুচ্ছেদে উল্লিখিত পাঁচটি IDE-এর স্ক্রিনশট দেখতে পারেন।

আপনি দেখতেই পাচ্ছেন, সমস্ত IDE-এর মৌলিক উপাদানগুলো খুবই একই রকম। এতে সবসময় Monaco Editor-এর উপর ভিত্তি করে একটি কোড এডিটর থাকে, যে প্রজেক্টটি VS Code- কেও শক্তি জোগায়। সমস্ত IDE-তেই Chrome DevTools ফ্রন্টএন্ডের উপর ভিত্তি করে কিছু পরিবর্তনসহ একটি ডিবাগার থাকে, সে সম্পর্কে পরে আরও বলা হবে ( ডিবাগার দেখুন)। IDE-গুলো হয় NW.js অথবা Electron অ্যাপ হিসেবে তৈরি করা হয়, IDE-গুলোর সিমুলেটরগুলো একটি NW.js <webview> ট্যাগ বা Electron <webview> ট্যাগ হিসেবে বাস্তবায়িত হয়, যা আবার একটি Chromium <webview> ট্যাগের উপর ভিত্তি করে তৈরি। আপনি যদি IDE-এর অভ্যন্তরীণ বিষয়গুলো সম্পর্কে আগ্রহী হন, তবে প্রায়শই Chrome DevTools-এর Control + Alt + I (অথবা Mac-এ Command + Option + I ) কিবোর্ড শর্টকাট ব্যবহার করে সহজেই সেগুলো পরীক্ষা করতে পারেন।

সিমুলেটর এবং বাস্তব ডিভাইসে পরীক্ষা ও ডিবাগিং

এই সিমুলেটরটি ক্রোম ডেভটুলস-এর ডিভাইস মোডের সাথে তুলনীয়। আপনি বিভিন্ন অ্যান্ড্রয়েড এবং আইওএস ডিভাইস সিমুলেট করতে পারেন, স্কেল এবং ডিভাইসের ওরিয়েন্টেশন পরিবর্তন করতে পারেন, সেইসাথে বিভিন্ন নেটওয়ার্ক স্টেট, মেমোরি প্রেসার, একটি বারকোড রিডিং ইভেন্ট, অপ্রত্যাশিত টার্মিনেশন এবং ডার্ক মোডও সিমুলেট করতে পারেন।

যদিও অ্যাপটি কীভাবে কাজ করে সে সম্পর্কে একটি মোটামুটি ধারণা পেতে বিল্ট-ইন সিমুলেটরই যথেষ্ট, সাধারণ ওয়েব অ্যাপের মতোই ডিভাইসে পরীক্ষা করা অপরিহার্য। একটি নির্মাণাধীন মিনি অ্যাপ পরীক্ষা করা এখন শুধু একটি QR কোড স্ক্যানের দূরত্বে। উদাহরণস্বরূপ, ByteDance DevTools-এ, IDE দ্বারা ডায়নামিকভাবে তৈরি একটি QR কোড আসল ডিভাইস দিয়ে স্ক্যান করলে মিনি অ্যাপটির একটি ক্লাউড-হোস্টেড সংস্করণ পাওয়া যায়, যা সাথে সাথেই ডিভাইসে পরীক্ষা করা যায়। ByteDance-এর ক্ষেত্রে এটি যেভাবে কাজ করে তা হলো, QR কোডের পেছনের URL ( উদাহরণ ) একটি হোস্টেড পৃষ্ঠায় ( উদাহরণ ) রিডাইরেক্ট করে, যেখানে বিশেষ URI স্কিমযুক্ত লিঙ্ক থাকে, যেমন— snssdk1128:// যাতে Douyin বা Toutiao-এর মতো বিভিন্ন ByteDance সুপার অ্যাপে মিনি অ্যাপটির প্রিভিউ দেখা যায় (এখানে একটি উদাহরণ দেওয়া হলো)। অন্যান্য সুপার অ্যাপ প্রোভাইডাররা কোনো মধ্যবর্তী পৃষ্ঠার মধ্য দিয়ে যায় না, বরং সরাসরি প্রিভিউ খোলে।

এর চেয়েও আকর্ষণীয় একটি ফিচার হলো ক্লাউড-ভিত্তিক প্রিভিউ রিমোট ডিবাগিং। একইভাবে IDE দ্বারা তৈরি একটি বিশেষ QR কোড স্ক্যান করার পরেই ফিজিক্যাল ডিভাইসে মিনি অ্যাপটি খুলে যায় এবং রিমোট ডিবাগিংয়ের জন্য কম্পিউটারে একটি Chrome DevTools উইন্ডো চালু হয়ে যায়।

ডিবাগার

উপাদান ডিবাগিং

যারা ক্রোম ডেভটুলস (Chrome DevTools) নিয়ে কাজ করেছেন, তাদের কাছে মিনি অ্যাপ ডিবাগিং-এর অভিজ্ঞতা খুবই পরিচিত। তবে, কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে, যা এই ওয়ার্কফ্লোকে মিনি অ্যাপের জন্য বিশেষভাবে উপযোগী করে তোলে। ক্রোম ডেভটুলস-এর এলিমেন্টস (Elements) প্যানেলের পরিবর্তে, মিনি অ্যাপ IDE-গুলোতে একটি নিজস্ব প্যানেল থাকে যা তাদের নির্দিষ্ট HTML ডায়ালেক্টের জন্য বিশেষভাবে তৈরি করা হয়। উদাহরণস্বরূপ, 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> রয়েছে। লক্ষণীয় বিষয় হলো, এই কাস্টম এলিমেন্টটি শ্যাডো ডোম (Shadow DOM) ব্যবহার করে না। এই কম্পোনেন্টগুলো নিয়ে পরে আরও আলোচনা করা হবে।

CSS ডিবাগিং

আরেকটি পার্থক্য হলো CSS-এর বিভিন্ন ডায়ালেক্টে রেসপন্সিভ পিক্সেলের জন্য ব্যবহৃত নতুন লেংথ ইউনিট rpx (এই ইউনিটটি নিয়ে পরে আরও আলোচনা করা হবে)। WeChat DevTools বিভিন্ন ডিভাইসের আকারের জন্য ডেভেলপ করাকে আরও সহজবোধ্য করতে ডিভাইস-নিরপেক্ষ CSS লেংথ ইউনিট ব্যবহার করে।

কর্মক্ষমতা নিরীক্ষা

মিনি অ্যাপগুলোর জন্য পারফরম্যান্সই সবচেয়ে গুরুত্বপূর্ণ, তাই এতে অবাক হওয়ার কিছু নেই যে WeChat DevTools এবং অন্যান্য কিছু DevTools-এ একটি সমন্বিত, লাইটহাউস-অনুপ্রাণিত অডিটিং টুল রয়েছে। এই অডিটগুলোর প্রধান ক্ষেত্রগুলো হলো টোটাল (Total), পারফরম্যান্স (Performance), এক্সপেরিয়েন্স (Experience), এবং বেস্ট প্র্যাকটিস (Best Practice)। IDE-এর ভিউ কাস্টমাইজ করা যায়। নিচের স্ক্রিনশটে আমি অডিট টুলের জন্য স্ক্রিনে আরও জায়গা পেতে কোড এডিটরটি সাময়িকভাবে লুকিয়ে রেখেছি।

এপিআই মকিং

ডেভেলপারকে আলাদা কোনো সার্ভিস সেট আপ করার প্রয়োজন হয় না, বরং এপিআই রেসপন্স মক করা সরাসরি উইচ্যাট ডেভটুলস-এরই একটি অংশ। একটি সহজে ব্যবহারযোগ্য ইন্টারফেসের মাধ্যমে ডেভেলপার এপিআই এন্ডপয়েন্ট এবং কাঙ্ক্ষিত মক রেসপন্সগুলো সেট আপ করতে পারেন।

কৃতজ্ঞতা স্বীকার

এই নিবন্ধটি পর্যালোচনা করেছেন জো মেডলি , কেসি বাস্কস , মিলিকা মিহাজলিয়া , অ্যালান কেন্ট এবং কিথ গু।