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