Crear un conector personalizado para una API existente

  • 20 minutos

En este ejercicio, creará su primer conector personalizado para una API existente llamada Contoso Invoicing.

Importante

Utilice un entorno de prueba con Microsoft Dataverse aprovisionado. Si no dispone de ningún entorno de prueba, puede suscribirse al Plan de la comunidad de Power Apps.

Tarea: Revisar la API

Para revisar la API, siga estos pasos:

  1. Vaya a Contoso Invoicing.

  2. Seleccione el vínculo a la documentación.

    Captura de pantalla con una flecha que apunta al vínculo de la documentación de la API

  3. Revise las operaciones disponibles.

  4. Seleccione para expandir y revisar cada operación.

  5. Cierre la pestaña o ventana del navegador de la documentación.

  6. Seleccione el vínculo de la Definición de Open API.

  7. En la siguiente imagen se muestra un ejemplo de la versión de OpenAPI de lo que se mostró en la página de documentación. Haga clic con el botón derecho y seleccione Guardar como.

    Captura de pantalla con una flecha que apunta al botón Guardar como

  8. Guarde el archivo de forma local. Este archivo se usará más adelante en este ejercicio.

  9. Cierre la ventana o pestaña del navegador de la definición.

  10. Seleccione el vínculo de la Clave de API.

  11. Copie y guarde su clave de API, la necesitará más adelante.

    Captura de pantalla de la clave de API para Contoso Invoicing

  12. Seleccione Volver a la página principal.

  13. Seleccione Descargar logotipo.

  14. Guarde la imagen del logotipo localmente; la usará más tarde.

Tarea: Crear una nueva solución

Para crear una nueva solución, siga estos pasos:

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

  2. Seleccione Soluciones > + Nueva solución.

  3. Introduzca Contoso Invoicing como Nombre para mostrar y seleccione el botón + Nuevo editor.

    Captura de pantalla con el botón para agregar un nuevo editor

  4. Introduzca Contoso para Nombre para mostrar, Contoso para Nombre, contoso para Prefijo y, luego, seleccione Guardar.

  5. Seleccione Contoso para Editor y seleccione Crear. Cuando trabaje con un proyecto real, es mejor crear su propio editor.

    Captura de pantalla con los detalles de creación de la nueva solución Contoso Invoicing

  6. No navegue fuera de esta página después de seleccionar Crear.

Tarea: Crear un conector nuevo

Para crear un nuevo conector, siga estos pasos:

  1. Abra la solución Contoso Invoicing que ha creado.

  2. Seleccione + Nuevo > Automatización > Conector personalizado.

    Captura de pantalla con una flecha que apunta a

  3. Introduzca Contoso Invoicing como Nombre de conector y seleccione Cargar la imagen.

    Captura de pantalla con una flecha que apunta al botón para cargar la imagen del icono

  4. Seleccione la imagen del logotipo del conector que descargó en la Tarea 1: Revisar la API.

  5. Introduzca #175497 como Color de fondo del icono.

  6. Introduzca Conector personalizado para la API de Contoso Invoicing como Descripción.

  7. Introduzca contosoinvoicingtest.azurewebsites.net como Host.

  8. Seleccione Crear conector.

    Captura de pantalla del botón

  9. No se vaya de esta página.

Tarea: Importar la definición de OpenAPI

Siga estos pasos para importar la definición de OpenAPI:

  1. Seleccione la flecha junto al Nombre del conector.

    Captura de pantalla con una flecha que apunta al botón Atrás

  2. Seleccione los puntos suspensivos (...) del conector y, luego, seleccione Actualizar desde el archivo OpenAPI.

    Captura de pantalla con una flecha que apunta al botón Actualizar desde el archivo OpenAPI

  3. Seleccione Importar.

  4. Seleccione el archivo swagger.json que descargó en Tarea 1: Revisar la API y luego seleccione Abrir.

  5. Seleccione Continuar.

  6. Complete la URL del host como contosoinvoicingtest.azurewebsites.net y luego seleccione Seguridad.

    Captura de pantalla con una flecha que apunta a la pestaña Seguridad

  7. Observe que los campos se completan desde el archivo importado.

  8. No se vaya de esta página.

