Cvičení – nasdílení změny prostřednictvím kanálu

Dokončeno

V této lekci si procvičíte kompletní pracovní postup kódu tím, že nasdílíte malou změnu na web Space Game na GitHub.

Mara dostala úkol změnit nějaký text na domovské stránce webu Index.cshtml. V této lekci budete pokračovat.

Pojďme se krátce podívat na postup dokončení úkolu:

  • Synchronizace místního úložiště s nejnovější main větví na GitHubu
  • Vytvoření větve pro uložení změn
  • Proveďte potřebné změny kódu a ověřte je místně.
  • Nasdílení větve do GitHubu
  • Sloučit všechny nedávné změny z větve na GitHubu main do místní pracovní větve a ověřit, že vaše změny stále fungují
  • Nasdílejte všechny zbývající změny, sledujte, jak Azure Pipelines sestaví aplikaci, a odešle žádost o přijetí změn.

Načtení nejnovější hlavní větve

V předchozí lekci jste vytvořili žádost o přijetí změn a sloučili jste větev code-workflow do větve na GitHubu main . Teď potřebujete přijmout změny z větve main zpět do své místní větve.

Příkaz git pull načte nejnovější kód ze vzdáleného úložiště a sloučí ho do vašeho místního úložiště. Díky tomu víte, že pracujete s nejnovějším základem kódu.

  1. V terminálu spusťte git checkout main přepnutí do main větve:

    git checkout main
    
  2. Pokud chcete stáhnout nejnovější změny, spusťte tento git pull příkaz:

    git pull origin main
    

    Můžete zobrazit seznam změněných souborů. Jako volitelný krok můžete otevřít soubor azure-pipelines.yml a ověřit, že obsahuje úplnou konfiguraci sestavení.

    Vzpomeňte si, že úložiště Git, kde můžou členové týmu spolupracovat (jako například na GitHubu), se označuje jako remote (vzdálené). Origin zde představuje vaše úložiště na GitHubu.

    Později načtete počáteční kód z úložiště Microsoft GitHub, označovaného jako upstream.

Sestavení a spuštění webové aplikace

Abyste měli jistotu, že máte funkční kopii pro spuštění změn, sestavte a spusťte webovou aplikaci místně.

  1. V editoru Visual Studio Code přejděte do okna terminálu a spuštěním následujícího dotnet build příkazu sestavte aplikaci:

    dotnet build --configuration Release
    
  2. Spuštěním následujícího dotnet run příkazu spusťte aplikaci:

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

    Tip

    Pokud se v prohlížeči zobrazí chyba související s ochranou osobních údajů nebo chybou certifikátu, pomocí kombinace kláves Ctrl+C v terminálu zastavte spuštěnou aplikaci.

    Po zobrazení výzvy spusťte dotnet dev-certs https --trust a vyberte Ano nebo další informace najdete v tomto blogovém příspěvku .

    Jakmile počítač důvěřuje vašemu místnímu certifikátu SSL, spusťte dotnet run příkaz podruhé a přejděte na http://localhost:5000 novou kartu prohlížeče, abyste viděli spuštěnou aplikaci.

Ověřte, že je aplikace spuštěná.

Ve vývojovém režimu je web Space Game nakonfigurovaný tak, aby běžel na portu 5000.

Na nové kartě prohlížeče přejděte k http://localhost:5000 zobrazení spuštěné aplikace.

Měli byste vidět toto:

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

Na stránce můžete vyzkoušet prvky, včetně tabulky výsledků. Když vyberete jméno hráče, zobrazí se podrobnosti o tomto hráči.

Až budete hotovi, vraťte se do okna terminálu a stisknutím ctrl+C zastavte spuštěnou aplikaci.

Vytvoření větve pro funkci

V této části vytvoříte větev Gitu, abyste mohli pracovat se soubory, aniž by to ovlivnilo ostatní uživatele. Ostatní dokonce ani nebudou vědět, že na těchto souborech pracujete, dokud jejich změny nenasdílíte do vzdáleného úložiště.

Pokud chcete vytvořit větev, použijte git checkout příkaz a pojmenujte větev stejně jako v předchozí části.

Při vytváření větve je vhodné dodržovat zásady vytváření názvů. Pokud je například větev určená pro práci na nové funkci, můžete použít formát feature/<branch-name>. Pro opravu chyby můžete použít formát bugfix/<bug-number>. V tomto příkladu bude feature/home-page-textnázev vaší větve .

V terminálu spusťte následující git checkout příkaz:

git checkout -B feature/home-page-text

Stejně jako předtím feature/home-page-text je založená na main větvi.

Provedení změn a jejich místní otestování

  1. V editoru Visual Studio Code otevřete index.cshtml v adresáři Tailspin.SpaceGame.Web/Views/Home .

  2. Vyhledejte tento text v horní části stránky:

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

    Tip

    Visual Studio Code také nabízí snadný způsob, jak hledat text v souborech. Pokud chcete získat přístup k podoknu hledání, vyberte ikonu lupy v bočním podokně.

  3. Nahraďte text v předchozím kroku následujícím textem s chybným typem a pak soubor uložte:

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

    Všimněte si, že slovo "oficial" je záměrně nesprávně napsané. Tuto chybu vyřešíme později v tomto modulu.

  4. Spuštěním následujícího dotnet build příkazu v terminálu sestavte aplikaci:

    dotnet build --configuration Release
    
  5. Spuštěním následujícího dotnet run příkazu spusťte aplikaci:

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web
    
  6. Na nové kartě prohlížeče přejděte na http://localhost:5000 spuštěnou aplikaci.

    Vidíte, že domovská stránka obsahuje aktualizovaný text.

    Screenshot of the Space Game website with updated text. The text contains a spelling error.

    Až budete hotovi, vraťte se do okna terminálu a stisknutím kombinace kláves Ctrl+C zastavte spuštěnou aplikaci.

