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
- node prompt et console chrome
  - bien lire les erreurs
- code déjà fait ensemble
  - le votre
  - https://github.com/ltruchot/pizza-yolo
- documentation angular
  - https://angular.io/guide/quickstart
- google, stackoverflow

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
- ex: https://wrapbootstrap.com/themes/blogs-magazines
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