Flipper: এটি কী, বৈশিষ্ট্য এবং প্রয়োগ

Flipper কী?

Flipper হল 2018 সালে Facebook (Meta) দ্বারা তৈরি একটি ওপেন-সোর্স মোবাইল অ্যাপ ডিবাগিং প্ল্যাটফর্ম। প্রকল্পটি মূলত Sonar নামে পরিচিত ছিল এবং কোম্পানির অভ্যন্তরীণ ব্যবহারের জন্য ছিল, কিন্তু 2019 সালে Meta MIT লাইসেন্সের অধীনে সোর্স কোড প্রকাশ করে। প্ল্যাটফর্মটি দুটি উপাদান নিয়ে গঠিত: Electron-এ তৈরি একটি ডেস্কটপ অ্যাপ এবং একটি SDK যা Android এবং iOS প্রকল্পে একীভূত হয়।

Flipper এবং অন্যান্য ডিবাগিং টুলের মধ্যে প্রধান পার্থক্য হল এর মডুলার আর্কিটেকচার। একটি মনোলিথিক ডিবাগারের পরিবর্তে, ডেভেলপার শুধুমাত্র সেই প্লাগইনগুলি সংযোগ করে যা প্রকল্পে আসলে প্রয়োজন। এটি অ্যাপের লোড কমায় এবং ইন্টারফেস সহজ করে: ডিবাগার ঠিক সেই তথ্য দেখায় যা ডেভেলপার বেছে নিয়েছেন। Android Studio বিল্ট-ইন প্রোফাইলার প্রদান করে, কিন্তু সেগুলি শুধুমাত্র ADB-এর মাধ্যমে কাজ করে এবং Flipper-এর মতো কাস্টমাইজেশনের স্তর প্রদান করে না।

Meta-এর মতে, Flipper কোম্পানির ভিতরে 2000টিরও বেশি প্রকল্পে ব্যবহৃত হয় এবং Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite এবং অন্যান্য জনপ্রিয় লাইব্রেরির সাথে ইন্টিগ্রেশন সমর্থন করে। প্ল্যাটফর্মটি Android API 16+ এবং iOS 11+ সঙ্গে সামঞ্জস্যপূর্ণ।

Flipper আর্কিটেকচার: ডেস্কটপ-ডিভাইস যোগাযোগ কীভাবে কাজ করে

Flipper আর্কিটেকচার ক্লায়েন্ট-সার্ভার মডেলের উপর নির্মিত। ডেস্কটপ অ্যাপ সার্ভার হিসেবে কাজ করে এবং মোবাইল ডিভাইস ক্লায়েন্ট হিসেবে। সংযোগ USB বা TCP/IP-এর মাধ্যমে প্রতিষ্ঠিত হয়, তারপরে WebSocket-ভিত্তিক Flipper প্রোটোকল ব্যবহার করে দ্বিমুখী বার্তা বিনিময় শুরু হয়।

Android পাশে, যোগাযোগ android-client লাইব্রেরি দ্বারা সরবরাহ করা হয় যা ট্রাফিক টানেলিংয়ের জন্য ADB ব্যবহার করে। iOS ক্লায়েন্ট idb (iOS Device Bridge) এর মাধ্যমে সংযোগ করে — Xcode ছাড়া iOS ডিভাইসের সাথে যোগাযোগের জন্য Meta-এর নিজস্ব উন্নয়ন। অ্যাপের ভিতরে, প্রতিটি প্লাগইন FlipperClient-এ নিবন্ধিত হয় এবং ডেস্কটপ সমতুল্যের সাথে নিজস্ব যোগাযোগ চ্যানেল পায়।

ডেটা স্থানান্তর প্রক্রিয়া নিম্নরূপ কাজ করে: ডিভাইসের প্লাগইন FlipperClient-এর মাধ্যমে একটি ইভেন্ট পাঠায়, ক্লায়েন্ট এটিকে JSON-এ সিরিয়ালাইজ করে এবং WebSocket-এর মাধ্যমে ডেস্কটপে প্রেরণ করে। ডেস্কটপ অ্যাপ বার্তাটি ডিসিরিয়ালাইজ করে এবং ইন্টারফেসে সংশ্লিষ্ট প্লাগইনে পাঠায়। Meta-এর টেকনিক্যাল ব্লগ (2024) অনুসারে, USB সংযোগে বার্তা প্রেরণ বিলম্বিতা 15 মিলিসেকেন্ডের কম।

Flipper কীভাবে ইনস্টল এবং কনফিগার করবেন

