Flipperを活用した デバッグ効率化について/flipper

Transcript

1. Flipperを活用した
   デバッグ効率化について
   2021.10.26 morizooo
   #TechTalk_merpay_zozo_mirrativ
   © 2021 Mirrativ, Inc.
   

   View Slide

2. ●Profile
   ●morizooo(@morizo_999)
   ●ミラティブAndroid担当(2018/2〜)
   ●マイブーム:高級食パン,散財
   

   View Slide

3. View Slide

4. 99
   ● モバイルアプリデバッグのためのデスクトップアプリケーション
   ● アプリからデータを受信して整形して可視化できる
   ○ アプリにデータを送信することも可能
   FLIPPERについて
   

   View Slide

5. 目次
   99
   Flipper
   基本編
   

   View Slide

6. 99
   ● OkHttpでのAPI通信の内容を確認できる
   FLIPPERの標準機能
   

   View Slide

7. 99
   ● HTTPレスポンスのモックも可能
   ○ isMockResponseSupportedを有効にすると使える
   ○ APIモックサーバーの用途に使える
   ○ データを一部書き換えて表示確認にも使える
   FLIPPERの標準機能
   

   View Slide

8. 99
   ● SharedPreferencesの表示/更新ができる
   FLIPPERについて
   

   View Slide

9. 99
   ● DeepLinkの表示確認できる
   ○ 任意のリンクも実行可能
   FLIPPERの標準機能
   

   View Slide

10. 目次
    99
    Flipper
    応用編
    

    View Slide

11. 99
    ● FlipperはElectron+Reactで作られている
    ○ 柔軟なカスタマイズが可能
    ● PubSubパターンに組み合わせると便利
    FLIPPERのカスタムプラグインについて
    

    View Slide

12. 99
    MIRRATIV内のPUBSUBの一例

    ● リアルタイム通信のためにPubSubを利用

    ● 通信内容はJson

    ○ TypeによってClient側でParse処理を切り替えている

    

    

    配信者

    視聴者

    ①HTTPリクエスト
    ②Publish
    ③Subscribe
    ③Subscribe
    PubSubサーバー

    APIサーバー

    配信画面

    

    View Slide

13. 99
    MIRRATIV内のPUBSUBの問題点

    ● Publishされるまでの条件が複雑だと検証に時間がかかる

    ○ 例:配信者のランキング情報の切り替え

    → カスタムプラグインで解決

    配信者

    視聴者

    ①HTTPリクエスト
    ②Publish
    ③Subscribe
    ③Subscribe
    PubSubサーバー

    APIサーバー

    配信画面

    

    View Slide

14. 99
    カスタムプラグインについて
    ● プラグインの開発の流れ
    1. FlipperのDesktopPluginを作成
    2. Androidで作成したDesktopPluginと接続するためのClientを作成
    3. AndroidはClientからデータを流す
    4. FlipperのDesktopPluginでデータが表示されるか確認
    

    ● 詳細はTech blogへ！！

    https://tech.mirrativ.stream/entry/flipperCustomPlugin

    

    View Slide

15. 99
    プラグインの実装
    Desktop Plugins

    

    Android Plugin

    

    アプリからデータ受信
    

    View Slide

16. 99
    プラグインの実装
    Desktop Plugins

    

    Android Plugin

    

    アプリにデータ送信
    

    View Slide

17. カスタムプラグインの画面
    

    View Slide

18. 99
    カスタムプラグイン導入の結果

    配信者

    視聴者

    ①HTTPリクエスト
    ②Publish
    ③Subscribe
    ③Subscribe
    PubSubサーバー

    APIサーバー

    ● 革命と呼ばれデバッグが爆速になった
    ○ 通信内容の確認が楽
    ○ 任意タイミングでReplayできる
    ○ メッセージを決めればMockで開発できる
    Flipper

    

    View Slide

19. 99
    ● Flipperのカスタムプラグインを作成してデバッグの効率化をし
    ている
    ● PubSubでのメッセージ通信で有効に使える
    まとめ
    

    View Slide

20. 99
    ● 積極採用中です！！

    ● 一緒に開発やりませんか！！１１

    WE ARE HIRING

    

    View Slide