Documentation des bornes du Pic. Les bornes permettent aux utilisateurs d'effectuer des achats au sein du Pic, elles ont une fonction de mise en veille et doivent être déverouillées pour un memebre de l'association.
Les bornes du Pic ne sont ni plus ni moins qu'un simple site suivant le framework React affiché en plein écran sur les deux écrans des bornes (oui c'est decevant je sais). Pour celles et ceux qui n'ont jamais codé en React ou qui ne sont pas très familier avec la stack voici un petit récap de ce qu'est React et commment il s'applique à se projet.
Imaginez que votre interface est une construction en LEGO. Chaque composant React est une brique réutilisable :
- Un bouton = 1 brique
- Un formulaire de connexion = 1 brique (qui contient des petites briques : champs de texte, boutons...)
- La page entière = 1 grosse brique (qui contient toutes les autres)
Les Props sont comme des arguments qu'on passe à un composant. C'est ce qui rend un composant réutilisable.
// On donne un "nom" au composant Bouton
<Bouton texte="Se connecter" couleur="bleu" />Règle d'or : Les Props sont en lecture seule. Un composant ne peut jamais modifier ses propres Props.
Le State est la mémoire interne d'un composant. C'est une variable spéciale qui, quand elle change, fait re-dessiner le composant automatiquement.
const [pin, setPin] = useState(""); // pin = "" au départ
setPin("1234"); // Changement → React redessine l'écran !Règle d'or : Pour modifier le State, utilisez toujours la fonction setXXX. Ne faites jamais pin = "1234" directement.
Vous n'écrivez pas dans des fichiers .html classiques. React utilise du JSX : une syntaxe qui ressemble à du HTML mais qui est en fait du JavaScript déguisé.
// Ça ressemble à du HTML, mais c'est du JavaScript !
return <div className="container">Bonjour {username}</div>;Attention : En JSX, on écrit className au lieu de class (car class est un mot réservé en JavaScript).
C'est le point d'entrée de votre application. Il dit à React : "Démarre l'app et affiche-la dans le DOM".
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);Ce qu'il fait : Trouve l'élément HTML avec l'id root (dans index.html) et y injecte votre composant <App />.
C'est le composant racine de votre application. Tous les autres composants sont des enfants de App.
Ici, App.tsx gère notamment :
- La récupération de la session depuis le
localStorageau chargement - La réception des événements de lecture de badge
- Le routage entre les différentes pages
Ce dossier contient toutes les dépendances de votre projet (React, TypeScript, etc.). Il est généré automatiquement par npm.
Règles absolues :
- ❌ Ne JAMAIS modifier les fichiers dedans
- ❌ Ne JAMAIS le versionner sur Git (déjà dans
.gitignore) - ✅ Si quelque chose plante, supprimez-le et lancez
npm installpour le régénérer
Ces commandes sont définies dans package.json. Lancez-les depuis le terminal (Ctrl + ù dans VS Code).
npm installQuand l'utiliser : À chaque fois que vous clonez le projet ou que quelqu'un ajoute une nouvelle dépendance.
npm start
# ou
npm run devQuand l'utiliser : Pour tester l'application en local (généralement sur http://localhost:5173 ou http://localhost:3000).
npm run buildQuand l'utiliser : Pour créer une version optimisée de l'app à déployer sur un serveur.
npm testAppuyez sur F12 (ou clic droit → Inspecter) pour ouvrir les DevTools.
Je vous conseille de vite prendre la main car c'est unironically un des meilleurs outils pour débugger du web (ça vous sera utile dans vos UV web ou même pour vos projet perso).
C'est là que s'affichent :
- Vos
console.log() - Les erreurs JavaScript
- Les warnings React
Exemple d'utilisation : On met un console log pour voir une valeur qui fait planter le code :
function Connexion() {
const [pin, setPin] = useState("");
console.log("PIN actuel :", pin); // Pour voir la valeur en temps réel
return <input onChange={(e) => setPin(e.target.value)} />;
}Permet de voir toutes les requêtes HTTP (API calls). Très utile pour debugger les appels API.
Selon moi l'outil le plus puissant de devtools.
Je vous conseille fortement d'installez l'extension React Developer Tools pour Chrome/Firefox.
Ce qu'elle permet :
- Voir l'arbre des composants React
- Inspecter les Props et le State de chaque composant en temps réel
- Identifier quel composant cause un re-render
Comment l'utiliser : Ouvrez les DevTools (F12) et cliquez sur l'onglet "⚛️ Components".
Signification : Vous essayez d'accéder à une propriété sur un objet qui n'existe pas (ou pas encore).
Solution : Utilisez l'optional chaining (?.)
// ❌ Plante si user est null
const name = user.username;
// ✅ Retourne undefined si user est null
const name = user?.username;Signification : Vous avez créé une boucle infinie (souvent en appelant setState dans le corps du composant).
Solution : Mettez les appels à setState dans un useEffect ou un gestionnaire d'événement.
// ❌ Boucle infinie
function Composant() {
const [count, setCount] = useState(0);
setCount(count + 1); // Se ré-exécute à chaque render !
}
// ✅ Correct
function Composant() {
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1); // S'exécute 1 seule fois au montage
}, []); // Le [] signifie "seulement au montage"
}Quand quelque chose ne marche pas :
- ✅ Vérifiez la Console (F12) : y a-t-il une erreur ?
- ✅ Ajoutez des
console.log()pour tracer l'exécution - ✅ Vérifiez que vos dépendances sont installées (
npm install) - ✅ Relancez le serveur de dev (
npm start) - ✅ Si tout plante, supprimez
node_modules/et relanceznpm install
Rédigé en A25 par votre super Resp Info, Clément Chazelas.
J'encourage mes successeurs à étoffer cette rapide documentation, pour ceux qui viendront après. Ne laissont pas ce super projet subir le cycle de renouvellement qu'on voit bien trop souvent dans le paysage associatif de notre belle école.
Have fun !