Tutorial: Membuat dan menyebarkan aplikasi satu halaman menggunakan GitHub Spark dan Codespaces

Dukungan aplikasi satu halaman baru memberi pengembang fleksibilitas yang lebih besar: Anda dapat membuat, menyesuaikan, dan mengelola situs Power Pages sepenuhnya dalam kode sumber. Dengan rilis GitHub Spark baru-baru ini, pengembang sekarang dapat menulis situs, mengeditnya langsung di GitHub Codespace, dan menyebarkannya ke lingkungan Power Pages semuanya tanpa meninggalkan browser mereka. Tutorial ini memandu Anda melalui alur kerja lengkap.

GitHub Spark adalah platform bahasa alami baru yang didukung AI dari GitHub Copilot. Ini dirancang untuk membantu pengembang menginisialisasi aplikasi web modern dengan cepat. Saat dikombinasikan dengan GitHub Codespaces untuk pengeditan kode, Spark menyediakan:

  • Repositori templat siap pakai untuk proyek Anda.
  • Kontainer dev yang telah dikonfigurasi sebelumnya untuk lingkungan yang konsisten.
  • Platform berbahasa alami yang didukung AI dari GitHub Copilot.

Untuk pengembang Power Pages, ini berarti Anda dapat memulai dengan templat situs siap pakai, menyesuaikannya, dan menyebarkannya tanpa penyiapan lokal tradisional.

Pada akhir artikel ini, Anda akan tahu cara:

  1. Buat situs Power Pages prototipe menggunakan GitHub Spark.
  2. Konfigurasikan Codespace Anda untuk dukungan .NET dan PAC CLI.
  3. Buat dan unggah aplikasi satu halaman Anda ke lingkungan Power Pages.
  4. Aktifkan kembali dan uji situs Anda langsung dari Power Pages.

Prasyarat

Sebelum mulai, pastikan bahwa Anda memiliki:

  • Lingkungan Power Pages dengan hak istimewa admin.
  • Power Platform CLI (PAC CLI) versi 1.44.x atau yang lebih baru diinstal dan diautentikasi.
  • Situs Power Pages pada versi 9.7.4.x atau yang lebih baru.
  • Lisensi GitHub Spark dengan Codespaces untuk proyek frontend kustom Anda.

Nota

  • Untuk menggunakan GitHub Spark, pastikan Anda memiliki lisensi GitHub yang sesuai.
  • Dukungan untuk GitHub Spark atau Codespaces tersedia melalui tim dukungan Spark.

Langkah 1: Mulai dengan templat GitHub Spark

  1. Buka alat GitHub Spark dan buat situs baru menggunakan bahasa alami.
  2. Setelah dibuat, klik Buka di Codespace.

Ini memberi Anda lingkungan pengembangan berbasis cloud tempat Anda dapat mengerjakan proyek Power Pages tanpa penyiapan lokal apa pun.

Langkah 2: Memperbarui konfigurasi kontainer pengembangan

Di dalam repositori, temukan file:

.devcontainer/devcontainer.json

Ubah bagian fitur untuk menambahkan dukungan untuk .NET 9.0. Konfigurasi Anda akan terlihat seperti ini:

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

Membangun kembali Kontainer

Setelah menyimpan perubahan Anda:

  1. Tekan Ctrl + Shift + P (atau Command + Shift + P di Mac) untuk membuka palet perintah.
  2. Ketik Codespace: Bangun Ulang Kontainer dan pilih.
  3. Kontainer akan di-restart. Selama proses ini, .NET 9 dan semua dependensi lainnya akan diinstal.
  4. Tunggu beberapa detik hingga penginstalan selesai sebelum melanjutkan.

Langkah ini memastikan lingkungan Codespace Anda di-refresh dengan konfigurasi baru. Ini memastikan Codespace Anda menyertakan runtime yang diperlukan untuk alat pengembangan Power Pages.

Langkah 3: Menginstal alat Power Platform

Dari terminal Codespaces Anda:

  1. Instal alat Power Platform (tersedia sebagai ekstensi Visual Studio Code).
  2. Penginstalan ini juga membawa PAC CLI, antarmuka baris perintah yang memungkinkan Anda mengautentikasi, mengunduh, dan mengunggah situs.

Langkah 4: Sambungkan ke lingkungan Power Platform Anda

Gunakan PAC CLI untuk mengautentikasi terhadap lingkungan target Anda:

pac auth create -u https://org12x34x45.crm.dynamics.com

Ganti URL dengan URL lingkungan Power Platform Anda yang sebenarnya.

Langkah 5: Bangun situs Anda

Sebelum menyebarkan, buat kode situs Anda:

npm run build

Perintah ini mengkompilasi situs Anda dan menghasilkan artefak ke dalam dist folder.

Langkah 6: Unggah situs Anda

Sebarkan situs Anda ke lingkungan Power Pages menggunakan:

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

Parameter-parameternya

Pengaturan Alias Description
--rootPath -rp Folder lokal yang memiliki file sumber situs Anda
--compiledPath -cp Jalur ke aset yang dikompilasi, seperti React build
--siteName -sn Nama tampilan untuk situs Power Pages Anda

Langkah 7: Mengaktifkan kembali dan menguji

  1. Setelah unggahan, situs Anda muncul di bawah Situs tidak aktif di Halaman Daya.
  2. Buka Situs tidak aktif, temukan situs Anda, dan pilih Aktifkan Kembali.
  3. Ketika situs menjadi aktif, buka URL-nya untuk mengonfirmasi penyebaran.

Langkah Berikutnya: Amankan dan Perluas Situs Anda

Sekarang setelah situs Anda dipublikasikan:

  • Last updated on