Tutorial: Cipta dan gunakan aplikasi satu halaman menggunakan GitHub Spark dan Codespaces

Sokongan aplikasi satu halaman baharu memberikan pembangun fleksibiliti yang lebih besar: anda boleh mencipta, menyesuaikan dan mengurus tapak Power Pages sepenuhnya dalam kod sumber. Dengan keluaran GitHub Spark baru-baru ini, pembangun kini boleh mengarang tapak, mengeditnya terus dalam ruang kod GitHub dan menggunakannya ke persekitaran Power Pages semuanya tanpa meninggalkan penyemak imbas mereka. Tutorial ini membimbing anda melalui aliran kerja yang lengkap.

GitHub Spark ialah platform bahasa semula jadi berkuasa AI baharu daripada GitHub Copilot. Ia direka untuk membantu pembangun bootstrap aplikasi web moden dengan cepat. Apabila digabungkan dengan GitHub Codespaces untuk penyuntingan kod, Spark menyediakan:

  • Repositori templat sedia untuk digunakan untuk projek anda.
  • Bekas pembangun yang telah dikonfigurasikan untuk persekitaran yang konsisten.
  • Platform bahasa semula jadi berkuasa AI daripada GitHub Copilot.

Untuk pembangun Power Pages, ini bermakna anda boleh bermula dengan templat tapak siap sedia, menyesuaikannya dan menggunakan tanpa persediaan tempatan tradisional.

Menjelang akhir artikel ini, anda akan tahu cara:

  1. Cipta prototaip tapak Power Pages menggunakan GitHub Spark.
  2. Konfigurasikan Codespace anda untuk sokongan .NET dan PAC CLI.
  3. Bina dan muat naik aplikasi satu halaman anda ke persekitaran Power Pages.
  4. Aktifkan semula dan uji tapak anda terus daripada Power Pages.

Prasyarat

Sebelum anda memulakan, pastikan anda mempunyai:

  • Persekitaran Power Pages dengan keistimewaan pentadbir.
  • Power Platform CLI (PAC CLI) versi 1.44.x atau lebih baru dipasang dan disahkan.
  • Laman Power Pages web pada versi 9.7.4.x atau lebih baru.
  • Lesen GitHub Spark dengan Codespaces untuk projek bahagian hadapan tersuai anda.

Nota

  • Untuk menggunakan GitHub Spark, pastikan anda mempunyai lesen GitHub yang sesuai.
  • Sokongan untuk GitHub Spark atau Codespaces tersedia melalui pasukan sokongan Spark.

Langkah 1: Mulakan dengan templat GitHub Spark

  1. Pergi ke alat GitHub Spark dan jana tapak baharu menggunakan bahasa semula jadi.
  2. Setelah dibuat, klik Buka dalam Codespaces.

Ini memberi anda persekitaran pembangunan berasaskan awan di mana anda boleh mengerjakan projek Power Pages anda tanpa sebarang persediaan tempatan.

Langkah 2: Kemas kini konfigurasi bekas pembangunan

Di dalam repositori, cari fail:

.devcontainer/devcontainer.json

Ubah suai bahagian ciri untuk menambah sokongan untuk .NET 9.0. Konfigurasi anda sepatutnya kelihatan seperti ini:

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

Bina semula Kontena

Selepas menyimpan perubahan anda:

  1. Tekan Ctrl + Shift + P (atau Command + Shift + P pada Mac) untuk membuka palet arahan.
  2. Taip Ruang Kod: Bina semula Bekas dan pilihnya.
  3. Bekas akan dimulakan semula. Semasa proses ini, .NET 9 dan semua kebergantungan lain akan dipasang.
  4. Tunggu beberapa saat sehingga pemasangan selesai sebelum meneruskan.

Langkah ini memastikan persekitaran Codespace anda dimuat semula dengan konfigurasi baharu. Ini memastikan Codespace anda termasuk masa jalan yang diperlukan untuk perkakas binaan Power Pages.

Langkah 3: Pasang alatan Power Platform

Daripada terminal Codespaces anda:

  1. Pasang alatan Power Platform (tersedia sebagai sambungan VS Code).
  2. Pemasangan ini juga membawa masuk PAC CLI, antara muka baris arahan yang membolehkan anda mengesahkan, memuat turun dan memuat naik tapak.

Langkah 4: Sambung ke persekitaran Power Platform anda

Gunakan PAC CLI untuk mengesahkan terhadap persekitaran sasaran anda:

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

Gantikan URL dengan URL persekitaran Power Platform sebenar anda.

Langkah 5: Bina laman web anda

Sebelum menggunakan, bina kod tapak anda:

npm run build

Perintah ini menyusun tapak anda dan mengeluarkan artifak ke dalam dist folder.

Langkah 6: Muat naik tapak anda

Sebarkan laman anda ke persekitaran Power Pages menggunakan:

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

Parameter

Parameter_ Alias Keterangan
--rootPath -rp Folder setempat yang mempunyai fail sumber tapak anda
--compiledPath -cp Laluan ke aset yang disusun, seperti React build
--siteName -sn Nama paparan untuk tapak anda Power Pages

Langkah 7: Aktifkan semula dan uji

  1. Selepas muat naik, laman anda muncul di bawah Laman tidak aktif dalam Halaman Kuasa.
  2. Pergi ke Tapak tidak aktif, cari tapak anda dan pilih Aktifkan semula.
  3. Apabila tapak menjadi aktif, buka URLnya untuk mengesahkan penggunaan.

Langkah Seterusnya: Lindungi dan Lanjutkan Laman Web Anda

Sekarang tapak anda digunakan:

  • Last updated on