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 Sync کے بعد، آپ کو 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% کارکردگی میں کمی دیکھی جاتی ہے۔ صرف ضروری پلگ ان کو جوڑنے اور ڈیسک ٹاپ ایپلیکیشن انٹرفیس کے ذریعے غیر استعمال شدہ کو غیر فعال کرنے کی سفارش کی جاتی ہے۔