Pamoka: vieno puslapio programos kūrimas ir diegimas naudojant "GitHub Spark" ir "Codespaces"

Naujas vieno puslapio programos palaikymas suteikia kūrėjams daugiau lankstumo: galite kurti, tinkinti ir valdyti "Power Pages" svetaines tik šaltinio kode. Neseniai išleidus "GitHub Spark", kūrėjai dabar gali kurti svetainę, redaguoti ją tiesiogiai "GitHub" kodų erdvėje ir įdiegti "Power Pages" aplinkoje neišeidami iš naršyklės. Ši mokymo programa supažindina jus su visa darbo eiga.

"GitHub Spark" yra nauja dirbtinio intelekto valdoma natūralios kalbos platforma iš "GitHub Copilot". Jis skirtas padėti kūrėjams greitai paleisti šiuolaikines žiniatinklio programas. Kartu su "GitHub" kodų sritimis kodo redagavimui, "Spark" teikia:

  • Paruošta naudoti šablonų saugykla jūsų projektui.
  • Iš anksto sukonfigūruoti kūrėjų konteineriai nuosekliai aplinkai.
  • Dirbtinio intelekto valdoma natūralios kalbos platforma iš "GitHub Copilot".

"Power Pages" kūrėjams tai reiškia, kad galite pradėti nuo paruošto svetainės šablono, tinkinti jį ir diegti be tradicinės vietinės sąrankos.

Šio straipsnio pabaigoje žinosite, kaip:

  1. Sukurkite "Power Pages" svetainės prototipą naudodami "GitHub Spark".
  2. Sukonfigūruokite savo kodų sritį .NET ir PAC CLI palaikymui.
  3. Sukurkite ir nusiųskite vieno puslapio programą į "Power Pages" aplinką.
  4. Iš naujo suaktyvinkite ir išbandykite svetainę tiesiai iš "Power Pages".

Būtinosios sąlygos

Prieš pradėdami įsitikinkite, kad turite:

  • "Power Pages" aplinka su administratoriaus teisėmis.
  • Įdiegta ir autentifikuota "Power Platform" CLI (PAC CLI) 1.44.x arba naujesnė versija.
  • "Power Pages" svetainė, kurioje yra 9.7.4.x arba naujesnė versija.
  • "GitHub Spark" licencija su kodų sritimis jūsų pasirinktiniam frontend projektui.

Pastaba.

  • Norėdami naudoti "GitHub Spark", įsitikinkite, kad turite atitinkamas "GitHub" licencijas.
  • "GitHub Spark" arba "Codespaces" palaikymas pasiekiamas per "Spark" palaikymo komandą.

1 veiksmas: pradėkite nuo "GitHub Spark" šablono

  1. Eikite į "GitHub Spark" įrankį ir sukurkite naują svetainę naudodami natūralią kalbą.
  2. Sukūrę spustelėkite Atidaryti kodų erdvėse.

Tai suteikia debesies pagrindu veikiančią kūrimo aplinką, kurioje galite dirbti su "Power Pages" projektu be jokios vietinės sąrankos.

2 veiksmas: atnaujinkite kūrimo konteinerio konfigūraciją

Saugykloje raskite failą:

.devcontainer/devcontainer.json

Modifikuokite funkcijų skyrių, kad įtrauktumėte .NET 9.0 palaikymą. Jūsų konfigūracija turėtų atrodyti taip:

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

Atkurkite konteinerį

Išsaugoję pakeitimus:

  1. Paspauskite Ctrl + Shift + P (arba Command + Shift + P "Mac"), kad atidarytumėte komandų paletę.
  2. Įveskite Codespaces: iš naujo sukurkite konteinerį ir pasirinkite jį.
  3. Konteineris bus paleistas iš naujo. Šio proceso metu bus įdiegta .NET 9 ir visos kitos priklausomybės.
  4. Prieš tęsdami palaukite kelias sekundes, kol diegimas bus baigtas.

Šis veiksmas užtikrina, kad jūsų Codespace aplinka būtų atnaujinta naudojant naują konfigūraciją. Tai užtikrina, kad jūsų "Codespace" apima reikiamą "Power Pages" kūrimo įrankių vykdymo laiką.

3 veiksmas: įdiekite "Power Platform" įrankius

Iš savo Codespaces terminalo:

  1. Įdiekite "Power Platform" įrankius (galima naudoti kaip VS kodo plėtinį).
  2. Šis diegimas taip pat apima PAC CLI – komandinės eilutės sąsają, leidžiančią autentifikuoti, atsisiųsti ir įkelti svetaines.

4 veiksmas: prisijunkite prie "Power Platform" aplinkos

Naudokite PAC CLI, kad autentifikuotumėte savo tikslinę aplinką:

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

Pakeiskite URL tikruoju "Power Platform" aplinkos URL.

5 veiksmas: sukurkite svetainę

Prieš diegdami sukurkite svetainės kodą.

npm run build

Ši komanda kompiliuoja jūsų svetainę ir išveda artefaktus į dist aplanką.

6 veiksmas: įkelkite svetainę

Įdiekite svetainę "Power Pages" aplinkoje naudodami:

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

Parametrus

Parametras Pseudonimas Apibūdinimas
--rootPath -rp Vietinis aplankas, kuriame yra jūsų svetainės šaltinio failai
--compiledPath -cp Kelias į sukompiliuotą turtą, pvz., "React" build
--siteName -sn Rodomas "Power Pages" svetainės pavadinimas

7 veiksmas: iš naujo suaktyvinkite ir išbandykite

  1. Nusiuntus jūsų svetainė rodoma "Power Pages" dalyje Neaktyvios svetainės.
  2. Eikite į Neaktyvios svetainės, raskite svetainę ir pasirinkite Suaktyvinti iš naujo.
  3. Kai svetainė tampa aktyvi, atidarykite jos URL, kad patvirtintumėte diegimą.

Tolesni žingsniai: apsaugokite ir išplėskite savo svetainę

Dabar, kai svetainė įdiegta: