Gyakorlat – Módosítás leküldése a folyamaton keresztül

19 perc

Ebben a leckében a teljes kód-munkafolyamatot gyakorolhatja úgy, hogy egy kis módosítást küld a Space Game webhelyére a GitHubra.

Mara megkapta a feladatot, hogy módosítson néhány szöveget a webhely kezdőlapján, az Index.cshtml-en. Ebben a leckében követni fogja.

Tekintsük át röviden a feladat elvégzéséhez követendő lépéseket:

A helyi adattár szinkronizálása a GitHub legújabb main ágával
Ág létrehozása a módosítások tárolásához
Végezze el a szükséges kódmódosításokat, és ellenőrizze őket helyileg
Az ág leküldése a GitHubba
Egyesítse a GitHubon található main ág legutóbbi módosításait a helyi munkaágba, és ellenőrizze, hogy a módosítások továbbra is működnek-e
A fennmaradó módosítások leküldése, az Azure Pipelines létrehozása és a lekéréses kérelem elküldése

A legújabb főág beolvasása

Az előző leckében létrehozott egy lekéréses kérelmet, és egyesítette az code-workflow ágat a main GitHub ágával. Most le kell hívnia a main ág módosításait a helyi ágra.

A git pull parancs lehívja a legfrissebb kódot a távoli adattárból, és egyesíti azt a helyi adattárral. Így tudja, hogy a legújabb kódbázissal dolgozik.

A terminálban futtassa git checkout main az ágra való váltáshoz main :
```
git checkout main
```
A legújabb módosítások lekéréséhez futtassa ezt a git pull parancsot:
```
git pull origin main
```
Megtekintheti a módosított fájlok listáját. Opcionális lépésként megnyithatja az azure-pipelines.yml fájlt annak ellenőrzéséhez, hogy tartalmazza-e a teljes buildkonfigurációt.

Ne feledje, hogy azt a Git-adattárat, amelyhez a csapat minden tagjának hozzáférése van (például a GitHub esetében), távoli adattárnak nevezzük. Ez esetben a forrás jelöli a GitHub-adattárat.

Később beolvassa a kezdőkódot a Microsoft GitHub-adattárból, más néven felsőbb rétegből.

A webalkalmazás létrehozása és futtatása

Ha gondoskodni szeretne arról, hogy a módosítások elindításához egy működő példánya legyen, hozza létre és futtassa a webalkalmazást helyileg.

A Visual Studio Code-ban nyissa meg a terminálablakot, és futtassa a következő dotnet build parancsot az alkalmazás létrehozásához:
```
dotnet build --configuration Release
```
Futtassa a következő dotnet run parancsot az alkalmazás futtatásához:
```
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
```
Tipp.

Ha a böngészőben adatvédelmi vagy tanúsítványhiba miatt hibaüzenet jelenik meg, a terminálon a Ctrl+C billentyűkombinációt választva állítsa le a futó alkalmazást.

Ezután futtassa dotnet dev-certs https --trust és válassza az Igen lehetőséget, amikor a rendszer kéri, vagy tekintse meg ezt a blogbejegyzést további információért.

Miután a számítógép megbízik a helyi SSL-tanúsítványban, futtassa dotnet run a parancsot másodszor, és lépjen http://localhost:5000 egy új böngészőlapra a futó alkalmazás megtekintéséhez.

Ellenőrizze, hogy az alkalmazás fut-e

Fejlesztési módban a Space Game webhelye úgy van konfigurálva, hogy az 5000-s porton fusson.

Egy új böngészőlapon keresse meg http://localhost:5000 a futó alkalmazást.

A következőt kell látnia:

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

Használhatja az oldalt, beleértve a ranglistát is. Amikor kiválasztja egy játékos nevét, megjelenik a játékos részletei.

Ha végzett, térjen vissza a terminálablakba, és a Ctrl+C billentyűkombinációval állítsa le a futó alkalmazást.

Funkciók szerinti ágak létrehozása

