---
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 service de chat simpliste
en utilisant NextJS.

---

# Fonctionnalités demandées

- **[SignUp]** Je peux me créer un compte sur l'app. Un utilisateur est crée au niveau de Strapi.
- **[Login]** Je peux me connecter sur l'app en entrant un nom d'utilisateur et un mot de passe.
- **[Profile]** Je peux voir et modifier mon profil
- **[Chat]** Je peux envoyer et recevoir des messages de chat en par MQTT

---

# Éléments évalués

- Gestion des states
- Gestion des styles
- Implémentation SSR / CSR / SSG / Server Components
- Liaison avec le backend
- Qualité de code
  - Découpage logique des composants
  - Propreté du code
  - Organisation de la base de code

---

# En option (bonus)

- Utilisation de Typescript
- Utilisation de GraphQL
- Gestion de plusieurs canaux de chat

---

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

---

Pour gérer la date, je vous suggère d'utiliser la lib
[Luxon](https://moment.github.io/luxon/#/).

```typescript
// Récupérer la date en string standardisé
const createdAtStr: string = DateTime.now().toISO();
console.log(createdAtStr);
// 2023-06-20T11:32:00.000-04:00

// Lire la date depuis le string standardisé
const createdAt: DateTime = DateTime.fromISO(createdAtStr);
console.log(createdAt.setLocale("fr").toLocaleString(DateTime.DATETIME_SHORT));
// 20/06/2023 à 11:32
```

Dans `LocaleString`, on peut indiquer [plusieurs formats de date possibles](https://moment.github.io/luxon/#/formatting?id=presets).

---

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

---

# Communiquer avec MQTT

Vous pouvez utiliser mon hook `useTopic` tout prêt à l'emploi:

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

---

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

---

# Gestion de l'authentification

Attention à ne pas négliger la gestion de l'authentification (login).

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

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

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

---

**Travail pratique à rendre vendredi (23.06) à 18h.**