Latihan - Mendapatkan aplikasi contoh

  • 10 menit

Bersiaplah untuk mulai membangun alur CI dengan Microsoft Azure Pipelines. Langkah pertama adalah membangun dan menjalankan aplikasi web Space Game . Memahami cara membangun perangkat lunak secara manual, mempersiapkan Anda untuk mengulangi proses dalam alur.

Mara akan melakukan persis seperti itu, dan dengan mengikuti prosedur, Anda dapat melakukan hal yang sama.

Membuat token akses pribadi Azure DevOps

  1. Masuk ke organisasi Anda (https://dev.azure.com/{yourorganization}). Jika Anda belum memiliki organisasi Azure DevOps, buat organisasi gratis sebelum Memulai. Setelah masuk, jika Anda memiliki lebih dari satu organisasi, pilih Azure DevOps dan buka organisasi yang anda rencanakan untuk digunakan untuk menyelesaikan modul ini. Dalam contoh ini, nama organisasi adalah fabrikam.

    Cuplikan layar memilih organisasi Azure DevOps Anda.

  2. Dari halaman beranda Anda, buka pengaturan pengguna dan pilih Token akses pribadi.

  3. Pilih + Token Baru.

  4. Beri nama token Anda menggunakan nama apa pun yang Anda sukai. Token digunakan saat Codespace mendaftarkan agennya dengan organisasi Azure DevOps Anda, sehingga Anda dapat mempertahankan kedaluwarsa default.

  5. Pilih Ditentukan kustom dan pilih Perlihatkan semua cakupan.

    Cuplikan layar menampilkan semua cakupan untuk token akses pribadi.

  6. Pilih cakupan berikut: Kumpulan Agen (Baca &kelola), dan pilih Buat.

    Cuplikan layar memilih izin kumpulan agen untuk token akses pribadi.

  7. Setelah selesai, salin token dan simpan di lokasi yang aman. Untuk keamanan Anda, keamanan tidak akan ditampilkan lagi.

Peringatan

Perlakukan dan gunakan PAT seperti kata sandi Anda dan rahasiakan.

Membuat fork

Langkah pertama untuk menggunakan proyek di Git adalah membuat fork sehingga Anda dapat menggunakan dan memodifikasi file sumber. Fork adalah salinan dari repositori GitHub. Salinan ada di akun Anda dan memungkinkan Anda membuat perubahan apa pun tanpa memengaruhi proyek asli.

Meskipun Anda dapat mengusulkan perubahan pada proyek asli, dalam pelajaran ini, Anda bekerja dengan proyek web Space Game seolah-olah itu adalah proyek asli yang dimiliki oleh Mara dan tim.

Catatan

Jika sebelumnya Anda telah membuat fork repositori ini, misalnya jika sebelumnya Anda telah menyelesaikan modul ini atau modul pelatihan Tailspin Toys lainnya, kami sarankan Anda menghapus fork dan membuat fork baru menggunakan langkah-langkah berikut. Jika Anda tidak ingin menghapus fork, pastikan Anda menyinkronkan fork Anda.

Mari kita buat fork proyek web Space Game ke akun GitHub Anda:

  1. Di browser web, buka GitHub dan masuk.

  2. Buka proyek web Space Game.

  3. Pilih Fork:

    Cuplikan layar GitHub yang menunjukkan lokasi tombol Fork.

  4. Untuk membuat fork repositori ke akun Anda, ikuti instruksinya.

Menyiapkan rahasia untuk agen yang dihost sendiri

Sebelum membuat Codespace, Anda membuat beberapa rahasia yang membantu agen Azure DevOps yang dihost sendiri berjalan. Dalam produksi, Anda tidak ingin menggunakan agen yang dihost sendiri di GitHub Codespaces. Namun, karena tim Anda menggunakan Codespace untuk pengujian, ini adalah solusi sementara yang baik untuk menggunakannya saat Anda membangun alur Anda.

  1. Buka repositori GitHub fork Anda dan pilih Pengaturan>Rahasia dan variabel>Codespaces.

    Cuplikan layar rahasia GitHub Codespaces.

  2. Buat rahasia Repositori Codespace berikut.

    Nama Nilai
    ADO_ORG Nama organisasi Azure DevOps yang Anda gunakan untuk menyelesaikan modul ini. Dalam contoh ini, fabrikam adalah nama organisasi. Nama organisasi ini harus sama dengan yang Anda gunakan saat membuat PAT di langkah sebelumnya.
    ADO_PAT Token Akses Pribadi yang Anda buat di langkah sebelumnya.

    Tip

    Dalam modul pelatihan ini, agen Anda ditetapkan ke kumpulan Default agen. Jika tidak ingin menjalankan agen Anda di Default kumpulan (misalnya, Anda menjalankan modul pelatihan ini menggunakan lingkungan Azure DevOps produksi Anda dan Anda memiliki agen lain di Default kumpulan), Anda dapat membuat rahasia bernama ADO_POOL_NAME dan menentukan nama kumpulan agen yang akan digunakan. Jika rahasia ini tidak ditentukan, kumpulan Default akan digunakan.

Menyiapkan Codespace

Selanjutnya, Anda menyiapkan Codespace sehingga Anda dapat membangun situs web, bekerja dengan file sumber, dan menjalankan alur Anda menggunakan agen yang dihost sendiri.

  1. Di repositori GitHub fork Anda, pilih Kode, pilih Kode lagi, pilih tab Codespace, dan pilih + untuk membuat Codespace baru.

    Cuplikan layar buat Codespace baru dengan opsi.

  2. Tunggu hingga Codespace Anda dibuat. Build ini dapat memakan waktu beberapa saat, tetapi Anda hanya perlu melakukannya sekali dalam langkah modul pelatihan ini.

    Setelah build selesai, Anda dialihkan ke versi online Visual Studio Code. Codespace Anda dilengkapi dengan penginstalan baru Visual Studio Code, mirip dengan penginstalan baru Visual Studio Code di komputer lokal Anda. Saat Codespace pertama kali dimulai, Visual Studio Code online mungkin meminta Anda untuk menyediakan konfigurasi tertentu atau menanyakan preferensi kepada Anda. Anda dapat memilih preferensi yang sesuai dengan gaya penggunaan Visual Studio Code Anda.

Mengatur remote upstram

Remote adalah repositori Git tempat anggota tim berkolaborasi (mirip dengan repositori di GitHub). Mari kita cantumkan remote Anda dan tambahkan remote yang mengarah ke salinan repositori Microsoft sehingga Anda bisa mendapatkan kode sampel terbaru.

  1. Di editor online Visual Studio Code, buka jendela terminal dan pilih bash dari sisi kanan.

    Cuplikan layar jendela terminal di editor online Visual Studio Code.

  2. Untuk membuat daftar remote Anda, jalankan perintah git remote:

    git remote -v

    Anda memiliki akses ambil (unduh) dan dorong (unggah) ke repositori Anda:

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

    Asal menentukan repositori Anda di GitHub. Saat Anda membuat fork kode dari repositori lain, biasanya menamai remote asli (yang Anda gunakan untuk fork) sebagai upstream.

  3. Untuk membuat remote bernama upstream yang mengarah ke repositori Microsoft, jalankan perintah git remote add ini:

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

  4. Jalankan git remote kedua kalinya untuk melihat perubahannya:

    git remote -v

    Anda melihat bahwa Anda masih memiliki akses ambil (unduh) dan dorong (unggah) ke repositori Anda. Sekarang Anda juga telah mengambil dan mendorong akses ke repositori Microsoft:

    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)

