---
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 réseau social très simpliste

---

# Fonctionnalités demandées

- **[Login]** Je peux me connecter sur l'app en entrant mon nom d'utilisateur et mot de passe défini au niveau de Strapi.
- **[Profil]** Je peux voir et modifier mon profil (nom, prénom, email)
- **[Publication]** Je peux voir les postes de tout le monde et peux écrire des messages en mon nom (feed public).
- **[Chat]** Je peux envoyer et recevoir des messages de chat par MQTT
- **[SignUp]** Je peux me créer un compte sur l'app. Un utilisateur est crée au niveau de Strapi.

---

# Éléments évalués

- Gestion des states
- Gestion des styles
- Liaison avec le backend
- Qualité de code
  - Découpage logique des composants
  - Propreté du code
  - Organisation de la base de code

---

# Choix libres

- Méthode de styling
- Utilisation de Typescript
- Utilisation de GraphQL plutôt qu'API REST
- Base NextJS ou ViteJS
- Si NextJS, **SSR/SSG** (Pages router) ou **Server Components** (App router)

---

# Pages

Pour développer cette app, vous aurez donc besoin des pages suivantes:

- Page de login
- Page "feed" pour voir la liste des postes + formulaire pour poster un nouveau poste
- Page "profil" pour voir et éditer son profil
- Page chat

> 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.

---

# Pondération

En + du point de "présence":

- **SignUp**: 0.5pt
- **Login**: 1.25pt
- **Profil**: 1pt
- **Poste**: 1.5pt
- **Gestion des styles**: 0.5pt
- **Chat**: 0.5pt

> Pas besoin de tout faire pour avoir 6.
> Il est donc possible, par exemple, de faire l'impasse sur le SignUp et le Chat et
> avoir quand même la note max.

---

Des points peuvent être retirés si

- Le code n'est pas propre
- La communication avec le backend ne fonctionne pas correctement
- Le découpage des composants n'est pas réfléchi
- Les states sont mal gérés (states inutiles, re-render inutiles,...)

---

**À rendre avant ce soir minuit.**

Vous 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.

Dans un dépôt git, évidemmment.

---

# Gestion de l'authentification

Il faut trouver un moyen de stocker le token JWT fourni par
Strapi dans le navigateur (`localStorage`) et le fournir à chaque requête vers le backend.

- [Doc de Strapi pour le login](https://docs.strapi.io/dev-docs/plugins/users-permissions#login)
- [Doc de Strapi pour le signup](https://docs.strapi.io/dev-docs/plugins/users-permissions#registration)

> Je recommande de commencer par le Login avant
> de faire le reste.

---

# Authentification

Si vous souhaitez ne pas faire le SignUp, vous pouvez utiliser un compte
déjà créé.

- Nom d'utilisateur: votre prénom tout en minuscule sans accent
- Mot de passe: `cornemuse`

---

# Profil et Publications

En plus des docs et références donnés dans les slides des cours,
vous pouvez vous appuyer sur la documentation de Strapi pour savoir
comment faire les requêtes:

- Documentation générée à partir de la configuration Strapi:
  `<URL du Strapi fourni>:1337/documentation/v1.0.0`.

- [Documentation de l'API REST](https://docs.strapi.io/dev-docs/api/rest)
- [Documentation de l'API GraphQL](https://docs.strapi.io/dev-docs/api/graphql)

---

Exemple `curl` pour envoyer une requête de création de poste à l'API:

```bash
curl 'http://localhost:1337/api/posts' \
-X POST \
--header 'Authorization: Bearer <TOKEN RÉCUPÉRÉ>' \
--data '{
    "data": {
        "title": "Titre du premier poste",
        "content": "Bienvenue sur mon feed"
    }
}'
```


---

# Communiquer avec MQTT

Vous pouvez utiliser le hook [`useTopic`](https://www.npmjs.com/package/usetopic) tout prêt à l'emploi (il faut l'installer avant):

```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>
  );
};
```

---

# 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"
}
```

---

# 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.

---

# 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);
```

---

# Questions ?

Pendant la journée, je répondrais uniquement aux questions pour clarifier
l'énoncé mais pas sur "comment faire le taf".

Je suis également à dispo s'il y a des blocages quant à l'utilisation
des deux serveurs (Strapi et broker MQTT).