Cvičení – získání ukázkové aplikace

Dokončeno

Připravte se na vytvoření kanálu CI pomocí Microsoft Azure Pipelines. Prvním krokem je sestavení a spuštění webové aplikace Space Game . Když pochopíte, jak sestavit software ručně, připraví vás na opakování procesu v kanálu.

Mara to udělá přesně tak, a když budete postupovat podle postupů, můžete udělat to samé.

Vytvoření tokenu patu Azure DevOps

1. Přihlaste se ke své organizaci (https://dev.azure.com/{yourorganization}). Pokud ještě nemáte organizaci Azure DevOps, vytvořte si bezplatnou organizaci , než začnete. Pokud máte po přihlášení více než jednu organizaci, zvolte Azure DevOps a přejděte do organizace, kterou chcete použít k dokončení tohoto modulu. V tomto příkladu je fabrikamnázev organizace .

   Snímek obrazovky s výběrem vaší organizace Azure DevOps

2. Na domovské stránce otevřete uživatelská nastavení a vyberte Osobní přístupové tokeny.

3. Vyberte + Nový token.

4. Pojmenujte svůj token libovolným názvem, který dáváte přednost. Token se používá, když Codespace zaregistruje svého agenta ve vaší organizaci Azure DevOps, takže můžete zachovat výchozí vypršení platnosti.

5. Zvolte Vlastní definovaný a zvolte Zobrazit všechny obory.

   Snímek obrazovky se zobrazením všech oborů tokenu pat

6. Vyberte následující obor: Fondy agentů (číst a spravovat) a zvolte Vytvořit.

   Snímek obrazovky s výběrem oprávnění fondu agentů pro osobní přístupový token

7. Až budete hotovi, zkopírujte token a uložte ho do zabezpečeného umístění. Pro vaše zabezpečení se znovu nezobrazí.

Upozorňující

Zacházejte s patem a používejte ho jako heslo a udržujte ho v tajnosti.

Vytvoření forku

Prvním krokem k použití projektu v Gitu je vytvoření forku, abyste mohli pracovat se zdrojovými soubory a upravovat je. Fork je kopie úložiště GitHub. Kopie existuje ve vašem účtu a umožňuje provádět požadované změny, aniž by to mělo vliv na původní projekt.

I když můžete navrhnout změny původního projektu, v této lekci pracujete s webovým projektem Space Game , jako by to byl původní projekt vlastněný Mara a týmem.

Poznámka:

Pokud jste dříve vytvořili fork tohoto úložiště, například pokud jste tento modul nebo jiný trénovací modul Tailspin Toys dříve dokončili, doporučujeme odstranit fork a vytvořit nový fork pomocí následujícího postupu. Pokud fork nechcete odstranit, nezapomeňte fork synchronizovat.

Pojďme rozvětvovat webový projekt Space Game do účtu GitHubu:

1. Ve webovém prohlížeči přejděte na GitHub a přihlaste se.

2. Přejděte na webový projekt Space Game .

3. Vyberte Fork:

   Snímek obrazovky GitHubu s umístěním tlačítka Fork

4. Pokud chcete vytvořit fork úložiště do svého účtu, postupujte podle pokynů.

Nastavení tajných kódů pro agenta v místním prostředí

Než vytvoříte Codespace, vytvoříte několik tajných kódů, které vám pomůžou spustit agenta Azure DevOps v místním prostředí. V produkčním prostředí byste v GitHub Codespaces nechtěli používat agenta v místním prostředí. Vzhledem k tomu, že váš tým k testování používá Codespaces, je to dobré dočasné řešení, které ho můžete použít při vytváření kanálů.

1. Přejděte do svého rozvětvovaného úložiště GitHub a vyberte Nastavení>tajných kódů a proměnných>Codespaces.

   Snímek obrazovky s tajnými kódy GitHub Codespaces

2. Vytvořte následující tajné kódy úložiště Codespaces.

   Jméno	Hodnota
   ADO_ORG	Název organizace Azure DevOps, kterou používáte k dokončení tohoto modulu. V tomto příkladu fabrikam je název organizace. Tento název organizace musí být stejný, který jste použili při vytváření pat v předchozím kroku.
   ADO_PAT	Osobní přístupový token, který jste vytvořili v předchozím kroku.

   Tip

   V tomto trénovacím modulu se váš agent přiřadí k Default fondu agentů. Pokud nechcete spustit agenta ve Default fondu (například tento trénovací modul používáte v produkčním prostředí Azure DevOps a máte ve Default fondu další agenty), můžete vytvořit tajný kód s názvem ADO_POOL_NAME a zadat název fondu agentů, který se má použít. Pokud tento tajný klíč není zadaný, použije se Default fond.

Nastavení Codespaces

Dále nastavíte Codespaces, abyste mohli vytvořit web, pracovat se zdrojovými soubory a spustit kanál pomocí místního agenta.

1. V rozvětveném úložišti GitHubu vyberte Code, znovu vyberte Code, zvolte kartu Codespaces a zvolte+, že chcete vytvořit nový Codespace.

   Snímek obrazovky s vytvořením nového codespace s možnostmi

2. Počkejte, než se codespace sestaví. Toto sestavení může chvíli trvat, ale v tomto kroku výukového modulu to stačí udělat jenom jednou.

   Po dokončení sestavení budete přesměrováni na online verzi editoru Visual Studio Code. Codespace se dodává s novou instalací editoru Visual Studio Code, podobně jako nová instalace nástroje Visual Studio Code na místním počítači. Když se Codespace poprvé spustí, může vás Visual Studio Code online vyzvat k zadání určitých konfigurací nebo se vás zeptat na předvolby. Můžete zvolit předvolby, které vyhovují stylu použití editoru Visual Studio Code.

Nastavení upstreamového vzdáleného úložiště

Vzdálené je úložiště Git, kde členové týmu spolupracují (podobně jako úložiště na GitHubu). Pojďme zobrazit seznam vzdálených zařízení a přidat vzdálené zařízení, které odkazuje na kopii úložiště Microsoftu, abyste mohli získat nejnovější ukázkový kód.

1. V online editoru Visual Studio Code přejděte do okna terminálu a zvolte bash z pravé strany.

   Snímek obrazovky okna terminálu v online editoru Visual Studio Code

2. Pokud chcete zobrazit seznam vzdálených zařízení, spusťte git remote příkaz:

   git remote -v
   

   Máte k úložišti přístup k načtení (stažení) i nahrání (nahrání):

   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
   

   Origin určuje vaše úložiště na GitHubu. Když forkujete kód z jiného úložiště, je běžné pojmenovat původní vzdálené úložiště (ten, ze které jste forkovali) upstream.

3. Pokud chcete vytvořit vzdálený pojmenovaný upstream , který odkazuje na úložiště Microsoft, spusťte tento git remote add příkaz:

   git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git
   

4. Spusťte git remote podruhé, abyste viděli změny:

   git remote -v
   

   Uvidíte, že máte ve svém úložišti stále přístup k načítání (stahování) a sdílení změn (nahrávání). Teď máte také přístup k úložišti Microsoftu, který načítáte a nasdílíte je:

   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
   upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
   upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)
   

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

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

   dotnet build --configuration Release
   

