Menggunakan GitHub Codespaces untuk membuat dan men-debug

2023-08-09

Jika memiliki langganan GitHub Team atau GitHub Enterprise Cloud, Anda dapat menggunakan GitHub Codespaces untuk menyiapkan proyek sehingga build dalam wadah yang dihosting oleh GitHub. Dengan fitur Remote Visual Studio Code, Anda dapat menyambungkan Visual Studio Code di desktop ke Codespace dan mengedit, menyusun, menyebarkan, dan melakukan debug langsung dari Codespace.

Topik ini membahas penggunaan Ruang Kode GitHub untuk mengedit, menyusun, menyebarkan, dan men-debug aplikasi Azure Sphere Anda dari jarak jauh; Gunakan wadah untuk build dan debug dengan Visual Studio Code menjelaskan penggunaan Visual Studio Code untuk mengedit, menyusun, menyebarkan, dan men-debug aplikasi Azure Sphere Anda dalam wadah secara lokal.

Untuk menggunakan Codespaces, proyek Anda harus dikonfigurasi sebagai penyimpanan GitHub dan juga dikonfigurasi untuk digunakan dalam wadah. Dalam topik ini, Anda akan membuat proyek Blink baru dengan konfigurasi yang sesuai.

Membuat penyimpanan GitHub untuk proyek Anda

Buat penyimpanan GitHub kosong sebagai berikut:

Masuk ke github.com.
Dari laman GitHub Anda, pilih tombol Baru di samping kata Penyimpanan.
Beri nama tempat penyimpanan Anda, seperti Berkedip, lalu pilih Buat penyimpanan.
Di bawah Penyiapan cepat--jika Anda telah melakukan hal semacam ini sebelumnya, salin url HTTPS untuk penyimpanan Anda.
Di prompt perintah, kloning repository baru Anda ke desktop lokal Anda sebagai berikut:
```
git clone <repository-url>
```
Anda akan melihat peringatan bahwa Anda telah mengkloning tempat penyimpanan kosong.

Membuat proyek Blink baru di clone Anda

Buka Visual Studio Code dan buat proyek baru sebagai berikut:

Pilih Tampilkan>Palet> PerintahAzure Sphere: Hasilkan Proyek Baru.
Di bawah Pilih Templat, pilih Berkedip.
Dalam dialog Pilih Folder , tentukan folder untuk membuat proyek baru. (Ini bisa di mana saja—Anda akan menyalin konten folder ini ke penyimpanan GitHub yang sebelumnya dibuat.)
Tentukan nama proyek yang cocok dengan nama penyimpanan GitHub Anda, seperti Blink, dan tekan Enter.
Salin file proyek Azure Sphere Anda (termasuk semua subfolder seperti .vscode dan HardwareDefinitions ) ke kloning lokal, lakukan, dan dorong perubahan. Anda kemudian dapat menghapus folder proyek yang dibuat di bagian ini, karena semuanya akan berada di penyimpanan GitHub.

Menyiapkan folder .devcontainer

Di direktori tingkat atas repository GitHub Anda, buat folder bernama .devcontainer. Dalam folder ini, buat file bernama devcontainer.json dengan konten berikut:

{
    "name": "Azure Sphere Blink",
    "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined"],
    "build": {
        "dockerfile": "Dockerfile",
        "target": "dev"
    },

    // Use 'settings' to set *default* container specific settings.json values on container create.
    // You can edit these settings after create using File > Preferences > Settings > Remote.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },

    // Use 'appPort' to create a container with published ports. If the port isn't working, be sure
    // your server accepts connections from all interfaces (0.0.0.0 or '*'), not just localhost.
    // "appPort": [],

    // Uncomment the next line to run commands after the container is created.
    // "postCreateCommand": "gcc -v",

    // Comment out the next line if you want to run as root instead
    "remoteUser": "vscode",

    // Add the IDs of extensions you want installed when the container is created in the array below.
    "extensions": [
        "ms-vscode.azure-sphere-tools",
        "ms-vscode.azure-sphere-tools-ui"
    ]
}

Berikutnya, buat file bernama Dockerfile di folder .devcontainer dengan konten berikut:

FROM mcr.microsoft.com/azurespheresdk:latest AS dev

FROM dev AS build
COPY ./ /src/
WORKDIR /out
RUN cmake -G "Ninja" -DCMAKE_TOOLCHAIN_FILE="/opt/azurespheresdk/CMakeFiles/AzureSphereToolchain.cmake" \
    -DAZURE_SPHERE_TARGET_API_SET="latest-lts" -DCMAKE_BUILD_TYPE="Release" "/src"
ENTRYPOINT [ "ninja" ]

Baris awal FROM menentukan gambar Docker Azure Sphere standar sebagai wadah pengembangan dasar, dan yang kedua mengatakan untuk menggunakan wadah dasar tersebut sebagai lingkungan build. Baris COPY menyalin konten repositori ke dalam direktori /src/ kontainer. Menentukan WORKDIR direktori build. Perintah menyediakan RUN perintah CMake untuk menghasilkan file build. Akhirnya, penentu ENTRYPOINT bahwa ninja harus diminta untuk benar-benar membangun aplikasi.

Lakukan perubahan pada proyek GitHub Anda dan dorong perubahan.

Menginstal ekstensi GitHub Codespaces

Untuk menginstal ekstensi GitHub Codespaces:

Buka folder penyimpanan GitHub di Visual Studio Code, jika belum.
Buka Ekstensi dari Bilah Aktivitas Visual Studio Code.
Cari "GitHub Codespaces" dan instal ekstensi GitHub Codespaces.

Membuat ruang kode

Pilih Tampilkan>Codespace Palet> Perintah: Buat Codespace Baru.
Dari daftar menurun repositories, pilih Blink. Jika repository Anda tidak muncul dalam daftar menurun, Anda bisa mengetik namanya dalam kotak teks di atas daftar.
Dari daftar menurun cabang, pilih yang sesuai.

Bilah judul di Visual Studio Code berubah untuk memperlihatkan bahwa Anda sedang mengedit di Codespace. Jika membuka tab Ekstensi di bilah navigasi kiri, Anda akan melihat ekstensi yang diinstal secara lokal dan yang terinstal dalam wadah jarak jauh.

Menyusun dan men-debug proyek

Tekan F5, atau pilih Jalankan>Mulai Debugging, untuk menyusun proyek Anda dan memulai proses debug. Build aplikasi dan muatan samping ke perangkat Anda seperti biasa. Jika Anda telah mengatur titik hentian dalam kode, aplikasi akan berjalan hingga titik hentian tercapai. Anda dapat menggunakan perintah debugging biasa untuk menelusuri kode. Lihat topik Debugging dalam dokumentasi Visual Studio Code untuk detail selengkapnya.

Setelah selesai melakukan debug, tekan Shift+F5 atau ikon Hentikan . Untuk menutup codespace, pilih Tampilkan>Command Palette>Codespaces: Stop Current Codespace.