crea/react/TP React.md (view raw)
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.**