Étapes du Dojo

Application de découverte de films:

Durant les prochaines heures, nous allons créer une application Android.

Cette application utilisera l'API mise à disposition par la base de données de films The Movie Database (TMDb) pour afficher sous forme de carte :

• Les films au cinéma actuellement

• Le top des films de l'année

• Les films à venir

En bonus (🃏), il sera aussi possible d'ajouter ces films en favoris afin de garder une sélection de film dans l'application.

Architecture du code

Model View Presenter (MVP) + Repository

• View:

  La View correspond à l'interface que l'utilisateur aura sous les yeux. Elle est en charge d'informer le Presenter des actions de l'utilisateur et d'afficher les données récupérées. Elle est matérialisée ici par une interface <name>ViewContract qui permet d'abstraire les actions possibles sur notre vue.

• Presenter:

  Le Presenter reçoit les actions de l'utilisateur et sera en charge de récupérer les données pertinentes du Model dans le Repository. Il permet de faire le lien entre la View et le Model.

• Model:

  Le Model regroupe l'ensemble des ressources métiers de notre application qui seront affichées.

• Repository:

  Le Repository va servir à récupérer les données de l'application de diverses manières, dans une base de données, en cache ou encore sur des API.

Executors (threading)

Sur Android, il est impossible de faire des appels réseaux sur le main thread (thread en charge de la vue, il est en charge d'afficher l'application avec un certain nombre de frame par seconde).

Il faut donc passer les appels réseau sur un autre thread puis envoyé la réponse sur le main thread.

Pour facilité la gestion des threads, en s'inspirant des recommandations de Google en terme d'architecture d'application, la classe AppExecutors a été créée. Elle permet d'avoir accès à 3 types d'executors qui permet de lancer des actions sur 3 types de threads: le main thread, le thread network IO et le thread disk IO.

Activité:

