Essayez de créer un petit jeu où vous explorez différentes conditions de fin. Variez entre atteindre un certain nombre de points, le héros perd toutes ses vies ou tous les monstres sont vaincus. Construisez quelque chose de simple, comme un jeu d'aventure basé sur la console. Utilisez le flux de jeu ci-dessous comme source d'inspiration :
Maintenant que vous avez maîtrisé les conditions de fin de jeu et la fonctionnalité de redémarrage dans votre jeu spatial, il est temps d'appliquer ces concepts à une expérience de jeu complètement nouvelle. Vous allez concevoir et créer votre propre jeu qui démontre différents types de conditions de fin et de mécanismes de redémarrage.
Cette mission vous pousse à penser de manière créative à la conception de jeux tout en pratiquant les compétences techniques que vous avez apprises. Vous explorerez différents scénarios de victoire et de défaite, mettrez en œuvre la progression du joueur, et créerez des expériences de redémarrage engageantes.
## Exigences du Projet
### Fonctionnalités Principales du Jeu
Votre jeu doit inclure les éléments essentiels suivants :
**Variété de conditions de fin** : Implémentez au moins deux façons différentes dont le jeu peut se terminer :
- **Victoire basée sur les points** : Le joueur atteint un score cible ou collecte des objets spécifiques
- **Défaite basée sur la vie** : Le joueur perd toutes ses vies ou points de santé disponibles
- **Achèvement d’objectif** : Tous les ennemis sont vaincus, des objets spécifiques sont collectés ou des objectifs sont atteints
- **Basé sur le temps** : Le jeu se termine après une durée définie ou un compte à rebours atteint zéro
**Fonctionnalité de redémarrage** :
- **Effacer l’état du jeu** : Supprimez tous les objets de jeu précédents et réinitialisez les variables
- **Réinitialiser les systèmes** : Recommencez avec de nouvelles statistiques de joueur, ennemis, et objectifs
- **Commandes conviviales** : Fournissez des instructions claires pour redémarrer le jeu
**Retour d’information pour le joueur** :
- **Messages de victoire** : Célébrez les succès du joueur avec des retours positifs
- **Messages de défaite** : Fournissez des messages encourageants qui motivent à rejouer
- **Indicateurs de progression** : Affichez le score actuel, les vies, ou le statut des objectifs
### Idées et Inspirations pour le Jeu
Choisissez un de ces concepts ou créez le vôtre :
#### 1. Jeu d’Aventure Console
Créez une aventure textuelle avec des mécaniques de combat :
```
Hero> Strikes with broadsword - orc takes 3p damage
Orc> Hits with club - hero takes 2p damage
Orc> Hits with club - hero takes 2p damage
Hero> Kicks - orc takes 1p damage
Game> Orc is defeated - Hero collects 2 coins
Game> ****No more monsters, you have conquered the evil fortress****
```
## Critères d'évaluation
**Fonctionnalités clés à implémenter :**
- **Combat au tour par tour** avec différentes options d’attaque
- **Points de santé** pour le joueur et les ennemis
- **Système d'inventaire** pour collecter pièces ou objets
- **Multiples types d’ennemis** avec des niveaux de difficulté variés
- **Condition de victoire** lorsque tous les ennemis sont vaincus
#### 2. Jeu de Collection
- **Objectif** : Collecter des objets spécifiques en évitant des obstacles
- **Conditions de fin** : Atteindre un nombre cible de collectes ou perdre toutes les vies
- **Progression** : Les objets deviennent plus difficiles à atteindre au fil du jeu
#### 3. Jeu de Puzzle
- **Objectif** : Résoudre des puzzles de difficulté croissante
- **Conditions de fin** : Terminer tous les niveaux ou manquer de coups/temps
- **Redémarrage** : Revenir au premier niveau avec la progression effacée
#### 4. Jeu de Défense
- **Objectif** : Protéger votre base contre des vagues d’ennemis
- **Conditions de fin** : Survivre à toutes les vagues (victoire) ou voir la base détruite (défaite)
- **Progression** : Les vagues ennemies augmentent en difficulté et en nombre
## Directives de Mise en Œuvre
### Pour Commencer
1. **Planifiez votre conception de jeu** :
- Esquissez la boucle de jeu de base
- Définissez clairement vos conditions de fin
- Identifiez les données à réinitialiser lors d’un redémarrage
2. **Mettez en place la structure de votre projet** :
```
my-game/
├── index.html
├── style.css
├── game.js
└── README.md
```
3. **Créez votre boucle de jeu principale** :
- Initialisez l’état du jeu
- Gérez les entrées utilisateur
- Mettez à jour la logique du jeu
- Vérifiez les conditions de fin
- Affichez l’état actuel
### Exigences Techniques
**Utilisez JavaScript Moderne** :
- Employez `const` et `let` pour les déclarations de variables
- Utilisez des fonctions fléchées quand c’est approprié
- Implémentez les fonctionnalités ES6+ comme les littéraux de gabarit et la déstructuration
**Architecture Événementielle** :
- Créez des gestionnaires d’événements pour les interactions utilisateur
- Implémentez les changements d’état du jeu via des événements
- Utilisez des écouteurs d’événements pour la fonctionnalité de redémarrage
**Bonnes Pratiques de Code** :
- Écrivez des fonctions à responsabilités uniques
- Utilisez des noms descriptifs pour variables et fonctions
- Ajoutez des commentaires expliquant la logique et les règles du jeu
- Organisez le code en sections logiques
## Exigences de Soumission
### Livrables
1. **Fichiers complets du jeu** : Tous les fichiers HTML, CSS, et JavaScript nécessaires à l’exécution de votre jeu
2. **README.md** : Documentation expliquant :
- Comment jouer à votre jeu
- Quelles conditions de fin vous avez implémentées
- Les instructions pour redémarrer
- Toute fonctionnalité ou mécanique spéciale
3. **Commentaires dans le code** : Explications claires de la logique et des algorithmes du jeu
### Liste de Contrôle pour les Tests
Avant de soumettre, vérifiez que votre jeu :
- [ ] **S’exécute sans erreurs** dans la console du navigateur
- [ ] **Implémente plusieurs conditions de fin** comme spécifié
- [ ] **Redémarre correctement** avec une réinitialisation propre de l’état
- [ ] **Fournit un retour clair** aux joueurs sur l’état du jeu
- [ ] **Utilise une syntaxe JavaScript moderne** et des meilleures pratiques
- [ ] **Inclut une documentation complète** dans le README.md
## Grille d’Évaluation
| Critères | Exemplaire (4) | Compétent (3) | En Développement (2) | Débutant (1) |
| **Fonctionnalité du Jeu** | Jeu complet avec multiples conditions de fin, redémarrage fluide, et expérience soignée | Jeu complet avec conditions de fin basiques et mécanisme de redémarrage fonctionnel | Jeu partiel avec quelques conditions de fin implémentées, redémarrage peut présenter de légers soucis | Jeu incomplet avec fonctionnalités limitées et bogues importants |
| **Qualité du Code** | Code propre, bien organisé utilisant des pratiques modernes JavaScript, commentaires complets et excellente structure | Bonne organisation avec syntaxe moderne, commentaires adéquats, et structure claire | Organisation de code basique avec quelques pratiques modernes, commentaires minimaux | Mauvaise organisation, syntaxe obsolète, manque de commentaires et structure |
| **Expérience Utilisateur** | Jouabilité intuitive avec instructions claires, excellent retour, et expérience de fin/redémarrage engageante | Bonne jouabilité avec instructions et retours adéquats, fin/redémarrage fonctionnels | Jouabilité basique avec instructions minimales, retours limités sur l’état du jeu | Jouabilité confuse avec instructions peu claires et mauvais retour utilisateur |
| **Implémentation Technique** | Maîtrise des concepts de développement de jeux, gestion des événements, et gestion d’état | Bonne compréhension des concepts de jeu avec bonne implémentation | Compréhension basique avec implémentation acceptable | Compréhension limitée avec mauvaise implémentation |
| **Documentation** | README complet avec instructions claires, code bien documenté, et preuves de tests approfondis | Bonne documentation avec instructions claires et commentaires suffisants | Documentation basique avec instructions minimales | Documentation pauvre ou manquante |
### Barème de notation
- **Exemplaire (16-20 points)** : Dépasse les attentes avec des fonctionnalités créatives et une implémentation soignée
- **Compétent (12-15 points)** : Répond à toutes les exigences avec une exécution solide
- **En Développement (8-11 points)** : Répond à la plupart des exigences avec quelques problèmes mineurs
- **Débutant (4-7 points)** : Répond à certaines exigences mais nécessite une amélioration significative
## Ressources d’Apprentissage Supplémentaires
- [Guide de Développement de Jeux MDN](https://developer.mozilla.org/en-US/docs/Games)
- [Tutoriels de Développement de Jeux JavaScript](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
- [Documentation de l’API Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
- [Principes de Conception de Jeu](https://www.gamasutra.com/blogs/)
> 💡 **Astuce Pro** : Commencez simple et ajoutez des fonctionnalités progressivement. Un jeu simple bien peaufiné est mieux qu’un jeu complexe avec des bugs !
| | le jeu complet est présenté | le jeu est partiellement présenté | le jeu partiel contient des bugs |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des imprécisions. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
# Créer une application bancaire Partie 1 : Modèles HTML et routes dans une application web
## Quiz avant le cours
[Quiz avant le cours](https://ff-quizzes.netlify.app/web/quiz/41)
### Introduction
Depuis l'apparition de JavaScript dans les navigateurs, les sites web sont devenus plus interactifs et complexes que jamais. Les technologies web sont désormais couramment utilisées pour créer des applications entièrement fonctionnelles qui s'exécutent directement dans un navigateur, que l'on appelle [applications web](https://en.wikipedia.org/wiki/Web_application). Étant donné que les applications web sont très interactives, les utilisateurs ne veulent pas attendre un rechargement complet de la page à chaque action. C'est pourquoi JavaScript est utilisé pour mettre à jour directement le HTML via le DOM, offrant ainsi une expérience utilisateur plus fluide.
# Construire une application bancaire Partie 1 : Modèles HTML et Routes dans une application web
```mermaid
journey
title Votre Parcours de Développement d'App Bancaire
section Fondamentaux des SPA
Comprendre les applications monopage : 3: Student
Apprendre les concepts de templates : 4: Student
Maîtriser la manipulation du DOM : 4: Student
section Systèmes de Routage
Implémenter le routage côté client : 4: Student
Gérer l'historique du navigateur : 5: Student
Créer des systèmes de navigation : 5: Student
section Modèles Professionnels
Construire une architecture modulaire : 5: Student
Appliquer les bonnes pratiques : 5: Student
Créer des expériences utilisateur : 5: Student
```
Lorsque l'ordinateur de guidage d'Apollo 11 a navigué vers la lune en 1969, il a dû basculer entre différents programmes sans redémarrer tout le système. Les applications web modernes fonctionnent de manière similaire – elles changent ce que vous voyez sans recharger tout depuis le début. Cela crée l'expérience fluide et réactive que les utilisateurs attendent aujourd'hui.
Contrairement aux sites Web traditionnels qui rechargent des pages entières à chaque interaction, les applications web modernes mettent à jour uniquement les parties nécessitant un changement. Cette approche, un peu comme le centre de contrôle qui bascule entre différents affichages tout en maintenant une communication constante, crée cette expérience fluide que nous avons appris à attendre.
Voici ce qui rend la différence si spectaculaire :
| **Navigation** | Rechargement complet de la page à chaque écran | Changement instantané du contenu |
| **Performance** | Plus lent à cause du téléchargement complet du HTML | Plus rapide avec des mises à jour partielles |
| **Expérience utilisateur** | Flashs de page perturbants | Transitions fluides semblables à une application |
| **Partage des données** | Difficile entre les pages | Gestion facile de l'état |
| **Développement** | Plusieurs fichiers HTML à maintenir | Un seul HTML avec des modèles dynamiques |
**Comprendre l'évolution :**
- **Les applications traditionnelles** nécessitent des requêtes serveur pour chaque action de navigation
- **Les SPA modernes** se chargent une fois et mettent à jour le contenu dynamiquement via JavaScript
- **Les attentes des utilisateurs** privilégient désormais des interactions instantanées et fluides
- **Les bénéfices en performance** incluent une bande passante réduite et des réponses plus rapides
Dans cette leçon, nous allons construire une application bancaire avec plusieurs écrans qui s'enchaînent parfaitement. Comme les scientifiques utilisent des instruments modulaires pouvant être reconfigurés pour différentes expériences, nous utiliserons des modèles HTML comme composants réutilisables qui peuvent être affichés selon les besoins.
Vous travaillerez avec des modèles HTML (plans réutilisables pour différents écrans), le routage JavaScript (le système qui bascule entre les écrans) et l’API historique du navigateur (qui maintient le bon fonctionnement du bouton retour). Ce sont les mêmes techniques fondamentales utilisées par des frameworks comme React, Vue et Angular.
À la fin, vous aurez une application bancaire fonctionnelle qui démontre les principes professionnels des applications monopages.
```mermaid
mindmap
root((Applications à page unique))
Architecture
Système de modèles
Routage côté client
Gestion d'état
Gestion des événements
Templates
Composants réutilisables
Contenu dynamique
Manipulation du DOM
Changement de contenu
Routing
Gestion des URL
API historique
Logique de navigation
Intégration navigateur
User Experience
Navigation rapide
Transitions fluides
État cohérent
Interactions modernes
Performance
Réduction des requêtes serveur
Transitions de page plus rapides
Utilisation efficace des ressources
Meilleure réactivité
```
## Questionnaire préalable à la leçon
Dans cette leçon, nous allons poser les bases pour créer une application bancaire web, en utilisant des modèles HTML pour créer plusieurs écrans qui peuvent être affichés et mis à jour sans avoir à recharger toute la page HTML.
[Questionnaire préalable à la leçon](https://ff-quizzes.netlify.app/web/quiz/41)
### Prérequis
### Ce dont vous aurez besoin
Vous avez besoin d'un serveur web local pour tester l'application web que nous allons construire dans cette leçon. Si vous n'en avez pas, vous pouvez installer [Node.js](https://nodejs.org) et utiliser la commande `npx lite-server` depuis votre dossier de projet. Cela créera un serveur web local et ouvrira votre application dans un navigateur.
Nous aurons besoin d’un serveur web local pour tester notre application bancaire – ne vous inquiétez pas, c’est plus simple que ça en a l’air ! Si vous n’en avez pas déjà un configuré, installez simplement [Node.js](https://nodejs.org) et lancez `npx lite-server` depuis votre dossier de projet. Cette commande pratique démarre un serveur local et ouvre automatiquement votre application dans le navigateur.
### Préparation
Sur votre ordinateur, créez un dossier nommé `bank` avec un fichier nommé `index.html` à l'intérieur. Nous allons commencer avec ce [code de base HTML](https://en.wikipedia.org/wiki/Boilerplate_code) :
Sur votre ordinateur, créez un dossier nommé `bank` avec un fichier `index.html` à l’intérieur. Nous partirons de ce [modèle HTML](https://fr.wikipedia.org/wiki/Boilerplate) :
```html
<!DOCTYPE html>
@ -41,30 +106,77 @@ Sur votre ordinateur, créez un dossier nommé `bank` avec un fichier nommé `in
</html>
```
**Voici ce que ce modèle fournit :**
- **Établit** la structure du document HTML5 avec la déclaration DOCTYPE correcte
- **Configure** l’encodage des caractères en UTF-8 pour la prise en charge internationale
- **Active** le design responsive avec la balise meta viewport pour la compatibilité mobile
- **Définit** un titre descriptif qui apparaît dans l'onglet du navigateur
- **Crée** une section body propre où nous construirons notre application
> 📁 **Aperçu de la structure du projet**
>
> **À la fin de cette leçon, votre projet contiendra :**
> ```
> bank/
> ├── index.html <!-- Main HTML with templates -->
> ├── app.js <!-- Routing and navigation logic -->
> └── style.css <!-- (Optional for future lessons) -->
> ```
>
> **Responsabilités des fichiers :**
> - **index.html** : Contient tous les modèles et fournit la structure de l’application
> - **app.js** : Gère le routage, la navigation et la gestion des modèles
> - **Modèles** : Définissent l’interface utilisateur pour la connexion, le tableau de bord et autres écrans
---
## Modèles HTML
Si vous souhaitez créer plusieurs écrans pour une page web, une solution serait de créer un fichier HTML pour chaque écran que vous voulez afficher. Cependant, cette solution présente certains inconvénients :
Les modèles résolvent un problème fondamental dans le développement web. Lorsque Gutenberg a inventé l’imprimerie à caractères mobiles dans les années 1440, il s’est rendu compte qu’au lieu de sculpter des pages entières, il pouvait créer des blocs de lettres réutilisables et les disposer selon les besoins. Les modèles HTML fonctionnent selon le même principe – au lieu de créer des fichiers HTML séparés pour chaque écran, vous définissez des structures réutilisables qui peuvent être affichées selon les besoins.
```mermaid
flowchart TD
A["📋 Définition du Modèle"] --> B["💬 Caché dans le DOM"]
B --> C["🔍 JavaScript Trouve le Modèle"]
C --> D["📋 Cloner le Contenu du Modèle"]
D --> E["🔗 Attacher au DOM Visible"]
E --> F["👁️ L'Utilisateur Voit le Contenu"]
G["Modèle de Connexion"] --> A
H["Modèle de Tableau de Bord"] --> A
I["Modèles Futurs"] --> A
style A fill:#e3f2fd
style D fill:#e8f5e8
style F fill:#fff3e0
style B fill:#f3e5f5
```
Considérez les modèles comme des plans pour différentes parties de votre application. Tout comme un architecte crée un plan et le réutilise plusieurs fois au lieu de redessiner des pièces identiques, nous créons les modèles une fois puis les instancions selon le besoin. Le navigateur garde ces modèles cachés jusqu’à ce que JavaScript les active.
Si vous souhaitez créer plusieurs écrans pour une page web, une solution serait de créer un fichier HTML pour chaque écran que vous voulez afficher. Cependant, cette solution présente quelques inconvénients :
- Vous devez recharger tout le HTML lors du changement d'écran, ce qui peut être lent.
- Vous devez recharger tout le HTML à chaque changement d’écran, ce qui peut être lent.
- Il est difficile de partager des données entre les différents écrans.
Une autre approche consiste à n'avoir qu'un seul fichier HTML et à définir plusieurs [modèles HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) en utilisant l'élément `<template>`. Un modèle est un bloc HTML réutilisable qui n'est pas affiché par le navigateur et qui doit être instancié à l'exécution via JavaScript.
Une autre approche consiste à n’avoir qu’un seul fichier HTML et définir plusieurs [modèles HTML](https://developer.mozilla.org/fr/docs/Web/HTML/Element/template) en utilisant l’élément `<template>`. Un modèle est un bloc HTML réutilisable qui n’est pas affiché par le navigateur et doit être instancié au moment de l’exécution en utilisant JavaScript.
### Tâche
### Construisons-le
Nous allons créer une application bancaire avec deux écrans : la page de connexion et le tableau de bord. Tout d'abord, ajoutons dans le corps HTML un élément de remplacement que nous utiliserons pour instancier les différents écrans de notre application :
Nous allons créer une application bancaire avec deux écrans principaux : une page de connexion et un tableau de bord. Commençons par ajouter un élément de remplacement dans le corps de notre HTML – c’est ici que tous nos écrans différents apparaîtront :
```html
<divid="app">Loading...</div>
```
Nous lui donnons un `id` pour le localiser plus facilement avec JavaScript par la suite.
**Comprendre ce placeholder :**
- **Crée** un conteneur avec l’ID "app" où tous les écrans seront affichés
- **Affiche** un message de chargement jusqu’à ce que JavaScript initialise le premier écran
- **Fournit** un point d’ancrage unique pour notre contenu dynamique
- **Permet** un ciblage facile depuis JavaScript avec `document.getElementById()`
> Astuce : puisque le contenu de cet élément sera remplacé, nous pouvons y mettre un message ou un indicateur de chargement qui sera affiché pendant le chargement de l'application.
> 💡 **Astuce Pro** : Puisque le contenu de cet élément sera remplacé, vous pouvez y mettre un message ou un indicateur de chargement qui s’affichera pendant le chargement de l’application.
Ensuite, ajoutons en dessous le modèle HTML pour la page de connexion. Pour l'instant, nous y mettrons uniquement un titre et une section contenant un lien que nous utiliserons pour effectuer la navigation.
Ensuite, ajoutons sous ce placeholder le modèle HTML pour la page de connexion. Pour l’instant, nous y mettrons seulement un titre et une section contenant un lien que nous utiliserons pour naviguer.
```html
<templateid="login">
@ -75,7 +187,13 @@ Ensuite, ajoutons en dessous le modèle HTML pour la page de connexion. Pour l'i
</template>
```
Puis, ajoutons un autre modèle HTML pour la page du tableau de bord. Cette page contiendra différentes sections :
**Décomposition de ce modèle de connexion :**
- **Définit** un modèle avec l’identifiant unique "login" pour le ciblage JavaScript
- **Inclut** un titre principal qui établit la marque de l’application
- **Contient** un élément `<section>` sémantique pour grouper le contenu lié
- **Fournit** un lien de navigation qui mènera les utilisateurs vers le tableau de bord
Puis, nous ajouterons un autre modèle HTML pour la page du tableau de bord. Cette page contiendra différentes sections :
- Un en-tête avec un titre et un lien de déconnexion
- Le solde actuel du compte bancaire
@ -106,21 +224,72 @@ Puis, ajoutons un autre modèle HTML pour la page du tableau de bord. Cette page
</template>
```
> Astuce : lorsque vous créez des modèles HTML, si vous voulez voir à quoi ils ressemblent, vous pouvez commenter les lignes `<template>` et `</template>` en les entourant de `<!-- -->`.
✅ Pourquoi pensez-vous que nous utilisons des attributs `id` sur les modèles ? Pourrait-on utiliser autre chose comme des classes ?
## Afficher les modèles avec JavaScript
Si vous essayez votre fichier HTML actuel dans un navigateur, vous verrez qu'il reste bloqué sur `Loading...`. C'est parce que nous devons ajouter du code JavaScript pour instancier et afficher les modèles HTML.
L'instanciation d'un modèle se fait généralement en 3 étapes :
1. Récupérer l'élément modèle dans le DOM, par exemple en utilisant [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
2. Cloner l'élément modèle, en utilisant [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
3. L'attacher au DOM sous un élément visible, par exemple en utilisant [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
**Comprenons chaque partie de ce tableau de bord :**
- **Structure** la page avec un élément `<header>` sémantique contenant la navigation
- **Affiche** le titre de l’application de manière cohérente pour le branding
- **Fournit** un lien de déconnexion qui redirige vers l’écran de connexion
- **Montre** le solde actuel du compte dans une section dédiée
- **Organise** les données des transactions avec un tableau HTML bien structuré
- **Définit** les en-têtes de colonnes pour Date, Objet et Montant
- **Laisse** le corps du tableau vide pour une injection dynamique de contenu ultérieure
> 💡 **Astuce Pro** : Lors de la création de modèles HTML, si vous voulez voir à quoi cela ressemble, vous pouvez commenter les lignes `<template>` et `</template>` en les entourant de `<!-- -->`.
### 🔄 **Vérification pédagogique**
**Compréhension du système de modèles** : Avant d’implémenter le JavaScript, assurez-vous de comprendre :
- ✅ En quoi les modèles diffèrent des éléments HTML classiques
- ✅ Pourquoi les modèles restent cachés jusqu’à activation par JavaScript
- ✅ L’importance de la structure HTML sémantique dans les modèles
- ✅ Comment les modèles permettent des composants UI réutilisables
**Auto-test rapide** : Que se passe-t-il si vous retirez les balises `<template>` autour de votre HTML ?
*Réponse : Le contenu devient immédiatement visible et perd sa fonctionnalité de modèle*
**Avantages de l’architecture** : Les modèles offrent :
- **Réutilisabilité** : Une définition, plusieurs instances
- **Performance** : Pas d’analyse HTML redondante
- **Maintenabilité** : Structure UI centralisée
- **Flexibilité** : Basculement dynamique du contenu
✅ Pourquoi selon vous utilisons-nous des attributs `id` sur les modèles ? Pourrait-on utiliser autre chose comme des classes ?
## Donner vie aux modèles avec JavaScript
Maintenant, il faut rendre nos modèles fonctionnels. Comme une imprimante 3D prend un plan numérique et crée un objet physique, JavaScript prend nos modèles cachés et crée des éléments visibles et interactifs que les utilisateurs peuvent voir et utiliser.
Le processus suit trois étapes cohérentes qui forment la base du développement web moderne. Une fois que vous comprenez ce modèle, vous le reconnaîtrez dans de nombreux frameworks et bibliothèques.
Si vous ouvrez votre fichier HTML actuel dans un navigateur, vous verrez qu’il reste bloqué à afficher `Loading...`. C’est parce que nous devons ajouter du code JavaScript pour instancier et afficher les modèles HTML.
Instancier un modèle se fait généralement en 3 étapes :
1. Récupérer l’élément modèle dans le DOM, par exemple avec [`document.getElementById`](https://developer.mozilla.org/fr/docs/Web/API/Document/getElementById).
2. Cloner l’élément modèle, en utilisant [`cloneNode`](https://developer.mozilla.org/fr/docs/Web/API/Node/cloneNode).
3. L’attacher au DOM sous un élément visible, par exemple avec [`appendChild`](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild).
```mermaid
flowchart TD
A[🔍 Étape 1 : Trouver le Modèle] --> B[📋 Étape 2 : Cloner le Modèle]
B --> C[🔗 Étape 3 : Attacher au DOM]
A1["document.getElementById('login')"] --> A
B1["template.content.cloneNode(true)"] --> B
C1["app.appendChild(view)"] --> C
C --> D[👁️ Modèle Visible par l'Utilisateur]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#e8f5e8
style D fill:#fff3e0
```
**Décomposition visuelle du processus :**
- **Étape 1** localise le modèle caché dans la structure DOM
- **Étape 2** crée une copie fonctionnelle modifiable en sécurité
- **Étape 3** insère la copie dans la zone visible de la page
- **Résultat** : un écran fonctionnel avec lequel l’utilisateur peut interagir
✅ Pourquoi devons-nous cloner le modèle avant de l'attacher au DOM ? Que pensez-vous qu'il se passerait si nous sautions cette étape ?
✅ Pourquoi devons-nous cloner le modèle avant de l’attacher au DOM ? Que pensez-vous qu’il se passerait si nous évitions cette étape ?
### Tâche
@ -130,7 +299,13 @@ Créez un nouveau fichier nommé `app.js` dans votre dossier de projet et import
<scriptsrc="app.js"defer></script>
```
Maintenant, dans `app.js`, nous allons créer une nouvelle fonction `updateRoute` :
**Comprendre cet import de script :**
- **Relie** le fichier JavaScript à notre document HTML
- **Utilise** l’attribut `defer` pour s’assurer que le script s’exécute après l’analyse HTML
- **Permet** l’accès à tous les éléments DOM puisqu’ils sont entièrement chargés avant l’exécution du script
- **Suit** les bonnes pratiques modernes de chargement et performance des scripts
Maintenant dans `app.js`, créons une nouvelle fonction `updateRoute` :
```js
function updateRoute(templateId) {
@ -142,19 +317,71 @@ function updateRoute(templateId) {
}
```
Ce que nous faisons ici correspond exactement aux 3 étapes décrites ci-dessus. Nous instancions le modèle avec l'id `templateId` et mettons son contenu cloné dans notre élément de remplacement de l'application. Notez que nous devons utiliser `cloneNode(true)` pour copier tout l'arbre du modèle.
**Étape par étape, voici ce qui se passe :**
- **Localise** l’élément modèle en utilisant son identifiant unique
- **Crée** une copie profonde du contenu du modèle avec `cloneNode(true)`
- **Trouve** le conteneur app où le contenu sera affiché
- **Vide** tout contenu existant dans le conteneur app
- **Insère** le contenu cloné du modèle dans le DOM visible
Appelez maintenant cette fonction avec l'un des modèles et regardez le résultat.
Appelez maintenant cette fonction avec l’un des modèles et regardez le résultat.
```js
updateRoute('login');
```
✅ Quel est le but de ce code `app.innerHTML = '';` ? Que se passe-t-il sans lui ?
## Créer des routes
**Ce que cet appel de fonction accomplit :**
- **Active** le modèle de connexion en passant son ID comme paramètre
- **Démontre** comment basculer programmatiquement entre différents écrans de l’application
- **Affiche** l’écran de connexion à la place du message "Loading..."
✅ Quel est l’objectif de ce code `app.innerHTML = '';` ? Que se passe-t-il sans lui ?
## Création des routes
Le routage consiste essentiellement à associer des URLs au contenu approprié. Imaginez comment les premiers opérateurs téléphoniques utilisaient des centraux pour connecter les appels – ils prenaient une requête entrante et la routaient vers la bonne destination. Le routage web fonctionne de façon similaire, prenant une requête URL et déterminant le contenu à afficher.
Traditionnellement, les serveurs web géraient cela en servant différents fichiers HTML pour différentes URLs. Comme nous construisons une application monopage, nous devons gérer ce routage nous-mêmes avec JavaScript. Cette approche nous donne plus de contrôle sur l'expérience utilisateur et la performance.
D --> E["👁️ Afficher Écran<br/>Dupliquer & Ajouter"]
F["📍 /login"] --> G["🎯 'login'"]
H["📍 /unknown"] --> I["❌ Non Trouvé"]
I --> J["🔄 Rediriger vers /login"]
style B fill:#e3f2fd
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
**Comprendre le flux de routage :**
- **Les changements d’URL** déclenchent une recherche dans notre configuration de routes
- **Les routes valides** correspondent à des IDs de modèles spécifiques pour rendu
- **Les routes invalides** déclenchent un comportement de secours pour empêcher les états cassés
- **Le rendu des modèles** suit le processus en trois étapes que nous avons appris plus tôt
Lorsqu'on parle d'une application web, on appelle *Routing* l'intention de mapper des **URLs** à des écrans spécifiques qui doivent être affichés. Sur un site web avec plusieurs fichiers HTML, cela se fait automatiquement car les chemins des fichiers sont reflétés dans l'URL. Par exemple, avec ces fichiers dans votre dossier de projet :
Quand on parle d’une application web, on appelle *routage* l’intention de mapper**URLs** à des écrans spécifiques qui doivent être affichés. Sur un site web avec plusieurs fichiers HTML, cela se fait automatiquement car les chemins de fichiers sont reflétés dans l’URL. Par exemple, avec ces fichiers dans votre dossier de projet :
```
mywebsite/index.html
@ -162,7 +389,7 @@ mywebsite/login.html
mywebsite/admin/index.html
```
Si vous créez un serveur web avec `mywebsite` comme racine, le mapping des URLs sera :
Si vous créez un serveur web avec "mywebsite" comme racine, le mappage URL sera :
Cependant, pour notre application web, nous utilisons un seul fichier HTML contenant tous les écrans, donc ce comportement par défaut ne nous aidera pas. Nous devons créer ce mapping manuellement et mettre à jour l'écran affiché en utilisant JavaScript.
Cependant, pour notre application web, nous utilisons un seul fichier HTML contenant tous les écrans, donc ce comportement par défaut ne nous aidera pas. Nous devons créer cette carte manuellement et mettre à jour le modèle affiché avec JavaScript.
### Tâche
Nous allons utiliser un simple objet pour implémenter un [map](https://en.wikipedia.org/wiki/Associative_array) entre les chemins d'URL et nos modèles. Ajoutez cet objet en haut de votre fichier `app.js`.
Nous allons utiliser un objet simple pour implémenter une [table de correspondance](https://fr.wikipedia.org/wiki/Table_de_hashage) entre les chemins URL et nos modèles. Ajoutez cet objet en haut de votre fichier `app.js`.
```js
const routes = {
@ -183,7 +410,12 @@ const routes = {
};
```
Modifions maintenant un peu la fonction `updateRoute`. Au lieu de passer directement `templateId` comme argument, nous voulons le récupérer en regardant d'abord l'URL actuelle, puis utiliser notre map pour obtenir la valeur de l'id du modèle correspondant. Nous pouvons utiliser [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) pour obtenir uniquement la section du chemin de l'URL.
**Comprendre cette configuration de routes :**
- **Définit** une correspondance entre les chemins URL et les identifiants de modèles
- **Utilise** la syntaxe objet où les clés sont des chemins URL et les valeurs contiennent les informations sur le modèle
- **Permet** de rechercher facilement quel modèle afficher pour une URL donnée
- **Fournit** une structure évolutive pour ajouter de nouvelles routes à l'avenir
Modifions maintenant un peu la fonction `updateRoute`. Au lieu de passer directement le `templateId` en argument, nous voulons le récupérer en regardant d'abord l'URL actuelle, puis utiliser notre map pour obtenir la valeur correspondante de l'ID du template. Nous pouvons utiliser [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) pour obtenir uniquement la section du chemin de l'URL.
```js
function updateRoute() {
@ -198,26 +430,100 @@ function updateRoute() {
}
```
Ici, nous avons mappé les routes que nous avons déclarées au modèle correspondant. Vous pouvez essayer de vérifier que cela fonctionne correctement en modifiant l'URL manuellement dans votre navigateur.
✅ Que se passe-t-il si vous entrez un chemin inconnu dans l'URL ? Comment pourrions-nous résoudre cela ?
## Ajouter la navigation
La prochaine étape pour notre application est d'ajouter la possibilité de naviguer entre les pages sans avoir à modifier l'URL manuellement. Cela implique deux choses :
**Décomposons ce qui se passe ici :**
- **Extrait** le chemin actuel de l'URL du navigateur en utilisant `window.location.pathname`
- **Cherche** la configuration de route correspondante dans notre objet routes
- **Récupère** l'ID du template à partir de la configuration de la route
- **Suit** le même processus de rendu de template qu'auparavant
- **Crée** un système dynamique qui réagit aux changements d'URL
1. Mettre à jour l'URL actuelle
2. Mettre à jour le modèle affiché en fonction de la nouvelle URL
Ici, nous avons associé les routes que nous avons déclarées au template correspondant. Vous pouvez tester que cela fonctionne correctement en changeant l'URL manuellement dans votre navigateur.
Nous avons déjà pris en charge la deuxième partie avec la fonction `updateRoute`, donc nous devons comprendre comment mettre à jour l'URL actuelle.
Nous devrons utiliser JavaScript et plus précisément [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), qui permet de mettre à jour l'URL et de créer une nouvelle entrée dans l'historique de navigation, sans recharger le HTML.
✅ Que se passe-t-il si vous entrez un chemin inconnu dans l'URL ? Comment pourrions-nous résoudre cela ?
> Note : Bien que l'élément HTML d'ancre [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) puisse être utilisé seul pour créer des hyperliens vers différentes URLs, il fera recharger le HTML par défaut. Il est nécessaire d'empêcher ce comportement lors de la gestion des routes avec un JavaScript personnalisé, en utilisant la fonction `preventDefault()` sur l'événement de clic.
## Ajout de la navigation
Avec le routage établi, les utilisateurs ont besoin d'un moyen de naviguer dans l'application. Les sites web traditionnels rechargent des pages entières lorsqu'on clique sur des liens, mais nous voulons mettre à jour à la fois l'URL et le contenu sans rafraîchir la page. Cela crée une expérience plus fluide similaire à la manière dont les applications de bureau changent de vues.
Nous devons coordonner deux choses : mettre à jour l'URL du navigateur pour que les utilisateurs puissent mettre des pages en favoris et partager des liens, et afficher le contenu approprié. Lorsqu'il est bien implémenté, cela crée la navigation fluide attendue des applications modernes.
- **Séparation Modèle-Vue** : Templates séparés de la logique applicative
- **Gestion d'état** : État URL synchronisé avec le contenu affiché
- **Amélioration progressive** : JavaScript qui améliore la fonctionnalité HTML basique
- **Expérience utilisateur** : Navigation fluide et sans rafraîchissement de page
> <20>**Aperçu d'architecture** : Composants du système de navigation
>
> **Ce que vous construisez :**
> - **🔄 Gestion de l'URL** : Mise à jour de la barre d'adresse sans rechargement
> - **📋 Système de templates** : Changement dynamique du contenu selon la route
> - **📚 Intégration de l'historique** : Maintien du fonctionnement des boutons retour/avant
> - **🛡️ Gestion des erreurs** : Repli gracieux pour les routes invalides ou manquantes
>
> **Fonctionnement des composants ensemble :**
> - **Écoute** des événements de navigation (clics, changements d'historique)
> - **Mise à jour** de l'URL via l'API History
> - **Rendu** du template adapté à la nouvelle route
> - **Maintien** d'une expérience utilisateur fluide
L'étape suivante pour notre application est d'ajouter la possibilité de naviguer entre les pages sans avoir à changer l'URL manuellement. Cela implique deux choses :
1. Mettre à jour l'URL actuelle
2. Mettre à jour le template affiché en fonction de la nouvelle URL
Nous avons déjà pris en charge la deuxième partie avec la fonction `updateRoute`, il nous reste donc à trouver comment mettre à jour l'URL actuelle.
Nous allons devoir utiliser JavaScript et plus particulièrement la fonction [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) qui permet de mettre à jour l'URL et créer une nouvelle entrée dans l'historique de navigation, sans recharger le HTML.
> ⚠️ **Note importante** : Alors que l'élément HTML ancre [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) peut être utilisé seul pour créer des liens vers différentes URLs, cela provoque par défaut le rechargement de la page HTML. Il est nécessaire d'empêcher ce comportement lors de la gestion du routage avec du JavaScript personnalisé, en utilisant la fonction preventDefault() sur l'événement de clic.
### Tâche
Créons une nouvelle fonction que nous pouvons utiliser pour naviguer dans notre application :
Créons une nouvelle fonction que nous pouvons utiliser pour naviguer dans notre app :
```js
function navigate(path) {
@ -226,9 +532,15 @@ function navigate(path) {
}
```
Cette méthode met d'abord à jour l'URL actuelle en fonction du chemin donné, puis met à jour le modèle. La propriété `window.location.origin` retourne la racine de l'URL, nous permettant de reconstruire une URL complète à partir d'un chemin donné.
**Compréhension de cette fonction de navigation :**
- **Met à jour** l'URL du navigateur avec le nouveau chemin via `history.pushState`
- **Ajoute** une nouvelle entrée à la pile d'historique pour un support correct des boutons retour/avant
- **Déclenche** la fonction `updateRoute()` pour afficher le template correspondant
- **Maintient** l'expérience SPA sans rechargement de page
Cette méthode met d'abord à jour l'URL actuelle en fonction du chemin donné, puis met à jour le template. La propriété `window.location.origin` retourne la racine de l'URL, ce qui permet de reconstruire une URL complète à partir d'un chemin donné.
Maintenant que nous avons cette fonction, nous pouvons résoudre le problème que nous avons si un chemin ne correspond à aucune route définie. Nous allons modifier la fonction `updateRoute` en ajoutant une solution de secours vers l'une des routes existantes si nous ne trouvons pas de correspondance.
Maintenant que nous avons cette fonction, nous pouvons régler le problème si un chemin ne correspond à aucune route définie. Nous allons modifier la fonction `updateRoute` en ajoutant une solution de secours vers une route existante si aucune correspondance n'est trouvée.
Si une route ne peut pas être trouvée, nous redirigerons maintenant vers la page de connexion.
**Points clés à retenir :**
- **Vérifie** si une route existe pour le chemin actuel
- **Redirige** vers la page de connexion lorsqu'une route invalide est utilisée
- **Fournit** un mécanisme de secours pour éviter une navigation cassée
- **Assure** que les utilisateurs voient toujours un écran valide, même avec une URL incorrecte
Créons maintenant une fonction pour obtenir l'URL lorsqu'un lien est cliqué et pour empêcher le comportement par défaut du navigateur pour les liens :
Si une route ne peut pas être trouvée, nous redirigeons maintenant vers la page `login`.
Créons maintenant une fonction pour récupérer l'URL lorsqu'un lien est cliqué, et pour empêcher le comportement par défaut du navigateur pour les liens :
```js
function onLinkClick(event) {
@ -253,7 +576,11 @@ function onLinkClick(event) {
}
```
Complétons le système de navigation en ajoutant des liaisons à nos liens *Login* et *Logout* dans le HTML.
**Décomposition de ce gestionnaire de clic :**
- **Empêche** le comportement par défaut du navigateur grâce à `preventDefault()`
- **Extrait** l'URL de destination à partir de l'élément de lien cliqué
- **Appelle** notre fonction de navigation personnalisée au lieu de recharger la page
- **Maintient** une expérience fluide de type application monopage
L'objet `event` ci-dessus capture l'événement `click` et le transmet à notre fonction `onLinkClick`.
En utilisant l'attribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick), liez l'événement `click` au code JavaScript, ici l'appel à la fonction `navigate()`.
Essayez de cliquer sur ces liens, vous devriez maintenant pouvoir naviguer entre les différents écrans de votre application.
✅ La méthode `history.pushState` fait partie de la norme HTML5 et est implémentée dans [tous les navigateurs modernes](https://caniuse.com/?search=pushState). Si vous construisez une application web pour des navigateurs plus anciens, il existe une astuce que vous pouvez utiliser à la place de cette API : en utilisant un [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) avant le chemin, vous pouvez implémenter un routage qui fonctionne avec la navigation classique des ancres et ne recharge pas la page, car son objectif était de créer des liens internes dans une page.
## Gérer les boutons de retour et d'avance du navigateur
**Ce que réalise ce binding onclick :**
- **Connecte** chaque lien à notre système de navigation personnalisé
- **Transmet** l'événement de clic à notre fonction `onLinkClick` pour traitement
- **Permet** une navigation fluide sans rechargement
- **Maintient** une structure URL correcte que les utilisateurs peuvent mettre en favoris ou partager
L'attribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) lie l'événement `click` au code JavaScript, ici l'appel à la fonction `navigate()`.
Essayez de cliquer sur ces liens, vous devriez maintenant pouvoir naviguer entre les différentes pages de votre app.
✅ La méthode `history.pushState` fait partie de la norme HTML5 et est implémentée dans [tous les navigateurs modernes](https://caniuse.com/?search=pushState). Si vous développez une app web pour des navigateurs plus anciens, il existe un petit truc à utiliser à la place de cette API : en utilisant un [hash ("#")](https://fr.wikipedia.org/wiki/Fragment_URI) avant le chemin, vous pouvez implémenter un routage qui fonctionne avec la navigation ordinaire des ancres et sans rechargement de page, car son but était de créer des liens internes dans une page.
## Faire fonctionner les boutons retour et avant
Les boutons retour et avant sont fondamentaux pour la navigation web, tout comme les contrôleurs de mission de la NASA peuvent revoir les états précédents d’un système lors des missions spatiales. Les utilisateurs attendent que ces boutons fonctionnent, et quand ce n’est pas le cas, l'expérience de navigation attendue est brisée.
Notre application SPA nécessite une configuration supplémentaire pour supporter cela. Le navigateur maintient une pile d’historique (à laquelle nous avons ajouté des entrées avec `history.pushState`), mais lorsque les utilisateurs naviguent dans cet historique, notre app doit répondre en mettant à jour le contenu affiché en conséquence.
Browser->>Browser: L'URL se met à jour vers /dashboard
App->>App: updateRoute() appelé
App->>Template: Trouver & cloner le modèle dashboard
Template->>App: Retourner le contenu cloné
App->>Browser: Remplacer le contenu de l'app par le modèle
Browser->>User: Afficher l'écran du tableau de bord
Note over User,Template: L'utilisateur clique sur le bouton retour du navigateur
User->>Browser: Clique sur le bouton retour
Browser->>Browser: L'historique revient à /login
Browser->>App: événement popstate déclenché
App->>App: updateRoute() appelé automatiquement
App->>Template: Trouver & cloner le modèle login
Template->>App: Retourner le contenu cloné
App->>Browser: Remplacer le contenu de l'app par le modèle
Browser->>User: Afficher l'écran de connexion
```
**Points d’interaction clés :**
- **Actions utilisateur** déclenchent la navigation via clics ou boutons du navigateur
- **App** intercepte les clics sur liens pour empêcher le rechargement de page
- **API History** gère les changements d’URL et la pile d’historique du navigateur
- **Templates** fournissent la structure du contenu pour chaque écran
- **Écouteurs d'événements** assurent que l’app réagit à tous les types de navigation
L'utilisation de `history.pushState` crée de nouvelles entrées dans l'historique de navigation du navigateur. Vous pouvez vérifier cela en maintenant le bouton *retour* de votre navigateur, il devrait afficher quelque chose comme ceci :
L’utilisation de `history.pushState` crée de nouvelles entrées dans l’historique de navigation du navigateur. Vous pouvez vérifier cela en maintenant appuyé le *bouton retour* de votre navigateur, cela devrait afficher quelque chose comme ceci :
Si vous essayez de cliquer plusieurs fois sur le bouton retour, vous verrez que l'URL actuelle change et que l'historique est mis à jour, mais le même modèle continue d'être affiché.
Si vous cliquez plusieurs fois sur le bouton retour, vous verrez que l’URL change et que l'historique est mis à jour, mais que le même template reste affiché.
C'est parce que l'application ne sait pas que nous devons appeler `updateRoute()` chaque fois que l'historique change. Si vous consultez la documentation de [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), vous verrez que si l'état change - c'est-à-dire que nous avons déplacé vers une URL différente - l'événement [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) est déclenché. Nous allons utiliser cela pour corriger ce problème.
C’est parce que l’application ne sait pas qu’elle doit appeler `updateRoute()` à chaque changement d’historique. Si vous regardez la [documentation de `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), vous pouvez voir que si l’état change – ce qui signifie que nous avons changé d’URL – l’événement [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) est déclenché. Nous allons utiliser cela pour corriger ce problème.
### Tâche
Pour nous assurer que le modèle affiché est mis à jour lorsque l'historique du navigateur change, nous allons attacher une nouvelle fonction qui appelle `updateRoute()`. Nous ferons cela en bas de notre fichier `app.js` :
Pour garantir que le template affiché est mis à jour lorsque l’historique du navigateur change, nous allons attacher une nouvelle fonction qui appelle `updateRoute()`. Nous ferons cela en bas de notre fichier `app.js` :
```js
window.onpopstate = () => updateRoute();
updateRoute();
```
> Note : nous avons utilisé une [fonction fléchée](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ici pour déclarer notre gestionnaire d'événement `popstate` par souci de concision, mais une fonction régulière fonctionnerait de la même manière.
**Compréhension de cette intégration de l’historique :**
- **Écoute** les événements `popstate` qui se produisent quand l’utilisateur navigue avec les boutons du navigateur
- **Utilise** une fonction fléchée pour une syntaxe plus concise du gestionnaire d’événements
- **Appelle** automatiquement `updateRoute()` à chaque changement d’état de l’historique
- **Initialise** l’app en appelant `updateRoute()` lorsque la page charge pour la première fois
- **Garantit** que le bon template est affiché peu importe comment l’utilisateur navigue
> 💡 **Astuce pro** : Nous avons utilisé une [fonction fléchée](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ici pour déclarer notre gestionnaire d'événement `popstate` par souci de concision, mais une fonction classique fonctionnerait de la même manière.
Voici une vidéo de rappel sur les fonctions fléchées :
- **Architecturer** des applications monopage avec une séparation appropriée des responsabilités
- **Mettre en œuvre** des systèmes de routage côté client qui évoluent avec la complexité de l'application
- **Déboguer** des flux de navigation complexes en utilisant les outils de développement du navigateur
- **Optimiser** les performances de l'application grâce à une gestion efficace des modèles
- **Concevoir** des expériences utilisateur qui semblent natives et réactives
**Concepts de développement frontend maîtrisés** :
- **Architecture composant** : Modèles UI réutilisables et systèmes de templates
- **Synchronisation d'état** : Gestion de l'état via l'URL et historique du navigateur
- **Programmation événementielle** : Gestion des interactions utilisateur et navigation
- **Optimisation des performances** : Manipulation efficace du DOM et chargement de contenu
- **Conception de l'expérience utilisateur** : Transitions fluides et navigation intuitive
**Niveau suivant** : Vous êtes prêt à explorer les frameworks frontend modernes, la gestion avancée d'état, ou construire des applications d'entreprise complexes !
🌟 **Succès débloqué** : Vous avez construit une base professionnelle pour une application monopage avec des patterns d'architecture web modernes !
---
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les fonctions fléchées.
## Défi Agent GitHub Copilot 🚀
Essayez maintenant d'utiliser les boutons de retour et d'avance de votre navigateur, et vérifiez que la route affichée est correctement mise à jour cette fois.
Utilisez le mode Agent pour relever le défi suivant :
---
**Description :** Améliorez l'application bancaire en implémentant la gestion des erreurs et un modèle de page 404 pour les routes invalides, améliorant ainsi l'expérience utilisateur lors de la navigation vers des pages inexistantes.
**Prompt :** Créez un nouveau modèle HTML avec l'id "not-found" affichant une page d'erreur 404 conviviale avec du style. Puis modifiez la logique de routage JavaScript pour afficher ce modèle lorsque les utilisateurs naviguent vers des URLs invalides, et ajoutez un bouton "Retour à l'accueil" qui revient à la page de connexion.
En savoir plus sur [le mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ici.
## 🚀 Challenge
Ajoutez un nouveau template et une route pour une troisième page qui affiche les crédits de cette application.
## 🚀 Défi
**Objectifs du défi :**
- **Créer** un nouveau template HTML avec une structure de contenu appropriée
- **Ajouter** la nouvelle route à votre objet de configuration des routes
- **Inclure** des liens de navigation vers et depuis la page des crédits
- **Tester** que toute la navigation fonctionne correctement avec l'historique du navigateur
Ajoutez un nouveau modèle et une route pour une troisième page qui affiche les crédits de cette application.
[Quiz après le cours](https://ff-quizzes.netlify.app/web/quiz/42)
## Revue & Auto-apprentissage
## Révision et étude personnelle
Le routage est l'un des aspects étonnamment complexes du développement web, surtout lorsque le web passe des comportements de rafraîchissement de page aux rafraîchissements de page d'application monopage. Lisez un peu sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) gère le routage. Pouvez-vous expliquer pourquoi certaines décisions décrites dans ce document sont nécessaires ?
Le routage est l'une des parties étonnamment complexes du développement web, surtout à mesure que le web passe des comportements de rafraîchissement de page aux rafraîchissements de page des applications monopage. Lisez un peu sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) gère le routage. Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires ?
**Ressources d'apprentissage supplémentaires :**
- **Explorez** comment les frameworks populaires comme React Router et Vue Router implémentent le routage côté client
- **Recherchez** les différences entre le routage basé sur le hash et le routage avec l'API history
- **Apprenez** sur le rendu côté serveur (SSR) et comment il impacte les stratégies de routage
- **Investiguez** comment les Progressive Web Apps (PWAs) gèrent le routage et la navigation
## Devoir
## Travail à faire
[Améliorez le routage](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de faire appel à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’être précis, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue native doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle effectuée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
La déclaration des routes contient actuellement uniquement l'ID du modèle à utiliser. Mais lorsqu'une nouvelle page est affichée, il faut parfois un peu plus. Améliorons notre implémentation de routage avec deux fonctionnalités supplémentaires :
Maintenant que vous avez construit un système de routage de base, il est temps de l'améliorer avec des fonctionnalités professionnelles qui améliorent l'expérience utilisateur et offrent de meilleurs outils pour les développeurs. Les applications réelles nécessitent plus que de simples changements de modèle – elles exigent des titres de page dynamiques, des hooks de cycle de vie, et des architectures extensibles.
- Donner des titres à chaque modèle et mettre à jour le titre de la fenêtre avec ce nouveau titre lorsque le modèle change.
- Ajouter une option pour exécuter du code après le changement de modèle. Nous voulons afficher `'Dashboard is shown'` dans la console développeur chaque fois que la page du tableau de bord est affichée.
Dans cet exercice, vous allez étendre votre implémentation de routage avec deux fonctionnalités essentielles que l'on retrouve couramment dans les applications web en production. Ces améliorations rendront votre application bancaire plus soignée et fourniront une base pour des fonctionnalités futures.
## Critères d'évaluation
La déclaration des routes contient actuellement uniquement l'ID du template à utiliser. Mais lorsqu'on affiche une nouvelle page, un peu plus est parfois nécessaire. Améliorons notre implémentation de routage avec deux fonctionnalités additionnelles :
| | Les deux fonctionnalités sont implémentées et fonctionnent. L'ajout de titre et de code fonctionne également pour une nouvelle route ajoutée dans la déclaration `routes`. | Les deux fonctionnalités fonctionnent, mais le comportement est codé en dur et non configurable via la déclaration `routes`. Ajouter une troisième route avec titre et code additionnel ne fonctionne pas ou fonctionne partiellement. | Une des fonctionnalités manque ou ne fonctionne pas correctement. |
### Fonctionnalité 1 : Titres de Pages Dynamiques
**Objectif :** Donner des titres à chaque template et mettre à jour le titre de la fenêtre avec ce nouveau titre lorsque le template change.
**Pourquoi c'est important :**
- **Améliore** l'expérience utilisateur en affichant des titres descriptifs dans les onglets du navigateur
- **Renforce** l'accessibilité pour les lecteurs d'écran et les technologies d'assistance
- **Fournit** un meilleur repérage dans les favoris et l'historique du navigateur
- **Suit** les meilleures pratiques professionnelles du développement web
**Approche d'implémentation :**
- **Étendre** l'objet routes pour inclure l'information du titre pour chaque route
- **Modifier** la fonction `updateRoute()` pour mettre à jour dynamiquement `document.title`
- **Tester** que les titres changent correctement lors de la navigation entre les écrans
### Fonctionnalité 2 : Hooks de Cycle de Vie de Route
**Objectif :** Ajouter une option pour exécuter du code après que le template a changé. Nous voulons afficher `'Dashboard is shown'` dans la console développeur à chaque fois que la page du tableau de bord est affichée.
**Pourquoi c'est important :**
- **Permet** l'exécution de logique personnalisée lors du chargement de routes spécifiques
- **Offre** des hooks pour l'analyse, la journalisation ou du code d'initialisation
- **Crée** une base pour des comportements de routes plus complexes
- **Démontre** le pattern observateur dans le développement web
**Approche d'implémentation :**
- **Ajouter** une propriété fonction callback optionnelle aux configurations de route
- **Exécuter** la fonction callback (si elle est présente) après que le rendu du template soit terminé
- **S'assurer** que la fonctionnalité fonctionne pour toute route avec un callback défini
- **Tester** que le message dans la console apparaît lors de la visite du tableau de bord
| | Les deux fonctionnalités sont implémentées et fonctionnent. Le titre et l'ajout de code fonctionnent également pour une nouvelle route ajoutée dans la déclaration `routes`. | Les deux fonctionnalités fonctionnent, mais le comportement est codé en dur et non configurable via la déclaration `routes`. L'ajout d'une troisième route avec titre et ajout de code ne fonctionne pas ou fonctionne partiellement. | Une des fonctionnalités est manquante ou ne fonctionne pas correctement. |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer la précision, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, il est recommandé de faire appel à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
# Stylisez votre application bancaire avec le CSS moderne
## Vue d'ensemble du projet
Transformez votre application bancaire fonctionnelle en une application web visuellement attrayante et professionnelle en utilisant des techniques CSS modernes. Vous créerez un système de design cohérent qui améliore l'expérience utilisateur tout en maintenant les principes d'accessibilité et de design responsive.
Cette tâche vous met au défi d'appliquer des modèles de design web contemporains, de mettre en œuvre une identité visuelle cohérente et de créer une interface que les utilisateurs trouveront à la fois attrayante et intuitive à utiliser.
## Instructions
Créez un nouveau fichier `styles.css` et ajoutez un lien vers celui-ci dans votre fichier `index.html` actuel. Dans le fichier CSS que vous venez de créer, ajoutez des styles pour rendre les pages *Connexion* et *Tableau de bord* agréables et bien organisées. Essayez de créer un thème de couleurs pour donner à votre application une identité visuelle propre.
### Étape 1 : Configurez votre feuille de styles
**Créez votre base CSS :**
1. **Créez** un nouveau fichier nommé `styles.css` à la racine de votre projet
2. **Liez** la feuille de styles dans votre fichier `index.html` :
```html
<linkrel="stylesheet"href="styles.css">
```
3. **Commencez** par une remise à zéro CSS et des valeurs par défaut modernes :
| **Système de design** | Met en œuvre un système complet avec des couleurs, typographies et espaces cohérents | Utilise un style cohérent avec des motifs clairs et bonne hiérarchie visuelle | Style basique appliqué avec quelques problèmes de cohérence ou éléments manquants | Style minimal avec choix incohérents ou contradictoires |
| **Expérience utilisateur** | Crée une interface intuitive, professionnelle avec excellente utilisabilité et attractivité visuelle | Offre une bonne expérience avec navigation claire et contenu lisible | Utilisabilité basique avec quelques améliorations UX nécessaires | Mauvaise utilisabilité, difficile à naviguer ou lire |
| **Implémentation technique** | Utilise des techniques CSS modernes, code organisé et suit les meilleures pratiques | Implémente efficacement le CSS avec bonne organisation et techniques appropriées | CSS fonctionnel mais peut manquer d’organisation ou de modernité | Implémentation CSS pauvre avec problèmes techniques ou de compatibilité |
| **Design responsive** | Design entièrement responsive fonctionnant parfaitement sur tous les appareils | Bon comportement responsive avec quelques légers problèmes sur certains écrans | Mise en œuvre responsive basique avec quelques problèmes de mise en page | Pas responsive ou problèmes significatifs sur mobile |
| **Accessibilité** | Respecte les directives WCAG avec excellente navigation clavier et support lecteur d’écran | Bonnes pratiques d’accessibilité avec contraste et indicateurs de focus adéquats | Considérations d’accessibilité basiques avec éléments manquants | Faible accessibilité, difficile pour les utilisateurs en situation de handicap |
## Consignes de soumission
**Incluez dans votre soumission :**
- **styles.css** : votre feuille de styles complète
- **HTML mis à jour** : toutes modifications HTML que vous avez effectuées
- **Captures d’écran** : images montrant votre design sur desktop et mobile
- **README** : description brève de vos choix de design et palette de couleurs
> Conseil : vous pouvez modifier le HTML et ajouter de nouveaux éléments et classes si nécessaire.
**Points bonus pour :**
- **Propriétés CSS personnalisées** pour un thème maintenable
- **Fonctionnalités CSS avancées** comme Grid, Flexbox ou animations CSS
- **Considérations de performance** comme CSS optimisé et taille minimale de fichier
- **Tests multi-navigateurs** garantissant la compatibilité sur différents navigateurs
## Critères
> 💡 **Conseil pro** : Commencez par le design mobile, puis améliorez pour les écrans plus grands. Cette approche mobile-first garantit que votre application fonctionne bien sur tous les appareils et respecte les meilleures pratiques modernes du développement web.
| | Toutes les pages sont propres et lisibles, avec un thème de couleurs cohérent et des sections bien mises en valeur. | Les pages sont stylisées mais sans thème ou avec des sections mal délimitées. | Les pages manquent de style, les sections sont désorganisées et les informations difficiles à lire. |
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avis de non-responsabilité** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforçons d’assurer l’exactitude, veuillez noter que les traductions automatisées peuvent comporter des erreurs ou des inexactitudes. Le document original dans sa langue native doit être considéré comme la source faisant foi. Pour toute information critique, une traduction professionnelle humaine est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
# Attribution de Réusinage et Documentation du Code
## Objectifs d'apprentissage
En complétant cette attribution, vous pratiquerez des compétences essentielles en développement logiciel que les développeurs professionnels utilisent quotidiennement. Vous apprendrez à organiser le code pour sa maintenabilité, réduire la duplication par l'abstraction, et documenter votre travail pour les développeurs futurs (y compris vous-même !).
Un code propre et bien documenté est crucial pour les projets de développement web réels où plusieurs développeurs collaborent et les bases de code évoluent avec le temps.
## Vue d'ensemble de l'attribution
Le fichier `app.js` de votre application bancaire a beaucoup grossi avec les fonctionnalités de connexion, d'inscription et de tableau de bord. Il est temps de refactoriser ce code en utilisant des pratiques de développement professionnelles pour améliorer la lisibilité, la maintenabilité et réduire la duplication.
## Instructions
À mesure que votre base de code grandit, il est important de refactoriser fréquemment votre code pour le rendre lisible et facile à maintenir sur le long terme. Ajoutez des commentaires et refactorisez votre `app.js` afin d'améliorer la qualité du code :
Transformez votre code actuel `app.js` en implémentant ces trois techniques centrales de refactorisation :
### 1. Extraire les Constantes de Configuration
**Tâche** : Créez une section de configuration en haut de votre fichier avec des constantes réutilisables.
**Conseils d'implémentation :**
- Extraire l'URL de base de l'API serveur (actuellement codée en dur à plusieurs endroits)
- Créer des constantes pour les messages d'erreur qui apparaissent dans plusieurs fonctions
- Envisager d'extraire les chemins de routes et les IDs d'éléments utilisés de manière répétée
**Structure exemple :**
```javascript
// Constantes de configuration
const API_BASE_URL = 'http://localhost:5000/api';
const ROUTES = {
LOGIN: '/login',
DASHBOARD: '/dashboard'
};
```
### 2. Créer une Fonction Unifiée de Requête
**Tâche** : Construisez une fonction réutilisable `sendRequest()` qui supprime le code dupliqué entre `createAccount()` et `getAccount()`.
**Exigences :**
- Gérer à la fois les requêtes GET et POST
- Inclure une gestion correcte des erreurs
- Supporter différents points de terminaison URL
- Accepter un corps de requête optionnel
**Signature de fonction recommandée :**
```javascript
async function sendRequest(endpoint, method = 'GET', data = null) {
// Votre implémentation ici
}
```
### 3. Ajouter une Documentation Professionnelle du Code
**Tâche** : Documentez votre code avec des commentaires clairs et utiles qui expliquent le « pourquoi » derrière votre logique.
**Normes de documentation :**
- Ajouter une documentation de fonction expliquant le but, les paramètres et les valeurs retournées
- Inclure des commentaires inline pour la logique complexe ou les règles métier
- Regrouper les fonctions apparentées avec des en-têtes de section
- Expliquer tout motif de code non évident ou solution de contournement spécifique au navigateur
**Style de documentation exemple :**
```javascript
/**
* Authenticates user and redirects to dashboard
* @param {Event} event - Form submission event
* @returns {Promise<void>} - Resolves when login process completes
*/
async function login(event) {
// Empêcher la soumission par défaut du formulaire pour gérer avec JavaScript
event.preventDefault();
// Votre implémentation...
}
```
## Critères de Réussite
Votre code refactorisé doit démontrer ces pratiques professionnelles de développement :
### Mise en œuvre Exemplaire
- ✅ **Constantes** : Toutes les chaînes magiques et URLs sont extraites dans des constantes clairement nommées
- ✅ **Principe DRY** : La logique commune des requêtes est consolidée dans une fonction réutilisable `sendRequest()`
- ✅ **Documentation** : Les fonctions possèdent des commentaires JSDoc clairs expliquant but et paramètres
- ✅ **Organisation** : Le code est logiquement regroupé avec des en-têtes de section et un formatage cohérent
- ✅ **Gestion des erreurs** : Amélioration de la gestion des erreurs via la nouvelle fonction de requête
### Mise en œuvre Adéquate
- ✅ **Constantes** : La plupart des valeurs répétées sont extraites, avec quelques valeurs codées en dur restantes
- ✅ **Factorisation** : Fonction basique `sendRequest()` créée mais pouvant ne pas gérer tous les cas particuliers
- ✅ **Commentaires** : Fonctions clés documentées, bien que certaines explications pourraient être plus complètes
- ✅ **Lisibilité** : Code généralement bien organisé avec quelques points à améliorer
### À Améliorer
- ❌ **Constantes** : Beaucoup de chaînes magiques et URLs restent codées en dur un peu partout dans le fichier
- ❌ **Duplication** : Duplication importante de code entre fonctions similaires
- ❌ **Documentation** : Commentaires manquants ou insuffisants qui n’expliquent pas le but du code
- ❌ **Organisation** : Code sans structure claire ni regroupement logique
## Tester Votre Code Refactorisé
Après la refactorisation, assurez-vous que votre application bancaire fonctionne toujours correctement :
1. **Tester tous les flux utilisateur** : Inscription, connexion, affichage du tableau de bord, et gestion des erreurs
2. **Vérifier les appels API** : Confirmer que votre fonction `sendRequest()` fonctionne à la fois pour la création et la récupération de compte
3. **Tester les scénarios d’erreur** : Tester avec des identifiants invalides et des erreurs réseau
4. **Revoir la console** : Vérifier qu’aucune nouvelle erreur n’a été introduite pendant la refactorisation
## Consignes de Soumission
Soumettez votre fichier `app.js` refactorisé avec :
- Des en-têtes de section clairs organisant les différentes fonctionnalités
- Un formatage et une indentation cohérents du code
- Une documentation JSDoc complète pour toutes les fonctions
- Un court commentaire en haut expliquant votre approche de refactorisation
**Défi Bonus** : Créez un fichier simple de documentation du code (`CODE_STRUCTURE.md`) qui explique l’architecture de votre application et comment les différentes fonctions collaborent.
## Connexion au Monde Réel
- Extrayez les constantes, comme l'URL de base de l'API du serveur
- Factorisez le code similaire : par exemple, vous pouvez créer une fonction `sendRequest()` pour regrouper le code utilisé dans `createAccount()` et `getAccount()`
- Réorganisez le code pour le rendre plus facile à lire, et ajoutez des commentaires
Cette attribution reflète le type de maintenance de code que les développeurs professionnels effectuent régulièrement. En milieu industriel :
- **Les revues de code** évaluent la lisibilité et la maintenabilité, comme dans cette attribution
- **La dette technique** s’accumule lorsque le code n’est pas régulièrement refactorisé et documenté
- **La collaboration en équipe** dépend d’un code clair et bien documenté que les nouveaux membres peuvent comprendre
- **La correction de bugs** est beaucoup plus aisée dans des bases de code bien organisées avec de bonnes abstractions
## Barème
Les compétences que vous pratiquez ici — extraction des constantes, élimination de la duplication, et rédaction d’une documentation claire — sont fondamentales au développement logiciel professionnel.
| | Le code est commenté, bien organisé en différentes sections et facile à lire. Les constantes sont extraites et une fonction factorisée `sendRequest()` a été créée. | Le code est propre mais pourrait être amélioré avec plus de commentaires, l'extraction de constantes ou la factorisation. | Le code est désordonné, non commenté, les constantes ne sont pas extraites et le code n'est pas factorisé. |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforçons d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle humaine est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
# Créer une application bancaire Partie 4 : Concepts de gestion d'état
# Construire une application bancaire Partie 4 : Concepts de gestion d’état
## Quiz avant le cours
## ⚡ Ce que vous pouvez faire dans les 5 prochaines minutes
[Quiz avant le cours](https://ff-quizzes.netlify.app/web/quiz/47)
**Parcours de démarrage rapide pour les développeurs occupés**
### Introduction
```mermaid
flowchart LR
A[⚡ 5 minutes] --> B[Diagnostiquer les problèmes d'état]
B --> C[Créer un objet d'état central]
C --> D[Ajouter la fonction updateState]
D --> E[Voir des améliorations immédiates]
```
- **Minute 1** : Tester le problème d’état actuel - se connecter, rafraîchir la page, observer la déconnexion
- **Minute 2** : Remplacer `let account = null` par `let state = { account: null }`
- **Minute 3** : Créer une fonction simple `updateState()` pour des mises à jour contrôlées
- **Minute 4** : Mettre à jour une fonction pour utiliser le nouveau modèle
- **Minute 5** : Tester la meilleure prévisibilité et capacité de débogage
**Test de diagnostic rapide** :
```javascript
// Avant : État dispersé
let account = null; // Perdu au rafraîchissement !
// Après : État centralisé
let state = Object.freeze({ account: null }); // Contrôlé et traçable !
```
**Pourquoi c’est important** : En 5 minutes, vous allez expérimenter la transformation d’une gestion d’état chaotique vers des modèles prévisibles et débogables. C’est la base qui rend les applications complexes maintenables.
## 🗺️ Votre parcours d’apprentissage vers la maîtrise de la gestion d’état
```mermaid
journey
title De l'État Éparpillé à l'Architecture Professionnelle
section Diagnostic des Problèmes
Identifier les problèmes de perte d'état: 3: You
Comprendre les mises à jour éparses: 4: You
Reconnaître les besoins en architecture: 6: You
section Centralisation du Contrôle
Créer un objet d'état unifié: 5: You
Mettre en œuvre des mises à jour contrôlées: 7: You
Ajouter des modèles immuables: 8: You
section Ajout de Persistance
Implémenter localStorage: 6: You
Gérer la sérialisation: 7: You
Créer la continuité de session: 9: You
section Équilibrer la Fraîcheur
Traiter la vétusté des données: 5: You
Construire des systèmes de rafraîchissement: 8: You
Atteindre un équilibre optimal: 9: You
```
**Destination de votre parcours** : À la fin de cette leçon, vous aurez construit un système de gestion d’état professionnel qui gère la persistance, la fraîcheur des données et des mises à jour prévisibles - les mêmes modèles utilisés dans des applications en production.
La gestion d’état est comme le système de navigation du vaisseau Voyager – quand tout fonctionne bien, on remarque à peine sa présence. Mais quand il y a un problème, cela fait la différence entre atteindre l’espace interstellaire ou dériver perdu dans le vide cosmique. En développement web, l’état représente tout ce que votre application doit retenir : le statut de connexion de l’utilisateur, les données de formulaire, l’historique de navigation, et les états temporaires de l’interface.
À mesure que votre application bancaire a évolué d’un simple formulaire de connexion vers une application plus sophistiquée, vous avez probablement rencontré certains défis courants. Actualiser la page provoque une déconnexion inattendue des utilisateurs. Fermer le navigateur fait disparaître tous les progrès. Déboguer un problème vous amène à explorer plusieurs fonctions qui modifient toutes les mêmes données de manières différentes.
Ce ne sont pas des signes de mauvais code – ce sont les douleurs normales de croissance qui surviennent quand les applications atteignent un certain seuil de complexité. Chaque développeur fait face à ces défis lorsque ses applications passent de la phase de « preuve de concept » à « prêtes pour la production ».
Dans cette leçon, nous allons implémenter un système centralisé de gestion d’état qui transformera votre application bancaire en une application fiable et professionnelle. Vous apprendrez à gérer les flux de données de manière prévisible, à persister correctement les sessions utilisateur, et à créer une expérience utilisateur fluide que requièrent les applications web modernes.
## Prérequis
À mesure qu'une application web se développe, il devient difficile de suivre tous les flux de données. Quel code obtient les données, quelle page les utilise, où et quand elles doivent être mises à jour... il est facile de se retrouver avec un code désordonné et difficile à maintenir. Cela est particulièrement vrai lorsque vous devez partager des données entre différentes pages de votre application, comme les données utilisateur. Le concept de *gestion d'état* a toujours existé dans tous les types de programmes, mais avec la complexité croissante des applications web, il est désormais essentiel d'y réfléchir dès le développement.
Avant de plonger dans les concepts de gestion d’état, vous devez avoir configuré correctement votre environnement de développement et avoir les bases de votre application bancaire en place. Cette leçon s’appuie directement sur les concepts et le code des parties précédentes de cette série.
Dans cette dernière partie, nous allons examiner l'application que nous avons construite pour repenser la gestion de l'état, permettant de prendre en charge le rafraîchissement du navigateur à tout moment et de conserver les données entre les sessions utilisateur.
Assurez-vous d’avoir les composants suivants prêts avant de continuer :
### Prérequis
**Configuration requise :**
- Terminez la [leçon sur la récupération des données](../3-data/README.md) – votre application doit charger et afficher les données de compte avec succès
- Installez [Node.js](https://nodejs.org) sur votre système pour exécuter l’API backend
- Lancez localement le [serveur API](../api/README.md) pour gérer les opérations sur les données de compte
Vous devez avoir terminé la partie [récupération de données](../3-data/README.md) de l'application web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org) et [exécuter l'API serveur](../api/README.md) localement afin de pouvoir gérer les données de compte.
**Tester votre environnement :**
Vous pouvez tester que le serveur fonctionne correctement en exécutant cette commande dans un terminal :
Vérifiez que votre serveur API fonctionne correctement en exécutant cette commande dans un terminal :
```sh
curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result
# -> devrait retourner "Bank API v1.0.0" en résultat
```
**Ce que fait cette commande :**
- **Envoie** une requête GET à votre serveur API local
- **Teste** la connexion et vérifie que le serveur répond
- **Retourne** les informations de version de l’API si tout fonctionne correctement
## 🧠 Vue d’ensemble de l’architecture de gestion d’état
```mermaid
mindmap
root((Gestion d'État))
Problèmes Actuels
Perte de Session
Problèmes de Rafraîchissement de Page
Impact de la Fermeture du Navigateur
Problèmes de Réinitialisation des Variables
Mises à Jour Éparpillées
Multiples Points de Modification
Défis de Débogage
Comportement Imprévisible
Nettoyage Incomplet
Problèmes d'État de Déconnexion
Fuites de Mémoire
Préoccupations de Sécurité
Solutions Centralisées
Objet d'État Unifié
Source Unique de Vérité
Structure Prévisible
Fondation Evolutive
Mises à Jour Contrôlées
Modèles Immuables
Utilisation de Object.freeze
Changements Basés sur des Fonctions
Suivi d'État
Gestion de l'Historique
Visibilité du Débogage
Audit des Modifications
Stratégies de Persistance
Intégration localStorage
Continuité de Session
Sérialisation JSON
Synchronisation Automatique
Fraîcheur des Données
Rafraîchissement Serveur
Gestion des Données Obsolètes
Optimisation de l'Équilibre
Optimisation du Stockage
Données Minimales
Focus sur la Performance
Considérations de Sécurité
```
**Principe fondamental** : La gestion d’état professionnelle équilibre prévisibilité, persistance et performance pour créer des expériences utilisateur fiables, capables d’évoluer des interactions simples aux workflows complexes d’application.
---
## Repenser la gestion d'état
## Diagnostic des problèmes actuels d’état
Dans la [leçon précédente](../3-data/README.md), nous avons introduit un concept basique d'état dans notre application avec la variable globale `account` qui contient les données bancaires de l'utilisateur actuellement connecté. Cependant, notre implémentation actuelle présente quelques défauts. Essayez de rafraîchir la page lorsque vous êtes sur le tableau de bord. Que se passe-t-il ?
À la manière de Sherlock Holmes examinant une scène de crime, nous devons comprendre exactement ce qui se passe dans notre implémentation actuelle avant de résoudre le mystère des sessions utilisateur disparues.
Il y a trois problèmes avec le code actuel :
Faisons une expérience simple qui révèle les défis sous-jacents de gestion d’état :
- L'état n'est pas conservé, un rafraîchissement du navigateur vous ramène à la page de connexion.
- Plusieurs fonctions modifient l'état. À mesure que l'application se développe, cela peut rendre difficile le suivi des changements et il est facile d'oublier de mettre à jour une partie.
- L'état n'est pas nettoyé, donc lorsque vous cliquez sur *Déconnexion*, les données du compte sont toujours présentes même si vous êtes sur la page de connexion.
**🧪 Essayez ce test de diagnostic :**
1. Connectez-vous à votre application bancaire et allez au tableau de bord
2. Rafraîchissez la page du navigateur
3. Observez ce qui arrive à votre statut de connexion
Nous pourrions mettre à jour notre code pour résoudre ces problèmes un par un, mais cela entraînerait une duplication de code et rendrait l'application plus complexe et difficile à maintenir. Ou nous pourrions prendre quelques minutes pour repenser notre stratégie.
Si vous êtes redirigé vers l’écran de connexion, vous avez découvert le problème classique de persistance d’état. Ce comportement survient parce que notre implémentation actuelle stocke les données utilisateur dans des variables JavaScript qui se réinitialisent à chaque chargement de page.
> Quels problèmes essayons-nous vraiment de résoudre ici ?
**Problèmes de l’implémentation actuelle :**
La [gestion d'état](https://en.wikipedia.org/wiki/State_management) consiste à trouver une bonne approche pour résoudre ces deux problèmes particuliers :
La simple variable `account` de notre [leçon précédente](../3-data/README.md) crée trois problèmes majeurs qui impactent à la fois l’expérience utilisateur et la maintenabilité du code :
- Comment garder les flux de données d'une application compréhensibles ?
- Comment maintenir les données d'état toujours synchronisées avec l'interface utilisateur (et vice versa) ?
| Problème | Cause technique | Impact utilisateur |
|---------|--------|----------------|
| **Perte de session** | Rafraîchissement de page réinitialise les variables JavaScript | Les utilisateurs doivent se réauthentifier fréquemment |
| **Mises à jour dispersées** | Plusieurs fonctions modifient l’état directement | Le débogage devient de plus en plus difficile |
| **Nettoyage incomplet** | La déconnexion ne supprime pas toutes les références d’état | Risques potentiels de sécurité et confidentialité |
Une fois ces problèmes résolus, tout autre problème que vous pourriez rencontrer pourrait déjà être corrigé ou devenir plus facile à résoudre. Il existe de nombreuses approches possibles pour résoudre ces problèmes, mais nous opterons pour une solution courante qui consiste à **centraliser les données et les moyens de les modifier**. Les flux de données fonctionneraient ainsi :
**Le défi architectural :**
Comme la conception compartimentée du Titanic qui semblait robuste jusqu’à ce que plusieurs compartiments soient simultanément inondés, corriger ces problèmes individuellement ne règle pas le problème architectural sous-jacent. Nous avons besoin d’une solution globale de gestion d’état.
> Nous ne couvrirons pas ici la partie où les données déclenchent automatiquement la mise à jour de la vue, car elle est liée à des concepts plus avancés de [programmation réactive](https://en.wikipedia.org/wiki/Reactive_programming). C'est un bon sujet à approfondir si vous êtes prêt à plonger plus profondément.
> 💡 **Qu’essayons-nous vraiment d’accomplir ?**
✅ Il existe de nombreuses bibliothèques avec différentes approches de gestion d'état, [Redux](https://redux.js.org) étant une option populaire. Consultez les concepts et les modèles utilisés, car cela peut souvent être un bon moyen d'apprendre quels problèmes potentiels vous pourriez rencontrer dans les grandes applications web et comment ils peuvent être résolus.
La [gestion d’état](https://fr.wikipedia.org/wiki/Gestion_d%27%C3%A9tat) consiste en fait à résoudre deux énigmes fondamentales :
### Tâche
1. **Où sont mes données ?** : Suivre quelles informations nous avons et d’où elles viennent
2. **Tout le monde est-il sur la même longueur d’onde ?** : S’assurer que ce que voient les utilisateurs correspond à ce qui se passe réellement
**Notre plan d’action :**
Au lieu de courir après notre queue, nous allons créer un système de **gestion d’état centralisé**. Pensez-y comme avoir une personne vraiment organisée en charge de toutes les choses importantes :
- **Centralise** tout l’état de l’application en un seul endroit
- **Dirige** tous les changements d’état via des fonctions contrôlées
- **Assure** que l’interface reste synchronisée avec l’état actuel
- **Fournit** un modèle clair et prévisible pour la gestion des données
> 💡 **Perspective professionnelle** : Cette leçon se concentre sur les concepts fondamentaux. Pour les applications complexes, des bibliothèques comme [Redux](https://redux.js.org) offrent des fonctionnalités avancées de gestion d’état. Comprendre ces principes de base vous aidera à maîtriser n’importe quelle bibliothèque de gestion d’état.
> ⚠️ **Sujet avancé** : Nous ne couvrirons pas les mises à jour automatiques de l’interface déclenchées par les changements d’état, car cela implique des concepts de [programmation réactive](https://fr.wikipedia.org/wiki/Programmation_r%C3%A9active). Considérez cela comme une excellente étape suivante dans votre parcours d’apprentissage !
### Tâche : Centraliser la structure d’état
Nous allons commencer par un peu de refactoring. Remplacez la déclaration `account` :
Commençons à transformer notre gestion d’état dispersée en un système centralisé. Cette première étape établit les bases de toutes les améliorations à venir.
**Étape 1 : Créez un objet d’état central**
Remplacez la simple déclaration `account` :
```js
let account = null;
```
Par :
Par un objet d’état structuré :
```js
let state = {
@ -75,28 +244,109 @@ let state = {
};
```
L'idée est de *centraliser* toutes les données de notre application dans un seul objet d'état. Nous n'avons pour l'instant que `account` dans l'état, donc cela ne change pas grand-chose, mais cela ouvre la voie à des évolutions.
**Pourquoi ce changement est important :**
- **Centralise** toutes les données de l’application en un seul endroit
- **Prépare** la structure pour ajouter plus de propriétés d’état plus tard
- **Établit** une frontière claire entre l’état et les autres variables
- **Crée** un modèle qui évolue avec la croissance de votre application
Nous devons également mettre à jour les fonctions qui l'utilisent. Dans les fonctions `register()` et `login()`, remplacez `account = ...` par `state.account = ...`;
**Étape 2 : Mettez à jour les schémas d’accès à l’état**
Au début de la fonction `updateDashboard()`, ajoutez cette ligne :
Mettez à jour vos fonctions pour utiliser la nouvelle structure d’état :
**Dans les fonctions `register()` et `login()`**, remplacez :
```js
account = ...
```
Par :
```js
state.account = ...
```
**Dans la fonction `updateDashboard()`**, ajoutez cette ligne en haut :
```js
const account = state.account;
```
Ce refactoring en lui-même n'a pas apporté beaucoup d'améliorations, mais l'idée était de poser les bases des prochains changements.
**Ce que ces mises à jour accomplissent :**
- **Conservent** la fonctionnalité existante tout en améliorant la structure
- **Préparent** votre code à une gestion d’état plus sophistiquée
- **Créent** des modèles cohérents pour accéder aux données d’état
- **Établissent** la base pour des mises à jour centralisées de l’état
> 💡 **Note** : Ce refactoring ne résout pas immédiatement nos problèmes, mais crée la base essentielle pour les puissantes améliorations à venir !
## Suivre les changements de données
### 🎯 Bilan pédagogique : Principes de centralisation
Maintenant que nous avons mis en place l'objet `state` pour stocker nos données, l'étape suivante consiste à centraliser les mises à jour. L'objectif est de faciliter le suivi de tout changement et de savoir quand ils se produisent.
**Pause et réflexion** : Vous venez d’implémenter la base de la gestion d’état centralisée. C’est une décision architecturale cruciale.
Pour éviter que des modifications soient apportées à l'objet `state`, il est également recommandé de le considérer comme [*immuable*](https://en.wikipedia.org/wiki/Immutable_object), ce qui signifie qu'il ne peut pas être modifié du tout. Cela implique également que vous devez créer un nouvel objet d'état si vous souhaitez modifier quoi que ce soit. En procédant ainsi, vous vous protégez contre des [effets secondaires](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) indésirables et ouvrez des possibilités pour de nouvelles fonctionnalités dans votre application, comme la mise en œuvre d'annulation/rétablissement, tout en facilitant le débogage. Par exemple, vous pourriez enregistrer chaque changement apporté à l'état et conserver un historique des modifications pour comprendre l'origine d'un bug.
**Auto-évaluation rapide** :
- Pouvez-vous expliquer pourquoi centraliser l’état dans un objet est préférable à des variables dispersées ?
- Que se passerait-il si vous oubliez de mettre à jour une fonction pour utiliser `state.account` ?
- Comment ce modèle prépare-t-il votre code à des fonctionnalités plus avancées ?
En JavaScript, vous pouvez utiliser [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) pour créer une version immuable d'un objet. Si vous essayez de modifier un objet immuable, une exception sera levée.
**Lien avec le monde réel** : Le modèle de centralisation que vous avez appris est la base des frameworks modernes comme Redux, Vuex, et React Context. Vous construisez la même pensée architecturale utilisée dans les grandes applications.
✅ Connaissez-vous la différence entre un objet immuable *superficiel* et *profond* ? Vous pouvez en lire davantage [ici](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
**Question de défi** : Si vous deviez ajouter des préférences utilisateur (thème, langue) dans votre application, où les ajouteriez-vous dans la structure d’état ? Comment cela évoluerait-il ?
## Implémenter des mises à jour d’état contrôlées
Avec notre état centralisé, l’étape suivante consiste à établir des mécanismes contrôlés pour les modifications de données. Cette approche assure des changements d’état prévisibles et un débogage facilité.
Le principe central ressemble au contrôle du trafic aérien : au lieu de permettre à plusieurs fonctions de modifier l’état indépendamment, nous allons canaliser tous les changements via une fonction unique et contrôlée. Ce modèle offre une supervision claire de quand et comment les données changent.
**Gestion d’état immuable :**
Nous traiterons notre objet `state` comme [*immuable*](https://fr.wikipedia.org/wiki/Objet_immuable), ce qui signifie que nous ne le modifions jamais directement. À chaque changement, nous créons un nouvel objet d’état avec les données mises à jour.
Bien que cette approche puisse sembler inefficace au premier abord comparée aux modifications directes, elle offre d’importants avantages pour le débogage, les tests et la prévisibilité de l’application.
**Avantages de la gestion d’état immuable :**
| Avantage | Description | Impact |
|---------|-------------|--------|
| **Prévisibilité** | Les changements ne se font que via des fonctions contrôlées | Plus facile à déboguer et tester |
| **Suivi historique** | Chaque changement d’état crée un nouvel objet | Permet la fonctionnalité d’annulation/restauration |
| **Prévention des effets de bord** | Pas de modifications accidentelles | Évite les bugs mystérieux |
| **Optimisation des performances** | Facile à détecter quand l’état a réellement changé | Permet des mises à jour UI efficaces |
**Immutabilité en JavaScript avec `Object.freeze()` :**
JavaScript fournit [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) pour empêcher les modifications d’objet :
// Toute tentative de modifier immutableState générera une erreur
```
**Décryptage de ce qui se passe ici :**
- **Empêche** les affectations ou suppressions directes de propriétés
- **Lance** des exceptions si des tentatives de modification sont faites
- **Garantit** que les changements d’état doivent se faire via des fonctions contrôlées
- **Crée** un contrat clair sur la manière de mettre à jour l’état
> 💡 **Approfondissement** : Apprenez la différence entre objets immuables *superficiels* et *profonds* dans la [documentation MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). Comprendre cette distinction est crucial pour des structures d’état complexes.
@ -110,9 +360,9 @@ function updateState(property, newData) {
}
```
Dans cette fonction, nous créons un nouvel objet d'état et copions les données de l'état précédent en utilisant le [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Ensuite, nous remplaçons une propriété particulière de l'objet d'état avec les nouvelles données en utilisant la [notation entre crochets](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` pour l'affectation. Enfin, nous verrouillons l'objet pour empêcher les modifications en utilisant `Object.freeze()`. Pour l'instant, nous n'avons que la propriété `account` stockée dans l'état, mais avec cette approche, vous pouvez ajouter autant de propriétés que nécessaire.
Dans cette fonction, nous créons un nouvel objet d’état et copions les données de l’état précédent en utilisant l’[*opérateur spread (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Ensuite, nous écrasons une propriété particulière de l’objet d’état avec les nouvelles données en utilisant la [notation entre crochets](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` pour l’assignation. Enfin, nous bloquons l’objet pour empêcher les modifications avec `Object.freeze()`. Pour l’instant, nous avons uniquement la propriété `account` stockée dans l’état, mais avec cette approche, vous pouvez ajouter autant de propriétés que nécessaire.
Nous mettrons également à jour l'initialisation de `state` pour nous assurer que l'état initial est également figé :
Nous allons aussi mettre à jour l’initialisation de `state` pour s’assurer que l’état initial est gelé aussi :
```js
let state = Object.freeze({
@ -120,7 +370,7 @@ let state = Object.freeze({
});
```
Après cela, mettez à jour la fonction `register` en remplaçant l'affectation `state.account = result;` par :
Ensuite, mettez à jour la fonction `register` en remplaçant l’assignation `state.account = result;` par :
```js
updateState('account', result);
@ -132,7 +382,7 @@ Faites de même avec la fonction `login`, en remplaçant `state.account = data;`
updateState('account', data);
```
Nous allons maintenant en profiter pour résoudre le problème des données de compte qui ne sont pas effacées lorsque l'utilisateur clique sur *Déconnexion*.
Profitons-en également pour régler le problème des données de compte non effacées lorsque l’utilisateur clique sur *Déconnexion*.
Créez une nouvelle fonction `logout()` :
@ -145,47 +395,121 @@ function logout() {
Dans `updateDashboard()`, remplacez la redirection `return navigate('/login');` par `return logout()`;
Essayez de créer un nouveau compte, de vous déconnecter et de vous reconnecter pour vérifier que tout fonctionne toujours correctement.
Essayez de créer un nouveau compte, de vous déconnecter puis de vous reconnecter pour vérifier que tout fonctionne correctement.
> Astuce : vous pouvez examiner tous les changements d'état en ajoutant `console.log(state)` à la fin de `updateState()` et en ouvrant la console dans les outils de développement de votre navigateur.
> Conseil : vous pouvez regarder tous les changements d’état en ajoutant `console.log(state)` au bas de `updateState()` et en ouvrant la console des outils de développement de votre navigateur.
## Conserver l'état
## Implémenter la persistance des données
La plupart des applications web ont besoin de conserver des données pour fonctionner correctement. Toutes les données critiques sont généralement stockées dans une base de données et accessibles via une API serveur, comme les données de compte utilisateur dans notre cas. Mais parfois, il est également intéressant de conserver certaines données dans l'application cliente qui s'exécute dans votre navigateur, pour une meilleure expérience utilisateur ou pour améliorer les performances de chargement.
Le problème de perte de session que nous avons identifié plus tôt nécessite une solution de persistance qui maintient l’état utilisateur à travers les sessions du navigateur. Cela transforme notre application d’une expérience temporaire en un outil fiable et professionnel.
Lorsque vous souhaitez conserver des données dans votre navigateur, il y a quelques questions importantes à vous poser :
Considérez comment les horloges atomiques maintiennent une précision temporelle même lors de coupures de courant en stockant l’état critique dans une mémoire non volatile. De même, les applications web ont besoin de mécanismes de stockage persistants pour préserver les données essentielles de l’utilisateur à travers les sessions et rafraîchissements de page.
- *Les données sont-elles sensibles ?* Vous devriez éviter de stocker des données sensibles côté client, comme les mots de passe utilisateur.
- *Pendant combien de temps avez-vous besoin de conserver ces données ?* Prévoyez-vous d'accéder à ces données uniquement pour la session en cours ou souhaitez-vous qu'elles soient stockées indéfiniment ?
**Questions stratégiques sur la persistance des données :**
Il existe plusieurs façons de stocker des informations dans une application web, en fonction de ce que vous souhaitez accomplir. Par exemple, vous pouvez utiliser les URL pour stocker une requête de recherche et la rendre partageable entre utilisateurs. Vous pouvez également utiliser les [cookies HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) si les données doivent être partagées avec le serveur, comme les informations d'[authentification](https://en.wikipedia.org/wiki/Authentication).
Avant d’implémenter la persistance, considérez ces facteurs critiques :
Une autre option consiste à utiliser l'une des nombreuses API de navigateur pour stocker des données. Deux d'entre elles sont particulièrement intéressantes :
| Question | Contexte application bancaire | Impact de la décision |
|----------|-------------------|----------------|
| **Les données sont-elles sensibles ?** | Solde de compte, historique des transactions | Choisir des méthodes de stockage sécurisées |
| **Combien de temps doit-il persister ?** | État de connexion vs. préférences temporaires de l'interface utilisateur | Sélectionnez la durée de stockage appropriée |
| **Le serveur en a-t-il besoin ?** | Jetons d'authentification vs. paramètres de l'interface utilisateur | Déterminez les exigences de partage |
- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage) : un [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) permettant de conserver des données spécifiques au site web actuel entre différentes sessions. Les données enregistrées dans celui-ci n'expirent jamais.
- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage) : celui-ci fonctionne de la même manière que `localStorage`, sauf que les données stockées sont effacées lorsque la session se termine (lorsque le navigateur est fermé).
**Options de stockage dans le navigateur :**
Notez que ces deux API permettent uniquement de stocker des [chaînes de caractères](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Si vous souhaitez stocker des objets complexes, vous devrez les sérialiser au format [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) en utilisant [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
Les navigateurs modernes offrent plusieurs mécanismes de stockage, chacun conçu pour des cas d'utilisation différents :
✅ Si vous souhaitez créer une application web qui ne fonctionne pas avec un serveur, il est également possible de créer une base de données côté client en utilisant l'API [`IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Celle-ci est réservée à des cas d'utilisation avancés ou si vous devez stocker une quantité importante de données, car elle est plus complexe à utiliser.
- **Persiste** les données indéfiniment entre les sessions du navigateur
- **Survit** aux redémarrages du navigateur et de l'ordinateur
- **Ciblé** sur le domaine spécifique du site web
- **Parfait** pour les préférences utilisateur et états de connexion
2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)** : Stockage temporaire pour la session
- **Fonctionne** de manière identique à localStorage durant la session active
- **S'efface** automatiquement à la fermeture de l'onglet du navigateur
- **Idéal** pour les données temporaires qui ne doivent pas persister
3. **[Cookies HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies)** : Stockage partagé avec le serveur
- **Envoyés automatiquement** avec chaque requête au serveur
- **Parfaits** pour les jetons d'[authentification](https://en.wikipedia.org/wiki/Authentication)
- **Limités** en taille et peuvent impacter les performances
Nous voulons que nos utilisateurs restent connectés jusqu'à ce qu'ils cliquent explicitement sur le bouton *Déconnexion*, donc nous utiliserons `localStorage` pour stocker les données du compte. Tout d'abord, définissons une clé que nous utiliserons pour stocker nos données.
**Exigence de sérialisation des données :**
`localStorage` et `sessionStorage` ne stockent que des [chaînes de caractères](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) :
```js
// Convertir les objets en chaînes JSON pour le stockage
- **Convertit** les objets JavaScript en chaînes JSON via [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
- **Reconstruit** les objets depuis JSON via [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
- **Gère** automatiquement les objets imbriqués complexes et les tableaux
- **Échoue** avec les fonctions, valeurs undefined et références circulaires
> 💡 **Option avancée** : Pour des applications hors ligne complexes avec de grands jeux de données, considérez l'API [`IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Elle offre une base de données complète côté client, mais requiert une mise en œuvre plus complexe.
```mermaid
quadrantChart
title Options de Stockage Navigateur
x-axis Complexité Faible --> Complexité Élevée
y-axis Durée Courte --> Durée Longue
quadrant-1 Outils Professionnels
quadrant-2 Persistance Simple
quadrant-3 Stockage Temporaire
quadrant-4 Systèmes Avancés
localStorage: [0.3, 0.8]
sessionStorage: [0.2, 0.2]
HTTP Cookies: [0.6, 0.7]
IndexedDB: [0.9, 0.9]
Memory Variables: [0.1, 0.1]
```
### Tâche : Implémenter une persistance avec localStorage
Implémentons un stockage persistant pour que les utilisateurs restent connectés jusqu'à déconnexion explicite. Nous utiliserons `localStorage` pour stocker les données de compte entre les sessions.
**Étape 1 : Définir la configuration du stockage**
```js
const storageKey = 'savedAccount';
```
**Ce que fournit cette constante :**
- **Crée** un identifiant cohérent pour nos données stockées
- **Évite** les erreurs typographiques dans les clés de stockage
- **Facilite** la modification de la clé de stockage si besoin
- **Suit** les meilleures pratiques pour un code maintenable
Ajoutez ensuite cette ligne à la fin de la fonction `updateState()` :
**Étape 2 : Ajouter la persistance automatique**
Ajoutez cette ligne à la fin de la fonction `updateState()` :
- **Convertit** l'objet compte en chaîne JSON pour le stockage
- **Enregistre** les données en utilisant notre clé de stockage cohérente
- **S'exécute** automatiquement à chaque mise à jour d'état
- **Garantit** la synchronisation constante des données stockées et de l'état actuel
> 💡 **Avantage architectural** : Comme toutes les mises à jour d'état passent par `updateState()`, ajouter la persistance a seulement demandé une ligne. Cela montre l'intérêt d'une bonne architecture !
Avec cela, les données du compte utilisateur seront conservées et toujours à jour, car nous avons centralisé toutes nos mises à jour d'état précédemment. C'est ici que nous commençons à bénéficier de tous nos refactorings précédents 🙂.
**Étape 3 : Restaurer l'état au chargement de l'application**
Comme les données sont enregistrées, nous devons également nous occuper de leur restauration lorsque l'application est chargée. Étant donné que nous commencerons à avoir plus de code d'initialisation, il peut être judicieux de créer une nouvelle fonction `init`, qui inclut également notre code précédent en bas de `app.js` :
Créez une fonction d'initialisation pour restaurer les données sauvegardées :
```js
function init() {
@ -194,25 +518,71 @@ function init() {
updateState('account', JSON.parse(savedAccount));
}
// Our previous initialization code
// Notre code d'initialisation précédent
window.onpopstate = () => updateRoute();
updateRoute();
}
init();
```
**Comprendre le processus d'initialisation :**
- **Récupère** les données de compte précédemment sauvegardées dans localStorage
- **Analyse** la chaîne JSON pour retrouver un objet JavaScript
- **Met à jour** l'état via notre fonction de mise à jour contrôlée
- **Restaure** automatiquement la session utilisateur au chargement de la page
- **S'exécute** avant les mises à jour de route pour garantir l'état disponible
**Étape 4 : Optimiser la route par défaut**
Modifiez la route par défaut pour exploiter la persistance :
Dans `updateRoute()`, remplacez :
```js
// Remplacer : return navigate('/login');
return navigate('/dashboard');
```
**Pourquoi ce changement est pertinent :**
- **Tire parti** efficacement de notre nouveau système de persistance
- **Permet** au tableau de bord de gérer les vérifications d'authentification
- **Redirige** automatiquement vers la connexion si aucune session sauvegardée n'existe
- **Crée** une expérience utilisateur plus fluide
**Tester votre implémentation :**
1. Connectez-vous à votre application bancaire
2. Actualisez la page du navigateur
3. Vérifiez que vous restez connecté et sur le tableau de bord
4. Fermez et rouvrez votre navigateur
5. Naviguez à nouveau vers votre application et confirmez que vous êtes toujours connecté
🎉 **Félicitations** : Vous avez implémenté avec succès une gestion de l'état persistant ! Votre application se comporte désormais comme une application web professionnelle.
### 🎯 Vérification pédagogique : Architecture de persistance
Ici, nous récupérons les données enregistrées, et s'il y en a, nous mettons à jour l'état en conséquence. Il est important de faire cela *avant* de mettre à jour la route, car il pourrait y avoir du code qui dépend de l'état lors de la mise à jour de la page.
**Compréhension architecturale** : Vous avez mis en place une couche sophistiquée de persistance, équilibrant expérience utilisateur et complexité de gestion des données.
Nous pouvons également faire de la page *Tableau de bord* la page par défaut de notre application, car nous conservons maintenant les données du compte. Si aucune donnée n'est trouvée, le tableau de bord s'occupe de rediriger vers la page *Connexion* de toute façon. Dans `updateRoute()`, remplacez le fallback `return navigate('/login');` par `return navigate('/dashboard');`.
**Concepts clés maîtrisés** :
- **Sérialisation JSON** : conversion d'objets complexes en chaînes stockables
- **Synchronisation automatique** : les changements d'état déclenchent la persistance
- **Récupération de session** : restauration du contexte utilisateur après interruption
- **Persistance centralisée** : une seule fonction de mise à jour gère tout le stockage
Connectez-vous maintenant à l'application et essayez de rafraîchir la page. Vous devriez rester sur le tableau de bord. Avec cette mise à jour, nous avons résolu tous nos problèmes initiaux...
**Lien avec l'industrie** : Ce modèle de persistance est fondamental pour les Progressive Web Apps (PWA), applications hors ligne et expériences mobiles modernes. Vous développez des capacités de niveau production.
## Rafraîchir les données
**Question de réflexion** : Comment modifieriez-vous ce système pour gérer plusieurs comptes utilisateurs sur un même appareil ? Prenez en compte les implications de confidentialité et sécurité.
...Mais nous pourrions également en avoir créé un nouveau. Oups !
## Équilibrer persistance et fraîcheur des données
Accédez au tableau de bord en utilisant le compte `test`, puis exécutez cette commande dans un terminal pour créer une nouvelle transaction :
Notre système de persistance maintient avec succès les sessions utilisateur, mais introduit un nouveau défi : la vétusté des données. Lorsque plusieurs utilisateurs ou applications modifient les mêmes données serveurs, les informations locales mises en cache deviennent obsolètes.
Cette situation rappelle les navigateurs vikings qui utilisaient à la fois des cartes d'étoiles stockées et des observations célestes actuelles. Les cartes fournissaient une constance, mais les navigateurs avaient besoin d'observations fraîches pour tenir compte des conditions changeantes. De même, notre application a besoin à la fois d'un état utilisateur persistant et de données serveurs actualisées.
**🧪 Découverte du problème de fraîcheur des données :**
1. Connectez-vous au tableau de bord avec le compte `test`
2. Exécutez cette commande dans un terminal pour simuler une transaction externe :
Essayez maintenant de rafraîchir votre page de tableau de bord dans le navigateur. Que se passe-t-il ? Voyez-vous la nouvelle transaction ?
L'état est conservé indéfiniment grâce à `localStorage`, mais cela signifie également qu'il n'est jamais mis à jour jusqu'à ce que vous vous déconnectiez de l'application et vous reconnectiez !
Une stratégie possible pour résoudre cela est de recharger les données du compte chaque fois que le tableau de bord est chargé, afin d'éviter des données obsolètes.
### Tâche
Créez une nouvelle fonction `updateAccountData` :
3. Actualisez la page du tableau de bord dans le navigateur
4. Observez si la nouvelle transaction apparaît
**Ce que ce test démontre :**
- **Montre** comment le stockage local peut devenir "obsolète"
- **Simule** des scénarios réels où des données changent hors de votre application
- **Révèle** la tension entre persistance et fraîcheur des données
**Le défi de l'obsolescence des données :**
| Problème | Cause | Impact utilisateur |
|----------|-------|--------------------|
| **Données obsolètes** | localStorage n'expire jamais automatiquement | Les utilisateurs voient des informations périmées |
| **Modifications serveurs** | D'autres apps/utilisateurs modifient les mêmes données | Vues incohérentes entre plateformes |
| **Cache vs. réalité** | Le cache local ne correspond pas à l'état serveur | Mauvaise expérience utilisateur et confusion |
**Stratégie de solution :**
Nous allons implémenter un modèle de "rafraîchissement au chargement" qui équilibre les avantages de la persistance avec le besoin de données fraîches. Cette approche maintient une expérience fluide tout en assurant la précision des données.
```mermaid
sequenceDiagram
participant U as Utilisateur
participant A as Application
participant L as stockageLocal
participant S as Serveur
U->>A: Ouvre l'application
A->>L: Charger l'état sauvegardé
L-->>A: Retourner les données en cache
A->>U: Afficher l'interface immédiatement
A->>S: Récupérer des données fraîches
S-->>A: Retourner les données actuelles
A->>L: Mettre à jour le cache
A->>U: Mettre à jour l'interface avec des données fraîches
```
### Tâche : Implémenter un système de rafraîchissement des données
Nous allons créer un système qui récupère automatiquement les données fraîches du serveur tout en conservant les bénéfices de notre gestion d'état persistante.
**Étape 1 : Créer une fonction de mise à jour des données du compte**
```js
async function updateAccountData() {
@ -246,10 +648,16 @@ async function updateAccountData() {
updateState('account', data);
}
```
**Comprendre la logique de cette fonction :**
- **Vérifie** si un utilisateur est actuellement connecté (`state.account` existe)
- **Redirige** vers la déconnexion si aucune session valide n'est trouvée
- **Récupère** les données fraîches du compte depuis le serveur via `getAccount()`
- **Gère** les erreurs serveur en déconnectant les sessions invalides
- **Met à jour** l'état avec les données fraîches via notre système contrôlé de mise à jour
- **Déclenche** la persistance automatique dans localStorage via `updateState()`
Cette méthode vérifie que nous sommes actuellement connectés, puis recharge les données du compte depuis le serveur.
Créez une autre fonction nommée `refresh` :
**Étape 2 : Créer un gestionnaire de rafraîchissement pour le tableau de bord**
```js
async function refresh() {
@ -257,8 +665,16 @@ async function refresh() {
updateDashboard();
}
```
**Ce que réalise cette fonction de rafraîchissement :**
- **Coordonne** la récupération des données et la mise à jour de l'interface
- **Attend** le chargement des données fraîches avant mise à jour de l'affichage
- **Garantit** que le tableau de bord affiche les informations les plus récentes
- **Maintient** une séparation claire entre gestion des données et mise à jour UI
**Étape 3 : Intégrer au système de routes**
Celle-ci met à jour les données du compte, puis s'occupe de mettre à jour le HTML de la page du tableau de bord. C'est ce que nous devons appeler lorsque la route du tableau de bord est chargée. Mettez à jour la définition de la route avec :
Modifiez votre configuration de route pour déclencher le rafraîchissement automatiquement :
Essayez maintenant de recharger le tableau de bord, il devrait afficher les données du compte mises à jour.
---
## 🚀 Défi
Maintenant que nous rechargeons les données du compte chaque fois que le tableau de bord est chargé, pensez-vous que nous avons encore besoin de conserver *toutes les données du compte* ?
Essayez de travailler ensemble pour modifier ce qui est enregistré et chargé depuis `localStorage` afin d'inclure uniquement ce qui est absolument nécessaire au fonctionnement de l'application.
## Quiz après le cours
[Quiz après le cours](https://ff-quizzes.netlify.app/web/quiz/48)
## Devoir
[Implémenter la boîte de dialogue "Ajouter une transaction"](assignment.md)
Voici un exemple de résultat après avoir terminé le devoir :
**Fonctionnement de cette intégration :**
- **Exécute** la fonction de rafraîchissement à chaque chargement de la route du tableau de bord
- **Assure** l'affichage de données fraîches quand l'utilisateur navigue sur le tableau de bord
- **Maintient** la structure de route existante tout en ajoutant la fraîcheur des données
- **Fournit** un modèle cohérent d'initialisation spécifique aux routes
**Tester votre système de rafraîchissement de données :**
1. Connectez-vous à votre application bancaire
2. Exécutez la commande curl évoquée précédemment pour créer une nouvelle transaction
3. Actualisez la page du tableau de bord ou naviguez ailleurs puis revenez
4. Vérifiez que la nouvelle transaction apparaît immédiatement
🎉 **Parfait équilibre atteint** : Votre application combine désormais l'expérience fluide d'un état persistant avec la précision de données serveurs fraîches !
## 📈 Votre timeline de maîtrise de la gestion d'état
```mermaid
timeline
title Parcours Professionnel de Gestion d'État
section Reconnaissance du Problème
Diagnostic des Problèmes d'État
: Identifier les problèmes de perte de session
: Comprendre les problèmes de mises à jour dispersées
: Reconnaître les besoins architecturaux
section Fondation Architecturale
Conception d'État Centralisé
: Créer des objets d'état unifiés
: Mettre en œuvre des modèles de mise à jour contrôlés
: Établir des principes immuables
Mises à Jour Prédictibles
: Maîtriser l'utilisation de Object.freeze()
: Construire des systèmes facilitant le débogage
: Créer des modèles évolutifs
section Maîtrise de la Persistance
Intégration localStorage
: Gérer la sérialisation JSON
: Mettre en œuvre la synchronisation automatique
: Assurer la continuité de la session
Équilibre de Fraîcheur des Données
: Traiter les défis de la datation
: Construire des mécanismes de rafraîchissement
: Optimiser performance vs précision
section Modèles Professionnels
Systèmes Prêts pour la Production
: Mettre en œuvre la gestion des erreurs
: Créer des architectures maintenables
: Suivre les meilleures pratiques du secteur
Capacités Avancées
: Prêt pour l'intégration de frameworks
: Préparé pour les besoins complexes en état
: Fondation pour les fonctionnalités en temps réel
```
**🎓 Étape finale** : Vous avez développé un système complet de gestion d'état utilisant les mêmes principes que Redux, Vuex et autres bibliothèques professionnelles. Ces modèles passent des apps simples aux applications d'entreprise.
**🔄 Capacités avancées :**
- Prêt à maîtriser des frameworks de gestion d'état (Redux, Zustand, Pinia)
- Préparé à implémenter des fonctionnalités temps réel avec WebSockets
- Équipé pour construire des Progressive Web Apps hors ligne d'abord
- Solide fondation pour des patterns avancés comme machines à états et observateurs
## Défi GitHub Copilot Agent 🚀
Utilisez le mode Agent pour relever ce défi :
**Description :** Implémentez un système complet de gestion d'état avec fonctionnalités d'annulation/rétablissement pour l'application bancaire. Ce défi vous fera pratiquer des concepts avancés tels que le suivi historique des états, les mises à jour immuables et la synchronisation interface utilisateur.
**Consigne :** Créez un système de gestion d'état amélioré incluant : 1) un tableau historique d'états suivi, 2) des fonctions undo/redo permettant de revenir aux états antérieurs, 3) des boutons UI undo/redo sur le tableau de bord, 4) une limite maximale de 10 états pour éviter les problèmes mémoire, et 5) un nettoyage approprié de l'historique à la déconnexion. Assurez-vous que undo/redo fonctionne avec les changements de solde et persiste après actualisation du navigateur.
En savoir plus sur [mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
## 🚀 Challenge : Optimisation du stockage
Votre implémentation gère désormais efficacement les sessions utilisateurs, le rafraîchissement des données et la gestion d'état. Cependant, réfléchissez à l'optimalité de notre approche actuelle entre efficacité du stockage et fonctionnalité.
À l'image des maîtres d'échecs qui distinguent pièces essentielles et pions sacrificiels, une gestion d'état efficace requiert d'identifier quelles données doivent persister versus celles qui doivent toujours être fraîches depuis le serveur.
**Analyse d'optimisation :**
Évaluez votre implémentation actuelle de localStorage en considérant ces questions stratégiques :
- Quelle est l'information minimale requise pour maintenir l'authentification utilisateur ?
- Quelles données changent suffisamment souvent pour que la mise en cache locale soit peu intéressante ?
- Comment optimiser le stockage sans dégrader l'expérience utilisateur ?
Ce type d'analyse architecturale distingue les développeurs expérimentés qui prennent en compte à la fois fonctionnalité et efficience dans leurs solutions.
**Stratégie d'implémentation :**
- **Identifiez** les données essentielles à persister (probablement juste l'identification utilisateur)
- **Modifiez** votre implémentation localStorage pour ne stocker que ces données critiques
- **Assurez** le chargement systématique des données fraîches à chaque visite du tableau de bord
- **Testez** que l'expérience utilisateur reste la même avec cette approche optimisée
**Réflexion avancée :**
- **Comparez** les compromis entre le stockage des données complètes du compte versus uniquement les jetons d'authentification
- **Documentez** vos décisions et justifications pour l'équipe future
Ce défi vous aidera à penser comme un développeur professionnel mêlant expérience utilisateur et efficience applicative. Prenez le temps d'expérimenter différentes approches !
[Implémenter la boîte de dialogue « Ajouter une transaction »](assignment.md)
Voici un exemple de résultat après avoir complété le devoir :
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous ne sommes pas responsables des malentendus ou des interprétations erronées résultant de l'utilisation de cette traduction.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avis de non-responsabilité** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle effectuée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
# Implémenter la boîte de dialogue "Ajouter une transaction"
## Vue d'ensemble
Votre application bancaire dispose désormais d'une gestion d'état solide et d'une persistance des données, mais il lui manque une fonctionnalité cruciale dont les vraies applications bancaires ont besoin : la possibilité pour les utilisateurs d'ajouter leurs propres transactions. Dans cette tâche, vous allez implémenter une boîte de dialogue complète "Ajouter une transaction" qui s'intègre parfaitement avec votre système de gestion d'état existant.
Cette tâche rassemble tout ce que vous avez appris dans les quatre leçons bancaires : le templating HTML, la gestion des formulaires, l’intégration API et la gestion d’état.
## Objectifs d'apprentissage
En complétant cette tâche, vous allez :
- **Créer** une interface de dialogue conviviale pour la saisie des données
- **Implémenter** une conception de formulaire accessible avec support clavier et lecteur d'écran
- **Intégrer** les nouvelles fonctionnalités avec votre système de gestion d’état existant
- **Pratiquer** la communication API et la gestion des erreurs
- **Appliquer** des modèles modernes de développement web à une fonctionnalité réelle
## Instructions
Notre application bancaire manque encore d'une fonctionnalité essentielle : la possibilité d'ajouter de nouvelles transactions.
En utilisant tout ce que vous avez appris dans les quatre leçons précédentes, implémentez une boîte de dialogue "Ajouter une transaction" :
### Étape 1 : Bouton Ajouter une transaction
**Créer** un bouton "Ajouter une transaction" sur votre page de tableau de bord que les utilisateurs peuvent facilement trouver et utiliser.
**Exigences :**
- **Placer** le bouton à un emplacement logique sur le tableau de bord
- **Utiliser** un texte clair et orienté action pour le bouton
- **Styliser** le bouton pour qu’il corresponde à votre design UI existant
- **Assurer** que le bouton soit accessible au clavier
### Étape 2 : Implémentation de la boîte de dialogue
Choisissez l’une de ces deux approches pour implémenter votre boîte de dialogue :
**Option A : Page séparée**
- **Créer** un nouveau template HTML pour le formulaire de transaction
- **Ajouter** une nouvelle route dans votre système de routage
- **Implémenter** la navigation vers et depuis la page du formulaire
**Option B : Boîte de dialogue modale (recommandé)**
- **Utiliser** JavaScript pour afficher/masquer la boîte de dialogue sans quitter le tableau de bord
- **Implémenter** en utilisant la [propriété `hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) ou des classes CSS
- **Créer** une expérience utilisateur fluide avec une gestion correcte du focus
### Étape 3 : Implémentation de l'accessibilité
**Assurer** que votre boîte de dialogue respecte les [normes d'accessibilité pour les dialogues modaux](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) :
**Navigation clavier :**
- **Supporter** la touche Échap pour fermer la boîte de dialogue
- **Piéger** le focus à l’intérieur de la boîte de dialogue lorsqu’elle est ouverte
- **Restaurer** le focus sur le bouton déclencheur lors de la fermeture
**Support lecteur d’écran :**
- **Ajouter** des labels et rôles ARIA appropriés
- **Annoncer** l’ouverture/fermeture de la boîte de dialogue aux lecteurs d’écran
- **Fournir** des étiquettes claires pour les champs de formulaire et les messages d’erreur
### Étape 4 : Création du formulaire
**Concevoir** un formulaire HTML qui collecte les données de transaction :
**Champs requis :**
- **Date** : Quand la transaction a eu lieu
- **Description** : À quoi correspond la transaction
- **Montant** : Valeur de la transaction (positive pour revenu, négative pour dépense)
**Fonctionnalités du formulaire :**
- **Valider** les entrées utilisateur avant la soumission
- **Fournir** des messages d’erreur clairs pour les données invalides
- **Inclure** des textes indicatifs et des étiquettes utiles
- **Styliser** de manière cohérente avec votre design existant
### Étape 5 : Intégration API
**Connecter** votre formulaire à l’API backend :
**Étapes d’implémentation :**
- **Consulter** les [spécifications de l’API serveur](../api/README.md) pour l’endpoint et le format des données corrects
- **Créer** des données JSON à partir des entrées du formulaire
- **Envoyer** les données à l’API avec gestion d’erreurs appropriée
- **Afficher** des messages de succès/échec à l’utilisateur
- **Gérer** proprement les erreurs réseau
### Étape 6 : Intégration avec la gestion d’état
**Mettre à jour** votre tableau de bord avec la nouvelle transaction :
**Exigences d’intégration :**
- **Actualiser** les données du compte après l’ajout réussi de la transaction
- **Mettre à jour** l’affichage du tableau de bord sans recharger la page
- **Faire apparaître** immédiatement la nouvelle transaction
- **Maintenir** la cohérence de l’état tout au long du processus
## Spécifications techniques
**Détails de l’endpoint API :**
Référez-vous à la [documentation API serveur](../api/README.md) pour :
- Le format JSON requis pour les données de transaction
- La méthode HTTP et l’URL de l’endpoint
- Le format de la réponse attendue
- La gestion des réponses d’erreur
**Résultat attendu :**
Après avoir réalisé cette tâche, votre application bancaire doit disposer d’une fonctionnalité "Ajouter une transaction" complètement fonctionnelle, professionnelle en apparence et en comportement :
## Tester votre implémentation
**Tests fonctionnels :**
1. **Vérifier** que le bouton "Ajouter une transaction" est clairement visible et accessible
2. **Tester** l’ouverture et la fermeture correcte de la boîte de dialogue
3. **Confirmer** que la validation du formulaire fonctionne pour tous les champs requis
4. **Vérifier** que les transactions réussies apparaissent immédiatement sur le tableau de bord
5. **S’assurer** que la gestion des erreurs fonctionne pour les données invalides et les problèmes réseau
**Tests d’accessibilité :**
1. **Naviguer** dans tout le processus uniquement au clavier
2. **Tester** avec un lecteur d’écran pour assurer une annonce correcte
3. **Vérifier** que la gestion du focus fonctionne correctement
4. **Contrôler** que tous les éléments du formulaire ont des étiquettes appropriées
## Grille d’évaluation
| Critères | Exemplaire | Adéquat | À améliorer |
| -------- | ---------- | ------- | ----------- |
| **Fonctionnalité** | La fonction d’ajout de transaction fonctionne parfaitement avec une excellente expérience utilisateur et suit toutes les bonnes pratiques des leçons | La fonction d’ajout de transaction fonctionne correctement mais peut ne pas suivre certaines bonnes pratiques ou comporter de petits problèmes d’utilisabilité | La fonction d’ajout de transaction est partiellement fonctionnelle ou présente des problèmes importants d’utilisabilité |
| **Qualité du code** | Le code est bien organisé, suit les modèles établis, inclut une bonne gestion des erreurs et s’intègre parfaitement avec la gestion d’état existante | Le code fonctionne mais peut avoir des problèmes d’organisation ou des modèles incohérents par rapport au code existant | Le code présente des problèmes structurels importants ou ne s’intègre pas bien avec les modèles existants |
| **Accessibilité** | Support complet de la navigation au clavier, compatibilité avec les lecteurs d’écran, et respect des directives WCAG avec une excellente gestion du focus | Fonctionnalités d’accessibilité de base implémentées mais peut manquer certaines options de navigation au clavier ou de support lecteur d’écran | Considérations d’accessibilité limitées ou inexistantes |
| **Expérience utilisateur** | Interface intuitive, soignée avec des retours clairs, des interactions fluides et une apparence professionnelle | Bonne expérience utilisateur avec quelques points à améliorer en termes de retour utilisateur ou design visuel | Mauvaise expérience utilisateur avec une interface confuse ou un manque de retours utilisateur |
- Ajoutez un bouton "Ajouter une transaction" sur la page du tableau de bord
- Créez soit une nouvelle page avec un modèle HTML, soit utilisez JavaScript pour afficher/masquer le HTML de la boîte de dialogue sans quitter la page du tableau de bord (vous pouvez utiliser la propriété [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) pour cela, ou des classes CSS)
- Assurez-vous de gérer [l'accessibilité au clavier et aux lecteurs d'écran](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) pour la boîte de dialogue
- Implémentez un formulaire HTML pour recevoir les données d'entrée
- Créez des données JSON à partir des données du formulaire et envoyez-les à l'API
- Mettez à jour la page du tableau de bord avec les nouvelles données
## Défis supplémentaires (optionnel)
Consultez les [spécifications de l'API serveur](../api/README.md) pour voir quelle API vous devez appeler et quel format JSON est attendu.
Une fois les exigences de base complétées, vous pouvez envisager ces améliorations :
Voici un exemple de résultat après avoir terminé l'exercice :
**Fonctionnalités avancées :**
- **Ajouter** des catégories de transaction (alimentation, transports, loisirs, etc.)
- **Implémenter** une validation des entrées avec retour en temps réel
- **Créer** des raccourcis clavier pour les utilisateurs avancés
- **Ajouter** des fonctionnalités d’édition et de suppression de transactions
**Intégration avancée :**
- **Implémenter** une fonction d’annulation pour les transactions récemment ajoutées
- **Ajouter** l’importation massive de transactions depuis des fichiers CSV
- **Créer** des fonctionnalités de recherche et filtrage de transactions
- **Implémenter** l’export des données
## Grille d'évaluation
Ces fonctionnalités optionnelles vous aideront à approfondir vos connaissances en développement web avancé et à créer une application bancaire plus complète !
| | L'ajout d'une transaction est entièrement implémenté en suivant toutes les bonnes pratiques vues dans les leçons. | L'ajout d'une transaction est implémenté, mais ne suit pas les bonnes pratiques vues dans les leçons, ou fonctionne seulement partiellement. | L'ajout d'une transaction ne fonctionne pas du tout. |
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous ne saurions être tenus responsables de toute mauvaise compréhension ou interprétation résultant de l’utilisation de cette traduction.
# Utilisation d’un Éditeur de Code : Maîtriser VSCode.dev
Vous vous rappelez dans *The Matrix* quand Neo devait se brancher à un immense terminal informatique pour accéder au monde numérique ? Les outils de développement web actuels racontent une histoire opposée – des capacités incroyablement puissantes accessibles de partout. VSCode.dev est un éditeur de code basé sur navigateur qui apporte des outils de développement professionnels sur n’importe quel appareil disposant d’une connexion internet.
Tout comme l’imprimerie a rendu les livres accessibles à tous, pas seulement aux scribes dans les monastères, VSCode.dev démocratise le codage. Vous pouvez travailler sur des projets depuis un ordinateur de bibliothèque, un labo scolaire, ou n’importe où où vous avez accès au navigateur. Pas d’installation, pas de limitations du type « j’ai besoin de ma configuration spécifique ».
À la fin de cette leçon, vous comprendrez comment naviguer dans VSCode.dev, ouvrir des dépôts GitHub directement dans votre navigateur, et utiliser Git pour le contrôle de version – toutes des compétences que les développeurs professionnels utilisent quotidiennement.
## ⚡ Ce Que Vous Pouvez Faire Dans Les 5 Prochaines Minutes
**Chemin de démarrage rapide pour développeurs occupés**
- **Minute 2** : Connectez-vous avec GitHub pour relier vos dépôts
- **Minute 3** : Essayez l’astuce URL : remplacez `github.com` par `vscode.dev/github` dans n’importe quelle URL de dépôt
- **Minute 4** : Créez un nouveau fichier et regardez la coloration syntaxique fonctionner automatiquement
- **Minute 5** : Faites une modification et validez-la via le panneau Contrôle de Source
**URL de test rapide** :
```
# Transform this:
github.com/microsoft/Web-Dev-For-Beginners
# Into this:
vscode.dev/github/microsoft/Web-Dev-For-Beginners
```
**Pourquoi c’est important** : En 5 minutes, vous expérimenterez la liberté de coder partout avec des outils professionnels. Cela représente l’avenir du développement – accessible, puissant, et immédiat.
## 🗺️ Votre Parcours d’Apprentissage à Travers le Développement Basé sur le Cloud
```mermaid
journey
title De la configuration locale à la maîtrise du développement cloud
section Comprendre la plateforme
Découvrir l’édition web : 4 : Vous
Se connecter à l’écosystème GitHub : 6 : Vous
Maîtriser la navigation de l’interface : 7 : Vous
section Compétences en gestion de fichiers
Créer et organiser des fichiers : 5 : Vous
Éditer avec la coloration syntaxique : 7 : Vous
Naviguer dans les structures de projet : 8 : Vous
section Maîtrise du contrôle de version
Comprendre l’intégration Git : 6 : Vous
S’exercer aux flux de commit : 8 : Vous
Maîtriser les modes de collaboration : 9 : Vous
section Personnalisation professionnelle
Installer des extensions puissantes : 7 : Vous
Configurer l’environnement de développement : 8 : Vous
Construire des flux de travail personnels : 9 : Vous
```
**Votre destination d’apprentissage** : À la fin de cette leçon, vous aurez maîtrisé un environnement de développement cloud professionnel qui fonctionne depuis n’importe quel appareil, vous permettant de coder avec les mêmes outils que les développeurs des grandes entreprises tech.
## Ce Que Vous Apprendrez
Après avoir parcouru ceci ensemble, vous serez capable de :
- Naviguer dans VSCode.dev comme si c’était votre second chez-vous – trouver tout ce dont vous avez besoin sans vous perdre
- Ouvrir n’importe quel dépôt GitHub dans votre navigateur et commencer à éditer immédiatement (c’est assez magique !)
- Utiliser Git pour suivre vos modifications et sauvegarder votre progression comme un pro
- Booster votre éditeur avec des extensions qui rendent le codage plus rapide et plus ludique
- Créer et organiser vos fichiers projets avec assurance
## Ce Dont Vous Aurez Besoin
Les prérequis sont simples :
- Un compte [GitHub gratuit](https://github.com) (nous vous guiderons pour la création si nécessaire)
- Une familiarité de base avec les navigateurs web
- La leçon GitHub Basics fournit un contexte utile, bien que non essentiel
> 💡 **Nouveau sur GitHub ?** Créer un compte est gratuit et prend quelques minutes. Comme une carte de bibliothèque vous donne accès aux livres dans le monde entier, un compte GitHub ouvre les portes des dépôts de code sur tout Internet.
## 🧠 Aperçu de l’Écosystème de Développement Cloud
```mermaid
mindmap
root((Maîtrise VSCode.dev))
Platform Benefits
Accessibility
Device Independence
No Installation Required
Instant Updates
Universal Access
Integration
GitHub Connection
Repository Sync
Settings Persistence
Collaboration Ready
Development Workflow
File Management
Project Structure
Syntax Highlighting
Multi-tab Editing
Auto-save Features
Version Control
Git Integration
Commit Workflows
Branch Management
Change Tracking
Customization Power
Extensions Ecosystem
Productivity Tools
Language Support
Theme Options
Custom Shortcuts
Environment Setup
Personal Preferences
Workspace Configuration
Tool Integration
Workflow Optimization
Professional Skills
Industry Standards
Version Control
Code Quality
Collaboration
Documentation
Career Readiness
Remote Work
Cloud Development
Team Projects
Open Source
```
**Principe Fondamental** : Les environnements de développement basés sur le cloud représentent l’avenir du codage – fournissant des outils professionnels accessibles, collaboratifs et indépendants de la plateforme.
## Pourquoi Les Éditeurs de Code Basés sur le Web Comptent
Avant Internet, les chercheurs dans différentes universités ne pouvaient pas facilement partager leurs recherches. Puis est arrivé ARPANET dans les années 1960, reliant des ordinateurs à distance. Les éditeurs de code basés sur le web suivent ce même principe – rendre des outils puissants accessibles quel que soit votre emplacement physique ou votre appareil.
Un éditeur de code sert d’espace de travail de développement, où vous écrivez, éditez et organisez vos fichiers de code. Contrairement à de simples éditeurs de texte, les éditeurs de code professionnels fournissent la coloration syntaxique, la détection d’erreurs et des fonctionnalités de gestion de projet.
VSCode.dev apporte ces capacités dans votre navigateur :
| **Indépendance de la plateforme** | Fonctionne sur n’importe quel appareil avec un navigateur | Travaillez sur différents ordinateurs sans accroc |
| **Aucune installation requise** | Accès via une URL web | Contourne les restrictions d’installation logicielle |
| **Mises à jour automatiques** | Fonctionne toujours avec la dernière version | Accès aux nouvelles fonctionnalités sans mises à jour manuelles |
| **Intégration de dépôt** | Connexion directe à GitHub | Éditez du code sans gérer les fichiers localement |
**Implications pratiques :**
- Continuité de travail entre différents environnements
- Interface cohérente peu importe le système d’exploitation
- Capacités immédiates de collaboration
- Réduction des besoins de stockage local
## Explorer VSCode.dev
Tout comme le laboratoire de Marie Curie contenait des équipements sophistiqués dans un espace relativement simple, VSCode.dev regroupe des outils de développement professionnels dans une interface navigateur. Cette application web fournit la même fonctionnalité de base que les éditeurs de code de bureau.
Commencez par naviguer sur [vscode.dev](https://vscode.dev) dans votre navigateur. L’interface charge sans téléchargement ni installation système – une application directe des principes du cloud computing.
### Connecter Votre Compte GitHub
À l’image du téléphone d’Alexander Graham Bell qui reliait des lieux distants, relier votre compte GitHub fait le pont entre VSCode.dev et vos dépôts de code. Lorsque vous êtes invité à vous connecter avec GitHub, il est recommandé d’accepter cette liaison.
**L’intégration GitHub fournit :**
- Accès direct à vos dépôts depuis l’éditeur
- Paramètres et extensions synchronisés entre appareils
- Flux de sauvegarde simplifié vers GitHub
- Environnement de développement personnalisé
### Faire Connaissance Avec Votre Nouvel Espace de Travail
Une fois que tout est chargé, vous verrez un espace de travail joliment épuré, conçu pour vous garder concentré sur l’essentiel – votre code !
**Voici votre visite du quartier :**
- **Barre d’activité** (la bande sur la gauche) : votre navigation principale avec Explorateur 📁, Recherche 🔍, Contrôle de Source 🌿, Extensions 🧩, et Paramètres ⚙️
- **Barre latérale** (le panneau à côté) : change pour vous montrer des infos pertinentes selon votre sélection
- **Zone d’édition** (le grand espace au milieu) : c’est là que la magie opère – votre espace principal de codage
**Prenez un moment pour explorer :**
- Cliquez sur les icônes de la Barre d’activité et voyez ce que chacune fait
- Remarquez comment la barre latérale change pour afficher différentes informations – plutôt sympa, non ?
- La vue Explorateur (📁) est probablement là où vous passerez le plus de temps, alors familiarisez-vous avec
```mermaid
flowchart TB
subgraph "Architecture de l'Interface VSCode.dev"
A[Barre d'Activité] --> B[Explorateur 📁]
A --> C[Recherche 🔍]
A --> D[Contrôle de Version 🌿]
A --> E[Extensions 🧩]
A --> F[Paramètres ⚙️]
B --> G[Arborescence des Fichiers]
C --> H[Trouver & Remplacer]
D --> I[Statut Git]
E --> J[Marché des Extensions]
F --> K[Configuration]
L[Barre Latérale] --> M[Panneau de Contexte]
N[Zone d'Édition] --> O[Fichiers de Code]
P[Terminal/Sortie] --> Q[Ligne de Commande]
end
```
## Ouvrir des Dépôts GitHub
# Utiliser un éditeur de code : Maîtriser [VSCode.dev](https://vscode.dev)
Avant Internet, les chercheurs devaient se déplacer physiquement dans des bibliothèques pour accéder aux documents. Les dépôts GitHub fonctionnent de façon similaire – ce sont des collections de code stockées à distance. VSCode.dev élimine l’étape classique de téléchargement des dépôts sur votre machine locale avant de les éditer.
**Bienvenue !**
Cette leçon vous guide des bases à l'utilisation avancée de [VSCode.dev](https://vscode.dev), un puissant éditeur de code basé sur le web. Vous apprendrez à éditer du code avec assurance, gérer des projets, suivre les modifications, installer des extensions et collaborer comme un pro—tout cela depuis votre navigateur, sans aucune installation requise.
Cette capacité permet un accès immédiat à n’importe quel dépôt public pour consulter, modifier ou contribuer. Voici deux méthodes pour ouvrir des dépôts :
***
### Méthode 1 : Le Maniement Par Clic
## Objectifs d'apprentissage
Parfait quand vous commencez dans VSCode.dev et souhaitez ouvrir un dépôt spécifique. C’est simple et adapté aux débutants :
À la fin de cette leçon, vous serez capable de :
**Voici comment faire :**
- Utiliser efficacement un éditeur de code pour n'importe quel projet, où que vous soyez
- Suivre votre travail de manière fluide grâce au contrôle de version intégré
- Personnaliser et optimiser votre flux de développement avec des personnalisations et extensions de l'éditeur
1. Rendez-vous sur [vscode.dev](https://vscode.dev) si vous n’y êtes pas encore
2. Cherchez le bouton "Open Remote Repository" sur l’écran d’accueil et cliquez dessus
***
## Prérequis
3. Collez l’URL de n’importe quel dépôt GitHub (essayez celui-ci : `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Appuyez sur Entrée et regardez la magie opérer !
Pour commencer, **inscrivez-vous gratuitement sur [GitHub](https://github.com)**, ce qui vous permettra de gérer des dépôts de code et de collaborer à l'échelle mondiale. Si vous n'avez pas encore de compte, [créez-en un ici](https://github.com/).
**Astuce pro – Le raccourci Palette de Commandes :**
***
Envie de vous sentir comme un magicien du code ? Essayez ce raccourci clavier : Ctrl+Shift+P (ou Cmd+Shift+P sur Mac) pour ouvrir la Palette de Commandes :
## Pourquoi utiliser un éditeur de code basé sur le web ?
Un **éditeur de code** comme VSCode.dev est votre centre de commande pour écrire, éditer et gérer du code. Avec une interface intuitive, de nombreuses fonctionnalités et un accès immédiat via le navigateur, vous pouvez :
**La Palette de Commandes, c’est comme un moteur de recherche pour tout ce que vous pouvez faire :**
- Tapez "open remote" et elle vous trouvera l’outil pour ouvrir un dépôt
- Elle se souvient des dépôts que vous avez ouverts récemment (très pratique !)
- Une fois habitué, vous aurez l’impression de coder à la vitesse de l’éclair
- C’est en quelque sorte la version VSCode.dev de "Hey Siri, mais pour coder"
- Éditer des projets sur n'importe quel appareil
- Éviter les tracas liés aux installations
- Collaborer et contribuer instantanément
### Méthode 2 : La Technique de Modification d’URL
Une fois à l'aise avec VSCode.dev, vous serez prêt à relever des défis de codage depuis n'importe où, à tout moment.
Comme HTTP et HTTPS utilisent des protocoles différents tout en conservant la même structure de domaine, VSCode.dev utilise un modèle d’URL qui reflète le système d’adressage de GitHub. N’importe quelle URL de dépôt GitHub peut être modifiée pour s’ouvrir directement dans VSCode.dev.
| **N’importe Quel Dépôt Accessible** | `github.com/leur-nom/utilisateur-depot-genial` | `vscode.dev/github/leur-nom/utilisateur-depot-genial` |
Accédez à **[VSCode.dev](https://vscode.dev)**—pas d'installation, pas de téléchargement. En vous connectant avec GitHub, vous débloquez un accès complet, y compris la synchronisation de vos paramètres, extensions et dépôts. Si demandé, connectez votre compte GitHub.
**Mise en œuvre :**
- Remplacez `github.com` par `vscode.dev/github`
- Conservez tous les autres composants de l’URL inchangés
- Fonctionne avec n’importe quel dépôt public accessible
- Offre un accès immédiat à l’édition
Après le chargement, votre espace de travail ressemblera à ceci :
> 💡 **Astuce qui change la vie** : Mettez en favoris les versions VSCode.dev de vos dépôts préférés. J’ai des favoris comme "Modifier Mon Portfolio" et "Corriger Documentation" qui me mènent directement en mode édition !
, ⚙️ (Paramètres), fichiers, contrôle de source, etc.
- **Barre latérale :** Change de contexte selon l'icône sélectionnée dans la barre d'activités (par défaut *Explorateur* pour afficher les fichiers).
- **Zone d'édition/code :** La plus grande section à droite—où vous éditez et visualisez le code.
**Quelle méthode utiliser ?**
- **La méthode interface** : Idéale quand vous explorez ou ne vous souvenez plus des noms exacts des dépôts
- **L’astuce URL** : Parfaite pour un accès ultra-rapide quand vous savez exactement où aller
Cliquez sur les icônes pour explorer les fonctionnalités, mais revenez à l'_Explorateur_ pour garder votre place.
### 🎯 Check-pédagogique : Accès au Développement Cloud
***
**Pause et réflexion** : Vous venez d’apprendre deux méthodes pour accéder aux dépôts de code via un navigateur web. Cela représente un changement fondamental dans la manière dont fonctionne le développement.
## Ouvrir un dépôt GitHub
**Auto-évaluation rapide** :
- Pouvez-vous expliquer pourquoi l’édition basée sur le web élimine la configuration traditionnelle d’un environnement de développement ?
- Quels avantages la technique de modification d’URL offre-t-elle par rapport au clonage git local ?
- Comment cette approche change-t-elle votre manière de contribuer aux projets open source ?
### Méthode 1 : Depuis l'éditeur
**Lien avec le monde réel** : Des grandes entreprises comme GitHub, GitLab, et Replit ont bâti leurs plateformes de développement sur ces principes "cloud-first". Vous apprenez les mêmes flux de travail utilisés par des équipes professionnelles de développement à travers le monde.
1. Allez sur [VSCode.dev](https://vscode.dev). Cliquez sur **"Ouvrir un dépôt distant."**
**Question défi** : Comment le développement basé sur le cloud pourrait-il changer la manière dont le codage est enseigné dans les écoles ? Pensez aux exigences matérielles, à la gestion logicielle, et aux possibilités collaboratives.
.
## Travailler Avec Les Fichiers et Projets
 et appuyez sur Entrée.
Maintenant que vous avez un dépôt ouvert, commençons à construire ! VSCode.dev vous donne tout ce dont vous avez besoin pour créer, éditer et organiser vos fichiers de code. Pensez-y comme à votre atelier digital – chaque outil est là où vous en avez besoin.
Si tout se passe bien, vous verrez le projet entier chargé et prêt à être édité !
Entrons dans les tâches quotidiennes qui constitueront la majeure partie de votre flux de travail de codage.
***
### Créer de Nouveaux Fichiers
### Méthode 2 : Instantanément via l'URL
Comme organiser des plans dans le bureau d’un architecte, la création de fichiers dans VSCode.dev suit une approche structurée. Le système supporte tous les types de fichiers standards du développement web.
Transformez n'importe quelle URL de dépôt GitHub pour l'ouvrir directement dans VSCode.dev en remplaçant `github.com` par `vscode.dev/github`.
1. Naviguez vers le dossier cible dans la barre latérale Explorateur
2. Survolez le nom du dossier pour faire apparaître l’icône "Nouveau Fichier" (📄+)
3. Entrez le nom du fichier incluant l’extension appropriée (`style.css`, `script.js`, `index.html`)
4. Appuyez sur Entrée pour créer le fichier
Cette fonctionnalité accélère l'accès rapide à n'importe quel projet.
***
**Conventions de nommage :**
- Utilisez des noms descriptifs qui indiquent la fonction du fichier
- Incluez les extensions pour une coloration syntaxique correcte
- Suivez des schémas de nommage cohérents dans vos projets
- Employez des minuscules et des traits d’union à la place des espaces
## Éditer des fichiers dans votre projet
### Éditer et Sauvegarder les Fichiers
Une fois votre dépôt ouvert, vous pouvez :
C’est là que le vrai plaisir commence ! L’éditeur de VSCode.dev regorge de fonctionnalités utiles qui rendent le codage fluide et intuitif. C’est comme avoir un assistant d’écriture très intelligent, mais pour le code.
### 1. **Créer un nouveau fichier**
- Dans la barre latérale *Explorateur*, naviguez vers le dossier souhaité ou utilisez la racine.
- Cliquez sur l'icône _‘Nouveau fichier ...’_.
- Nommez votre fichier, appuyez sur **Entrée**, et votre fichier apparaît instantanément.
**Votre flux de travail d’édition :**
 ou Cmd+S (Mac) – même si l’enregistrement automatique est aussi actif !
- Cliquez sur un fichier dans l'*Explorateur* pour l'ouvrir dans la zone de code.
- Faites vos modifications selon vos besoins.
- VSCode.dev enregistre automatiquement vos modifications, mais vous pouvez appuyer sur Ctrl+S pour enregistrer manuellement.
- Il détecte les fautes de frappe et erreurs avant même que vous sauvegardiez
- Vous pouvez avoir plusieurs fichiers ouverts dans des onglets, comme dans un navigateur
- Tout s’enregistre automatiquement en arrière-plan
VSCode.dev intègre le contrôle de version **Git** !
> ⚠️ **Astuce rapide** : Même si l’enregistrement automatique est là pour vous, appuyer sur Ctrl+S ou Cmd+S reste une bonne habitude. Cela sauvegarde tout immédiatement et déclenche des fonctionnalités supplémentaires comme la vérification des erreurs.
- Cliquez sur l'icône _'Contrôle de source'_ pour voir toutes les modifications effectuées.
- Les fichiers dans le dossier `Changes` montrent les ajouts (en vert) et les suppressions (en rouge).
![Voir les modifications](../images/working-tree.png modifications en cliquant sur le `+` à côté des fichiers pour les préparer à la validation.
- **Annulez** les modifications non souhaitées en cliquant sur l'icône d'annulation.
- Tapez un message clair de validation, puis cliquez sur la coche pour valider et pousser.
### Contrôle de Version Avec Git
Pour revenir à votre dépôt sur GitHub, sélectionnez le menu hamburger en haut à gauche.
Comme les archéologues qui créent des registres détaillés des couches de fouilles, Git suit les changements dans votre code au fil du temps. Ce système préserve l’historique du projet et vous permet de revenir à des versions antérieures si nécessaire. VSCode.dev inclut une fonctionnalité Git intégrée.
![Valider les modifications](../images/edit-vscode.dev avec des extensions
**Interface Contrôle de Source :**
Les extensions vous permettent d'ajouter des langages, des thèmes, des débogueurs et des outils de productivité à VSCode.dev—rendant votre vie de développeur plus facile et plus agréable.
1. Accédez au panneau Contrôle de Source via l’icône 🌿 dans la Barre d’Activité
2. Les fichiers modifiés apparaissent dans la section "Modifications"
3. La coloration indique les types de changement : vert pour ajouts, rouge pour suppressions
**Sauvegarder votre travail (le flux de travail du commit) :**
```mermaid
flowchart TD
A[Apporter des modifications aux fichiers] --> B[Voir les modifications dans le contrôle de source]
B --> C[Mettre en scène les modifications en cliquant sur +]
C --> D[Écrire un message de commit descriptif]
D --> E[Cliquer sur la coche pour valider]
E --> F[Modifications poussées vers GitHub]
```
```mermaid
stateDiagram-v2
[*] --> Modified: Modifier les fichiers
Modified --> Staged: Cliquer + pour préparer
Staged --> Modified: Cliquer - pour retirer
Staged --> Committed: Ajouter un message & valider
- Cliquez sur l’icône "+" à côté des fichiers que vous voulez sauvegarder (cela les "staging")
- Vérifiez une dernière fois que vous êtes satisfait de toutes vos modifications mises en scène
- Rédigez une courte note expliquant ce que vous avez fait (c’est votre « message de commit »)
- Cliquez sur le bouton avec la coche pour tout sauvegarder sur GitHub
- Si vous changez d’avis, l’icône d’annulation vous permet de rejeter les modifications
**Rédiger de bons messages de commit (c’est plus facile que vous ne le pensez !) :**
- Décrivez simplement ce que vous avez fait, par exemple « Ajouter un formulaire de contact » ou « Corriger la navigation cassée »
- Restez court et concis – pensez longueur tweet, pas dissertation
- Commencez par des verbes d’action comme « Ajouter », « Corriger », « Mettre à jour » ou « Supprimer »
- **Exemples efficaces** : « Ajouter un menu de navigation responsive », « Corriger les problèmes de mise en page mobile », « Mettre à jour les couleurs pour une meilleure accessibilité »
> 💡 **Conseil de navigation rapide** : Utilisez le menu hamburger (☰) en haut à gauche pour revenir rapidement à votre dépôt GitHub et voir vos modifications validées en ligne. C’est comme un portail entre votre environnement d’édition et la maison de votre projet sur GitHub !
## Améliorer les fonctionnalités avec des extensions
Tout comme un atelier d’artisan contient des outils spécialisés pour différentes tâches, VSCode.dev peut être personnalisé avec des extensions qui ajoutent des capacités spécifiques. Ces plugins développés par la communauté répondent aux besoins courants du développement comme le formatage du code, l’aperçu en direct et une intégration Git améliorée.
Le marketplace des extensions héberge des milliers d’outils gratuits créés par des développeurs du monde entier. Chaque extension résout des problèmes de flux de travail particuliers, vous permettant de construire un environnement de développement personnalisé adapté à vos besoins et préférences spécifiques.
```mermaid
mindmap
root((Écosystème d'Extensions))
Essential Categories
Productivité
Live Server
Auto Rename Tag
Bracket Pair Colorizer
GitLens
Qualité du Code
Prettier
ESLint
Spell Checker
Error Lens
Support Linguistique
HTML CSS Support
JavaScript ES6
Python Extension
Markdown Preview
Thèmes & UI
Dark+ Modern
Material Icon Theme
Peacock
Rainbow Brackets
Discovery Methods
Classements Populaires
Download Counts
User Ratings
Recent Updates
Community Reviews
Recommandations
Workspace Suggestions
Language-based
Workflow-specific
Team Standards
```
### Trouver vos extensions parfaites
Le marketplace des extensions est vraiment bien organisé, vous ne vous perdrez pas en cherchant ce dont vous avez besoin. Il est conçu pour vous aider à découvrir à la fois des outils spécifiques et des choses sympas dont vous ne soupçonniez même pas l’existence !
**Accéder au marketplace :**
1. Cliquez sur l’icône Extensions (🧩) dans la barre d’activité
2. Parcourez ou recherchez quelque chose de spécifique
3. Cliquez sur tout ce qui vous semble intéressant pour en savoir plus
**Ce que vous y verrez :**
| Section | Contenu | Pourquoi c’est utile |
|----------|---------|----------|
| **Installées** | Extensions que vous avez déjà ajoutées | Votre boîte à outils personnelle de développement |
| **Populaires** | Les favoris du public | Ce à quoi la plupart des développeurs font confiance |
| **Recommandées** | Suggestions intelligentes pour votre projet | Les recommandations utiles de VSCode.dev |
**Ce qui rend la navigation facile :**
- Chaque extension affiche les notes, le nombre de téléchargements et des avis d’utilisateurs réels
- Vous avez des captures d’écran et des descriptions claires de ce que fait chaque extension
- Tout est clairement marqué avec des infos de compatibilité
- Des extensions similaires sont suggérées pour comparer les options
### Installer des extensions (C’est super facile !)
Ajouter de nouvelles fonctionnalités à votre éditeur est aussi simple que de cliquer sur un bouton. Les extensions s’installent en quelques secondes et fonctionnent immédiatement – pas besoin de redémarrer, pas d’attente.
**Voici tout ce que vous devez faire :**
1. Cherchez ce que vous voulez (essayez « live server » ou « prettier »)
2. Cliquez sur une extension qui vous plaît pour voir plus de détails
3. Lisez ce qu’elle fait et consultez les notes
4. Cliquez sur le bouton bleu « Installer » et c’est terminé !
- L’extension se télécharge et s’installe automatiquement
- Les nouvelles fonctionnalités apparaissent immédiatement dans votre interface
- Tout commence à fonctionner tout de suite (sérieusement, c’est aussi rapide !)
- Si vous êtes connecté, l’extension se synchronise sur tous vos appareils
**Quelques extensions que je recommande de commencer à utiliser :**
- **Live Server** : Voir votre site web se mettre à jour en temps réel pendant que vous codez (celle-ci est magique !)
- **Prettier** : Rend votre code propre et professionnel automatiquement
- **Auto Rename Tag** : Changez une balise HTML et son partenaire se met aussi à jour
- **Bracket Pair Colorizer** : Colore vos parenthèses pour ne jamais vous perdre
- **GitLens** : Boostez vos fonctionnalités Git avec plein d’infos utiles
### Personnaliser vos extensions
La plupart des extensions proposent des paramètres que vous pouvez ajuster pour qu’elles fonctionnent exactement comme vous le souhaitez. C’est comme régler le siège et les rétroviseurs dans une voiture – chacun a ses préférences !
**Ajuster les paramètres d’une extension :**
1. Trouvez votre extension installée dans le panneau Extensions
2. Cherchez la petite icône d’engrenage (⚙️) à côté de son nom et cliquez dessus
3. Choisissez « Paramètres de l’extension » dans le menu déroulant
4. Modifiez les réglages jusqu’à ce que ce soit parfait pour votre flux de travail
**Choses courantes que vous pourriez vouloir modifier :**
- Comment votre code est formaté (tabulations vs espaces, longueur des lignes, etc.)
- Sur quels types de fichiers l’extension doit fonctionner
- Activer ou désactiver certaines fonctionnalités pour rester organisé
### Garder vos extensions bien rangées
Au fur et à mesure que vous découvrez des extensions sympas, vous voudrez garder votre collection propre et fluide. VSCode.dev facilite vraiment cette gestion.
**Vos options de gestion des extensions :**
| Ce que vous pouvez faire | Quand c’est utile | Astuce pro |
|--------|---------|----------|
| **Désactiver** | Tester si une extension cause des problèmes | Mieux que désinstaller si vous voulez la récupérer plus tard |
| **Désinstaller** | Supprimer complètement les extensions inutiles | Garde votre environnement propre et rapide |
| **Mettre à jour** | Obtenir les dernières fonctionnalités et corrections | Se fait généralement automatiquement, mais ça vaut le coup de vérifier |
**Comment je gère mes extensions :**
- Tous les quelques mois, je fais le point sur ce que j’ai installé et supprime ce que je n’utilise pas
- Je garde mes extensions à jour pour avoir les dernières améliorations et sécurités
- Si quelque chose semble lent, je désactive temporairement des extensions pour identifier le coupable
- Je lis les notes de mise à jour lors des grosses versions – parfois il y a des nouveautés sympas !
> ⚠️ **Conseil performance** : Les extensions sont géniales, mais en avoir trop peut ralentir l’outil. Concentrez-vous sur celles qui améliorent vraiment votre vie et n’hésitez pas à supprimer celles que vous n’utilisez jamais.
### 🎯 Point pédagogique : Personnalisation de l’environnement de développement
**Compréhension de l’architecture** : Vous avez appris à personnaliser un environnement de développement professionnel avec des extensions créées par la communauté. Cela reflète comment les équipes d’entreprise créent des chaînes d’outils standardisées.
**Concepts clés maîtrisés** :
- **Découverte d’extensions** : Trouver des outils qui résolvent des défis spécifiques de développement
- **Configuration de l’environnement** : Personnaliser les outils selon vos préférences ou celles de l’équipe
- **Optimisation des performances** : Trouver l’équilibre entre fonctionnalités et performance système
- **Collaboration communautaire** : Exploiter des outils créés par la communauté mondiale de développeurs
**Lien avec l’industrie** : Les écosystèmes d’extensions alimentent des plateformes majeures comme VS Code, Chrome DevTools et les IDE modernes. Savoir évaluer, installer et configurer les extensions est essentiel pour les flux professionnels de développement.
**Question de réflexion** : Comment aborderiez-vous la mise en place d’un environnement de développement standardisé pour une équipe de 10 développeurs ? Réfléchissez à la cohérence, aux performances et aux préférences individuelles.
## 📈 Votre timeline de maîtrise du développement cloud
```mermaid
timeline
title Parcours professionnel de développement Cloud
section Fondations de la plateforme
Compréhension du développement Cloud
: Maîtriser les concepts d'édition web
: Connecter les modèles d'intégration GitHub
: Naviguer dans les interfaces professionnelles
section Maîtrise du flux de travail
Gestion des fichiers et projets
: Créer des structures de projet organisées
: Maîtriser les avantages du surlignage syntaxique
: Gérer les flux de travail d'édition multi-fichiers
Intégration du contrôle de version
: Comprendre la visualisation Git
: Pratiquer les standards des messages de commit
: Maîtriser les flux de suivi des modifications
section Personnalisation de l'environnement
Écosystème d'extensions
: Découvrir les extensions de productivité
: Configurer les préférences de développement
: Optimiser la performance vs la fonctionnalité
Configuration professionnelle
: Construire des flux de travail cohérents
: Créer des configurations réutilisables
: Établir des standards d'équipe
section Préparation à l'industrie
Développement Cloud-first
: Maîtriser les pratiques de développement à distance
: Comprendre les flux de travail collaboratifs
: Développer des compétences indépendantes de la plateforme
Pratiques professionnelles
: Suivre les standards de l'industrie
: Créer des flux de travail maintenables
: Se préparer aux environnements d'équipe
```
**🎓 Étape de graduation** : Vous avez maîtrisé avec succès le développement cloud utilisant les mêmes outils et flux professionnels employés par les développeurs de grandes entreprises technologiques. Ces compétences représentent le futur du développement logiciel.
**🔄 Capacités de niveau supérieur** :
- Prêt à explorer des plateformes avancées de développement cloud (Codespaces, GitPod)
- Préparé à travailler dans des équipes de développement distribuées
- Capable de contribuer à des projets open source à l’échelle mondiale
- Bases posées pour les pratiques modernes de DevOps et d’intégration continue
## Défi GitHub Copilot Agent 🚀
À l’image de l’approche structurée utilisée par la NASA pour les missions spatiales, ce défi consiste en une application systématique des compétences VSCode.dev dans un scénario complet de workflow.
**Objectif :** Démontrer une maîtrise de VSCode.dev en établissant un workflow complet de développement web.
**Exigences du projet :** Avec l’aide du mode Agent, réalisez ces tâches :
1. Forker un dépôt existant ou en créer un nouveau
2. Mettre en place une structure de projet fonctionnelle avec fichiers HTML, CSS et JavaScript
3. Installer et configurer trois extensions améliorant le développement
4. Pratiquer le contrôle de version avec des messages de commit descriptifs
5. Expérimenter la création et modification de branches fonctionnelles
6. Documenter le processus et les apprentissages dans un fichier README.md
Cet exercice consolide tous les concepts VSCode.dev en un workflow pratique applicable à vos futurs projets.
En savoir plus sur [le mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
### Parcourir et gérer les extensions
- Cliquez sur l'**icône Extensions** dans la barre d'activités.
- Recherchez une extension dans la boîte _'Rechercher des extensions dans le Marketplace'_.
- **Désactiver :** Désactiver temporairement une extension tout en la gardant installée
- **Désinstaller :** La supprimer définitivement si elle n'est plus nécessaire
Cet exercice vous guide pour construire un site web professionnel de CV entièrement dans votre navigateur. Vous utiliserez toutes les fonctionnalités VSCode.dev que nous avons explorées, et à la fin, vous aurez un site superbe et une confiance solide dans votre nouveau workflow.
Trouvez l'extension, appuyez sur l'icône Engrenage, et sélectionnez ‘Désactiver’ ou ‘Désinstaller,’ ou utilisez les boutons bleus dans la zone de code.
## Continuez à explorer et développer vos compétences
***
Vous avez maintenant une base solide, mais il y a tellement d’autres choses passionnantes à découvrir ! Voici quelques ressources et idées pour faire passer vos compétences VSCode.dev au niveau supérieur :
## Exercice
**Documentation officielle à garder dans vos favoris :**
- [Documentation Web VSCode](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Le guide complet pour éditer dans le navigateur
- [GitHub Codespaces](https://docs.github.com/en/codespaces) – Pour ceux qui veulent encore plus de puissance dans le cloud
Mettez vos compétences à l'épreuve : [Créez un site web de CV en utilisant vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
**Fonctionnalités sympas à tester ensuite :**
- **Raccourcis clavier** : Apprenez les combinaisons qui vous feront vous sentir comme un ninja du code
- **Paramètres d’espace de travail** : Configurez différents environnements pour différents types de projets
- **Espaces de travail multi-racines** : Travaillez sur plusieurs dépôts en même temps (super pratique !)
- **Intégration du terminal** : Accédez aux outils en ligne de commande directement dans votre navigateur
***
**Idées de pratique :**
- Plongez dans des projets open source et contribuez via VSCode.dev – c’est une excellente façon de s’impliquer !
- Essayez différentes extensions pour trouver votre configuration idéale
- Créez des modèles de projet pour les types de sites que vous construisez le plus souvent
- Entraînez-vous aux workflows Git comme le branching et le merging – ces compétences sont précieuses en équipe
## Exploration et auto-apprentissage supplémentaires
---
- Approfondissez avec [la documentation officielle de VSCode Web](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza).
- Explorez les fonctionnalités avancées de l'espace de travail, les raccourcis clavier et les paramètres.
**Vous avez maîtrisé le développement dans le navigateur !** 🎉 Comme l’invention d’instruments portables a permis aux scientifiques de faire des recherches dans des lieux éloignés, VSCode.dev vous permet de coder professionnellement depuis n’importe quel appareil connecté à Internet.
***
Ces compétences reflètent les pratiques actuelles de l’industrie – de nombreux développeurs professionnels utilisent les environnements de développement cloud pour leur flexibilité et leur accessibilité. Vous avez appris un workflow qui s’adapte aussi bien aux projets individuels qu’aux grandes collaborations en équipe.
**Vous êtes maintenant prêt à coder, créer et collaborer—de n'importe où, sur n'importe quel appareil, en utilisant VSCode.dev !**
Appliquez ces techniques à votre prochain projet de développement ! 🚀
---
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous ne sommes pas responsables des malentendus ou des interprétations erronées résultant de l'utilisation de cette traduction.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avis de non-responsabilité** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, il est recommandé de recourir à une traduction professionnelle effectuée par un humain. Nous ne saurions être tenus responsables de tout malentendu ou mauvaise interprétation résultant de l’utilisation de cette traduction.
_Quelle classe d'avoir un recruteur qui vous demande votre CV et vous lui envoyez une URL ?_ 😎
Transformez vos perspectives de carrière en créant un site web de CV professionnel qui met en valeur vos compétences et votre expérience dans un format interactif et moderne. Au lieu d’envoyer des PDF traditionnels, imaginez fournir aux recruteurs un site web élégant et responsive qui démontre à la fois vos qualifications et vos capacités en développement web.
## Objectifs
Cet exercice pratique met en application toutes vos compétences VSCode.dev tout en créant quelque chose de réellement utile pour votre carrière. Vous expérimenterez le workflow complet du développement web – de la création du dépôt à son déploiement – le tout dans votre navigateur.
Après cette tâche, vous apprendrez à :
En réalisant ce projet, vous aurez une présence professionnelle en ligne pouvant être facilement partagée avec des employeurs potentiels, mise à jour au fur et à mesure que vos compétences évoluent, et personnalisée pour correspondre à votre marque personnelle. C’est exactement le type de projet pratique qui démontre des compétences réelles en développement web.
- Créer un site web pour présenter votre CV
## Objectifs d’apprentissage
### Prérequis
Après avoir complété cet exercice, vous serez capable de :
1. Un compte GitHub. Rendez-vous sur [GitHub](https://github.com/) et créez un compte si ce n'est pas déjà fait.
- **Créer** et gérer un projet complet de développement web avec VSCode.dev
- **Structurer** un site web professionnel avec des éléments HTML sémantiques
- **Styliser** des mises en page responsives avec des techniques CSS modernes
- **Implémenter** des fonctionnalités interactives en utilisant les technologies web de base
- **Déployer** un site web en ligne accessible via une URL partageable
- **Démontrer** les meilleures pratiques de gestion de version durant tout le processus de développement
## Étapes
## Prérequis
**Étape 1 :** Créez un nouveau dépôt GitHub et nommez-le `my-resume`.
Avant de commencer cet exercice, assurez-vous de disposer :
**Étape 2 :** Créez un fichier `index.html` dans votre dépôt. Nous ajouterons au moins un fichier directement sur github.com, car vous ne pouvez pas ouvrir un dépôt vide sur vscode.dev.
- D’un compte GitHub (créez-en un sur [github.com](https://github.com/) si nécessaire)
- D’avoir complété la leçon VSCode.dev couvrant la navigation et les opérations de base de l’interface
- D’une compréhension basique de la structure HTML et des concepts de stylisation CSS
Cliquez sur le lien `creating a new file`, tapez le nom `index.html` et sélectionnez le bouton `Commit new file`.
## Configuration du projet et création du dépôt
Commençons par établir les bases de votre projet. Ce processus reflète les workflows de développement réels où les projets débutent par l’initialisation correcte d’un dépôt et la planification de la structure.
**Étape 3 :** Ouvrez [VSCode.dev](https://vscode.dev) et sélectionnez le bouton `Open Remote Repository`.
### Étape 1 : Créez votre dépôt GitHub
Copiez l'URL du dépôt que vous venez de créer pour votre site CV et collez-la dans la boîte de saisie :
Mettre en place un dépôt dédié garantit que votre projet est bien organisé et géré en version dès le début.
_Remplacez `your-username` par votre nom d'utilisateur GitHub._
1. **Naviguez** sur [GitHub.com](https://github.com) et connectez-vous à votre compte
2. **Cliquez** sur le bouton vert « New » ou l’icône « + » en haut à droite
3. **Nommez** votre dépôt `my-resume` (ou choisissez un nom personnalisé comme `john-smith-resume`)
4. **Ajoutez** une brève description : « Site web de CV professionnel construit avec HTML et CSS »
5. **Sélectionnez** « Public » pour rendre votre CV accessible aux employeurs potentiels
6. **Cochez** « Add a README file » pour créer une description initiale du projet
7. **Cliquez** sur « Create repository » pour finaliser la configuration
> 💡 **Conseil pour le nom du dépôt** : Utilisez des noms descriptifs et professionnels qui indiquent clairement l’objet du projet. Cela aide lors du partage avec les employeurs ou les revues de portfolio.
### Étape 2 : Initialisez la structure du projet
Puisque VSCode.dev requiert au moins un fichier pour ouvrir un dépôt, nous allons créer notre fichier HTML principal directement sur GitHub avant de passer à l’éditeur web.
1. **Cliquez** sur le lien « creating a new file » dans votre nouveau dépôt
✅ Si tout se passe bien, vous verrez votre projet et le fichier index.html s'ouvrir dans l'éditeur de texte sur le navigateur.
4. **Écrivez** un message de commit : « Add initial HTML structure »
5. **Cliquez** sur « Commit new file » pour sauvegarder vos modifications
**Voici ce que cette configuration initiale accomplit :**
- **Établit** une structure de document HTML5 correcte avec des éléments sémantiques
- **Inclut** la meta viewport pour la compatibilité responsive design
- **Définit** un titre de page descriptif qui apparaît dans les onglets du navigateur
- **Crée** une base pour organiser le contenu professionnel
## Travail dans VSCode.dev
Maintenant que les fondations de votre dépôt sont posées, passons à VSCode.dev pour le développement principal. Cet éditeur web fournit tous les outils nécessaires au développement web professionnel.
### Étape 3 : Ouvrez votre projet dans VSCode.dev
1. **Naviguez** sur [vscode.dev](https://vscode.dev) dans un nouvel onglet de navigateur
2. **Cliquez** sur « Open Remote Repository » à l’écran d’accueil
3. **Copiez** l’URL de votre dépôt depuis GitHub et collez-la dans le champ de saisie
Format : `https://github.com/votre-nom-utilisateur/my-resume`
*Remplacez `votre-nom-utilisateur` par votre vrai nom d’utilisateur GitHub*
4. **Appuyez** sur Entrée pour charger votre projet
✅ **Indicateur de réussite** : Vous devriez voir les fichiers de votre projet dans la barre latérale de l’Explorateur et `index.html` disponible à l’édition dans la zone principale.
**Étape 4 :** Ouvrez le fichier `index.html`, collez le code ci-dessous dans votre zone de code et enregistrez.
**Ce que vous verrez dans l’interface :**
- **Barre latérale Explorateur** : **Affiche** les fichiers et dossiers de votre dépôt
- **Zone d’édition** : **Montre** le contenu des fichiers sélectionnés pour modification
- **Barre d’activité** : **Donne accès** à des fonctionnalités comme le contrôle de source et les extensions
- **Barre d’état** : **Indique** le statut de connexion et les informations sur la branche courante
### Étape 4 : Construisez le contenu de votre CV
Remplacez le contenu fictif dans `index.html` par une structure complète de CV. Ce HTML constitue la base d’une présentation professionnelle de vos qualifications.
<details>
<summary><b>Code HTML responsable du contenu de votre site CV.</b></summary>
<summary><b>Structure HTML complète du CV</b></summary>
<p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<divclass="job">
<h3>Job Title</h3>
<pclass="company">Company Name | Start Date – End Date</p>
<ul>
<li>Describe a key accomplishment or responsibility</li>
<li>Highlight specific skills or technologies used</li>
<li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
</ul>
</div>
<divclass="job">
<h3>Previous Job Title</h3>
<pclass="company">Previous Company | Start Date – End Date</p>
<ul>
<li>Focus on transferable skills and achievements</li>
<li>Demonstrate growth and learning progression</li>
<li>Include any leadership or collaboration experiences</li>
</ul>
</div>
</section>
<section>
<h2>PROJECTS</h2>
<divclass="project">
<h3>Project Name</h3>
<p>Brief description of what the project accomplishes and technologies used.</p>
<ahref="#"target="_blank">View Project</a>
</div>
</section>
</article>
</main>
</body>
</html>
```
</details>
Ajoutez les détails de votre CV pour remplacer le _texte de remplacement_ dans le code HTML.
**Lignes directrices de personnalisation :**
- **Remplacez** tout le texte fictif par vos informations réelles
- **Ajustez** les sections selon votre niveau d’expérience et votre orientation professionnelle
- **Ajoutez** ou supprimez des sections si nécessaire (ex. : Certifications, Bénévolat, Langues)
- **Incluez** des liens vers vos profils et projets réels
### Étape 5 : Créez les fichiers complémentaires
**Étape 5 :** Survolez le dossier My-Resume, cliquez sur l'icône `New File ...` et créez 2 nouveaux fichiers dans votre projet : `style.css` et `codeswing.json`.
Les sites professionnels nécessitent une structure de fichiers organisée. Créez la feuille de style CSS et les fichiers de configuration nécessaires pour un projet complet.
**Étape 6 :** Ouvrez le fichier `style.css`, collez le code ci-dessous et enregistrez.
1. **Survolez** le nom de votre dossier de projet dans la barre latérale Explorateur
2. **Cliquez** sur l’icône « Nouveau fichier » (📄+) qui apparaît
3. **Créez** ces fichiers un par un :
- `style.css` (pour la stylisation et la mise en page)
- `codeswing.json` (pour la configuration de l’extension de prévisualisation)
**Création du fichier CSS (`style.css`) :**
<details>
<summary><b>Code CSS pour formater la mise en page du site.</b></summary>
**Étape 6 :** Ouvrez le fichier `codeswing.json`, collez le code ci-dessous et enregistrez.
**Création du fichier de configuration (`codeswing.json`) :**
{
```json
{
"scripts": [],
"styles": []
}
}
```
**Comprendre les fonctionnalités CSS :**
- **Utilise** CSS Grid pour une structure de mise en page responsive et professionnelle
- **Implémente** des dégradés modernes pour les en-têtes colorés
- **Inclut** des effets au survol et transitions douces pour l’interactivité
- **Propose** un design responsive fonctionnel sur tous types d’appareils
- **Ajoute** des styles adaptés à l’impression pour la génération de PDFs
### Étape 6 : Installez et configurez les extensions
Les extensions améliorent votre expérience de développement en fournissant des capacités de prévisualisation en direct et des outils de workflow améliorés. L’extension CodeSwing est particulièrement utile pour les projets web.
**Installation de l’extension CodeSwing :**
1. **Cliquez** sur l’icône Extensions (🧩) dans la barre d’activité
2. **Cherchez** « CodeSwing » dans la barre de recherche du marketplace
3. **Sélectionnez** l’extension CodeSwing dans les résultats
4. **Cliquez** sur le bouton bleu « Installer »
**Ce que CodeSwing fournit :**
- **Permet** la prévisualisation en direct de votre site web pendant l’édition
- **Affiche** les changements en temps réel sans actualisation manuelle
- **Supporte** plusieurs types de fichiers dont HTML, CSS et JavaScript
- **Offre** une expérience d’environnement de développement intégré
**Étape 7 :** Installez l'extension `Codeswing` pour visualiser le site CV dans la zone de code.
**Résultats immédiats après installation :**
Une fois CodeSwing installé, vous verrez une prévisualisation en direct de votre site de CV apparaître dans l’éditeur. Cela vous permet de voir exactement à quoi ressemble votre site au fur et à mesure des modifications.
Cliquez sur l'icône _`Extensions`_ dans la barre d'activité et tapez Codeswing. Cliquez soit sur le _bouton bleu Installer_ dans la barre d'activité étendue pour installer, soit sur le bouton d'installation qui apparaît dans la zone de code une fois l'extension sélectionnée pour charger des informations supplémentaires. Immédiatement après l'installation de l'extension, observez les changements dans votre projet 😃.
**Comprendre l’interface améliorée :**
- **Vue en double** : **Montre** votre code d’un côté et la prévisualisation en direct de l’autre
- **Mises à jour en temps réel** : **Reflète** immédiatement les modifications quand vous tapez
- **Prévisualisation interactive** : **Permet** de tester les liens et interactions
- **Simulation mobile** : **Offre** des capacités de test responsive
Voici ce que vous verrez à l'écran après avoir installé l'extension.
### Étape 7 : Contrôle de version et publication
Maintenant que votre site de CV est complet, utilisez Git pour sauvegarder votre travail et le rendre disponible en ligne.
Si vous êtes satisfait des modifications apportées, survolez le dossier `Changes` et cliquez sur le bouton `+` pour mettre en scène les modifications.
**Commiter vos modifications :**
Tapez un message de commit _(Une description des modifications apportées au projet)_ et validez vos modifications en cliquant sur la `coche`. Une fois votre travail terminé, sélectionnez l'icône du menu hamburger en haut à gauche pour revenir au dépôt sur GitHub.
1. **Cliquez** sur l’icône de Contrôle de source (🌿) dans la barre d’activité
2. **Passez en revue** tous les fichiers créés et modifiés dans la section « Changes »
3. **Stadez** vos modifications en cliquant sur l’icône "+" à côté de chaque fichier
4. **Écrivez** un message de commit descriptif comme :
- « Add complete resume website with responsive design »
- « Implement professional styling and content structure »
5. **Cliquez** sur la coche (✓) pour valider et pousser vos modifications
Félicitations 🎉 Vous venez de créer votre site web CV en utilisant vscode.dev en quelques étapes.
**Exemples efficaces de messages de commit :**
- « Add professional resume content and styling »
- « Implement responsive design for mobile compatibility »
- « Update contact information and project links »
## 🚀 Défi
> 💡 **Astuce professionnelle** : De bons messages de commit aident à suivre l’évolution du projet et montrent un souci du détail – des qualités appréciées des employeurs.
Ouvrez un dépôt distant sur lequel vous avez les permissions de faire des modifications et mettez à jour certains fichiers. Ensuite, essayez de créer une nouvelle branche avec vos modifications et faites une Pull Request.
**Accéder à votre site publié :**
Une fois validé, vous pouvez revenir à votre dépôt GitHub à l’aide du menu hamburger (☰) en haut à gauche. Votre site de CV est maintenant versionné et prêt à être déployé ou partagé.
## Révision & Étude personnelle
## Résultats et étapes suivantes
**Félicitations ! 🎉** Vous avez créé avec succès un site web de CV professionnel avec VSCode.dev. Votre projet démontre :
**Compétences techniques acquises :**
- **Gestion de dépôt** : Création et organisation d’une structure complète de projet
- **Développement web** : Construction d’un site responsive avec HTML5 et CSS3 modernes
- **Contrôle de version** : Mise en place d’un workflow Git correct avec des commits significatifs
- **Maîtrise des outils** : Utilisation efficace de l’interface et du système d’extensions de VSCode.dev
**Résultats professionnels obtenus :**
- **Présence en ligne** : Une URL partageable mettant en avant vos qualifications
- **Format moderne** : Une alternative interactive aux CV PDF traditionnels
- **Compétences démontrables** : Une preuve concrète de vos capacités en développement web
- **Mises à jour faciles** : Une base que vous pouvez continuellement améliorer et personnaliser
### Options de déploiement
Pour rendre votre CV accessible aux employeurs, considérez ces options d’hébergement :
**GitHub Pages (recommandé) :**
1. Allez dans les Paramètres de votre dépôt sur GitHub
2. Descendez à la section « Pages »
3. Sélectionnez « Deploy from a branch » et choisissez « main »
4. Votre site sera disponible à l’adresse `https://votre-nom-utilisateur.github.io/my-resume`
**Plateformes alternatives :**
- **Netlify** : Déploiement automatique avec domaines personnalisés
- **Vercel** : Déploiement rapide avec fonctionnalités d’hébergement modernes
- **GitHub Codespaces** : Environnement de développement avec prévisualisation intégrée
### Suggestions d’amélioration
Continuez à développer vos compétences en ajoutant ces fonctionnalités :
**Améliorations techniques :**
- **Interactivité JavaScript** : Ajoutez le défilement fluide ou des éléments interactifs
- **Mode sombre** : Implémentez un basculement de thème avec transitions douces
- **Formulaire de contact** : Permettez une communication directe avec les employeurs potentiels
- **Optimisation SEO** : Ajoutez des meta tags et des données structurées pour une meilleure visibilité
**Améliorations de contenu :**
- **Portfolio de projets** : Liez à des dépôts GitHub et démonstrations en direct
- **Visualisation des compétences** : Créez des barres de progression ou systèmes d’évaluation
- **Section témoignages** : Incluez des recommandations de collègues ou formateurs
- **Intégration blog** : Ajoutez une section blog pour montrer votre parcours d’apprentissage
## Défi Agent GitHub Copilot 🚀
Utilisez le mode Agent pour relever le défi suivant :
**Description :** Améliorez votre site de CV avec des fonctionnalités avancées qui montrent des capacités professionnelles en développement web et des principes de design modernes.
**Consigne :** En vous basant sur votre site actuel, implémentez ces fonctionnalités avancées :
1. Ajoutez un basculement thème sombre/clair avec transitions fluides
2. Créez une section compétences interactive avec des barres de progression animées
3. Implémentez un formulaire de contact avec validation de formulaire
4. Ajoutez une section portfolio de projets avec effets au survol et modales pop-up
5. Incluez une section blog avec au moins 3 articles exemples sur votre parcours d’apprentissage
6. Optimisez pour le SEO avec des meta tags appropriés, données structurées et performances
7. Déployez le site amélioré en utilisant GitHub Pages ou Netlify
8. Documentez toutes les nouvelles fonctionnalités dans votre README.md avec des captures d’écran
Votre site amélioré doit témoigner de la maîtrise des pratiques modernes de développement web, incluant responsive design, interactivité JavaScript et workflows professionnels de déploiement.
## Extension du défi
Prêt à aller plus loin ? Essayez ces défis avancés :
**📱 Refonte Mobile-First :** Reconstruisez complètement votre site avec une approche mobile-first utilisant CSS Grid et Flexbox
**🔍 Optimisation SEO :** Implémentez un SEO complet incluant meta tags, données structurées et optimisation des performances
**🌐 Support multilingue :** Ajoutez des fonctionnalités d’internationalisation pour supporter plusieurs langues
**📊 Intégration d’Analytics :** Intégrez Google Analytics pour suivre l’engagement des visiteurs et optimiser votre contenu
**🚀 Optimisation des performances :** Atteignez des scores parfaits sur Lighthouse dans toutes les catégories
## Révision & Auto-étude
Élargissez vos connaissances avec ces ressources :
**Fonctionnalités avancées VSCode.dev :**
- [Documentation VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – Guide complet sur l’édition web
- [GitHub Codespaces](https://docs.github.com/en/codespaces) – Environnements de développement dans le cloud
**Bonnes pratiques de développement web :**
- **Responsive Design** : Étudiez CSS Grid et Flexbox pour des mises en page modernes
- **Accessibilité** : Apprenez les directives WCAG pour une conception web inclusive
- **Performance** : Explorez des outils comme Lighthouse pour l’optimisation
- **SEO** : Comprenez les fondamentaux du référencement
**Développement professionnel :**
- **Création de portfolio** : Créez des projets supplémentaires pour montrer des compétences diverses
- **Open Source** : Contribuez à des projets existants pour acquérir de l’expérience en collaboration
- **Réseautage** : Partagez votre site CV dans les communautés de développeurs pour obtenir des retours
- **Apprentissage continu** : Restez à jour avec les tendances et technologies du développement web
---
Lisez-en davantage sur [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) et certaines de ses autres fonctionnalités.
**Vos prochaines étapes :** Partagez votre site CV avec des amis, la famille ou des mentors pour obtenir des retours. Utilisez leurs suggestions pour itérer et améliorer votre design. N’oubliez pas, ce projet n’est pas seulement un CV – c’est une démonstration de votre progression en tant que développeur web !
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de faire appel à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforçons d’assurer l’exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour des informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
Visitez la documentation interactive de l'API à l'adresse : `http://localhost:5000/docs`
## Lancer le frontend
Assurez-vous d'être dans le dossier frontend.
Assurez-vous d'être dans le dossier frontend
Localisez *app.js*, changez `BASE_URL` pour l'URL de votre backend.
Localisez *app.js*, changez `BASE_URL` par l'URL de votre backend
Lancez-le
@ -44,11 +52,13 @@ npx http-server -p 8000
Essayez de taper un message dans le chat, vous devriez voir une réponse (à condition que vous exécutiez cela dans un Codespace ou que vous ayez configuré un jeton d'accès).
## Configurer un jeton d'accès (si vous n'exécutez pas cela dans un Codespace)
## Configuration du jeton d'accès (si vous n'exécutez pas cela dans un Codespace)
Voir [Configurer un PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous ne saurions être tenus responsables des malentendus ou des mauvaises interprétations résultant de l’utilisation de cette traduction.
Apprenez les bases du développement web avec notre cours complet de 12 semaines proposé par les Microsoft Cloud Advocates. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques tels que des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, des discussions et des exercices pratiques. Améliorez vos compétences et optimisez votre apprentissage grâce à notre pédagogie basée sur les projets. Commencez votre aventure de codage dès aujourd'hui !
Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines animé par les Microsoft Cloud Advocates. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques tels que des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, discussions et exercices pratiques. Améliorez vos compétences et optimisez votre rétention des connaissances grâce à notre pédagogie basée sur des projets efficaces. Commencez votre aventure de codage dès aujourd'hui !
Rejoignez la communauté Discord Azure AI Foundry
Rejoignez la communauté Discord Azure AI Foundry
[](https://discord.com/invite/ByRwuEEgH4)
Suivez ces étapes pour commencer à utiliser ces ressources :
1. **Forkez le dépôt** : Cliquez sur [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clonez le dépôt** :`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Rejoignez le Discord Azure AI Foundry et rencontrez des experts et d'autres développeurs**](https://discord.com/invite/ByRwuEEgH4)
Suivez ces étapes pour commencer à utiliser ces ressources :
1. **Forkez le Dépôt** : Cliquez sur [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clonez le Dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Rejoignez le Discord Azure AI Foundry et rencontrez des experts et d’autres développeurs**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Support multilingue
### 🌐 Support Multilingue
#### Supporté via GitHub Action (Automatisé et toujours à jour)
#### Pris en charge via GitHub Action (Automatisé & Toujours à jour)
> Ce dépôt inclut plus de 50 traductions de langues ce qui augmente significativement la taille du téléchargement. Pour cloner sans les traductions, utilisez le sparse checkout :
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Cela vous fournit tout ce dont vous avez besoin pour suivre le cours avec un téléchargement beaucoup plus rapide.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Si vous souhaitez ajouter des langues supplémentaires, les langues prises en charge sont listées [ici](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Si vous souhaitez que des langues supplémentaires soient prises en charge, elles sont listées [ici](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Êtes-vous étudiant ?_
Visitez la [**page Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) où vous trouverez des ressources pour débutants, des packs étudiants et même des moyens d’obtenir un bon pour un certificat gratuit. C’est la page à mettre en favoris et à consulter régulièrement car nous mettons à jour le contenu chaque mois.
### 📣 Annonce - Nouveaux défis en mode GitHub Copilot Agent à compléter !
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
Nouveau défi ajouté, cherchez « GitHub Copilot Agent Challenge 🚀 » dans la plupart des chapitres. C’est un nouveau défi à réaliser en utilisant GitHub Copilot et le mode Agent. Si vous n’avez jamais utilisé le mode Agent auparavant, il peut non seulement générer du texte mais aussi créer et modifier des fichiers, exécuter des commandes, et plus encore.
#### 🧑🎓 _Vous êtes étudiant ?_
### 📣 Annonce - _Nouveau projet à construire avec l’IA Générative_
Visitez [**la page Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) où vous trouverez des ressources pour débutants, des packs étudiants et même des moyens d'obtenir un bon pour une certification gratuite. C'est une page à mettre en favori et à consulter régulièrement, car le contenu est mis à jour chaque mois.
Nouveau projet Assistant IA vient d’être ajouté, découvrez le [projet](./9-chat-project/README.md)
### 📣 Annonce - _Nouveau projet à construire avec l'IA générative_
### 📣 Annonce - _Nouveau programme_ sur l’IA Générative pour JavaScript vient d’être lancé
Un nouveau projet d'assistant IA vient d'être ajouté, découvrez-le [ici](./09-chat-project/README.md)
Ne manquez pas notre nouveau programme IA Générative !
### 📣 Annonce - _Nouveau programme_ sur l'IA générative pour JavaScript vient d'être publié
Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !
Ne manquez pas notre nouveau programme sur l'IA générative !
Chaque leçon inclut un devoir à compléter, un contrôle des connaissances et un défi pour vous guider dans l’apprentissage de sujets comme :
- La formulation et l’ingénierie des invites
- La génération d’applications texte et image
- Les applications de recherche
Chaque leçon inclut un exercice à réaliser, une vérification des connaissances et un défi pour vous guider dans l'apprentissage de sujets tels que :
- La création de prompts et l'ingénierie des prompts
- La génération d'applications de texte et d'images
- Les applications de recherche
Visitez [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pour commencer !
Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !
## 🌱 Pour commencer
> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur la façon d'utiliser ce programme. Nous aimerions avoir vos retours [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !
## 🌱 Pour commencer
**[Apprenants](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pour chaque leçon, commencez par un quiz préliminaire et poursuivez en lisant le contenu de la leçon, en réalisant les différentes activités et en vérifiant votre compréhension avec le quiz final.
> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur la façon d’utiliser ce programme. Nous serions ravis d’avoir vos retours [sur notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !
Pour enrichir votre expérience d'apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées dans notre [forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) où notre équipe de modérateurs sera disponible pour répondre à vos questions.
**[Apprenants](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pour chaque leçon, commencez par un quiz pré-conférence puis suivez avec la lecture du matériel, réalisez les différentes activités et vérifiez votre compréhension avec le quiz post-conférence.
Pour approfondir votre éducation, nous vous recommandons vivement d'explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des matériaux d'étude supplémentaires.
Pour améliorer votre expérience d’apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées dans notre [forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) où notre équipe de modérateurs sera disponible pour répondre à vos questions.
### 📋 Configuration de votre environnement
Pour approfondir votre formation, nous recommandons fortement d’explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour du matériel d’étude complémentaire.
Ce programme dispose d'un environnement de développement prêt à l'emploi ! Lorsque vous commencez, vous pouvez choisir de suivre le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement basé sur le navigateur, sans installation nécessaire_), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
### 📋 Configuration de votre environnement
#### Créez votre dépôt
Pour sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce dépôt. Vous pouvez le faire en cliquant sur le bouton **Use this template** en haut de la page. Cela créera un nouveau dépôt dans votre compte GitHub avec une copie du programme.
Ce programme dispose d’un environnement de développement prêt à l’emploi ! Au démarrage, vous pouvez choisir d’exécuter le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement basé sur navigateur sans installation nécessaire_), ou localement sur votre ordinateur en utilisant un éditeur de texte comme [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Suivez ces étapes :
1. **Forkez le dépôt** : Cliquez sur le bouton "Fork" en haut à droite de cette page.
2. **Clonez le dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Créez votre dépôt
Pour sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce dépôt. Vous pouvez le faire en cliquant sur le bouton **Utiliser ce modèle** en haut de la page. Cela créera un nouveau dépôt dans votre compte GitHub avec une copie du programme.
#### Exécuter le programme dans un Codespace
Suivez ces étapes :
1. **Forkez le Dépôt** : Cliquez sur le bouton « Fork » en haut à droite de cette page.
2. **Clonez le Dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Dans votre copie de ce dépôt que vous avez créée, cliquez sur le bouton **Code** et sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace pour travailler.
Dans votre copie de ce dépôt que vous avez créée, cliquez sur le bouton **Code** et sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace pour que vous puissiez y travailler.
#### Exécuter le programme localement sur votre ordinateur
Pour exécuter ce programme localement sur votre ordinateur, vous aurez besoin d'un éditeur de texte, d'un navigateur et d'un outil de ligne de commande. Notre première leçon, [Introduction aux langages de programmation et outils de travail](../../1-getting-started-lessons/1-intro-to-programming-languages), vous guidera à travers les différentes options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.
#### Exécuter le programme localement sur votre ordinateur
Nous recommandons d'utiliser [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui dispose également d'un [Terminal intégré](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Vous pouvez télécharger Visual Studio Code [ici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Pour exécuter ce programme localement sur votre ordinateur, vous aurez besoin d’un éditeur de texte, d’un navigateur et d’un outil en ligne de commande. Notre première leçon, [Introduction aux langages de programmation et outils du métier](../../1-getting-started-lessons/1-intro-to-programming-languages), vous guidera à travers les différentes options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.
1. Clonez votre dépôt sur votre ordinateur. Vous pouvez le faire en cliquant sur le bouton **Code** et en copiant l'URL :
Nous recommandons l’utilisation de [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui dispose aussi d’un [Terminal intégré](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Vous pouvez télécharger Visual Studio Code [ici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
[CodeSpace](./images/createcodespace.png)
Ensuite, ouvrez [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dans [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) et exécutez la commande suivante, en remplaçant `<your-repository-url>` par l'URL que vous venez de copier :
1. Clonez votre dépôt sur votre ordinateur. Vous pouvez faire cela en cliquant sur le bouton **Code** et en copiant l’URL :
[CodeSpace](./images/createcodespace.png)
Ensuite, ouvrez [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dans [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) et exécutez la commande suivante, en remplaçant `<your-repository-url>` par l’URL que vous venez de copier :
```bash
git clone <your-repository-url>
```
2. Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur **File** > **Open Folder** et en sélectionnant le dossier que vous venez de cloner.
> Extensions recommandées pour Visual Studio Code :
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML dans Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pour vous aider à écrire du code plus rapidement
## 📂 Chaque leçon inclut :
- un croquis optionnel
- une vidéo complémentaire optionnelle
- un quiz d'échauffement avant la leçon
- leçon écrite
- pour les leçons basées sur des projets, des guides étape par étape pour construire le projet
> **Une note sur les quiz** : Tous les quiz sont contenus dans le dossier Quiz-app, 48 quiz au total, chacun composé de trois questions. Ils sont disponibles [ici](https://ff-quizzes.netlify.app/web/). L'application de quiz peut être exécutée localement ou déployée sur Azure ; suivez les instructions dans le dossier `quiz-app`.
2. Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur **Fichier** > **Ouvrir un dossier** et en sélectionnant le dossier que vous venez de cloner.
> Extensions Visual Studio Code recommandées :
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML dans Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pour vous aider à coder plus rapidement
## 📂 Chaque leçon inclut :
- sketchnote optionnel
- vidéo supplémentaire optionnelle
- quiz d’échauffement avant la leçon
- leçon écrite
- pour les leçons basées sur un projet, guides étape par étape pour réaliser le projet
> **Une note à propos des quiz** : Tous les quiz se trouvent dans le dossier Quiz-app, au total 48 quiz de trois questions chacun. Ils sont disponibles [ici](https://ff-quizzes.netlify.app/web/) ; l’application quiz peut être exécutée localement ou déployée sur Azure ; suivez les instructions dans le dossier `quiz-app`.
| | Nom du projet | Concepts enseignés | Objectifs d'apprentissage | Leçon liée | Auteur |
| 01 | Premiers pas | Introduction à la programmation et aux outils du métier | Apprenez les bases communes à la plupart des langages de programmation et découvrez les logiciels qui aident les développeurs professionnels dans leur travail | [Introduction aux langages de programmation et aux outils du métier](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Premiers pas | Bases de GitHub, y compris le travail en équipe | Comment utiliser GitHub dans votre projet et collaborer avec d'autres sur une base de code | [Introduction à GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Premiers pas | Accessibilité | Apprenez les bases de l'accessibilité web | [Fondamentaux de l'accessibilité](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Bases JS | Types de données en JavaScript | Les bases des types de données en JavaScript | [Types de données](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Bases JS | Fonctions et méthodes | Apprenez les fonctions et méthodes pour gérer le flux logique d'une application | [Fonctions et méthodes](./2-js-basics/2-functions-methods/README.md) | Jasmine et Christopher |
| 06 | Bases JS | Prendre des décisions avec JS | Apprenez à créer des conditions dans votre code en utilisant des méthodes de prise de décision | [Prendre des décisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Bases JS | Tableaux et boucles | Travaillez avec des données en utilisant des tableaux et des boucles en JavaScript | [Tableaux et boucles](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML en pratique | Construisez le HTML pour créer un terrarium en ligne, en vous concentrant sur la création d'une mise en page | [Introduction au HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS en pratique | Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS, y compris rendre la page responsive | [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Fermetures JavaScript, manipulation du DOM | Construisez le JavaScript pour faire fonctionner le terrarium comme une interface de glisser-déposer, en vous concentrant sur les fermetures et la manipulation du DOM | [Fermetures JavaScript, manipulation du DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jeu de dactylographie](./4-typing-game/solution/README.md) | Construire un jeu de dactylographie | Apprenez à utiliser les événements clavier pour piloter la logique de votre application JavaScript | [Programmation événementielle](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extension de navigateur écologique](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Apprenez comment fonctionnent les navigateurs, leur histoire, et comment créer les premiers éléments d'une extension de navigateur | [À propos des navigateurs](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extension de navigateur écologique](./5-browser-extension/solution/README.md) | Construire un formulaire, appeler une API et stocker des variables dans le stockage local | Construisez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées dans le stockage local | [APIs, formulaires et stockage local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extension de navigateur écologique](./5-browser-extension/solution/README.md) | Processus en arrière-plan dans le navigateur, performance web | Utilisez les processus en arrière-plan du navigateur pour gérer l'icône de l'extension ; apprenez la performance web et quelques optimisations à réaliser | [Tâches en arrière-plan et performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu spatial](./6-space-game/solution/README.md) | Développement de jeu avancé avec JavaScript | Apprenez l'héritage en utilisant à la fois les classes et la composition, ainsi que le modèle Pub/Sub, en préparation à la création d'un jeu | [Introduction au développement de jeu avancé](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu spatial](./6-space-game/solution/README.md) | Dessiner sur le canvas | Apprenez à utiliser l'API Canvas, utilisée pour dessiner des éléments à l'écran | [Dessiner sur le canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jeu spatial](./6-space-game/solution/README.md) | Déplacer des éléments sur l'écran | Découvrez comment les éléments peuvent acquérir du mouvement en utilisant les coordonnées cartésiennes et l'API Canvas | [Déplacer des éléments](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu spatial](./6-space-game/solution/README.md) | Détection de collision | Faites en sorte que les éléments entrent en collision et réagissent entre eux en utilisant les touches et fournissez une fonction de cooldown pour assurer la performance du jeu | [Détection de collision](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu spatial](./6-space-game/solution/README.md) | Compter les points | Effectuez des calculs mathématiques basés sur l'état et la performance du jeu | [Compter les points](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu spatial](./6-space-game/solution/README.md) | Terminer et redémarrer le jeu | Apprenez à terminer et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les valeurs des variables | [Condition de fin](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Application bancaire](./7-bank-project/solution/README.md) | Modèles HTML et routes dans une application web | Apprenez à créer la structure de l'architecture d'un site web multipage en utilisant le routage et les modèles HTML | [Modèles HTML et routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](./7-bank-project/solution/README.md) | Construire un formulaire de connexion et d'inscription | Apprenez à construire des formulaires et à gérer les routines de validation | [Formulaires](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Application bancaire](./7-bank-project/solution/README.md) | Méthodes de récupération et d'utilisation des données | Comment les données circulent dans et hors de votre application, comment les récupérer, les stocker et les supprimer | [Données](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](./7-bank-project/solution/README.md) | Concepts de gestion d'état | Apprenez comment votre application conserve son état et comment le gérer de manière programmatique | [Gestion d'état](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Code dans le navigateur/VScode](../../8-code-editor) | Travailler avec VScode | Apprenez à utiliser un éditeur de code | [Utiliser l'éditeur de code VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistants IA](./9-chat-project/README.md) | Travailler avec l'IA | Apprenez à construire votre propre assistant IA | [Projet Assistant IA](./9-chat-project/README.md) | Chris |
## 🗃️ Leçons
## 🏫 Pédagogie
| | Nom du projet | Concepts enseignés | Objectifs d’apprentissage | Leçon liée | Auteur |
| 01 | Premiers pas | Introduction à la programmation et outils du métier | Apprendre les bases communes à la plupart des langages de programmation et sur les logiciels qui aident les développeurs pro à faire leur travail | [Introduction aux langages de programmation et outils du métier](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Premiers pas | Bases de GitHub, y compris le travail en équipe | Comment utiliser GitHub dans votre projet, comment collaborer avec d’autres sur une base de code | [Introduction à GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Premiers pas | Accessibilité | Apprendre les bases de l’accessibilité web | [Fondamentaux de l’accessibilité](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Bases JS | Types de données JavaScript | Les bases des types de données en JavaScript | [Types de données](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Bases JS | Fonctions et méthodes | Apprendre à utiliser les fonctions et méthodes pour gérer le flux logique d’une application | [Fonctions et méthodes](./2-js-basics/2-functions-methods/README.md) | Jasmine et Christopher |
| 06 | Bases JS | Prise de décision avec JS | Apprendre à créer des conditions dans votre code avec des méthodes de prise de décision | [Prise de décision](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Bases JS | Tableaux et boucles | Travailler avec des données en utilisant tableaux et boucles en JavaScript | [Tableaux et boucles](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML en pratique | Construire le HTML pour créer un terrarium en ligne, en se concentrant sur la création d’une mise en page | [Introduction au HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS en pratique | Construire le CSS pour styliser le terrarium en ligne, avec les bases du CSS et rendre la page responsive | [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, manipulation du DOM | Écrire le JavaScript pour faire fonctionner le terrarium avec une interface glisser/déposer, en se concentrant sur les closures et la manipulation du DOM | [Closures en JavaScript, manipulation du DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jeu de saisie](./4-typing-game/solution/README.md) | Créer un jeu de saisie | Apprendre à utiliser les événements clavier pour piloter la logique de votre application JavaScript | [Programmation événementielle](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extension navigateur verte](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Comprendre comment fonctionnent les navigateurs, leur histoire, et comment structurer les premiers éléments d’une extension navigateur | [À propos des navigateurs](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extension navigateur verte](./5-browser-extension/solution/README.md) | Créer un formulaire, appeler une API et stocker des variables en local | Construire les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées localement | [APIs, formulaires et stockage local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extension navigateur verte](./5-browser-extension/solution/README.md) | Processus en arrière-plan dans le navigateur, performance web | Utiliser les processus en arrière-plan du navigateur pour gérer l’icône de l’extension ; apprendre la performance web et quelques optimisations | [Tâches en arrière-plan et performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu spatial](./6-space-game/solution/README.md) | Développement de jeux avancé avec JavaScript | Apprendre l’héritage utilisant Classes et Composition ainsi que le patron Pub/Sub, en préparation de la création d’un jeu | [Introduction au développement avancé de jeux](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu spatial](./6-space-game/solution/README.md) | Dessin sur canvas | Découvrir l’API Canvas, utilisée pour dessiner des éléments à l’écran | [Dessiner sur Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jeu spatial](./6-space-game/solution/README.md) | Déplacement d’éléments à l’écran | Découvrir comment les éléments peuvent être animés en coordonnées cartésiennes avec l’API Canvas | [Déplacement des éléments](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu spatial](./6-space-game/solution/README.md) | Détection de collision | Faire en sorte que les éléments entrent en collision et réagissent aux appuis de touches, avec une fonction temps de récupération pour garantir la performance du jeu | [Détection de collision](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu spatial](./6-space-game/solution/README.md) | Tenue du score | Effectuer des calculs mathématiques basés sur l’état et la performance du jeu | [Tenue du score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu spatial](./6-space-game/solution/README.md) | Fin et redémarrage du jeu | Apprendre à terminer et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les variables | [La condition de fin](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Application bancaire](./7-bank-project/solution/README.md) | Modèles HTML et routage dans une application web | Apprendre à créer la structure d’un site multipage avec routage et modèles HTML | [Modèles HTML et routage](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](./7-bank-project/solution/README.md) | Créer un formulaire de connexion et d’inscription | Apprendre à créer des formulaires et gérer les routines de validation | [Formulaires](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Application bancaire](./7-bank-project/solution/README.md) | Méthodes de récupération et d’utilisation des données | Comprendre comment les données entrent et sortent de votre application, comment les récupérer, stocker et supprimer | [Données](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](./7-bank-project/solution/README.md) | Concepts de gestion d’état | Apprendre comment votre application conserve l’état et comment le gérer par programmation | [Gestion d’état](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Code navigateur/VScode](../../8-code-editor) | Travailler avec VScode | Apprendre à utiliser un éditeur de code | [Utiliser l’éditeur de code VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistants IA](./9-chat-project/README.md) | Travailler avec l’IA | Apprendre à créer votre propre assistant IA | [Projet assistant IA](./9-chat-project/README.md) | Chris |
Notre programme est conçu autour de deux principes pédagogiques clés :
* apprentissage basé sur les projets
* quiz fréquents
## 🏫 Pédagogie
Le programme enseigne les fondamentaux de JavaScript, HTML et CSS, ainsi que les outils et techniques les plus récents utilisés par les développeurs web d'aujourd'hui. Les étudiants auront l'opportunité de développer une expérience pratique en construisant un jeu de dactylographie, un terrarium virtuel, une extension de navigateur écologique, un jeu de type Space Invaders et une application bancaire pour entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.
Notre programme est conçu autour de deux principes pédagogiques clés :
* apprentissage par projet
* quiz fréquents
> 🎓 Vous pouvez suivre les premières leçons de ce programme sous forme de [parcours d'apprentissage](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sur Microsoft Learn !
Le programme enseigne les fondamentaux de JavaScript, HTML et CSS, ainsi que les outils et techniques les plus récents utilisés par les développeurs web d’aujourd’hui. Les étudiants auront l’opportunité de développer une expérience pratique en créant un jeu de saisie, un terrarium virtuel, une extension de navigateur écologique, un jeu de type space-invader et une application bancaire pour les entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.
En veillant à ce que le contenu soit aligné avec les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est augmentée. Nous avons également écrit plusieurs leçons introductives sur les bases de JavaScript pour introduire les concepts, accompagnées d'une vidéo de la collection "[Série pour débutants : JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" de tutoriels vidéo, dont certains auteurs ont contribué à ce programme.
> 🎓 Vous pouvez suivre les premières leçons de ce programme comme un [Parcours d’apprentissage](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sur Microsoft Learn !
De plus, un quiz à faible enjeu avant un cours fixe l'intention de l'étudiant vers l'apprentissage d'un sujet, tandis qu'un deuxième quiz après le cours assure une meilleure rétention. Ce programme a été conçu pour être flexible et amusant et peut être suivi en totalité ou en partie. Les projets commencent petits et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
En veillant à ce que le contenu soit aligné avec les projets, le processus est rendu plus engageant pour les étudiants et la rétention des concepts sera renforcée. Nous avons également rédigé plusieurs leçons d’introduction aux bases de JavaScript pour présenter les concepts, accompagnées d’une vidéo de la collection de tutoriels vidéo « [Série Débutants pour : JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon) », dont certains auteurs ont contribué à ce programme.
Bien que nous ayons délibérément évité d'introduire des frameworks JavaScript pour nous concentrer sur les compétences de base nécessaires en tant que développeur web avant d'adopter un framework, une bonne étape suivante après avoir terminé ce programme serait d'apprendre Node.js via une autre collection de vidéos : "[Série pour débutants : Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
De plus, un quiz peu exigeant avant une classe établit l’intention de l’étudiant envers l’apprentissage d’un sujet, tandis qu’un deuxième quiz après la classe assure une meilleure rétention. Ce programme a été conçu pour être flexible et amusant et peut être suivi en totalité ou en partie. Les projets débutent petits et deviennent progressivement plus complexes à la fin du cycle de 12 semaines.
> Consultez notre [Code de conduite](CODE_OF_CONDUCT.md) et nos directives de [contribution](CONTRIBUTING.md). Nous accueillons vos retours constructifs !
Bien que nous ayons délibérément évité d’introduire des frameworks JavaScript pour nous concentrer sur les compétences de base nécessaires pour un développeur web avant d’adopter un framework, une bonne prochaine étape pour compléter ce programme serait d’apprendre Node.js via une autre collection de vidéos : « [Série Débutants pour : Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon) ».
## 🧭 Accès hors ligne
> Consultez nos [Règles de conduite](CODE_OF_CONDUCT.md) et [Contribuer](CONTRIBUTING.md). Nous accueillons vos retours constructifs !
Vous pouvez exécuter cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Forkez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site web sera servi sur le port 3000 de votre localhost : `localhost:3000`.
## 📘 PDF
## 🧭 Accès hors ligne
Un PDF de toutes les leçons est disponible [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Vous pouvez consulter cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Forkez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site sera servi sur le port 3000 sur votre localhost : `localhost:3000`.
## 🎒 Autres cours
## 📘 PDF
Notre équipe produit d'autres cours ! Découvrez :
Un PDF de toutes les leçons est disponible [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
- [MCP pour débutants](https://aka.ms/mcp-for-beginners)
- [IA Edge pour débutants](https://aka.ms/edgeai-for-beginners)
- [Agents IA pour débutants](https://aka.ms/ai-agents-beginners)
- [IA générative pour débutants .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [IA générative avec JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [IA générative avec Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
- [IA pour débutants](https://aka.ms/ai-beginners)
- [Science des données pour débutants](https://aka.ms/datascience-beginners)
- [ML pour débutants](https://aka.ms/ml-beginners)
- [Cybersécurité pour débutants](https://github.com/microsoft/Security-101)
- [Développement web pour débutants](https://aka.ms/webdev-beginners)
- [IoT pour débutants](https://aka.ms/iot-beginners)
- [Développement XR pour les débutants](https://github.com/microsoft/xr-development-for-beginners)
- [Maîtriser GitHub Copilot pour une utilisation agentique](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Maîtriser GitHub Copilot pour les développeurs C#/.NET](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Choisissez votre propre aventure avec Copilot](https://github.com/microsoft/CopilotAdventures)
## Obtenir de l'aide
## 🎒 Autres Cours
Notre équipe produit d'autres cours ! Découvrez :
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série IA générative
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Si vous êtes bloqué ou avez des questions sur la création d'applications IA, rejoignez :
Si vous êtes bloqué ou avez des questions sur la création d'applications IA. Rejoignez d'autres apprenants et développeurs expérimentés pour discuter de MCP. C'est une communauté bienveillante où les questions sont les bienvenues et où le savoir est partagé librement.
[](https://aka.ms/foundry/discord)
Si vous avez des retours sur le produit ou rencontrez des erreurs lors de la création, visitez :
Si vous avez des retours sur le produit ou rencontrez des erreurs lors de la création, rendez-vous sur :
[](https://aka.ms/foundry/forum)
Ce dépôt est sous licence MIT. Consultez le fichier [LICENSE](../../LICENSE) pour plus d'informations.
Ce dépôt est sous licence MIT. Voir le fichier [LICENSE](../../LICENSE) pour plus d'informations.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des imprécisions. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
Сегодня мы изучим невероятные инструменты, которые делают современную веб-разработку не только возможной, но и по-настоящему увлекательной. Я говорю о тех же редакторах, браузерах и рабочих процессах, которые разработчики Netflix, Spotify и твоей любимой студии приложений используют каждый день. И вот что заставит тебя пуститься в пляс от радости: большинство этих профессиональных инструментов, которые являются стандартом в индустрии, абсолютно бесплатны!
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Мы пройдем этот путь вместе, шаг за шагом. Без спешки, без давления – только ты, я и несколько действительно крутых инструментов, которые скоро станут твоими лучшими друзьями!
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ flowchart TD
✅ Хороший способ найти репозитории, подходящие для новичков, – [искать по тегу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Существует несколько способов копирования кода. Один из них – "клонировать" содержимое репозитория, используя HTTPS, SSH или GitHub CLI (Command Line Interface).
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, или язык гипертекстовой разметки, является основой каждого веб-сайта, который вы когда-либо посещали. Представьте HTML как скелет, который придает структуру веб-страницам – он определяет, где размещается контент, как он организован и что представляет собой каждый элемент. В то время как CSS позже "оденет" ваш HTML в цвета и макеты, а JavaScript оживит егос помощью интерактивности, HTML обеспечивает основную структуру, которая делает все остальное возможным.
@ -88,7 +88,7 @@ mindmap
4. В панели Explorer нажмите на значок "New File"
5. Назовите файл `index.html`
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Помните, как ваш HTML-террариум выглядел довольно просто? С помощью CSS мы преобразуем эту простую структуру в нечто визуально привлекательное.
@ -205,7 +205,7 @@ body {
Откройте инструменты разработчика вашего браузера (F12), перейдите на вкладку "Элементы" и проверьте ваш элемент `<h1>`. Вы увидите, что он наследует семейство шрифтов от body:
✅ **Время эксперимента**: Попробуйте установить другие наследуемые свойства для `<body>`, такие как `color`, `line-height` или `text-align`. Что происходит с вашим заголовком и другими элементами?
@ -599,7 +599,7 @@ flowchart LR
Вы создадите тонкие блики, которые имитируют отражение света на стеклянных поверхностях. Этот подход похож на то, как художники эпохи Возрождения, такие как Ян ван Эйк, использовали свет и отражение, чтобы сделать изображенное стекло трехмерным. Вот к чему вы стремитесь:
> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac)
Добро пожаловать в одну из самых увлекательных частей веб-разработки — создание интерактивности! Document Object Model (DOM) — это мост между вашим HTML и JavaScript, и сегодня мы используем его, чтобы оживить ваш террариум. Когда Тим Бернерс-Ли создал первый веб-браузер, он представлял себе веб, где документы могли быть динамичными и интерактивными — DOM делает эту мечту реальностью.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
> Представление DOM и HTML-разметки, которая на него ссылается. Автор [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Понимание замыканий**: Замыкания — это значимая тема в JavaScript, и многие разработчики используют их годами, прежде чем полностью понять все теоретические аспекты. Сегодня мы сосредоточимся на практическом применении — вы увидите, как замыкания естественным образом возникают при создании наших интерактивных функций. Понимание будет развиваться по мере того, как вы увидите, как они решают реальные задачи.
> Представление DOM и HTML-разметки, которая на него ссылается. Автор [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ function stopElementDrag() {
- **Поддержка разных устройств**: Работает на компьютерах и мобильных устройствах
- **Забота о производительности**: Нет утечек памяти или лишних расчетов
# Мой террариум: проект для изучения HTML, CSS и работы с DOM с использованием JavaScript 🌵🌱
## Разверните ваш Terrarium
Небольшая медитация с перетаскиванием элементов. С помощью немного HTML, JS и CSS вы сможете создать веб-интерфейс, стилизовать его и добавить множество взаимодействий на ваш выбор.
3. [Введение в DOM и замыкания в JS](./3-intro-to-DOM-and-closures/README.md)
## Благодарности
Написано с ♥️ [Джен Лупер](https://www.twitter.com/jenlooper)
Террариум, созданный с помощью CSS, был вдохновлен стеклянной банкой от Якоба Мандры [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
Иллюстрации нарисованы вручную [Джен Лупер](http://jenlooper.com) с помощью Procreate.
## Разверните ваш террариум
Вы можете развернуть или опубликовать ваш террариум в интернете, используя Azure Static Web Apps.
Вы можете развернуть или опубликовать ваш Terrarium в Интернете с помощью **Azure Static Web Apps**.
1. Сделайте форк этого репозитория
2. Нажмите эту кнопку
2. Нажмите эту кнопку 👇
[](https://portal.azure.com/#create/Microsoft.StaticApp)
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
3. Следуйте мастеру настройки, чтобы создать ваше приложение.
- Установите **App root** в `/solution` или в корень вашей кодовой базы.
- В этом приложении нет API, поэтому настройку API можно пропустить.
- Папка `.github` будет создана автоматически, чтобы помочь Azure Static Web Apps собрать и опубликовать ваше приложение.
3. Пройдите через мастер создания вашего приложения. Убедитесь, что вы установили корень приложения на `/solution` или корень вашей кодовой базы. В этом приложении нет API, так что об этом можно не беспокоиться. В вашем форкнутом репозитории будет создана папка github, которая поможет сервисам сборки Azure Static Web Apps собрать и опубликовать ваше приложение на новом URL.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.
Этот документ был переведен с помощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, пожалуйста, учитывайте, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на языке оригинала считается официальным и достоверным источником. Для критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие вследствие использования этого перевода.
Небольшая медитация с перетаскиванием элементов. С помощью немного HTML, JS и CSS вы можете создать веб-интерфейс, стилизовать его и добавить интерактивность.
> Некоторые из первых браузеров, фото от [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Как браузеры обрабатывают веб-контент
@ -198,7 +198,7 @@ quadrantChart
Понимание процесса установки расширений помогает предвидеть пользовательский опыт при установке вашего расширения. Процесс установки стандартизирован во всех современных браузерах, с небольшими различиями в дизайне интерфейса.
> **Важно**: Убедитесь, что включен режим разработчика и разрешена установка расширений из других магазинов при тестировании ваших собственных расширений.
@ -313,10 +313,10 @@ project-root/
### Обзор экранов расширения
**Экран настройки** - Конфигурация для первого использования:
**Экран результатов** - Отображение данных углеродного следа:
> ⚠️ **Соображения безопасности**: В производственных приложениях хранение ключей API в LocalStorage представляет собой риск для безопасности, так как JavaScript может получить доступ к этим данным. Для учебных целей этот подход подходит, но в реальных приложениях следует использовать безопасное серверное хранилище для конфиденциальных данных.
Попробуйте это. Откройте любой сайт (например, Microsoft.com) и нажмите кнопку "Запись". Затем обновите страницу и наблюдайте, как профайлер фиксирует всё, что происходит. Когда вы остановите запись, вы увидите подробный анализ того, как браузер "скриптует", "рендерит" и "рисует" сайт. Это напоминает, как центр управления полётами отслеживает каждую систему во время запуска ракеты — вы получаете данные в реальном времени о том, что происходит и когда.
✅ [Документация Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) содержит множество подробностей, если вы хотите углубиться.
@ -136,11 +136,11 @@ flowchart LR
Получите снимок производительности вашей страницы, выбрав часть временной шкалы профиля и посмотрев на панель сводки:
Проверьте панель журнала событий, чтобы увидеть, заняло ли какое-либо событие больше 15 мс:
✅ Ознакомьтесь с профайлером! Откройте инструменты разработчика на этом сайте и посмотрите, есть ли узкие места. Какой ресурс загружается дольше всего? Какой быстрее?
Используя API C02 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, чтобы получать напоминания прямо в браузере о том, насколько интенсивно используется электроэнергия в вашем регионе. Использование этого расширения в повседневной жизни поможет вам принимать решения о своих действиях, основываясь на этой информации.
Чтобы установить расширение в браузер Edge, используйте меню с «тремя точками» в правом верхнем углу браузера, чтобы найти панель расширений. Там выберите «Загрузить распакованное», чтобы загрузить новое расширение. На запрос откройте папку 'dist', и расширение будет загружено. Для использования вам потребуется API-ключ для API CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — введите ваш email в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [Electricity Map](https://www.electricitymap.org/map) (например, в Бостоне я использую 'US-NEISO').
После ввода API-ключа и региона в интерфейс расширения, цветная точка в панели расширений браузера должна измениться, отражая уровень потребления энергии в вашем регионе, и дать вам подсказку о том, какие энергоемкие действия будут уместны. Концепция этой системы «точек» была вдохновлена расширением [Energy Lollipop](https://energylollipop.com/) для выбросов в Калифорнии.
Используя API C02 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, чтобы вы могли получать напоминания прямо в браузере о потреблении электроэнергии в вашем регионе. Использование этого расширения поможет вам принимать решения о своих действиях, основываясь на этих данных.
Для установки в Edge используйте меню с "тремя точками" в правом верхнем углу браузера, чтобы найти панель "Расширения". Оттуда выберите "Загрузить распакованное расширение", чтобы добавить новое расширение. В появившемся окне выберите папку 'dist', и расширение будет загружено. Для использования вам понадобится API-ключ для API CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — введите ваш адрес электронной почты в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [Картам электроэнергии](https://www.electricitymap.org/map) (например, для Бостона я использую 'US-NEISO').
После того как API-ключ и регион будут введены в интерфейсе расширения, цветная точка в панели расширений браузера должна измениться, чтобы отразить потребление энергии в вашем регионе. Это даст вам индикатор, который поможет определить, какие энергозатратные действия лучше выполнять в данный момент. Концепция этой системы "точек" была вдохновлена [расширением Energy Lollipop](https://energylollipop.com/) для калифорнийских выбросов.
Используя API CO2 Signal от tmrow для отслеживания потребления электроэнергии, создается браузерное расширение, которое напоминает вам о том, насколько интенсивно используется электроэнергия в вашем регионе. Использование этого расширения поможет вам принимать решения о своих действиях на основе этой информации.
Чтобы установить в Edge, используйте меню с "тремя точками" в правом верхнем углу браузера, чтобы найти панель расширений. Оттуда выберите "Загрузить распакованное" для добавления нового расширения. В появившемся окне откройте папку "dist", и расширение будет загружено. Для его использования вам понадобится API-ключ CO2 Signal ([получите его по электронной почте здесь](https://www.co2snal.com/) — введите свой email в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones) с [карты электроэнергии](https://www.electricitymap.org/map) (например, для Бостона я использую 'US-NEISO').
После того как API-ключ и регион будут введены в интерфейсе расширения, цветная точка в панели браузера должна измениться, отражая использование энергии в вашем регионе. Это даст вам индикатор, какие энергоемкие действия будут подходящими в данный момент. Концепция этой "точечной" системы была вдохновлена расширением [Energy Lollipop](https://energylollipop.com/) для отслеживания выбросов в Калифорнии.
Мы будем использовать API Signal CO2 от tmrow для мониторинга потребления электроэнергии, чтобы создать расширение для браузера, которое будет напоминать вам о том, насколько интенсивно используется электричество в вашем регионе. Использование этого специального расширения поможет оценить свои действия, основываясь на предоставленной информации.
Чтобы установить расширение в Edge, используйте меню "три точки" в правом верхнем углу браузера, чтобы найти панель "Расширения". Если режим разработчика еще не активирован, включите его (внизу слева). Выберите "Загрузить распакованное", чтобы добавить новое расширение. В появившемся окне выберите папку "dist", и расширение будет загружено. Для использования вам понадобится API-ключ для CO2 Signal (его можно [получить по электронной почте](https://www.co2signal.com/) — введите свой адрес электронной почты в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [электрической карте](https://www.electricitymap.org/map) (например, для Бостона — "US-NEISO").
После того как API-ключ и регион будут введены в интерфейсе расширения, цветная точка на панели расширения браузера должна измениться, отражая уровень потребления энергии в регионе. Она также предоставит рекомендации о том, какие действия с высоким энергопотреблением будут наиболее подходящими в данный момент. Концепция этой системы "точек" была вдохновлена [расширением Energy Lollipop](https://energylollipop.com/) для мониторинга выбросов в Калифорнии.
С помощью API CO2 Signal от tmrow вы можете отслеживать потребление электроэнергии в вашем регионе и отображать напоминание об уровне энергопотребления прямо в браузере. Это расширение позволяет вам принимать решения о своей активности, основываясь на этой информации.
Чтобы установить расширение в Edge, откройте панель «Расширения», которую можно найти в меню «три точки» в правом верхнем углу браузера. Выберите «Load Unpacked» и загрузите новое расширение. В появившемся окне откройте папку «dist», чтобы загрузить расширение. Для использования вам понадобится API-ключ CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — просто введите свой email в поле на странице) и [код региона](http://api.electricitymap.org/v3/zones), соответствующий вашей местности, из [Electricity Map](https://www.electricitymap.org/map) (например, для Бостона используется 'US-NEISO').
После ввода API-ключа и региона в интерфейс расширения цветной индикатор в панели расширений браузера начнет изменяться, отражая уровень энергопотребления в вашем регионе. Это поможет вам понять, какие действия, требующие энергии, наиболее уместны в данный момент. Концепция системы «точек» была вдохновлена расширением [Energy Lollipop](https://energylollipop.com/) для отслеживания выбросов в Калифорнии.
Используя API CO2 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, которое будет предупреждать вас о текущем уровне нагрузки на энергосистему вашего региона. Это расширение поможет вам принимать более осознанные решения о своих действиях, основываясь на этой информации.
## Начало работы
@ -31,7 +31,7 @@ npm run build
Чтобы установить расширение в Edge, используйте меню с «тремя точками» в правом верхнем углу браузера, чтобы открыть панель расширений. Там выберите «Load Unpacked» для загрузки нового расширения. Откройте папку 'dist' по запросу, и расширение будет загружено. Для его использования вам понадобится API-ключ для CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — введите свой адрес электронной почты в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [Electricity Map](https://www.electricitymap.org/map) (например, для Бостона я использую 'US-NEISO').
После того как вы введете API-ключ и код региона в интерфейс расширения, цветная точка на панели расширений браузера будет изменяться, отражая уровень энергопотребления в вашем регионе, и подсказывать вам, какие энергозатратные действия лучше всего выполнять в данный момент. Идея системы «точек» была вдохновлена [расширением браузера Energy Lollipop](https://energylollipop.com/) для Калифорнии.
Используя API CO2 Signal от tmrow для отслеживания потребления электроэнергии, создайте расширение для браузера, чтобы вы могли получать напоминание прямо в браузере о том, насколько интенсивно используется электроэнергия в вашем регионе. Использование этого расширения поможет вам принимать решения о своих действиях, основываясь на этой информации.
Чтобы установить расширение в Edge, используйте меню с «тремя точками» в правом верхнем углу браузера, чтобы открыть панель расширений. Там выберите «Загрузить распакованное», чтобы загрузить новое расширение. В появившемся окне выберите папку 'dist', и расширение загрузится. Для использования вам потребуется API-ключ для API CO2 Signal ([получите его здесь по электронной почте](https://www.co2signal.com/) — введите свой адрес электронной почты в поле на этой странице) и [код вашего региона](http://api.electricitymap.org/v3/zones), соответствующий [Electricity Map](https://www.electricitymap.org/map) (например, в Бостоне я использую 'US-NEISO').
После ввода API-ключа и региона в интерфейс расширения цветная точка в панели расширений браузера должна измениться, чтобы отразить уровень энергопотребления в вашем регионе, и дать вам подсказку о том, какие энергозатратные действия будут уместны. Концепция этой системы «точек» была вдохновлена [расширением Energy Lollipop](https://energylollipop.com/) для отслеживания выбросов в Калифорнии.
> Изображение с [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Чтобы рисовать на элементе canvas, вы будете следовать тому же трехэтапному процессу, который составляет основу всей графики на холсте. Как только вы сделаете это несколько раз, это станет привычным:
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
Готовый результат должен выглядеть так:
- **Система очков**: За каждый уничтоженный вражеский корабль начисляется 100 очков (круглые числа легче воспринимать игрокам). Счет отображается в нижнем левом углу.
- **Счетчик жизней**: Ваш герой начинает с трех жизней — стандарт, установленный ранними аркадными играми для баланса между сложностью и играбельностью. Каждое столкновение с врагом стоит одной жизни. Оставшиеся жизни будут отображаться в нижнем правом углу с помощью иконок кораблей .
- **Счетчик жизней**: Ваш герой начинает с трех жизней — стандарт, установленный ранними аркадными играми для баланса между сложностью и играбельностью. Каждое столкновение с врагом стоит одной жизни. Оставшиеся жизни будут отображаться в нижнем правом углу с помощью иконок кораблей .
Использование `history.pushState` создает новые записи в истории навигации браузера. Вы можете проверить это, удерживая *кнопку назад* вашего браузера, она должна отображать что-то вроде этого:
Если вы попробуете несколько раз нажать кнопку назад, вы увидите, что текущий URL изменяется, и история обновляется, но тот же шаблон продолжает отображаться.
2. Наблюдайте изменения в адресной строке вашего браузера
3. Заметьте, как страница перезагружается, и данные появляются в URL
### Сравнение методов HTTP
@ -350,7 +350,7 @@ graph TD
2. **Нажмите** кнопку "Создать аккаунт"
3. **Наблюдайте** ответ сервера в вашем браузере
**Что вы должны увидеть:**
- **Браузер перенаправляет** на URL конечного адреса API
@ -615,7 +615,7 @@ async function register() {
3. **Нажмите** "Создать аккаунт"
4. **Наблюдайте** сообщения в консоли и обратную связь для пользователя
**Что вы должны увидеть:**
- **Состояние загрузки** появляется на кнопке отправки
@ -790,7 +790,7 @@ input:focus:invalid {
3. **Попробуйте** специальные символы в поле имени пользователя
4. **Введите** отрицательное значение баланса
**Что вы заметите:**
- **Браузер отображает** стандартные сообщения о проверке
@ -952,7 +952,7 @@ timeline
Вот пример того, как может выглядеть итоговая страница входа после небольшой стилизации:
**Почему этот подход казался неудобным:**
- Каждый клик означал полную перезагрузку страницы
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
**Почему SPA намного удобнее:**
- Обновляются только те части, которые действительно изменились (умно, правда?)
@ -523,7 +523,7 @@ if (data.error) {
Теперь, когда вы протестируете с недействительным аккаунтом, вы увидите полезное сообщение об ошибке прямо на странице!
#### Шаг 4: Забота об инклюзивности и доступности
@ -961,7 +961,7 @@ timeline
Вот как может выглядеть стильная панель управления:
Не обязательно точно копировать этот пример - используйте его как вдохновение и создайте что-то свое!
Вместо того чтобы гоняться за собственным хвостом, мы создадим **централизованную систему управления состоянием**. Представьте, что есть один очень организованный человек, который отвечает за все важные дела:
```mermaid
flowchart TD
@ -803,7 +803,7 @@ timeline
Вот пример результата после выполнения задания:
После выполнения этого задания ваше банковское приложение должно иметь полностью функциональную функцию "Добавить транзакцию", которая выглядит и работает профессионально:
В этом проекте вы научитесь создавать вымышленный банк. Эти уроки включают инструкции по созданию макета веб-приложения, настройке маршрутов, созданию форм, управлению состоянием и получению данных из API, откуда можно извлечь данные банка.
@ -185,7 +185,7 @@ VSCode.dev переносит эти возможности в ваш брауз
После загрузки вы увидите красиво оформленное рабочее пространство, созданное для того, чтобы вы сосредоточились на главном – вашем коде!
**Вот ваш тур по окрестностям:**
- **Панель действий** (полоса слева): Основная навигация с Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 и Settings ⚙️
@ -233,7 +233,7 @@ flowchart TB
1. Перейдите на [vscode.dev](https://vscode.dev), если вы еще там не находитесь
2. Найдите кнопку "Open Remote Repository" на приветственном экране и нажмите на нее
3. Вставьте любой URL репозитория GitHub (попробуйте этот: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Нажмите Enter и наблюдайте за магией!
@ -242,7 +242,7 @@ flowchart TB
Хотите почувствовать себя волшебником программирования? Попробуйте это сочетание клавиш: Ctrl+Shift+P (или Cmd+Shift+P на Mac), чтобы открыть Command Palette:
**Command Palette – это как поисковая система для всего, что вы можете сделать:**
- Введите "open remote", и он найдет для вас инструмент открытия репозитория
@ -304,7 +304,7 @@ flowchart TB
3. Введите имя файла, включая соответствующее расширение (`style.css`, `script.js`, `index.html`)
4. Нажмите Enter, чтобы создать файл
**Рекомендации по именованию:**
- Используйте описательные имена, указывающие на назначение файла
@ -322,7 +322,7 @@ flowchart TB
2. Начните вводить текст и наблюдайте, как VSCode.dev помогает вам с цветами, подсказками и обнаружением ошибок
3. Сохраните свою работу с помощью Ctrl+S (Windows/Linux) или Cmd+S (Mac) – хотя он также автоматически сохраняет!
**Крутые вещи, которые происходят во время кодирования:**
- Ваш код красиво подсвечивается, чтобы его было легко читать
@ -343,7 +343,7 @@ flowchart TB
2. Измененные файлы появляются в разделе "Changes"
3. Цветовая кодировка указывает тип изменений: зеленый для добавлений, красный для удалений
**Сохранение работы (процесс фиксации):**
@ -438,7 +438,7 @@ mindmap
2. Просмотрите или найдите что-то конкретное
3. Нажмите на то, что кажется интересным, чтобы узнать больше
4. **Напишите** сообщение коммита: "Добавить начальную структуру HTML"
5. **Нажмите** "Commit new file", чтобы сохранить изменения
**Что достигается с помощью этой начальной настройки:**
- **Создается** правильная структура документа HTML5 с семантическими элементами
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
✅ **Индикатор успеха**: Вы должны увидеть файлы вашего проекта в боковой панели Explorer и `index.html`, доступный для редактирования в главной области редактора.
**Что вы увидите в интерфейсе:**
- **Боковая панель Explorer**: **Отображает** файлы и структуру папок вашего репозитория
@ -448,7 +448,7 @@ li:before {
**Результаты после установки:**
После установки CodeSwing вы увидите предварительный просмотр вашего сайта-резюме прямо в редакторе. Это позволяет вам видеть, как выглядит ваш сайт, пока вы вносите изменения.
**Понимание улучшенного интерфейса:**
- **Разделенный вид**: **Показывает** ваш код с одной стороны и предварительный просмотр с другой
## 🗺️ Ваш путь обучения разработке приложений с ИИ
@ -194,7 +194,7 @@ mindmap
**Основной принцип**: Разработка приложений с ИИ объединяет традиционные навыки веб-разработки с интеграцией ИИ-сервисов, создавая интеллектуальные приложения, которые кажутся естественными и отзывчивыми для пользователей.
**Почему Playground так полезен:**
- **Попробуйте** разные модели ИИ, такие как GPT-4o-mini, Claude и другие (всё бесплатно!)
@ -204,7 +204,7 @@ mindmap
После того как вы немного поиграете, просто нажмите вкладку "Code" и выберите ваш язык программирования, чтобы получить код для реализации.
## Настройка интеграции серверной части на Python
@ -2365,14 +2365,14 @@ mindmap
- **Перейдите** в [репозиторий Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Нажмите** "Use this template" в правом верхнем углу (убедитесь, что вы вошли в GitHub)
**Шаг 2: Запуск Codespaces**
- **Откройте** ваш недавно созданный репозиторий
- **Нажмите** зеленую кнопку "Code" и выберите "Codespaces"
- **Выберите** "Create codespace on main", чтобы запустить вашу среду разработки
Изучите основы веб-разработки с нашим комплексным 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий погружает в JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и улучшайте усвоение материала с помощью нашей эффективной проектно-ориентированной методики. Начните ваше путешествие в мир программирования уже сегодня!
3. [**Присоединяйтесь к Azure AI Foundry Discord и встречайтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
Изучите основы веб-разработки с нашим 12-недельным курсом от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Улучшите свои навыки и оптимизируйте запоминание знаний благодаря эффективной проектной методике обучения. Начните свой путь в программировании уже сегодня!
### 🌐 Поддержка множества языков
Присоединяйтесь к сообществу Azure AI Foundry Discord
#### Поддерживается через GitHub Action (автоматически и всегда актуально)
3. [**Присоединяйтесь к Azure AI Foundry Discord и познакомьтесь с экспертами и другими разработчиками**](https://discord.com/invite/ByRwuEEgH4)
> Этот репозиторий включает более 50 переводов, что значительно увеличивает размер загрузки. Чтобы клонировать без переводов, используйте sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Это даст вам всё необходимое для прохождения курса при намного более быстрой загрузке.
### 🌐 Поддержка нескольких языков
**Если вы хотите поддерживать дополнительные языки перевода, они перечислены [здесь](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
#### Поддерживается через GitHub Action (автоматически и всегда актуально)
Посетите [**страницу Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), где вы найдете материалы для начинающих, студенческие пакеты и даже способы получить бесплатный сертификат. Это страница, которую стоит добавить в закладки и время от времени проверять, так как контент обновляется ежемесячно.
**Если вы хотите добавить поддержку дополнительных языков, список доступных языков можно найти [здесь](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
### 📣 Объявление — новые челленджи в режиме GitHub Copilot Agent!
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
Добавлен новый челлендж, найдите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новый вызов для вас, который можно выполнить с помощью GitHub Copilot и режима Agent. Если вы не использовали режим Agent ранее, он способен не только генерировать текст, но и создавать и редактировать файлы, запускать команды и многое другое.
#### 🧑🎓 _Вы студент?_
### 📣 Объявление — _новый проект с использованием генеративного ИИ_
Посетите [**страницу для студентов**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный сертификат. Это страница, которую стоит добавить в закладки и проверять время от времени, так как мы ежемесячно обновляем контент.
Добавлен новый проект помощника на базе искусственного интеллекта, посмотрите [проект](./9-chat-project/README.md)
### 📣 Объявление - Новые задания с режимом GitHub Copilot Agent!
### 📣 Объявление — _новая учебная программа_ по генеративному ИИ для JavaScript только что выпущена
Добавлено новое задание, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новое задание для выполнения с использованием GitHub Copilot и режима Agent. Если вы еще не использовали режим Agent, он способен не только генерировать текст, но и создавать и редактировать файлы, выполнять команды и многое другое.
Не пропустите нашу новую учебную программу по генеративному ИИ!
### 📣 Объявление - _Новый проект с использованием генеративного ИИ_
Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), чтобы начать!
Только что добавлен новый проект AI Assistant, ознакомьтесь с ним [проект](./09-chat-project/README.md)
> **Преподаватели**, мы [включили некоторые предложения](for-teachers.md) по использованию этой учебной программы. Нам очень важна ваша обратная связь [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Каждый урок включает задание для выполнения, проверку знаний и вызов, чтобы помочь вам изучить такие темы, как:
- Создание запросов и инженерия запросов
- Генерация текстовых и графических приложений
- Приложения для поиска
**[Обучающиеся](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начинайте с викторины перед лекцией, затем просмотрите лекционный материал, выполните различные задания и проверьте свои знания в постлекционной викторине.
Посетите [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), чтобы начать!
Для улучшения обучения общайтесь с вашими коллегами, чтобы работать над проектами вместе! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где команда модераторов будет готова ответить на ваши вопросы.
## 🌱 Начало работы
Для углубления знаний мы настоятельно рекомендуем изучать [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для дополнительных материалов по обучению.
> **Учителя**, мы [включили несколько предложений](for-teachers.md) о том, как использовать этот учебный курс. Мы будем рады вашему отзыву [в нашем форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
### 📋 Настройка вашей среды
**[Ученики](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для каждого урока начните с предварительной викторины, затем изучите материалы лекции, выполните различные задания и проверьте свои знания с помощью викторины после лекции.
В этой учебной программе уже готова среда разработки! Начав работу, вы можете выбрать запуск курса в [Codespace](https://github.com/features/codespaces/) (_браузерная среда без необходимости установки_), либо локально на вашем компьютере с помощью текстового редактора, например [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Чтобы улучшить процесс обучения, общайтесь с другими учениками, чтобы работать над проектами вместе! Обсуждения приветствуются в нашем [форуме обсуждений](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), где наша команда модераторов будет готова ответить на ваши вопросы.
#### Создайте свой репозиторий
Для дальнейшего обучения мы настоятельно рекомендуем изучить [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для получения дополнительных учебных материалов.
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Сделать это можно, нажав кнопку **Use this template** вверху страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебной программы.
### 📋 Настройка вашей среды
Выполните следующие шаги:
1. **Форкните репозиторий**: Нажмите на кнопку "Fork" в правом верхнем углу этой страницы.
Этот учебный курс уже готов к разработке! Вы можете выбрать запуск курса в [Codespace](https://github.com/features/codespaces/) (_браузерная среда, не требующая установки_), или локально на вашем компьютере с использованием текстового редактора, такого как [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Запуск учебной программы в Codespace
#### Создайте свой репозиторий
Чтобы легко сохранять свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку **Use this template** в верхней части страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией учебного курса.
В вашей копии репозитория нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст для вас новый Codespace для работы.
Следуйте этим шагам:
1. **Сделайте форк репозитория**: Нажмите кнопку "Fork" в правом верхнем углу этой страницы.
#### Запуск учебной программы локально на вашем компьютере
В вашей копии этого репозитория, которую вы создали, нажмите кнопку **Code** и выберите **Open with Codespaces**. Это создаст новый Codespace для работы.
Для запуска этой учебной программы локально понадобятся текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и основные инструменты](../../1-getting-started-lessons/1-intro-to-programming-languages), познакомит вас с различными вариантами каждого из этих инструментов, чтобы вы могли выбрать то, что подходит именно вам.
Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) как редактор, который включает собственный [терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Вы можете скачать Visual Studio Code [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Запуск учебного курса локально на вашем компьютере
1. Клонируйте ваш репозиторий на компьютер. Для этого нажмите кнопку **Code** и скопируйте URL:
Чтобы запустить этот учебный курс локально на вашем компьютере, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, [Введение в языки программирования и инструменты](../../1-getting-started-lessons/1-intro-to-programming-languages), проведет вас через различные варианты для каждого из этих инструментов, чтобы вы могли выбрать то, что лучше всего подходит для вас.
Мы рекомендуем использовать [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) в качестве редактора, который также имеет встроенный [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Вы можете скачать Visual Studio Code [здесь](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Клонируйте ваш репозиторий на компьютер. Вы можете сделать это, нажав кнопку **Code** и скопировав URL:
[CodeSpace](./images/createcodespace.png)
Затем откройте [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и выполните следующую команду, заменив `<your-repository-url>` на URL, который вы только что скопировали:
[CodeSpace](./images/createcodespace.png)
Затем откройте [Терминал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) в составе [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) и выполните следующую команду, заменив `<your-repository-url>` на только что скопированный URL:
```bash
git clone <your-repository-url>
```
2. Откройте папку в Visual Studio Code. Вы можете сделать это, нажав **File** > **Open Folder** и выбрав папку, которую вы только что клонировали.
> Рекомендуемые расширения для Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для предварительного просмотра HTML-страниц в Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - помогает писать код быстрее
2. Откройте папку в Visual Studio Code. Это можно сделать, кликнув **File** > **Open Folder** и выбрав только что склонированную папку.
> Рекомендуемые расширения Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) — для предварительного просмотра HTML-страниц внутри Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) — для помощи в более быстром написании кода
## 📂 Каждый урок включает:
- необязательный скетчноут
- необязательное дополнительное видео
- разминка-тест перед уроком
- опциональные заметки
- опциональное вспомогательное видео
- разминку-квиз перед уроком
- письменный урок
- для проектных уроков — пошаговые инструкции по созданию проекта
- проверка знаний
- задание-челлендж
- проверки знаний
- вызов (challenge)
- дополнительное чтение
- домашнее задание
- [тест после урока](https://ff-quizzes.netlify.app/web/)
- задание
- [квиз после урока](https://ff-quizzes.netlify.app/web/)
> **Примечание отестах**: Все тесты находятся в папке Quiz-app, всего 48 тестов по три вопроса каждый. Они доступны [здесь](https://ff-quizzes.netlify.app/web/), приложение для тестов можно запустить локально или развернуть в Azure; следуйте инструкциям в папке `quiz-app`.
> **Примечание оквизах**: Все квизы находятся в папке Quiz-app, всего 48 квизов по 3 вопроса в каждом. Они доступны [здесь](https://ff-quizzes.netlify.app/web/), приложение квиза можно запускать локально или развернуть в Azure; следуйте инструкциям в папке `quiz-app`.
## 🗃️ Уроки
| | Название проекта | Изучаемые концепции | Учебные цели | Ссылка на урок | Автор |
| 01 | Начало работы | Введение в программирование и инструменты разработчика | Узнайте основные принципы большинства языков программирования и о ПО, которое помогает профессиональным разработчикам в работе | [Введение в языки программирования и инструменты разработчика](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало работы | Основы GitHub, включая работу в команде | Как использовать GitHub в проекте, как сотрудничать с другими разработчиками | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Узнайте основы доступности веб-сайтов | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS | Функции и методы | Узнайте о функциях и методах для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine и Christopher |
| 06 | Основы JS | Принятие решений с помощью JS | Узнайте, как создавать условия в коде с использованием методов принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными сиспользованием массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](./3-terrarium/solution/README.md) | HTML на практике | Создайте HTML для онлайн-террариума, сосредоточившись на создании макета | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](./3-terrarium/solution/README.md) | CSS на практике | Создайте CSS для стилизации онлайн-террариума, сосредоточившись на основах CSS, включая адаптивность страницы | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | Замыкания в JavaScript, работа с DOM | Напишите JavaScript для террариума, чтобы он работал как интерфейс drag/drop, сосредоточившись на замыканиях и манипуляции DOM | [Замыкания в JavaScript, работа с DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра на скорость печати](./4-typing-game/solution/README.md) | Создание игры на скорость печати | Узнайте, как использовать события клавиатуры для управления логикой приложения на JavaScript | [Программирование на основе событий](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Работа с браузерами | Узнайте, как работают браузеры, их историю, и как создать первые элементы расширения для браузера | [О браузерах](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Создание формы, вызов API и хранение переменных в локальном хранилище | Создайте элементы JavaScript для расширения браузера, чтобы вызывать API с использованием переменных, хранящихся в локальном хранилище | [API, формы и локальное хранилище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Экологичное расширение для браузера](./5-browser-extension/solution/README.md) | Фоновые процессы в браузере, производительность веба | Используйте фоновые процессы браузера для управления значком расширения; узнайте о производительности веба и оптимизациях | [Фоновые задачи и производительность](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Космическая игра](./6-space-game/solution/README.md) | Более сложная разработка игр с использованием JavaScript | Узнайте о наследовании с использованием классов и композиции, а также о паттерне Pub/Sub, готовясь к созданию игры | [Введение в сложную разработку игр](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Космическая игра](./6-space-game/solution/README.md) | Рисование на canvas | Узнайте о Canvas API, используемом для рисования элементов на экране | [Рисование на canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Космическая игра](./6-space-game/solution/README.md) | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться с использованием декартовых координат и Canvas API | [Перемещение элементов](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Космическая игра](./6-space-game/solution/README.md) | Обнаружение столкновений | Сделайте так, чтобы элементы сталкивались и реагировали друг на другас использованием нажатий клавиш, добавьте функцию задержки для повышения производительности игры | [Обнаружение столкновений](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Космическая игра](./6-space-game/solution/README.md) | Подсчет очков | Выполняйте математические вычисления на основе статуса и производительности игры | [Подсчет очков](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Космическая игра](./6-space-game/solution/README.md) | Завершение и перезапуск игры | Узнайте о завершении и перезапуске игры, включая очистку ресурсов и сбросзначений переменных | [Условие завершения](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банковское приложение](./7-bank-project/solution/README.md) | HTML-шаблоны и маршруты в веб-приложении | Узнайте, как создать каркас архитектуры многостраничного сайта с использованием маршрутизации и HTML-шаблонов | [HTML-шаблоны и маршруты](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банковское приложение](./7-bank-project/solution/README.md) | Создание формы входа и регистрации | Узнайте о создании форм и обработке процедур проверки данных | [Формы](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банковское приложение](./7-bank-project/solution/README.md) | Методы получения и использования данных | Узнайте, как данные поступают в приложение и выходят из него, как их получать, хранить и удалять | [Данные](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банковское приложение](./7-bank-project/solution/README.md) | Концепции управления состоянием | Узнайте, как ваше приложение сохраняет состояние и как управлять им программно | [Управление состоянием](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Редактор кода для браузера/VScode](../../8-code-editor) | Работа с VScode | Узнайте, как использовать редактор кода | [Использование редактора кода VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Ассистенты](./9-chat-project/README.md) | Работа с AI | Узнайте, как создать собственного AI-ассистента | [Проект AI-ассистента](./9-chat-project/README.md) | Chris |
| | Название проекта | Изучаемые концепции | Цели обучения | Связанный урок | Автор |
| 01 | Начало работы | Введение в программирование и инструменты профессии | Изучить основные основы большинства языков программирования и ПО, помогающего профессиональным разработчикам | [Введение в языки программирования и инструменты](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Начало работы | Основы GitHub, включая командную работу | Как использовать GitHub в проекте, как сотрудничать с другими над кодовой базой | [Введение в GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Начало работы | Доступность | Изучить основы веб-доступности | [Основы доступности](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JS | Типы данных в JavaScript | Основы типов данных в JavaScript | [Типы данных](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Основы JS | Функции и методы | Изучить функции и методы для управления логикой приложения | [Функции и методы](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Основы JS | Принятие решений с помощью JS | Научиться создавать условия в коде, используя методы принятия решений | [Принятие решений](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JS | Массивы и циклы | Работа с данными спомощью массивов и циклов в JavaScript | [Массивы и циклы](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](./3-terrarium/solution/README.md) | Практика HTML | Создать HTML для онлайн-террариума, сосредоточившись на создании макета | [Введение в HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](./3-terrarium/solution/README.md) | Практика CSS | Создать CSS для стилизации онлайн-террариума, изучить основы CSS, включая адаптивность страницы | [Введение в CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](./3-terrarium/solution/README.md) | JavaScript замыкания, управление DOM | Написать JavaScript для функции перетаскивания в террариуме, сосредоточившись на замыканиях и манипуляциях DOM | [JavaScript замыкания, управление DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Игра на набор текста](./4-typing-game/solution/README.md) | Создание игры для набора текста | Научиться использовать события клавиатуры для управления логикой JavaScript приложения | [Программирование на основе событий](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Расширение для браузера Green](./5-browser-extension/solution/README.md) | Работа с браузерами | Узнать, как работают браузеры, их историю, и как создать основные элементы расширения браузера | [О браузерах](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Расширение для браузера Green](./5-browser-extension/solution/README.md) | Создание формы, вызов API и хранение переменных в локальном хранилище | Написать JavaScript для расширения браузера, чтобы вызвать API, используя переменные из локального хранилища | [API, формы и локальное хранилище](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Расширение для браузера Green](./5-browser-extension/solution/README.md) | Фоновые процессы браузера, производительность веб | Использовать фоновые процессы для управления иконкой расширения; узнать о производительности и оптимизациях | [Фоновые задачи и производительность](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Игра в космос](./6-space-game/solution/README.md) | Более продвинутая разработка игр на JavaScript | Узнать об наследовании через классы и композицию, паттерн Pub/Sub, подготовка к созданию игры | [Введение в продвинутую разработку игр](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Игра в космос](./6-space-game/solution/README.md) | Рисование на canvas | Изучить Canvas API для рисования элементов на экране | [Рисование на Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Игра в космос](./6-space-game/solution/README.md) | Передвижение элементов по экрану | Узнать, как элементы приобретают движение с использованием декартовых координат и Canvas API | [Передвижение элементов](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Игра в космос](./6-space-game/solution/README.md) | Обнаружение столкновений | Сделать так, чтобы элементы сталкивались и реагировали друг на друга, используя нажатия клавиш, и добавить функцию cooldown | [Обнаружение столкновений](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Игра в космос](./6-space-game/solution/README.md) | Ведение счета | Выполнять математические вычисления на основе текущего состояния и прогресса игры | [Ведение счета](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Игра в космос](./6-space-game/solution/README.md) | Завершение и перезапуск игры | Научиться завершать и перезапускать игру, включая очистку ресурсов и сброс переменных | [Условие окончания](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Банковское приложение](./7-bank-project/solution/README.md) | HTML-шаблоны и маршруты в веб-приложении | Узнать, как создать структуру многстраничного сайта, используя маршрутизацию и HTML-шаблоны | [HTML-шаблоны и маршруты](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Банковское приложение](./7-bank-project/solution/README.md) | Создание форм для входа и регистрации | Изучить создание форм и обработку процедур валидации | [Формы](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Банковское приложение](./7-bank-project/solution/README.md) | Методы получения и использования данных | Как данные поступают и уходят из приложения, как их получать, хранить и удалять | [Данные](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банковское приложение](./7-bank-project/solution/README.md) | Концепции управления состоянием | Как приложение сохраняет состояние и управляет им программно | [Управление состоянием](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Код для браузера/VScode](../../8-code-editor) | Работа с VScode | Узнайте, как использовать редактор кода | [Использование редактора кода VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI ассистенты](./9-chat-project/README.md) | Работа с ИИ | Узнайте, как создать своего ИИ ассистента | [Проект ассистента ИИ](./9-chat-project/README.md) | Chris |
## 🏫 Педагогика
Наша учебная программа разработана с учетом двух ключевых педагогических принципов:
Наша учебная программа основывается на двух ключевых педагогических принципах:
* обучение на основе проектов
* частые тесты
* частые квизы
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, которые используют современные веб-разработчики. Студенты получат возможность практического опыта, создавая игру на скорость печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле "космических захватчиков" и банковское приложение для бизнеса. К концу курса студенты получат прочное понимание веб-разработки.
Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и методам, которые используют современные веб-разработчики. Студенты смогут получить практический опыт, создавая игру для набора текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле космических захватчиков и банковское приложение для бизнеса. К концу курса студенты приобретут прочные знания веб-разработки.
> 🎓 Вы можете пройти первые несколько уроков этой программы как [Учебный путь](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
> 🎓 Вы можете пройти первые несколько уроков этой программы в виде [Учебного пути](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
Обеспечивая соответствие содержания проектам, процесс становится более увлекательным для студентов, а усвоение концепций усиливается. Мы также написали несколько вводных уроков по основам JavaScript для знакомства сконцепциями, сопровождаемых видео из коллекции "[Серия для начинающих: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", некоторые из авторов которой внесли вклад в эту учебную программу.
Обеспечение соответствия контента проектам делает процесс более увлекательным для студентов и улучшает запоминание концепций. Мы также создали несколько начальных уроков по основам JavaScript с видео из коллекции "[Серия для начинающих по JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", авторы которой внесли вклад в эту учебную программу.
Кроме того, низкоуровневый тест перед занятием настраивает студента на изучение темы, а второй тест после занятия обеспечивает дальнейшее усвоение материала. Эта учебная программа была разработана как гибкая и увлекательная, и ее можно пройти полностью или частично. Проекты начинаются с простых и становятся все более сложными к концу 12-недельного цикла.
Кроме того, простой квиз перед занятием формирует у студента настрой на изучение темы, а второй квиз после урока обеспечивает более глубокое усвоение материала. Данная программа разработана быть гибкой и интересной, ее можно проходить полностью или частично. Проекты начинаются с малого и постепенно усложняются к концу 12-недельного цикла.
Хотя мы намеренно избегали введения фреймворков JavaScript, чтобы сосредоточиться на базовых навыках, необходимых веб-разработчику перед освоением фреймворка, хорошим следующим шагом после завершения этой программы будет изучение Node.js через другую коллекцию видео: "[Серия для начинающих: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Хотя мы сознательно избегали введения JavaScript-фреймворков, чтобы сосредоточиться на базовых навыках веб-разработчика до перехода к фреймворкам, хорошим следующим шагом после завершения этой программы будет изучение Node.js с помощью другой серии видео: "[Серия для начинающих по Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Ознакомьтесь с нашими [Правилами поведения](CODE_OF_CONDUCT.md) и [Руководством по внесению изменений](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
> Посетите наши руководства [Кодекс поведения](CODE_OF_CONDUCT.md) и [Участие](CONTRIBUTING.md). Мы приветствуем ваши конструктивные отзывы!
## 🧭 Оффлайн-доступ
## 🧭 Оффлайндоступ
Вы можете запустить эту документацию оффлайн, используя [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на вашем локальном компьютере, а затем в корневой папке этого репозитория введите `docsify serve`. Веб-сайт будет доступен на порту 3000 вашего локального хоста: `localhost:3000`.
Вы можете использовать эту документацию оффлайнс помощью [Docsify](https://docsify.js.org/#/). Форкните этот репозиторий, [установите Docsify](https://docsify.js.org/#/quickstart) на свой локальный компьютер и затем в корневой папке репозитория введите `docsify serve`. Веб-сайт будет доступен на порту 3000 на вашем локальном хосте: `localhost:3000`.
## 📘 PDF
PDF всех уроков можно найти [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
PDF со всеми уроками доступен [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Другие курсы
Наша команда создает и другие курсы! Ознакомьтесь:
Наша команда выпускает и другие курсы! Ознакомьтесь:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Серия по генеративному ИИ
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Основное обучение
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Серия Generative AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Основное обучение
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Серия Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
---
### Серия Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Если вы столкнулись с трудностями или у вас есть вопросы о создании приложений с ИИ, присоединяйтесь к обсуждениям с другими учащимися и опытными разработчиками о MCP. Это поддерживающее сообщество, где приветствуются вопросы и свободно делятся знаниями.
Если вы застряли или у вас есть вопросы по созданию AI-приложений. Присоединяйтесь к другим учащимся и опытным разработчикам в обсуждениях о MCP. Это поддерживающее сообщество, где вопросы приветствуются, а знания свободно делятся.
Этот репозиторий лицензирован под лицензией MIT. Подробнее смотрите в файле [LICENSE](../../LICENSE).
Этот репозиторий лицензирован под лицензией MIT. Подробнее смотрите в файле [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Отказ от ответственности**:
Этот документ был переведен спомощью сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на егородном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования этого перевода.
**Отказ от ответственности**:
Этот документ был переведен сиспользованием автоматического сервиса перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия по обеспечению точности, имейте в виду, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на егоисходном языке следует рассматривать как авторитетный источник. Для важной информации рекомендуется использовать профессиональный перевод, выполненный человеком. Мы не несем ответственности за любые недоразумения или неправильное толкование, возникшие в результате использования данного перевода.
localizeflow[bot]
1 week ago