Flipper ইনস্টলেশন তিনটি ধাপ নিয়ে গঠিত: ডেস্কটপ অ্যাপ ইনস্টল করা, প্রকল্পে SDK যোগ করা এবং ডিবাগার চালু করা। ডেস্কটপ অ্যাপ অফিসিয়াল ওয়েবসাইট fbflipper.com থেকে ডাউনলোড করা হয় — Windows, macOS এবং Linux-এর জন্য dmg, exe এবং AppImage ফরম্যাটে বিল্ড উপলব্ধ। ইনস্টলেশনের পরে, অ্যাপ স্বয়ংক্রিয়ভাবে ADB-এর মাধ্যমে সংযুক্ত ডিভাইস সনাক্ত করে।

Android প্রকল্পের জন্য, Flipper build.gradle-এ নির্ভরতার মাধ্যমে সংযুক্ত হয়। আপনাকে Flipper সংস্করণ নির্দিষ্ট করতে হবে যা ডেস্কটপ ক্লায়েন্ট সংস্করণের সাথে মেলে এবং ব্যবহৃত লাইব্রেরির জন্য প্লাগইন যোগ করতে হবে। নিচে Kotlin প্রকল্পের জন্য একটি কনফিগারেশন উদাহরণ দেওয়া হল:

// build.gradle (অ্যাপ)
val flipperVersion = "0.265.0"

dependencies {
    debugImplementation("com.facebook.flipper:flipper:$flipperVersion")
    debugImplementation(
        "com.facebook.flipper:flipper-network-plugin:$flipperVersion"
    )
    debugImplementation(
        "com.facebook.flipper:flipper-litho-plugin:$flipperVersion"
    )
}

Gradle সিঙ্কের পরে, আপনাকে Application ক্লাসে FlipperClient ইনিশিয়ালাইজ করতে হবে। ইনিশিয়ালাইজেশন ডিবাগ বিল্ডে করা হয় — রিলিজ ভার্সনে লাইব্রেরি সংযুক্ত করা উচিত নয় যাতে ব্যবহারকারীদের ডিবাগিং তথ্য প্রকাশ না হয়।

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        if (BuildConfig.DEBUG) {
            SoLoader.init(this, false)
            AndroidFlipperClient
                .getInstance(this)
                .addPlugin(NetworkFlipperPlugin())
                .start()
        }
    }
}

iOS-এর জন্য, Flipper CocoaPods-এর মাধ্যমে যোগ করা হয়। Podfile-এ Flipper এবং FlipperKit ফ্রেমওয়ার্কের পাশাপাশি যোগাযোগ চ্যানেল সংগঠিত করার জন্য Flipper-Folly এবং Flipper-PeerTalk উল্লেখ করা হয়। pod install এবং সিমুলেটর বা ডিভাইসে অ্যাপ চালানোর পরে, ডেস্কটপ ক্লায়েন্ট স্বয়ংক্রিয়ভাবে একটি নতুন সেশন আবিষ্কার করবে।

সংযোগ পরীক্ষা

অ্যাপ চালু করার পরে, ডেস্কটপ Flipper খুলুন — বাম প্যানেলে সংযুক্ত ডিভাইসের একটি তালিকা প্রদর্শিত হবে। যদি ডিভাইসটি না দেখায়, তবে পরীক্ষা করুন: ADB ইনস্টল করা আছে কিনা, Android-এ USB ডিবাগিং সক্ষম কিনা বা iOS-এর জন্য idb ব্রিজ চলছে কিনা। প্রতিটি ডিভাইস মডেলের নাম এবং OS সংস্করণ সহ প্রদর্শিত হয়।

Android এবং iOS-এর জন্য Flipper প্লাগইন

Flipper প্লাগইন হল মডুলার এক্সটেনশন যা নির্দিষ্ট কাজের জন্য ডেস্কটপ ইন্টারফেসে প্যানেল যোগ করে। Meta সবচেয়ে জনপ্রিয় লাইব্রেরির জন্য অফিসিয়াল প্লাগইন রক্ষণাবেক্ষণ করে: OkHttp এবং URLSession-এর জন্য Network Plugin, SQLite এবং Realm-এর জন্য Database Plugin, View হায়ারার্কির জন্য Layout Inspector, SharedPreferences Plugin এবং Crash Reporter।

অফিসিয়াল ছাড়াও, সম্প্রদায় দ্বারা বিকশিত থার্ড-পার্টি প্লাগইন-এর একটি ইকোসিস্টেম রয়েছে। উদাহরণস্বরূপ, Tencent MMKV স্টোরেজ ডিবাগ করার জন্য MMKV Plugin, React Native-এর জন্য Redux Debugger, মেমরি লিক সনাক্ত করার জন্য LeakCanary Plugin। প্লাগইনগুলি Maven Central এবং CocoaPods-এর মাধ্যমে বিতরণ করা হয় এবং সাধারণ নির্ভরতা হিসাবে সংযুক্ত হয়।