Potvrzení a nasdílení větve

Teď rozfázujete své změny v souboru Index.cshtml, potvrdíte změnu do své větve a nasdílíte svou větev do GitHubu.

  1. Spusťte kontrolu a zkontrolujte git status , jestli ve vaší větvi nejsou nepotvrzené změny:

    git status
    

    Uvidíte, že index.cshtml byl změněn. Stejně jako předtím je dalším krokem ověření, že Git sleduje tento soubor, který se nazývá příprava souboru.

  2. Spuštěním následujícího git add příkazu připravte index.cshtml:

    git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml
    
  3. Spuštěním následujícího git commit příkazu potvrďte fázovaný soubor do feature/home-page-text větve:

    git commit -m "Improve the text at the top of the home page"
    
  4. Spuštěním tohoto git push příkazu nasdílejte nebo nahrajte větev do úložiště na GitHubu feature/home-page-text :

    git push origin feature/home-page-text
    
  5. Stejně jako předtím můžete svou větev vyhledat na GitHubu z rozevíracího seznamu větve.

    Screenshot of GitHub showing the new branch.

Sledujte, jak Azure Pipelines sestaví aplikaci

Azure Pipelines stejně jako dříve při nasdílení změn do GitHubu automaticky zařadí do fronty sestavení.

Jako volitelný krok sledujte sestavení, jak prochází kanálem, a ověřte, že sestavení proběhne úspěšně.

Synchronizace všech změn v hlavní větvi

Zatímco jste pracovali na funkci, mohly se změny ve vzdálené main větvi provést. Než vytvoříte žádost o přijetí změn, je běžné získat nejnovější verzi ze vzdálené main větve.

Uděláte to tak, že nejprve rezervujete nebo přepnete na main větev a pak ji main sloučíte s místní main větví.

Pak se podívejte na větev funkce a pak sloučíte větev funkce s main větví.

Pojďme si teď tento proces vyzkoušet.

  1. V terminálu spusťte tento git checkout příkaz a podívejte se na main větev:

    git checkout main
    
  2. Pokud chcete stáhnout nejnovější změny ve vzdálené main větvi a tyto změny sloučit do místní main větve, spusťte tento git pull příkaz:

    git pull origin main
    

    Vzhledem k tomu, že nikdo ve vaší větvi ve skutečnosti main neprodá žádné změny, následující příkaz vám řekne, že všechno už je aktuální.

    From https://github.com/username/mslearn-tailspin-spacegame-web
     * branch            main     -> FETCH_HEAD
    Already up to date.
    
  3. Pokud si chcete prohlédnout větev funkcí, spusťte git checkout:

    git checkout feature/home-page-text
    
  4. Sloučit větev funkce s main:

    git merge main
    

    Opět platí, že nikdo ve vaší větvi ve skutečnosti main neprodá žádné změny, vidíte, že všechno je stále aktuální.

    Already up to date.
    

    Pokud jste provedli začlenění jakýchkoli změn, měli byste aplikaci otestovat znovu, abyste měli jistotu, že všechno pořád funguje.

Opětovné nasdílení místní větve

Po začlenění změn ze vzdáleného úložiště do vaší místní větve funkce je třeba podruhé nasdílet vaši místní větev zpět do vzdáleného úložiště.

I když jste nezačlenili žádné změny ze vzdáleného úložiště, pojďme si tento proces vyzkoušet, abychom viděli, co se stane.

  1. Spuštěním tohoto git push příkazu nasdílejte změny do GitHubu:

    git push origin feature/home-page-text
    

    Odpověď opět říká, že už jste aktuální, protože nebyly provedeny žádné změny.

    Everything up-to-date
    

Odeslání žádosti o přijetí změn

V této části odešlete žádost o přijetí změn stejně jako dříve.

  1. V prohlížeči se přihlaste k GitHubu.

  2. Přejděte do svého úložiště mslearn-tailspin-spacegame-web .

  3. V rozevíracím seznamu vyberte svoji feature/home-page-text větev.

  4. Pokud chcete zahájit žádost o přijetí změn, vyberte Možnost Přispívat a pak Otevřít žádost o přijetí změn.

  5. Ujistěte se, že základní rozevírací seznam určuje vaše úložiště, nikoli úložiště Microsoftu.

    Screenshot of GitHub confirming that the branch can be merged.

    Důležité

    Tento krok je opět důležitý, protože nemůžete sloučit změny do úložiště Microsoftu.

    Pokud pracujete přímo s vlastním úložištěm a nepoužíváte fork, vybere se vaše větev main automaticky.

  6. Zadejte název a popis žádosti o přijetí změn.

    • Název: Vylepšení textu v horní části domovské stránky
    • Popis: Obdržel(a) nejnovější text domovské stránky od produktového týmu.
  7. Pokud chcete žádost o přijetí změn dokončit, vyberte Vytvořit žádost o přijetí změn.

    Tímto krokem se nesloučí žádný kód. Ostatním říká, že máte změny, které navrhujete ke sloučení.

    Zobrazí se okno žádosti o přijetí změn. Stejně jako předtím aktivuje žádost o přijetí změn Službu Azure Pipelines, která ve výchozím nastavení sestaví vaši aplikaci.

  8. Volitelně můžete vybrat odkaz Podrobnosti nebo přejít do projektu v Azure DevOps a sledovat spuštění kanálu.

  9. Po dokončení sestavení se vraťte k žádosti o přijetí změn na GitHubu.

  10. Vyberte Sloučit žádost o přijetí změn a pak vyberte Potvrdit sloučení.

  11. Výběrem možnosti Odstranit větev odstraníte větev z GitHubu feature/home-page-text .