M crea/react/TP React.md → crea/react/TP React.md

@@ -22,10 +22,11 @@ ---
 
 # Fonctionnalités demandées
 
+- **[Login]** Je peux me connecter sur l'app en entrant mon nom d'utilisateur et mot de passe défini au niveau de Strapi.
+- **[Profil]** Je peux voir et modifier mon profil (nom, prénom, email)
+- **[Publication]** Je peux voir les publications de tout le monde et peux écrire des messages en mon nom (feed public).
+- **[Chat]** Je peux envoyer et recevoir des messages de chat par MQTT
 - **[SignUp]** Je peux me créer un compte sur l'app. Un utilisateur est crée au niveau de Strapi.
-- **[Login]** Je peux me connecter sur l'app en entrant un nom d'utilisateur et un mot de passe.
-- **[Profile]** Je peux voir et modifier mon profil
-- **[Chat]** Je peux envoyer et recevoir des messages de chat en par MQTT
 
 ---
 
@@ -33,7 +34,6 @@ # Éléments évalués
 
 - Gestion des states
 - Gestion des styles
-- Implémentation SSR / CSR / SSG / Server Components
 - Liaison avec le backend
 - Qualité de code
   - Découpage logique des composants
@@ -42,64 +42,104 @@ - Organisation de la base de code
 
 ---
 
-# En option (bonus)
+# Choix libres
 
+- Méthode de styling
 - Utilisation de Typescript
-- Utilisation de GraphQL
-- Gestion de plusieurs canaux de chat
+- Utilisation de GraphQL plutôt qu'API REST
+- **SSR/SSG** (Pages router) ou **Server Components** (App router)
 
 ---
 
-# Payload pour le chat
+# Pages
 
-Afin que les messages échangés par MQTT soient lisibles par les
-apps des autres, mettons-nous d'accord sur un format de payload:
+Pour développer cette app, vous aurez donc besoin des pages suivantes:
 
-```json
-{
-  "author": {
-    "username": "Tim",
-    "id": 12 // ID Strapi de l'utilisateur
-  },
-  "message": "Hey!, bienvenue sur le chat 🦌",
-  "createdAt": "2023-06-20T11:32:00.000-04:00"
-}
-```
+- Page de login
+- Page "feed" pour voir la liste des publications + formulaire pour poster une publication
+- Page "profil" pour voir et éditer son profil
+- Page chat
+
+> Vous avez la liberté de faire + ou - de pages mais si ça respecte une logique d'utilisation. On ne veut pas tout mettre sur la même page.
 
 ---
 
