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 réseau social très simpliste
 19
 20---
 21
 22# Fonctionnalités demandées
 23
 24- **[Login]** Je peux me connecter sur l'app en entrant mon nom d'utilisateur et mot de passe défini au niveau de Strapi.
 25- **[Profil]** Je peux voir et modifier mon profil (nom, prénom, email)
 26- **[Publication]** Je peux voir les postes de tout le monde et peux écrire des messages en mon nom (feed public).
 27- **[Chat]** Je peux envoyer et recevoir des messages de chat par MQTT
 28- **[SignUp]** Je peux me créer un compte sur l'app. Un utilisateur est crée au niveau de Strapi.
 29
 30---
 31
 32# Éléments évalués
 33
 34- Gestion des states
 35- Gestion des styles
 36- Liaison avec le backend
 37- Qualité de code
 38  - Découpage logique des composants
 39  - Propreté du code
 40  - Organisation de la base de code
 41
 42---
 43
 44# Choix libres
 45
 46- Méthode de styling
 47- Utilisation de Typescript
 48- Utilisation de GraphQL plutôt qu'API REST
 49- Base NextJS ou ViteJS
 50- Si NextJS, **SSR/SSG** (Pages router) ou **Server Components** (App router)
 51
 52---
 53
 54# Pages
 55
 56Pour développer cette app, vous aurez donc besoin des pages suivantes:
 57
 58- Page de login
 59- Page "feed" pour voir la liste des postes + formulaire pour poster un nouveau poste
 60- Page "profil" pour voir et éditer son profil
 61- Page chat
 62
 63> 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.
 64
 65---
 66
 67# Pondération
 68
 69En + du point de "présence":
 70
 71- **SignUp**: 0.5pt
 72- **Login**: 1.25pt
 73- **Profil**: 1pt
 74- **Poste**: 1.5pt
 75- **Gestion des styles**: 0.5pt
 76- **Chat**: 0.5pt
 77
 78> Pas besoin de tout faire pour avoir 6.
 79> Il est donc possible, par exemple, de faire l'impasse sur le SignUp et le Chat et
 80> avoir quand même la note max.
 81
 82---
 83
 84Des points peuvent être retirés si
 85
 86- Le code n'est pas propre
 87- La communication avec le backend ne fonctionne pas correctement
 88- Le découpage des composants n'est pas réfléchi
 89- Les states sont mal gérés (states inutiles, re-render inutiles,...)
 90
 91---
 92
 93**À rendre avant ce soir minuit.**
 94
 95Vous 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.
 96
 97Dans un dépôt git, évidemmment.
 98
 99---
100
101# Gestion de l'authentification
102
103Il faut trouver un moyen de stocker le token JWT fourni par
104Strapi dans le navigateur (`localStorage`) et le fournir à chaque requête vers le backend.
105
106- [Doc de Strapi pour le login](https://docs.strapi.io/dev-docs/plugins/users-permissions#login)
107- [Doc de Strapi pour le signup](https://docs.strapi.io/dev-docs/plugins/users-permissions#registration)
108
109> Je recommande de commencer par le Login avant
110> de faire le reste.
111
112---
113
114# Authentification
115
116Si vous souhaitez ne pas faire le SignUp, vous pouvez utiliser un compte
117déjà créé.
118
119- Nom d'utilisateur: votre prénom tout en minuscule sans accent
120- Mot de passe: `cornemuse`
121
122---
123
124# Profil et Publications
125
126En plus des docs et références donnés dans les slides des cours,
127vous pouvez vous appuyer sur la documentation de Strapi pour savoir
128comment faire les requêtes:
129
130- Documentation générée à partir de la configuration Strapi:
131  `<URL du Strapi fourni>:1337/documentation/v1.0.0`.
132
133- [Documentation de l'API REST](https://docs.strapi.io/dev-docs/api/rest)
134- [Documentation de l'API GraphQL](https://docs.strapi.io/dev-docs/api/graphql)
135
136---
137
138Exemple `curl` pour envoyer une requête de création de poste à l'API:
139
140```bash
141curl 'http://localhost:1337/api/posts' \
142-X POST \
143--header 'Authorization: Bearer <TOKEN RÉCUPÉRÉ>' \
144--data '{
145    "data": {
146        "title": "Titre du premier poste",
147        "content": "Bienvenue sur mon feed"
148    }
149}'
150```
151
152
153---
154
155# Communiquer avec MQTT
156
157Vous pouvez utiliser le hook [`useTopic`](https://www.npmjs.com/package/usetopic) tout prêt à l'emploi (il faut l'installer avant):
158
159```typescript
160import { useState } from "react";
161import useTopic from "usetopic";
162
163const MQTT_SERVER = "mqtt://test.mosquitto.org:8080";
164const TOPIC = "crea";
165
166const Feed = () => {
167  const { messages, sendMessage } = useTopic(MQTT_SERVER, TOPIC);
168  const [value, setValue] = useState("");
169
170  const send = () => {
171    sendMessage(value);
172    setValue("");
173  };
174
175  return (
176    <div>
177      {messages.map((message, index) => (
178        <div key={index}>{message}</div>
179      ))}
180      <input value={value} onChange={e => setValue(e.target.value)} />
181      <button onClick={send}>Send</button>
182    </div>
183  );
184};
185```
186
187---
188
189# Payload pour le chat
190
191Afin que les messages échangés par MQTT soient lisibles par les
192apps des autres, mettons-nous d'accord sur un format de payload:
193
194```json
195{
196  "author": {
197    "username": "Tim",
198    "id": 12 // ID Strapi de l'utilisateur
199  },
200  "message": "Hey!, bienvenue sur le chat 🦌",
201  "createdAt": "2023-06-20T11:32:00.000-04:00"
202}
203```
204
205---
206
207# Paramètres pour MQTT
208
209- Serveur: `test.mosquitto.org:8080`
210- Canal par défaut: `crea`
211
212> Si cela ne fonctionne pas avec le serveur de test fourni par mosquitto.org,
213> je mettrais en place un serveur dédié pour le TP.
214
215---
216
217# Envoi de message en JSON
218
219MQTT permet d'échanger des messages en format string.
220Pour échanger des payloads en JSON, il faut convertir le JSON en string à l'envoi,
221et inversement à la réception.
222
223```typescript
224// Envoi
225const messageStr = JSON.stringify({ author: { id: 12 } });
226sendMessage(messageStr);
227
228// Réception
229const message = JSON.parse(messageStr);
230console.log(message.author.id);
231```
232
233---
234
235# Questions ?
236
237Pendant la journée, je répondrais uniquement aux questions pour clarifier
238l'énoncé mais pas sur "comment faire le taf".
239
240Je suis également à dispo s'il y a des blocages quant à l'utilisation
241des deux serveurs (Strapi et broker MQTT).