Flipper-এর একটি গুরুত্বপূর্ণ সুবিধা হল কাস্টম প্লাগইন লেখার ক্ষমতা। একটি প্লাগইন দুটি অংশ নিয়ে গঠিত: ক্লায়েন্ট-সাইড অংশ (Kotlin বা Swift-এ) যা মোবাইল অ্যাপে নিবন্ধিত হয় এবং ডেস্কটপ-সাইড অংশ (TypeScript বা JavaScript-এ) যা ইন্টারফেসে UI প্যানেল যোগ করে। Meta WebSocket এবং JSON বার্তার সমর্থন সহ কাস্টম প্লাগইন তৈরি করার জন্য API প্রদান করে।

Android-এর জন্য প্রধান প্লাগইন

Flipper-এর মাধ্যমে নেটওয়ার্ক ডিবাগিং

Network Plugin হল সবচেয়ে জনপ্রিয় Flipper প্লাগইনগুলির একটি। এটি Android-এ OkHttp বা iOS-এ URLSession-এর মাধ্যমে যাওয়া সমস্ত HTTP/HTTPS রিকোয়েস্ট ইন্টারসেপ্ট করে এবং ডেস্কটপ ইন্টারফেসে রিয়েল টাইমে প্রদর্শন করে। প্রতিটি রিকোয়েস্টের জন্য উপলব্ধ: URL, পদ্ধতি, স্ট্যাটাস কোড, রিকোয়েস্ট এবং রেসপন্স হেডার, রিকোয়েস্ট এবং রেসপন্স বডি, এক্সিকিউশন সময় এবং আকার।

Android-এ Network Plugin সংযোগ করতে, শুধু flipper-network-plugin নির্ভরতা যোগ করুন এবং OkHttpClient NetworkFlipperPlugin কনস্ট্রাক্টরে পাস করুন। Flipper স্বয়ংক্রিয়ভাবে OkHttpClient-কে একটি ইন্টারসেপ্টরে মোড়ানো করে। iOS-এ, URLSession ইন্টিগ্রেশন প্লাগইনের FlipperNetworkInterceptor-এর মাধ্যমে কনফিগারেশন প্রয়োজন।

val networkPlugin = NetworkFlipperPlugin()
val client = OkHttpClient.Builder()
    .addNetworkInterceptor(networkPlugin)
    .build()

Network Plugin-এর একটি মূল বৈশিষ্ট্য হল রিকোয়েস্ট অনুসন্ধান এবং ফিল্টারিংয়ের সমর্থন। ডেভেলপার URL, পদ্ধতি, স্ট্যাটাস কোড বা কন্টেন্ট টাইপ অনুসারে রিকোয়েস্ট ফিল্টার করতে পারে। ইন্টারফেস থেকে যে কোনও রিকোয়েস্ট জোর করে পুনরায় পাঠানো যেতে পারে — এটি আলাদা curl রিকোয়েস্ট না লিখে এন্ডপয়েন্ট পরীক্ষার জন্য দরকারী। Meta ডেভেলপার জরিপ (2024) অনুসারে, Network Plugin 78% প্রকল্পে ব্যবহৃত হয় যেখানে Flipper ইনস্টল করা আছে।

ডাটাবেস এবং SharedPreferences ডিবাগিং

Database Plugin ডেস্কটপ ক্লায়েন্ট থেকে সরাসরি SQLite এবং Realm ডাটাবেসে অ্যাক্সেস প্রদান করে। ডেভেলপার সমস্ত টেবিল, তাদের স্কিমা এবং বিষয়বস্তু সারণী দৃশ্যে দেখে। কোড না লিখে ইচ্ছামত SQL কোয়েরি এক্সিকিউট করা যায় এবং রেকর্ড যোগ, সম্পাদনা এবং মুছে ফেলা যায়। এটি adb shell ব্যবহারের তুলনায় অ্যাপ অবস্থার ডিবাগিং উল্লেখযোগ্যভাবে ত্বরান্বিত করে।

SharedPreferences Plugin একইভাবে কাজ করে: এটি Android-এ SharedPreferences-এ সংরক্ষিত সমস্ত কী এবং মান প্রদর্শন করে। সম্পাদনা তাত্ক্ষণিকভাবে ঘটে — পরিবর্তনগুলি অবিলম্বে অ্যাপে দৃশ্যমান হয়। তবে, একটি গুরুত্বপূর্ণ সীমাবদ্ধতা আছে: অ্যাপ পুনরায় চালু করার পরে, Flipper পুনরায় সংযোগ করে এবং প্লাগইনের মাধ্যমে করা সমস্ত পরিবর্তন সংরক্ষিত হয় কারণ সেগুলি সরাসরি SharedPreferences ফাইলে প্রয়োগ করা হয়।

