• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/09/2020

Entraînez-vous en améliorant l'application pour gérer vos films vus

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

À vous de jouer !

Montrez à vos amis que vous êtes un vrai cinéphile !

Dans cette activité, vous allez partir de l'application que nous avons vue dans le cours. Vous pouvez télécharger le projet de départ en cliquant ici. Pour installer et lancer l’application de départ, vous devez suivre les instructions du fichier README.md.

Je vous propose d'améliorer votre application en y ajoutant deux fonctionnalités :

  • la gestion des films vus,

  • l'affichage de la date de sortie de ces films.

Commençons par la première fonctionnalité, vous allez gérer les films que vous avez vus ! Un peu à la manière des films favoris, vous allez ajouter un bouton, dans le détail des films, permettant de marquer un film comme vu. Les films vus seront répertoriés dans un nouvel onglet prévu à cet effet appelé “Mes Films Vus”. L’affichage des films sera différent de celui des autres onglets mais il sera toujours possible d’accéder au détail d’un film en cliquant dessus.

Voici un aperçu de cette fonctionnalité (les cercles rouges représentent les clics de l’utilisateur) :

Lorsque vous aurez réalisé cette fonctionnalité, vous pourrez passer à la suite, c’est-à-dire afficher la date de sortie de nos films vus grâce à un clic long dessus. Voici un aperçu de cette deuxième fonctionnalité (le cercle rouge épais représente un clic long de l’utilisateur) :

Vous aurez besoin de cette image pour l’onglet des films vus :  Cliquez ici pour la télécharger.

Quelques conseils

  • Pensez à bien découper vos vues en components.

  • Faites bien la différence entre les données qui doivent être gérées par le state de vos components et celles par le state global du store Redux.

  • Pensez à l’immuabilité des reducers sur Redux.

  • Regardez du côté des styles applicables aux Images React Native pour réaliser le cercle avec l’image du film.

  • Regardez du côté des évènements sur une Touchable React Native pour détecter un clic long.

Consignes de rendu

Avant de livrer votre projet, pensez à :

  • Enlever votre clé d’API The Movie Database, remplacez-la par :   const API_TOKEN = "YOUR_TOKEN_HERE";

  • Supprimer le dossier node_modules de votre projet, il n’est pas nécessaire de le livrer.

  • Supprimer le dossier build présent dans le dossier ios.

Déposez votre travail dans un espace de stockage type dropbox ou drive et copiez le lien partageable dans un document texte. Enregistrez ce document texte au format pdf, compressez-le et déposez le .zip.

Vérifiez votre travail

Commencez par ajouter votre token d’API The Movie Database dans le fichier /API/TMDBApi.js. Puis, pour lancer l’application, vous devez vous placer dans le projet avec un terminal.

Pour installer les librairies et dépendances, tapez la commande dans le terminal :

$ npm install

Et enfin, la commande suivante, pour lancer l’application sur iOS :

$ react-native run-ios

ou celle-ci pour lancer l’application sur Android :

$ react-native run-android

Vous pouvez ouvrir les classes sur un éditeur de texte et contrôler le code fourni.

Passons en revue ce que vous devez vérifier !

Utiliser les props, le state et les styles avec React

  • Les props sont bien utilisées et de manière pertinente.

  • Le state est bien utilisé et de manière pertinente.

  • Le state est mise à jour correctement.

  • Les styles sont externalisés.

  • Les noms des styles externalisés sont clairs et ont un sens.

  • Les styles appliqués permettent de recréer à l’identique le template demandé.

Les concepts propre à React sont les props et le state, il est important de les utiliser et surtout à bon escient.

Ici on s’attend à ce que le développeur ait utilisé les props pour faire passer son film d’un component à un autre et, plus précisément, du component affichant sa liste de films (FlatList) au component définissant les items de sa liste de films.

Il a bien utilisé les props également pour gérer la navigation en faisant passer :

  • Soit la navigation du component affichant sa liste de films au component définissant les items de sa liste de films.

  • Soit une méthode du component affichant sa liste de films au component définissant les items de sa liste de films et, dans ce cas, il a bien pensé à binder cette dernière avec le fonction bind de Javascript ou une fonction fléchée.

Il est primordial que le développeur ait utilisé le state et setState pour gérer l’affichage du titre du film ou de la date de sortie lors d’un clic long sur un film.

On retrouve bien la prop onLongPress pour gérer l’évènement d’un clic long sur un film.

