From 0db5c6b26a62d52a37f0b29208de4fd462ace018 Mon Sep 17 00:00:00 2001
From: Laurine <lenetlaurine@gmail.com>
Date: Mon, 27 May 2024 18:10:33 +0200
Subject: [PATCH] wip
---
resources/docs/docs/premiere-page/home.md | 147 ++++++++++++++++++++++
resources/docs/mkdocs.yml | 1 +
2 files changed, 148 insertions(+)
create mode 100644 resources/docs/docs/premiere-page/home.md
diff --git a/resources/docs/docs/premiere-page/home.md b/resources/docs/docs/premiere-page/home.md
new file mode 100644
index 0000000..3647ce3
--- /dev/null
+++ b/resources/docs/docs/premiere-page/home.md
@@ -0,0 +1,147 @@
+# La page Accueil
+
+*Maintenant que nous avons une jolie barre de navigation, nous pouvons coder une belle page Accueil*
+On veut quelque chose qui ressemble à [ça](https://allocine.takima.dev/){:target="_blank"}
+
+## Création du composant Home
+Comme pour la génération du composant `navbar`, tu peux générer un nouveau composant pour la page accueil !
+```
+ng g c home
+```
+Tu peux ensuite l'afficher depuis le fichier `app.component.html` via la valeur du `selector`
+```
+<app-navbar [title]="title"></app-navbar>
+<app-home></app-home>
+```
+> ⚠️ N'oublie pas les imports !!
+
+***Tu dois avoir `home works!` qui s'affiche sur ta page***
+
+
+## Appel au backend
+Les données affichées sur la page viennent du backend que tu as lancé au moment des installations.
+Un backend et un frontend communiquent généralement via des appels https
+Tous les appels que tu peux faire sont définis sur la [documentation](http://localhost:8080/swagger-ui/index.html#/){:target="_blank"} du backend
+
+*Notre objectif est donc de récupérer tous les films via un appel http au backend et de les afficher sur notre page*
+
+### 1. Création du model
+Pour récupérer tous les films nous utilisons ce [endpoint](http://localhost:8080/swagger-ui/index.html#/movie-controller/getMovies){:target="_blank"} qui est un appel GET
+On voit que ça retourne une liste d'objets:
+```
+[
+ {
+ "id": 0,
+ "title": "string",
+ "director": "string",
+ "rate": 0,
+ "releaseDate": "2024-05-27T14:53:27.038Z",
+ "synopsis": "string",
+ "image": "string"
+ }
+]
+```
+
+Nous devons, coté front, créer un objet qui ressemble à ce retour pour pouvoir récupérer les données au moment de l'appel.
+
+C'est parti :
+<ul>
+<li>Clique droit sur le dossier `app` et créer un dossier que tu appelles `models`</li>
+<li>Clique droit sur le dossier `models` et créer un ficher que tu appelles `movie.ts`</li>
+<li>Dans ce fichier on créer l'objet qui représente les films</li>
+</ul>
+
+```ts
+export interface Movie {
+ id: number;
+ title: string;
+ releaseDate: Date;
+ director: string;
+ rate: number;
+ synopsis: string;
+ image: string;
+}
+```
+
+> On utilise **export** pour pouvoir utiliser cet objet dans d'autres fichiers
+> On fait une **interface** qui colle au model du back (avec les memes noms de champs)
+
+### 1. Création d'un service pour appeler le back
+Nous avons besoin d'un service que nous pourrons utiliser à partir de nos composants pour appeler notre back.
+
+> La commande pour générer un service est très semblable à celle qui nous permet de générer un composant
+> ```
+> ng generate service services/movies
+> ```
+> Le `services/` permet de préciser un dossier dans lequel mettre le service
+
+Pour faire des appels http à notre backend nous avons besoin d'un service fourni par Angular le `HttpClient` qu'il faut provider de manière globale.
+
+Pour ça, ajoute dans la liste des `providers` du `app.config.ts` `provideHttpClient()`
+Tu dois donc avoir :
+```ts
+export const appConfig: ApplicationConfig = {
+ providers: [provideRouter(routes), provideHttpClient()]
+};
+```
+
+Maintenant, il faut faire l'appel à notre backend : <br>
+- Rends-toi dans le fichier `movies.service.ts`<br>
+- Supprime le `constructor` <br>
+- Injecte l'`HttpClient` dans la classe en déclarant une variable : ` private readonly httpClient = inject(HttpClient)` <br>
+- Déclare l'url de ton backend sur laquelle se trouve les données que tu veux récupérer : `private readonly url = "http://localhost:8080/movies"` <br>
+- Crée une méthode dans la classe qui fait l'appel :
+```ts
+getMovies(): Observable<Movie[]> {
+ return this.httpClient.get<Movie[]>(this.url);
+ }
+```
+
+> Comme nous récupérons des données via un appel GET nous utilisons la methode `get` de l'`HttpClient`
+> Notre appel récupère une liste de `Movies` que l'on doit préciser au niveau du `get`
+> La méthode `get` de l'`HttpClient` nous retourne toujours un `Observable`
+> Un `Observable` est un objet qui permet de gérer des flux de données asynchrones
+> On doit `subscribe` pour récupérer son contenu
+
+***Bravo ton appel est crée !!***
+
+### 2. Appel du service depuis le composant
+Maintenant que ton appel au backend est accessible depuis la méthode `getMovies()`, tu dois appeler cette méthode depuis ton composant
+
+Pour cela: <br>
+- Rends-toi dans le fichier `home.component.ts` <br>
+- Injecte ton service via une variable `private readonly moviesService = inject(MoviesService)`
+- Crée une variable pour récupérer ta liste de `Movie` : `movies$: Observable<Movie[]> = this.moviesService.getMovies()`
+
+> Comme vu un peu plus haut, on doit `subscribe` pour récupérer le contenu d'un observable. On peut le faire de deux façons :
+> - Soit en utilisant le `.subscribe()` comme ça :
+> ```
+> movies: Movie[] = []
+> this.moviesService.getMovies(moviesFromBackend => this.movies = moviesFromBackend)
+> ```
+> Soit en utilisant directement le Pipe `| async` dans un fichier html
+> ```
+> @for (movie of movies$ | async; track movie.id)
+> ```
+
+Dans notre cas, on utilise le `| async` dans le `home.component.html`
+```
+@for (movie of movies$ | async; track movie.id) {
+ <p>{{movie.id}}</p>
+ <p>{{movie.title}}</p>
+ <p>{{movie.releaseDate | date}}</p>
+ <p>{{movie.director}}</p>
+ <p>{{movie.rate}}</p>
+ <p>{{movie.synopsis}}</p>
+}
+```
+
+***Tadaaaaam, tes données s'affichent sur ta page Accueil !!!***
+
+### 3. On rend tout ça joli joli
+
+
+
+
+
+
diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml
index e207a58..d7e5f58 100644
--- a/resources/docs/mkdocs.yml
+++ b/resources/docs/mkdocs.yml
@@ -16,6 +16,7 @@ nav:
- Le app-component: 'premiere-page/app-component.md'
- Ton premier composant: 'premiere-page/navbar.md'
- Le @Input: 'premiere-page/input.md'
+ - La page Accueil: 'premiere-page/home.md'
- Page d'avis:
- Création du composant: 'avis-page/create-component.md'
- La navigation: 'avis-page/navigation.md'
--
GitLab