Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

828a043ea62abb720c882a4f77d495e6?s=47 morizooo
November 25, 2021

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

828a043ea62abb720c882a4f77d495e6?s=128

morizooo

November 25, 2021
Tweet

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 • 積極採用中です!!
 • 一緒に開発やりませんか!!11
 WE ARE HIRING