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- **[Login]** Je peux me connecter sur l'app en entrant mon nom d'utilisateur et mot de passe défini au niveau de Strapi.
 26- **[Profil]** Je peux voir et modifier mon profil (nom, prénom, email)
 27- **[Publication]** Je peux voir les publications de tout le monde et peux écrire des messages en mon nom (feed public).
 28- **[Chat]** Je peux envoyer et recevoir des messages de chat par MQTT
 29- **[SignUp]** Je peux me créer un compte sur l'app. Un utilisateur est crée au niveau de Strapi.
 30
 31---
 32
 33# Éléments évalués
 34
 35- Gestion des states
 36- Gestion des styles
 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# Choix libres
 46
 47- Méthode de styling
 48- Utilisation de Typescript
 49- Utilisation de GraphQL plutôt qu'API REST
 50- **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 publications + formulaire pour poster une publication
 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- **Publication**: 1.5pt
 75- **Chat**: 0.5pt
 76- **Gestion des styles**: 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
103Attention à ne pas négliger la gestion de l'authentification (login).
104
105Il faut trouver un moyen de stocker le token JWT fourni par
106Strapi dans le navigateur et le fournir à chaque requête vers le backend.
107
108- [Doc de Strapi pour le login](https://docs.strapi.io/dev-docs/plugins/users-permissions#login)
109- [Doc de Strapi pour le signup](https://docs.strapi.io/dev-docs/plugins/users-permissions#registration)
110
111> Je recommande de commencer par le Login avant
112> de faire le reste.
113
114---
115
116# Authentification
117
118Si vous souhaitez ne pas faire le SignUp, vous pouvez utiliser un compte
119déjà créé.
120
121- Nom d'utilisateur: votre prénom tout en minuscule sans accent
122- Mot de passe: `cornemuse`
123
124---
125
126# Profil et Publications
127
128En plus des docs et références donnés dans les slides des cours,
129vous pouvez vous appuyer sur la documentation de Strapi pour savoir
130comment faire les requêtes:
131
132- Documentation générée à partir de la configuration Strapi:
133  `<URL du Strapi fourni>:1337/documentation/v1.0.0`.
134
135- [Documentation de l'API REST](https://docs.strapi.io/dev-docs/api/rest)
136- [Documentation de l'API GraphQL](https://docs.strapi.io/dev-docs/api/graphql)
137
138---
139
140# Communiquer avec MQTT
141
142Vous pouvez utiliser mon hook [`useTopic`](https://www.npmjs.com/package/usetopic) tout prêt à l'emploi (il faut l'installer avant):
143
144```typescript
145import { useState } from "react";
146import useTopic from "usetopic";
147
148const MQTT_SERVER = "mqtt://test.mosquitto.org:8080";
149const TOPIC = "crea";
150
151const Feed = () => {
152  const { messages, sendMessage } = useTopic(MQTT_SERVER, TOPIC);
153  const [value, setValue] = useState("");
154
155  const send = () => {
156    sendMessage(value);
157    setValue("");
158  };
159
160  return (
161    <div>
162      {messages.map((message, index) => (
163        <div key={index}>{message}</div>
164      ))}
165      <input value={value} onChange={e => setValue(e.target.value)} />
166      <button onClick={send}>Send</button>
167    </div>
168  );
169};
170```
171
172---
173
174# Payload pour le chat
175
176Afin que les messages échangés par MQTT soient lisibles par les
177apps des autres, mettons-nous d'accord sur un format de payload:
178
179```json
180{
181  "author": {
182    "username": "Tim",
183    "id": 12 // ID Strapi de l'utilisateur
184  },
185  "message": "Hey!, bienvenue sur le chat 🦌",
186  "createdAt": "2023-06-20T11:32:00.000-04:00"
187}
188```
189
190---
191
192# Paramètres pour MQTT
193
194- Serveur: `test.mosquitto.org:8080`
195- Canal par défaut: `crea`
196
197> Si cela ne fonctionne pas avec le serveur de test fourni par mosquitto.org,
198> je mettrais en place un serveur dédié pour le TP.
199
200---
201
202# Envoi de message en JSON
203
204MQTT permet d'échanger des messages en format string.
205Pour échanger des payloads en JSON, il faut convertir le JSON en string à l'envoi,
206et inversement à la réception.
207
208```typescript
209// Envoi
210const messageStr = JSON.stringify({ author: { id: 12 } });
211sendMessage(messageStr);
212
213// Réception
214const message = JSON.parse(messageStr);
215console.log(message.author.id);
216```
217
218---
219
220# Questions ?
221
222Pendant la journée, je répondrais uniquement aux questions pour clarifier
223l'énoncé mais pas sur "comment faire le taf".
224
225Je suis également à dispo s'il y a des blocages quant à l'utilisation
226des deux serveurs (Strapi et broker MQTT).
227
228---
229
230# Mise en place pour Tim
231
232- [ ] Créer un Strapi
233- [ ] Installer les plugins GraphQL et Swagger
234- [ ] Créer le modèle "Publication"
235- [ ] Créer les comptes utilisateur