Ejercicio: Usar código fuente en Visual Studio Code

Completado

En este escenario se le pidió que creara una aplicación de administración de cuentas para su organización. Decidió crear una aplicación de lienzo y hacer que el código fuente de la aplicación estuviese disponible en formato de texto para cumplir con los requisitos legales de la organización. Las directivas de desarrollo de su empresa requieren que todos los activos creados por los desarrolladores se almacenen en el repositorio de control de código fuente. El código fuente debe confirmarse en el repositorio en formato de texto, siempre que sea posible, para simplificar el proceso de colaboración en un entorno de equipo de proyecto y hacer que el código fuente esté disponible para escaneo automático y diferenciación.

Requisitos

Para completar este ejercicio, necesita tener un entorno de Microsoft Dataverse con una base de datos instalada.

Objetivos

El objetivo de este ejercicio es que aprenda a:

  • Editar una aplicación de lienzo en Visual Studio Code.

  • Empaquetar una aplicación de lienzo en Visual Studio Code.

  • Cargar una aplicación de lienzo en Power Apps Studio.

  • Crear e inicializar repositorios Git locales y remotos.

  • Sincronizar los repositorios locales y remotos, y trabajar con los cambios.

Requisito previo

Asegúrese de haber completado la práctica de laboratorio anterior de este módulo antes de comenzar este ejercicio.

Ejercicio 1: Editar la aplicación

En este ejercicio, editará la aplicación del administrador de cuentas en Visual Studio Code.

Tarea: Editar la aplicación

En esta tarea, editará la aplicación en Visual Studio Code.

  1. Abra Visual Studio Code.

  2. Si la carpeta Learn lab account manager no se abre automáticamente, seleccione Archivo > Abrir carpeta. Localice y abra la carpeta Learn lab account manager.

  3. Expanda la carpeta src y, después, la carpeta Src y luego seleccione el archivo BrowseScreen1.fx.yaml.

    Captura de pantalla del archivo BrowseScreen

  4. Localice LblAppName1.

  5. Cambie el valor de Texto de LblAppName1 a Empresas y el Tamaño a 28.

    Captura de pantalla del valor de texto y tamaño

  6. Localice IconNewItem1.

  7. Cambie la transición de fórmula Navigate de None a CoverRight y luego agregue la siguiente expresión Trace():

    ;Trace("New Item Selected")

    Captura de pantalla de la transición de fórmula Navigate y la expresión Trace

  8. Seleccione el archivo DetailScreen1.fx.yaml.

  9. Localice LblAppName2.

  10. Cambie el valor de Texto de LblAppName2 a Empresas y el Tamaño a 28.

  11. Seleccione el archivo EditScreen1.fx.yaml.

  12. Localice LblAppName3.

  13. Cambie el valor de Texto de LblAppName3 a Empresas y el Tamaño a 28.

  14. Seleccione Archivo > Guardar todo.

Ejercicio 2: Empaquetar y cargar

En este ejercicio, empaquetará la aplicación y la cargará en su entorno.

Tarea: empaquetar y cargar

En esta tarea, empaquetará y cargará la aplicación.

  1. Abra Terminal y luego ejecute el siguiente comando:

    pac canvas pack --msapp "Account manager.msapp" --sources src

    Captura de pantalla del comando para empaquetar la aplicación

  2. Es posible que reciba un mensaje de advertencia que indique: Advertencia PA2001: Las sumas de comprobación no coinciden. Puede ignorar este mensaje con absoluta tranquilidad.

  3. Cambie al explorador, vaya al portal del creador de Power Apps y luego asegúrese de que se encuentra en el entorno correcto.

  4. Seleccione Aplicaciones.

  5. Seleccione la aplicación Administrador de cuentas y, a continuación, seleccione Editar.

  6. Seleccione Archivo > Abrir > Examinar.

    Captura de pantalla del botón Examinar archivos

  7. Seleccione el archivo Account manager.msapp que se encuentra en la carpeta Learn lab account manager y luego seleccione Abrir.

    Captura de pantalla de la aplicación de lienzo para importar

  8. Seleccione Vista previa de la aplicación.

    Captura de pantalla del botón de vista preliminar de la aplicación

  9. El texto de la etiqueta debe mostrar los cambios que realizó en Visual Studio Code. Seleccione el icono del signo más (+) para agregar una cuenta nueva.

    Captura de pantalla del botón para agregar una cuenta nueva

  10. El texto de la etiqueta debe mostrar los cambios que realizó en Visual Studio Code. Rellene el formulario y luego seleccione Guardar.

    Captura de pantalla de la ventana para crear una cuenta nueva

  11. Seleccione para abrir la cuenta nueva.

  12. El texto de la etiqueta debe mostrar los cambios que realizó. Cierre la vista preliminar de la aplicación.

    Captura de pantalla del botón para cerrar la vista preliminar de la aplicación

  13. Seleccione Archivo > Guardar.

  14. Seleccione Publicar.

  15. Seleccione Publicar esta versión y luego espere a que se complete el proceso de publicación.