2. V okně terminálu spusťte aplikaci tímto dotnet run příkazem:

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

   Soubory řešení .NET můžou obsahovat více než jeden projekt. Argument --project určuje projekt pro webovou aplikaci Space Game .

Ověření fungování aplikace

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

V editoru sady Visual Studio se zobrazí nová zpráva. Vaše aplikace spuštěná na portu 5000 je dostupná. Výběrem možnosti Otevřít v prohlížeči přejděte do spuštěné aplikace.

Snímek obrazovky se zprávou o předávání portů Codespaces

V novém okně prohlížeče by se měl zobrazit web Space Game:

Snímek obrazovky webového prohlížeče s webem Space Game

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:

Snímek obrazovky s webovým prohlížečem zobrazujícím tabulku výsledků Space Game

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

Příprava Visual Studio Code

Nejprve nastavte Visual Studio Code, abyste mohli web sestavit místně a pracovat se zdrojovými soubory.

Visual Studio Code je součástí integrovaného terminálu, takže můžete upravovat soubory a pracovat z příkazového řádku na jednom místě.

1. Spusťte Visual Studio Code.

2. V nabídce Zobrazení vyberte Terminál.

3. V rozevíracím seznamu vyberte Bash:

   Snímek obrazovky s výběrem prostředí Bash v editoru Visual Studio Code

   Okno terminálu umožňuje vybrat libovolné prostředí nainstalované v systému, například Bash, Zsh a PowerShell.

   Tady použijete Bash. Git pro Windows obsahuje Git Bash, které umožňuje snadno spouštět příkazy Gitu.

   Poznámka:

   Pokud ve Windows nevidíte Git Bash uvedený jako možnost, ujistěte se, že jste nainstalovali Git, a restartujte Visual Studio Code.