An Activity is a single, focused thing that the user can do. (https://developer.android.com/reference/android/app/Activity)

Une application Android, est composée d’une ou plusieurs activités (et de fragments).

Ces objets suivent un cycle de vie dès lors que l’application est lancée.

• onCreate:

  C'est ici que nous allons créer la vue de notre activité et initialiser les vues de cette dernière.

• onStart:

  Démarrage de l'activité, c'est ici qu'on va appeler le presenter pour aller chercher les données.

• onStop: (symétrique de onCreate)

  Il faut informer le presenter que l'activité est arrêtée, et donc qu'il ne faut pas essayer de la mettre à jour si des données cherchées sont disponibles.

• onDestroy: (symétrique de onCreate)

  L'activité est détruite.

https://developer.android.com/guide/components/activities/activity-lifecycle

1. Création de la carte d'un film

Inflate un layout dans une activité

A layout defines the structure for a user interface in your app, such as in an activity. All elements in the layout are built using a hierarchy of View and ViewGroup objects. A View usually draws something the user can see and interact with. (https://developer.android.com/guide/topics/ui/declaring-layout)

La façon la plus utilisée pour créer l'interface utilisateur de notre activité est d'utiliser un layout.

C'est un fichier XML qui définit la structure de notre interface utilisateur.

Vous devriez voir l'écran ci-dessous:

Comme vous pouvez le voir, un layout ressemble plus ou moins à un fichier HTML. On a ici un ViewGroup, le FrameLayout qui contient tout simplement des vues sans arrangement spécial, et une View, la TextView qui permet d'afficher du texte.

Pour utiliser ce layout dans notre activité, il faut utiliser la méthode setContentView lors de la création de l'activité.

📱

Relancer l'application

• Vous devriez avoir l'écran ci-dessus:

  

Création de la carte d'un film

Le but maintenant va être d'afficher la carte ci-dessous:

Pour faire la carte en elle-même, nous allons utiliser une CardView

Afin d'organiser les éléments au sein de cette CardView, nous allons utiliser des LinearLayout. Grâce à ce layout, il est possible d'aligner des vues de façon horizontales ou bien vertical.

<!-- VERTICAL -->
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
				android:orientation="vertical"
        >
	<!-- VIEWS -->
</LinearLayout>

<!-- HORIZONTAL -->
<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
				android:orientation="horizontal"
        >
	<!-- VIEWS -->
</LinearLayout>

Pour les textes, nous allons utiliser des TextView. Le titre du film utilisera android:textAppearance="@style/Headline6" , les label (date de sortie et genre)android:textAppearance="@style/Label" et les valeurs de ces labels: android:textAppearance="@style/Caption" .

Le texte affiché par les labels se trouve dans le fichier de resource res/values/string.xml . Pour les utiliser dans le layout, ajouter un attribut: android:text="@string/<nom de la ressource>" .

Pour les étoiles de la note du film, une RatingBar, sur laquelle on utilisera l'attribut isIndicator="true" pour empêcher les utilisateurs de modifier le nombre d'étoiles.

• Résultat

  

2. Afficher les données des films dans la carte créée

Pour l'instant, les données affichées sont en dur dans le layout. Le but de cette partie sera de récupérer les vues de la carte de film dans l'activité et d'y mettre les valeurs venant d'un objet Movie.

Récupérer les vues d'un layout

dGV

Pour rappel sur les types de vue:

Afficher du contenues dans des vues

Maintenant que les vues ont bien été récupérées, il reste à récupérer un object Movie à afficher. Pour cela utiliser la classe DiscoverPresenter.

Il faut maintenant récupérer et initialiser le DiscoverPresenter.

Récupérer un film dans le repository

Le MovieRepository fourni permet de récupérer un film. Pour l'instant, le film est déclaré en dur dans le repository.

3. Afficher une liste de films

Pour l'instant, le layout qu'on a mis en place ne supporte que l'affichage d'une seule carte de film.

Passer la liste de films à la RecyclerView

Pour pouvoir fonctionner, une RecyclerView s'utilise toujours avec un Adapter qui gère la liste des éléments à afficher. L'Adapter a à son tour besoin d'un ViewHolder qui lui gère l'affichage d'un élément de la liste. Par souci d'efficacité, ces 2 classes vous ont été fournies et sont prêtes à être utilisées. Quand on implémente une recycler view pour la première fois, on peut avoir un peu de mal à comprendre comment tout cela fonctionne, voici donc quelques explications :

Le ViewHolder

Un view holder a simplement pour but de gérer l'affichage d'un élément de la liste. Si vous jetez un coup d'oeil sur la classe MovieViewHolder, vous verrez que son constructeur prend en paramètre une View. Cette vue correspond à une carte de film, et en appelant la méthode findViewById du paramètre itemView avec les bons ids, on récupère séparément des références sur les vues contenues dans la carte : la TextView qui affiche le titre, l'ImageView qui contient le poster, etc. Ces références sont utilisées plus tard dans la méthode bind() pour alimenter chaque carte de film avec les données d'un élément de la liste. C'est là qu'entre en jeu l'Adapter.

L'Adapter

Un adapter a pour rôle de faire le lien entre une liste d'objets de type Movie et les ViewHolders qui vont afficher chacun des éléments de la liste. Si vous jetez un coup d'oeil sur la classe MoviesAdapter, vous verrez qu'il contient les éléments suivants :

• un attribut de type List<Movie> dataSet qui permet de stocker la liste de films.

• une méthode onCreateViewHolder(@NonNull ViewGroup parent, int viewType) qui sert, comme son nom l'indique, à créer un ViewHolder, et donc à inflate le bon layout pour un élément de la liste en particulier. La vue à afficher dans le MovieViewHolder est celle contenue dans le layout item_movie.

• une méthode onBindViewHolder(@NonNull MovieViewHolder holder, int position) qui permet de passer un objet de type Movie à un MovieViewHolder.

Récupérer une liste de films dans le repository

Pour tester notre recycler view, utiliser la méthode getMovies() de MovieRepository (qui retourne une liste de 3 films) à la place de getMovie() dans le presenter.

Passer la liste à l'Adapter

• Résultat

  

4. Utiliser une API pour chercher les films à afficher

Comme vous vous en doutez, écrire nous même la liste des films à afficher n'a pas trop d'intérêt. Pour que notre application devienne vraiment utile, on va se servir de la base de données (non-officielle) disponible ici The Movie Database (TMDb) Plus précisément, on va utiliser l'API REST qui expose différents endpoints qui permettent d'interroger la base de données de différentes manières. La documentation exhaustive de cette API est disponible ici https://developers.themoviedb.org/3/getting-started

Découvrir l'API

Avant de l'intégrer dans le code de notre application, il est pertinent de prendre quelques minutes pour interagir avec L'API et comprendre son fonctionnement. Pour ce dojo, le endpoint /discover/movie suffit à notre besoin. Ce endpoint renvoie une liste de films qui correspond à la combinaison de filtres (paramètres) spécifiée dans la requête qu'on lui envoie. L'accès à l'API se fait à l'aide une clé d'API qu'il faut insérer dans chaque requête à l'aide du paramètre api_key.

Compléter la définition de l'API

Pour faciliter l'envoi de requêtes et la réception des réponses, la librairie Retrofit est très pratique. Vous pouvez jeter un coup d'oeil sur la la page web de Retrofit pour voir comment ça marche (principalement les sections Introduction, REQUEST METHOD, et URL MANIPULATION)

Retrofit est un client REST qui facilite l'échange avec une API REST. Pour pouvoir s'en servir, il faut déclarer une interface qui décrit les requêtes qu'on va faire auprès de l'API. Chaque requête se traduit par un prototype de méthode, annotée du type de requête (@GET, @POST, etc). L'annotation prend en paramètre le "path" de la requête sans la base url. On vous a fourni l'interface (MovieApi) avec la méthode suivante que nous utiliserons pour chercher les films qui vont sortir bientôt :

@GET("/3/discover/movie")
Call<RestDiscoverResponse> discoverMovies(
    @Query("api_key") String apiKey,
    @Nullable @Query("primary_release_date.gte") String fromDate,
    @Nullable @Query("primary_release_date.gte") String toDate,
    @Nullable @Query("primary_release_year") Integer year,
    @Query("language") String language
);

Compléter le repository

Le MovieRepository qu'on a actuellement nous renvoie des "mocks", c'est à dire des données stockées actuellement. Dans cette partie, on va remplacer ces mocks par des films récupérés via l'API. Pour ce faire, le repository va maintenant appeler les méthodes qu'on vient de définir dans l'API. Comme vous pouvez le constater, ces méthodes retournent une variable de type Call<type du résultat>. C'est seulement en appelant la méthode execute() de cette variable de type Call que la requête est réellement envoyée et si aucune exception I/O n'est levée, on récupère un objet de type Response<type du résultat>. Cet objet a une méthode isSuccessful() qui nous permet de savoir si le serveur a réussi à bien interpréter notre requête et nous a renvoyé une réponse 200. Dans ce cas on peut récupérer le contenu de la réponse via la méthode body() de l'objet Response qu'on a reçu.

• Résultat

  Si tout s'est bien passé, vous aurez une longue liste de films renvoyée par le serveur ! S'il y a un problème quelconque, c'est probablement dû à une erreur serveur ou à une requête mal formatée. Pour vous faciliter l'identification de la cause des éventuels problèmes, l'intercepteur graphique de requêtes HTTP Chuck a été attaché à Retrofit (d'où les 2 petites flèches en haut à gauche de l'écran). Cet outil vous permettra de voir ce que vous envoyer à l'API et ce qu'elle vous renvoie.

  

Compléter le layout avec les 3 onglets

Le but de cette partie est de rajouter ces 3 onglets pour pouvoir naviguer entre les différentes listes :

Pour cela, on va utiliser un TabLayout.

Gestion des clicks sur les onglets

• Bonus

  5. Ajout d'un film en favori 🃏

  ⏲

  Si tu as pris du retard: git stash -a && git checkout step5.0

  6. Affichage de la liste des favoris 🃏