Capítulo 6: Uso de la API web en la aplicación

Artículo
03/16/2023

Maria y Kiana están listos para combinar la aplicación con la API web. Sin embargo, antes de continuar, deciden consultar con Preeti, el gerente de operaciones de TI.

Comprender los requisitos de gestión de operaciones de TI para la API web

A Preeti le preocupa que la aplicación y la API web deban ser seguras porque brindan acceso a datos confidenciales almacenados en las diversas bases de datos. Preeti quiere garantías de que la autenticación y autorización se incluirán para evitar el acceso injustificado a la información. Preeti también es consciente de que la empresa se está expandiendo rápidamente y es probable que el volumen de datos involucrados en la gestión de clientes, citas, repuestos y la base de conocimientos aumente exponencialmente a corto plazo. En consecuencia, la solución debe ser escalable.

Kiana le explica a Preeti que la API web se implementa actualmente con Azure App Service. Este servicio admite varios proveedores de autenticación, que Preeti puede configurar mediante el portal de Azure. Preeti está especialmente interesado en Microsoft Entra ID porque VanArsdel está buscando implementar esta forma de autenticación en muchos de sus otros sistemas corporativos en un futuro cercano.

Configuración de autenticación de App Service.

App Service también proporciona escalabilidad horizontal y vertical. Si es necesario, Preeti puede ampliar los recursos disponibles para la API web actualizando el plan de App Service para la aplicación web:

Aumento de la escala vertical de App Service.

Preeti también puede organizar el escalado horizontal del sistema configurando el escalado automático. App Service permite que un administrador de operaciones defina reglas de autoescala que determinan las condiciones bajo las cuales el sistema debe escalar horizontalmente en más instancias cuando aumenta la carga, o volver a hacerlo cuando la demanda cae. Preeti también puede configurar el ajuste de escala automático preventivo para que se produzca de acuerdo con una programación:

Aumento de la escala horizontal de App Service.

Una parte clave del rol de un gerente de operaciones de TI es tener un ojo para saber cómo podrían evolucionar los sistemas y asegurarse de que las estructuras de soporte subyacentes manejarán la expansión y los cambios futuros. Preeti sabe que la API web desarrollada por Kiana podría ampliarse y reutilizarse en otros sistemas VanArsdel en el futuro. Preeti necesita poder administrar y controlar la forma en que los desarrolladores solicitan el uso de la API web, protegerla como un recurso valioso y monitorear su uso. Por lo tanto, Preeti decide proteger la API web detrás del servicio Azure API Management.

API Management proporciona una capa adicional de seguridad a una API web, además de permitir una supervisión y un control detallados sobre qué clientes pueden acceder a qué operaciones. Al usar API Management, Preeti puede administrar la utilización de recursos y acelerar el rendimiento de los clientes de baja prioridad para garantizar que las aplicaciones críticas de mayor prioridad se atiendan más rápidamente.

Para obtener información sobre los servicios que ofrece API Management, vaya a Acerca de la gestión de API.

Creación de un servicio de gestión de API

Preeti creó el servicio de administración de API a través del portal de Azure, siguiendo estos pasos:

Inicie sesión en el Portal de Azure y, en la página Inicio, seleccione Crear un recurso.
En el cuadro de texto Buscar en MarketPlace, ingrese Gestión de API y luego seleccione Ingresar.
Sobre la página Gestión de API, seleccione Crear.
En la página Crear API Management, ingrese los siguientes valores y luego seleccione Revisar + crear:
- Suscripción: seleccione la suscripción
- Grupo de recursos: webapi_rg (este es el mismo grupo de recursos que creó para App Service)
- Región: seleccione su región más cercana
- Nombre de recurso: escriba un nombre único para el servicio
- Nombre de organización: VanArsdel
- Administrador correo electrónico: itadmin@vanarsdel.com
- Nivel de precios: Desarrollador (sin SLA)
Nota

No use el nivel de precios Desarrollador para un sistema de producción.
En la página de validación, seleccione Crear y espere mientras se crea el servicio API Management.

Nota

El aprovisionamiento del servicio de administración de API puede demorar 30 minutos o más; sea paciente.

Publicar la API web a través de API Management

