Exercice - Pousser une modification via le pipeline

  • 19 minutes

Dans cette unité, vous utilisez le workflow de code complet en poussant sur GitHub une petite modification apportée au site web Space Game.

Mara s’est vu confier la tâche de changer du texte dans la page d’accueil du site web, Index.cshtml. Dans cette unité, vous allez suivre la procédure.

Passons brièvement en revue les étapes à suivre pour effectuer la tâche :

  • Synchroniser votre répertoire local avec la branche main la plus récente sur GitHub
  • Créer une branche destinée à stocker vos modifications
  • Apporter les modifications au code dont vous avez besoin et les vérifier localement
  • Pousser votre branche vers GitHub
  • Fusionner toutes les modifications récentes de la branche main sur GitHub dans votre branche de travail locale, et vérifier que vos modifications fonctionnent toujours
  • Apporter les modifications restantes, regarder Azure Pipelines générer l'application, et soumettre votre requête d'extraction

Récupérer la dernière branche main

Dans l’unité précédente, vous avez créé une demande de tirage et fusionné votre branche code-workflow dans la branche main sur GitHub. Vous devez à présent tirer les modifications apportées à main dans votre branche locale.

La commande git pull récupère le code le plus récent du dépôt distant et le fusionne dans votre dépôt local. De cette façon, vous savez que vous utilisez le codebase le plus récent.

  1. Dans votre terminal, exécutez git checkout main pour basculer vers la branche main :

    git checkout main

  2. Pour extraire les dernières modifications, exécutez la commande git pull suivante :

    git pull origin main

    Vous pouvez voir la liste des fichiers qui ont été changés. En guise d’étape facultative, vous pouvez ouvrir le fichier azure-pipelines.yml pour vérifier qu’il contient votre configuration de build complète.

    Rappelez-vous qu’un dépôt Git dans lequel les membres de l’équipe collaborent (par exemple sur GitHub) est appelé dépôt distant. Ici, origin Spécifie votre dépôt sur GitHub.

    Plus tard, vous récupérerez le code de démarrage du dépôt Microsoft GitHub, appelé dépôt amont.

Générer et exécuter l’application web

Afin de vérifier que vous disposez d’une copie de travail pour commencer vos modifications, générez et exécutez l’application web localement.

  1. Dans Visual Studio Code, accédez à la fenêtre de terminal et exécutez la commande dotnet build suivante pour générer l’application :

    dotnet build --configuration Release

  2. Exécutez la commande dotnet run suivante pour exécuter l’application :

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    Conseil

    Si, dans votre navigateur, vous voyez une erreur de confidentialité ou de certificat, sélectionnez Ctrl+C à partir de votre terminal pour arrêter l’application en cours d’exécution.

    Ensuite, exécutez dotnet dev-certs https --trust et sélectionnez Oui lorsque vous y êtes invité, ou reportez-vous à ce billet de blog pour en savoir plus.

    Une fois que votre ordinateur a approuvé votre certificat SSL local, exécutez la commande dotnet run une deuxième fois et accédez à http://localhost:5000 à partir d’un nouvel onglet de navigateur pour voir l’application en cours d’exécution.

Vérifier que l’application est en cours d’exécution

En mode de développement, le site web Space Game est configuré pour s’exécuter sur le port 5000.

Sous un nouvel onglet de navigateur, accédez à http://localhost:5000 pour voir l’application en cours d’exécution.

Vous devriez voir ce qui suit :

Screenshot of the Space Game website running in a web browser.

Vous pouvez interagir avec la page, notamment avec le leaderboard. Quand vous sélectionnez le nom d’un joueur, les détails qui le concernent s’affichent.

Quand vous avez terminé, revenez à la fenêtre de terminal et sélectionnez Ctrl+C, pour arrêter l’application en cours d’exécution.

Créer une branche de fonctionnalité

Dans cette section, vous allez créer une branche Git afin de pouvoir travailler sur des fichiers sans affecter les autres utilisateurs. Il sera même impossible à quiconque de savoir que vous travaillez sur ces fichiers tant que vous ne les avez pas poussés vers le dépôt distant.

Pour créer une branche, vous utilisez la commande git checkout et donnez un nom à votre branche, comme vous l’avez fait dans la partie précédente.

Avant de créer une branche, il est judicieux d’adopter une convention de nommage. Par exemple, si vous créez la branche pour travailler sur une nouvelle fonctionnalité, vous pouvez utiliser feature/<branch-name>. Pour une résolution de bogue, vous pouvez utiliser bugfix/<bug-number>. Dans cet exemple, le nom de votre branche est feature/home-page-text.

Dans votre terminal, exécutez la commande git checkout suivante :

git checkout -B feature/home-page-text

Comme auparavant, la branche feature/home-page-text est basée sur la branche main.

Apporter des changements et les tester localement

  1. Dans Visual Studio Code, ouvrez Index.cshtml dans le répertoire Tailspin.SpaceGame.Web/Views/Home.

  2. Recherchez ce texte en haut de la page :

    <p>An example site for learning</p>

    Conseil

    Visual Studio Code offre également un moyen simple de rechercher du texte dans des fichiers. Pour accéder au volet de recherche, sélectionnez l’icône en forme de loupe dans le volet latéral.

  3. Remplacez le texte de l’étape précédente par le texte « mal orthographié » suivant, puis enregistrez le fichier :

    <p>Welcome to the oficial Space Game site!</p>

    Notez que le mot « oficial » est intentionnellement mal orthographié. Nous traiterons cette erreur plus loin dans ce module.

  4. Dans votre terminal, exécutez la commande dotnet build suivante pour générer l’application :

    dotnet build --configuration Release

  5. Exécutez la commande dotnet run suivante pour exécuter l’application :

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

  6. Sous un nouvel onglet de navigateur, accédez à http://localhost:5000 pour voir l’application en cours d’exécution.

    Vous pouvez voir que la page d’accueil contient le texte mis à jour.

    Screenshot of the Space Game website with updated text. The text contains a spelling error.

    Quand vous avez terminé, revenez à la fenêtre de terminal, puis appuyez sur Ctrl+C pour arrêter l’application en cours d’exécution.

