Skip to content

02-javascript.md

Latest commit

 

History

History
169 lines (117 loc) · 8.1 KB

02-javascript.md

File metadata and controls

169 lines (117 loc) · 8.1 KB
Raw

02: Développement Frontend JavaScript

Scénario

Contoso est une entreprise qui vend des produits pour diverses activités de plein air. Le département marketing de Contoso souhaiterait lancer un site web de micro-médias sociaux pour promouvoir leurs produits auprès des clients existants et potentiels.

En tant que développeur JavaScript, vous allez construire une application frontend JavaScript en utilisant React qui communique avec l'application API backend Python.

Prérequis

Consultez le document README pour la préparation.

Commencer

Vérifier le Mode Agent GitHub Copilot

  1. Cliquez sur l'icône GitHub Copilot en haut de GitHub Codespace ou VS Code et ouvrez la fenêtre GitHub Copilot.

    Ouvrir GitHub Copilot Chat

  2. Si on vous demande de vous connecter ou de vous inscrire, faites-le. C'est gratuit.

  3. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot.

    Mode Agent GitHub Copilot

  4. Sélectionnez le modèle soit GPT-4.1 soit Claude Sonnet 4.

  5. Assurez-vous que vous avez configuré les Serveurs MCP.

Préparer les Instructions Personnalisées

  1. Définissez la variable d'environnement de $REPOSITORY_ROOT.

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  2. Copiez les instructions personnalisées.

    # bash/zsh
cp -r $REPOSITORY_ROOT/docs/custom-instructions/javascript/. \
      $REPOSITORY_ROOT/.github/
    # PowerShell
Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/javascript/* `
          -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force

Préparer le Projet d'Application

  1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle Claude Sonnet 4 ou GPT-4.1.

  2. Assurez-vous que le serveur MCP context7 est en cours d'exécution.

  3. Utilisez une invite comme ci-dessous pour échafauder un projet d'application web React.

    J'aimerais échafauder une application web React. Suivez les instructions ci-dessous.

- Assurez-vous que c'est l'application web, pas l'application mobile.
- Votre répertoire de travail est `javascript`.
- Identifiez d'abord toutes les étapes que vous allez effectuer.
- Utilisez ViteJS comme framework d'application frontend.
- Utilisez les paramètres par défaut lors de l'initialisation du projet.
- Utilisez `SimpleSocialMediaApplication` comme nom du projet lors de l'initialisation.
- Utilisez le numéro de port `3000`.
- Initialisez seulement le projet. N'allez PAS plus loin.

  4. Cliquez sur le bouton l'image du bouton "keep" de GitHub Copilot pour prendre les modifications.

Préparer le Serveur MCP Figma

  1. Assurez-vous que vous avez configuré les Serveurs MCP.
  2. Obtenez le jeton d'accès personnel (PAT) depuis Figma.
  3. Ouvrez la Palette de Commandes en tapant F1 ou Ctrl+Shift+P sur Windows ou Cmd+Shift+P sur Mac OS, et recherchez MCP: List Servers.
  4. Choisissez Framelink Figma MCP puis cliquez sur Start Server.
  5. Entrez le PAT que vous avez obtenu de Figma.

Générer les Composants UI depuis Figma

  1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle Claude Sonnet 4 ou GPT-4.1.

  2. Assurez-vous que vous exécutez le serveur MCP Figma.

  3. Copiez le modèle de conception Figma vers votre compte.

    Page de modèle de conception Figma

  4. Faites un clic droit sur chaque section - Home, Search, Post Details, Post Modal et Name Input Modal 👉 Sélectionnez Copy/Paste as 👉 Sélectionnez Copy link to selection pour obtenir le lien vers chaque section. Notez les cinq liens.

Exécuter l'Application Backend FastAPI

  1. Assurez-vous que l'application backend FastAPI est lancée et en cours d'exécution.

    Exécutez l'API backend FastAPI, qui se trouve dans le répertoire `python`.

    NOTE: Vous pouvez utiliser l'application d'exemple complete/python à la place.

  2. Si vous utilisez GitHub Codespaces, assurez-vous que le numéro de port 8000 est défini sur public au lieu de private. Sinon, vous obtiendrez l'erreur 401 lors de l'accès depuis l'application frontend.

Construire l'Application Frontend React

  1. Assurez-vous que vous utilisez le Mode Agent GitHub Copilot avec le modèle Claude Sonnet 4 ou GPT-4.1.

  2. Assurez-vous que le serveur MCP context7 est en cours d'exécution.

  3. Assurez-vous que vous avez tous les liens de section Figma des 5 récupérés de la section précédente.

  4. Ajoutez product-requirements.md et openapi.yaml à GitHub Copilot.

  5. Utilisez une invite comme ci-dessous pour construire l'application basée sur les exigences et le document OpenAPI.

    J'aimerais construire une application web React. Suivez les instructions ci-dessous.

- Votre répertoire de travail est `javascript`.
- Identifiez d'abord toutes les étapes que vous allez effectuer.
- Il y a une application API backend qui fonctionne sur `http://localhost:8000`.
- Utilisez `openapi.yaml` qui décrit tous les points de terminaison et le schéma de données.
- Utilisez le numéro de port `3000`.
- Créez tous les composants UI définis dans ce lien : {{FIGMA_SECTION_LINK}}.
- N'ajoutez RIEN qui ne soit pas lié aux composants UI.
- N'ajoutez RIEN qui ne soit pas défini dans `openapi.yaml`.
- NE modifiez RIEN de ce qui est défini dans `openapi.yaml`.
- Donnez une indication visuelle quand l'API backend est indisponible ou inaccessible pour quelque raison que ce soit.

  6. Répétez quatre fois de plus pour les quatre autres liens de conception Figma.

  7. Cliquez sur le bouton l'image du bouton "keep" de GitHub Copilot pour prendre les modifications.

Vérifier l'Application Frontend React

  1. Assurez-vous que l'application backend FastAPI est lancée et en cours d'exécution.

    Exécutez l'API backend FastAPI, qui se trouve dans le répertoire `python`.

  2. Vérifiez si elle est construite correctement ou non.

    Exécutez l'application React et vérifiez si l'application fonctionne correctement.

Si l'exécution de l'application échoue, analysez les problèmes et corrigez-les.

  3. Ouvrez un navigateur web et naviguez vers http://localhost:3000.

  4. Vérifiez si les applications frontend et backend fonctionnent correctement.

  5. Cliquez sur le bouton [keep] de GitHub Copilot pour prendre les modifications.

OK. Vous avez terminé l'étape "JavaScript". Passons à ÉTAPE 03: Migration Java depuis Python.

Avertissement: Ce document a été localisé par GitHub Copilot. Par conséquent, il peut contenir des erreurs. Si vous trouvez une traduction inappropriée ou erronée, veuillez créer un issue.