Vadnica: Ustvarjanje in uvajanje enostranske aplikacije z uporabo storitve GitHub Spark in Codespaces

Nova podpora za aplikacije na eni strani razvijalcem omogoča večjo prilagodljivost: spletna mesta Power Pages lahko v celoti ustvarite, prilagodite in upravljate v izvorni kodi. Z nedavno izdajo storitve GitHub Spark lahko razvijalci zdaj ustvarijo spletno mesto, ga urejajo neposredno v kodnem prostoru GitHub in ga uvedejo v okolje Power Pages, ne da bi zapustili brskalnik. Ta vadnica vas vodi skozi celoten potek dela.

GitHub Spark je nova platforma naravnega jezika, ki jo poganja umetna inteligenca podjetja GitHub Copilot. Zasnovan je tako, da razvijalcem pomaga hitro zagnati sodobne spletne aplikacije. V kombinaciji z GitHub Codespaces za urejanje kode Spark zagotavlja:

  • Skladišče predlog za vaš projekt, pripravljeno za uporabo.
  • Vnaprej konfigurirani vsebniki za razvijalce za dosledna okolja.
  • Platforma naravnega jezika, ki jo poganja umetna inteligenca iz GitHub Copilot.

Za razvijalce Power Pages to pomeni, da lahko začnete s pripravljeno predlogo mesta, jo prilagodite in uvedete brez tradicionalne lokalne nastavitve.

Do konca tega članka boste vedeli, kako:

  1. Ustvarite prototip spletnega mesta Power Pages s storitvijo GitHub Spark.
  2. Konfigurirajte kodni prostor za podporo za .NET in PAC CLI.
  3. Ustvarite in prenesite aplikacijo z eno stranjo v okolje Power Pages.
  4. Znova aktivirajte in preskusite spletno mesto neposredno iz storitve Power Pages.

Pogoji

Preden začnete, se prepričajte, da imate:

  • Okolje Power Pages s skrbniškimi pravicami.
  • Power Platform CLI (PAC CLI) različice 1.44.x ali novejše nameščene in preverjene.
  • Spletno mesto Power Pages v različici 9.7.4.x ali novejši.
  • Licenca za GitHub Spark s kodnimi prostori za vaš projekt po meri.

opomba,

  • Če želite uporabljati GitHub Spark, se prepričajte, da imate ustrezne licence za GitHub.
  • Podpora za GitHub Spark ali Codespaces je na voljo prek skupine za podporo Sparka.

1. korak: Začnite s predlogo GitHub Spark

  1. Pojdite v orodje GitHub Spark in ustvarite novo spletno mesto z naravnim jezikom.
  2. Ko je ustvarjen, kliknite Odpri v kodnih prostorih.

Tako dobite razvojno okolje v oblaku, kjer lahko delate na projektu Power Pages brez lokalne nastavitve.

2. korak: posodobite konfiguracijo razvojnega vsebnika

V skladišču poiščite datoteko:

.devcontainer/devcontainer.json

Spremenite razdelek funkcij, da dodate podporo za .NET 9.0. Vaša konfiguracija mora izgledati takole:

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

Obnovite vsebnik

Ko shranite spremembe:

  1. Pritisnite Ctrl + Shift + P (ali Command + Shift + P v računalniku Mac), da odprete ukazno paleto.
  2. Vnesite Codespaces: Rebuild Container in ga izberite.
  3. Posoda se bo znova znovala. Med tem postopkom bodo nameščeni .NET 9 in vse druge odvisnosti.
  4. Pred nadaljevanjem počakajte nekaj sekund, da se namestitev konča.

Ta korak zagotavlja, da se vaše okolje Codespace osveži z novo konfiguracijo. To zagotavlja, da vaš Codespace vključuje potreben čas izvajanja za orodje za gradnjo Power Pages.

3. korak: Namestite orodja Power Platform

Iz terminala Codespaces:

  1. Namestite orodja Power Platform (na voljo kot razširitev VS Code).
  2. Ta namestitev vključuje tudi PAC CLI, vmesnik ukazne vrstice, ki omogoča preverjanje pristnosti, prenos in nalaganje spletnih mest.

4. korak: Povežite se z okoljem Power Platform

Uporabite PAC CLI za preverjanje pristnosti v ciljnem okolju:

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

Zamenjajte URL z dejanskim URL-jem okolja Power Platform.

5. korak: Ustvarite spletno mesto

Pred uvedbo ustvarite kodo spletnega mesta:

npm run build

Ta ukaz prevede vaše spletno mesto in izpiše artefakte v dist mapo.

6. korak: naložite spletno mesto

Uvedite spletno mesto v okolje Power Pages z uporabo naslednjih elementov:

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

Parametrov

Parameter Vzdevek Opis
--rootPath -rp Lokalna mapa z izvornimi datotekami mesta
--compiledPath -cp Pot do zbranih sredstev, kot je React build
--siteName -sn Prikazno ime za spletno mesto Power Pages

7. korak: Znova aktivirajte in preskusite

  1. Po prenosu se vaše spletno mesto prikaže v razdelku Neaktivna mesta v storitvi Power Pages.
  2. Odprite možnost Neaktivna spletna mesta, poiščite svoje mesto in izberite Znova aktiviraj.
  3. Ko spletno mesto postane aktivno, odprite njegov URL, da potrdite uvajanje.

Naslednji koraki: Zaščita in razširitev spletnega mesta

Zdaj, ko je vaše spletno mesto uvedeno: