愉悅的 App 開發體驗——使用 Flipper
寫在前面
本篇文章將探討在App開發過程中常見的一些狀況，並且介紹如何透過Flipper這個工具來幫助我們更有效率的解決這些問題，以達到降低痛苦指數的目的（甚至是昏迷指數），還有獲得比較開心的App開發體驗🥰
App開發中的一些情況
身為一個App工程師，在開發/維護App的時候，我們常常會遇到以下的情境：
- 我剛加入了一個新團隊/我剛加入了一個open source專案，我想快速掌握整個App的架構。
- 我必須火速修復一個bug並且發布hotfix，但之前相關的feature並不是我寫的，但我需要快點定位到問題發生的地方，並進行修復。
相關情況的處理方式
一般情況下，我們都如何處理這些問題呢？
我剛加入了一個新團隊/我剛加入了一個open source專案，我想快速掌握整個App的架構
- 打開IDE，將App install到手機裡。
- 搭配操作App，一邊瀏覽程式碼，透過程式碼裡面變數的宣告，大致上了解每個畫面（Activity/Fragment）裡面的主要元件有哪些（例如ViewPager、 RecyclerView），如果遇到特別的頁面設計或是custom view，可能需要修改一下數值，來確認目前修改的檔案就是畫面上的某個元件。
- 如果一個畫面有複雜的階層，又有許多的View是動態add/remove的，通常會（ㄓˊㄐㄧㄝㄏㄨㄌㄩㄝˋ）等有時間的時候再來慢慢研究。
我必須火速修復一個bug並且發布hotfix，但之前相關的feature並不是我寫的，我需要快點定位到問題發生的地方，並進行修復
- 打開IDE，將App install到手機裡。
- 操作App，重現那個bug。
- 一邊瀏覽程式碼，一邊推測要如何從已知的其它地方一路打開有bug的這個頁面。
- 開始下log或中斷點，祈禱自己趕快找到錯誤發生的地方（PDD，Pray-Driven-Development）。如果程式碼寫得很亂，或很複雜，加上不是自己寫的，通常會一邊罵髒話。
- 經歷一番改code、重build、測試，確定bug重現的root cause。
- 開始修復！
相關情況處理方式點評
以上列出來的處理方式，並不是不好的處理方式，在一般情況下，已經算是正常的處理方式了。
只是在處理相關問題的時候，通常會比較難在很短的時間內，用絕對的信心指出問題出在哪個地方；一般會經歷多次測試後，才會確認我們正在修改的檔案，就是手機上的那個畫面。
進階處理方式與其缺陷
使用Android Studio的Layout Inspector
對於查看畫面階層的結構，Android Studio已經提供了Layout Inspector來協助我們，除了基本的階層查看功能以外，它也提供了滿炫砲的3D檢視。但可能是因為這個功能還在初期開發的階段，使用起來拖慢許多IDE的效能，而瀏覽結構複雜的畫面時，有時也會發生需要非常久才能把畫面render出來的情形，有時甚至會卡死整個render不出來。
Network API相關問題debug
跟Network API相關的bug，如果App的連線工具是使用OkHttp的話，OkHttp也有提供logging-interceptor來印出HTTP request/response的log，讓我們能透過IDE的logcat來查看是不是後端給APP的response中有數值給錯了，所以才讓App的功能產生問題。只是因為IDE的logcat有行數限制，而且如果log的內容太長，也會有被截斷的問題，加上還會有其他的log一直分散你的注意力，不做其它調整的話，logging-interceptor在debug上的加分效果還是有限的。
開始使用Flipper
Flipper簡介
揪竟～Flipper到底是什麼呢？
引述Flipper官方README的內容：
Flipper (formerly Sonar) is a platform for debugging mobile apps on iOS and Android. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.
Flipper是一個for Android與iOS使用的App debug工具，它是一個桌面版的應用程式，可以幫助你視覺化、檢視以及讓你操控你的App。
跟在ptt要發言要附上人權指數一樣，先放一下Flipper的人權指數：
Flipper是一個由Facebook公開的open source project，截至今天2/27日為止，已經累積了8000多個stars，也因為它是個open source project，未來還會繼續的進步下去！
如何使用Flipper
- 下載Flipper應用程式。Flipper目前Mac/Linux/Windows系統均有提供應用程式可以下載。
- 將SDK安裝到App。
- 設定要啟用的Plugins。Flipper的官方文件寫得非常詳細，基本上看完文件後已經可以很清楚的了解Flipper可以提供給我們哪些功能，Flipper將每個功能都拆成獨立的Plugin，讓我們能自由選擇要啟用哪個功能。
關於Flipper目前開放的功能（有其他功能想要的話可以去開issue許願），目前已知比較常用的Plugins有：
還有其他如Deeplinks、Database、Fresco、LeakCanary之類的Plugin，有興趣都可以裝起來玩玩。
接下來將介紹如何將Flipper與常用的Plugins應用在App開發上。
Flipper Plugins在App開發上的應用
以下將以維基百科官方Android App為例，示範Flipper如何帶領團隊新人認識整個App。
事前準備
- 下載Flipper應用程式，安裝好後打開。
- 將SDK安裝到App。
- 設定要啟用的Plugins，這次我們會用到的Plugins有Layout Inspector、Network與Shared Preferences。
- 把App安裝到手機上，回到電腦桌面上Flipper的畫面。
如果安裝上沒有問題，應該會看到以下的畫面。畫面左邊的Layout/Network/Shared Preferences Viewer分別對應到我們替App所設定的Plugins。
Layout Inspector Plugin
緊接著我們就朝下一步前進吧！InitialOnboardingActivity是導覽頁，總共有4個頁面，讓我們快轉到最後一頁吧！
我們可以在Flipper裡面一層一層地將畫面的結構展開，這時也可以順便了解這個畫面大概是用了什麼元件構成的（以InitialOnboardingActivity為例，就是用了Fragment還有ViewPager2），而當我們的游標選取了某個元件，手機上也會有顏色區域，將我們選到的元件Highlight出來：
Flipper還有live preview的功能。假設我想要把最後一頁的「入門」按鈕文案換掉，畫面會長成怎樣呢？在Flipper上，甚至可以讓你在不用重新build App的狀態下，讓你直接在手機上看到你設定的變動。
484 很棒😎？透過Flipper的Layout Inspector，不管UI設計得有多麼複雜，所有的一切都將一覽無遺。對一個團隊的新人來說，在操作App的同時，他也可以很快地知道目前的畫面應該對應到程式碼的哪一個Class。
Network Plugin
所有App打出去的API request/response，都會被收集到這裡。
你再也不用下log去追response了。甚至，這個Plugin還提供了模擬response的功能，讓你可以去把response修改成你要的樣子，看看在App上的呈現會怎麼樣（下次再介紹，雖然大家說下次再約就是不會再約的意思）。
Shared Preferences Plugin
這個Plugin會將App保存的所有資料，按照檔案進行分類，選取對應的檔案名稱即可查看內容：
可以透過選單來選擇要查看的Shared Preference：
假設我們想看org.wikipedia.dev_preferences這個檔案的內容，選取對應的選項即可查看（但為了保護當事人，打一下馬賽克，因為如果我是project owner，我也不會希望有太多敏感資訊赤裸裸的暴露在網路上XD）
透過Shared Preferences的這個Plugin，新人可以很快的知道這個App會保存哪些資料。當然，你想直接修改，那也是可以的：
結語
看完了本文，是不是對Flipper這個工具有更深的認識了呢？透過Flipper，應該可以降低許多在追code上會遇到的難題，大幅提升開發效率。（尤其是當你接到一個沒有半個xml檔案的App的時候😫）
但其實基本上trace code是每個工程師應該必備的基本能力，工程師應該都必須要擁有在不透過任何工具協助的情況下，找出問題並修復問題的能力。
雖然Android Studio內建的功能已經相當強大，也時不時有新的功能推出，但畢竟Android Studio並不是個開源專案，開發者的心聲比較沒辦法能夠太快的被聽見，在想要的功能還沒有被實現出來的這個階段，不妨先用Flipper當成Android Studio的Extension，享用更完整的功能吧！
