Projet : application Dogglers

1. Avant de commencer

Cet atelier de programmation présente une nouvelle application appelée Dogglers, que vous allez créer vous-même. Il explique les différentes étapes à suivre pour mener à bien le projet de l'application Dogglers, y compris sa configuration et ses tests dans Android Studio.

Cet atelier de programmation est différent des autres ateliers de ce cours. Contrairement aux précédents ateliers de programmation, celui-ci n'a pas pour objectif de vous fournir un tutoriel détaillé sur la création d'une application. Au lieu de cela, il vous aide à configurer un projet que vous devrez réaliser de manière indépendante, avec les instructions nécessaires pour finaliser une application et vérifier vous-même votre travail.

Au lieu du code de solution, nous proposons une suite de tests intégrés à l'application que vous téléchargerez. Vous exécuterez ces tests dans Android Studio (nous vous montrerons comment procéder plus tard dans cet atelier) et vérifierez si votre code passe ces tests avec succès. Plusieurs tentatives seront peut-être nécessaires. Même les développeurs professionnels ne réussissent pas tous les tests dès le premier essai. Une fois que votre code aura réussi tous les tests, vous pourrez considérer ce projet comme terminé.

Nous sommes conscients que vous pourriez préférer avoir directement accès à la solution. Toutefois, nous ne vous fournissons pas le code de la solution, car nous souhaitons que vous vous mettiez à la place d'un développeur professionnel. Peut-être devrez-vous renforcer des compétences différentes que vous ne maîtrisez pas encore, par exemple :