Ebben a szakaszban létre fog hozni egy Git-ágat, hogy mások befolyásolása nélkül dolgozhasson a fájlokon. Senki nem fog tudni arról, hogy a fájlokon dolgozik, amíg le nem küldi azokat a távoli adattárba.

Ág létrehozásához használja a git checkout parancsot, és adjon nevet az ágnak, ahogyan az előző részben is tette.

Az ág létrehozása előtt érdemes tisztában lenni az elnevezési szabályokkal. Ha például az adott ág egy új funkció fejlesztéséhez szükséges, használhatja a következőt: feature/<branch-name>. Hibajavítás esetén használhatja a következőt: bugfix/<bug-number>. Ebben a példában az ág neve lesz feature/home-page-text.

A terminálban futtassa a következő git checkout parancsot:

git checkout -B feature/home-page-text

A korábbiakhoz hasonlóan az feature/home-page-text ágon alapul main .

A módosítások végrehajtása és helyi tesztelése

A Visual Studio Code-ban nyissa meg az Index.cshtml fájlt a Tailspin.SpaceGame.Web/Views/Home könyvtárban.
Keresse meg ezt a szöveget a lap tetején:
```
<p>An example site for learning</p>
```
Tipp.

A Visual Studio Code egyszerű lehetőséget is biztosít a szöveges keresésre a fájlokban. A keresőablak eléréséhez válassza a nagyító ikont az oldalablakban.
Cserélje le az előző lépés szövegét a következő "hibásan beírt" szövegre, majd mentse a fájlt:
```
<p>Welcome to the oficial Space Game site!</p>
```
Vegye figyelembe, hogy a "oficial" szó szándékosan helytelenül van begépelve. Ezt a hibát a modul későbbi részében fogjuk kezelni.
A terminálban futtassa a következő dotnet build parancsot az alkalmazás létrehozásához:
```
dotnet build --configuration Release
```

Futtassa a következő dotnet run parancsot az alkalmazás futtatásához:

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

Egy új böngészőlapon nyissa meg http://localhost:5000 a futó alkalmazást.

Láthatja, hogy a kezdőlap tartalmazza a frissített szöveget.

Ha végzett, térjen vissza a terminálablakba, majd nyomja le a Ctrl+C billentyűkombinációt a futó alkalmazás leállításához.

Az ág véglegesítése és leküldése

Itt elvégezheti a módosításokat a Index.cshtml fájlban, véglegesítheti a módosítást az ágon, és felküldheti az ágat a GitHubba.

Futtassa git status annak ellenőrzéséhez, hogy vannak-e nem véglegesített módosítások az ágon:
```
git status
```
Látni fogja, hogy az Index.cshtml módosult. A korábbiakhoz hasonlóan a következő lépés annak ellenőrzése, hogy a Git nyomon követi-e ezt a fájlt, amelyet a fájl átmeneti állapotának neveznek.
Futtassa a következő git add parancsot az Index.cshtml szakaszához:
```
git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
```
Futtassa a következő git commit parancsot a szakaszos fájl ághoz való véglegesítéséhez feature/home-page-text :
```
git commit -m "Improve the text at the top of the home page"
```
Futtassa ezt a git push parancsot az ág leküldéséhez vagy feltöltéséhez a feature/home-page-text GitHubon található adattárba:
```
git push origin feature/home-page-text
```
Ahogy korábban, az ág legördülő listában is megtalálhatja az ágat a GitHubon.

Az Azure Pipelines létrehozza az alkalmazást

Ahogy korábban is történt, az Azure Pipelines automatikusan várólistára helyezi a buildet, ha módosításokat küld le a GitHubba.

Választható lépésként nyomon követheti a buildet a folyamat során, és ellenőrizze, hogy a build sikeres-e.

A főág módosításainak szinkronizálása

