Ćwiczenie — wypychanie zmiany przez potok

Ukończone

W tej lekcji przećwiczysz pełny przepływ pracy kodu, przesyłając drobną zmianę na stronę internetową Space Game na GitHub.

Mara otrzymał zadanie zmiany tekstu na stronie głównej witryny internetowej Index.cshtml. W tej lekcji wykonasz kroki.

Przyjrzyjmy się krótko krokom, które należy wykonać, aby wykonać zadanie:

• Zsynchronizuj repozytorium lokalne z najnowszą gałęzią main w usłudze GitHub.
• Utwórz gałąź do przechowywania zmian.
• Wprowadź potrzebne zmiany kodu i zweryfikuj je lokalnie.
• Wypchnij gałąź do GitHub.
• Scal wszelkie ostatnie zmiany z gałęzi main w usłudze GitHub do swojej lokalnej gałęzi roboczej i upewnij się, że zmiany nadal działają.
• Wypchnij pozostałe zmiany, obejrzyj, jak usługa Azure Pipelines skompiluje aplikację i prześlij żądanie ściągnięcia.

Pobieranie najnowszej gałęzi głównej

W poprzedniej lekcji utworzono żądanie ściągnięcia i scaliliśmy code-workflow gałąź z gałęzią main w usłudze GitHub. Teraz trzeba ponownie ściągnąć zmiany gałęzi main do gałęzi lokalnej.

Polecenie git pull służy do pobierania najnowszych zmian ze zdalnego repozytorium i scalania ich z repozytorium lokalnym. W ten sposób wiesz, że pracujesz z najnowszą bazą kodu.

1. W terminalu uruchom polecenie git checkout main , aby przełączyć się do main gałęzi:

   git checkout main
   

2. Aby ściągnąć najnowsze zmiany, uruchom następujące git pull polecenie:

   git pull origin main
   

   Możesz wyświetlić listę zmienionych plików. Opcjonalnie możesz otworzyć plik azure-pipelines.yml , aby sprawdzić, czy zawiera on pełną konfigurację kompilacji.

   Pamiętaj, że repozytorium Git, w którym członkowie zespołu współpracują (na przykład w usłudze GitHub), jest nazywane zdalnym. Tutaj, origin określa twoje repozytorium na GitHubie.

   Później pobierzesz kod startowy z repozytorium Microsoft GitHub, znanego jako upstream.

Kompilowanie i uruchamianie aplikacji

Aby upewnić się, że masz działającą kopię, aby uruchomić zmiany, skompiluj i uruchom aplikację internetową lokalnie.

1. W programie Visual Studio Code przejdź do okna terminalu i uruchom następujące dotnet build polecenie, aby skompilować aplikację:

   dotnet build --configuration Release
   

2. Uruchom następujące dotnet run polecenie, aby uruchomić aplikację:

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

   Napiwek

   Jeśli w przeglądarce zostanie wyświetlony błąd związany z błędem prywatności lub certyfikatu, wybierz Ctrl+C z terminalu, aby zatrzymać uruchomioną aplikację.

   Następnie uruchom dotnet dev-certs https --trust i wybierz Tak po wyświetleniu monitu lub zobacz ten wpis na blogu, aby uzyskać więcej informacji.

   Gdy komputer ufa lokalnemu certyfikatowi SSL, uruchom dotnet run polecenie po raz drugi i przejdź do http://localhost:5000 nowej karty przeglądarki, aby wyświetlić uruchomioną aplikację.

Sprawdź, czy aplikacja jest uruchomiona

W trybie programowania witryna internetowa Space Game jest skonfigurowana do uruchamiania na porcie 5000.

Na nowej karcie przeglądarki przejdź do strony , aby wyświetlić http://localhost:5000 uruchomioną aplikację.

Powinien zostać wyświetlony następujący komunikat:

Możesz wchodzić w interakcje ze stroną, w tym z rankingiem. Po wybraniu nazwy zawodnika zostaną wyświetlone szczegółowe informacje o tym graczu.

Po zakończeniu wróć do okna terminalu i naciśnij Ctrl+C , aby zatrzymać uruchomioną aplikację.

Tworzenie gałęzi funkcji

