Oefening: een wijziging via de pipeline pushen

19 minuten

In deze les oefent u de volledige codewerkstroom door een kleine wijziging naar de Space Game-website naar GitHub te pushen.

Mara heeft de taak gekregen om tekst te wijzigen op de startpagina van de website, Index.cshtml. In deze les volgt u de stappen.

Laten we kort de stappen bekijken die u moet volgen om de taak te voltooien:

Synchroniseer uw lokale opslagplaats met de meest recente main vertakking op GitHub.
Maak een branch om je wijzigingen bij te houden.
Breng de codewijzigingen aan die u nodig hebt en verifieer ze lokaal.
Push je branch naar GitHub.
Voeg recente wijzigingen uit de main-vertakking op GitHub samen in uw lokale werkbranch en controleer of uw wijzigingen nog steeds werken.
Push eventuele resterende wijzigingen omhoog, kijk toe hoe Azure Pipelines de applicatie bouwt en dien uw pull request in.

De meest recente hoofdbranch ophalen

In de vorige les hebt u een pull-aanvraag gemaakt en uw code-workflow vertakking samengevoegd in de main vertakking op GitHub. Nu moet u de wijzigingen aan main weer ophalen in uw lokale vertakking.

Met de opdracht git pull downloadt u de meest recente code van de externe opslagplaats en voegt u deze samen in uw lokale opslagplaats. Op deze manier weet u dat u met de meest recente codebasis werkt.

Voer in uw terminal uit git checkout main om over te schakelen naar de main vertakking:
```
git checkout main
```
Voer deze git pull opdracht uit om de meest recente wijzigingen op te halen:
```
git pull origin main
```
U kunt de lijst met gewijzigde bestanden bekijken. Als optionele stap kunt u het azure-pipelines.yml-bestand openen om te controleren of het de volledige buildconfiguratie bevat.

U herinnert zich misschien dat een Git-opslagplaats waar teamleden samenwerken (zoals in GitHub) een externe opslagplaats wordt genoemd. Hier geeft oorsprong de opslagplaats in GitHub aan.

Later haalt u starterscode op uit de Microsoft GitHub-opslagplaats, ook wel upstream genoemd.

De webtoepassing bouwen en uitvoeren

Om ervoor te zorgen dat u een werkende kopie hebt om uw wijzigingen te starten, bouwt en voert u de webtoepassing lokaal uit.

Ga in Visual Studio Code naar het terminalvenster en voer de volgende dotnet build opdracht uit om de toepassing te bouwen:
```
dotnet build --configuration Release
```
Voer de volgende dotnet run opdracht uit om de toepassing uit te voeren:
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
Tip

Als er een fout wordt weergegeven in uw browser die is gerelateerd aan een privacy- of certificaatfout, selecteert u Ctrl+C in uw terminal om de actieve toepassing te stoppen.

Voer vervolgens Ja uit dotnet dev-certs https --trust en selecteer Ja wanneer u hierom wordt gevraagd of zie dit blogbericht voor meer informatie.

Nadat uw computer uw lokale SSL-certificaat vertrouwt, voert u de dotnet run opdracht een tweede keer uit en gaat u naar http://localhost:5000 een nieuw browsertabblad om de actieve toepassing te zien.

Controleer of de toepassing wordt uitgevoerd

In de ontwikkelmodus is de Space Game-website geconfigureerd voor uitvoering op poort 5000.

Navigeer in een nieuw browsertabblad naar http://localhost:5000 de actieve toepassing.

U ziet dit als volgt:

Schermopname van de Space Game-website die wordt uitgevoerd in een webbrowser.

U kunt communiceren met de pagina, inclusief het leaderboard. Wanneer u de naam van een speler selecteert, ziet u details over die speler.

Wanneer u klaar bent, gaat u terug naar het terminalvenster en selecteert u Ctrl+C om de actieve toepassing te stoppen.

Een functievertakking maken

