Übung: Pushen einer Änderung durch die Pipeline

19 Minuten

In dieser Lerneinheit werden Sie den gesamten Codeworkflow üben, indem Sie eine kleine Änderung an der Space Game-Website in GitHub pushen.

Mara hat die Aufgabe erhalten, Text auf der Startseite der Website (Index.cshtml) zu ändern. In dieser Lerneinheit vollziehen Sie ihre Schritte nach.

Lassen Sie uns kurz die Schritte durchgehen, die zur Erledigung dieser Aufgabe erforderlich sind:

Synchronisieren Sie Ihr lokales Repository mit dem neuesten main-Branch auf GitHub
Erstellen Sie einen Branch, um Ihre Änderungen zu speichern
Nehmen Sie die erforderlichen Codeänderungen vor, und überprüfen Sie sie lokal
Pushen des Branches in GitHub
Mergen Sie alle aktuellen Änderungen aus dem main-Branch auf GitHub in Ihren lokalen Arbeitsbranch, und überprüfen Sie, ob Ihre Änderungen noch funktionieren
Pushen Sie alle verbleibenden Änderungen, sehen Sie sich an,wie Azure Pipelines die Anwendung erstellt, und übermitteln Sie Ihren Pull Request

Abrufen des neuesten Mainbranchs

In der vorherigen Lerneinheit haben Sie einen Pull Request erstellt und Ihren code-workflow-Branch in den main-Branch auf GitHub gemergt. Nun müssen Sie die Änderungen an main zurück in Ihren lokalen Branch pullen.

Der Befehl git pull ruft den neuesten Code aus dem Remoterepository ab und mergt ihn in Ihr lokales Repository. Auf diese Weise wissen Sie, dass Sie mit der neuesten Codebasis arbeiten.

Führen Sie in Ihrem Terminal git checkout main aus, um zur main-Verzweigung zu wechseln:
```
git checkout main
```
Um die neuesten Änderungen zu pullen, führen Sie den folgenden Befehl git pull aus:
```
git pull origin main
```
Sie können die Liste der Dateien anzeigen, die geändert wurden. Als optionalen Schritt können Sie die Datei azure-pipelines.yml öffnen, um zu überprüfen, ob Sie Ihre vollständige Buildkonfiguration enthält.

Erinnern Sie sich daran, dass ein Git-Repository, in dem Teammitglieder zusammenarbeiten (z. B. auf GitHub), als Remoterepository bezeichnet wird. Die Angabe origin bezieht sich hier auf Ihr Repository auf GitHub.

Später rufen Sie Startercode aus dem Microsoft GitHub-Repository ab, als Upstream bezeichnet.

Erstellen und Ausführen der Webanwendung

Um sicherzustellen, dass Sie über eine funktionierende Kopie zum Starten Ihrer Änderungen verfügen, erstellen Sie die Webanwendung, und führen Sie sie lokal aus.

Navigieren Sie in Visual Studio Code zum Terminalfenster, und führen Sie den folgenden Befehl dotnet build aus, um die Anwendung zu erstellen:
```
dotnet build --configuration Release
```
Führen Sie den folgenden Befehl dotnet run aus, um die Anwendung auszuführen:
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
Tipp

Wenn im Browser eine Fehlermeldung angezeigt wird, die sich auf einen Datenschutz- oder Zertifikatfehler bezieht, wählen Sie STRG+C in Ihrem Terminal aus, um die ausgeführte Anwendung zu beenden.

Führen Sie dann dotnet dev-certs https --trust aus, und wählen Sie Ja aus, wenn Sie dazu aufgefordert werden oder diesen Blogbeitrag sehen, um weitere Informationen zu bekommen.

Nachdem der Computer Ihrem lokalen SSL-Zertifikat vertraut, führen Sie den Befehl dotnet run ein zweites Mal aus, und navigieren Sie von einer neuen Browserregisterkarte zu http://localhost:5000, um die aktive Anwendung anzuzeigen.

Bestätigen,dass die Anwendung ausgeführt wird

Im Entwicklungsmodus ist die Space Game-Website so konfiguriert, dass Sie an Port 5000 ausgeführt wird.

Navigieren Sie auf einer neuen Browserregisterkarte zu http://localhost:5000, um die aktive Anwendung anzuzeigen.

Folgendes sollte angezeigt werden:

Screenshot der Space Game-Website, die in einem Webbrowser ausgeführt wird.

Sie können mit der Seite interagieren, auch mit der Bestenliste. Wenn Sie den Namen eines Spielers auswählen, werden Details zu diesem Spieler gezeigt.

