Flipper – bu nədir, imkanları və tətbiqi

Flipper nədir?

Flipper 2018-ci ildə Facebook (Meta) tərəfindən yaradılmış mobil tətbiqlərin sazlanması üçün açıq platformadır. Əvvəlcə layihə Sonar adlanırdı və şirkətin daxili ehtiyacları üçün nəzərdə tutulmuşdu, lakin 2019-cu ildə Meta MIT lisenziyası altında mənbə kodunu dərc etdi. Platforma iki komponentdən ibarətdir: Electron-da desktop tətbiqi və Android və iOS layihələrinə inteqrasiya olunan SDK.

Flipper-in digər sazlama alətlərindən əsas fərqi modul arxitekturadır. Monolit sazlayıcı əvəzinə tərtibatçı yalnız layihədə həqiqətən lazım olan plaginləri birləşdirir. Bu, tətbiqə yükü azaldır və interfeysi sadələşdirir: sazlayıcı tərtibatçının seçdiyi məlumatları dəqiq göstərir. Android Studio daxili profilləşdiricilər təqdim edir, lakin onlar yalnız ADB vasitəsilə işləyir və Flipper qədər fərdiləşdirmə səviyyəsi vermir.

Meta-nın məlumatlarına görə, Flipper şirkət daxilində 2000-dən çox layihədə istifadə olunur və Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite və digər məşhur kitabxanalarla inteqrasiyanı dəstəkləyir. Platforma Android API 16+ və iOS 11+ ilə uyğundur.

Flipper arxitekturası: desktop – cihaz əlaqəsi necə işləyir

Flipper arxitekturası müştəri-server modeli üzərində qurulmuşdur. Desktop tətbiqi server rolunu oynayır, mobil cihazlar isə müştərilərdir. Əlaqə USB və ya TCP/IP vasitəsilə qurulur, bundan sonra WebSocket əsaslı Flipper Protokolu ilə ikitərəfli mesaj mübadiləsi başlayır.

Android tərəfində əlaqə trafiki tunelləşdirmək üçün ADB-dən istifadə edən android-client kitabxanası tərəfindən təmin edilir. iOS müştəri Xcode olmadan iOS cihazları ilə qarşılıqlı əlaqə üçün Meta-nın öz inkişafı olan idb (iOS Device Bridge) vasitəsilə qoşulur. Tətbiq daxilində hər bir plagin FlipperClient-də qeydiyyatdan keçir və desktop analoqu ilə öz rabitə kanalını alır.

Məlumat ötürmə prosesi belə görünür: cihazdakı plagin FlipperClient vasitəsilə hadisə göndərir, müştəri onu JSON-a seriyalaşdırır və WebSocket vasitəsilə desktopa ötürür. Desktop tətbiqi mesajı deseriyalaşdırır və interfeysdə müvafiq plaginə göndərir. Meta texniki bloquna (2024) görə, USB qoşulması zamanı mesaj ötürmə gecikməsi 15 millisaniyədən azdır.

Flipper-i necə quraşdırmaq və konfiqurasiya etmək

Flipper quraşdırılması üç addımdan ibarətdir: desktop tətbiqinin quraşdırılması, SDK-nın layihəyə əlavə edilməsi və sazlayıcının işə salınması. Desktop tətbiqi rəsmi fbflipper.com saytından endirilir – Windows, macOS və Linux üçün dmg, exe və AppImage formatlarında yığımlar mövcuddur. Quraşdırmadan sonra tətbiq ADB vasitəsilə qoşulmuş cihazları avtomatik aşkarlayır.

Android layihəsi üçün Flipper build.gradle-də asılılıqlar vasitəsilə qoşulur. Desktop müştəri versiyasına uyğun gələn Flipper versiyasını təyin etmək və istifadə olunan kitabxanalar üçün plaginlər əlavə etmək tələb olunur. Aşağıda Kotlin-də layihə üçün nümunə konfiqurasiya verilmişdir:

// build.gradle (tətbiq)
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 sinxronizasiyasından sonra Application sinfində FlipperClient-i işə salmaq lazımdır. İnisiallaşdırma debug yığımında aparılır – release versiyasında kitabxana istifadəçilərə sazlama məlumatlarını açıqlamamaq üçün qoşulmamalıdır.

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

