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

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 Operations Manager de TI.

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

Preeti se preocupa de que la aplicación y la API web deben ser seguras porque proporcionan access a los datos confidenciales almacenados en las distintas bases de datos. Preeti quiere asegurarse de que la autenticación y la autorización se incluirán para evitar acceso no autorizado 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 implicados en la administración de clientes, citas, piezas y la knowledge base aumente exponencialmente a corto plazo. En consecuencia, la solución debe ser escalable.

Kiana explica a Preeti que la API web se implementa actualmente con Azure App Service. Este servicio admite una serie de 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 próximo.

Configuración de autenticación de App Service.

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

Aumento de la escala vertical de App Service.

Preeti también puede organizar la ampliación del sistema configurando el escalado automático. App Service permite a un administrador de operaciones definir reglas de escalado automático que determinan las condiciones en las que el sistema debe ampliarse en más instancias cuando aumenta la carga, o reducirse a medida que disminuye la demanda. 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 una Operations Manager de TI es tener en cuenta cómo pueden evolucionar los sistemas y asegurarse de que las estructuras de soporte subyacente controlará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, así como que habilita una supervisión detallada y el control sobre qué clientes pueden acceder a qué operaciones. Con API Management, Preeti puede administrar el uso de los recursos y limitar el rendimiento de los clientes de prioridad baja para asegurarse de que las aplicaciones críticas de mayor prioridad se aprotejan más rápidamente.

Para obtener información sobre los servicios que proporciona API Management, vaya a Acercación API Management.

Creación de un servicio de API Management

