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 Protocol مبتنی بر WebSocket آغاز می‌شود.

در طرف Android، ارتباط توسط کتابخانه android-client تأمین می‌شود که از ADB برای تونل‌زنی ترافیک استفاده می‌کند. مشتری iOS از طریق idb (iOS Device Bridge) متصل می‌شود که توسعه داخلی Meta برای تعامل با دستگاه‌های iOS بدون Xcode است. در داخل برنامه، هر پلاگین در 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، باید FlipperClient را در کلاس Application مقداردهی اولیه کرد. مقداردهی در بیلد debug انجام می‌شود – در نسخه release کتابخانه نباید متصل شود تا اطلاعات اشکال‌زدایی برای کاربران فاش نشود.

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 برای سلسله‌مراتب View، SharedPreferences Plugin و Crash Reporter.

علاوه بر پلاگین‌های رسمی، اکوسیستمی از پلاگین‌های شخص ثالث توسعه یافته توسط جامعه وجود دارد. به عنوان مثال، MMKV Plugin برای اشکال‌زدایی ذخیره‌ساز Tencent MMKV، Redux Debugger برای React Native، LeakCanary Plugin برای تشخیص نشت حافظه. پلاگین‌ها از طریق Maven Central و CocoaPods توزیع می‌شوند و مانند وابستگی‌های معمولی متصل می‌شوند.

مزیت مهم Flipper امکان نوشتن پلاگین‌های سفارشی است. یک پلاگین از دو بخش تشکیل شده است: بخش مشتری (به Kotlin یا Swift) که در برنامه موبایل ثبت می‌شود و بخش دسکتاپ (به TypeScript یا JavaScript) که یک پنل UI به رابط اضافه می‌کند. 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، روش، کد وضعیت یا نوع محتوا فیلتر کند. می‌توان هر درخواستی را از رابط به اجبار تکرار کرد – این برای آزمایش endpointها بدون نوشتن یک درخواست 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 از طریق رابط runtime به UserDefaults دسترسی پیدا می‌کند.

Layout Inspector و لاگ‌گیری

Layout Inspector از Flipper یک نمایش بصری از سلسله‌مراتب View در 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 در تابع main برنامه دارد. پلاگین‌های Flutter در حال حاضر از نظر عملکرد از پلاگین‌های بومی عقب‌تر هستند، اما سناریوهای اصلی اشکال‌زدایی را پوشش می‌دهند.

عملکرد در هنگام اشکال‌زدایی

Flipper منابع دستگاه و دسکتاپ را متناسب با تعداد پلاگین‌های فعال مصرف می‌کند. هنگام اتصال همزمان همه پلاگین‌ها در شبیه‌ساز Android، به گفته اندازه‌گیری‌های Meta (2024) کاهش عملکرد 5–10% مشاهده می‌شود. توصیه می‌شود فقط پلاگین‌های ضروری را متصل کرده و پلاگین‌های غیرضروری را از طریق رابط برنامه دسکتاپ غیرفعال کنید.