Después de que se creó el servicio API Management, Preeti publicó la API web para hacerla accesible a otros servicios y aplicaciones con los pasos siguientes:

En Azure Portal, vaya al servicio API Management.
En la página Servicio de gestión de API, en el panel izquierdo debajo de API, seleccione API:
En el panel Agregar una nueva AP, seleccione OpenAPI:
En el cuadro de diálogo Crear a partir de especificación OpenAPI, escriba los siguientes valores y luego seleccione Crear:
- OpenAPI especificación: https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json, donde <webapp name> es el nombre del App Service que aloja su API web
- Nombre para mostrar: API de ingeniero de campo
- Nombre: field-engineer-api
- sufijo API URL: dejar vacío
- URL básica: usar la URL predeterminada
Cuando se haya creado la API del ingeniero de campo, seleccione la pestaña Configuración para la API, establezca la URL de servicio Web en https://<webapp name>.azurewebsites.net y seleccione Guardar:
En la pestaña Prueba, seleccione URI de API GETAppointments y luego seleccione Enviar:
Verifique que la solicitud sea exitosa (el código de retorno HTTP es 200 OK) y que devuelve un resultado que contiene una lista de citas en el cuerpo de la respuesta:

Conexión a API Management desde la aplicación

Kiana y Maria ahora pueden trabajar juntos para conectar la aplicación creada con Power Apps a la API web a través del servicio API Management.

La primera tarea es crear un conector personalizado que utilice la aplicación para comunicarse con API Management. Esto implica exportar la API al entorno de Power Apps utilizado para crear la aplicación, que Kiana hace de la siguiente manera:

En el portal de Azure, vaya a la página del servicio de API Management que creó Preeti.
En el panel izquierdo, en API, seleccione API.
Seleccione el botón de puntos suspensivos para API de ingeniero de campo y luego seleccione Exportar.
En el panel Exportar API, seleccione Power Apps y Power Automate:
En el panel Exportar API a PowerApps, seleccione el entorno de Power Apps en el que creó la aplicación prototipo (Maria en la siguiente imagen) y luego seleccione Exportar.
Una vez exportada la API, seleccione la API de ingeniero de campo. En la página Ajustes, desplácese hacia abajo hasta la sección Suscripciones, desactive Se requiere suscripción y luego seleccione Guardar.

La aplicación prototipo usó libros de Excel para las fuentes de datos. Ahora que el conector personalizado para la API web está disponible, María realiza los siguientes pasos para agregar el conector a la aplicación:

Inicie sesión en Power Apps.
En el panel izquierdo, expanda Datos y seleccione Conectores personalizados. El conector personalizado field-engineer-api debe aparecer en la lista. Seleccione Crear conexión.
En el cuadro de diálogo field-engineer-api, seleccione Crear.
Cuando se haya creado la conexión, verifique que aparezca en la lista de conexiones disponibles.
En el panel izquierdo, seleccione Aplicaciones, seleccione VanArsdelApp y luego seleccione Editar.
En el panel izquierdo, seleccione la pestaña Datos. Seleccione Agregar datos, seleccione el botón de puntos suspensivos para Conectores y luego seleccione Actualizar.
En la lista de conectores, seleccione el conector field-engineer-api.
En el cuadro de diálogo field-engineer-api, seleccione el conector field-engineer-api.
En el panel Datos, compruebe que aparezca el conector FieldEngineerApi.

Actualización de la aplicación para usar el conector: gestión de inventario de campo

Ahora que se ha agregado la conexión a la aplicación, María puede modificar las pantallas para usarla para reemplazar los libros de Excel. Esto implica trabajar metódicamente en cada pantalla y cambiar el origen de datos. No deberían ser necesarios otros cambios. María comienza con las pantallas ExplorarPiezas y PartDetails, como sigue:

En la pantalla Inicio de la aplicación, seleccione el botón Partes. Establezca la propiedad de acción OnSelect en la fórmula siguiente.
```
ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());

Navigate(BrowseParts, ScreenTransition.Fade)
```
La función ClearCollect crea una nueva colección llamada partsCollection y la rellena con los datos que resultan de llamar a la operación getboilerparts en la conexión FieldEngineerAPI.