Preeti creó el servicio de administración de API a través del portal de Azure, utilizando los siguientes pasos:

  1. Inicie sesión en el portal Azure y, en la página Home, seleccione Crear un recurso.

    Azure portal Página principal.

  2. En el cuadro de texto Search the MarketPlace, escriba API Management y seleccione Enter.

  3. En la página API Management, seleccione Crear.

    Página de Azure

  4. En la página Crear API Management, escriba los valores siguientes y seleccione Review + create:

    • Suscripción: seleccione la suscripción
    • Grupo de recursos: webapi_rg (este es el mismo grupo de recursos que creó para el 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
    • Correo electrónico del administrador: itadmin@vanarsdel.com
    • Nivel de precios: Desarrollador (sin SLA)

    Nota

    No use el nivel de precios Desarrollador para un sistema de producción.

    Nueva página del servicio de gestión de API.

  5. En la página de validación, seleccione Create y espere mientras se crea el servicio API Management.

    Nota

    El servicio de API Management puede tardar 30 minutos o más en aprovisionarse; sea paciente.

Publicación de la API web a través de API Management

Después de crear el servicio API Management, Preeti publicó la API web para que fuera accesible para otros servicios y aplicaciones mediante los pasos siguientes:

  1. En el portal de Azure, vaya al servicio API Management.

  2. En la página API Management service, en el panel izquierdo de APIs, seleccione APIs:

    página API Management Service. Seleccione API.

  3. En el panel Agregar una nueva API, seleccione OpenAPI:

    página API Management Service. Seleccione OpenAPI.

  4. En el cuadro de diálogo Crear a partir de la especificación OpenAPI, introduzca los siguientes valores y, a continuación, seleccione Crear:

    • Especificación de OpenAPI: https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json, donde <webapp name> es el nombre del App Service que hospeda la 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

    Cree la API a partir de la especificación OpenAPI.

  5. Cuando se haya creado la API de ingeniero de campo, seleccione la pestaña Settings para la API, establezca Web Service URL en https://<webapp name>.azurewebsites.net y, a continuación, seleccione Guardar:

    Configure los valores de API.

  6. En la pestaña Prueba, seleccione URI de API GETAppointments y luego seleccione Enviar:

    Pruebe la API GetAppointments.

  7. 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:

    Respuesta de la prueba de la API GetAppointments.

Conexión a API Management desde la aplicación

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

La primera tarea consiste en crear un conector personalizado que usa la aplicación para comunicarse con API Management. Esto implica exportar la API al entorno de Power Apps que se usa para crear la aplicación, que Kiana hace lo siguiente:

  1. En el portal de Azure, vaya a la página del servicio API Management que creó Preeti.

  2. En el panel izquierdo, en API, seleccione API.

  3. Seleccione el botón de puntos suspensivos para API de ingeniero de campo y luego seleccione Exportar.

    Exporte la API web.

  4. En el panel Export API, seleccione Power Apps y Power Automate:

    Exportar la API web a Power Apps.

  5. En el panel Exportar API a PowerApps, seleccione el entorno de Power Apps en el que creó la aplicación prototipo (Maria en la imagen siguiente) y, a continuación, seleccione Export.

    Exporte al entorno de Power Apps de Maria.

  6. 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.

    Anule la selección de Se requiere suscripción.

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:

  1. Inicie sesión en Power Apps.

  2. 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.

    Cree un nuevo conector personalizado.

  3. En el cuadro de diálogo field-engineer-api, seleccione Crear.

    Cree un conector FieldEngineerAPI.

  4. Cuando se haya creado la conexión, verifique que aparezca en la lista de conexiones disponibles.

    Mostrar las conexiones disponibles.

  5. En el panel izquierdo, seleccione Aplicaciones, seleccione VanArsdelApp y luego seleccione Editar.

    Editar la aplicación VanArsdel.

  6. 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.

    Actualizar orígenes de datos.

  7. En la lista de conectores, seleccione el conector field-engineer-api.

    Ver conectores.

  8. En el cuadro de diálogo field-engineer-api, seleccione el conector field-engineer-api.

    Agregar una conexión FieldEngineerAPI.

  9. En el panel Datos, compruebe que aparezca el conector FieldEngineerApi.

    Conexión FieldEngineerAPI agregada.

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:

  1. 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.

    Crear variable partsCollection.

    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.

  2. Seleccione F5 para obtener una vista previa de la aplicación.

  3. 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.

  4. Seleccione el control BrowseGallery1 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))

    Actualizar la fórmula para la pantalla de exploración.

  5. 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.

  6. En el panel Vista de árbol, expanda el control BrowseGallery1 y seleccione el control Body1. Cambie la propiedad Text a ThisItem.overview.

  7. En el panel Vista de árbol, seleccione el control Subtitle1. Cambie la propiedad Text a ThisItem.categoryId.

  8. En el panel Vista de árbol, seleccione el control Title. Cambie la propiedad Text a ThisItem.name.

  9. En el panel de Vista de árbol, seleccione el control DetailForm1 en la pantalla PartDetails. Cambie la propiedad DataSource de [@Table1] a partsCollection.

  10. En el panel Vista de árbol, seleccione el control NameDataCard1 en DetailForm1. Cambie la propiedad Default a ThisItem.name.

    Cambiar Default para la tarjeta de datos de nombre.

  11. Cambie la propiedad Default del control CategoryIDDataCard1 a ThisItem.categoryId.

  12. Cambie la propiedad Default del control OverviewDataCard1 a ThisItem.overview.

  13. Cambie la propiedad Default del control PriceDataCard1 a ThisItem.price.

  14. Cambie la propiedad Default del control NumberInStockDataCard1 a ThisItem.numberInStock.

  15. Cambie la propiedad Default del control ImagenDataCard1 a ThisItem.imageUrl.

  16. 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.

    Eliminar la conexión Table1.

  17. Guarde la aplicación.

    Nota

    Puede guardar rápidamente la aplicación sin usar el menú Archivo seleccionando Ctrl+S.

  18. Seleccione F5 para obtener una vista previa de la aplicación. Las pantallas Browse Parts y Part Details deben funcionar exactamente igual que antes, excepto esta vez recuperan datos de la base de datos InventoryDB Azure SQL a través de la API web, en lugar de desde un archivo de Excel local.

  19. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Actualización de la aplicación para usar el conector: Programació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.

  1. 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.

  2. Seleccione el control de etiqueta que muestra la hora de la próxima cita. Establezca la propiedad Text en Text(First(appointmentsCollection).startDateTime, ShortTime24).

  3. Seleccione el control de etiqueta que muestra la fecha de la próxima cita. Establezca la propiedad Texto en Text(First(appointmentsCollection).startDateTime, LongDate).

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  1. 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

  2. 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));

  3. En el panel Vista de árbol, expanda la pantalla AppointmentDetails y seleccione el control DetailForm1_1. Establezca la propiedad DataSource en appointmentsCollection.

  4. 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)

  5. 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.

  6. Cambiar las propiedades Default de las tarjetas de datos restantes de la siguiente manera:

    • Address_DataCard1 deI cliente: ThisItem.customer.address
    • Number_DataCard1 del contacto: ThisItem.customer.contactNumber
    • Details_DataCard1 problema: ThisItem.problemDetails
    • Status_DataCard1: ThisItem.appointmentStatus.statusName
    • Notes_DataCard1: ThisItem.notes
    • Image_DataCard1_1: ThisItem.imageUrl

  7. En el panel Vista de árbol, expanda la pantalla EditAppointment y seleccione el control EditForm1. Establezca la propiedad DataSource en appointmentsCollection.

  8. 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.

  9. Cambiar las propiedades Default de las tarjetas de datos restantes de la siguiente manera:

  • Number_DataCard2 del contacto: ThisItem.customer.contactNumber; además, cambie la propiedad MaxLength a 20
  • Details_DataCard2 del problema: ThisItem.problemDetails
  • Status_DataCard5: ThisItem.appointmentStatus.statusName
  • Notes_DataCard3: ThisItem.notes
  • Image_DataCard2: ThisItem.imageUrl

  1. En el panel Vista de árbol, expanda el control Problema Details_Card2. Cambie el nombre de DataCardValueX (X será un número) bajo este control a ProblemDetailsValue. Repita este proceso para los controles DataCardValueX en las siguientes tarjetas de datos:

    • Status_DataCard5: StatusValue
    • Notes_DataCard3: NotesValue

    Nota

    El control de imagen se abordará en el próximo capítulo.

  2. Seleccione ProblemDetailsValue y establezca la propiedad MaxLength en 100.

  3. 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.

  4. 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);

  5. 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.

  6. Guarde la aplicación.

  7. 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.

  8. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Creación del servicio Azure Cognitive Search para la base de conocimiento 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 de 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 se encuentran en una sola 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:

  1. En el portal de Azure, vaya a la página KnowledgeDB SQL Database.

  2. En el panel izquierdo, seleccione Editor de Power Query e inicie sesión en la base de datos como sqladmin, con la contraseña Pa55w.rd.

    Inicie sesión en Azure SQL Database.

  3. 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

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

  4. En el panel izquierdo, seleccione Cadenas de conexión. Anote el ADO.NET cadena de conexión; lo necesitará al configurar Azure Cognitive Search.

    Cadena de conexión ADO.NET para la base de datos KnowledgeDB.