In deze sectie maakt u een Git-vertakking, zodat u aan bestanden kunt werken zonder dat dit van invloed is op anderen. Niemand weet zelfs dat u aan deze bestanden werkt, totdat u ze naar de externe opslagplaats pusht.

Als u een vertakking wilt maken, gebruikt u de git checkout opdracht en geeft u uw vertakking een naam, net zoals in het vorige gedeelte.

Wanneer u een vertakking maakt, is het een goed idee om een naamconventie te volgen. Bijvoorbeeld, als uw vertakking is bedoeld voor een nieuwe functie, zou u feature/<branch-name> kunnen gebruiken. Voor de oplossing van een probleem zou u bugfix/<bug-number> kunnen gebruiken. In dit voorbeeld is feature/home-page-textde naam van uw vertakking.

Voer in de terminal de volgende git checkout opdracht uit:

git checkout -B feature/home-page-text

Net als voorheen is het feature/home-page-text gebaseerd op de main vertakking.

Wijzigingen aanbrengen en deze lokaal testen

Open Index.cshtml in Visual Studio Code in de map Tailspin.SpaceGame.Web/Views/Home.
Zoek naar deze tekst boven aan de pagina:
```
<p>An example site for learning</p>
```
Tip

Visual Studio Code biedt ook een eenvoudige manier om tekst in bestanden te zoeken. Als u het zoekvenster wilt openen, selecteert u het vergrootglaspictogram in het zijvenster.
Vervang de tekst in de vorige stap door de volgende 'verkeerd getypte' tekst en sla het bestand op:
```
<p>Welcome to the oficial Space Game site!</p>
```
Houd er rekening mee dat het woord 'oficial' opzettelijk verkeerd is getypt. Deze fout wordt verderop in deze module opgelost.
Voer in uw terminal de volgende dotnet build opdracht uit om de toepassing te bouwen:
```
dotnet build --configuration Release
```

Voer de volgende dotnet run opdracht uit om de toepassing uit te voeren:

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

Ga op een nieuw browsertabblad naar http://localhost:5000 de actieve toepassing.

U kunt zien dat de startpagina de bijgewerkte tekst bevat.

Wanneer u klaar bent, gaat u terug naar het terminalvenster en drukt u op Ctrl+C om de actieve toepassing te stoppen.

Uw vertakking doorvoeren en pushen

Hier moet u uw wijzigingen faseren naar Index.cshtml, de wijziging doorvoeren in uw vertakking en de vertakking naar GitHub pushen.

Voer git status deze opdracht uit om te controleren of er niet-doorgevoerde wijzigingen in uw vertakking zijn:
```
git status
```
U ziet dat Index.cshtml is gewijzigd. Net als voorheen is de volgende stap ervoor te zorgen dat Git dit bestand bijhoudt. Dit wordt staging van het bestand genoemd.
Voer de volgende git add opdracht uit om Index.cshtml te faseeren:
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
Voer de volgende git commit opdracht uit om het gefaseerde bestand door te voeren naar de feature/home-page-text vertakking:
```
git commit -m "Improve the text at the top of the home page"
```
Voer deze git push opdracht uit om de feature/home-page-text vertakking naar uw opslagplaats op GitHub te pushen of uploaden:
```
git push origin feature/home-page-text
```
Net als voorheen kunt u uw vertakking vinden op GitHub vanuit de vervolgkeuzelijst vertakking.

Bekijken hoe de toepassing wordt gemaakt in Azure Pipelines

Net zoals eerder, wordt de build door Azure Pipelines automatisch in de wachtrij geplaatst wanneer u wijzigingen naar GitHub pusht.

Als optionele stap kunt u de build traceren terwijl deze door de pijplijn loopt en controleren of de build slaagt.

Eventuele wijzigingen synchroniseren met de hoofdbranch

Terwijl u bezig was met het werken aan uw functie, zijn er mogelijk wijzigingen aangebracht in de externe main vertakking. Voordat u een pull-aanvraag maakt, is het gebruikelijk om de nieuwste versie van de externe main vertakking op te halen.