Membangun dan menjalankan aplikasi web

  1. Di editor online Visual Studio Code, navigasikan ke jendela terminal, dan untuk membangun aplikasi, jalankan perintah ini dotnet build :

    dotnet build --configuration Release

  2. Dari jendela terminal, untuk menjalankan aplikasi, jalankan perintah dotnet run ini:

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

    File solusi .NET dapat berisi lebih dari satu proyek. Argumen --project menentukan proyek untuk aplikasi web Space Game.

Pastikan aplikasi berjalan

Dalam mode pengembangan, situs web Space Game dikonfigurasi agar berjalan pada port 5000.

Anda melihat pesan baru di editor Visual Studio. Aplikasi Anda yang berjalan pada port 5000 tersedia. Pilih Buka di Browser untuk masuk ke aplikasi yang sedang berjalan.

Cuplikan layar pesan Codespace penerusan port.

Di jendela browser baru, Anda akan melihat situs web Space Game:

Cuplikan layar browser web yang menampilkan situs web Space Game.

Anda dapat berinteraksi dengan halaman, termasuk papan peringkat. Saat Anda memilih nama pemain, Anda akan melihat detail tentang pemain tersebut:

Cuplikan layar browser web yang menampilkan papan peringkat Space Game.

Setelah selesai, kembali ke jendela terminal, dan untuk menghentikan aplikasi yang sedang berjalan, pilih Ctrl + C.

Menyiapkan Visual Studio Code

Pertama, siapkan Visual Studio Code sehingga Anda dapat membangun situs web secara lokal dan bekerja dengan file sumber.

