diff --git a/README.md b/README.md index aac9606..764fb90 100644 --- a/README.md +++ b/README.md @@ -1,301 +1,184 @@ # Création d'une IHM pour le projet MIA -### Introduction +## Introduction Ce projet couvre les IHM d'accès aux sessions de visio-conférence pour le projet MIA. -Ces IHM se découpent en deux étapes : -1 - connexion d'un utilisateur sur une session de visio + +Ces IHM se découpent en deux étapes :\ +1 - connexion d'un utilisateur sur une session de visio\ 2 - identification de l'utilisateur sur la session -### Architecture du module +## Architecture du module ``` -. +mia ├── ... -├── local/modules/ModuleCitation -│ ├── Config/ -│ │ ├── module.xml -│ │ └── config.xml -│ ├── Hook/ -│ │ └── BackHook.php -│ └── templates/ -│ │ ├── frontOffice/default/blocks/ -│ │ │ ├── blockCitation.html -│ │ │ └── ... -│ │ └── backOffice/default/ -│ │ │ ├── src/ -│ │ │ │ └── Citation.jsx -│ │ │ ├── tsup.config.js -│ │ │ └── index.js -│ ├── package.json -│ └── ModuleCitation.php -└── ... +├── node_modules +│ ├── Tous les modules Node nécessaires à l'application (body-parser, bcrypt, express, ...) +├── public +│ ├── functions.js (contient des fonctions Javascript utilisées globalement sur tout le projet) +│ ├── session.js (fonctions spécifiques à l'écran de création des sessions) +│ ├── styles.css (feuilles de style globales de l'appli) +├── views +│ ├── create-session.hbs (écran de création d'une session de visio) +│ ├── login-session.hbs (écran de connexion sur une session) +│ ├── login.hbs (écran d'identification de l'utilisateur) +│ ├── login.hbs.old (DEPRECATED : ancienne version de l'identification de l'utilisateur, comprenant la saisie d'une adresse email ou d'un pseudo) +│ ├── register.hbs (DEPRECATED : écran de création du compte utilisateur) +├──.env (variables globales, pour l'environnement de test) +├──.env.prod (idem, pour l'environnement de prod) +├──mia_ihm.js (....) +├──package-lock.json +├──package.json +├──README.md (le présent fichier) ``` -### Installation des dépendances : +## Installation des dépendances + +Exemple de commande : ```bash -npm install react tsup @openstudio/blocks-editor +npm install bcrypt ``` -### 1 - Création du composant - -Commençons par créer un fichier `Citation.jsx` et par définir les données initiales du plugin : - -```js -// ./templates/backOffice/default/src/Citation.jsx - -const initialData = { - author: "", - quote: "", -}; -``` - -Ensuite, nous allons pouvoir écrire le composant React permettant de visualiser le plugin dans l'éditeur de Thelia Blocks. - -:warning: Attention : un plugin Thelia Blocks prends toujours deux `props` : - -| Prop | Type | Description | -| :--------- | :--------- | :--------------------------------------------------------- | -| `data` | `any` | Objet contenant les données du plugin | -| `onUpdate` | `Function` | Fonction permettant de mettre à jour les données du plugin | - -Exemple : - -```jsx -// ./templates/backOffice/default/src/Citation.jsx - -const BlockQuoteComponent = ({ data, onUpdate }) => { - return ( -
-
- - onUpdate({ ...data, author: e.target.value })} - /> -
-
- -