Alıştırma - Örnek uygulamayı alma

  • 10 dakika

Microsoft Azure Pipelines ile CI işlem hattı oluşturmaya başlamaya hazır olun. İlk adım, Space Game web uygulamasını derlemek ve çalıştırmaktır. Yazılımı el ile derlemeyi anlamak, işlem hattında işlemi yinelemeye hazırlar.

Mara da tam olarak bunu yapacak ve prosedürlere uyarak, sen de aynı şeyi yapabilirsin.

Azure DevOps kişisel erişim belirteci oluşturma

  1. Kuruluşunuzda (https://dev.azure.com/{yourorganization}) oturum açın. Henüz bir Azure DevOps kuruluşunuz yoksa başlamadan önce ücretsiz bir kuruluş oluşturun. Oturum açtığınızda birden fazla kuruluşunuz varsa Azure DevOps'u seçin ve bu modülü tamamlamak için kullanmayı planladığınız kuruluşa gidin. Bu örnekte kuruluşun adı şeklindedir fabrikam.

    Azure DevOps kuruluşunuzu seçme ekran görüntüsü.

  2. Giriş sayfanızdan kullanıcı ayarlarını açın ve Kişisel erişim belirteçleri'ni seçin.

  3. + Yeni Belirteç'i seçin.

  4. Belirtecinizi tercih ettiğiniz herhangi bir adı kullanarak adlandırın. Codespace aracısını Azure DevOps kuruluşunuza kaydettirdiğinde belirteç kullanılır, böylece varsayılan süre sonunu koruyabilirsiniz.

  5. Özel tanımlı'yı seçin ve Tüm kapsamları göster'i seçin.

    Kişisel erişim belirtecinin tüm kapsamlarını görüntüleme ekran görüntüsü.

  6. Aşağıdaki kapsamı seçin: Aracı Havuzları (Okuma ve yönetme) ve Oluştur'u seçin.

    Kişisel erişim belirteci için aracı havuzu izinlerini seçme işleminin ekran görüntüsü.

  7. İşiniz bittiğinde belirteci kopyalayın ve güvenli bir konumda depolayın. Güvenliğiniz için yeniden gösterilmez.

Uyarı

Pat'i parolanız gibi davranıp kullanın ve gizli tutun.

Çatal oluşturma

Git'te proje kullanmanın ilk adımı, kaynak dosyalarla çalışabilmeniz ve bunları değiştirebilmeniz için bir çatal oluşturmaktır. Çatal, GitHub deposunun bir kopyasıdır. Kopya hesabınızda bulunur ve özgün projeyi etkilemeden istediğiniz değişiklikleri yapmanıza olanak tanır.

Özgün projede değişiklik önerebilmenize rağmen, bu derste, Space Game web projesiyle mara ve ekibin sahip olduğu özgün projeymiş gibi çalışırsınız.

Not

Daha önce bu depoyu çatalladıysanız, örneğin bu modülü veya başka bir Tailspin Toys eğitim modülünü daha önce tamamladıysanız , aşağıdaki adımları kullanarak çatalınızı silmenizi ve yeni bir çatal oluşturmanızı öneririz. Çatalınızı silmek istemiyorsanız çatalınızı eşitlediğinizden emin olun.

Şimdi Space Game web projesini GitHub hesabınıza ekleyelim:

  1. Web tarayıcısında GitHub'a gidin ve oturum açın.

  2. Space Game web projesine gidin.

  3. Çatal'ı seçin:

    Çatal düğmesinin konumunu gösteren GitHub'ın ekran görüntüsü.

  4. Depoyu hesabınıza çatal olarak eklemek için yönergeleri izleyin.

Şirket içinde barındırılan aracı için gizli dizileri ayarlama

Codespace'ınızı oluşturmadan önce, şirket içinde barındırılan Azure DevOps aracınızın çalışmasına yardımcı olan birkaç gizli dizi oluşturursunuz. Üretimde GitHub Codespaces'ta şirket içinde barındırılan bir aracı kullanmak istemezsiniz. Ancak ekibiniz test için Codespaces kullandığından işlem hatlarınızı oluştururken kullanmak için iyi bir geçici çözümdür.

  1. Çatallanmış GitHub deponuza gidin ve Ayarlar> Secrets ve codespaces değişkenlerini>seçin.

    GitHub Codespaces gizli dizilerinin ekran görüntüsü.

  2. Aşağıdaki Codespaces Repository gizli dizilerini oluşturun.

    Veri Akışı Adı Değer
    ADO_ORG Bu modülü tamamlamak için kullandığınız Azure DevOps kuruluşunun adı. Bu örnekte kuruluşun fabrikam adı verilmiştir. Bu kuruluş adı, önceki adımda PAT'nizi oluştururken kullandığınız adla aynı olmalıdır.
    ADO_PAT Önceki adımda oluşturduğunuz Kişisel Erişim Belirteci.

    İpucu

    Bu eğitim modülünde aracınız aracı havuzuna Default atanır. Aracınızı Default havuzda çalıştırmak istemiyorsanız (örneğin, üretim Azure DevOps ortamınızı kullanarak bu eğitim modülünü çalıştırıyorsanız ve havuzda başka aracılarınız Default varsa), adlı ADO_POOL_NAME bir gizli dizi oluşturabilir ve kullanılacak aracı havuzunun adını belirtebilirsiniz. Bu gizli dizi belirtilmezse havuz Default kullanılır.

Codespaces'i ayarlama

Ardından Codespaces'ı ayarlayarak web sitesini derleyebilir, kaynak dosyalarla çalışabilir ve şirket içinde barındırılan aracı kullanarak işlem hattınızı çalıştırabilirsiniz.

  1. Çatallanmış GitHub deponuzda Kod'u seçin, yeniden Kod'u seçin, Codespaces sekmesini seçin ve yeni bir Codespace oluşturmayı seçin+.

    Seçeneklerle yeni bir Codespace oluşturma ekran görüntüsü.

  2. Codespace'ınızın derlanmasını bekleyin. Bu derleme birkaç dakika sürebilir, ancak eğitim modülünün bu adımında yalnızca bir kez yapmanız gerekir. Derleme tamamlandığında Visual Studio Code'un çevrimiçi bir sürümüne yönlendirilirsiniz. Codespace'ınız, yerel makinenizde Yeni Visual Studio Code yüklemesine benzer şekilde yeni bir Visual Studio Code yüklemesi ile birlikte gelir. Codespace ilk kez başlatıldığında, Visual Studio Code çevrimiçi olarak sizden belirli yapılandırmayı sağlamanız veya tercihler hakkında soru sormanız istenebilir. Visual Studio Code kullanım stilinize uygun tercihleri seçebilirsiniz.

Yukarı akış uzakını ayarlama

Uzak, ekip üyelerinin işbirliği yaptığı bir Git deposudur (GitHub'daki bir depoya benzer). En son örnek kodu alabilmeniz için uzaktan kumandalarınızı listeleyelim ve Microsoft'un depo kopyasına işaret eden bir uzak sunucu ekleyelim.

  1. Visual Studio Code çevrimiçi düzenleyicisinde terminal penceresine gidin ve sağ taraftan bash'i seçin.

    Visual Studio Code çevrimiçi düzenleyicisinde terminal penceresinin ekran görüntüsü.

  2. Uzaktan kumandalarınızı listelemek için komutunu git remote çalıştırın:

    git remote -v

    Deponuza hem getirme (indirme) hem de gönderme (karşıya yükleme) erişiminiz vardır:

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

    Kaynak , GitHub'daki deponuzu belirtir. Kodu başka bir depodan çatalladığınızda, özgün uzak öğeyi (çatalını oluşturduğunuz) yukarı akış olarak adlandırmak yaygın bir durumdur.

  3. Microsoft deposuna işaret eden yukarı akış adlı uzak bir uzak akış oluşturmak için şu git remote add komutu çalıştırın:

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

  4. Değişiklikleri görmek için ikinci kez çalıştırın git remote :

    git remote -v

    Deponuza hem getirme (indirme) hem de gönderme (karşıya yükleme) erişiminizin olduğunu görürsünüz. Artık Microsoft deposuna getirme ve gönderme erişimine de sahipsiniz:

    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)

Web uygulamasını derleme ve çalıştırma

  1. Visual Studio Code çevrimiçi düzenleyicisinde terminal penceresine gidin ve uygulamayı oluşturmak için şu dotnet build komutu çalıştırın:

    dotnet build --configuration Release

  2. Terminal penceresinde uygulamayı çalıştırmak için şu dotnet run komutu çalıştırın:

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

    .NET çözüm dosyaları birden fazla proje içerebilir. --project bağımsız değişkeni, Space Game web uygulaması için projeyi belirtir.

Uygulamanın çalıştığını doğrulama

Geliştirme modunda, Space Game web sitesi 5000 numaralı bağlantı noktasında çalışacak şekilde yapılandırılmıştır.

Visual Studio düzenleyicisinde yeni bir ileti görürsünüz. 5000 numaralı bağlantı noktasında çalışan uygulamanız kullanılabilir. Çalışan uygulamaya gitmek için Tarayıcıda Aç'ı seçin.

Codespaces iletisinin bağlantı noktası iletmesinin ekran görüntüsü.

Yeni tarayıcı penceresinde Space Game web sitesini görmeniz gerekir:

Space Game web sitesini gösteren bir web tarayıcısının ekran görüntüsü.

Puan tablosu da dahil olmak üzere sayfayla etkileşim kurabilirsiniz. Bir oyuncunun adını seçtiğinizde, o oyuncuyla ilgili ayrıntıları görürsünüz:

Space Game puan tablosunu gösteren bir web tarayıcısının ekran görüntüsü.

İşiniz bittiğinde terminal penceresine dönün ve çalışan uygulamayı durdurmak için Ctrl+C tuşlarına basın.

Visual Studio Code’u hazırlama

İlk olarak, web sitesini yerel olarak oluşturup kaynak dosyalarla çalışabilmek için Visual Studio Code'un kurulumunu yapın.

Visual Studio Code tümleşik bir terminalle birlikte gelir, böylece dosyaları düzenleyebilir ve komut satırından tek bir yerden çalışabilirsiniz.

  1. Visual Studio Code’u başlatın.

  2. Görünüm menüsünde Terminal'i seçin.

  3. Açılan listede bash'i seçin:

    Visual Studio Code'da Bash kabuğunu seçme işleminin ekran görüntüsü.

    Terminal penceresi Bash, Zsh ve PowerShell gibi sisteminizde yüklü olan tüm kabukları seçmenize olanak tanır.

    Burada Bash'i kullanırsınız. Windows için Git, Git komutlarını çalıştırmayı kolaylaştıran Git Bash'i sağlar.

    Not

    Windows'ta Git Bash'in seçenek olarak listelendiğini görmüyorsanız Git'i yüklediğinizden emin olun ve Visual Studio Code'u yeniden başlatın.

  4. Giriş dizininiz ()~ gibi, çalışmak istediğiniz dizine gitmek için komutunu çalıştırın cd . İsterseniz farklı bir dizin seçebilirsiniz.

    cd ~

Git'i yapılandırma

Git ve GitHub'da yeniyseniz öncelikle kimliğinizi Git ile ilişkilendirmek ve GitHub ile kimlik doğrulaması yapmak için birkaç komut çalıştırmanız gerekir.

Git'i ayarlama işlemi daha ayrıntılı olarak açıklar.

En azından aşağıdaki adımları tamamlamanız gerekir. Visual Studio Code tümleşik terminalinden bu komutları çalıştırın.

  1. Kullanıcı adınızı ayarlayın.
  2. İşleme e-posta adresinizi ayarlayın.
  3. GitHub parolanızı önbelleğe alın.

Not

GitHub ile zaten iki öğeli kimlik doğrulaması kullanıyorsanız kişisel bir erişim belirteci oluşturun ve daha sonra istendiğinde parolanızın yerine belirtecinizi kullanın.

Erişim belirtecinize parola gibi davranın. Güvenli bir yerde tut.

Kaynak kodunu alma

Şimdi GitHub'dan kaynak kodu alır ve uygulamayı çalıştırıp kaynak kod dosyalarıyla çalışabilmek için Visual Studio Code'u ayarlarsınız.

Çatal oluşturma

Git'te proje kullanmanın ilk adımı, kaynak dosyalarla çalışabilmeniz ve bunları değiştirebilmeniz için bir çatal oluşturmaktır. Çatal, GitHub deposunun bir kopyasıdır. Kopya hesabınızda bulunur ve özgün projeyi etkilemeden istediğiniz değişiklikleri yapmanıza olanak tanır.

Özgün projede değişiklik önerebilmenize rağmen, bu derste, Space Game web projesiyle mara ve ekibin sahip olduğu özgün projeymiş gibi çalışırsınız.

Şimdi Space Game web projesini GitHub hesabınıza ekleyelim:

  1. Web tarayıcısında GitHub'a gidin ve oturum açın.

  2. Space Game web projesine gidin.

  3. Çatal'ı seçin:

    Çatal düğmesinin konumunu gösteren GitHub'ın ekran görüntüsü.

  4. Depoyu hesabınıza çatal olarak eklemek için yönergeleri izleyin.

Çatalınızı yerel olarak kopyalama

Artık GitHub hesabınızda Space Game web projesinin bir kopyası olduğuna göre, yerel olarak çalışabilmek için bilgisayarınıza bir kopya indirebilir veya kopyalayabilirsiniz.

Çatal gibi bir kopya, deponun kopyasıdır. Bir depoyu kopyaladığınızda, değişiklikler yapabilir, beklediğiniz gibi çalıştıklarını doğrulayabilir ve sonra bu değişiklikleri GitHub'a geri yükleyebilirsiniz. Ayrıca, yerel kopyanızı diğer kimliği doğrulanmış kullanıcılar tarafından yapılan değişikliklerle GitHub'ın deponuzun kopyasına eşitleyebilirsiniz.

Space Game web projesini bilgisayarınıza kopyalamak için:

  1. GitHub'da Space Game web projesi çatalınıza gidin.

  2. Komut çubuğunda Kod'a tıklayın. Kopyalama türleri için sekmeler içeren Kopyala seçeneğini gösteren bir bölme görüntülenir. URL'yi panonuza kopyalamak için HTTPS sekmesinde URL'nin yanındaki kopyala simgesini seçin.

    GitHub deposunda URL'yi ve kopyala düğmesini bulma işleminin ekran görüntüsü.

  3. Visual Studio Code'da terminal penceresine gidin ve yazın git cloneve ardından panonuzdan URL'yi yapıştırın. Şuna benzer görünmelidir:

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

  4. Cloning 'mslearn-tailspin-spacegame-web'... İşlem tamamlandıktan sonra dizine geçmek mslearn-tailspin-spacegame-webiçin aşağıdaki komutu girin. Deponuzun kök dizini.

    cd mslearn-tailspin-spacegame-web

Yukarı akış uzakını ayarlama

Uzak, ekip üyelerinin işbirliği yaptığı bir Git deposudur (GitHub'daki bir depoya benzer). En son örnek kodu alabilmeniz için uzaktan kumandalarınızı listeleyelim ve Microsoft'un depo kopyasına işaret eden bir uzak sunucu ekleyelim.

  1. Uzaktan kumandalarınızı listelemek için komutunu git remote çalıştırın:

    git remote -v

    Deponuza hem getirme (indirme) hem de gönderme (karşıya yükleme) erişiminiz vardır:

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

    Kaynak , GitHub'daki deponuzu belirtir. Kodu başka bir depodan çatalladığınızda, özgün uzak öğeyi (çatalını oluşturduğunuz) yukarı akış olarak adlandırmak yaygın bir durumdur.

  2. Microsoft deposuna işaret eden yukarı akış adlı uzak bir uzak akış oluşturmak için şu git remote add komutu çalıştırın:

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

  3. Değişiklikleri görmek için ikinci kez çalıştırın git remote :

    git remote -v

    Deponuza hem getirme (indirme) hem de gönderme (karşıya yükleme) erişiminizin olduğunu görürsünüz. Artık Microsoft deposuna getirme ve gönderme erişimine de sahipsiniz:

    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)

Projeyi dosya gezgininde açma

Visual Studio Code'da terminal pencereniz Space Game web projesinin kök dizinini gösterir. Şimdi yapısını görüntülemek ve dosyalarla çalışmak için projeyi açalım.

  1. Projeyi açmanın en kolay yolu Visual Studio Code'un geçerli dizinde yeniden açılmasıdır. Bunu yapmak için, tümleşik terminalden aşağıdaki komutu çalıştırın:

    code -r .

    Dizini ve dosya ağacını dosya gezgininde görürsünüz.

  2. Tümleşik terminali yeniden açın. Terminal sizi web projenizin köküne yerleştirir.

code Komut başarısız olursa, sistem PATH'inize Visual Studio Code eklemeniz gerekir. Yapmak için:

  1. Visual Studio Code'da F1'i seçin veya komut paletine erişmek için Komut Paletini Görüntüle'yi>seçin.

  2. Komut paletine Shell Command: Install 'code' command in PATH yazın.

  3. Projeyi dosya gezgininde açmak için önceki yordamı yineleyin.

Web uygulamasını derleme ve çalıştırma

Artık web uygulamanız olduğuna göre, uygulamayı yerel olarak derleyebilir ve çalıştırabilirsiniz.

  1. Visual Studio Code'da terminal penceresine gidin ve uygulamayı oluşturmak için şu dotnet build komutu çalıştırın:

    dotnet build --configuration Release

    Not

    dotnet Komut bulunamazsa, bu modülün başındaki önkoşulları gözden geçirin. .NET SDK'sını yüklemeniz gerekebilir.

    .NET projeleri genellikle iki derleme yapılandırmasıyla birlikte gelir: Hata Ayıklama ve Yayın. Hata ayıklama derlemeleri performans için iyileştirilmemiştir. Programınızı izlemenizi ve sorunları gidermenizi kolaylaştırır. Burada, yalnızca web uygulamasının çalıştığını görmek için Yayın yapılandırmasını seçersiniz.

  2. Terminal penceresinde uygulamayı çalıştırmak için şu dotnet run komutu çalıştırın:

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

    .NET çözüm dosyaları birden fazla proje içerebilir. --project bağımsız değişkeni, Space Game web uygulaması için projeyi belirtir.

Uygulamanın çalıştığını doğrulama

Geliştirme modunda, Space Game web sitesi 5000 numaralı bağlantı noktasında çalışacak şekilde yapılandırılmıştır.

Yeni bir tarayıcı sekmesinden, çalışan uygulamayı görmek için adresine gidin http://localhost:5000 :

Space Game web sitesini gösteren bir web tarayıcısının ekran görüntüsü.

İpucu

Tarayıcınızda gizlilik veya sertifika hatasıyla ilgili bir hata görürseniz çalışan uygulamayı durdurmak için terminalden Ctrl+C tuşlarını seçin.

Ardından komutunu çalıştırın dotnet dev-certs https --trust ve istendiğinde Evet'i seçin. Daha fazla bilgi için bu blog gönderisine bakın.

Bilgisayarınız yerel SSL sertifikanıza güvendikten sonra, çalışan uygulamayı görmek için komutu ikinci kez çalıştırın dotnet run ve yeni bir tarayıcı sekmesinden adresine gidin http://localhost:5000 .

Puan tablosu da dahil olmak üzere sayfayla etkileşim kurabilirsiniz. Bir oyuncunun adını seçtiğinizde, o oyuncuyla ilgili ayrıntıları görürsünüz:

Space Game puan tablosunu gösteren bir web tarayıcısının ekran görüntüsü.

İşiniz bittiğinde terminal penceresine dönün ve çalışan uygulamayı durdurmak için Ctrl+C tuşlarına basın.