Tutorial: Crearea și implementarea unei aplicații cu o singură pagină utilizând GitHub Spark și Codespaces

Noul suport pentru aplicații cu o singură pagină oferă dezvoltatorilor o flexibilitate mai mare: puteți crea, personaliza și gestiona site-uri Power Pages în întregime în codul sursă. Odată cu lansarea recentă a GitHub Spark, dezvoltatorii pot crea acum un site, îl pot edita direct într-un spațiu de cod GitHub și îl pot implementa într-un mediu Power Pages, totul fără a părăsi browserul. Acest tutorial vă ghidează prin fluxul de lucru complet.

GitHub Spark este o nouă platformă de limbaj natural bazată pe inteligență artificială de la GitHub Copilot. Este conceput pentru a ajuta dezvoltatorii să pornească rapid aplicațiile web moderne. Când este combinat cu GitHub Codespaces pentru editarea codului, Spark oferă:

  • Un depozit de șabloane gata de utilizare pentru proiectul dvs.
  • Containere de dezvoltare preconfigurate pentru medii consistente.
  • Platformă de limbaj natural bazată pe inteligență artificială de la GitHub Copilot.

Pentru dezvoltatorii Power Pages, aceasta înseamnă că puteți începe cu un șablon de site gata făcut, îl puteți personaliza și implementa fără configurarea locală tradițională.

Până la sfârșitul acestui articol, veți ști cum:

  1. Creați un prototip de site Power Pages utilizând GitHub Spark.
  2. Configurați spațiul de cod pentru suportul CLI .NET și PAC.
  3. Construiți și încărcați aplicația cu o singură pagină într-un mediu Power Pages.
  4. Reactivați și testați-vă site-ul direct din Power Pages.

Cerințe preliminare

Înainte de a începe, asigurați-vă că aveți:

  • Un mediu Power Pages cu privilegii de administrator.
  • Power Platform CLI (PAC CLI) versiunea 1.44.x sau o versiune ulterioară instalată și autentificată.
  • Un site Power Pages pe versiunea 9.7.4.x sau o versiune ulterioară.
  • Licență GitHub Spark cu Codespaces pentru proiectul dvs.

Notă

  • Pentru a utiliza GitHub Spark, asigurați-vă că aveți licențele GitHub corespunzătoare.
  • Suportul pentru GitHub Spark sau Codespaces este disponibil prin intermediul echipei de asistență Spark.

Pasul 1: Începeți cu șablonul GitHub Spark

  1. Accesați instrumentul GitHub Spark și generați un site nou folosind limbajul natural.
  2. Odată creat, faceți clic pe Deschidere în Codespaces.

Acest lucru vă oferă un mediu de dezvoltare bazat pe cloud în care puteți lucra la proiectul Power Pages fără nicio configurare locală.

Pasul 2: Actualizați configurația containerului de dezvoltare

În interiorul depozitului, localizați fișierul:

.devcontainer/devcontainer.json

Modificați secțiunea de caracteristici pentru a adăuga suport pentru .NET 9.0. Configurația ta ar trebui să arate astfel:

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

Reconstruiți containerul

După salvarea modificărilor:

  1. Apăsați Ctrl + Shift + P (sau Command + Shift + P pe Mac) pentru a deschide paleta de comenzi.
  2. Tastați Codespaces: Rebuild Container și selectați-l.
  3. Containerul va reporni. În timpul acestui proces, vor fi instalate .NET 9 și toate celelalte dependențe.
  4. Așteptați câteva secunde pentru finalizarea instalării înainte de a continua.

Acest pas asigură că mediul Codespace este reîmprospătat cu noua configurație. Acest lucru asigură că Codespace include timpul de execuție necesar pentru instrumentele de compilare Power Pages.

Pasul 3: Instalați instrumentele Power Platform

Din terminalul Codespaces:

  1. Instalați instrumente Power Platform (disponibile ca extensie VS Code).
  2. Această instalare aduce și PAC CLI, o interfață de linie de comandă care vă permite să autentificați, să descărcați și să încărcați site-uri.

Pasul 4: Conectați-vă la mediul Power Platform

Utilizați CLI PAC pentru a vă autentifica în mediul țintă:

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

Înlocuiți adresa URL cu adresa URL reală a mediului Power Platform.

Pasul 5: Construiți-vă site-ul

Înainte de implementare, construiți codul site-ului:

npm run build

Această comandă compilează site-ul și scoate artefactele într-un dist folder.

Pasul 6: Încărcați site-ul

Implementați site-ul în mediul Power Pages utilizând:

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

Parametrii

Parametru Pseudonim Descriere
--rootPath -rp Folder local care conține fișierele sursă ale site-ului dvs.
--compiledPath -cp Calea către active compilate, cum ar fi React build
--siteName -sn Nume afișat pentru site-ul Power Pages

Pasul 7: Reactivați și testați

  1. După încărcare, site-ul apare sub Site-uri inactive în Power Pages.
  2. Accesați Site-uri inactive, găsiți site-ul și selectați Reactivare.
  3. Când site-ul devine activ, deschideți adresa URL pentru a confirma implementarea.

Pașii următori: Securizați și extindeți site-ul

Acum că site-ul este implementat:

  • Last updated on