Commiter et pousser votre branche

Dans cette section, vous allez indexer les modifications que vous avez apportées à Index.cshtml, commiter la modification dans votre branche et pousser celle-ci vers GitHub.

  1. Exécutez git status pour vérifier si votre branche comporte des modifications non commitées :

    git status

    Vous voyez que le fichier Index.cshtml a été modifié. Comme auparavant, l’étape suivante consiste à s’assurer que Git effectue le suivi de ce fichier (ce processus est appelé indexation du fichier).

  2. Exécutez la commande git add suivante pour indexer Index.cshtml :

    git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml

  3. Exécutez la commande git commit suivante pour commiter votre fichier indexé dans la branche feature/home-page-text :

    git commit -m "Improve the text at the top of the home page"

  4. Exécutez cette commande git push pour pousser, ou charger, la branche feature/home-page-text vers votre dépôt sur GitHub :

    git push origin feature/home-page-text

  5. Comme précédemment, vous pouvez localiser votre branche sur GitHub à partir de la zone de liste déroulante de branches.

    Screenshot of GitHub showing the new branch.

Regarder Azure Pipelines générer l’application

Tout comme vous l’avez fait avant, Azure Pipelines met automatiquement en file d’attente la build quand vous poussez des modifications vers GitHub.

En guise d’étape facultative, tracez la build au fur et à mesure de son déplacement dans le pipeline, puis vérifiez qu’elle est réussie.

Synchroniser les changements dans la branche main

Pendant que vous étiez occupé à travailler sur votre fonctionnalité, des modifications ont peut-être été apportées à la branche main distante. Avant de créer une demande de tirage, il est courant d’obtenir la dernière de la branche main distante.

Pour ce faire, vous devez d'abord extraire ou basculer vers la branche main, puis fusionner la branche main distante avec votre branche main locale.

Ensuite, vérifiez votre branche de caractéristiques, puis fusionnez votre branche de caractéristiques avec la branche main.

Essayons le processus maintenant.

  1. Dans votre terminal, exécutez la commande git checkout suivante pour extraire la branche main :

    git checkout main

  2. Pour télécharger les dernières modifications apportées à la branche main distante et les fusionner dans votre branche main locale, exécutez la commande git pullsuivante :

    git pull origin main

    Étant donné que personne n’a apporté de modifications à votre branche main, la commande suivante vous indique que tout est à jour.

    From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.

  3. Pour extraire votre branche de caractéristiques, exécutez git checkout :

    git checkout feature/home-page-text

  4. fusionnez votre branche de caractéristiques avec main :

    git merge main

    Là encore, personne n’ayant réellement apporté de modifications à votre branche main, vous constatez que tout est toujours à jour.

    Already up to date.

    Si vous avez incorporé des modifications, vous pouvez retester votre application pour vous assurer qu’elle fonctionne toujours.

Pousser votre branche locale une deuxième fois

Quand vous incorporez des modifications du dépôt distant dans votre branche de fonctionnalité locale, vous devez pousser votre branche locale vers le dépôt distant une deuxième fois.

Même si vous n’avez pas incorporé de modifications à partir du dépôt distant, nous allons mettre en pratique le processus pour voir ce qui se passe.

  1. Exécutez la commande git push suivante pour pousser vos modifications vers GitHub :

    git push origin feature/home-page-text

    Une fois encore, la réponse indique que tout est à jour, car aucune modification n’a été apportée.

    Everything up-to-date

Envoyer une demande de tirage

Dans cette section, vous envoyez une demande de tirage comme vous l’avez fait auparavant.

  1. Dans un navigateur, connectez-vous à GitHub.

  2. Accédez au dépôt mslearn-tailspin-spacegame-web.

  3. Dans la liste déroulante, sélectionnez votre branche feature/home-page-text.

  4. Pour démarrer votre demande de tirage, sélectionnez Contribute, puis Opein pull request.

  5. Vérifiez que la liste déroulante base spécifie votre dépôt et non pas le dépôt Microsoft.

    Screenshot of GitHub confirming that the branch can be merged.

    Important

    Là encore, cette étape est importante, car vous ne pouvez pas fusionner vos modifications dans le dépôt Microsoft.

    Quand vous travaillez directement avec votre propre dépôt, et non pas avec une duplication (fork), votre branche main est sélectionnée par défaut.

  6. Entrez un titre et une description pour votre demande de tirage.

    • Titre : Améliorer le texte en haut de la page d’accueil
    • Description : Réception du dernier texte de la page d’accueil de l’équipe produit.

  7. Pour terminer votre demande de tirage, sélectionnez Create pull request.

    Cette étape ne fusionne aucun code. Elle indique aux autres personnes que vous proposez la fusion de modifications.

    La fenêtre de la demande de tirage s’affiche. Comme auparavant, une demande de tirage déclenche par défaut la génération de votre application par Azure Pipelines.

  8. Si vous le souhaitez, sélectionnez le lien Details ou accédez à votre projet sur Azure DevOps et observez l’exécution du pipeline.

  9. Une fois la génération terminée, revenez à votre demande de tirage sur GitHub.

  10. Sélectionnez Merge pull request, puis Confirm merge.

  11. Sélectionnez Delete branch pour supprimer la branche feature/home-page-text de GitHub.