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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

目次 99 Flipper 基本編

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

目次 99 Flipper 応用編

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

99 MIRRATIV内のPUBSUBの一例  ● リアルタイム通信のためにPubSubを利用  ● 通信内容はJson  ○ TypeによってClient側でParse処理を切り替えている      配信者  視聴者  ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー  APIサーバー  配信画面 

Slide 13

Slide 13 text

99 MIRRATIV内のPUBSUBの問題点  ● Publishされるまでの条件が複雑だと検証に時間がかかる  ○ 例:配信者のランキング情報の切り替え  → カスタムプラグインで解決  配信者  視聴者  ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー  APIサーバー  配信画面 

Slide 14

Slide 14 text

99 カスタムプラグインについて ● プラグインの開発の流れ 1. FlipperのDesktopPluginを作成 2. Androidで作成したDesktopPluginと接続するためのClientを作成 3. AndroidはClientからデータを流す 4. FlipperのDesktopPluginでデータが表示されるか確認   ● 詳細はTech blogへ！！  https://tech.mirrativ.stream/entry/flipperCustomPlugin 

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

99 カスタムプラグイン導入の結果  配信者  視聴者  ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー  APIサーバー  ● 革命と呼ばれデバッグが爆速になった ○ 通信内容の確認が楽 ○ 任意タイミングでReplayできる ○ メッセージを決めればMockで開発できる Flipper 

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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