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

Transcript

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

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

3. 99

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

5. 目次 99 Flipper 基本編

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

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

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

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

10. 目次 99 Flipper 応用編

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

12. 99 MIRRATIV内のPUBSUBの一例
 • リアルタイム通信のためにPubSubを利用
 • 通信内容はJson
 ◦ TypeによってClient側でParse処理を切り替えている
 
 


    配信者
 視聴者
 ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー
 APIサーバー
 配信画面


13. 99 MIRRATIV内のPUBSUBの問題点
 • Publishされるまでの条件が複雑だと検証に時間がかかる
 ◦ 例:配信者のランキング情報の切り替え
 → カスタムプラグインで解決
 配信者
 視聴者


    ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー
 APIサーバー
 配信画面


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

    4. FlipperのDesktopPluginでデータが表示されるか確認 
 • 詳細はTech blogへ！！
 https://tech.mirrativ.stream/entry/flipperCustomPlugin


15. 99 プラグインの実装 Desktop Plugins
 
 Android Plugin
 
 アプリからデータ受信

16. 99 プラグインの実装 Desktop Plugins
 
 Android Plugin
 
 アプリにデータ送信

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

18. 99 カスタムプラグイン導入の結果
 配信者
 視聴者
 ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー
 APIサーバー


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


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

20. 99 • 積極採用中です！！
 • 一緒に開発やりませんか！！１１
 WE ARE HIRING