Ejercicio: Crear una aplicación de lienzo

Objetivo de aprendizaje

En este ejercicio, los alumnos usarán Copilot para crear una aplicación de lienzo que los empleados puedan usar para informar sobre problemas de mantenimiento. Usará Copilot para crear el modelo de datos y el diseño inicial de la aplicación.

Tras finalizar con éxito este laboratorio, podrá hacer lo siguiente:

• Usar Copilot para crear un modelo de datos adecuado para su aplicación.
• Modificar una aplicación de lienzo.

Escenario

Contoso College está buscando una aplicación que los empleados puedan usar para informar sobre problemas de mantenimiento en todo el campus. Contoso quiere crear una aplicación de lienzo a la que los empleados puedan acceder desde sus teléfonos cuando lo necesiten.

Tras finalizar con éxito este laboratorio, podrá hacer lo siguiente:

• Usar Copilot para crear un modelo de datos adecuado para su aplicación.
• Modificar una aplicación de lienzo.

Tarea 1: Compilar un modelo de datos y crear una aplicación

1. Abra un navegador web y vaya a Power Apps Maker Portal.

2. Con la navegación del lado izquierdo, seleccione Crear.

3. En Crear aplicaciones, elija Comenzar con Copilot.

4. En la pantalla Describir las tablas que creará Copilot, escriba "Crea una sola tabla para notificar problemas de mantenimiento".

5. Seleccione el botón Opciones de tabla. En el menú que aparecerá, seleccione Una tabla.

   

6. Seleccione el botón Generar.

Copilot ha creado una tabla Maintenance Issue. A continuación, agregaremos más columnas a la tabla.

7. En el panel Copilot, escriba "Añade una columna de opciones llamada Issue Type".

8. En el panel Copilot, añada individualmente las siguientes indicaciones.

   1. "Añade una columna de texto llamada Location".
   2. "Añade una columna de texto llamada Contact Number"
   3. "Añade una columna de opciones llamada Priority level".
   4. "Añade una columna de texto llamada Access Instructions".
   5. "Añade una columna de texto llamada Resolution Notes".

A continuación, eliminaremos las columnas innecesarias, ya que se reemplazarán con columnas de búsqueda.

9. Si tiene ese tipo de columnas en su tabla, introduzca los siguientes comandos para eliminarlos.

   1. "Elimina la columna 'Reported By'".
   2. "Elimina la columna 'Assigned To / Technician'".

La tabla Maintenance Issue debería ser similar a la siguiente imagen:

A continuación, vamos a añadir la tabla de usuarios al modelo de datos para poder asociar las solicitudes de Maintenance Issue a usuarios específicos.

10. En la barra de comandos, seleccione + Tabla existente.

11. Cambie de Recomendadas a Todas las tablas.

12. En el campo Buscar, introduzca User.

13. Seleccione la tabla User y el botón Agregar seleccionados.

14. En la barra de comandos, seleccione Crear relaciones.

15. Configure la relación como sigue:

    • Uno: User
    • Varios: Maintenance Issue
    • Nombre para mostrar: Requesting Employee

16. Seleccione Listo.

17. En la barra de comandos, seleccione Crear relaciones.

18. Configure la relación como sigue:

    • Uno: User
    • Varios: Maintenance Issue
    • Nombre para mostrar: Assigned to

19. Seleccione Listo.

El modelo de datos completo debería parecerse al de la siguiente imagen:

20. Seleccione el botón Guardar y abrir aplicación.

Tarea 2: Personalizar la nueva aplicación

Ahora que ya ha creado su nueva aplicación, le haremos algunas modificaciones para adaptarla mejor a nuestras necesidades. Comenzamos haciendo algunas modificaciones en la pantalla de bienvenida.

1. Con la nueva aplicación abierta, seleccione el marcador de posición de Imagen, encima del texto Problemas de Mantenimiento.
2. En el menú que aparecerá, seleccione Editar>Imágenes de archivo
3. En el campo Buscar, escriba Medical, seleccione la imagen con teclado de ordenador y estetoscopio y elija Insertar.
4. A continuación, seleccione el marcador de posición de Imagen, encima de Usuarios.
5. En el campo Buscar, introduzca People, seleccione la imagen que desea utilizar y elija Insertar.
6. En el menú que aparecerá, seleccione Editar>Imágenes de archivo.

A continuación, vamos a ajustar el tamaño de las imágenes para que sean más fáciles de leer para los usuarios. Además, vamos a ajustar el texto que aparece para cada elemento.

7. En la barra de comandos, seleccione el botón Propiedades. (Justo a la derecha del botón Editar).

8. Seleccione la imagen que hay encima de Problemas de mantenimiento.