Nota

Es una buena práctica recuperar los datos en una colección y hacer referencia a esa colección desde cualquier pantalla que necesite la información. Este enfoque puede evitar que diferentes pantallas ejecuten repetidamente la misma consulta y obtengan los mismos datos.
Seleccione F5 para obtener una vista previa de la aplicación.
En la pantalla Inicio, seleccione Elementos. Esta acción creará la colección partsCollection. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Nota

El propósito de este paso es permitirle ver los datos mientras edita la pantalla ExplorarPiezas en los siguientes pasos.
Seleccione el control NavegarGalería1 en la pantalla ExplorarPiezas. En la fórmula de la propiedad Artículos, reemplace la referencia al origen de datos [@Table1] para partsCollection.

Este cambio dará lugar a algunos errores. Esto se debe a que los nombres de campo en el libro de Excel original usaban mayúsculas (Name, CategoryID y Overview), mientras que las propiedades devueltas en el cuerpo de la respuesta de la API web se nombran en minúsculas. Cambie estas referencias para usar minúsculas. La fórmula debería parecerse a la siguiente.
```
SortByColumns(Search(FieldEngineerApi.getapiboilerparts(), TextSearchBox1.Text, "name", "categoryId", "overview"), "name", If(SortDescending1, Descending, Ascending))
```
Sobre el panel Vista de árbol, seleccione el control IconRefresh1. Cambie la acción OnSelect a la fórmula ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts()).

Nota

La fórmula original para esta acción llama a la función Actualizar para repoblar los datos usando la conexión al origen de datos original. No puede usar Actualizar con una conexión que ejecuta una función para recuperar los datos, por lo que no funcionará con FieldEngineerApi.getapiboilerparts(). La solución en este paso vuelve a llenar la colección partsCollection con los últimos datos.
En el panel Vista de árbol, expanda el control BrowseGallery1 y seleccione el control Body1. Cambie la propiedad Text a ThisItem.overview.
En el panel Vista de árbol, seleccione el control Subtitle1. Cambie la propiedad Text a ThisItem.categoryId.
En el panel Vista de árbol, seleccione el control Title. Cambie la propiedad Text a ThisItem.name.
En el panel de Vista de árbol, seleccione el control DetailForm1 en la pantalla PartDetails. Cambie la propiedad DataSource de [@Table1] a partsCollection.
En el panel Vista de árbol, seleccione el control Name_DataCard1 en DetailForm1. Cambie la propiedad Default a ThisItem.name.
Cambie la propiedad Default del control CategoryID_DataCard1 a ThisItem.categoryId.
Cambie la propiedad Default del control Overview_DataCard1 a ThisItem.overview.
Cambie la propiedad Default del control Price_DataCard1 a ThisItem.price.
Cambie la propiedad Default del control NumberInStock_DataCard1 a ThisItem.numberInStock.
Cambie la propiedad Default del control Imagen_DataCard1 a ThisItem.imageUrl.
En el panel izquierdo de la pestaña Datos, haga clic con el botón derecho en la conexión de datos Table1 y luego seleccione Eliminar para eliminarla de la aplicación. Esta conexión ya no es necesaria.
Guardar la aplicación.

Nota

Puede guardar rápidamente la aplicación sin usar el menú Archivo seleccionando Ctrl+S.
Seleccione F5 para obtener una vista previa de la aplicación. Las pantallas Examinar piezas y Detalles de la pieza deberían funcionar exactamente como antes, excepto que esta vez están recuperando datos de la base de datos SQL de Azure InventoryDB a través de la API web, en lugar de desde un archivo de Excel local.
Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Actualización de la aplicación para usar el conector: Programaicón de inventario de campo y Notas

María continúa con las pantallas BrowseAppointments, AppointmentDetails y EditAppointment. Los datos presentados por estas pantallas se originan actualmente en la tabla Citas en otro libro de Excel.