4. Pokud chcete přejít do adresáře, ze kterého chcete pracovat, třeba z domovského adresáře (~), spusťte cd příkaz. Pokud chcete, můžete vybrat jiný adresář.

   cd ~
   

Konfigurace Gitu

Pokud s Gitem a GitHubem teprve začínáte, musíte nejdřív spustit několik příkazů, abyste přidružili svoji identitu k Gitu a ověřili se pomocí GitHubu.

V části Nastavení Gitu se tento proces popisuje podrobněji.

Minimálně je potřeba provést následující kroky. Z integrovaného terminálu editoru Visual Studio Code spusťte tyto příkazy.

1. Nastavte své uživatelské jméno.
2. Nastavte e-mailovou adresu potvrzení.
3. Heslo GitHubu si můžete uložit do mezipaměti.

Poznámka:

Pokud už s GitHubem používáte dvojúrovňové ověřování, vytvořte osobní přístupový token a po zobrazení výzvy použijte svůj token místo hesla.

Zacházejte s přístupovým tokenem jako s heslem. Udržujte ho na bezpečném místě.

Získání zdrojového kódu

Teď získáte zdrojový kód z GitHubu a nastavíte Visual Studio Code, abyste mohli aplikaci spustit a pracovat se soubory zdrojového kódu.

Vytvoření forku

Prvním krokem k použití projektu v Gitu je vytvoření forku, abyste mohli pracovat se zdrojovými soubory a upravovat je. Fork je kopie úložiště GitHub. Kopie existuje ve vašem účtu a umožňuje provádět požadované změny, aniž by to mělo vliv na původní projekt.

I když můžete navrhnout změny původního projektu, v této lekci pracujete s webovým projektem Space Game , jako by to byl původní projekt vlastněný Mara a týmem.

Pojďme rozvětvovat webový projekt Space Game do účtu GitHubu:

1. Ve webovém prohlížeči přejděte na GitHub a přihlaste se.

2. Přejděte na webový projekt Space Game .

3. Vyberte Fork:

   Snímek obrazovky GitHubu s umístěním tlačítka Fork

4. Pokud chcete vytvořit fork úložiště do svého účtu, postupujte podle pokynů.

Místní klonování forku

Teď, když máte kopii webového projektu Space Game ve svém účtu GitHubu, můžete si stáhnout nebo naklonovat kopii do počítače, abyste s ním mohli pracovat místně.

Klon, například fork, je kopie úložiště. Po naklonování úložiště můžete provést změny, ověřit, že fungují podle očekávání, a pak tyto změny nahrát zpět na GitHub. Místní kopii můžete také synchronizovat se změnami provedenými jinými ověřenými uživateli do kopie úložiště GitHubu.

Webový projekt Space Game naklonujete do svého počítače takto:

1. Přejděte na fork webového projektu Space Game na GitHubu.

2. Na panelu příkazů vyberte Kód. Zobrazí se podokno s možností Klonovat s kartami pro typy klonování. Na kartě HTTPS vyberte ikonu kopírování vedle adresy URL a zkopírujte adresu URL do schránky.

   Snímek obrazovky s vyhledáním adresy URL a tlačítka kopírovat z úložiště GitHub

