Angular challenge

 

actorstudio

Le projet

Nous souhaitons créer un site internet où les fans peuvent suivre les actualités de leurs acteurs préférés, et découvrir tous leurs films.

 

Il y aura:

  • une liste de tous les acteurs
  • une liste de nos acteurs favoris
  • une fiche par acteur

Bienveillance et autonomie

L'état d'esprit

  • s'entraider
  • prendre son temps, faire un code très lisible et très propre, et un beau site
  • avoir confiance en soi et aux autres
  • trouver les réponses soi-même

Set up

  • Lancer le"node prompt"
  • Si ce n'est pas déjà fait, installer angular CLI:
    • npm install -g @angular/cli
  • Créer un nouveau projet intitulé "actorstudio"
    • ng new actorstudio
      • ​routing: oui
      • styles: scss*
  • Se placer à la racine du projet
    • ​ cd actorstudio
  • Lancer l'outil de développement
    • ng serve --poll 2000
  • Ouvrir google-chrome sur http://localhost:4200/

*angular compile automatiquement votre scss: écrivez le simplement dans les components ou dans styles.scss

Premiers pas

  • Ajouter la feuille de style bootstrap au site, dans l'index.html, et la balise méta pour le responsive
  • Réfléchir à la forme du site
    • une liste à gauche prenant 25% de l'écran, « mes acteurs favoris », vide pour l'instant
    • un header qui ne change pas, avec le titre et le logo du site
    • un footer qui ne change pas, avec  la mention « ©2019 - Créé par <prénom nom>, web developer  » + un lien vers votre github
    • enfin, la vue principale, qui comprendra les components affiché dans le routeur-outlet
  • Créer des components pour la favorite-list, le header, le footer
    • ​ exemple: ng generate component header