Al trabajar con Kiana, Preeti configura una nueva instancia de Azure Cognitive Search service para realizar búsquedas en filas de la vista Knowledge de la siguiente manera:

  1. En la página Home, en el portal de Azure, seleccione + Crear un recurso, escriba Azure Cognitive Search, seleccione Enter y seleccione Crear.

    Crear Azure Cognitive Search service.

  2. En la página Nuevo Servicio de Búsqueda, introduzca 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

  3. En la página de validación, seleccione Crear y espere mientras se aprovisiona el servicio.

  4. Vaya a la página del nuevo servicio de búsqueda, seleccione Overview, anote el Url (lo necesitará más adelante al crear el conector personalizado para Power Apps) y seleccione Import Data.

    Página de Información General del Servicio de Búsqueda.

  5. En la página Import data, en el cuadro de lista desplegable Data Source, seleccione Azure SQL Database.

    Select Azure SQL Database.

  6. 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: escriba la cadena de conexión de Azure SQL Database de la base de datos KnowledgDB que registró anteriormente; en esta cadena, asegúrese de establecer la contraseña en Pa55w.rd
    • Deje los campos User Id y Password en sus valores predeterminados; estos elementos se recuperan de la cadena de conexión

  7. Seleccione Prueba de 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).

    Especificar la vista de búsqueda.

  8. En la página Agregar habilidades cognitivas (opcional), seleccione Saltar a: personalizar índice de destino.

  9. 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.

    Personalizar el índice de destino.

  10. 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:

    Crear el indexador.

  11. Para probar el indexador, en la página Overview del search service, seleccione Search Explorer:

    Seleccionar el explorador de búsqueda.

  12. En el campo Querystring, escriba una palabra para buscar en el knowledge base y seleccione Search. El search service debe generar una lista de documentos con una coincidencia en el SubjectBody, Name o Overview y mostrarlos en el panel Results. Anote la dirección URL de Request y el ejemplo Results; Necesitará estos elementos más adelante como una solicitud y respuesta de ejemplo al configurar el conector personalizado Power Apps.

    Resultados de la consulta de búsqueda.

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

