Exercice - Configurer le projet

  • 8 minutes

Tailwind Traders vient de vous embaucher comme développeur. Avant toute chose, vous devez configurer votre environnement de développement. Ne vous inquiétez pas, Tailwind Traders a simplifié le processus d’intégration. Dès que vous aurez effectué quelques étapes simples, vous pourrez vous mettre au travail.

Structurer les ressources du projet

  1. Activez le bac à sable et connectez-vous à Azure Cloud Shell (Tailwind Traders Production Environment) comme indiqué en haut de cette page.

  2. Copiez la ligne suivante, puis collez-la dans le terminal Azure Cloud Shell à droite.

    git clone https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions && ./mslearn-build-api-azure-functions/DB_SETUP/CREATE_DATABASE.sh

    Cette commande crée une base de données avec des données de produits. Ce processus peut prendre jusqu’à 10 minutes. Vous pouvez poursuivre les activités du module pendant ce temps. Le processus continue à s’exécuter même si vous quittez cette page.

Cloner le projet dans Visual Studio Code

  1. Ouvrez Visual Studio Code.

  2. Dans la barre de menus supérieure, sélectionnez Affichage>Palette de commandes.

  3. Dans l’invite, entrez Clone.

  4. Dans la palette de commandes, sélectionnez Git : Cloner.

  5. Entrez l’URL de référentiel suivante :

    https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions

  6. Sélectionnez un dossier sur votre lecteur local où vous souhaitez cloner le projet.

  7. Lorsque vous êtes invité à ouvrir le référentiel cloné, sélectionnez Ouvrir.

  8. Visual Studio Code détecte un fichier d’espace de travail dans ce projet et demande si vous souhaitez l’ouvrir. Sélectionnez Ouvrir l’espace de travail.

    Capture d’écran de la notification Visual Studio Code vous invitant à ouvrir l’espace de travail.

Lorsque l’espace de travail s’ouvre, deux projets apparaissent dans Visual Studio Code : frontend et api. Le projet « frontend » contient l’application web. Le projet api est l’endroit où vous générez l’API serverless avec Azure Functions.

Exécuter le projet front-end

  1. Pour ouvrir le terminal intégré dans Visual Studio Code, appuyez sur Ctrl + Maj + `.

  2. Sélectionnez frontend.

  3. Lancez le projet front-end dans le navigateur en exécutant la commande npm start dans le terminal intégré.

    npm start

    Un petit serveur web appelé serve s’exécute dans la fenêtre du terminal Visual Studio Code. Celui-ci affiche l’URL de l’emplacement où l’application front-end s’exécute.

    Capture d’écran du terminal Visual Studio Code avec une légende mettant en évidence l’URL et le port de l’application en cours d’exécution.

  4. Pour ouvrir l’application dans le navigateur, sélectionnez cette URL dans la fenêtre de terminal.

    L’application se charge, mais aucune donnée n’est présente, car vous n’avez pas créé l’API pour cette application.

    Capture d’écran de l’application en cours d’exécution dans un navigateur. Aucune donnée n’est affichée et un message d’erreur explique que l’opération Get a échoué.

Très bien ! Vous venez de configurer un environnement de développement qui va vous permettre de travailler de manière productive chez Tailwind Traders. Il est donc temps de créer le projet Azure Functions qui servira d’API pour l’application Products Manager.