En la pantalla Inicio de la aplicación, configure la acción OnVisible con la siguiente fórmula.
```
ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime))
```
Esta fórmula recupera los datos de las citas en la colección appointmentsCollection. Las citas se filtran para recuperar visitas programadas en o después de la fecha actual.
Seleccione el control de etiqueta que muestra la hora de la próxima cita. Establezca la propiedad Text en Text(First(appointmentsCollection).startDateTime, ShortTime24).
Seleccione el control de etiqueta que muestra la fecha de la próxima cita. Establezca la propiedad Texto en Text(First(appointmentsCollection).startDateTime, LongDate).
Seleccione el control de la etiqueta que muestra el nombre del cliente para la siguiente cita. Establezca la propiedad Texto en First(appointmentsCollection).customer.name.
Seleccione F5 para obtener una vista previa de la aplicación. En la pantalla Inicio, seleccione Citas. Esta acción creará la colección appointmentsCollection. Cierre la ventana de vista previa y vuelva a Power Apps Studio.
En el panel de Vista de árbol, seleccione el control BrowseAppointmentsGallery en la pantalla BrowseAppointments. Cambie la fórmula en la propiedad Artículos a la siguiente fórmula.
```
Sort(Filter(appointmentsCollection, StartsWith(customer.name, TextSearchBox1\_1.Text)), startDateTime)
```
Esta fórmula filtra los datos que se muestran en la pantalla por nombre de cliente, lo que permite al usuario ingresar el nombre de un cliente. Las citas se muestran en orden de fecha y hora.
En el panel Vista de árbol, expanda el control BrowseAppointmentsGallery y seleccione el control Title1_1. Cambie la propiedad Text por lo siguiente.
```
Text(ThisItem.startDateTime, LongDate)
```
Esta fórmula muestra la parte de la fecha del campo startDateTime para la cita.
En el panel Vista de árbol, expanda el control BrowseAppointmentsGallery y seleccione el control Subtitle1_1. Cambie la propiedad Text por lo siguiente.
```
Text(ThisItem.startDateTime, ShortTime24)
```

Esta fórmula muestra el elemento de tiempo del campo startDateTime.

En el panel Vista de árbol, expanda el control BrowseAppointmentsGallery y seleccione el control Body1_1. Cambie la propiedad Text por lo siguiente.
```
ThisItem.customer.name
```
En el panel de Vista de árbol, seleccione el control IconRefresh1_1 en la pantalla BrowseAppointments. Establezca la acción OnSelect en la fórmula siguiente.
```
ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime));
```
En el panel Vista de árbol, expanda la pantalla AppointmentDetails y seleccione el control DetailForm1_1. Establezca la propiedad DataSource en appointmentsCollection.
En el panel Vista de árbol, seleccione el control IconEdit1. Modifique la fórmula en la propiedad DisplayMode para probar la colección appoinmentsCollection.
```
If(DataSourceInfo(**appointmentsCollection**, DataSourceInfo.EditPermission), DisplayMode.Edit, DisplayMode.Disabled)
```
En el panel Vista de árbol, expanda la pantalla DetailForm1_1 y seleccione el control Customer Name_DataCard1. Cambie la propiedad Default a ThisItem.customer.name.
Cambiar las propiedades Default de las tarjetas de datos restantes de la siguiente manera:
- Dirección del cliente_DataCard1: ThisItem.customer.address
- Número de contacto_DataCard1: ThisItem.customer.contactNumber
- Detalles del problema_DataCard1: ThisItem.problemDetails
- Estado_DataCard1: ThisItem.appointmentStatus.statusName
- Notas_DataCard1: ThisItem.notes
- Imagen_DataCard1_1: ThisItem.imageUrl
En el panel Vista de árbol, expanda la pantalla EditAppointment y seleccione el control EditForm1. Establezca la propiedad DataSource en appointmentsCollection.
En el panel Vista de árbol, expanda el control EditForm1 y seleccione el control Customer Name_DataCard3. Cambie la propiedad Default a ThisItem.customer.name.
Cambiar las propiedades Default de las tarjetas de datos restantes de la siguiente manera:

Número de contacto_DataCard2: ThisItem.customer.contactNumber; además, cambie la propiedad MaxLength a 20
Detalles del problema_DataCard2: ThisItem.problemDetails
Estado_DataCard5: ThisItem.appointmentStatus.statusName
Notas_DataCard3: ThisItem.notes
Imagen_DataCard2: ThisItem.imageUrl

