### 1. **Comment préparer un projet commandé par un client :** #### **Document clé** : Le document qui regroupe toutes les informations du projet est souvent appelé **cahier des charges**. - **Cahier des charges** : Un document qui formalise les besoins du client et les spécifications du projet. - Il contient des informations sur les objectifs du projet, les fonctionnalités attendues, les contraintes techniques, le budget, le planning, et les responsabilités. #### **Processus de préparation du projet** : 1. **Analyse des besoins** : Rencontrer le client pour bien comprendre ses attentes et ses besoins. 2. **Rédaction du cahier des charges** : Formaliser ce qui a été convenu avec le client, incluant les fonctionnalités clés, les contraintes, et les attentes. 3. **Maquetage et prototype** : Créer des maquettes de l’interface utilisateur pour valider le design et l’expérience utilisateur (UX). 4. **Choix des technologies** : Déterminer quelles technologies utiliser (par exemple, React pour le front-end, Node.js ou PHP pour le back-end). 5. **Planification du développement** : Utiliser une méthodologie de gestion de projet (comme Agile) pour diviser le projet en étapes et fixer des délais. 6. **Validation par le client** : Faire approuver les maquettes et le cahier des charges par le client avant de commencer le développement. ### 2. **Différences entre bases de données SQL et NoSQL :** #### **Bases de données SQL** : - **Structure** : Les données sont stockées dans des tables composées de lignes et de colonnes. Les relations entre les tables sont définies via des **clés primaires** et **clés étrangères**. - **Langage** : Utilise SQL (Structured Query Language) pour les opérations CRUD (Create, Read, Update, Delete). **Exemple de requête** : ```sql INSERT INTO Users (name, email) VALUES ('Alice', 'alice@example.com'); ``` #### **Bases de données NoSQL** : - **Structure** : Les données sont stockées sous forme de documents JSON-like dans des collections. Pas de relations formelles entre les documents comme dans les bases SQL. - **Langage** : Utilisation de requêtes basées sur JSON pour effectuer des opérations CRUD. **Exemple en Firebase** : ```javascript db.collection("Users").add({ name: "Alice", email: "alice@example.com" }); ``` ### 3. **Principe du maquetage des interfaces utilisateur :** Le **maquetage** consiste à créer des représentations visuelles des écrans de l’application avant le développement, souvent appelé des **wireframes** ou **mockups**. Ces maquettes permettent de visualiser la disposition des éléments (boutons, menus, formulaires) et de s’assurer que l’ergonomie (UX) est adaptée. - **Outils** : Figma, Sketch, Adobe XD - **Objectifs** : - Aider à mieux comprendre le design avant le développement. - Faciliter la communication avec le client pour s’assurer que le produit final correspondra à ses attentes. ### 4. **Tests avec `console.log` et principe du CRUD :** #### **Utilisation de `console.log`** : - Outil simple pour déboguer et afficher des informations sur la console pendant le développement. #### **Principe du CRUD** : - **Create** : Ajouter des données (ex : ajout d’un utilisateur). - **Read** : Lire ou récupérer des données (ex : obtenir la liste des utilisateurs). - **Update** : Modifier des données (ex : mettre à jour l'email d'un utilisateur). - **Delete** : Supprimer des données (ex : supprimer un utilisateur). **Exemple en MySQL** : ```sql SELECT * FROM Users; ``` **Exemple en Firebase** : ```javascript db.collection("Users").get().then(snapshot => { snapshot.forEach(doc => { console.log(doc.data()); }); }); ``` ### 5. **Différence entre `let` et `const` en React :** - **`let`** : Permet de déclarer des variables dont la valeur peut être réassignée. ```javascript let name = "Alice"; name = "Bob"; // Changement de valeur possible ``` - **`const`** : Déclare des variables constantes dont la valeur ne peut pas être réassignée après l'initialisation. ```javascript const name = "Alice"; // name = "Bob"; // Erreur, car on ne peut pas réassigner une variable const ``` #### Utilisation en React : - **`const`** est généralement utilisé pour déclarer des variables qui ne changent pas (par exemple, des composants ou des états initiaux), tandis que **`let`** est utilisé pour des variables qui sont susceptibles de changer au fil du temps. ### 6. **Hooks en React :** Les **Hooks** sont des fonctions introduites dans React pour permettre l’utilisation d’états et d'autres fonctionnalités sans avoir besoin de créer des classes. #### Exemple de Hook : `useState` ```javascript import React, { useState } from 'react'; function Counter() { // Déclare une nouvelle variable d'état, appelée "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` - **`useState`** : Permet de déclarer une variable d’état dans un composant fonctionnel. - **`useEffect`** : Utilisé pour effectuer des actions secondaires (side effects) comme appeler une API ou interagir avec le DOM après chaque rendu. ### 7. **Présentation du projet GameCard** : Lors de la présentation de ton projet GameCard ou tout autre projet, voici quelques éléments à préparer : - **Objectif du projet** : Quelle est la finalité de l’application ? - **Technologies utilisées** : Par exemple, React pour le front-end et Firebase pour le back-end. - **Structure de la base de données** : Expliquer la structure des collections et des documents si tu utilises Firebase. - **Exemple de fonctionnalité CRUD** : Démontrer comment tu crées, modifies, ou supprimes une carte de jeu (GameCard). - **Tests** : Expliquer comment tu as utilisé `console.log` ou des outils de tests plus avancés (ex: Jest).