Skip to content

Commit 4c84192

Browse files
emmanuelknafoCopilot
emmanuelknafo
and
Copilot
committed
Add French translation (fr/) for all workshop content
Translate index.md and all lab files to French under fr/ subdirectory. Add language switcher links between English and French versions. Preserve all code blocks, commands, URLs, and tool names as-is. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 23e0a4a commit 4c84192

14 files changed

Lines changed: 1797 additions & 0 deletions

‎fr/index.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
---
2+
layout: default
3+
title: Accueil
4+
description: Atelier pratique et progressif pour intégrer les agents GitHub Copilot personnalisés dans vos flux de travail Accelerator.
5+
nav_order: 0
6+
permalink: /fr/
7+
---
8+
9+
<p align="center">
10+
<img src="../assets/branding/logo-128.png" alt="Agentic Accelerator Framework" width="100">
11+
</p>
12+
13+
# Agentic Accelerator Workshop
14+
15+
> 🇬🇧 **[English version](../)**
16+
17+
Bienvenue dans l'**Agentic Accelerator Workshop** — un atelier pratique et progressif qui vous apprend à intégrer les agents GitHub Copilot personnalisés dans vos flux de travail Accelerator.
18+
19+
Vous configurerez des scanners de sécurité, des vérificateurs d'accessibilité, des analyseurs de qualité de code et des portes de contrôle FinOps, le tout alimenté par des agents IA qui produisent des résultats conformes à SARIF visibles dans l'onglet Sécurité de GitHub.
20+
21+
> [!NOTE]
22+
> Cet atelier fait partie du [Agentic Accelerator Framework](https://github.com/devopsabcs-engineering/agentic-accelerator-framework).
23+
24+
## À qui s'adresse cet atelier ?
25+
26+
| Public | Ce que vous apprendrez |
27+
|---|---|
28+
| **Développeurs** | Exécuter des analyses alimentées par l'IA depuis VS Code à l'aide des agents Copilot |
29+
| **Ingénieurs DevOps** | Intégrer des flux de travail pilotés par des agents dans les pipelines GitHub Actions |
30+
| **Ingénieurs en sécurité** | Comprendre la sortie SARIF et intégrer les résultats dans la gouvernance |
31+
| **Ingénieurs de plateforme** | Étendre le framework avec des agents personnalisés pour votre organisation |
32+
33+
## Prérequis
34+
35+
Avant de commencer le Lab 00, assurez-vous de disposer des éléments suivants :
36+
37+
- [Visual Studio Code](https://code.visualstudio.com/) (dernière version stable)
38+
- [Node.js](https://nodejs.org/) v20 ou ultérieur
39+
- [Git](https://git-scm.com/) 2.40 ou ultérieur
40+
- Un [compte GitHub](https://github.com/) avec accès à
41+
[GitHub Copilot](https://github.com/features/copilot)
42+
- L'extension GitHub Copilot Chat installée dans VS Code
43+
44+
## Labs
45+
46+
| # | Lab | Durée | Niveau |
47+
|---|-----|-------|--------|
48+
| 00 | [Prérequis](labs/lab-00-setup.md) | 30 min | Débutant |
49+
| 01 | [Explorer l'application exemple](labs/lab-01.md) | 25 min | Débutant |
50+
| 02 | [Agents, compétences et instructions](labs/lab-02.md) | 20 min | Débutant |
51+
| 03 | [Analyse de sécurité](labs/lab-03.md) | 40 min | Intermédiaire |
52+
| 04 | [Analyse d'accessibilité](labs/lab-04.md) | 35 min | Intermédiaire |
53+
| 05 | [Analyse de la qualité du code](labs/lab-05.md) | 35 min | Intermédiaire |
54+
| 06 | [Comprendre la sortie SARIF](labs/lab-06.md) | 30 min | Intermédiaire |
55+
| 07 | [Pipelines GitHub Actions](labs/lab-07.md) | 40 min | Intermédiaire |
56+
| 08 | [Onglet Sécurité GitHub](labs/lab-08.md) | 25 min | Intermédiaire |
57+
| 09 | [Agents FinOps](labs/lab-09.md) | 45 min | Avancé |
58+
| 10 | [Remédiation par agent](labs/lab-10.md) | 45 min | Avancé |
59+
| 11 | [Création d'agents personnalisés](labs/lab-11.md) | 45 min | Avancé |
60+
61+
## Programme de l'atelier
62+
63+
### Demi-journée (3 heures)
64+
65+
| Horaire | Activité |
66+
|---------|----------|
67+
| 0:00 – 0:30 | Lab 00 : Prérequis |
68+
| 0:30 – 0:55 | Lab 01 : Explorer l'application exemple |
69+
| 0:55 – 1:15 | Lab 02 : Agents, compétences et instructions |
70+
| 1:15 – 1:55 | Lab 03 : Analyse de sécurité |
71+
| 1:55 – 2:10 | Pause |
72+
| 2:10 – 2:45 | Lab 04 : Analyse d'accessibilité |
73+
| 2:45 – 3:00 | Lab 05 : Analyse de la qualité du code (début) |
74+
75+
### Journée complète (5,5 heures)
76+
77+
| Horaire | Activité |
78+
|---------|----------|
79+
| 0:00 – 0:30 | Lab 00 : Prérequis |
80+
| 0:30 – 0:55 | Lab 01 : Explorer l'application exemple |
81+
| 0:55 – 1:15 | Lab 02 : Agents, compétences et instructions |
82+
| 1:15 – 1:55 | Lab 03 : Analyse de sécurité |
83+
| 1:55 – 2:30 | Lab 04 : Analyse d'accessibilité |
84+
| 2:30 – 2:45 | Pause |
85+
| 2:45 – 3:20 | Lab 05 : Analyse de la qualité du code |
86+
| 3:20 – 3:50 | Lab 06 : Comprendre la sortie SARIF |
87+
| 3:50 – 4:30 | Lab 07 : Pipelines GitHub Actions |
88+
| 4:30 – 4:45 | Pause |
89+
| 4:45 – 5:10 | Lab 08 : Onglet Sécurité GitHub |
90+
91+
### Étendu (7,5 heures)
92+
93+
| Horaire | Activité |
94+
|---------|----------|
95+
| 0:00 – 5:10 | Labs demi-journée + journée complète (comme ci-dessus) |
96+
| 5:10 – 5:25 | Pause |
97+
| 5:25 – 6:10 | Lab 09 : Agents FinOps |
98+
| 6:10 – 6:55 | Lab 10 : Remédiation par agent |
99+
| 6:55 – 7:10 | Pause |
100+
| 7:10 – 7:55 | Lab 11 : Création d'agents personnalisés |
101+
102+
## Niveaux de prestation
103+
104+
Choisissez le niveau qui correspond à votre emploi du temps :
105+
106+
| Niveau | Labs | Durée | Public |
107+
|---|---|---|---|
108+
| **Demi-journée** | Labs 00 – 05 | ~3 heures | Première exposition à l'analyse pilotée par des agents |
109+
| **Journée complète** | Labs 00 – 08 | ~5,5 heures | Intégration de bout en bout dans le pipeline |
110+
| **Étendu** | Labs 00 – 11 | ~7,5 heures | Approfondissement incluant FinOps, remédiation et agents personnalisés |
111+
112+
## Diagramme de dépendances des labs
113+
114+
![Diagramme de dépendances des labs montrant la progression du Lab 00 au Lab 11](../images/lab-dependency-diagram.png)
115+
116+
Les Labs 03, 04 et 05 peuvent être complétés dans n'importe quel ordre. Le Lab 09
117+
est optionnel et ne bloque pas les labs suivants.
118+
119+
## Pour commencer
120+
121+
1. **Forkez ou utilisez ce modèle** pour créer votre propre instance de l'atelier.
122+
2. Complétez le [Lab 00 : Prérequis](labs/lab-00-setup.md) pour configurer votre environnement.
123+
3. Parcourez les labs dans l'ordre — chaque lab s'appuie sur le précédent.
124+
125+
> **Astuce** : Cet atelier est conçu pour GitHub Codespaces. Cliquez sur **Code → Codespaces → New codespace** pour obtenir un environnement préconfiguré avec tous les outils installés.
126+
127+
## Dépôts associés
128+
129+
| Dépôt | Description |
130+
|-------|-------------|
131+
| [Agentic Accelerator Framework](https://github.com/devopsabcs-engineering/agentic-accelerator-framework) | Définitions d'agents, instructions, compétences et flux de travail CI/CD |
132+
| [Accessibility Scan Workshop](https://devopsabcs-engineering.github.io/accessibility-scan-workshop/) | Atelier d'analyse d'accessibilité WCAG 2.2 |
133+
| [FinOps Scan Workshop](https://devopsabcs-engineering.github.io/finops-scan-workshop/) | Atelier d'analyse de gouvernance des coûts Azure |
134+
| [Code Quality Scan Workshop](https://devopsabcs-engineering.github.io/code-quality-scan-workshop/) | Atelier d'analyse de la qualité du code |
135+
136+
## Licence
137+
138+
Ce projet est sous licence [MIT License](../LICENSE).

‎fr/labs/lab-00-setup.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
permalink: /fr/labs/lab-00-setup
3+
title: "Lab 00 - Prérequis et configuration de l'environnement"
4+
description: "Installer les outils requis, les extensions VS Code, créer votre dépôt d'atelier à partir du modèle et vérifier GitHub Copilot Chat."
5+
---
6+
7+
## Aperçu
8+
9+
| | |
10+
|---|---|
11+
| **Durée** | 30 minutes |
12+
| **Niveau** | Débutant |
13+
| **Prérequis** | Aucun |
14+
15+
## Objectifs d'apprentissage
16+
17+
À la fin de ce lab, vous serez en mesure de :
18+
19+
* Installer les outils requis (Node.js v20+, Git, VS Code)
20+
* Installer les quatre extensions VS Code utilisées tout au long de l'atelier
21+
* Créer votre propre dépôt à partir du modèle de l'atelier
22+
* Vérifier que GitHub Copilot Chat fonctionne et peut voir les agents de l'espace de travail
23+
24+
## Exercices
25+
26+
### Exercice 0.1 : Installer les outils requis
27+
28+
Vous avez besoin de trois outils sur votre machine avant de commencer l'atelier. Si vous les avez déjà installés, confirmez les versions minimales ci-dessous.
29+
30+
1. **Node.js v20 ou ultérieur** — téléchargez depuis <https://nodejs.org> si vous ne l'avez pas.
31+
32+
Ouvrez un terminal et exécutez :
33+
34+
```bash
35+
node --version
36+
```
37+
38+
Confirmez que la sortie affiche `v20.x.x` ou une version supérieure.
39+
40+
2. **Git** — téléchargez depuis <https://git-scm.com> si vous ne l'avez pas.
41+
42+
```bash
43+
git --version
44+
```
45+
46+
3. **Visual Studio Code** — téléchargez depuis <https://code.visualstudio.com> si vous ne l'avez pas.
47+
48+
```bash
49+
code --version
50+
```
51+
52+
![Terminal affichant la version Node.js v20+](../../images/lab-00/lab-00-node-version.png)
53+
54+
### Exercice 0.2 : Installer les extensions VS Code
55+
56+
Ouvrez VS Code et installez les quatre extensions suivantes depuis le panneau Extensions (`Ctrl+Shift+X`) :
57+
58+
| Extension | ID |
59+
|---|---|
60+
| GitHub Copilot | `github.copilot` |
61+
| GitHub Copilot Chat | `github.copilot-chat` |
62+
| SARIF Viewer | `MS-SarifVSCode.sarif-viewer` |
63+
| ESLint | `dbaeumer.vscode-eslint` |
64+
65+
Vous pouvez également les installer depuis le terminal :
66+
67+
```bash
68+
code --install-extension github.copilot
69+
code --install-extension github.copilot-chat
70+
code --install-extension MS-SarifVSCode.sarif-viewer
71+
code --install-extension dbaeumer.vscode-eslint
72+
```
73+
74+
Après l'installation, confirmez que les quatre extensions apparaissent comme activées dans le panneau Extensions.
75+
76+
![Panneau des extensions VS Code avec les 4 extensions requises installées](../../images/lab-00/lab-00-vscode-extensions.png)
77+
78+
### Exercice 0.3 : Créer votre dépôt d'atelier
79+
80+
1. Accédez à <https://github.com/devopsabcs-engineering/agentic-accelerator-workshop> dans votre navigateur.
81+
2. Cliquez sur **Use this template** puis sélectionnez **Create a new repository**.
82+
3. Définissez le nom du dépôt comme `agentic-accelerator-workshop` sous votre compte GitHub personnel.
83+
4. Définissez la visibilité sur **Public** (requis pour les fonctionnalités de l'onglet GitHub Security dans les labs suivants).
84+
5. Cliquez sur **Create repository**.
85+
6. Clonez le dépôt sur votre machine locale :
86+
87+
```bash
88+
git clone https://github.com/<your-username>/agentic-accelerator-workshop.git
89+
```
90+
91+
7. Ouvrez le dépôt dans VS Code :
92+
93+
```bash
94+
code agentic-accelerator-workshop
95+
```
96+
97+
### Exercice 0.4 : Vérifier Copilot Chat
98+
99+
1. Ouvrez le panneau Copilot Chat (`Ctrl+Shift+I` sous Windows ou `Cmd+Shift+I` sous macOS).
100+
2. Tapez le message suivant :
101+
102+
```text
103+
Hello, can you see the agents in this workspace?
104+
```
105+
106+
3. Copilot devrait répondre avec une liste des agents qu'il peut voir (par exemple, `@security-agent`, `@a11y-detector`).
107+
4. Si Copilot ne liste aucun agent, confirmez que le dossier `.github/agents/` est présent dans votre espace de travail et que les extensions Copilot sont activées.
108+
109+
![Panneau Copilot Chat affichant la liste des agents avec succès](../../images/lab-00/lab-00-copilot-chat-verify.png)
110+
111+
## Point de vérification
112+
113+
Avant de continuer, vérifiez :
114+
115+
* [ ] `node --version` retourne v20.x.x ou une version supérieure
116+
* [ ] Les quatre extensions VS Code sont installées et activées
117+
* [ ] Votre dépôt d'atelier est créé à partir du modèle et cloné localement
118+
* [ ] Copilot Chat répond et liste les agents de l'espace de travail
119+
120+
## Étapes suivantes
121+
122+
Passez au [Lab 01 — Explorer l'application exemple](lab-01.md).

‎fr/labs/lab-01.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
permalink: /fr/labs/lab-01
3+
title: "Lab 01 - Explorer l'application exemple"
4+
description: "Parcourir la structure du dépôt de l'atelier, identifier les quatre domaines d'agents, exécuter l'application exemple localement et découvrir les vulnérabilités intentionnelles."
5+
---
6+
7+
## Aperçu
8+
9+
| | |
10+
|---|---|
11+
| **Durée** | 25 minutes |
12+
| **Niveau** | Débutant |
13+
| **Prérequis** | [Lab 00](lab-00-setup.md) |
14+
15+
## Objectifs d'apprentissage
16+
17+
À la fin de ce lab, vous serez en mesure de :
18+
19+
* Naviguer dans la structure du dépôt de l'atelier et identifier les répertoires clés
20+
* Identifier les quatre domaines d'agents : Sécurité, Accessibilité, Qualité du code et FinOps
21+
* Exécuter l'application exemple Next.js localement
22+
* Découvrir les vulnérabilités intentionnelles intégrées dans l'application exemple
23+
24+
## Exercices
25+
26+
### Exercice 1.1 : Explorer la structure du dépôt
27+
28+
Ouvrez l'explorateur VS Code (`Ctrl+Shift+E`) et examinez l'arborescence des répertoires de premier niveau :
29+
30+
| Répertoire | Objectif |
31+
|---|---|
32+
| `.github/agents/` | Définitions d'agents Copilot personnalisés (un fichier `.agent.md` par agent) |
33+
| `.github/instructions/` | Règles permanentes que Copilot applique automatiquement en fonction des globs `applyTo` |
34+
| `.github/prompts/` | Modèles de prompts réutilisables invoqués à la demande |
35+
| `.github/skills/` | Paquets de connaissances de domaine chargés par les agents lorsqu'ils ont besoin d'un contexte approfondi |
36+
| `sample-app/` | Une application Next.js avec des problèmes intentionnels de sécurité, d'accessibilité et de FinOps |
37+
38+
Prenez un moment pour développer chaque répertoire et noter le nombre de fichiers qu'il contient.
39+
40+
![Explorateur VS Code montrant l'arborescence du dépôt](../../images/lab-01/lab-01-folder-structure.png)
41+
42+
### Exercice 1.2 : Examiner les problèmes intentionnels
43+
44+
L'application exemple inclut des vulnérabilités délibérées que les agents détecteront dans les labs suivants. Ouvrez chaque fichier ci-dessous, trouvez les commentaires `INTENTIONAL-VULNERABILITY` et notez ce que vous observez.
45+
46+
1. **`sample-app/src/lib/auth.ts`** — Cryptographie faible et jetons prévisibles.
47+
* `Math.random()` utilisé pour la génération de jetons de session (ligne 38–39)
48+
* `md5` utilisé pour le hachage des mots de passe (ligne 12)
49+
* Secret JWT et clé API codés en dur (lignes 4–7)
50+
51+
2. **`sample-app/src/lib/db.ts`** — Injection SQL via concaténation de chaînes.
52+
* `getProductById()` construit le SQL avec interpolation de chaînes (ligne 33)
53+
* `searchProducts()` fait de même (ligne 39)
54+
* Chaîne de connexion à la base de données codée en dur avec identifiants en clair (ligne 4)
55+
56+
3. **`sample-app/src/components/ProductCard.tsx`** — Cross-site scripting (XSS).
57+
* `dangerouslySetInnerHTML` affiche des descriptions fournies par l'utilisateur sans assainissement (ligne 24)
58+
59+
4. **`sample-app/infra/main.bicep`** — SKU surdimensionnés et mauvaises configurations de sécurité.
60+
* Plan App Service Premium V3 pour une application exemple (ligne 28)
61+
* Réplication de stockage GRS là où LRS suffirait (ligne 68)
62+
* Trafic HTTP autorisé, TLS 1.0 permis (lignes 51–53)
63+
* Mot de passe administrateur SQL en clair comme paramètre (ligne 16)
64+
65+
![Éditeur de code montrant une vulnérabilité intentionnelle](../../images/lab-01/lab-01-issue-markers.png)
66+
67+
### Exercice 1.3 : Exécuter l'application exemple
68+
69+
1. Ouvrez un terminal dans VS Code (`Ctrl+`` `) et naviguez vers l'application exemple :
70+
71+
```bash
72+
cd sample-app
73+
```
74+
75+
2. Installez les dépendances :
76+
77+
```bash
78+
npm install
79+
```
80+
81+
3. Démarrez le serveur de développement :
82+
83+
```bash
84+
npm run dev
85+
```
86+
87+
4. Ouvrez <http://localhost:3000> dans votre navigateur.
88+
5. Parcourez la page des produits et cliquez sur un produit pour afficher sa page de détails.
89+
6. Lorsque vous avez terminé l'exploration, arrêtez le serveur de développement avec `Ctrl+C`.
90+
91+
![Navigateur montrant l'application exemple à localhost:3000](../../images/lab-01/lab-01-app-running.png)
92+
93+
### Exercice 1.4 : Noter le flux de création à partir du modèle
94+
95+
Lorsque d'autres participants rejoignent l'atelier, ils créent leur propre dépôt à partir de ce modèle en utilisant le bouton GitHub **Use this template**. C'est la même étape que vous avez réalisée dans le Lab 00, Exercice 0.3.
96+
97+
Notez comment le modèle préserve l'intégralité de la structure des répertoires, les définitions d'agents et l'application exemple afin que chaque étudiant parte de la même base.
98+
99+
![Boîte de dialogue GitHub « Use this template »](../../images/lab-01/lab-01-template-create.png)
100+
101+
## Point de vérification
102+
103+
Avant de continuer, vérifiez :
104+
105+
* [ ] Vous pouvez identifier les cinq répertoires clés (`.github/agents/`, `.github/instructions/`, `.github/prompts/`, `.github/skills/`, `sample-app/`)
106+
* [ ] Vous avez trouvé au moins trois vulnérabilités intentionnelles par nom de fichier
107+
* [ ] L'application exemple s'exécute localement à <http://localhost:3000>
108+
* [ ] Vous comprenez que les quatre domaines d'agents sont Sécurité, Accessibilité, Qualité du code et FinOps
109+
110+
## Étapes suivantes
111+
112+
Passez au [Lab 02 — Comprendre les agents, les skills et les instructions](lab-02.md).

0 commit comments

Comments
 (0)