Wenn Sie fertig sind, kehren Sie zum Terminalfenster zurück, und drücken Sie STRG+C, um die aktive Anwendung zu beenden.

Erstellen eines Featurebranches

In diesem Abschnitt erstellen Sie einen Git-Branch, damit Sie an Dateien arbeiten können, ohne dass sich dies auf andere Entwickler auswirkt. Niemand weiß, dass Sie an diesen Dateien arbeiten, bis Sie sie in das Remoterepository pushen.

Um einen Branch zu erstellen, verwenden Sie den Befehl git checkout und benennen Ihren Branch wie im vorherigen Abschnitt beschrieben.

Bevor Sie einen Branch erstellen, empfiehlt es sich, eine Benennungskonvention einzuhalten. Wenn Ihr Branch beispielsweise für das Arbeiten an einer neuen Funktion vorgesehen ist, können Sie feature/<branch-name> verwenden. Für eine Fehlerkorrektur könnten Sie bugfix/<bug-number> verwenden. In diesem Beispiel lautet der Name des Branches feature/home-page-text.

Führen Sie in Ihrem Terminal den folgenden Befehl git checkout aus:

git checkout -B feature/home-page-text

Wie zuvor basiert die feature/home-page-text auf der main-Verzweigung.

Vornehmen von Änderungen und lokales Testen

Öffnen Sie in Visual Studio Code die Datei Index.cshtml im Verzeichnis Tailspin.SpaceGame.Web/Views/Home.
Suchen Sie nach diesem Text am oberen Rand der Seite:
```
<p>An example site for learning</p>
```
Tipp

Visual Studio Code bietet auch eine einfache Möglichkeit, nach Text in Dateien zu suchen. Um auf den Suchbereich zuzugreifen, wählen Sie das Lupensymbol im Seitenbereich aus.
Ersetzen Sie den Text im vorherigen Schritt durch den folgenden „falsch geschriebenen“ Text, und speichern Sie die Datei:
```
<p>Welcome to the oficial Space Game site!</p>
```
Beachten Sie, dass das Wort „oficial“ absichtlich falsch geschrieben ist. Dieser Fehler wird später in diesem Modul behandelt.
Führen Sie in Ihrem Terminal den folgenden Befehl dotnet build aus, um die Anwendung zu erstellen:
```
dotnet build --configuration Release
```

Führen Sie den folgenden Befehl dotnet run aus, um die Anwendung auszuführen:

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

Wechseln Sie auf einer neuen Browserregisterkarte zu http://localhost:5000, um die aktive Anwendung anzuzeigen.

Sie können sehen, dass die Startseite den aktualisierten Text enthält.

Wenn Sie fertig sind, kehren Sie zum Terminalfenster zurück und drücken dann STRG+C, um die aktive Anwendung zu beenden.

Committen und Pushen Ihres Branches

Hier stagen Sie die Änderungen in der Datei Index.cshtml, committen die Änderung in Ihren Branch und pushen Ihren Branch auf GitHub.

Führen Sie git status aus, um zu überprüfen, ob für Ihre Verzweigung nicht committete Änderungen vorliegen:
```
git status
```
Sie werden sehen, dass Index.cshtml geändert wurde. Wie zuvor muss im nächsten Schritt sichergestellt werden, dass diese Datei von Git nachverfolgt wird, was Staging der Datei genannt wird.
Führen Sie den folgenden git add-Befehl aus, um Index. cshtml zu stagen:
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
Führen Sie den folgenden git commit-Befehl aus, um die gestagete Datei in die feature/home-page-text-Verzweigung zu committen:
```
git commit -m "Improve the text at the top of the home page"
```
Führen Sie diesen git push-Befehl aus, um die feature/home-page-text-Verzweigung in Ihr Repository auf GitHub zu pushen oder hochzuladen:
```
git push origin feature/home-page-text
```
Wie zuvor finden Sie Ihren Branch auf GitHub über das Branchdropdownfeld.

Ansehen, wie die Anwendung von Azure Pipelines erstellt wird

Wie zuvor reiht Azure Pipelines den Build automatisch in die Warteschlange ein, wenn Sie Änderungen auf GitHub pushen.

Als optionalen Schritt können Sie den Build überwachen, während er die Pipeline durchläuft, und überprüfen, ob der Build erfolgreich ist.

Synchronisieren von Änderungen mit dem Mainbranch

Während Sie mit der Arbeit an Ihrem Feature beschäftigt waren, wurden möglicherweise Änderungen an der Remote-main-Verzweigung vorgenommen. Bevor Sie einen Pull Request erstellen, ist es üblich, die neuesten Änderungen aus dem Remote-main-Branch abzurufen.

