Ejercicio: Utilizar Power Apps CLI

  • 15 minutos

En este ejercicio, instalará Power Platform CLI y creará su primer componente de Power Apps Component Framework (PCF).

Tarea 1: Instalar la CLI

  1. Instale npm (se incluye con Node.js) oNode.js(se incluye con npm). Le recomendamos que utilice LTS (soporte a largo plazo), versión 10.15.3 o posterior.

  2. InstaleVisual Studio Code.

  3. Instale la extensión de Power Platform Tools.

  4. Inicie Visual Studio Code.

  5. Seleccione Terminal y, luego, Nuevo terminal.

    Captura de pantalla donde aparece el botón Nuevo terminal

  6. Ejecute el comando pac para ver qué comandos están disponibles:

    pac

    Captura de pantalla con una lista de comandos

  7. Puede especificar pac y un comando para ver qué opciones tiene. Por ejemplo, pruebe lo siguiente:

    pac admin

  8. Vaya a Power Apps Maker Portal y seleccione el entorno de desarrollo correcto.

  9. En la esquina superior derecha de la pantalla, seleccione el icono Configuración y elija Detalles de la sesión.

    Captura de pantalla donde aparece el botón Detalles de la sesión

  10. En el cuadro de diálogo de detalles de la sesión de Power Apps, seleccione el valor de URL de la instancia y cópielo para usarlo más adelante en el ejercicio.

    Captura de pantalla donde aparecen los detalles de la sesión y dónde encontrar el valor URL de la instancia

  11. Vuelva al terminal de Visual Studio Code, escriba el siguiente comando para establecer una conexión desde la CLI e inicie sesión en su entorno de prueba cuando se le solicite.

    pac auth create --name Lab --url <Your Instance URL>

  12. Escriba el comando who, que mostrará el entorno y la información del usuario. Es recomendable asegurarse de que está en el entorno correcto.

    pac org who

Tarea 2: Crear un componente de PCF

  1. Ejecute el siguiente comando para crear una nueva carpeta llamada labPCF dentro de la carpeta de su usuario.

    md labPCF

  2. Cambie el directorio a la carpeta que ha creado.

    cd labPCF

  3. Ejecute el siguiente comando para inicializar el proyecto de componentes.

    pac pcf init --namespace lab --name FirstControl --template field

  4. Escriba el siguiente comando y luego presione Entrar. Esto elimina cualquier dependencia del repositorio npm.

    npm install

  5. Abra la carpeta en Visual Studio Code.

    code -a .

  6. Explore los archivos que se han creado.

  7. Abra index.ts en la carpeta FirstControl.

  8. Pegue las dos variables siguientes dentro de la exportación.

    private label: HTMLInputElement;

    private _container: HTMLDivElement;

    Captura de pantalla que muestra la ubicación de las dos variables en el código del componente

  9. Pegue lo siguiente dentro de la función init() para crear los controles HTML y establecer el valor de la etiqueta.

    this.label = document.createElement("input");
this.label.setAttribute("type", "label");
this.label.value = "My First PCF";
this._container = document.createElement("div");
this._container.appendChild(this.label);
container.appendChild(this._container);

  10. Guarde el archivo.

  11. Vaya al terminal e introduzca el siguiente comando y luego presione Entrar. Esto iniciará la herramienta de ejecución de pruebas con el código más reciente.

    npm start

  12. La herramienta de ejecución de pruebas es útil al principio del proyecto para visualizar su control sin implementarlo en un entorno. Puede ajustar valores de propiedad para cambiar el tamaño del área de control. Una vez que haya terminado de explorar la herramienta de ejecución de pruebas, vuelva a la ventana del terminal y presione Ctrl-C para finalizar la ejecución de la herramienta de ejecución de pruebas.

  13. Si se le solicita, escriba Y; luego, pulse [INTRO].

  14. Ejecute el siguiente comando para enumerar las soluciones en su entorno.

    pac solution list

  15. Estas son las soluciones actuales que hay en su entorno. El siguiente paso agregará una para el componente.

  16. Escriba el siguiente comando push para llevar el control al entorno.

    pac pcf push --publisher-prefix lab

  17. Ejecute de nuevo el comando pac solution list. Debería ver una solución PowerAppsTools_lab en la lista. Así es como se instala su componente en el entorno de desarrollo para pruebas unitarias antes de empaquetarlo para pruebas de usuario o producción o incluirlo como parte de otra solución.

Tarea 3: Usar el componente en una aplicación (opcional)

  1. Vaya al Centro de administración de Microsoft Power Platform.

  2. Seleccione Entornos en el menú de la izquierda.

  3. Seleccione el entorno que está utilizando para el laboratorio.

  4. Seleccione Configuración.

  5. Expanda el área Producto y seleccione Características.

  6. En el lado derecho, habilite la característica Permitir la publicación de aplicaciones de lienzo con componentes de código.

    Captura de pantalla que muestra dónde habilitar los componentes del lienzo

  7. Vaya a Power Apps Maker Portal y asegúrese de que se encuentra en el entorno correcto.

  8. Seleccione Soluciones.

  9. Seleccione la opción para abrir la solución PowerAppsTools_lab.

  10. Debería ver su componente en la lista.

  11. Seleccione + Nuevo | Aplicación | Aplicación de lienzo.

  12. Seleccione Teléfono para Formato, introduzca Primer PCF para el nombre de la aplicación y seleccione Crear.

  13. En el panel izquierdo, seleccione Agregar (+) y después Obtener más componentes.

  14. Seleccione la pestaña Código.

  15. Seleccione su componente.

    Captura de pantalla que muestra la importación del componente que acaba de crear

  16. Seleccione Importar.

  17. En la barra de herramientas izquierda, seleccione + y amplíe Componentes de código.

  18. Seleccione FirstControl. Ahora debería ver el control con el texto Mi primer PCF en el lienzo.

    Captura de pantalla que muestra cómo arrastrar su componente al lienzo

  19. Seleccione Guardar para guardar la aplicación.

Ahora ha construido su primer componente PCF y lo ha usado en una aplicación de lienzo.