Övning – Skicka en ändring genom pipelinen

19 minuter

I den här lektionen övar du på det fullständiga kodarbetsflödet genom att skicka en liten ändring till webbplatsen Space Game till GitHub.

Mara har fått uppgiften att ändra text på webbplatsens startsida, Index.cshtml. I den här lektionen följer du med.

Vi går kort igenom de steg som ska följas för att slutföra uppgiften:

Synkronisera din lokala lagringsplats med den senaste main-grenen på GitHub.
Skapa en gren för att lagra dina ändringar.
Gör de kodändringar du behöver och verifiera dem lokalt.
Skicka din gren till GitHub.
Sammanfoga de senaste ändringarna från main-grenen på GitHub till din lokala arbetsgren och kontrollera att ändringarna fortfarande fungerar.
Ladda upp eventuella återstående ändringar, följ hur Azure Pipelines bygger applikationen och skicka din pull-förfrågan.

Hämta den senaste huvudgrenen

I föregående lektion skapade du en pull-begäran och sammanfogade din code-workflow gren till grenen main på GitHub. Nu behöver du hämta ändringarna av main tillbaka till din lokala gren.

Kommandot git pull hämtar den senaste koden från fjärrlagringsplatsen och sammanslår den till din lokala lagringsplats. På så sätt vet du att du arbetar med den senaste kodbasen.

I terminalen kör du git checkout main för att växla till grenen main :
```
git checkout main
```
Kör det här git pull kommandot för att hämta de senaste ändringarna:
```
git pull origin main
```
Du kan visa listan över filer som har ändrats. Som ett valfritt steg kan du öppna filen azure-pipelines.yml för att kontrollera att den innehåller din fullständiga byggkonfiguration.

En Git-lagringsplats där teammedlemmar samarbetar (till exempel på GitHub) kallas för fjärrlagringsplats. Här anger origin (ursprung) din lagringsplats på GitHub.

Senare hämtar du startkod från Microsoft GitHub-lagringsplatsen, som kallas uppströms.

Skapa och köra webbappen

För att säkerställa att du har en fungerande kopia för att starta ändringarna skapar och kör du webbprogrammet lokalt.

I Visual Studio Code går du till terminalfönstret och kör följande dotnet build kommando för att skapa programmet:
```
dotnet build --configuration Release
```
Kör följande dotnet run kommando för att köra programmet:
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
Dricks

Om du ser ett fel i webbläsaren som är relaterat till ett sekretess- eller certifikatfel väljer du Ctrl+C från terminalen för att stoppa programmet som körs.

Kör dotnet dev-certs https --trust sedan och välj Ja när du uppmanas till det, eller se det här blogginlägget för mer information.

När datorn har förtroende för ditt lokala SSL-certifikat kör dotnet run du kommandot en andra gång och går till http://localhost:5000 från en ny webbläsarflik för att se det program som körs.

Kontrollera att programmet körs

I utvecklingsläge är webbplatsen Space Game konfigurerad att köras på port 5000.

I en ny webbläsarflik går du till för att http://localhost:5000 se det program som körs.

Du bör se följande:

Skärmbild av webbplatsen Space Game som körs i en webbläsare.

Du kan interagera med sidan, inklusive resultattavlan. När du väljer en spelares namn visas information om den spelaren.

När du är klar går du tillbaka till terminalfönstret och väljer Ctrl+C- för att stoppa programmet som körs.

Skapa en funktionsgren

I det här avsnittet skapar du en Git-gren så att du kan arbeta med filer utan att påverka någon annan. Ingen kommer ens att veta att du arbetar med de filerna förrän du skickar dem till fjärrlagringsplatsen.

Om du vill skapa en gren använder git checkout du kommandot och ger grenen ett namn, precis som du gjorde i föregående del.

Innan du skapar en gren är det bra att följa en namngivningskonvention. Om din gren till exempel är till för arbete med en ny funktion kan du använda feature/<branch-name>. Om det gäller en buggfix kan du använda bugfix/<bug-number>. I det här exemplet blir feature/home-page-textgrennamnet .

Kör följande git checkout kommando i terminalen:

git checkout -B feature/home-page-text

Precis som tidigare feature/home-page-text baseras den på grenen main .

Göra ändringar och testa lokalt

Öppna Index.cshtml i katalogen Tailspin.SpaceGame.Web/Views/Home i Visual Studio Code.
Leta efter den här texten längst upp på sidan:
```
<p>An example site for learning</p>
```
Dricks

I Visual Studio Code finns även ett enkelt sätt att söka efter text i filer. Om du vill komma åt sökfönstret väljer du förstoringsglasikonen i sidofönstret.
Ersätt texten i föregående steg med följande "feltypade" text och spara sedan filen:
```
<p>Welcome to the oficial Space Game site!</p>
```
Observera att ordet "oficial" avsiktligt är feltypat. Vi kommer att åtgärda felet senare i den här modulen.
Kör följande dotnet build kommando i terminalen för att skapa programmet:
```
dotnet build --configuration Release
```