Tarea: Revisar y ajustar las definiciones

Para revisar y ajustar las definiciones, siga estos pasos:

  1. Seleccione la pestaña Definición.

  2. Tómese unos minutos para revisar las operaciones que se importaron.

  3. Observe el círculo de información azul junto a GetInvoice.

  4. Seleccione la operación GetInvoice.

    Captura de pantalla con la acción para obtener factura

  5. Observe que la operación indica que falta un Resumen.

  6. Introduzca Obtener factura como Resumen para mejorar la usabilidad.

    Captura de pantalla del resumen de la acción para obtener factura

  7. Observe el círculo informativo azul junto a la operación PayInvoice; indica que falta una Descripción.

  8. Introduzca Pagar una factura como Descripción.

  9. Elimine ambas operaciones NewInvoice, ya que no las usará.

    Captura de pantalla con el botón Eliminar acción

  10. Seleccione la operación GetInvoiceSchema.

  11. Modifique la opción Visibilidad a interna para que nadie la vea en su lista de acciones.

  12. Seleccione Actualizar conector.

    Captura de pantalla con una flecha que apunta al botón Actualizar conector

  13. No se vaya de esta página.

Tarea: Probar el conector

Para probar el conector, siga estos pasos:

  1. Seleccione la pestaña Prueba.

  2. Seleccione + Nueva conexión.

    Captura de pantalla con una flecha que apunta al botón Nueva conexión

  3. Pegue la Clave de API que guardó en la Tarea 1: Revisar la API y luego seleccione Crear conexión.

  4. Seleccione el botón Actualizar.

    Captura de pantalla con una flecha que apunta al botón Actualizar

  5. Seleccione ListInvoiceTypes > Probar operación.

    Captura de pantalla con una flecha que apunta al botón Probar operación

  6. Debería ver los datos de los tipos de factura en el área del cuerpo.

    Captura de pantalla de los tipos de factura

Tarea: Usar un conector personalizado en una aplicación de lienzo

En esta tarea, creará una aplicación de lienzo y utilizará el conector personalizado que creó para mostrar una lista de facturas.

  1. Vaya a Power Apps Maker Portal y compruebe que se encuentra en el entorno correcto.

  2. Seleccione Soluciones y abra la solución Contoso Invoicing que ha creado.

  3. Seleccione + Nuevo y, luego, Aplicación > Aplicación de lienzo.

    Captura de pantalla con el botón para crear una nueva aplicación de lienzo

  4. Introduzca Aplicación Contoso Invoicing como Nombre de la aplicación, seleccione Teléfono para Formato y, por último, seleccione Crear.

  5. Seleccione la pestaña Datos, seleccione + Agregar datos, expanda Conectores y, luego, seleccione el conector personalizado Contoso Invoicing que ha creado.

    Captura de pantalla con el conector personalizado Contoso Invoicing

  6. Seleccione + Agregar un conector.

  7. Pegue la clave de API que guardó en "Tarea 1: Revisar la API" y, luego, seleccione Conectar.

  8. Seleccione Entendido en la ventana emergente de advertencia de bonificación.

  9. Seleccione la pestaña Vista de árbol.

  10. Seleccione + Insertar y Galería vertical.

    Captura de pantalla con el botón para insertar la galería vertical

  11. Seleccione ContosoInvoicing para Datos.

    Captura de pantalla con el cuadro de diálogo para seleccionar datos

  12. Establezca Elementos de acuerdo con el siguiente valor.

    ContosoInvoicing.ListInvoices().invoices

    Captura de pantalla con el valor de elementos de la galería

  13. Expanda la galería y seleccione Subtítulo.

  14. Ponga el valor Text de subtítulo en ThisItem.amount.

  15. Expanda la galería y seleccione el Título dentro de la galería.

  16. Ponga el valor Text de título en ThisItem.accountName.

    Captura de pantalla con el valor Text de título

  17. La galería ahora debería asemejarse a la imagen siguiente.

    Captura de pantalla de la galería