iOS-এর জন্য, সমতুল্য হল NSUserDefaults Plugin। এটি UserDefaults-এর সাথে কাজ করে এবং সমস্ত সংরক্ষিত কী-মান জোড়া দেখায়। প্লাগইন স্ট্রিং, সংখ্যা, তারিখ এবং অ্যারে সম্পাদনা সমর্থন করে। পরিবর্তনগুলি তাত্ক্ষণিকভাবে প্রয়োগ করা হয় কারণ Flipper রানটাইম ইন্টারফেসের মাধ্যমে UserDefaults অ্যাক্সেস করে।

Layout Inspector এবং লগিং

Flipper Layout Inspector Android-এ View হায়ারার্কির একটি ভিজুয়াল উপস্থাপনা প্রদান করে। ডেভেলপার উপাদান ট্রি, তাদের বৈশিষ্ট্য (প্রস্থ, উচ্চতা, প্যাডিং, ব্যাকগ্রাউন্ড, টেক্সট) দেখে এবং ডিভাইস স্ক্রিনে যে কোনও উপাদান ইন্টারঅ্যাকটিভভাবে নির্বাচন করতে পারে। এটি Android Studio-তে বিল্ট-ইন Layout Inspector-এর একটি বিকল্প, কিন্তু একটি গুরুত্বপূর্ণ পার্থক্যের সাথে — Flipper অ্যাপ বন্ধ না করে রিয়েল টাইমে হায়ারার্কি দেখায়।

লগিংয়ের জন্য, Logs Plugin ব্যবহার করা হয়। Logcat থেকে সমস্ত লগ স্তর (Debug, Info, Warn, Error) এবং ট্যাগ অনুসারে ফিল্টারিং সহ ডেস্কটপ ইন্টারফেসে আসে। Android Studio Logcat-এর বিপরীতে, Flipper ইন্টারফেস স্ক্রীনকে বিশৃঙ্খল করে না — লগগুলি ট্যাগ অনুসারে গ্রুপ করা হয় এবং স্তর অনুসারে হাইলাইট করা হয়। JSON-এ লগ অনুসন্ধান এবং রপ্তানি সমর্থিত।

আরেকটি দরকারী বৈশিষ্ট্য হল Console Plugin যা React Native বা WebView উপাদানে JavaScript কোড থেকে console.log প্রদর্শন করে। এটি হাইব্রিড অ্যাপ ডিবাগিং সহজ করে: ডেভেলপার একটি ইন্টারফেসে নেটিভ লগ এবং JS লগ উভয়ই দেখে। প্লাগইন উৎস (Native বা JS) এবং লগিং স্তর অনুসারে ফিল্টারিং সমর্থন করে।

Flutter প্লাগইন কনফিগার করা

Flutter অ্যাপের জন্য, Flipper pub.dev থেকে flipper প্যাকেজের মাধ্যমে সংযুক্ত হয়। flutter_flipper প্লাগইন Dio নেটওয়ার্কিং লেয়ার, SharedPreferences স্টোরেজ এবং Flutter নেভিগেশনের সাথে ইন্টিগ্রেশন প্রদান করে। ইনস্টলেশনের জন্য pubspec.yaml-এ নির্ভরতা যোগ করা এবং অ্যাপের main ফাংশনে FlipperClient ইনিশিয়ালাইজ করা প্রয়োজন। Flutter প্লাগইনগুলি কার্যকারিতায় নেটিভ প্লাগইনগুলির তুলনায় এখনও কম, তবে তারা প্রধান ডিবাগিং পরিস্থিতি কভার করে।

ডিবাগিংয়ের সময় কর্মক্ষমতা

Flipper সক্রিয় প্লাগইনের সংখ্যার অনুপাতে ডিভাইস এবং ডেস্কটপ সংস্থান ব্যবহার করে। যখন সমস্ত প্লাগইন একসাথে Android এমুলেটরে সংযুক্ত থাকে, Meta-এর পরিমাপ (2024) অনুসারে 5–10% কর্মক্ষমতা হ্রাস দেখা যায়। শুধুমাত্র প্রয়োজনীয় প্লাগইন সংযোগ এবং ডেস্কটপ অ্যাপ ইন্টারফেসের মাধ্যমে অব্যবহৃত প্লাগইন নিষ্ক্রিয় করার পরামর্শ দেওয়া হয়।