1---
  2title: Travail pratique évalué
  3theme: ./_themes/5ika.css
  4highlightTheme: github
  5verticalSeparator: <!--v-->
  6revealOptions:
  7  transition: "fade"
  8---
  9
 10# React
 11
 12Travail pratique évalué
 13
 14---
 15
 16# Objectif du TP
 17
 18Développer un service de chat simpliste
 19en utilisant NextJS.
 20
 21---
 22
 23# Fonctionnalités demandées
 24
 25- **[SignUp]** Je peux me créer un compte sur l'app. Un utilisateur est crée au niveau de Strapi.
 26- **[Login]** Je peux me connecter sur l'app en entrant un nom d'utilisateur et un mot de passe.
 27- **[Profile]** Je peux voir et modifier mon profil
 28- **[Chat]** Je peux envoyer et recevoir des messages de chat en par MQTT
 29
 30---
 31
 32# Éléments évalués
 33
 34- Gestion des states
 35- Gestion des styles
 36- Implémentation SSR / CSR / SSG / Server Components
 37- Liaison avec le backend
 38- Qualité de code
 39  - Découpage logique des composants
 40  - Propreté du code
 41  - Organisation de la base de code
 42
 43---
 44
 45# En option (bonus)
 46
 47- Utilisation de Typescript
 48- Utilisation de GraphQL
 49- Gestion de plusieurs canaux de chat
 50
 51---
 52
 53# Payload pour le chat
 54
 55Afin que les messages échangés par MQTT soient lisibles par les
 56apps des autres, mettons-nous d'accord sur un format de payload:
 57
 58```json
 59{
 60  "author": {
 61    "username": "Tim",
 62    "id": 12 // ID Strapi de l'utilisateur
 63  },
 64  "message": "Hey!, bienvenue sur le chat 🦌",
 65  "createdAt": "2023-06-20T11:32:00.000-04:00"
 66}
 67```
 68
 69---
 70
 71Pour gérer la date, je vous suggère d'utiliser la lib
 72[Luxon](https://moment.github.io/luxon/#/).
 73
 74```typescript
 75// Récupérer la date en string standardisé
 76const createdAtStr: string = DateTime.now().toISO();
 77console.log(createdAtStr);
 78// 2023-06-20T11:32:00.000-04:00
 79
 80// Lire la date depuis le string standardisé
 81const createdAt: DateTime = DateTime.fromISO(createdAtStr);
 82console.log(createdAt.setLocale("fr").toLocaleString(DateTime.DATETIME_SHORT));
 83// 20/06/2023 à 11:32
 84```
 85
 86Dans `LocaleString`, on peut indiquer [plusieurs formats de date possibles](https://moment.github.io/luxon/#/formatting?id=presets).
 87
 88---
 89
 90# Paramètres pour MQTT
 91
 92- Serveur: `test.mosquitto.org:8080`
 93- Canal par défaut: `crea`
 94
 95> Si cela ne fonctionne pas avec le serveur de test fourni par mosquitto.org,
 96> je mettrais en place un serveur dédié pour le TP.
 97
 98---
 99
100# Communiquer avec MQTT
101
102Vous pouvez utiliser mon hook `useTopic` tout prêt à l'emploi:
103
104```typescript
105import { useState } from "react";
106import useTopic from "usetopic";
107
108const MQTT_SERVER = "mqtt://test.mosquitto.org:8080";
109const TOPIC = "crea";
110
111const Feed = () => {
112  const { messages, sendMessage } = useTopic(MQTT_SERVER, TOPIC);
113  const [value, setValue] = useState("");
114
115  const send = () => {
116    sendMessage(value);
117    setValue("");
118  };
119
120  return (
121    <div>
122      {messages.map((message, index) => (
123        <div key={index}>{message}</div>
124      ))}
125      <input value={value} onChange={e => setValue(e.target.value)} />
126      <button onClick={send}>Send</button>
127    </div>
128  );
129};
130```
131
132---
133
134# Envoi de message en JSON
135
136MQTT permet d'échanger des messages en format string.
137Pour échanger des payloads en JSON, il faut convertir le JSON en string à l'envoi,
138et inversement à la réception.
139
140```typescript
141// Envoi
142const messageStr = JSON.stringify({ author: { id: 12 } });
143sendMessage(messageStr);
144
145// Réception
146const message = JSON.parse(messageStr);
147console.log(message.author.id);
148```
149
150---
151
152# Gestion de l'authentification
153
154Attention à ne pas négliger la gestion de l'authentification (login).
155
156Il faut trouver un moyen de stocker le token JWT fourni par
157Strapi dans le navigateur et le fournir à chaque requête vers le backend.
158
159- [Doc de Strapi pour le signup](https://docs.strapi.io/dev-docs/plugins/users-permissions#registration)
160- [Doc de Strapi pour le login](https://docs.strapi.io/dev-docs/plugins/users-permissions#login)
161
162> Je recommande de commencer par le SignUp et le Login avant
163> de faire le reste.
164
165---
166
167**Travail pratique à rendre vendredi (23.06) à 18h.**