Visual Studio Code hadir dengan terminal terintegrasi, sehingga Anda dapat mengedit file dan bekerja dari baris perintah semua dalam satu tempat.

  1. Memulai Visual Studio Code.

  2. Pada menu Tampilan, pilih Terminal.

  3. Pada menu dropdown, pilih bash:

    Cuplikan layar pemilihan shell Bash di Visual Studio Code.

    Jendela terminal memungkinkan Anda memilih shell apa pun yang diinstal pada sistem Anda, seperti Bash, Zsh, dan PowerShell.

    Di sini, Anda menggunakan Bash. Git untuk Windows menyediakan Git Bash, yang memudahkan menjalankan perintah Git.

    Catatan

    Di Windows, jika Anda tidak melihat Git Bash terdaftar sebagai opsi, pastikan Anda telah menginstal Git, lalu memulai ulang Visual Studio Code.

  4. Untuk menavigasikan ke direktori tempat Anda ingin bekerja, seperti direktori beranda (~), jalankan perintah cd. Anda dapat memilih direktori lain jika mau.

    cd ~

Konfigurasikan Git

Jika Anda baru mengenal Git dan GitHub, Anda harus menjalankan beberapa perintah terlebih dahulu untuk mengaitkan identitas Anda dengan Git dan mengautentikasi dengan GitHub.

Menyiapkan Git menjelaskan proses secara lebih rinci.

Setidaknya, Anda perlu menyelesaikan langkah-langkah berikut. Dari terminal terintegrasi Visual Studio Code, jalankan perintah berikut.

  1. Atur nama pengguna Anda.
  2. Atur alamat email penerapan Anda.
  3. Tembolokan kata sandi GitHub Anda.

Catatan

Jika Anda menggunakan otentikasi dua faktor dengan GitHub, buat token akses pribadi, dan gunakan token Anda sebagai pengganti kata sandi jika nanti diminta.

Perlakukan token akses Anda seperti kata sandi. Simpan di tempat yang aman.

Dapatkan kode sumber

Sekarang, Anda mendapatkan kode sumber dari GitHub dan menyiapkan Visual Studio Code sehingga Anda dapat menjalankan aplikasi dan bekerja dengan file kode sumber.

Membuat fork

Langkah pertama untuk menggunakan proyek di Git adalah membuat fork sehingga Anda dapat menggunakan dan memodifikasi file sumber. Fork adalah salinan dari repositori GitHub. Salinan ada di akun Anda dan memungkinkan Anda membuat perubahan apa pun tanpa memengaruhi proyek asli.

Meskipun Anda dapat mengusulkan perubahan pada proyek asli, dalam pelajaran ini, Anda bekerja dengan proyek web Space Game seolah-olah itu adalah proyek asli yang dimiliki oleh Mara dan tim.

Mari kita buat fork proyek web Space Game ke akun GitHub Anda:

  1. Di browser web, buka GitHub, lalu masuk.

  2. Buka proyek web Space Game.

  3. Pilih Fork:

    Cuplikan layar GitHub yang menunjukkan lokasi tombol Fork.

  4. Untuk membuat fork repositori ke akun Anda, ikuti instruksinya.

Mengkloning fork Anda secara lokal

Sekarang setelah Anda memiliki salinan proyek web Space Game di akun GitHub, Anda dapat mengunduh, atau mengkloning, salinan ke komputer sehingga Anda dapat menggunakannya secara lokal.

Kloning, seperti fork, adalah salinan repositori. Saat mengkloning repositori, Anda dapat membuat perubahan, memverifikasi bahwa repositori berfungsi seperti yang Anda harapkan, lalu mengunggah perubahan tersebut kembali ke GitHub. Anda juga dapat menyinkronkan salinan lokal Anda dengan perubahan yang dibuat oleh pengguna terautentikasi lainnya ke salinan repositori GitHub Anda.

Untuk mengkloning proyek web Space Game ke komputer Anda:

  1. Buka fork proyek web Space Game di GitHub.

  2. Pada bilah perintah, pilih Kode. Tampilan panel yang menunjukkan opsi Klon dengan tab untuk jenis-jenis kloning. Dari tab HTTPS, pilih ikon salin di samping URL untuk menyalin URL ke clipboard.

    Cuplikan layar lokasi URL dan tombol salin dari repositori GitHub.

  3. Di Visual Studio Code, buka jendela terminal dan masukkan git clone, lalu tempelkan URL dari clipboard Anda. Nilai seharusnya terlihat mirip dengan:

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

  4. Setelah operasi Cloning 'mslearn-tailspin-spacegame-web'... selesai, masukkan perintah berikut untuk mengubah direktori mslearn-tailspin-spacegame-web. Direktori akar repositori Anda.

    cd mslearn-tailspin-spacegame-web