Ensuite, il s’agit ici de vérifier que les styles sont pertinents, qu’il n’y a pas trop de styles définis et donc, potentiellement, de styles inutiles.

Les styles sont toujours externalisés et possèdent des noms pertinents permettant rapidement de les identifier.

Le développeur a bien utilisé le style ‘borderRadius’ pour réaliser le cercle avec l’image du film.

Attention, il y a toujours plusieurs manières de réaliser des vues avec les styles, ne pas s’attarder sur une seule façon de faire. Vérifier simplement que le rendu finale est cohérent et conforme à celui demandé.

Gérer une donnée dans le state global avec Redux

  • Un reducer est créé par fonctionnalité.

  • Les noms des reducers sont clairs, respectent les conventions et ont un sens.

  • Les reducers respectent le principe d’immuabilité.

  • Le store Redux et les reducers créés sont correctement connectés aux components.

  • Une action permet de mettre à jour les données du state global.

Cette fois, il faut vérifier que Redux et ses concepts sont compris et maîtrisés : storestate globalaction et reducer.

Ici on s’attend à retrouver un nouveau reducer ajouté au store Redux au moment de sa création (fonction createStore).

Que le reducer soit persisté avec une librairie comme redux-persist ou non n’a aucune importance ici, il s’agit uniquement de se focaliser sur l’implémentation d’une gestion de donnée avec Redux.

Le reducer compte une ou deux actions maximum selon l’option choisie par le développeur :

  • S'il n’y a qu’une seule action, celle-ci doit ajouter le film s'il n’est pas déjà présent et le supprimer sinon.

  • S'il y a deux actions, celles-ci doivent respectivement ajouter le film et le supprimer.

Le reducer est bien initialisé avec un state initial, contenant un tableau de films vide.

Le reducer respecte à la lettre le principe d’immuabilité, à aucun moment le state passé en paramètre n’est modifié directement !

Attention, il y a toujours plusieurs manières d’ajouter / supprimer un objet d’un tableau en Javascript, ne pas s’attarder sur une seule façon de faire, ni sur l’utilisation, ou non, des fonctionnalités permises par ES6.

L’appui sur le bouton “Marquer comme vu” / “Non vu” doit envoyer une action, correctement construite, au store Redux, grâce à la fonction dispatch.

Les components nécessitant les données du store Redux et des films vus sont connectés et les films vus sont mappés aux props des components.

Normalement le développeur ne doit être amené à connecter que deux components au store Redux :

  • Le component qui envoie l’action et affiche le bouton “Marquer comme vu” / “Non vu”

  • Le component qui affiche la liste des films vus.

Développer une application mobile React Native fonctionnelle

  • Le projet fonctionne comme indiqué dans l'énoncé.

Il s’agit ici de vérifier que l’application est fonctionnelle et qu’elle respecte bien l’énoncé de l’exercice.

En réalisant les 6 étapes de la première fonctionnalité et les 3 étapes de la suivante, on rencontre les mêmes interactions et on arrive au même résultat.

Dans cette partie, ne pas se préoccuper du rendu visuel de l’application mais uniquement de l’aspect fonctionnel.

Rédiger un code propre et facilement utilisable par d'autres développeurs

Pour cette compétence supplémentaire, il s'agit de voir si le code est très facilement compréhensible par un autre développeur. Un code lisible doit avoir un nommage clair pour chaque composant (components, variables, méthodes, props, reducers et styles) en utilisant un standard de nommage.

Il est important de séparer chaque partie de l'application en différentes classes et méthodes. Pour ce projet on s'attend à trouver deux components pour gérer l’onglet “Mes Films Vus” :

  • un component pour afficher la liste de films vus (avec une FlatList),

  • un component pour définir les items de la liste de films vus.

Et, dans la définition des items de la liste de films vus, 4 components React Native :

  • Touchable (TouchableOpacity / TouchableHighlight etc.)

  • Image

  • View

  • Text

Dans la même idée on s'attend à trouver des méthodes pour :

  • afficher le bouton “Marquer comme vu” ou “Non vu” ;

  • envoyer l’action d’ajout / suppression du film vu au store redux ;

  • passer de la vue “Mes Films Vus” à la vue “Détail du film" ;

  • afficher le titre du film ou la date de sortie.

Attention, il ne faut pas rester bloqué sur une seule façon d'organiser le code, l'important est d'avoir un code très facilement compréhensible en fonction du but de l'application et surtout un code très facilement lisible.

Exemple de certificat de réussite
Exemple de certificat de réussite