En el panel Vista de árbol, expanda el control Detalles del problema_Card2. Cambie el nombre de DataCardValueX (X será un número) bajo este control a ProblemDetailsValue. Repita este proceso para los controles DataCardValue X en las siguientes tarjetas de datos:
- Estado_DataCard5: StatusValue
- Notas_DataCard3: NotesValue
Nota

El control de imagen se abordará en el próximo capítulo.
Seleccione ProblemDetailsValue y establezca la propiedad MaxLength en 100.
En el panel Vista de árbol, expanda el control IconAccept1 y seleccione la pantalla EditAppointment. Establezca la propiedad de acción OnSelect en la fórmula siguiente.
```
FieldEngineerAPI.putapiappointmentsid(BrowseAppointmentsGallery.Selected.id, {problemDetails:ProblemDetailsValue.Text, statusName:StatusValue.Selected.Value, notes:NotesValue.Text, imageUrl:""});

Remove(appointmentsCollection, First(Filter(appointmentsCollection, id=BrowseAppointmentsGallery.Selected.id)));

Set(appointmentRec, FieldEngineerAPI.getapiappointmentsid(BrowseAppointmentsGallery.Selected.id));

Collect(appointmentsCollection, appointmentRec);

Navigate(AppointmentDetails, ScreenTransition.None);
```
Esta fórmula llama a la operación PUT para el controlador de citas en la API web. Pasa el id. de cita para la cita actual como primer parámetro, seguido de los detalles que el usuario podría haber modificado en la pantalla. Los detalles se pasan como un objeto JSON. Las declaraciones Remove, Set y Collect actualizan la colección appointmentsCollection con los datos guardados en la base de datos.

Nota

No use la función ClearCollect para eliminar y actualizar toda la colección en situaciones como esta, porque sería un desperdicio si—por ejemplo—solo ha cambiado un registro.
En el panel Vista de árbol, expanda el control IconAccept1 y seleccione la pantalla EditAppointment. Establezca la propiedad de acción OnSelect en lo siguiente.
```
ResetForm(EditForm1);

Navigate(AppointmentDetails, ScreenTransition.None);
```
En el panel izquierdo de la pestaña Datos, haga clic con el botón derecho en la conexión de datos Appointments y luego seleccione Eliminar para eliminarla de la aplicación.
Guardar la aplicación.
Seleccione F5 para obtener una vista previa de la aplicación. Desde la pantalla Inicio, vaya a la pantalla Citas, seleccione y edite una cita, y luego guarde los cambios. Compruebe que la cita se ha actualizado.
Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Creación del servicio Azure Cognitive Search para la base de conocimientos de campo

Actualmente, la pantalla de la base de conocimientos de la aplicación no está adjunta a ningún origen de datos. La API web incluye operaciones para consultar y actualizar las tablas Tips, BoilerParts y Engineers en la base de datos KnowledgeDB. Sin embargo, el propósito de la pantalla Consulta de la aplicación es admitir búsquedas en todas estas tablas. Es probable que el volumen de datos en estas tablas aumente rápidamente, por lo que Maria, Kiana y Preeti deciden implementar Azure Cognitive Search para admitir esta característica. Una aplicación puede enviar consultas y recibir resultados de Azure Cognitive Search a través de un conector personalizado.

Azure Cognitive Search funciona mejor si los datos que se van a buscar están contenidos en una única entidad de base de datos. Kiana crea una vista en la base de datos KnowledgeDB que presenta una vista unificada de las tablas Tips, BoilerParts y Engineers, como sigue:

En Azure Portal, vaya a la página Base de datos SQL KnowledgeDB.
En el panel izquierdo, seleccione Editor de consultas e inicie sesión en la base de datos como sqladmin, usando la contraseña Pa55w.rd.

En la ventana de consulta, ingrese la siguiente declaración y luego seleccione Ejecutar.

CREATE OR ALTER VIEW [dbo].[Knowledge] AS
SELECT T.Id, T.Subject, T.Body, B.Name, B.Overview
FROM [dbo].[Tips] T INNER JOIN [dbo].[BoilerParts] B
ON B.Id=T.KnowledgeBaseBoilerPartId