iOS üçün Flipper CocoaPods vasitəsilə əlavə edilir. Podfile-də Flipper və FlipperKit freymvorkları, həmçinin rabitə kanalını təşkil etmək üçün Flipper-Folly və Flipper-PeerTalk göstərilir. Pod install və tətbiqin simulyatorda və ya cihazda işə salınmasından sonra desktop müştəri avtomatik olaraq yeni sessiyanı aşkarlayacaq.

Qoşulmanın yoxlanılması

Tətbiqi işə saldıqdan sonra desktop Flipper-i açın – sol paneldə qoşulmuş cihazların siyahısı görünəcək. Cihaz göstərilmirsə, yoxlayın: ADB quraşdırılıbmı, Android-də USB vasitəsilə sazlama aktivləşdirilmişdirmi, iOS üçün idb körpüsü işə salınıbmı. Hər bir cihaz model adı və əməliyyat sistemi versiyası ilə göstərilir.

Android və iOS üçün Flipper plaginləri

Flipper plaginləri – xüsusi tapşırıqlar üçün desktop interfeysinə panellər əlavə edən modul genişlənmələrdir. Meta ən məşhur kitabxanalar üçün rəsmi plaginləri dəstəkləyir: OkHttp və URLSession üçün Network Plugin, SQLite və Realm üçün Database Plugin, View iyerarxiyası üçün Layout Inspector, SharedPreferences Plugin və Crash Reporter.

Rəsmi plaginlərlə yanaşı, icma tərəfindən hazırlanmış üçüncü tərəf plaginlərinin ekosistemi mövcuddur. Məsələn, Tencent MMKV yaddaşının sazlanması üçün MMKV Plugin, React Native üçün Redux Debugger, yaddaş sızmalarının aşkarlanması üçün LeakCanary Plugin. Plaginlər Maven Central və CocoaPods vasitəsilə yayılır və adi asılılıqlar kimi qoşulur.

Flipper-in mühüm üstünlüyü öz plaginlərinizi yazmaq imkanıdır. Plagin iki hissədən ibarətdir: mobil tətbiqdə qeydiyyatdan keçən müştəri hissəsi (Kotlin və ya Swift-də) və interfeysə UI paneli əlavə edən desktop hissəsi (TypeScript və ya JavaScript-də). Meta WebSocket və JSON mesajlarını dəstəkləyən xüsusi plaginlər yaratmaq üçün API təqdim edir.

Android üçün əsas plaginlər

Flipper vasitəsilə şəbəkənin sazlanması

Network Plugin – Flipper-in ən çox tələb olunan plaginlərindən biridir. O, Android-də OkHttp və ya iOS-da URLSession vasitəsilə keçən bütün HTTP/HTTPS sorğularını ələ keçirir və onları real vaxtda desktop interfeysində göstərir. Hər sorğu üçün əlçatandır: URL, metod, status kodu, sorğu və cavab başlıqları, sorğu və cavab gövdəsi, icra müddəti və ölçüsü.

Android-də Network Plugin-i qoşmaq üçün flipper-network-plugin asılılığını əlavə etmək və OkHttpClient-i NetworkFlipperPlugin konstruktoruna ötürmək kifayətdir. Flipper avtomatik olaraq OkHttpClient-i interceptora bükür. iOS-da URLSession ilə inteqrasiya plagin FlipperNetworkInterceptor vasitəsilə konfiqurasiya tələb edir.

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

Network Plugin-in əsas xüsusiyyəti sorğuların axtarışı və filtrlənməsini dəstəkləməsidir. Tərtibatçı sorğuları URL, metod, status kodu və ya məzmun növünə görə filtrləyə bilər. İnterfeysdən istənilən sorğunu məcburi təkrar göndərmək olar – bu, ayrıca curl sorğusu yazmadan endpointləri sınamaq üçün faydalıdır. Meta tərtibatçı sorğusuna (2024) görə, Network Plugin Flipper quraşdırılmış layihələrin 78%-də istifadə olunur.

