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.

   

4. Localice LblAppName1.

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

   

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")

   

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

   

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.

   

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

   

8. Seleccione Vista previa 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.

   

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

    

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.

    

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.

   

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

   

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

   

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.

   

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

   

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

   

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.

   

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

   

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

   

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

   

5. Seleccione Aceptar.

6. Vaya a GitHub y abra el repositorio Contoso_Man.

7. Seleccione para abrir la carpeta src.

   

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.

   

1 Seleccione Archivo > Guardar todo.

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

   

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

   

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.

   

6. Revise los cambios.