Kör följande dotnet run kommando för att köra programmet:

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

På en ny webbläsarflik går du till för att http://localhost:5000 se det program som körs.

Du kan se att startsidan innehåller den uppdaterade texten.

När du är klar går du tillbaka till terminalfönstret och trycker sedan på Ctrl+C för att stoppa programmet som körs.

Checka in och skicka din gren

Här mellanlagrar du dina ändringar av Index.cshtml, checkar in ändringen till din gren och skickar grenen till GitHub.

Kör git status för att kontrollera om det finns icke-bakåtkompatibla ändringar på din gren:
```
git status
```
Du ser att Index.cshtml har ändrats. Precis som tidigare är nästa steg att se till att Git spårar den här filen, som kallas mellanlagring av filen.
Kör följande git add kommando för att mellanlagra Index.cshtml:
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
Kör följande git commit kommando för att checka in den mellanlagrade filen till grenen feature/home-page-text :
```
git commit -m "Improve the text at the top of the home page"
```
Kör det här git push kommandot för att skicka eller ladda upp grenen feature/home-page-text till din lagringsplats på GitHub:
```
git push origin feature/home-page-text
```
Precis som tidigare kan du hitta din gren på GitHub från listrutan gren.

Se när Azure Pipelines bygger appen

Precis som du gjorde tidigare lägger Azure Pipelines automatiskt bygget i kö när du skickar ändringarna till GitHub.

Som ett valfritt steg kan du spåra bygget när det flyttas genom pipelinen och kontrollera att bygget lyckas.

Synkronisera ändringar i huvudgrenen

Medan du var upptagen med att arbeta med din funktion kan ändringar ha gjorts i fjärrgrenen main . Innan du skapar en pull-begäran är det vanligt att hämta det senaste från fjärrgrenen main .

Det gör du genom att först checka ut eller växla till grenen main. Slå sedan samman fjärrgrenen main med din lokala main gren.

Kolla sedan in funktionsgrenen, och slå sedan samman funktionsgrenen med main-grenen.

Vi provar den här processen nu.

I terminalen kör du det här git checkout kommandot för att kolla in grenen main :
```
git checkout main
```
Om du vill ladda ned de senaste ändringarna i fjärrgrenen main och sammanfoga ändringarna i din lokala main gren kör du det här git pull kommandot:
```
git pull origin main
```
Eftersom ingen faktiskt har gjort några ändringar i din main gren visar följande kommando att allt redan är uppdaterat.
```
From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.
```
Om du vill kolla in funktionsgrenen kör du git checkout:
```
git checkout feature/home-page-text
```
Slå samman funktionsgrenen med main:
```
git merge main
```
Återigen, eftersom ingen faktiskt har gjort några ändringar i din main gren, ser du att allt fortfarande är uppdaterat.
```
Already up to date.
```
Om du har införlivat några ändringar vill du testa programmet igen för att säkerställa att allt fortfarande fungerar.

Skicka din lokala gren igen

När du inför ändringar från fjärrlagringsplatsen till din lokala funktionsgren behöver du skicka din lokala gren tillbaka till fjärrlagringsplatsen igen.

Du införde inga ändringar från fjärrlagringsplatsen, men vi går igenom processen för att se vad som händer.

Kör det här git push kommandot för att skicka ändringarna till GitHub:
```
git push origin feature/home-page-text
```
Svaret säger återigen att du redan är uppdaterad eftersom inga ändringar har gjorts.
```
Everything up-to-date
```

Skicka en pull-begäran

I det här avsnittet skickar du en pull-begäran precis som du gjorde tidigare.

Logga in på GitHub i en webbläsare.
Gå till lagringsplatsen mslearn-tailspin-spacegame-web .
I listrutan väljer du din feature/home-page-text gren.
Starta pull-begäran genom att välja Bidra och sedan Öppna pull-begäran.
Kontrollera att den nedrullningsbara baslistan anger lagringsplatsen och inte Microsoft-lagringsplatsen.

Viktigt!

Återigen är det här steget viktigt eftersom du inte kan sammanfoga dina ändringar till Microsoft-lagringsplatsen.

När du arbetar direkt med din egen lagringsplats, och inte en förgrening, väljs din main-gren som standard.
Ange en rubrik och en beskrivning för pull-begäran.
- Rubrik: Förbättra texten överst på startsidan
- Beskrivning: Fick den senaste startsidestexten från produktteamet.
Slutför pull-begäran genom att välja Skapa pull-begäran.

Det här steget sammanslår inte någon kod. Den talar om för andra att du har ändringar som du föreslår att sammanfoga.

Fönstret pull-begäran visas. Precis som tidigare utlöser en pull-begäran Azure Pipelines för att skapa ditt program som standard.
Du kan också välja länken Information eller gå till projektet på Azure DevOps och se pipelinekörningen.
När bygget är klart går du tillbaka till din pull-begäran på GitHub.
Välj Koppla pull-begäran och välj sedan Bekräfta sammanslagning.
Välj Ta bort gren för att ta bort grenen feature/home-page-text från GitHub.