Kiana ahora puede crear un conector personalizado que Power Apps usa para enviar solicitudes de búsqueda al servicio de búsqueda. Kiana lo hace con Power Apps Studio, como se indica a continuación:

  1. Inicie sesión en Power Apps.

  2. En el panel izquierdo, expanda Datos y seleccione Conectores personalizados. En el panel derecho, seleccione + Nuevo conector personalizado y luego Crear desde cero:

    Nuevo conector personalizado.

  3. En el cuadro de diálogo Crear desde un espacio en blanco, establezca el nuevo nombre del conector en VanArsdelKBConnector y luego seleccione Continuar:

    Crear un conector de knowledgebase.

  4. En la página Información general, ingrese una descripción y establezca el Esquema en HTTPS. En el cuadro Hosts, escriba la dirección URL de su search service (anotó esta dirección URL anteriormente), pero sin el prefijo https:// y seleccione Security.

    Página general del conector de servicio de búsqueda.

  5. 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. Seleccionar Definición.

    Página de seguridad del conector del servicio de búsqueda.

  6. 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.

    Página de definición del conector del servicio de búsqueda.

  7. 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

    Importar la definición desde la solicitud de ejemplo.

  8. 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.

    Editar una definición de solicitud de búsqueda.

  9. 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.

    Establecer el valor predeterminado de búsqueda.

  10. 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.

    Editar la versión de API.

  11. En la pantalla de edición, en la sección Parameters, en el campo Default, escriba 2020-06-30-Preview (esta es la versión asociada a la versión actual de Azure Cognitive Search; puede ver la versión en la dirección 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.

    Establecer los valores de la API para los parámetros de búsqueda.

  12. En la página Definición, desplácese hacia abajo hasta la sección Respuesta y seleccione + Agregar respuesta predeterminada.

    Agregar definición de respuesta predeterminada. ]

  13. En el cuadro de diálogo Importar desde ejemplo, en el campo Encabezados, ingrese el texto Tipo de contenido. En el campo Body, escriba los resultados de ejemplo que registró al probar el search service y, a continuación, seleccione Import.

    Importar el mensaje de respuesta desde un ejemplo.

  14. En la página Definición, seleccione la respuesta predeterminada.

    Seleccionar la respuesta predeterminada.

  15. En el campo Descripción de la respuesta Content-type, ingrese application/json y luego seleccione Atrás.

    Establecer el contenido del encabezado del mensaje de respuesta.

    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.

  16. Seleccione Crear conector.

    Crea el conector de Búsqueda Cognitiva de Azure.

El conector debe crearse sin informar errores o advertencias.

Actualización de la aplicación para usar Azure Cognitive Search: Base de conocimiento de campo

Maria ahora puede usar el conector personalizado en la aplicación. Pero en primer lugar, se requiere una clave que conceda a Maria los privilegios necesarios para conectarse al servicio Azure Cognitive Search. Preeti obtiene la clave de la página Keys del servicio en el portal de Azure y la proporciona a Maria.

Clave del servicio de búsqueda en el portal de Azure.

Maria edita la aplicación en Power Apps Studio y realiza las siguientes tareas:

  1. Abra la aplicación VanArsdelApp para editarla.

  2. Sobre el menú Vista, seleccione Orígenes de datos y luego seleccione Agregar datos.

    Agregar el origen de datos a la aplicación.

  3. En el cuadro Buscar, debajo de Seleccionar un origen de datos, ingrese Van. El conector VanArdelKBConnector debe aparecer en la lista.

    Busca el conector de Azure Cognitive Search.

  4. Seleccione el conector VanArdelKBConnector. En el panel VanArdelKBConnector, escriba la clave proporcionada por Preeti para el search service y, a continuación, seleccione Connect.

    Especifique la clave de API.

  5. 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.

  6. 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.

  7. En el panel Vista de árbol, bajo la pantalla Knowledgebase, seleccione el control BrowseGallery2. Establezca la propiedad Items en azResult.

  8. Amplíe el control NavegarGalería2 y elimine el control Image4.

  9. Seleccione el control Title2. Configure las siguientes propiedades:

    • Texto: ThisItem.Subject
    • X: 24
    • Ancho: Parent.TemplateWidth - 104

  10. Seleccione el control Subtitle2. Establezca la propiedad Text en ThisItem.Body.

  11. 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. Se deben mostrar artículos coincidentes de la knowledge base.

    Consulta de la base de conocimientos en la aplicación.

    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.

  12. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

  13. 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.

    Duplicar la pantalla PartDetails.

  14. 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).

  15. 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.

  16. 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

  17. Elimine los controles NumberInStockDataCard1_1 e ImagenDataCard1_1.

  18. Seleccione el control Name_DataCard. Establezca la propiedad Default en ThisItem.Name.

  19. Seleccione el control Subject_DataCard. Configure las siguientes propiedades:

    • DataField: "Subject"
    • DisplayName: "Subject"
    • Predeterminado: ThisItem.Subject

  20. Seleccione el control Overview_DataCard. Establezca la propiedad Default en ThisItem.Overview.

  21. Seleccione el control Body_DataCard. Configure las siguientes propiedades:

    • Campo de datos: "Cuerpo"
    • DisplayName: "Cuerpo"
    • Predeterminado: ThisItem.Body

  22. Seleccione el control DataCardValueX en el control BodyData_Card. Establezca la propiedad Text en Parent.Default.

  23. Cambie el tamaño de cada uno de los controles de la tarjeta de datos para distribuirlos por la pantalla.

    La pantalla ArticleDetails.

  24. Seleccione la flecha hacia atrás en el encabezado de la pantalla. Cambie la propiedad de acción OnSelect a Navigate(Knowledgebase, ScreenTransition.None).

  25. 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 knowledge base cuando el usuario selecciona el icono de > de una entrada en la pantalla de exploración.

  26. Guarde la aplicación.

  27. 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.

  28. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

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

AnteriorSiguiente

  • Last updated on