3. V editoru Visual Studio Code přejděte do okna terminálu a zadejte git clonea vložte adresu URL ze schránky. Měl by vypadat nějak takto:

   git clone https://github.com/username/mslearn-tailspin-spacegame-web.git
   

4. Cloning 'mslearn-tailspin-spacegame-web'... Po dokončení operace zadejte následující příkaz, který změní do mslearn-tailspin-spacegame-webadresáře. Kořenový adresář vašeho úložiště.

   cd mslearn-tailspin-spacegame-web
   

Nastavení upstreamového vzdáleného úložiště

Vzdálené je úložiště Git, kde členové týmu spolupracují (podobně jako úložiště na GitHubu). Pojďme zobrazit seznam vzdálených zařízení a přidat vzdálené zařízení, které odkazuje na kopii úložiště Microsoftu, abyste mohli získat nejnovější ukázkový kód.

1. Pokud chcete zobrazit seznam vzdálených zařízení, spusťte git remote příkaz:

   git remote -v
   

   Máte k úložišti přístup k načtení (stažení) i nahrání (nahrání):

   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
   

   Origin určuje vaše úložiště na GitHubu. Když forkujete kód z jiného úložiště, je běžné pojmenovat původní vzdálené úložiště (ten, ze které jste forkovali) upstream.

2. Pokud chcete vytvořit vzdálený pojmenovaný upstream , který odkazuje na úložiště Microsoft, spusťte tento git remote add příkaz:

   git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git
   

3. Spusťte git remote podruhé, abyste viděli změny:

   git remote -v
   

   Uvidíte, že máte ve svém úložišti stále přístup k načítání (stahování) a sdílení změn (nahrávání). Teď máte také přístup k úložišti Microsoftu, který načítáte a nasdílíte je:

   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
   origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
   upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
   upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)
   

Otevření projektu v Průzkumníkovi souborů

V nástroji Visual Studio Code směřuje okno terminálu do kořenového adresáře webového projektu Space Game. Pojďme projekt otevřít a zobrazit jeho strukturu a pracovat se soubory.

1. Nejjednodušším způsobem, jak otevřít projekt, je znovu otevřít Visual Studio Code v aktuálním adresáři. Provedete to spuštěním následujícího příkazu z integrovaného terminálu:

   code -r .
   

   V průzkumníkovi souborů se zobrazí stromová struktura adresářů a souborů.

2. Znovu otevřete integrovaný terminál. Terminál vás umístí do kořenového adresáře webového projektu.

Pokud se code příkaz nezdaří, musíte do systémové CESTY přidat Visual Studio Code. Postup:

1. V editoru Visual Studio Code vyberte F1 nebo vyberte Zobrazit>paletu příkazů pro přístup k paletě příkazů.

2. Na paletě příkazů zadejte příkaz shellu: Nainstalujte v cestě PATH příkaz code.

3. Opakujte předchozí postup a otevřete projekt v Průzkumníku souborů.

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

Teď, když máte webovou aplikaci, můžete ji sestavit a spustit místně.

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

   dotnet build --configuration Release
   

   Poznámka:

   dotnet Pokud se příkaz nenajde, projděte si požadavky na začátku tohoto modulu. Možná budete muset nainstalovat sadu .NET SDK.

   Projekty .NET mají obvykle dvě konfigurace sestavení: ladění a vydání. Ladicí buildy nejsou optimalizované pro výkon. Usnadní vám trasování v programu a řešení problémů. Tady vyberete konfiguraci vydané verze, aby se webová aplikace zobrazila v akci.

2. V okně terminálu spusťte aplikaci tímto dotnet run příkazem:

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

   Soubory řešení .NET můžou obsahovat více než jeden projekt. Argument --project určuje projekt pro webovou aplikaci Space Game .

Ověření fungování aplikace

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:

Snímek obrazovky webového prohlížeče s webem Space Game

Tip

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

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

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

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:

Snímek obrazovky s webovým prohlížečem zobrazujícím tabulku výsledků Space Game

Až budete hotovi, vraťte se do okna terminálu a zastavte spuštěnou aplikaci tak, že vyberete Ctrl+C.