Projet : créer une application Bookshelf (Étagère)

1. Avant de commencer

Conditions préalables

  • Savoir créer et exécuter un projet dans Android Studio
  • Savoir créer des mises en page dans Jetpack Compose
  • Savoir utiliser des coroutines en Kotlin
  • Avoir déjà utilisé Retrofit, Coil et Gson

Objectifs de l'atelier

  • Créer une application Android qui envoie plusieurs requêtes à un service Web et qui affiche des images téléchargées de manière asynchrone

Ce dont vous avez besoin

  • Un ordinateur sur lequel est installé Android Studio

2. Présentation

Bravo, vous avez terminé le module 5 !

Pour mettre en pratique les concepts que vous avez appris dans ce module, y compris les coroutines, Retrofit et Gson, vous allez créer vous-même une application qui affiche une liste de livres accompagnés d'images via l'API Google Books.

Cette application doit pouvoir effectuer ce qui suit :

  • Envoyer une requête à l'API Google Books à l'aide de Retrofit
  • Analyser la réponse à l'aide de Gson
  • Afficher dans une grille verticale des images de livres (avec leur titre) téléchargées de manière asynchrone
  • Appliquer les bonnes pratiques en séparant la couche d'interface utilisateur de la couche de données à l'aide d'un dépôt
  • Écrire des tests pour le code qui nécessite le service réseau, en injectant des dépendances

L'objectif de ce projet est double. Tout d'abord, vous allez mettre en pratique tous les concepts que vous avez appris dans ce module. Vous allez également utiliser une toute nouvelle API REST, consulter la documentation et appliquer les compétences que vous avez acquises dans une nouvelle application, comme vous le feriez en tant que développeur Android professionnel.

La capture d'écran ci-dessous montre un exemple d'application Bookshelf finalisée. Pour la vôtre, c'est vous qui choisirez la mise en page et les livres qui y figureront. Dans les sections suivantes, vous allez voir en détail comment récupérer les données de livres.

9335665e21b79da1.png

3. Préparer votre application

Préparer l'UI

Vous pouvez concevoir l'interface utilisateur de votre application comme bon vous semble. Vous devez réfléchir à la façon dont la mise en page de l'application va s'adapter aux différents facteurs de forme d'appareils.

Étant donné que vous utilisez une grille d'images à défilement vertical, vous devez charger plusieurs images simultanément à l'écran. Une fois que vous avez l'URL de l'image, vous pouvez utiliser le composable AsyncImage fourni par la bibliothèque Coil pour télécharger les données en arrière-plan. Dans la mesure du possible, veillez à indiquer aux utilisateurs quand votre application utilise le réseau.

Préparer la couche réseau

Dans le parcours 1 de ce module, vous avez appris à récupérer des données du réseau et à analyser les réponses JSON. Pour l'application Bookshelf, la couche de données doit effectuer ce qui suit :

  • Créer un service Retrofit pour récupérer des données à partir de l'API Google Books
  • Ajouter des méthodes au service pour avoir la liste des livres et obtenir des informations sur des livres spécifiques
  • Utiliser Gson pour extraire les données pertinentes de la réponse JSON renvoyée par l'API

Voyons brièvement les méthodes de l'API Google Books dont vous avez besoin pour ce projet.

Rechercher des livres

L'API Google Books fournit une méthode qui renvoie une liste de livres en fonction d'un terme de recherche particulier, comme décrit dans Utiliser l'API.

Par exemple, cette URL affiche les résultats de recherche pour le terme "historique jazz".

Exemple

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

Plusieurs paramètres de requête permettent de filtrer votre recherche. Pour l'application Bookshelf, le paramètre q (abréviation de "query", soit "requête" en français) suffit.

La documentation indique également la réponse JSON attendue. Pour l'application Bookshelf, vous devez extraire l'id du livre.

Demander des informations sur un livre spécifique

Pour obtenir des informations sur un livre spécifique, vous devez envoyer une requête. Le point de terminaison ci-dessous utilise l'ID que vous avez extrait de la réponse précédente.

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

Vous pouvez trouver des liens de vignette dans l'objet imageLinks de l'objet volumeInfo. Pour cette application, les images que vous voulez télécharger se trouvent sous la clé 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"
    },
...

Télécharger les vignettes de livres

Une fois que vous avez l'URL de la vignette, celle-ci peut être fournie au composable AsyncImage dans chaque élément de la grille.

Concevoir pour la testabilité

Outre les concepts de mise en réseau, vous avez également appris à refactoriser une application afin d'utiliser une classe Repository (dépôt) pour la couche de données. Pour cette application, vous la devez concevoir en gardant à l'esprit sa testabilité, en utilisant un dépôt pour permuter facilement les sources de données avec l'injection de dépendances.

  • Incluez une interface de dépôt pour le service de livres.
  • Implémentez une classe Repository qui accède au service Retrofit.
  • Implémentez un service fictif qui n'envoie pas de requête réelle à l'API Google Books.
  • Écrivez un test pour le dépôt en utilisant le service fictif.

Les données des livres doivent être récupérées sur le réseau à l'aide d'un dépôt, ce qui vous permet de permuter facilement les sources de données avec l'injection de dépendances.

4. Créer l'application Bookshelf

Maintenant que vous avez un aperçu de l'API Google Books, il est temps de créer votre application. Même si vous utilisez un autre service Web, vous connaissez déjà tous les concepts nécessaires pour réaliser ce projet. Si vous avez besoin d'une piqûre de rappel sur un point précis, vous pouvez toujours revoir les ateliers de programmation précédents et les exemples d'applications de ce module. Les ateliers de programmation de cette unité peuvent vous être utiles pour travailler sur votre projet.

Nous vous recommandons vivement de suivre tous les projets du cours. Même si vous estimez avoir tout assimilé dans ce module, vous devrez peut-être vous référer aux ateliers de programmation plus souvent que vous ne le pensez. Cela arrive à tous, y compris aux enseignants. Amusez-vous bien avec ce projet et mettez en pratique ce que vous avez appris avant de passer au prochain module.