Flipper: ما هو، الميزات والتطبيق

ما هو Flipper؟

Flipper هي منصة مفتوحة المصدر لتصحيح أخطاء التطبيقات تم إنشاؤها بواسطة Facebook (Meta) في عام 2018. كان المشروع يُسمى في الأصل 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، وبعد ذلك يبدأ تبادل الرسائل ثنائي الاتجاه باستخدام بروتوكول Flipper القائم على WebSocket.

على جانب Android، يتم الاتصال بواسطة مكتبة android-client التي تستخدم ADB لنقل حركة المرور. يتصل عميل iOS عبر idb (iOS Device Bridge) وهو تطوير خاص من Meta للتفاعل مع أجهزة iOS بدون Xcode. داخل التطبيق، يتم تسجيل كل إضافة في FlipperClient وتحصل على قناة اتصال خاصة بها مع نظيرها على سطح المكتب.

تعمل عملية نقل البيانات على النحو التالي: ترسل الإضافة على الجهاز حدثًا عبر FlipperClient، يقوم العميل بتسلسله إلى JSON وينقله عبر WebSocket إلى سطح المكتب. يقوم تطبيق سطح المكتب بإلغاء تسلسل الرسالة ويرسلها إلى الإضافة المقابلة في الواجهة. وفقًا لمدونة Meta التقنية (2024)، فإن زمن انتقال الرسالة أقل من 15 مللي ثانية عبر اتصال USB.

كيفية تثبيت وتكوين 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، تحتاج إلى تهيئة FlipperClient في فئة Application. تتم التهيئة في إصدار التصحيح — يجب عدم توصيل المكتبة في إصدار الإصدار لتجنب كشف معلومات التصحيح للمستخدمين.

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، هل تم تمكين تصحيح USB على Android، أو هل جسر idb قيد التشغيل لنظام iOS. يتم عرض كل جهاز مع اسم الطراز وإصدار نظام التشغيل.

إضافات Flipper لنظامي Android و iOS

إضافات Flipper هي امتدادات معيارية تضيف لوحات إلى واجهة سطح المكتب لمهام محددة. تحتفظ Meta بإضافات رسمية لأشهر المكتبات: Network Plugin لـ OkHttp و URLSession و Database Plugin لـ SQLite و Realm و Layout Inspector لتسلسل العرض و SharedPreferences Plugin و Crash Reporter.

بالإضافة إلى الإضافات الرسمية، يوجد نظام بيئي من إضافات الطرف الثالث التي طورها المجتمع. على سبيل المثال، MMKV Plugin لتصحيح أخطاء تخزين Tencent MMKV و Redux Debugger لـ React Native و LeakCanary Plugin لاكتشاف تسرب الذاكرة. يتم توزيع الإضافات عبر Maven Central و CocoaPods ويتم توصيلها كتبعيات عادية.

ميزة مهمة لـ Flipper هي إمكانية كتابة إضافات مخصصة. تتكون الإضافة من جزئين: جزء العميل (بلغة Kotlin أو Swift) الذي يتم تسجيله في التطبيق، وجزء سطح المكتب (بلغة TypeScript أو JavaScript) الذي يضيف لوحة واجهة مستخدم إلى الواجهة. توفر Meta API لإنشاء إضافات مخصصة مع دعم WebSocket ورسائل JSON.

الإضافات الرئيسية لنظام Android

تصحيح أخطاء الشبكة عبر Flipper

Network Plugin هو أحد أكثر إضافات Flipper شيوعًا. يعترض جميع طلبات HTTP/HTTPS التي تمر عبر OkHttp على Android أو URLSession على iOS ويعرضها في واجهة سطح المكتب في الوقت الفعلي. لكل طلب تتوفر: URL والطريقة ورمز الحالة ورؤوس الطلب والاستجابة ومحتوى الطلب والاستجابة ووقت التنفيذ والحجم.

لتوصيل Network Plugin على Android، ما عليك سوى إضافة تبعية 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 يعمل بالمثل: يعرض جميع المفاتيح والقيم المخزنة في SharedPreferences على Android. يتم التحرير فورًا — التغييرات تظهر فورًا في التطبيق. ومع ذلك، هناك قيد مهم: بعد إعادة تشغيل التطبيق، يعيد Flipper الاتصال ويتم الحفاظ على جميع التغييرات التي تم إجراؤها عبر الإضافة لأنها تُطبق مباشرة على ملف SharedPreferences.

لنظام iOS، المكافئ هو NSUserDefaults Plugin. يعمل مع UserDefaults ويعرض جميع أزواج المفتاح-القيمة المحفوظة. تدعم الإضافة تحرير السلاسل والأرقام والتواريخ والمصفوفات. يتم تطبيق التغييرات فورًا حيث يصل Flipper إلى UserDefaults عبر واجهة وقت التشغيل.

Layout Inspector والتسجيل

Layout Inspector من Flipper يوفر تمثيلًا مرئيًا لتسلسل العرض على Android. يرى المطور شجرة المكونات وسماتها (العرض والارتفاع والحشوة والخلفية والنص) ويمكنه تحديد أي عنصر على شاشة الجهاز بشكل تفاعلي. هذا بديل لـ Layout Inspector المدمج في Android Studio، ولكن مع فرق مهم — يظهر Flipper التسلسل في الوقت الفعلي دون إيقاف التطبيق.

للتسجيل، يُستخدم Logs Plugin. تظهر جميع السجلات من Logcat في واجهة سطح المكتب مع تصفية حسب المستوى (Debug و Info و Warn و Error) والوسم. على عكس Android Studio Logcat، لا تزدحم واجهة Flipper الشاشة — يتم تجميع السجلات حسب الوسم وإبرازها حسب المستوى. يتم دعم البحث وتصدير السجلات إلى JSON.

ميزة مفيدة أخرى هي Console Plugin الذي يعرض console.log من كود JavaScript في مكونات React Native أو WebView. هذا يبسط تصحيح أخطاء التطبيقات الهجينة: يرى المطور كلاً من السجلات الأصلية وسجلات JS في واجهة واحدة. تدعم الإضافة التصفية حسب المصدر (Native أو JS) ومستوى التسجيل.

تكوين إضافات Flutter

لتطبيقات Flutter، يتم توصيل Flipper عبر الحزمة flipper من pub.dev. توفر إضافة flutter_flipper التكامل مع طبقة الشبكة Dio وتخزين SharedPreferences والتنقل في Flutter. يتطلب التثبيت إضافة التبعية إلى pubspec.yaml وتهيئة FlipperClient في الدالة الرئيسية للتطبيق. إضافات Flutter لا تزال أدنى من الإضافات الأصلية من حيث الوظائف، لكنها تغطي سيناريوهات التصحيح الرئيسية.

الأداء أثناء التصحيح

يستهلك Flipper موارد الجهاز وسطح المكتب بشكل يتناسب مع عدد الإضافات النشطة. عند توصيل جميع الإضافات في وقت واحد على محاكي Android، يُلاحظ انخفاض في الأداء بنسبة 5–10% وفقًا لقياسات Meta (2024). يُوصى بتوصيل الإضافات الضرورية فقط وتعطيل غير المستخدمة عبر واجهة تطبيق سطح المكتب.