• Apprendre des termes, messages d'erreur et extraits de code dans l'application que vous ne reconnaissez pas.
• Tester le code, lire les erreurs, puis modifier le code et le tester à nouveau.
• Réviser le contenu précédent sur les bases d'Android afin de rafraîchir vos connaissances.
• Comparer le code qui fonctionne (code fourni dans le projet ou code de solution d'autres applications du module 2) avec le code que vous écrivez.

Cette nouvelle tâche peut sembler intimidante au premier abord, mais nous avons la certitude que si vous avez terminé le module 2, vous êtes fin prêt pour ce projet. Prenez votre temps et n'abandonnez pas. Faites-vous confiance !

Conditions préalables

• Ce projet est destiné aux utilisateurs qui ont terminé le module 2 du cours sur les bases d'Android en Kotlin.

Objectifs de l'atelier

• À l'aide des compétences acquises dans le module 2, vous allez créer une application intitulée Dogglers qui affiche des informations dans une vue RecyclerView.

Ce dont vous avez besoin

• Un ordinateur sur lequel est installé Android Studio

2. Présentation de l'application

Bienvenue dans le Projet : application Dogglers !

Chez Google, nos collègues s'appellent les Googleurs. De nombreux Googleurs sont des propriétaires de chiens. Nous avons donc pensé qu'il serait amusant de créer une application pour les chiens, appelée Dogglers. Votre tâche consiste à implémenter Dogglers, une application qui affiche des listes déroulantes avec les chiens des Googleurs, ainsi que des informations sur chacun d'eux, comme leur nom, leur âge, leurs activités préférées et une photo. Dans ce projet, vous allez créer des mises en page pour les éléments RecyclerView dans l'application Dogglers et implémenter un adaptateur pour que la liste des chiens puisse s'afficher de trois façons : par un défilement horizontal, un défilement vertical et sous la forme d'une grille à défilement vertical.

Lorsque vous lancez l'application, des options de mise en page horizontale, verticale et de grille vous sont proposées.

La première option est un RecyclerView avec des éléments qui occupent toute la largeur de l'écran.

La seconde option permet d'afficher la liste des chiens dans un RecyclerView à défilement horizontal.

La troisième option permet d'afficher les chiens dans une grille à défilement vertical qui présente deux chiens par ligne.

Toutes ces mises en page sont alimentées par la même classe d'adaptateur. Vous devrez créer les mises en page pour les vignettes RecyclerView, puis implémenter l'adaptateur pour que chaque élément affiche les informations sur chaque chien.

3. Premiers pas

Télécharger le code du projet

Notez que le nom du dossier est android-basics-kotlin-dogglers-app. Sélectionnez ce dossier lorsque vous ouvrez le projet dans Android Studio.

1. Accédez à la page du dépôt GitHub fournie pour le projet.
2. Vérifiez que le nom de la branche correspond à celui spécifié dans l'atelier de programmation. Par exemple, dans la capture d'écran suivante, le nom de la branche est main.

3. Sur la page GitHub du projet, cliquez sur le bouton Code pour afficher une fenêtre pop-up.

4. Dans la fenêtre pop-up, cliquez sur le bouton Download ZIP (Télécharger le fichier ZIP) pour enregistrer le projet sur votre ordinateur. Attendez la fin du téléchargement.
5. Recherchez le fichier sur votre ordinateur (il se trouve probablement dans le dossier Téléchargements).
6. Double-cliquez sur le fichier ZIP pour le décompresser. Un dossier contenant les fichiers du projet est alors créé.

Ouvrir le projet dans Android Studio

1. Lancez Android Studio.
2. Dans la fenêtre Welcome to Android Studio (Bienvenue dans Android Studio), cliquez sur Open (Ouvrir).

Remarque : Si Android Studio est déjà ouvert, sélectionnez l'option de menu File > Open (Fichier > Ouvrir).

3. Dans l'explorateur de fichiers, accédez à l'emplacement du dossier du projet décompressé (il se trouve probablement dans le dossier Téléchargements).
4. Double-cliquez sur le dossier de ce projet.
5. Attendez qu'Android Studio ouvre le projet.
6. Cliquez sur le bouton Run (Exécuter) pour créer et exécuter l'application. Assurez-vous qu'elle fonctionne correctement.

Le projet est divisé en packages distincts. Bien que la plupart des fonctionnalités soient déjà implémentées, vous devez implémenter DogCardAdapter. Vous devez également modifier deux fichiers de mise en page. Nous aborderons également d'autres fichiers dans les instructions suivantes, au besoin.

Implémenter la mise en page

Les mises en page verticale et horizontale sont identiques. Vous ne devez donc implémenter qu'un seul fichier de mise en page pour les deux. La mise en page en mode grille contient les mêmes informations, mais le nom, l'âge et les loisirs du chien sont empilés verticalement. Dans ce cas, vous devez disposer d'une mise en page distincte. Les deux mises en page nécessitent quatre vues différentes pour afficher des informations sur chaque chien.

1. Une ImageView avec la photo du chien
2. Une TextView avec le nom du chien
3. Une TextView indiquant l'âge du chien
4. Une TextView indiquant les loisirs du chien

Vous remarquerez également qu'une bordure et une ombre apparaissent sur chaque vignette. Cet élément est géré par MaterialCardView, qui est déjà ajouté aux fichiers de mise en page dans le projet initial. Dans chaque MaterialCardView se trouve un ConstraintLayout dans lequel vous devez ajouter les vues restantes.

Vous devez utiliser deux fichiers XML pour implémenter les mises en page : vertical_horizontal_list_item.xml pour les mises en page horizontales et verticales, et grid_list_item.xml pour les mises en page en grille.

1. Créez la mise en page pour les listes verticales et horizontales.

Ouvrez vertical_horizontal_list_item.xml, puis, dans le ConstraintLayout interne, créez la mise en page afin qu'elle corresponde à l'image.

2. Créez la mise en page en mode grille.

Ouvrez grid_list_item.xml, puis, dans le ConstraintLayout interne, créez la mise en page afin qu'elle corresponde à l'image.

Implémenter l'adaptateur

Une fois que vous avez défini vos mises en page, la prochaine étape consiste à implémenter l'adaptateur RecyclerView. Ouvrez DogCardAdapter.kt dans le package adapter (adaptateur). Vous constaterez que de nombreux commentaires TODO vous aident à comprendre ce que vous devez implémenter.

La mise en œuvre de l'adaptateur s'effectue en cinq étapes.

1. Définissez une variable ou une constante pour la liste des données sur les chiens. Cette liste se trouve dans le package data, dans un objet appelé DataSource. Elle se présente comme suit :

object DataSource {

   val dogs: List<Dog> = listOf( ...

}

La propriété dogs est de type List<Dog>. La classe Dog se trouve dans le package model et définit quatre propriétés : une image (représentée par un ID de ressource) et trois propriétés String.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

Placez la variable définie dans DogCardAdapter sur la liste dogs, dans l'objet DataSource.

2. Implémentez DogCardViewHolder. Le ViewHolder doit lier les quatre vues qui doivent être définies pour chaque fiche "RecyclerView". Ce ViewHolder sera partagé pour les mises en page grid_list_item et vertical_horizontal_list_item, car toutes les vues sont partagées entre les deux mises en page. DogCardViewHolder doit inclure les propriétés des ID de vues suivants : dog_image, dog_name, dog_age et dog_hobbies.
3. Dans onCreateViewHolder(), il faudra gonfler la mise en page grid_list_item ou vertical_horizontal_list_item. Comment savoir quelle mise en page utiliser ? Dans la définition de l'adaptateur, vous pouvez constater qu'une valeur appelée mise en page de type Int est transmise lors de la création d'une instance de l'adaptateur.

class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

Elle correspond à une valeur définie dans l'objet Layout, situé dans le package const.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

La valeur de la mise en page peut être 1, 2 ou 3, mais vous pouvez la comparer aux identifiants VERTICAL, HORIZONTAL et GRID de l'objet Layout.

Pour la mise en page GRID, gonflez la mise en page grid_list_item, et pour les mises en page HORIZONTAL et VERTICAL, gonflez la mise en page vertical_horizontal_list_item. La méthode doit renvoyer une instance DogCardViewHolder représentant la mise en page gonflée.

4. Implémentez getItemCount() pour renvoyer la longueur de la liste des chiens.
5. Enfin, vous devez implémenter onBindViewHolder() pour définir les données qui s'affichent dans chacune des fiches "RecyclerView". Utilisez position pour accéder aux données d'un chien spécifique dans la liste, et définissez le nom et l'image associés au chien. Utilisez les ressources de chaîne dog_age et dog_hobbies pour mettre en forme l'âge et les activités préférées du chien.

Une fois que vous avez terminé d'implémenter l'adaptateur, exécutez votre application sur l'émulateur pour vérifier que tout est implémenté correctement.

4. Tester votre application

Le projet Dogglers contient une cible "androidTest" avec plusieurs scénarios de test.

Exécuter vos tests

Pour exécuter vos tests, vous pouvez effectuer l'une des opérations suivantes :

Pour un scénario de test unique, ouvrez une classe de scénario de test et cliquez sur la flèche verte à gauche de la déclaration de classe. Vous pouvez ensuite sélectionner l'option "Run" (Exécuter) dans le menu. Tous les tests seront exécutés dans le scénario de test.

Souvent, il suffit d'exécuter un seul test, notamment lorsqu'un test a échoué et que tous les autres ont réussi. Il est possible d'exécuter un seul test de la même manière que vous le feriez pour un scénario de test complet. Utilisez la flèche verte et sélectionnez l'option Run (Exécuter).

Si vous avez plusieurs scénarios de test, vous pouvez également exécuter l'ensemble de la suite de tests. Comme pour l'exécution de l'application, cette option se trouve dans le menu Run (Exécuter).

Notez qu'Android Studio utilise par défaut la dernière cible que vous avez exécutée (applications, cibles de test, etc.). Par conséquent, si le menu indique toujours Run > Run 'app' (Exécuter > Exécuter 'application'), vous pouvez exécuter la cible de test en sélectionnant Run > Run (Exécuter > Exécuter).

Sélectionnez ensuite la cible de test dans le menu pop-up.

Les résultats des tests sont affichés dans l'onglet Run (Exécuter). Dans le volet de gauche, la liste des tests ayant échoué s'affiche, le cas échéant. Les échecs sont signalés par un point d'exclamation rouge à côté du nom de la fonction. Les tests réussis sont marqués d'une coche verte.

Si un test échoue, la sortie textuelle vous fournit des informations pour vous aider à résoudre le problème sous-jacent.

Par exemple, dans le message d'erreur ci-dessus, le test vérifie si une chaîne contenant le mot "Nox" est affichée. Cependant, le test échoue. Le texte est introuvable, ce qui signifie qu'il n'est probablement pas encore affiché.