A crea/react/TP React.md

@@ -0,0 +1,167 @@ 
+---
+title: Travail pratique évalué
+theme: ./_themes/5ika.css
+highlightTheme: github
+verticalSeparator: <!--v-->
+revealOptions:
+  transition: "fade"
+---
+
+# React
+
+Travail pratique évalué
+
+---
+
+# Objectif du TP
+
+Développer un service de chat simpliste
+en utilisant NextJS.
+
+---
+
+# Fonctionnalités demandées
+
+- **[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
+
+---
+
+# É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
+  - Propreté du code
+  - Organisation de la base de code
+
+---
+
+# En option (bonus)
+
+- Utilisation de Typescript
+- Utilisation de GraphQL
+- Gestion de plusieurs canaux de chat
+
+---
+
+# 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"
+}
+```
+
+---
+
+Pour gérer la date, je vous suggère d'utiliser la lib
+[Luxon](https://moment.github.io/luxon/#/).
+
+```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
+
+// 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
+```
+
+Dans `LocaleString`, on peut indiquer [plusieurs formats de date possibles](https://moment.github.io/luxon/#/formatting?id=presets).
+
+---
+
+# 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.
+
+---
+
+# Communiquer avec MQTT
+
+Vous pouvez utiliser mon hook `useTopic` tout prêt à l'emploi:
+
+```typescript
+import { useState } from "react";
+import useTopic from "usetopic";
+
+const MQTT_SERVER = "mqtt://test.mosquitto.org:8080";
+const TOPIC = "crea";
+
+const Feed = () => {
+  const { messages, sendMessage } = useTopic(MQTT_SERVER, TOPIC);
+  const [value, setValue] = useState("");
+
+  const send = () => {
+    sendMessage(value);
+    setValue("");
+  };
+
+  return (
+    <div>
+      {messages.map((message, index) => (
+        <div key={index}>{message}</div>
+      ))}
+      <input value={value} onChange={e => setValue(e.target.value)} />
+      <button onClick={send}>Send</button>
+    </div>
+  );
+};
+```
+
+---
+
+# Envoi de message en JSON
+
+MQTT permet d'échanger des messages en format string.
+Pour échanger des payloads en JSON, il faut convertir le JSON en string à l'envoi,
+et inversement à la réception.
+
+```typescript
+// Envoi
+const messageStr = JSON.stringify({ author: { id: 12 } });
+sendMessage(messageStr);
+
+// Réception
+const message = JSON.parse(messageStr);
+console.log(message.author.id);
+```
+
+---
+
+# 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 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.
+
+---
+
+**Travail pratique à rendre vendredi (23.06) à 18h.**