Exercice – Envoyer (push) un changement via le pipeline

19 minutes

Dans cette unité, vous allez pratiquer le flux de travail de code complet en envoyant une petite modification au site web Space Game vers GitHub.

Mara a été chargé de modifier du texte sur 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 :

Synchronisez votre référentiel local avec la branche la plus récente main sur GitHub.
Créez une branche pour contenir vos modifications.
Apportez les modifications de code dont vous avez besoin et vérifiez-les localement.
Poussez votre branche vers GitHub.
Fusionnez les modifications récentes de la main branche sur GitHub dans votre branche de travail locale et vérifiez que vos modifications fonctionnent toujours.
Envoyez les modifications restantes, observez Azure Pipelines générer l’application et soumettez votre pull request.

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.

Dans votre terminal, exécutez git checkout main pour basculer vers la branche main :
```
git checkout main
```
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 référentiel Git où les membres de l’équipe collaborent (par exemple sur GitHub) est appelé distant. Ici, l’origine spécifie votre référentiel sur GitHub.

Plus tard, vous allez extraire le code de démarrage à partir du dépôt Microsoft GitHub, appelé en 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.

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
```
Exécutez la commande dotnet run suivante pour exécuter l’application :
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
Conseil

Si vous voyez une erreur dans votre navigateur lié à 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 consultez ce billet de blog pour plus d’informations.

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 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 :

Capture d’écran du site web Space Game s’exécutant dans un navigateur web.

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.

Lorsque vous avez terminé, revenez à la fenêtre de terminal, puis 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

Dans Visual Studio Code, ouvrez Index.cshtml dans le répertoire Tailspin.SpaceGame.Web/Views/Home .
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.
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.
Dans votre terminal, exécutez la commande dotnet build suivante pour générer l’application :
```
dotnet build --configuration Release
```

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

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

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.

Lorsque 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

Ici, vous allez mettre en scène vos modifications apportées à Index.cshtml, valider la modification dans votre branche et envoyer (push) votre branche vers GitHub.

Exécutez git status pour vérifier si votre branche comporte des modifications non commitées :
```
git status
```
Vous verrez que Index.cshtml a été modifié. Comme précédemment, l’étape suivante consiste à s’assurer que Git effectue le suivi de ce fichier, qui est appelé préproduction du fichier.
Exécutez la commande suivante git add pour mettre en scène Index.cshtml :
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
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"
```
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
```
Comme précédemment, vous pouvez localiser votre branche sur GitHub à partir de la zone de liste déroulante de branches.

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 consulter ou passer à la branche main. Ensuite, fusionnez la branche distante main avec votre branche locale main .

Ensuite, consultez votre branche de fonctionnalité, puis fusionnez votre branche de fonctionnalité avec la main branche.

Essayons le processus maintenant.

Dans votre terminal, exécutez la commande git checkout suivante pour extraire la branche main :
```
git checkout main
```
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.
```
Pour extraire votre branche de caractéristiques, exécutez git checkout :
```
git checkout feature/home-page-text
```
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.

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
```

Soumettre une demande de tirage (pull request)

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

Dans un navigateur, connectez-vous à GitHub.
Accédez à votre dépôt mslearn-tailspin-spacegame-web .
Dans la liste déroulante, sélectionnez votre branche feature/home-page-text.
Pour démarrer votre demande de tirage, sélectionnez Contribuer , puis Ouvrez la demande de tirage.
Vérifiez que la liste déroulante de base spécifie votre référentiel et non le référentiel Microsoft.

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.
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.
Pour terminer votre demande de tirage, sélectionnez Créer une demande de tirage.

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.
Si vous le souhaitez, sélectionnez le lien Détails ou accédez à votre projet sur Azure DevOps et regardez l’exécution du pipeline.
Une fois la génération terminée, revenez à votre demande de tirage sur GitHub.
Sélectionnez Requête de tirage de fusion, puis sélectionnez Confirmer la fusion.
Sélectionnez Supprimer la branche pour supprimer la feature/home-page-text branche à partir de GitHub.

Commentaires

Cette page a-t-elle été utile ?