app component

  • N'oubliez pas : tout ce que vous utilisez dans angular doit être déclaré dans l'AppModule (cela se fait automatiquement lorsqu'on génère les components et les services)
  • Dans le HTML de l'app-component ajouter
    • le <app-favorite-list></app-favorite-list>
    • le <app-header></app-header>
    • le <app-footer></app-footer>
    • le <router-outlet></router-outlet> qui comprendra les components qui changent à chaque page
  • Choisir les bonnes classes bootstrap pour faire un beau site, bien organisé
  • Trouver des idées pour que le site s'affiche bien sur mobile
  • Chercher sur internet et bootstrap des idées, des exemples, l'inspiration
  • Finaliser le header, le footer, et la liste vide de favoris

La home

  • Créer un nouveau component pour la home
  • Associer ce component au chemin vide "" dans le l'AppRoutingModule
  • Ce component doit maintenant s'afficher dans le router-outlet lorsque vous êtes sur http://localhost:4200/
  • Créer un fichier actors.ts, qui exporte un tableau comprenant une liste d'acteurs de votre choix (au moins 10)
    • export const actors = [{ id: 0,  name: "Nicolas Cage", age: 55 }, ...]
    • id unique, nom, age, photo, petite description, tableau de noms de films
    • ajouter autant d'autres infos que vous le voulez, à votre aise
  • Importer ce tableau dans le HomeComponent, et en faire une propriété de la home accessible dans le HTML
    • ​import { actors } from "./../actors.ts"
    • puis dans la class, ajouter la propriété actors = actors;

step 1

La home

  • Dans le HTML, itérer sur tous les acteurs avec un *ngFor, de manière à présenter uniquement leurs informations principales (nom, age, photo, petite description), block par block
  • Les autres infos seront visibles plus tard dans la « fiche »
  • Dans chaque block d'acteur, il y a une étoile vide
  • Cette étoile deviendra pleine quand on cliquera si l'acteur est l'un de nos favoris
  • Créer un service pour gérer les acteurs favoris
    • ng generate service actors
  • Importez ce service dans la home, avec le mot clef "public"

step 2

Actors service

  • Dans la class ActorsServices, créer une propriété "favorites", c'est un tableau qui contiendra les acteurs préférés
    • favorites = [];
  • Créer une méthode "toggleFavorite()"
    • elle ajoute un acteur qu'on lui passe en paramètre au tableau "favorites"
    • si l'acteur existe déjà, elle le retire
    • utilisez les id unique pour vérifier s'il existe où non
  • Créer une méthode "isFavorite()" qui vérifie si un acteur est dans la liste "favorites" (elle retourne true ou false)
  • Dans le HTML du HomeComponent, faire en sorte que :
    • lorsqu'on clique sur l'étoile, actorsServices.toggleFavorite(<acteur>) est appelé et l'acteur est ajouté ou retiré de la liste selon le cas
    • faire une condition actorsServices.isFavorite(<acteur>) qui change l'étoile
      • ​Si l'acteur est favori elle est pleine
      • S'il ne l'est pas elle est vide

Liste d'acteurs favoris

  • La liste d'acteurs favoris sur la gauche de toutes les pages, présente ce qu'il y a dans le tableau actorsService.favorite
  • importer et charger le ActorsServices dans le FavoriteListComponent
  • Donner le nombre d'acteurs favoris en haut de la section: « Vous suivez actuellement x acteurs. ». Si il y a 0 ou 1 acteur, ne pas mettre de "s" au mot "acteur"
  • Présenter le contenu d'une manière qui vous plaît grâce à un *ngFor
  • Utiliser un *ngIf pour présenter le message "vous n'avez pas de favori pour l'instant" si  le tableau est vide
  • ajouter une croix         pour pouvoir supprimer un favori en un clic (en réutilisant la méthode toggleFavorite).
  • bonus: trouver un moyen de proposer une fenêtre de confirmation "window.confirm" avant de supprimer le favori

La fiche « acteur » 

  • creer un component "actor" pour présenter la fiche acteur
  • dans le AppRoutingModule, prévoir l'url "actor" pour présenter cet ActorComponent
  • Lorsque l'on va sur http://localhost:4200/actor, on doit maintenant voir ce component à l'emplacement du routeur-outlet
  • Pour savoir quelle fiche d'acteur on présente, on va mémoriser l'id de l'acteur choisi
    • ajouter à l'ActorsService la propriété chosenActorId = 1;
    • dans l'ActorComponent:
      • on importe et on charge l'actorsService
      • on importe la liste des acteurs (actors.ts) et on l'ajoute à une propriété "actors", comme dans HomeComponent

Step 1

La fiche « acteur » 

  • Désormais, on peut accéder à « l'acteur choisi », il suffit d'écrire une fonction ou un getter qui le trouve dans le tableau
  • Dans l'ActorComponent, rajoutez ce getter:

Step 2

get currentActor () {
    let currentActor;
    let actors = this.actors;
    let id = actorsService.chosenActorId;
    // écrire ici le code qui trouve le bon acteur dans le tableau de favoris
    return currentActor;

}
  • grâce à votre getter, vous pouvez maintenant afficher votre « currentActor » directement dans le HTML
  • Montrer toutes ces information de manière plaisante, dont une liste de ses films

La fiche « acteur » 

  • Dans le HomeComponent et dans le FavoriteListComponent on trouve des listes acteurs
    • faire en sorte que lorsqu'on clic sur un acteur, on accède directement à sa fiche, grâce à une méthode (click)
    • Pour cela, il nous faudra:
      • changer ce qu'il y a dans actorsService.chosenActorId au clic
      • charger le service Router et utiliser router.navigate pour rejoindre la page /actor
    • Attention: est-ce que le clic sur l'étoile marche toujours ? Obtenir un comportement qui vous satisfait

Step 3

  • Bonus 1: Ajouter une gestion des erreurs 404 (url inconnue), et une redirection automatique vers la home au bout de 5 secondes
  • Bonus 2: votre application charge les acteurs avec le service HttpClient, grâce au HttpClientModule
  • Bonus 3: grâce au FormsModule, vous pouvez utiliser [ngModel]. En haut de la home, faire un champ de recherche qui filtre les acteurs présenté selon leur noms
    • écrire un getter pour les actors, à la place de la propriété actors existante
    • utiliser la méthode d'Array « filter » pour filtrer
    • utiliser la méthode de string  « includes » filtrer selon le contenu de la recherche de l'utilisateur
    • ex:
const isNice = "a nice string".includes("nice");
// isNice vaut true !

BRAVO À TOUTES ET TOUS
Veuillez mettre ce code sur votre github, puis m'envoyer un lien vers ce repository à

loic.truchot.pro@gmail.com

ng-challenge-fij

By Loïc TRUCHOT

Made with Slides.com

ng-challenge-fij

  • 344

More from Loïc TRUCHOT