-Pour gérer la date, je vous suggère d'utiliser la lib
-[Luxon](https://moment.github.io/luxon/#/).
+# Pondération
 
-```typescript
-// Récupérer la date en string standardisé
-const createdAtStr: string = DateTime.now().toISO();
-console.log(createdAtStr);
-// 2023-06-20T11:32:00.000-04:00
+En + du point de "présence":
 
-// Lire la date depuis le string standardisé
-const createdAt: DateTime = DateTime.fromISO(createdAtStr);
-console.log(createdAt.setLocale("fr").toLocaleString(DateTime.DATETIME_SHORT));
-// 20/06/2023 à 11:32
-```
+- **SignUp**: 0.5pt
+- **Login**: 1.25pt
+- **Profil**: 1pt
+- **Publication**: 1.5pt
+- **Chat**: 0.5pt
+- **Gestion des styles**: 0.5pt
 
-Dans `LocaleString`, on peut indiquer [plusieurs formats de date possibles](https://moment.github.io/luxon/#/formatting?id=presets).
+> Pas besoin de tout faire pour avoir 6.
+> Il est donc possible, par exemple, de faire l'impasse sur le SignUp et le Chat et
+> avoir quand même la note max.
 
 ---
 
-# Paramètres pour MQTT
+Des points peuvent être retirés si
 
-- Serveur: `test.mosquitto.org:8080`
-- Canal par défaut: `crea`
+- Le code n'est pas propre
+- La communication avec le backend ne fonctionne pas correctement
+- Le découpage des composants n'est pas réfléchi
+- Les states sont mal gérés (states inutiles, re-render inutiles,...)
+
+---
+
+**À rendre avant ce soir minuit.**
+
+Vous n'aurez accès au backend que pendant les heures de cours. Les heures supplémentaires servent uniquement à affiner ce qui a été fait en classe.
 
-> Si cela ne fonctionne pas avec le serveur de test fourni par mosquitto.org,
-> je mettrais en place un serveur dédié pour le TP.
+Dans un dépôt git, évidemmment.
+
+---
+
+# Gestion de l'authentification
+
+Attention à ne pas négliger la gestion de l'authentification (login).
+
+Il faut trouver un moyen de stocker le token JWT fourni par
+Strapi dans le navigateur et le fournir à chaque requête vers le backend.
+
+- [Doc de Strapi pour le login](https://docs.strapi.io/dev-docs/plugins/users-permissions#login)
+- [Doc de Strapi pour le signup](https://docs.strapi.io/dev-docs/plugins/users-permissions#registration)
+
+> Je recommande de commencer par le Login avant
+> de faire le reste.
+
+---
+
+# Authentification
+
+Si vous souhaitez ne pas faire le SignUp, vous pouvez utiliser un compte
+déjà créé.
+
+- Nom d'utilisateur: votre prénom tout en minuscule sans accent
+- Mot de passe: `cornemuse`
+
+---
+
+# Profil et Publications
+
+En plus des docs et références donnés dans les slides des cours,
+vous pouvez vous appuyer sur la documentation de Strapi pour savoir
+comment faire les requêtes:
+
+- Documentation générée à partir de la configuration Strapi:
+  `<URL du Strapi fourni>:1337/documentation/v1.0.0`.
+
+- [Documentation de l'API REST](https://docs.strapi.io/dev-docs/api/rest)
+- [Documentation de l'API GraphQL](https://docs.strapi.io/dev-docs/api/graphql)
 
 ---
 
 # Communiquer avec MQTT
 
-Vous pouvez utiliser mon hook `useTopic` tout prêt à l'emploi:
+Vous pouvez utiliser mon hook [`useTopic`](https://www.npmjs.com/package/usetopic) tout prêt à l'emploi (il faut l'installer avant):
 
 ```typescript
 import { useState } from "react";
@@ -131,6 +171,34 @@ ```
 
 ---
 
+# Payload pour le chat
+
+Afin que les messages échangés par MQTT soient lisibles par les
+apps des autres, mettons-nous d'accord sur un format de payload:
+
+```json
+{
+  "author": {
+    "username": "Tim",
+    "id": 12 // ID Strapi de l'utilisateur
+  },
+  "message": "Hey!, bienvenue sur le chat 🦌",
+  "createdAt": "2023-06-20T11:32:00.000-04:00"
+}
+```
+
+---
+
+# Paramètres pour MQTT
+
+- Serveur: `test.mosquitto.org:8080`
+- Canal par défaut: `crea`
+
+> Si cela ne fonctionne pas avec le serveur de test fourni par mosquitto.org,
+> je mettrais en place un serveur dédié pour le TP.
+
+---
+
 # Envoi de message en JSON
 
 MQTT permet d'échanger des messages en format string.
@@ -149,19 +217,19 @@ ```
 
 ---
 
-# Gestion de l'authentification
+# Questions ?
 
-Attention à ne pas négliger la gestion de l'authentification (login).
+Pendant la journée, je répondrais uniquement aux questions pour clarifier
+l'énoncé mais pas sur "comment faire le taf".
 
-Il faut trouver un moyen de stocker le token JWT fourni par
-Strapi dans le navigateur et le fournir à chaque requête vers le backend.
+Je suis également à dispo s'il y a des blocages quant à l'utilisation
+des deux serveurs (Strapi et broker MQTT).
 
-- [Doc de Strapi pour le signup](https://docs.strapi.io/dev-docs/plugins/users-permissions#registration)
-- [Doc de Strapi pour le login](https://docs.strapi.io/dev-docs/plugins/users-permissions#login)
+---
 
-> Je recommande de commencer par le SignUp et le Login avant
-> de faire le reste.
-
----
+# Mise en place pour Tim
 
-**Travail pratique à rendre vendredi (23.06) à 18h.**
+- [ ] Créer un Strapi
+- [ ] Installer les plugins GraphQL et Swagger
+- [ ] Créer le modèle "Publication"
+- [ ] Créer les comptes utilisateur