Um dies zu tun, checken Sie zuerst die main Verzweigung aus, oder wechseln Sie zu der Verzweigung, und führen Sie dann die Remote-Verzweigung main mit Ihrer lokalen main Verzweigung zusammen.

Sehen Sie sich als Nächstes Ihre Featureverzweigung an, und führen Sie dann ihre Featureverzweigung mit der main Verzweigung zusammen.

Nun testen wir den Vorgang.

Führen Sie in Ihrem Terminal den folgenden Befehl git checkout aus, um den main-Branch auszuchecken:
```
git checkout main
```
Um die neuesten Änderungen in den Remote-main-Branch herunterzuladen und diese Änderungen in Ihren lokalen main-Branch zu mergen, führen Sie den folgenden Befehl git pull aus:
```
git pull origin main
```
Da niemand tatsächlich Änderungen an Ihrer main-Verzweigung vorgenommen hat, informiert Sie der folgende Befehl, dass alles bereits aktuell ist.
```
From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.
```
Führen Sie git checkout aus, um den Featurebranch auszuchecken:
```
git checkout feature/home-page-text
```
Mergen Sie den Featurebranch mit main:
```
git merge main
```
Noch einmal: Da niemand tatsächlich Änderungen an Ihrem main-Branch vorgenommen hat, erkennen Sie, dass alles immer noch auf dem neuesten Stand ist.
```
Already up to date.
```
Wenn Sie irgendwelche Änderungen vorgenommen haben, werden Sie Ihre Anwendung erneut testen möchten, um sicherzustellen, dass noch alles funktioniert.

Erneutes Pushen des lokalen Branches

Wenn Sie Änderungen aus dem Remoterepository in Ihren lokalen Featurebranch integrieren, müssen Sie den lokalen Branch ein zweites Mal zurück in das Remoterepository pushen.

Obwohl Sie keine Änderungen aus dem Remoterepository integriert haben, üben wir diesen Vorgang, um zu sehen, was geschieht.

Führen Sie diesen Befehl git push aus, um Ihre Änderungen in GitHub zu pushen:
```
git push origin feature/home-page-text
```
Die Reaktion besagt erneut, dass Sie bereits auf dem neuesten Stand sind, da keine Änderungen vorgenommen wurden.
```
Everything up-to-date
```

Übertragen einer Pull-Anforderung

In diesem Abschnitt übermitteln Sie einen Pull Request wie bereits zuvor.

Melden Sie sich in einem Browser bei GitHub an.
Navigieren Sie zu Ihrem Repository mslearn-tailspin-spacegame-web.
Wählen Sie in der Dropdownliste Ihren feature/home-page-text-Branch aus.
Zum Starten Ihres Pull Requests müssen Sie auf Contribute (Beitragen) und dann auf Open pull request (Pull Request öffnen) klicken.
Stellen Sie sicher, dass die Dropdownliste base (Basis) Ihr Repository und nicht das Microsoft-Repository angibt.

Wichtig

Noch einmal: Dieser Schritt ist wichtig, da Sie Ihre Änderungen nicht in das Microsoft-Repository mergen können.

Wenn Sie direkt mit Ihrem eigenen Repository und nicht mit einer Fork arbeiten, ist Ihr main-Branch standardmäßig ausgewählt.
Geben Sie einen Titel und eine Beschreibung für Ihren Pull Request ein.
- Title: Improve the text at the top of the home page (Titel: Verbessern des Texts am oberen Rand der Startseite).
- Description: Received the latest home page text from the product team (Beschreibung: Neuesten Startseitentext vom Produktteam erhalten).
Wählen Sie Create Pull Request (Pull Request erstellen) aus, um den Pull Request abzuschließen.

In diesem Schritt wird kein Code gemergt. Er informiert andere Entwickler, dass Sie Änderungen vorgenommen haben, die Sie zum Mergen vorschlagen.

Das Pull Request-Fenster wird angezeigt. Wie zuvor löst ein Pull Request Azure Pipelines aus, um Ihre Anwendung standardmäßig zu erstellen.
Klicken Sie optional auf den Link Details, oder wechseln Sie in Azure DevOps zu Ihrem Projekt, und sehen Sie sich die Ausführung der Pipeline an.
Wenn der Build abgeschlossen ist, wechseln Sie zurück zu Ihrem Pull Request auf GitHub.
Wählen Sie Merge Pull Request (Pull Request mergen) aus, und wählen Sie dann Confirm Merge (Mergevorgang bestätigen) aus.
Um den feature/home-page-text-Branch aus GitHub zu löschen, wählen Sie Delete Branch (Branch löschen) aus.