Ejercicio 3: GitHub (opcional)

En este ejercicio, creará un nuevo repositorio en GitHub, inicializará el repositorio y luego trabajará con los cambios.

Tarea 1: Inicializar el repositorio remoto

En esta tarea, inicializará el repositorio remoto.

  1. Vaya a GitHub e inicie sesión. Si es la primera vez, seleccione Registrarse y luego siga las instrucciones para completar el proceso de registro.

  2. Seleccione el botón del signo más (+) y luego Nuevo repositorio.

    Captura de pantalla del botón Nuevo repositorio en GitHub

  3. Introduzca Contoto_Man como Nombre del repositorio, seleccione Privado y luego seleccione Crear repositorio.

    Captura de pantalla de la ventana Crear un nuevo repositorio, que muestra la opción Privado seleccionada

  4. Copie la URL y luego péguela en el Bloc de notas para usarla más tarde.

    Captura de pantalla del botón para copiar la URL del repositorio

Tarea 2: Inicializar el repositorio local

En esta tarea, inicializará el repositorio local.

  1. Abra Visual Studio Code.

  2. Si la carpeta Learn lab account manager no se abre automáticamente, seleccione Archivo > Abrir carpeta. Localice y abra la carpeta Learn lab account manager.

  3. Seleccione el menú Ver y, a continuación, elija SCM (administrador de control de código fuente).

  4. Seleccione Inicializar repositorio.

    Captura de pantalla del botón Inicializar repositorio

  5. Pase el cursor sobre la opción Cambios y luego seleccione el icono del signo más (+) para Organizar todos los cambios.

    Captura de pantalla del botón Organizar todos los cambios

  6. Escriba Compromiso inicial para el mensaje y luego seleccione Confirmar (botón de la casilla).

    Captura de pantalla del botón para confirmar cambios en la confirmación inicial

Tarea 3: Agregar y sincronizar un repositorio remoto

En esta tarea, agregará un repositorio remoto y luego lo sincronizará.

  1. Seleccione el botón de los puntos suspensivos (...) y seleccione Remoto > Agregar remoto.

    Captura de pantalla del botón Agregar remoto

  2. Pegue la URL del repositorio que copió anteriormente y luego seleccione Agregar remoto desde URL. Inicie sesión si se le solicita hacerlo.

    Captura de pantalla del botón Agregar remoto desde URL

  3. Escriba Origen como nombre remoto y luego presione la tecla Entrar.

    Captura de pantalla del nombre remoto configurado como Origen

  4. Seleccione el botón de los puntos suspensivos (...) y, a continuación, Extraer, Insertar > Sincronizar.

    Captura de pantalla del botón para sincronizar repositorios

  5. Seleccione Aceptar.

  6. Vaya a GitHub y abra el repositorio Contoso_Man.

  7. Seleccione para abrir la carpeta src.

    Captura de pantalla la carpeta de repositorio

  8. Examine el contenido de la carpeta.

Tarea 4: Trabajar con cambios

En esta tarea, trabajará con los cambios.

  1. Cambie a Visual Studio Code y luego seleccione el archivo BrowseScreen1.fx.yaml.

  2. Localice IconNewItem1 y luego cambie la transición de fórmula Navigate de CoverRight a UnCover.

    Captura de pantalla del tipo de transición de navegación

1 Seleccione Archivo > Guardar todo.

  1. Seleccione Control de código fuente > Organizar todos los cambios.

    Captura de pantalla del control de código fuente, con el botón Organizar todos los cambios seleccionado

  2. Escriba Cambiar la transición según las directrices de UX para el mensaje y luego seleccione Confirmar (icono de casilla).

    Captura de pantalla del botón Confirmar cambios

  3. Seleccione el botón de los puntos suspensivos (...) y, a continuación, Insertar.

  4. Vuelva a GitHub y abra el repositorio Contoso_Man.

  5. Seleccione para abrir la confirmación.

    Captura de pantalla del botón para abrir la confirmación

  6. Revise los cambios.

    Captura de pantalla de la revisión de confirmación de cambios