プロジェクト: Bookshelf アプリの作成

1. 始める前に

前提条件

  • Android Studio でプロジェクトを作成、実行できること
  • Jetpack Compose でレイアウトを作成できること
  • Kotlin のコルーチンの使用経験
  • Retrofit、Coil、Gson の使用経験

作成するアプリの概要

  • ウェブサービスに対して複数のリクエストを実行し、ダウンロードした非同期画像を表示する Android アプリ。

必要なもの

  • Android Studio がインストールされているパソコン

2. 概要

これでユニット 5 は完了です。

コルーチン、Retrofit、Gson など、このユニットで学習したコンセプトを実践的に確認するために、Google Books API から取得した画像とともに書籍の一覧を表示するアプリを独自に作成します。

このアプリには次の動作を実装します。

  • Retrofit を使用して Google Books API にリクエストを送信する。
  • Gson を使用してレスポンスを解析する。
  • 非同期にダウンロードした書籍の画像を、書籍名とともに縦方向グリッドで表示する。
  • リポジトリを使用して UI とデータレイヤを分離するベスト プラクティスを実装する。
  • 依存関係の注入を使用して、ネットワーク サービスを必要とするコードのテストを作成する。

このプロジェクトの目標は 2 つあります。1 つ目は、このユニットで学習したすべてのコンセプトを実践することです。2 つ目は、プロの Android デベロッパーと同じように、まったく新しい REST API を操作し、ドキュメントを読み、学んだスキルを新しいアプリで活用することです。

次のスクリーンショットは、完成した Bookshelf アプリの例を示しています。アプリの表示レイアウトや表示する書籍は、自由に決めることができます。書籍データを取得する方法について詳しくは、以下のセクションで説明します。

9335665e21b79da1.png

3.アプリを計画する

UI を計画する

アプリの UI は自由に設計できます。さまざまなデバイスのフォーム ファクタに、アプリのレイアウトがどのように適応するかを考慮する必要があります。

画像のスクロール グリッドを使用するため、複数の画像を画面上に同時に読み込む必要があります。画像の URL を取得したら、Coil ライブラリが提供する AsyncImage コンポーザブルを使用して、バックグラウンドでデータをダウンロードできます。アプリがネットワークを使用する際には、そのことを可能な限りユーザーに示すようにします。

ネットワーク レイヤを計画する

このユニットのパスウェイ 1 では、ネットワークからデータを取得し、JSON レスポンスを解析する方法を学習しました。Bookshelf アプリの場合、データレイヤで次の 3 つのことを行う必要があります。

  • Google Books API からデータを取得する Retrofit サービスを作成する。
  • 書籍の一覧や特定の書籍の情報を取得するサービスのメソッドを追加する。
  • Gson を使用して、API から返された JSON レスポンスから意味のあるデータを抽出する。

では、このプロジェクトで必要な Google Books API のメソッドを簡単に説明しましょう。

書籍を検索する

Google Books API には、API を使用するで説明されているように、特定の検索キーワードに基づいて書籍のリストを返すメソッドが用意されています。

たとえば、この URL は「ジャズの歴史」という用語の検索結果を返します。

https://www.googleapis.com/books/v1/volumes?q=jazz+history

検索を絞り込むためのクエリ パラメータはいくつかあります。Bookshelf アプリでは、q パラメータ(クエリの略)で十分です。

ドキュメントには、想定される JSON レスポンスも記載されています。Bookshelf アプリの場合、書籍の id を抽出する必要があります。

特定の書籍の情報をリクエストする

リクエストを送信し、特定の書籍に関する情報を取得する必要があります。このエンドポイントは、直前のレスポンスから抽出した ID を受け取ります。

https://www.googleapis.com/books/v1/volumes/<volume_id>

サムネイル リンクは volumeInfo オブジェクトの imageLinks オブジェクト内にあります。このアプリの場合、ダウンロードする画像は thumbnail キーの下にあります。