W tej sekcji utworzysz gałąź Usługi Git, aby móc pracować nad plikami bez wpływu na inne osoby. Nikt nie będzie wiedział, że pracujesz nad tymi plikami, dopóki nie wypchniesz ich do repozytorium zdalnego.

Aby utworzyć gałąź, użyj git checkout polecenia i nadaj gałęzi nazwę, podobnie jak w poprzedniej części.

Przed utworzeniem gałęzi warto pamiętać o stosowaniu odpowiedniej konwencji nazewnictwa. Jeśli na przykład gałąź ma służyć do pracy z nową funkcją, możesz użyć nazwy feature/<branch-name>. W przypadku poprawki błędu można użyć nazwy bugfix/<bug-number>. W tym przykładzie nazwa gałęzi będzie następująca feature/home-page-text: .

W terminalu uruchom następujące git checkout polecenie:

git checkout -B feature/home-page-text

Podobnie jak wcześniej, element feature/home-page-text jest oparty na main gałęzi .

Wprowadzanie i lokalne testowanie zmian

1. W programie Visual Studio Code otwórz plik Index.cshtml w katalogu Tailspin.SpaceGame.Web/Views/Home .

2. Poszukaj tego tekstu w górnej części strony:

   <p>An example site for learning</p>
   

   Napiwek

   Visual Studio Code udostępnia również prosty sposób wyszukiwania tekstu w plikach. Aby uzyskać dostęp do okienka wyszukiwania, wybierz ikonę lupy w okienku bocznym.

3. Zastąp tekst w poprzednim kroku następującym tekstem "mistyped", a następnie zapisz plik:

   <p>Welcome to the oficial Space Game site!</p>
   

   Należy pamiętać, że słowo "oficial" jest celowo błędnie wytypowane. W dalszej części tego modułu zajmiemy się tym błędem.

4. W terminalu uruchom następujące dotnet build polecenie, aby skompilować aplikację:

   dotnet build --configuration Release
   

5. Uruchom następujące dotnet run polecenie, aby uruchomić aplikację:

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

6. Na nowej karcie przeglądarki przejdź do strony , aby wyświetlić http://localhost:5000 uruchomioną aplikację.

   Zobaczysz, że strona główna zawiera zaktualizowany tekst.

   

   Po zakończeniu wróć do okna terminalu, a następnie naciśnij Ctrl+C , aby zatrzymać uruchomioną aplikację.

Zatwierdzanie i wypychanie gałęzi

W tym miejscu przygotujesz zmiany w pliku Index.cshtml, następnie zatwierdzisz zmiany w swojej gałęzi i wypchniesz ją do usługi GitHub.

1. Uruchom polecenie git status , aby sprawdzić, czy w gałęzi nie ma niezatwierdzonych zmian:

   git status
   

   Zobaczysz, że plik Index.cshtml został zmodyfikowany. Podobnie jak wcześniej, następnym krokiem jest upewnienie się, że Git śledzi ten plik, co nazywa się indeksowaniem pliku.

2. Uruchom następujące git add polecenie, aby przygotować plik Index.cshtml:

   git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
   

3. Uruchom następujące git commit polecenie, aby zatwierdzić przygotowany plik w feature/home-page-text gałęzi:

   git commit -m "Improve the text at the top of the home page"
   

4. Uruchom to git push polecenie, aby wypchnąć lub przekazać feature/home-page-text gałąź do repozytorium w usłudze GitHub:

   git push origin feature/home-page-text
   

5. Tak jak wcześniej możesz zlokalizować gałąź w usłudze GitHub z listy rozwijanej gałęzi.

   

Obserwowanie kompilowania aplikacji w usłudze Azure Pipelines

Tak jak wcześniej usługa Azure Pipelines automatycznie dodaje kompilację do kolejki po wypchnięciu zmian do repozytorium GitHub.

W ramach opcjonalnego kroku prześledź kompilację w miarę przechodzenia przez potok i sprawdź, czy kompilacja zakończyła się pomyślnie.

Synchronizowanie wszelkich zmian z gałęzią główną

Podczas pracy nad funkcją zmiany mogły zostać wprowadzone w gałęzi zdalnej main . Przed utworzeniem żądania ściągnięcia powszechną praktyką jest pobranie najnowszej wersji z gałęzi zdalnej main .

