Tutorial: Crear i implementar una aplicació d'una sola pàgina mitjançant GitHub Spark i Codespaces

El nou suport d'aplicacions d'una sola pàgina ofereix als desenvolupadors una major flexibilitat: podeu crear, personalitzar i administrar llocs del Power Pages completament en codi font. Amb el llançament recent de GitHub Spark, els desenvolupadors ara poden crear un lloc, editar-lo directament en un espai de codi de GitHub i implementar-lo en un entorn Power Pages, tot sense sortir del navegador. Aquest tutorial us guia pel flux de treball complet.

GitHub Spark és una nova plataforma de llenguatge natural impulsada per IA de GitHub Copilot. Està dissenyat per ajudar els desenvolupadors a arrencar aplicacions web modernes ràpidament. Quan es combina amb GitHub Codespaces per a l'edició de codi, Spark proporciona:

  • Un repositori de plantilles llest per utilitzar per al vostre projecte.
  • Contenidors de desenvolupament preconfigurats per a entorns coherents.
  • Plataforma de llenguatge natural impulsada per IA de GitHub Copilot.

Per als desenvolupadors del Power Pages, això vol dir que podeu començar amb una plantilla de lloc ja feta, personalitzar-la i implementar-la sense la configuració local tradicional.

Al final d'aquest article, sabreu com:

  1. Creeu un prototip de lloc del Power Pages mitjançant el GitHub Spark.
  2. Configureu el vostre espai de codi per a la compatibilitat de la CLI de .NET i PAC.
  3. Creeu i carregueu l'aplicació d'una sola pàgina a un entorn del Power Pages.
  4. Reactiveu i proveu el vostre lloc directament des del Power Pages.

Requisits previs

Abans de començar, assegureu-vos de tenir:

  • Un entorn del Power Pages amb privilegis d'administrador.
  • Power Platform CLI (PAC CLI) versió 1.44.x o posterior instal·lada i autenticada.
  • Un lloc del Power Pages a la versió 9.7.4.x o posterior.
  • Llicència de GitHub Spark amb Codespaces per al vostre projecte de interfície personalitzat.

Nota

  • Per utilitzar el GitHub Spark, assegureu-vos que teniu les llicències de GitHub adequades.
  • El suport per a GitHub, Spark o Codespaces està disponible a través de l'equip d'assistència de Spark.

Pas 1: comenceu amb la plantilla GitHub Spark

  1. Aneu a l'eina GitHub Spark i genereu un lloc nou amb llenguatge natural.
  2. Un cop creat, feu clic a Obre a Codespaces.

Això us ofereix un entorn de desenvolupament basat en núvol on podeu treballar en el vostre projecte del Power Pages sense cap configuració local.

Pas 2: Actualitzeu la configuració del contenidor de desenvolupament

Dins del repositori, localitzeu el fitxer:

.devcontainer/devcontainer.json

Modifiqueu la secció de característiques per afegir suport per al .NET 9.0. La vostra configuració hauria de tenir aquest aspecte:

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

Reconstruir el contenidor

Després de desar els canvis:

  1. Premeu Ctrl + Shift + P (o Command + Shift + P al Mac) per obrir la paleta d'ordres.
  2. Escriviu Codespaces: Rebuild Container i seleccioneu-lo.
  3. El contenidor es reiniciarà. Durant aquest procés, s'instal·laran el .NET 9 i totes les altres dependències.
  4. Espereu uns segons perquè es completi la instal·lació abans de continuar.

Aquest pas garanteix que el vostre entorn de Codespace s'actualitzi amb la nova configuració. Això garanteix que el vostre espai de codi inclogui el temps d'execució necessari per a les eines de compilació del Power Pages.

Pas 3: instal·leu les eines del Power Platform

Des del terminal Codespaces:

  1. Instal·leu les eines del Power Platform (disponibles com a extensió del VS Code).
  2. Aquesta instal·lació també inclou la PAC CLI, una interfície de línia d'ordres que us permet autenticar, descarregar i carregar llocs.

Pas 4: connecteu-vos al vostre entorn del Power Platform

Utilitzeu l'CLI de PAC per autenticar-vos a l'entorn de destinació:

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

Substituïu l'adreça URL per l'adreça URL de l'entorn real del Power Platform.

Pas 5: creeu el lloc web

Abans de la implementació, creeu el codi del lloc:

npm run build

Aquesta ordre compila el vostre lloc i genera els artefactes en una dist carpeta.

Pas 6: pengeu el lloc web

Implementeu el vostre lloc a l'entorn del Power Pages usant:

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

Paràmetres

Paràmetre Àlies Descripció
--rootPath -rp Carpeta local que conté els fitxers d'origen del lloc web
--compiledPath -cp Camí cap a recursos compilats, com ara React build
--siteName -sn Nom de visualització del lloc del Power Pages

Pas 7: Reactiveu i proveu

  1. Després de la càrrega, el lloc web apareix a Llocs web inactius al Power Pages.
  2. Aneu a Llocs inactius, cerqueu el lloc i seleccioneu Reactiva.
  3. Quan el lloc estigui actiu, obriu el seu URL per confirmar la implementació.

Passos següents: protegir i ampliar el vostre lloc

Ara que el vostre lloc està desplegat:

  • Last updated on