Mengatur remote upstram

Remote adalah repositori Git tempat anggota tim berkolaborasi (mirip dengan repositori di GitHub). Mari kita cantumkan remote Anda dan tambahkan remote yang mengarah ke salinan repositori Microsoft sehingga Anda bisa mendapatkan kode sampel terbaru.

  1. Untuk membuat daftar remote Anda, jalankan perintah git remote:

    git remote -v

    Anda memiliki akses ambil (unduh) dan dorong (unggah) ke repositori Anda:

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

    Asal menentukan repositori Anda di GitHub. Saat Anda membuat fork kode dari repositori lain, biasanya menamai remote asli (yang Anda gunakan untuk fork) sebagai upstream.

  2. Untuk membuat remote bernama upstream yang mengarah ke repositori Microsoft, jalankan perintah git remote add ini:

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

  3. Jalankan git remote kedua kalinya untuk melihat perubahannya:

    git remote -v

    Anda melihat bahwa Anda masih memiliki akses ambil (unduh) dan dorong (unggah) ke repositori Anda. Sekarang Anda juga telah mengambil dan mendorong akses ke repositori Microsoft:

    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)

Buka proyek di penjelajah file

Dalam Visual Studio Code, jendela terminal Anda mengarah ke direktori akar proyek web Space Game. Mari kita buka proyek untuk melihat strukturnya dan menggunakan file.

  1. Cara termudah untuk membuka proyek adalah membuka kembali Visual Studio Code di direktori saat ini. Untuk melakukannya, jalankan perintah berikut dari terminal terintegrasi:

    code -r .

    Anda melihat direktori dan pohon file di penjelajah file.

  2. Buka kembali terminal terintegrasi. Terminal menempatkan Anda di akar proyek web Anda.

Jika perintah code gagal, Anda perlu menambahkan Visual Studio Code ke PATH sistem Anda. Untuk melakukannya:

  1. Di Visual Studio Code, pilih F1 atau pilih Tampilkan>Palet Perintah untuk mengakses palet perintah.

  2. Di palet perintah, masukkan Perintah Shell: Instal perintah 'kode' di PATH.

  3. Ulangi prosedur sebelumnya untuk membuka proyek di penjelajah file.

Membangun dan menjalankan aplikasi web

Setelah memiliki aplikasi web, Anda dapat membangun dan menjalankannya secara lokal.

  1. Di Visual Studio Code, navigasikan ke jendela terminal, dan untuk membangun aplikasi, jalankan perintah dotnet build ini:

    dotnet build --configuration Release

    Catatan

    Jika perintah dotnet tidak ditemukan, tinjau prasyarat di awal modul ini. Anda mungkin perlu menginstal .NET SDK.

    Proyek .NET biasanya dilengkapi dengan dua konfigurasi build: Debug dan Rilis. Build debug tidak dioptimalkan untuk performa. Mereka memudahkan Anda untuk melacak melalui program Anda dan memecahkan masalah. Di sini, Anda memilih konfigurasi Rilis hanya untuk melihat aplikasi web bekerja.

  2. Dari jendela terminal, untuk menjalankan aplikasi, jalankan perintah dotnet run ini:

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

    File solusi .NET dapat berisi lebih dari satu proyek. Argumen --project menentukan proyek untuk aplikasi web Space Game.

Pastikan aplikasi berjalan

Dalam mode pengembangan, situs web Space Game dikonfigurasi agar berjalan pada port 5000.

Dari tab browser baru, navigasikan ke http://localhost:5000 untuk melihat aplikasi yang sedang berjalan:

Cuplikan layar browser web yang menampilkan situs web Space Game.

Tip

Jika Anda melihat kesalahan di browser yang terkait dengan privasi atau kesalahan sertifikat, untuk menghentikan aplikasi yang sedang berjalan, pilih Ctrl + C dari terminal Anda.

Selanjutnya, jalankan dotnet dev-certs https --trust lalu pilih Ya jika diminta. Untuk informasi selengkapnya, lihat posting blog ini.

Setelah komputer Anda mempercayai sertifikat SSL lokal, untuk melihat aplikasi yang berjalan, jalankan perintah dotnet run kedua kalinya dan buka http://localhost:5000 dari tab browser baru.

Anda dapat berinteraksi dengan halaman, termasuk papan peringkat. Saat Anda memilih nama pemain, Anda akan melihat detail tentang pemain tersebut:

Cuplikan layar browser web yang menampilkan papan peringkat Space Game.

Setelah selesai, kembali ke jendela terminal, dan untuk menghentikan aplikasi yang sedang berjalan, pilih Ctrl+C.