Aby to zrobić, najpierw przełącz się na gałąź main. Następnie scal zdalną gałąź main z lokalną gałęzią main.

Następnie wyewidencjonuj gałąź funkcji, a następnie scal gałąź funkcji z gałęzią main.

Wypróbujmy tę procedurę.

1. W terminalu uruchom następujące git checkout polecenie, aby wyewidencjonować main gałąź:

   git checkout main
   

2. Aby pobrać najnowsze zmiany w gałęzi zdalnej main i scalić te zmiany z gałęzią lokalną main , uruchom następujące git pull polecenie:

   git pull origin main
   

   Ponieważ nikt rzeczywiście nie dokonał żadnych zmian w main gałęzi, następujące polecenie informuje, że wszystko jest już aktualne.

   From https://github.com/username/mslearn-tailspin-spacegame-web
    * branch            main     -> FETCH_HEAD
   Already up to date.
   

3. Aby sprawdzić gałąź funkcji, uruchom polecenie git checkout:

   git checkout feature/home-page-text
   

4. Scal gałąź funkcji za pomocą polecenia main:

   git merge main
   

   Ponownie, ponieważ nikt rzeczywiście nie wprowadzał żadnych zmian w main gałęzi, widać, że wszystko jest nadal aktualne.

   Already up to date.
   

   Jeśli wprowadzono jakiekolwiek zmiany, należy ponownie przetestować aplikację, aby upewnić się, że wszystko nadal działa.

Ponowne wypychanie gałęzi lokalnej

Gdy wprowadzasz zmiany ze zdalnego repozytorium do repozytorium lokalnego, musisz ponownie wypchnąć lokalną gałąź do repozytorium zdalnego.

Mimo że nie wprowadziliśmy żadnych zmian ze zdalnego repozytorium, przećwiczmy tę procedurę i sprawdźmy, co się stanie.

1. Uruchom to git push polecenie, aby wypchnąć zmiany do usługi GitHub:

   git push origin feature/home-page-text
   

   Po raz kolejny odpowiedź informuje, że jesteś już aktualny, ponieważ nie wprowadzono żadnych zmian.

   Everything up-to-date
   

Przesyłanie żądania ściągnięcia

W tej sekcji prześlesz żądanie ściągnięcia tak samo jak wcześniej.

1. W przeglądarce zaloguj się do usługi GitHub.

2. Przejdź do swojego repozytorium mslearn-tailspin-spacegame-web.

3. Z listy rozwijanej wybierz gałąź feature/home-page-text .

4. Aby rozpocząć żądanie ściągnięcia, wybierz pozycję Współtworzenie , a następnie otwórz żądanie ściągnięcia.

5. Upewnij się, że podstawowa lista rozwijana określa repozytorium, a nie repozytorium firmy Microsoft.

   

   Ważne

   Ponownie ten krok jest ważny, ponieważ nie można scalić zmian w repozytorium firmy Microsoft.

   Gdy pracujesz bezpośrednio z własnym repozytorium, a nie z rozwidleniem, domyślnie wybrana jest gałąź main.

6. Wprowadź tytuł i opis żądania ściągnięcia.

   • Tytuł: Ulepszanie tekstu u góry strony głównej
   • Opis: Odebrano najnowszy tekst strony głównej od zespołu produktu.

7. Aby ukończyć żądanie ściągnięcia, wybierz pozycję Utwórz żądanie ściągnięcia.

   Ten krok nie obejmuje scalania kodu. Informuje innych, że masz zmiany, które proponujesz scalić.

   Zostanie wyświetlone okno żądania ściągnięcia. Tak jak wcześniej, żądanie ściągnięcia wyzwala usługę Azure Pipelines domyślnie w celu utworzenia aplikacji.

8. Opcjonalnie wybierz link Szczegóły lub przejdź do projektu w usłudze Azure DevOps i obejrzyj przebieg potoku.

9. Po zakończeniu kompilacji wróć do żądania ściągnięcia w usłudze GitHub.

10. Wybierz Scal prośbę o pobranie, a następnie wybierz Potwierdź scalanie.

11. Wybierz pozycję z usługi GitHub.