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

Efficient app development using various debugging and verification tools

6866c8a51fdcf9c6609897d0d3b07e6e?s=47 Epishie
December 10, 2020

Efficient app development using various debugging and verification tools

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

6866c8a51fdcf9c6609897d0d3b07e6e?s=128

Epishie

December 10, 2020
Tweet

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