Om dit te doen, moet je eerst de main branch uitchecken of ernaartoe overschakelen. Voeg vervolgens de externe main-tak samen met uw lokale main-tak.

Controleer vervolgens je feature-branch en voeg deze daarna samen met de main vertakking.

We gaan het proces eens proberen.

Voer in de terminal deze git checkout opdracht uit om de main vertakking te bekijken:
```
git checkout main
```
Als u de meest recente wijzigingen in de externe main vertakking wilt downloaden en deze wijzigingen wilt samenvoegen in uw lokale main vertakking, voert u deze git pull opdracht uit:
```
git pull origin main
```
Omdat niemand daadwerkelijk wijzigingen heeft aangebracht in uw main vertakking, geeft de volgende opdracht aan dat alles al up-to-date is.
```
From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.
```
Als u uw functiebranch wilt uitchecken, voert u het volgende uit git checkout:
```
git checkout feature/home-page-text
```
Voeg uw functiebranch samen met main:
```
git merge main
```
Nogmaals, omdat niemand daadwerkelijk wijzigingen heeft aangebracht in uw main vertakking, ziet u dat alles nog steeds up-to-date is.
```
Already up to date.
```
Als u wijzigingen hebt opgenomen, wilt u de toepassing opnieuw testen om ervoor te zorgen dat alles nog steeds werkt.

De lokale branch opnieuw pushen

Wanneer u wijzigingen vanuit de externe opslagplaats in uw lokale functievertakking opneemt, moet u de lokale vertakking nog een keer naar de externe opslagplaats pushen.

Hoewel u geen wijzigingen vanuit de externe opslagplaats hebt opgenomen, gaan we het proces oefenen om te kijken wat er gebeurt.

Voer deze git push opdracht uit om uw wijzigingen naar GitHub te pushen:
```
git push origin feature/home-page-text
```
Nogmaals, het antwoord geeft aan dat u al up-to-date bent omdat er geen wijzigingen zijn aangebracht.
```
Everything up-to-date
```

Een pull-aanvraag indienen

In deze sectie verzendt u net als eerder een pull-aanvraag.

Meld u in een browser aan bij GitHub.
Ga naar uw opslagplaats mslearn-tailspin-spacegame-web .
Selecteer uw feature/home-page-text vertakking in de vervolgkeuzelijst.
Als u uw pull-aanvraag wilt starten, selecteert u Bijdragen en opent u vervolgens een pull-aanvraag.
Zorg ervoor dat in de vervolgkeuzelijst basis de opslagplaats wordt opgegeven en niet de Microsoft-opslagplaats.

Belangrijk

Deze stap is ook belangrijk omdat u uw wijzigingen niet kunt samenvoegen in de Microsoft-opslagplaats.

Wanneer u rechtstreeks met uw eigen opslagplaats werkt en niet met een fork, wordt uw main-vertakking standaard geselecteerd.
Voer een titel en een beschrijving in voor uw pull-aanvraag.
- Titel: De tekst boven aan de startpagina verbeteren
- Beschrijving: De meest recente startpaginatekst van het productteam ontvangen.
Selecteer Pull-aanvraag maken om uw pull-aanvraag te voltooien.

Met deze stap wordt er nog geen code samengevoegd. Hiermee wordt aan anderen aangegeven dat u wijzigingen hebt die u wilt samenvoegen.

Het venster pull-aanvraag wordt weergegeven. Net als voorheen activeert een pull-aanvraag Azure Pipelines om uw toepassing standaard te bouwen.
Selecteer eventueel de koppeling Details of ga naar uw project in Azure DevOps en bekijk de pijplijnuitvoering.
Wanneer de build is voltooid, gaat u terug naar uw pull-aanvraag op GitHub.
Selecteer Pull-aanvraag samenvoegen en selecteer Samenvoegen bevestigen.
Selecteer feature/home-page-text te verwijderen uit GitHub.