...
    "imageLinks": {
      "smallThumbnail": "http://books.google.com/books/publisher/content?id=EPUTEAAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&imgtk=AFLRE734s3CngIs16gM_Ht6GeGF4ew664I7oOGghmfk4pgfFcDYb4GlYCYdjtqqXluL2KUyfq_Ni5MSyv4JxEJ8W679zQ2Ib3okUKau3I1ruqBGrWOt2_haUauWC8sXEgjN7JHm4uOjS&source=gbs_api",
      "thumbnail": "http://books.google.com/books/publisher/content?id=EPUTEAAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&imgtk=AFLRE71N0ldzv6rliUV_K5ZACa9yPNcT8Ino6YKXJUMje_z4GsC9cp6gFql5TxlmqMoYN3CDhM3XAIO2riFeMXUnFVr5pTLq91htTtG1DDyvOdiR4yI6xu3yEEAn0dRbvNFZ5m7dUC9E&source=gbs_api",
      "small": "http://books.google.com/books/publisher/content?id=EPUTEAAAQBAJ&printsec=frontcover&img=1&zoom=2&edge=curl&imgtk=AFLRE71HmTwpoe3KR0AISYk5sDgV2Fz-F-6CDKJtFdvlXSZv3jEzFtsSXGJnEGjtCuoDMxP_6sgP8au1yadB7OmI2MhIBquel7ivcDB8e9ieLyh4HNoXnX3zmxfF_CfIfnNXDv0WHuyA&source=gbs_api",
      "medium": "http://books.google.com/books/publisher/content?id=EPUTEAAAQBAJ&printsec=frontcover&img=1&zoom=3&edge=curl&imgtk=AFLRE72LMPH7Q2S49aPeQ3Gm8jLEf6zH4ijuE0nvbOyXBUAgyL816pXzaw0136Pk8jXpfYYFY0IsqL7G7MMDMgKcJhnaoHojWNZpljZmGHeWLL_M7hxkOpmdmO7xza8dfVfPbFmBH4kl&source=gbs_api",
      "large": "http://books.google.com/books/publisher/content?id=EPUTEAAAQBAJ&printsec=frontcover&img=1&zoom=4&edge=curl&imgtk=AFLRE71w0J9EOzUzu1O5GMbwhnpI8BLWzOEtzqc9IfyxEDqimZ--H4JlNAZh_1zx8pqPNRf1qDt7FPb57lH5ip-LBlK3zjMC-MCBYcciuoPjTJOFmLv7pp5B6_-UFBap1KRfC0eG7P4d&source=gbs_api",
      "extraLarge": "http://books.google.com/books/publisher/content?id=EPUTEAAAQBAJ&printsec=frontcover&img=1&zoom=6&edge=curl&imgtk=AFLRE73t0gcxT-jzEETp8Yo5Osr15nVL7ntKL2WSe2S8kRSio7w0CGgErAq4WbPWIsH4TmOdP_EO6ZoPNSP-YGSOwqfPMw8_IlYE6hy9IKeAs5V_xaHy7drZleF0eizAQiEVg5ci7qby&source=gbs_api"
    },
...

書籍のサムネイルをダウンロードする

サムネイル URL を取得したら、各グリッド アイテムの AsyncImage コンポーザブルに指定できます。

テストのしやすさを重視した設計

ネットワーキングのコンセプトに加えて、データレイヤでリポジトリ クラスを使用するようにアプリをリファクタリングする方法も学びました。このアプリの設計では、テストのしやすさを念頭に置いてください。リポジトリを使用すると、依存関係の注入によってデータソースを簡単に入れ替えることができます。

  • 書籍サービス用のリポジトリ インターフェースを追加する。
  • Retrofit サービスにアクセスするリポジトリ クラスを実装する。
  • Google Books API への実際のリクエストを行わない架空のサービスを実装する。
  • 架空のサービスを使用してリポジトリのテストを作成する。

書籍データは、リポジトリを使用してネットワークから取得する必要があり、依存関係の注入によってデータソースを簡単に入れ替えることができます。

4. Bookshelf アプリを作成する

Google Books API の概要を理解したので、Bookshelf API を構築しましょう。別のウェブサービスを使用していたとしても、このプロジェクトを完了するために必要なコンセプトはすべてすでに学習済みです。復習が必要な場合には、このユニットの前の Codelab やサンプルアプリをいつでも参照できます。このプロジェクトにはこのユニットの Codelab が役立ちます。

コースのすべてのプロジェクトを完了することを強くおすすめします。このユニットの内容を十分に習得したつもりでも、Codelab を見返さなければならない場面は意外と多くあるものですが、それは普通のことです。このコースのインストラクターでも例外ではありません。まずはこのプロジェクトを楽しんでください。そして、次のユニットに進む前に学習したことを実践しましょう。