Creación de la vista "Conocimientos"

Verifique que la vista, Conocimientos, se ha creado con éxito.

En el panel izquierdo, seleccione Cadenas de conexión. Anote la cadena de conexión de ADO.NET; la necesitará cuando configure Azure Cognitive Search.

Trabajando con Kiana, Preeti configura una nueva instancia del servicio Azure Cognitive Search para realizar búsquedas en filas en la vista Conocimientos, de la siguiente manera:

En la página Inicio, en el portal de Azure, seleccione + Crear un recurso, ingrese Azure Cognitive Search, seleccione Ingresar y luego seleccione Crear.
En la página Nuevo servicio de búsqueda, ingrese la siguiente configuración y luego seleccione Revisar + crear:
- Suscripción: seleccione la suscripción de Azure
- Grupo de recursos: webapi_rg
- Nombre del servicio: escriba un nombre único para el servicio
- Nombre de la ubicación: seleccione su región más cercana
- Nivel de precios: gratis
En la página de validación, seleccione Crear y espere mientras se aprovisiona el servicio.
Vaya a la página del nuevo servicio de búsqueda, seleccione Descripción general, anote la URL (la necesitará más adelante cuando cree el conector personalizado para Power Apps) y luego seleccione Datos de importacion.
En la página Datos de importacion, en el cuadro de lista desplegable Origen de datos, seleccione Azure SQL Database.
En la página Conectarse a sus datos, especifique la siguiente configuración:
- Origen de datos: Azure SQL Database
- Nombre del origen de datos: knowledgebase
- Cadena de conexión: ingrese la cadena de conexión de Azure SQL Database para la base de datos KnowledgDB que registró anteriormente; en esta cadena, asegúrese de establecer la contraseña en Pa55w.rd
- Deje los campos ID de usuario y Contraseña en sus valores predeterminados; estos elementos se recuperan de la cadena de conexión
Seleccione Probar conexión. Asegúrese de que la prueba sea exitosa, seleccione [Conocimiento] en el cuadro de lista desplegable Tabla/Vista y, a continuación, seleccione Siguiente: Agregar habilidades cognitivas (opcional).
En la página Agregar habilidades cognitivas (opcional), seleccione Saltar a: personalizar índice de destino.
En la página Personalizar índice de destino, seleccione Recuperable para todas las columnas y Buscable para Asunto, Cuerpo, Nombre y Descripción general. Seleccione Siguiente: Crear un indexador.
En la página Crear un indexador, cambie el Nombre del indexador a knowledgebase-indexer. Para el Calendario, seleccione Cada hora, establezca Columna de marca de agua alta en Identificación y luego seleccione Enviar:
Para probar el indexador, en la página Descripción general del servicio de búsqueda, seleccione Explorador de búsqueda:
En el campo Cadena de consulta, ingrese una palabra para buscar en la base de conocimiento y luego seleccione Buscar. El servicio de búsqueda debe generar una lista de documentos con una coincidencia en los campos Asunto, Cuerpo, Nombre o Descripción general y mostrarlos en el panel Resultados. Tome nota de la URL de solicitud y el ejemplo de Resultados; necesitará estos elementos más adelante como solicitud y respuesta de ejemplo cuando configure el conector personalizado de Power Apps.

Creación del conector personalizado para el servicio Azure Cognitive Search

Kiana ahora puede crear un conector personalizado que Power Apps utiliza para enviar solicitudes de búsqueda al servicio de búsqueda. Kiana hace esto usando Power Apps Studio, como sigue:

Inicie sesión en Power Apps.
En el panel izquierdo, expanda Datos y seleccione Conectores personalizados. En el panel derecho, seleccione + Nuevo conector personalizado y luego Crear desde cero:
En el cuadro de diálogo Crear desde un espacio en blanco, establezca el nuevo nombre del conector en VanArsdelKBConnector y luego seleccione Continuar:
En la página Información general, ingrese una descripción y establezca el Esquema en HTTPS. En el cuadro Hosts, ingrese la URL del servicio de búsqueda (anotó esta URL anteriormente), pero sin el prefijo https://, y luego seleccione Seguridad.
En la página Seguridad, en el cuadro de lista desplegable Autenticación, seleccione Clave API. En el campo Etiqueta de parámetro, ingrese Clave de API. En el campo Nombre de parámetro, ingrese api-key. Seleccione Definición.
En la página Definición, seleccione Nueva acción. En el campo Resumen, ingrese Consulta. En el campo Descripción, ingrese Consultar la base de conocimientos. En el campo Id. de operación, ingrese Consulta. Debajo de Pedido, seleccione + Importar de muestra.
En el cuadro de diálogo Importar desde ejemplo, introduzca los siguientes valores y, a continuación, seleccione Importar:
- Verbo: GET
- URL: proporcione la URL de solicitud de ejemplo que anotó cuando probó el servicio de búsqueda en el explorador de búsqueda anteriormente
- Encabezados: Content-type
De vuelta en la página Definición, desplácese hacia abajo hasta la sección Consulta, seleccione el botón de puntos suspensivos junto a Buscar y luego seleccione Editar.
En la pantalla de edición, en la sección Parámetros, en el campo Valor predeterminado, escriba un asterisco (*). Deje los otros campos con sus valores predeterminados y luego seleccione Atrás.
En la página Definición, en la sección Consulta, seleccione el botón de puntos suspensivos junto a api-version y luego seleccione Editar.
En la pantalla de edición, en la sección Parámetros, en el campo Valor por defecto, ingrese 2020-06-30-Preview (esta es la versión asociada con la versión actual de Azure Cognitive Search; puede ver la versión en la URL de solicitud que anotó anteriormente). Establezca Se requiere en Sí y establezca Visibilidad en interna. Deje los otros campos con sus valores predeterminados y luego seleccione Atrás.
En la página Definición, desplácese hacia abajo hasta la sección Respuesta y seleccione + Agregar respuesta predeterminada.

]
En el cuadro de diálogo Importar desde ejemplo, en el campo Encabezados, ingrese el texto Tipo de contenido. En el campo Cuerpo, ingrese los resultados de ejemplo que registró al probar el servicio de búsqueda y luego seleccione Importar.
En la página Definición, seleccione la respuesta predeterminada.
En el campo Descripción de la respuesta Content-type, ingrese application/json y luego seleccione Atrás.

Nota

La sección Cuerpo de esta página debe mostrar los campos de la respuesta, como Cuerpo, Identificación, Nombre, Descripción general y Asunto si se ha analizado correctamente.
Seleccione Crear conector.

El conector debe crearse sin informar errores o advertencias.

Actualización de la aplicación para usar el servicio Azure Cognitive Search: base de conocimientos de campo

Maria ahora puede usar el conector personalizado en la aplicación. Pero primero, hace falta una clave que le otorgue a María los privilegios necesarios para conectarse al servicio Azure Cognitive Search. Preeti obtiene la clave de la página Claves para el servicio en Azure Portal y se la da a María.

Buscar la clave de servicio en Azure Portal.

María edita la aplicación en Power Apps Studio y realiza las siguientes tareas:

Abra la aplicación VanArsdelApp para editarla.
Sobre el menú Vista, seleccione Orígenes de datos y luego seleccione Agregar datos.
En el cuadro Buscar, debajo de Seleccionar un origen de datos, ingrese Van. El conector VanArdelKBConnector debe aparecer en la lista.
Seleccione el conector VanArdelKBConnector. En el panel VanArdelKBConnector, ingrese la clave que Preeti proporcionó para el servicio de búsqueda y luego seleccione Conectar.
En el menú Archivo, guarde y cierre la aplicación, y luego ábrala nuevamente. Es posible que se le solicite que autorice el uso del conector personalizado cuando la aplicación se vuelva a abrir.

Nota

