Lab 00 : Prérequis et configuration de l’environnement

[!NOTE] Cet atelier fait partie du Agentic Accelerator Framework.


Durée	30 minutes
Niveau	Débutant
Prérequis	Aucun

Objectifs d’apprentissage

À la fin de ce lab, vous serez en mesure de :

Forker et cloner le dépôt accessibility-scan-demo-app
Installer les outils requis (Node.js, Docker, GitHub CLI, Azure CLI, PowerShell 7+, Charm freeze)
Vérifier toutes les installations d’outils avec des contrôles de version
Installer les dépendances du scanner et les navigateurs Playwright
Démarrer le scanner d’accessibilité localement et confirmer son fonctionnement

Exercices

Exercice 0.1 : Forker et cloner les dépôts

Vous allez forker le dépôt du scanner afin d’avoir votre propre copie pour travailler.

Ouvrez un terminal (PowerShell 7+).

Forkez et clonez le dépôt du scanner à l’aide de GitHub CLI :

gh repo fork devopsabcs-engineering/accessibility-scan-demo-app --clone

Accédez au répertoire cloné :
```
cd accessibility-scan-demo-app
```
Vérifiez que le remote pointe vers votre fork :
```
git remote -v
```
Vous devriez voir votre nom d’utilisateur GitHub dans l’URL origin.

Forkez et clonez le dépôt de l’atelier :

gh repo fork devopsabcs-engineering/accessibility-scan-workshop --clone

[!TIP] Si vous n’avez pas encore installé GitHub CLI, vous l’installerez dans l’exercice suivant. Vous pouvez également forker via l’interface web GitHub et cloner manuellement avec git clone.

Exercice 0.2 : Installer les outils requis

Vous allez installer les outils utilisés tout au long de l’atelier.

Node.js 20+ — Téléchargez depuis nodejs.org ou installez via un gestionnaire de paquets :
```
# Windows
winget install OpenJS.NodeJS.LTS
```
```
# macOS
brew install node@20
```
Docker Desktop — Téléchargez depuis docker.com ou installez via un gestionnaire de paquets :
```
# Windows
winget install Docker.DockerDesktop
```

GitHub CLI — Installez le CLI gh :

# Windows
winget install GitHub.cli

# macOS
brew install gh

Azure CLI — Installez az :

# Windows
winget install Microsoft.AzureCLI

# macOS
brew install azure-cli

PowerShell 7+ — Installez la dernière version de PowerShell :

# Windows
winget install Microsoft.PowerShell

# macOS
brew install powershell/tap/powershell

Charm freeze — Installez l’outil de capture d’écran de terminal :

# Windows
winget install charmbracelet.freeze

# macOS
brew install charmbracelet/tap/freeze

[!TIP] Sous Windows, exécutez ces commandes dans un terminal PowerShell avec élévation de privilèges. Redémarrez votre terminal après l’installation afin que les outils soient disponibles dans votre PATH.

Exercice 0.3 : Vérifier les versions des outils

Vous allez exécuter des contrôles de version pour confirmer que chaque outil est correctement installé.

Node.js :
```
node --version
```
Sortie attendue : v20.x.x ou supérieure.
Docker :
```
docker --version
```
Sortie attendue : Docker version 2x.x.x ou supérieure.
GitHub CLI :
```
gh --version
```
Azure CLI :
```
az --version
```
PowerShell :
```
$PSVersionTable.PSVersion
```
Sortie attendue : 7.x.x ou supérieure.
Charm freeze :
```
freeze --version
```

[!CAUTION] Si un outil échoue au contrôle de version, résolvez le problème d’installation avant de continuer. Les labs suivants dépendent de la disponibilité de tous les outils.

Exercice 0.4 : Installer les dépendances du scanner

Vous allez installer les dépendances Node.js et le navigateur Playwright requis par le scanner.

Accédez à la racine du dépôt du scanner :
```
cd accessibility-scan-demo-app
```
Installez les dépendances Node.js :
```
npm install
```

Installez le navigateur Chromium de Playwright :

npx playwright install --with-deps chromium

[!NOTE] Le téléchargement du navigateur Playwright fait environ 150 Mo. Ce navigateur est utilisé par le scanner pour afficher les pages et exécuter les vérifications d’accessibilité.

Exercice 0.5 : Démarrer le scanner localement

Vous allez démarrer le scanner d’accessibilité et vérifier son fonctionnement.

Démarrez le scanner à l’aide du script de démarrage local :
```
./start-local.ps1
```
Le script lance le serveur de développement Next.js sur le port 3000.
Ouvrez votre navigateur et accédez à :
```
http://localhost:3000
```
Vérifiez que la page d’accueil du scanner se charge avec le formulaire d’analyse visible.
Laissez le scanner en cours d’exécution pour les labs suivants.

[!TIP] Si le port 3000 est déjà utilisé, arrêtez le processus en conflit ou exécutez d’abord ./stop-local.ps1. Vous pouvez également démarrer le scanner avec Docker en utilisant ./start-local.ps1 -Mode docker.

Point de vérification

Avant de continuer, vérifiez :

Dépôt forké et cloné localement
Les 6 outils installés et retournant une sortie de version (Node.js, Docker, gh, az, pwsh, freeze)
npm install terminé sans erreurs
Navigateur Chromium de Playwright installé
Scanner en cours d’exécution à http://localhost:3000

Étapes suivantes

Passez au Lab 01 : Explorer les applications de démonstration et les violations WCAG.