Efficient app development using various debugging and verification tools

Tools and techniques that helped us develop efficiently while working on the Android renewal project

Transcript

1. デバッグや検証ツールを活用 した効率的なアプリ開発 Efficient app development using various debugging and verification tools
2. 自己紹介 • Joseph Iturralde (@epishie) • モバイル基盤部 • Androidエンジニア
3. Android Renewal Project
4. アイデア • おすすめ記事 さがす • レシピ検索、ハッシュタグ きろく • クリップ、料理アルバム New 3-Tab UI
5. Debugging and Verification Tools Flipper
6. Flipper はモバイルアプリ用の デバッグツールで iOS, Android, ReactNative で利用 可能 Flipper https://fbflipper.com/
7. コア・プラグイン • Layout • Network • SharedPreferences • Database カスタム・プラグイン Flipper
8. 複雑なレイアウトをデバッグすること は難しく、特に API から画像やテキス トなど多くのコンテンツを取得する場 合は非常に難しいです Flipper - Layout
9. Flipper では起動中の アプリの View ツリーを 簡単に覗くことができ ます Flipper - Layout
10. View ツリーでハイライトした View はデバ イス上でも同様に確認できます Flipper - Layout
11. Margin, Padding, Bounds を 確認できます Flipper - Layout
12. Flipper - Network HTTP リクエストと レスポンスも確認できます OkHttp の interceptor を 使っているので HTTPS も確 認できます
13. Flipper - Shared Preferences クックパッドアプリでは Spotlight と 呼ばれるカスタム View を新機能や 新しいUIを紹介する際に利用しています ユーザがすでに確認したかどうかの状態は SharedPreference に保存しています
14. Flipper - Shared Preferences SharedPreference の 内容を確認することが でき、アプリ起動中は 値の更新が反映されます
15. Debugging and Verification Tools Hyperion
16. Hyperion - App Inspection Tool Hyperion はプラグイン型のデバッグメ ニューライブラリでデザイナー、開発者、 QA間の認識のズレを埋めるためのツール です https://github.com/willowtreeapps/Hyperion-Android
17. Hyperion - App Inspection Tool コア・プラグイン • Attribute • Disk • Measure • Phoenix • Recorder • Shared-Preferences
18. Hyperion - App Inspection Tool 様々な用途に合わせてカスタムの プラグインを実装して追加することができ ます
19. Hyperion - App Inspection Tool クックパッドではデバッグや検証に 合わせて数多くのプラグインを実装 しました
20. Hyperion - App Inspection Tool 特にリニューアル時にはデザイナーの確 認を容易にするため、UI のデバッグメ ニューをいくつか追加しました
21. Hyperion - App Inspection Tool Button Style Verification リニューアル時にマテリアルテーマ (Theme.MaterialComponents)に 変更したため、既存ボタンスタイル 全てを確認する手段が必要になりました
22. Hyperion - App Inspection Tool Ken Burns* Transition Preview リニューアルで追加された機能の中で画 像をスライドショーとして表示しています * https://en.wikipedia.org/wiki/Ken_Burns_effect
23. Hyperion - App Inspection Tool Ken Burns Transition Preview この画像の動作をプレビューツールによっ て確認することができました
24. Hyperion - App Inspection Tool Navigation 開発のタイミングでリスト画面より先に詳細 画面が実装されることがありました こういった詳細画面は画面遷移の デバッグツールから直接遷移できるようにし ました
25. Demo Apps
26. Demo Apps クックパッドアプリは主要な機能ごと に独立した feature モジュールに分割されています
27. Demo Apps 開発時、特に特定のモジュールのみを 変更している場合はプロジェクト全体の ビルドには無駄な箇所をビルドしてしまう 可能性があります Photo by Jon Tyson on Unsplash
28. Demo Apps プロジェクト全体のビルドを避けるため に、特定の feature モジュールのみを ビルドするデモアプリを導入しました
29. Demo Apps
30. Demo Apps デモアプリを作る際は検証したい 各機能を起動する画面を作成します
31. Demo Apps 機能を選択すると実際の画面が 起動し、スタブしたレスポンスで機能を確 認できます 機能単体で検証できるように、 他の画面とのやりとりも スタブしています
32. 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#デモアプリモジュールの実装
33. まとめ
34. まとめ 巨大なプロジェクトの開発は難しい デバッグや検証はさらに難しい 便利なツールで効率化 使えるものがなければ自作しよう