Efficient app development using various debugging and verification tools

by Epishie

Slide 1

Slide 1 text

デバッグや検証ツールを活用した効率的なアプリ開発 Eﬃcient app development using various debugging and veriﬁcation tools

Slide 2

Slide 2 text

自己紹介 ● Joseph Iturralde (@epishie) ● モバイル基盤部 ● Androidエンジニア

Slide 3

Slide 3 text

Android Renewal Project

Slide 4

Slide 4 text

アイデア ● おすすめ記事さがす ● レシピ検索、ハッシュタグきろく ● クリップ、料理アルバム New 3-Tab UI

Slide 5

Slide 5 text

Debugging and Veriﬁcation Tools Flipper

Slide 6

Slide 6 text

Flipper はモバイルアプリ用のデバッグツールで iOS, Android, ReactNative で利用可能 Flipper https://fbﬂipper.com/

Slide 7

Slide 7 text

コア・プラグイン ● Layout ● Network ● SharedPreferences ● Database カスタム・プラグイン Flipper

Slide 8

Slide 8 text

複雑なレイアウトをデバッグすることは難しく、特に API から画像やテキストなど多くのコンテンツを取得する場合は非常に難しいです Flipper - Layout

Slide 9

Slide 9 text

Flipper では起動中のアプリの View ツリーを簡単に覗くことができます Flipper - Layout

Slide 10

Slide 10 text

View ツリーでハイライトした View はデバイス上でも同様に確認できます Flipper - Layout

Slide 11

Slide 11 text

Margin, Padding, Bounds を確認できます Flipper - Layout

Slide 12

Slide 12 text

Flipper - Network HTTP リクエストとレスポンスも確認できます OkHttp の interceptor を使っているので HTTPS も確認できます

Slide 13

Slide 13 text

Flipper - Shared Preferences クックパッドアプリでは Spotlight と呼ばれるカスタム View を新機能や新しいUIを紹介する際に利用していますユーザがすでに確認したかどうかの状態は SharedPreference に保存しています

Slide 14

Slide 14 text

Flipper - Shared Preferences SharedPreference の内容を確認することができ、アプリ起動中は値の更新が反映されます

Slide 15

Slide 15 text

Debugging and Veriﬁcation Tools Hyperion

Slide 16

Slide 16 text

Hyperion - App Inspection Tool Hyperion はプラグイン型のデバッグメニューライブラリでデザイナー、開発者、 QA間の認識のズレを埋めるためのツールです https://github.com/willowtreeapps/Hyperion-Android

Slide 17

Slide 17 text

Hyperion - App Inspection Tool コア・プラグイン ● Attribute ● Disk ● Measure ● Phoenix ● Recorder ● Shared-Preferences

Slide 18

Slide 18 text

Hyperion - App Inspection Tool 様々な用途に合わせてカスタムのプラグインを実装して追加することができます

Slide 19

Slide 19 text

Hyperion - App Inspection Tool クックパッドではデバッグや検証に合わせて数多くのプラグインを実装しました

Slide 20

Slide 20 text

Hyperion - App Inspection Tool 特にリニューアル時にはデザイナーの確認を容易にするため、UI のデバッグメニューをいくつか追加しました

Slide 21

Slide 21 text

Hyperion - App Inspection Tool Button Style Veriﬁcation リニューアル時にマテリアルテーマ (Theme.MaterialComponents)に変更したため、既存ボタンスタイル全てを確認する手段が必要になりました

Slide 22

Slide 22 text

Hyperion - App Inspection Tool Ken Burns* Transition Preview リニューアルで追加された機能の中で画像をスライドショーとして表示しています * https://en.wikipedia.org/wiki/Ken_Burns_effect

Slide 23

Slide 23 text

Hyperion - App Inspection Tool Ken Burns Transition Preview この画像の動作をプレビューツールによって確認することができました

Slide 24

Slide 24 text

Hyperion - App Inspection Tool Navigation 開発のタイミングでリスト画面より先に詳細画面が実装されることがありましたこういった詳細画面は画面遷移のデバッグツールから直接遷移できるようにしました

Slide 25

Slide 25 text

Demo Apps

Slide 26

Slide 26 text

Demo Apps クックパッドアプリは主要な機能ごとに独立した feature モジュールに分割されています

Slide 27

Slide 27 text

Demo Apps 開発時、特に特定のモジュールのみを変更している場合はプロジェクト全体のビルドには無駄な箇所をビルドしてしまう可能性があります Photo by Jon Tyson on Unsplash

Slide 28

Slide 28 text

Demo Apps プロジェクト全体のビルドを避けるために、特定の feature モジュールのみをビルドするデモアプリを導入しました

Slide 29

Slide 29 text

Demo Apps

Slide 30

Slide 30 text

Demo Apps デモアプリを作る際は検証したい各機能を起動する画面を作成します

Slide 31

Slide 31 text

Demo Apps 機能を選択すると実際の画面が起動し、スタブしたレスポンスで機能を確認できます機能単体で検証できるように、他の画面とのやりとりもスタブしています

Slide 32

Slide 32 text

Demo Apps デモアプリは iOS で導入した Sandbox アプリを元に作成しました大規模なiOSアプリの画面開発を効率化するために動作確認用ミニアプリを構築する https://techlife.cookpad.com/entry/2020/08/05/0900 00 大規模プロジェクトにおけるモバイル基盤の取り組み https://techlife.cookpad.com/entry/2020/12/04/1100 00#デモアプリモジュールの実装

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

まとめ巨大なプロジェクトの開発は難しいデバッグや検証はさらに難しい便利なツールで効率化使えるものがなければ自作しよう