9. En el panel Propiedades, configure la imagen del siguiente modo:

   • Posición de imagen: Llenar
   • Ancho: 350
   • Largo: 350

10. Repita el paso anterior para establecer el Largo y el Ancho de la imagen Usuarios en 350 x 350.

11. Seleccione el texto bajo Problemas de mantenimiento.

12. En el panel Propiedades, seleccione el campo Text y cambie el texto a "Enviar Maintenance Issue".

13. Seleccione el texto Pantalla de bienvenida en el encabezado.

14. En el panel Propiedades, ponga Mostrar logotipo en Desactivado.

15. Establezca la Imagen de perfil en Desactivado.

16. En el panel Propiedades, en el grupo Estiloy tema, seleccione el icono de color Llenar.

17. Cambie el color a Negro.

18. Con el encabezado seleccionado, cambie el Título a Notificación de problemas en Contoso.

La aplicación se parecerá a la imagen mostrada.

Tarea 3: Añadir una nueva pantalla a la aplicación.

Decidimos que, además de enviar problemas de mantenimiento, también tiene sentido que los usuarios añadan activos.

1. Con la aplicación abierta, expanda el panel Copilot si es necesario. En Copilot, escriba "Añade una nueva pantalla llamada Assets". Seleccione Enviar.

2. Seleccione el botón Mantener para aceptar la pantalla.

3. Se añadirá una nueva pantalla llamada Assets a la aplicación.

4. En la pantalla, seleccione Con datos.

5. En la pantalla Seleccionar origen de datos, seleccione Crear nuevas tablas.

6. En Copilot, escriba "Crea una nueva tabla llamada Assets. Debe incluir las siguientes columnas. Asset Name, Asset ID, Asset Type, Asset Location, Data Installed y Department".

7. Si se ha añadido otra tabla (Departament), use Copilot para eliminarla; escriba "Quita la tabla Departament".

8. Después de crear la tabla, seleccione Guardar y salir.

9. De nuevo en la aplicación, seleccione Con Datos otra vez.

10. Se añadirá una pantalla llamada Asset a la aplicación.

11. Si es necesario, en la barra de comandos, seleccione el botón Propiedades. (Junto al botón Editar).

12. Luego, seleccione la lista de Assets. Debería aparecer un icono de lápiz, seleccione dicho icono de lápiz.

13. Seleccione el botón Insertar y Etiqueta de texto.

14. Coloque la Etiqueta de texto, junto a Asset Location.

    

15. Con la Etiqueta de texto seleccionada, escriba lo siguiente en la barra de fórmulas: ThisItem.’Asset Type’

    

16. Seleccione el fondo del formulario.

17. Ponga la propiedad Columns en 1.

18. La pantalla completada debería tener un aspecto similar al de la imagen siguiente.

    

Tarea 4: Actualizar la pantalla de bienvenida

Tras la revisión, decidimos que la capacidad de crear usuarios en esta aplicación es innecesaria, por lo que cambiamos la pantalla de bienvenida para permitir el acceso a Assets.

1. Con la Vista de árbol, seleccione la Pantalla de bienvenida.
2. Seleccione la Imagen que hay encima de Usuarios/contactos.
3. En el menú que aparecerá, seleccione Editar e Imágenes de archivo.
4. En el campo Buscar, introduzca Equipo y seleccione una imagen para usar.
5. Ponga la propiedad OnSelect de la imagen en Navigate('Assets')

6. Seleccione el texto Usuarios/Contactos y ponga la propiedad Text en Assets.
7. Seleccione Text debajo de Equipment y cambie la propiedad Text a "Ver y crear registros de activos".

Tarea 5: Probar la aplicación

A continuación, vamos a probar la aplicación para asegurarnos de que funciona correctamente.

1. En la Barra de comandos, seleccione el botón Reproducir.
2. Seleccione la imagen Assets.
3. En el campo Buscar, introduzca Oficina. (Como puede ver, la lista se filtra)
4. Seleccione el registro Office Chair.
5. Seleccione el botón de lápiz Editar. Cambie la Categoría a Furniture.
6. Cambie el Asset Type a Equipment.
7. Seleccione el botón Guardar (marca de verificación)
8. Seleccione el botón Guardar.
9. Como puede ver, el Asset Type Desk cambia a Equipment.
10. Seleccione el botón Inicio.
11. Seleccione la X púrpura para salir del modo Versión preliminar.

Tarea 6: Guardar y publicar la aplicación

Objetivo: guardar y publicar la aplicación para que sea accesible en navegadores web, dispositivos móviles o plataformas integradas, como SharePoint o Teams.

1. En Power Apps Studio, seleccione el botón Guardar.
2. En la pantalla Guardar como, ponga el Nombre en Notificación de problemas en Contoso y seleccione Guardar.
3. Seleccione el botón Publicar.