Este paso es necesario para habilitar el conector personalizado.
En el panel Vista de árbol, expanda la pantalla Knowledgebase y seleccione el control TextSearchBox2. Ingrese la siguiente fórmula para la acción OnChange.
```
If(!IsBlank(TextSearchBox2.Text), ClearCollect(azResult, VanArsdelKBConnector.Query({search: TextSearchBox2.Text}).value))
```
Esta fórmula llama a la operación Consulta del conector personalizado buscando elementos que coincidan con el término que el usuario escribe en el cuadro de búsqueda. Los resultados se almacenan en una colección denominada azResult.
En el panel Vista de árbol, bajo la pantalla Knowledgebase, seleccione el control BrowseGallery2. Establezca la propiedad Items en azResult.
Amplíe el control NavegarGalería2 y elimine el control Image4.
Seleccione el control Title2. Configure las siguientes propiedades:
- Texto: ThisItem.Subject
- X: 24
- Ancho: Parent.TemplateWidth - 104
Seleccione el control Subtitle2. Establezca la propiedad Text en ThisItem.Body.
Seleccione F5 para obtener una vista previa de la aplicación. En la pantalla Knowledgebase, escriba un término de búsqueda y, a continuación, seleccione Entrar. Deben mostrarse artículos coincidentes de la base de conocimientos.

Nota

La pantalla de detalles aún no se ha creado, por lo que la selección del icono > junto a un artículo no funciona.
Cierre la ventana de vista previa y vuelva a Power Apps Studio.
En el panel Vista de árbol, haga clic con el botón derecho en la pantalla PartDetails y luego seleccione Duplicar pantalla. Esta acción agregará otra pantalla a la aplicación, llamada PartDetails_1.
En el panel Vista de árbol, cambie el nombre de la pantalla PartDetails_1 como KnowledgebaseDetails.

Seleccione el control LblAppNameX en la pantalla; establezca la propiedad Texto en "Detalles del artículo" (incluidas las comillas).
En el panel Vista de árbol, seleccione el control DetailFormX en la pantalla. Configure las siguientes propiedades:
- Origen de datos: azResult
- Artículo: BrowseGallery2.Selected
Nota

BrowseGallery2 es la galería de exploración en la pantalla Base de conocimientos. En su aplicación, esta galería puede tener un nombre diferente.
En el panel Vista de árbol, expanda el formulario DetailFormX y luego cambie los nombres de los siguientes controles de tarjeta de datos:
- Name_DataCard1_1: Name_DataCard
- CategoryID_DataCard1_1: Subject_DataCard
- Overview_DataCard1_1: Overview_DataCard
- Price_DataCard1_1: Body_DataCard
Elimine los controles NumberInStock_DataCard1_1 e Imagen_DataCard1_1.
Seleccione el control Name_DataCard. Establezca la propiedad Default en ThisItem.Name.
Seleccione el control Subject_DataCard. Configure las siguientes propiedades:
- DataField: "Subject"
- DisplayName: "Subject"
- Predeterminado: ThisItem.Subject
Seleccione el control Overview_DataCard. Establezca la propiedad Default en ThisItem.Overview.
Seleccione el control Body_DataCard. Configure las siguientes propiedades:
- Campo de datos: "Cuerpo"
- DisplayName: "Cuerpo"
- Predeterminado: ThisItem.Body
Seleccione el control DataCardValueX en el control Body_DataCard. Establezca la propiedad Text en Parent.Default.
Cambie el tamaño de cada uno de los controles de la tarjeta de datos para distribuirlos por la pantalla.
Seleccione la flecha hacia atrás en el encabezado de la pantalla. Cambie la propiedad de acción OnSelect a Navigate(Knowledgebase, ScreenTransition.None).
En el panel Vista de árbol, seleccione la pantalla Knowledgebase y luego seleccione el control BrowseGalleryX. Cambie la propiedad de acción OnSelect a Navigate(KnowledgebaseDetails, ScreenTransition.None). Esta acción muestra la pantalla de detalles del artículo de la base de conocimientos cuando el usuario selecciona el icono > para una entrada en la pantalla de exploración.
Guardar la aplicación.
Seleccione F5 para obtener una vista previa de la aplicación. En la pantalla Knowledgebase, escriba un término de búsqueda y, a continuación, seleccione Entrar. Seleccione un artículo y verifique que se muestren sus detalles. Verifique que el icono Atrás devuelve al usuario a la pantalla de exploración.
Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Maria, Kiana y Preeti han incorporado con éxito la API web y Azure Cognitive Search en la aplicación.

Anterior Siguiente