Verilənlər bazası və SharedPreferences sazlanması

Database Plugin birbaşa desktop müştərisindən SQLite və Realm verilənlər bazalarına giriş açır. Tərtibatçı bütün cədvəlləri, onların sxemini və məzmununu cədvəl şəklində görür. Kod yazmadan ixtiyari SQL sorğuları yerinə yetirmək, qeydlər əlavə etmək, redaktə etmək və silmək olar. Bu, adb shell istifadəsi ilə müqayisədə tətbiq vəziyyətlərinin sazlanmasını əhəmiyyətli dərəcədə sürətləndirir.

SharedPreferences Plugin oxşar işləyir: Android-də SharedPreferences-də saxlanılan bütün açarları və dəyərləri göstərir. Redaktə dərhal baş verir – dəyişikliklər tətbiqdə dərhal görünür. Bununla belə, mühüm məhdudiyyət var: tətbiq yenidən başladıldıqdan sonra Flipper yenidən qoşulur və plagin vasitəsilə edilən bütün dəyişikliklər saxlanılır, çünki onlar birbaşa SharedPreferences faylına tətbiq olunur.

iOS üçün analoq NSUserDefaults Plugin-dir. UserDefaults ilə işləyir və bütün saxlanılan açar-dəyər cütlərini göstərir. Plagin sətirlərin, rəqəmlərin, tarixlərin və massivlərin redaktəsini dəstəkləyir. Dəyişikliklər dərhal tətbiq olunur, çünki Flipper UserDefaults-a runtime interfeysi vasitəsilə müraciət edir.

Layout Inspector və loglama

Layout Inspector Flipper-dən Android-də View iyerarxiyasının vizual təsvirini təqdim edir. Tərtibatçı komponentlər ağacını, onların atributlarını (en, hündürlük, boşluqlar, fon, mətn) görür və cihaz ekranında istənilən elementi interaktiv seçə bilər. Bu, Android Studio-da daxili Layout Inspector üçün alternativdir, lakin mühüm fərqlə – Flipper iyerarxiyanı tətbiqi dayandırmadan real vaxtda göstərir.

Loglama üçün Logs Plugin istifadə olunur. Logcat-dan bütün loglar səviyyə (Debug, Info, Warn, Error) və teq üzrə filtrləmə ilə desktop interfeysinə daxil olur. Android Studio Logcat-dan fərqli olaraq, Flipper interfeysi ekranı yükləmir – loglar teq üzrə qruplaşdırılır və səviyyəyə görə vurğulanır. Axtarış və logların JSON-a ixracı dəstəklənir.

Digər faydalı imkan – React Native və ya WebView komponentlərində JavaScript kodundan console.log göstərən Console Plugin-dir. Bu, hibrid tətbiqlərin sazlanmasını asanlaşdırır: tərtibatçı həm native, həm də JS loglarını bir interfeysdə görür. Plagin mənbəyə (Native və ya JS) və loglama səviyyəsinə görə filtrləməni dəstəkləyir.

Flutter plaginlərinin konfiqurasiyası

Flutter tətbiqləri üçün Flipper pub.dev-dən flipper paketi vasitəsilə qoşulur. flutter_flipper plagin Dio şəbəkə qatı, SharedPreferences yaddaşı və Flutter naviqasiyası ilə inteqrasiya təqdim edir. Quraşdırma pubspec.yaml-da asılılıq əlavə etməyi və tətbiqin main funksiyasında FlipperClient-in inisiallaşdırılmasını tələb edir. Flutter plaginləri hazırda funksionallıq baxımından native plaginlərdən geri qalır, lakin əsas sazlama ssenarilərini əhatə edir.

Sazlama zamanı performans

Flipper aktiv plaginlərin sayına mütənasib olaraq cihaz və desktop resurslarını istehlak edir. Bütün plaginlər eyni anda qoşulduqda Android emulyatorunda Meta ölçmələrinə (2024) görə performansın 5–10% azalması müşahidə olunur. Yalnız zəruri plaginləri qoşmaq və istifadə olunmayanları desktop tətbiqi interfeysi vasitəsilə söndürmək tövsiyə olunur.