Amíg a funkcióval dolgozott, előfordulhat, hogy a távoli main ágon módosításokat hajtottak végre. Lekéréses kérelem létrehozása előtt gyakori eljárás a legújabb lekéréses kérelem lekérése a távoli main ágból.

Ehhez először vegye ki vagy váltson az main ágra, majd egyesítse a távoli main ágat a helyi main ággal.

Ezután tekintse meg a funkcióágat, majd egyesítse a funkcióágat az main ággal.

Próbaképpen vegyük végig a folyamatot.

A terminálban futtassa ezt a git checkout parancsot az main ág megtekintéséhez:
```
git checkout main
```
Ha le szeretné tölteni a távoli main ág legújabb módosításait, és egyesíteni szeretné ezeket a módosításokat a helyi main ágban, futtassa a git pull következő parancsot:
```
git pull origin main
```
Mivel senki sem módosította az ágat main , az alábbi parancs azt jelzi, hogy minden már naprakész.
```
From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.
```
A szolgáltatáság megtekintéséhez futtassa a következőt git checkout:
```
git checkout feature/home-page-text
```
A funkcióág egyesítése a következővel main:
```
git merge main
```
Ismét, mivel valójában senki sem módosította az ágát main , láthatja, hogy minden még mindig naprakész.
```
Already up to date.
```
Ha bármilyen módosítást végzett, érdemes újra tesztelnie az alkalmazást, hogy minden továbbra is működjön.

A helyi ág ismételt leküldése

Amikor a távoli adattárból importál módosításokat a helyi funkcióágba, másodszor is le kell küldenie a helyi ágat a távoli adattárba.

Bár ezúttal semmilyen módosítást nem importált a távoli adattárból, a gyakorlás kedvéért vegyük végig a folyamatot.

Futtassa ezt a git push parancsot a módosítások GitHubra való leküldéséhez:
```
git push origin feature/home-page-text
```
A válasz ismét azt jelzi, hogy már naprakész, mivel nem történt módosítás.
```
Everything up-to-date
```

Lekéréses kérelem küldése

Ebben a szakaszban ugyanúgy küld el lekéréses kérelmet, mint korábban.

Egy böngészőben jelentkezzen be a GitHubra.
Nyissa meg az mslearn-tailspin-spacegame-web adattárat.
A legördülő listában válassza ki az ágat feature/home-page-text .
A lekéréses kérelem elindításához válassza a Közreműködés , majd a Lekéréses kérelem megnyitása lehetőséget.
Győződjön meg arról, hogy az alap legördülő lista az adattárat határozza meg, nem pedig a Microsoft-adattárat.

Fontos

Ez a lépés azért is fontos, mert nem egyesítheti a módosításokat a Microsoft-adattárban.

Ha közvetlenül a saját adattárával dolgozik, és nem egy elágaztatással, alapértelmezés szerint a saját main ága lesz kiválasztva.
Adja meg a lekéréses kérelem címét és leírását.
- Cím: A kezdőlap tetején lévő szöveg javítása
- Leírás: Megkapta a legújabb kezdőlap szövegét a termékcsapattól.
A lekéréses kérelem befejezéséhez válassza a Lekéréses kérelem létrehozása lehetőséget.

Ez a lépés nem egyesít semmilyen kódot. Azt jelzi másoknak, hogy vannak olyan módosítások, amelyeket egyesíteni szeretne.

Megjelenik a lekéréses kérelem ablaka. Mint korábban, egy lekéréses kérelem aktiválja az Azure Pipelinest az alkalmazás alapértelmezés szerinti létrehozásához.
Ha szeretné, válassza a Részletek hivatkozást, vagy nyissa meg a projektet az Azure DevOpsban, és figyelje a folyamat futtatását.
Ha a build elkészült, térjen vissza a lekéréses kérelemhez a GitHubon.
Válassza a Lekéréses kérelem egyesítése, majd az Egyesítés megerősítése lehetőséget.
Az ág törléséhez válassza az Ág törlése lehetőséget a feature/home-page-text GitHubról.

Folytatás