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

Transcript

1. Flipperを活用した デバッグ効率化について 2021.10.26 morizooo #TechTalk_merpay_zozo_mirrativ © 2021 Mirrativ, Inc.
2. •Profile •morizooo(@morizo_999) •ミラティブAndroid担当(2018/2〜) •マイブーム:高級食パン,散財
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