Capítol 6: Utilitzar l’API web a l’aplicació

La Maria i la Kiana estan a punt per combinar l'aplicació amb l'API web. Tanmateix, abans de fer-ho, decideixen consultar a Preeti, l'administrador d'operacions de TI.

Comprendre els requisits d'administració d'operacions de TI per a l'API web

La Preeti està preocupada perquè l'aplicació i l'API web han de ser segures perquè proporcionen accés a dades confidencials emmagatzemades a les diferents bases de dades. Vol garanties que podrà incloure l'autenticació i l'autorització, per evitar l'accés no desitjat a la informació. La Preeti també és conscient que l'empresa està creixent ràpidament i el volum de dades que implica administrar clients, cites, peces i la Knowledge Base és probable que augmenti exponencialment a curt termini. En conseqüència, vol que la solució sigui escalable.

La Kiana explica a la Preeti que l'API web s'implementa actualment amb el Servei d'aplicació de l'Azure. Aquest servei admet diversos proveïdors d'autenticació, que la Preeti pot configurar amb el portal de l'Azure. La Preeti està especialment interessada en l'Azure Active Directory perquè VanArsdel està mirant de desplegar aquesta forma d'autenticació a molts dels seus altres sistemes corporatius en un futur pròxim.

Configuració de l'autenticació al servei d'aplicacions

El Servei d'aplicacions també proporciona escalabilitat horitzontal i vertical. Si cal, la Preeti pot escalar els recursos disponibles per a l'API web actualitzant el pla del Servei d'aplicacions per a l'aplicació web:

Escalar verticalment el servei d'aplicació.

També pot disposar que el sistema s'escali configurant l'escalat automàtic. El Servei d'aplicacions permet a un administrador d'operacions definir regles d'escalat automàtic que determinen les condicions en què el sistema s'hauria d'escalar en més instàncies quan augmenta la càrrega o es tornen a crear quan baixa la demanda. També pot configurar l'escalat automàtic preventiu que es produeix segons una planificació:

Escalar horitzontalment el servei d'aplicació.

Una part clau de la funció d'un Administrador d'operacions de TI és tenir un ull sobre com poden evolucionar els sistemes i garantir que les estructures de suport admetran futures modificacions i canvis. La Preeti sap que l'API web desenvolupada per la Kiana es podria ampliar i tornar a utilitzar en el futur en altres sistemes de VanArsdel. Ha de poder administrar i controlar la manera en què els desenvolupadors sol·liciten l'ús de l'API web, protegir-lo com a recurs valuós i supervisar-ne l'ús. Per tant, la Preeti decideix protegir l'API web darrere del Servei d'administració de l'API de l'Azure.

L'Administració de l'API proporciona una capa addicional de seguretat a una API web, i permet la supervisió i el control detallats sobre quins clients poden accedir a les operacions. Amb l'Administració de l'API, la Preeti pot administrar l'ús dels recursos i millorar el rendiment dels clients de baixa prioritat per garantir que les aplicacions més greus s'ofereixen amb més rapidesa.

Per obtenir informació sobre els serveis que proporciona l'Administració de l'API, aneu a Quant a l'administració de l'API.

Crear un servei d'administració de l'API

La Preeti ha creat el servei d'administració de l'API a través del portal de l'Azure, seguint els passos següents:

  1. Inicieu la sessió al portal de l'Azure i, a la pàgina inicial, seleccioneu Crea un recurs.

    Pàgina d'inici del portal de l'Azure

  2. Al text Cerca a Marketplace, introduïu el Administració d'API i, a continuació, seleccioneu Retorn.

  3. A la pàgina Administració d'API, seleccioneu Crea.

    Pàgina de creació del servei d'administració de l'API de l'Azure

  4. A la pàgina Crea administració d'API, introduïu els valors següents i, a continuació, seleccioneu Revisa + crea:

    • Subscripció: seleccioneu la subscripció
    • Grup de recursos: webapi_rg (aquest és el mateix grup de recursos que heu creat per al Servei d'aplicacions)
    • Regió: seleccioneu la regió més propera
    • Nom del recurs: introduïu un nom únic per al servei
    • Nom de l'organització: VanArsdel
    • Correu electrònic de l'administrador: itadmin@vanarsdel.com
    • Nivell de preus: Desenvolupador (sense SLA)

    Nota

    No utilitzeu el nivell de preus per a desenvolupadors per a un sistema de producció.

    Pàgina del servei d'administració d'API nou

  5. A la pàgina de validació, seleccioneu Crea i espereu mentre es crea el servei d'administració de l'API.

    Nota

    Pot trigar més de 30 minuts a proveir el servei d'administració de l'API.

Publicar l'API web mitjançant l'administració de l'API

Després de crear el servei d'administració de l'API, la Preeti publica l'API web per fer-lo accessible a altres serveis i aplicacions. Ha fet els passos següents:

  1. Al portal de l'Azure, aneu al Servei d'administració de l'API.

  2. A la pàgina Servei d'administració de l'API, a la subfinestra esquerra, a API, seleccioneu les API:

    Pàgina de Servei d'administració d'API. Seleccionar API.

  3. A la subfinestra Afegeix una nova API, seleccioneu OpenAPI:

    Pàgina de Servei d'administració d'API. Seleccionar OpenAPI.

  4. Al quadre de diàleg Crea a partir d'especificació d'OpenAPI, introduïu els valors següents i, a continuació, seleccioneu Crea:

    • Especificació d'OpenAPI: https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json, on <webapp name> és el nom del Servei d'aplicacions que allotja la vostra API web
    • Nom de visualització: API d'enginyers de camp
    • Nom: field-engineer-api
    • Sufix URL de l'API: Deixar buit
    • URL de base: Utilitza la URL per defecte

    Crear una API a partir de l'especificació OpenAPI.

  5. Quan l'API d'Enginyers de camp s'ha creat, seleccioneu la pestanya Configuració de l'API, definiu l'adreça URL del servei web com a https://<webapp name>.azurewebsites.net i, a continuació, seleccioneu Desa:

    Configurar les opcions d'API.

  6. A la pestanya Prova, seleccioneu l'Obtén l'URL de l'api/cites i, a continuació, seleccioneu Envia:

    Provar l'API GetAppointments.

  7. Verifiqueu que la sol·licitud s'hagi completat correctament (el codi de retorn HTTP és 200 OK) i que retorna un resultat que conté una llista de les cites al cos de resposta:

    Resposta al provar l'API GetAppointments.

Connectar amb l'Administració de l'API des de l'aplicació

La Kiana i la Maria ara poden treballar conjuntament per connectar l'aplicació dissenyada amb el Power Apps a l'API web a través del Servei d'administració de l'API.

La primera tasca és crear un connector personalitzat que l'aplicació utilitzi per comunicar-se amb l'Administració de l'API. Això consisteix a exportar l'API a l'entorn del Power Apps utilitzat per crear l'aplicació, cosa que la Kiana fa de la següent manera:

  1. Al portal de l'Azure, aneu a la pàgina del servei d'administració de que ha creat la Preeti.

  2. A la subfinestra esquerra, a API, seleccioneu API.

  3. Seleccioneu el botó de punts suspensius per a l'aplicació d'enginyers de camp i, a continuació, seleccioneu Exporta.

    Exportar l'API web.

  4. A la subfinestra Exporta l'API, seleccioneu Power Apps i Power Automate:

    Exportar l'API web al Power Apps.

  5. A la subfinestra Exporta l'API al PowerApps, seleccioneu l'entorn del Power Apps en què heu creat l'aplicació prototip (Maria a la imatge següent) i, a continuació, seleccioneu Exporta.

    Exportar a l'entorn del Power Apps de la Maria.

  6. Un cop exportada l'API, seleccioneu l'API d'enginyers de camp. A la pàgina Configuració, desplaceu-vos cap avall a la secció Subscripcions, desactiveu Subscripció necessària i, a continuació, seleccioneu Desa.

    Anul·lar la selecció de subscripció necessària.

L'aplicació prototip utilitza els llibres de l'Excel per a les fonts de dades. Ara que el connector personalitzat de l'API web està disponible, la Maria duu a terme els passos següents per afegir el connector a l'aplicació:

  1. Inicieu la sessió a Power Apps.

  2. A la subfinestra esquerra, expandiu Dades i seleccioneu Connectors personalitzats. S'ha de llistar el connector personalitzat field-engineer-api. Seleccioneu Crea una connexió.

    Crear un connector personalitzat nou.

  3. Al quadre de diàleg field-engineer-api, seleccioneu Crea.

    Crear un connector FieldEngineerAPI.

  4. Quan la connexió s'ha creat, comproveu que apareix a la llista de connexions disponibles.

    Mostrar les connexions disponibles.

  5. A la subfinestra esquerra, seleccioneu Aplicacions, seleccioneu VanArdselApp i, a continuació, seleccioneu Edita.

    Editar l'aplicació VanArsdel.

  6. A la subfinestra esquerra, seleccioneu la pestanya Dades. Seleccioneu Afegeix dades, seleccioneu el botó de punts suspensius per als connectors i, a continuació, seleccioneu Actualitza.

    Actualitzar les fonts de dades.

  7. A la llista de connectors, seleccioneu el connector field-engineer-api.

    Mostrar els connectors.

  8. Al quadre de diàleg field-engineer-api, seleccioneu el connector field-engineer-api.

    Afegir una connexió FieldEngineerAPI.

  9. A la subfinestra Dades, comproveu que es mostra el connector FieldEngineerApi.

    Connexió FieldEngineerAPI afegida

Actualitzar l'aplicació per utilitzar el connector: Administració d'inventari de camp

Ara que s'ha afegit la connexió a l'aplicació, la Maria pot modificar les pantalles per utilitzar-la per substituir els llibres de l'Excel. Això implica treballar mitjançant cada pantalla de manera metòdica i canviar la font de dades. No cal fer cap altre canvi. Comença amb les pantalles BrowseParts i PartDetails, de la següent manera:

  1. A la pantalla inicial de l'aplicació, seleccioneu el botó Peces. Definiu la propietat d'acció OnSelect a la fórmula següent.

    ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());
    
    Navigate(BrowseParts, ScreenTransition.Fade)
    

    La funció ClearCollect crea una nova col·lecció anomenada partsCollection i l'emplena amb les dades que resulten de cridar l'operació getboilerparts a la connexió FieldEngineerAPI.

    Crear la variable partsCollection.

    Nota

    És una bona pràctica recuperar les dades en una col·lecció i fer referència a aquesta col·lecció des de les pantalles que necessiten la informació. Aquest mètode pot desar diferents pantalles executant repetidament la mateixa consulta i cercant les mateixes dades.

  2. Seleccioneu F5 per obtenir una visualització prèvia de l'aplicació.

  3. A la pantalla d'inici, seleccioneu Peces. Aquesta acció crearà la col·lecció partsCollection. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

    Nota

    La finalitat d'aquest pas és permetre-us veure les dades mentre editeu la pantalla BrowseParts en els passos següents.

  4. Seleccioneu el control BrowseGallery1 a la pantalla BrowseParts. A la fórmula de la propietat Elements, substituïu la referència a la font de dades [@Table1] a partsCollection.

    Aquest canvi produeix errors. Això es deu a que els noms dels camps del llibre de treball original de l'Excel utilitzen majúscules (Nom, CategoryID i Informació general), mentre que les propietats retornades al cos de la resposta de l'API web es nomenen en minúscules. Canvieu aquestes referències per utilitzar minúscules. La fórmula s'hauria d'assemblar a la imatge següent.

    SortByColumns(Search(FieldEngineerApi.getapiboilerparts(), TextSearchBox1.Text, "name", "categoryId", "overview"), "name", If(SortDescending1, Descending, Ascending))
    

    Actualitzar la fórmula per la pantalla de navegació.

  5. A la subfinestra Visualització d'arbre, seleccioneu el control IconRefresh1. Canvieu l'acció OnSelect a la fórmula ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts()).

    Nota

    La fórmula original d'aquesta acció crida la funció d'actualització per emplenar les dades mitjançant la connexió amb la font de dades original. No podeu utilitzar Actualitza amb una connexió que executi una funció per recuperar les dades. Per tant, no funcionarà amb FieldEngineerApi.getapiboilerparts(). La solució en aquest pas emplena la col·lecció partsCollection amb les dades més recents.

  6. A la subfinestra visualització en arbre, expandiu el control BrowseGallery1 i seleccioneu el control Body1. Canvieu la propietat Text a ThisItem.overview.

  7. A la subfinestra Visualització d'arbre, seleccioneu el control Subtitle1. Canvieu la propietat Text a ThisItem.categoryId.

  8. A la subfinestra Visualització d'arbre, seleccioneu el control Title. Canvieu la propietat Text a ThisItem.name.

  9. A la subfinestra visualització en arbre, seleccioneu el control DetailForm1 a la pantalla PartDetails. Canvieu la propietat DataSource de [@Table1] a partsCollection.

  10. A la subfinestra Visualització d'arbre, seleccioneu el control Name_DataCard1 a DetailForm1. Canvieu la propietat Per defecte a ThisItem.name.

    Canviar el valor per defecte de la targeta de dades de nom.

  11. Canvieu la propietat Per defecte del control CategoryID_DataCard1 a ThisItem.categoryId.

  12. Canvieu la propietat Per defecte del control Overview_DataCard1 a ThisItem.overview.

  13. Canvieu la propietat Per defecte del control Price_DataCard1 a ThisItem.price.

  14. Canvieu la propietat Per defecte del control NumberInStock_DataCard1 a ThisItem.numberInStock.

  15. Canvieu la propietat Per defecte del control Image_DataCard1 a ThisItem.imageUrl.

  16. A la subfinestra esquerra de la pestanya Dades, feu clic amb el botó dret a la connexió de dades de Taula1 i, a continuació, seleccioneu Suprimeix per suprimir-la de l'aplicació. Aquesta connexió ja no és necessària.

    Suprimir la connexió de la Taula1.

  17. Desa l'aplicació.

    Nota

    Podeu desar ràpidament l'aplicació sense utilitzar el menú Fitxer si seleccioneu Ctrl+S.

  18. Seleccioneu F5 per obtenir una visualització prèvia de l'aplicació. Les pantalles Navega per les peces i Detalls de les peces haurien de funcionar exactament com abans, tret que aquesta vegada estan recuperant dades de la base de dades SQL InventoryDB de l'Azure a través de l'API web, no des d'un fitxer Excel local.

  19. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

Actualitzar l'aplicació per utilitzar el connector: Planificació d'inventari i notes

La Maria continua amb les pantalles BrowseAppointments, AppointmentDetails i EditAppointment. Les dades presentades per aquestes pantalles s'originen actualment a la taula Cites d'un altre llibre de treball de l'Excel.

  1. A la pantalla Inici de l'aplicació, definiu l'acció OnVisible en la fórmula següent.

    ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime))
    

    Aquesta fórmula recupera dades de les cites a la col·lecció appointmentsCollection. Les cites es filtren per recuperar les visites planificades en o després de la data actual.

  2. Seleccioneu el control d'etiqueta que visualitza l'hora de la cita següent. Definiu la propietat Text en Text(First(appointmentsCollection).startDateTime,ShortTime24).

  3. Seleccioneu el control d'etiqueta que visualitza la data de la cita següent. Definiu la propietat Text en Text(First(appointmentsCollection).startDateTime,LongDate).

  4. Seleccioneu el control d'etiqueta que visualitza la data de la cita següent. Definiu la propietat Text en First(appointmentsCollection).customer.name.

  5. Seleccioneu F5 per obtenir una visualització prèvia de l'aplicació. A la pantalla d'inici, seleccioneu Cites. Aquesta acció crearà la col·lecció appointmentsCollection. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

  6. A la subfinestra visualització en arbre, seleccioneu el control BrowseAppointmentsGallery a la pantalla BrowseAppointments. Canvieu la fórmula de la propietat Elements per la fórmula següent.

    Sort(Filter(appointmentsCollection, StartsWith(customer.name, TextSearchBox1\_1.Text)), startDateTime)
    

    Aquesta fórmula filtra les dades visualitzades a la pantalla per nom del client, la qual cosa permet a l'usuari introduir el nom d'un client. Les cites es mostren ordenades per data i hora.

  7. A la subfinestra Visualització en arbre, expandiu el control BrowseAppointmentsGallery i seleccioneu el control Title1_1. Canvieu la propietat Text per la següent.

    Text(ThisItem.startDateTime, LongDate)
    

    Aquesta fórmula mostra la part de data del camp startDateTime per a la cita.

  8. A la subfinestra Visualització en arbre, expandiu el control BrowseAppointmentsGallery i seleccioneu el control Subtitle1_1. Canvieu la propietat Text per la següent.

    Text(ThisItem.startDateTime, ShortTime24)
    

Aquesta fórmula mostra l'element d'hora del camp startDateTime.

  1. A la subfinestra Visualització en arbre, expandiu el control BrowseAppointmentsGallery i seleccioneu el control Body1_1. Canvieu la propietat Text per la següent.

    ThisItem.customer.name
    
  2. A la subfinestra visualització en arbre, seleccioneu el control IconRefresh_1 a la pantalla BrowseAppointments. Definiu l'acció OnSelect a la fórmula següent.

    ClearCollect(appointmentsCollection, Sort(Filter(FieldEngineerAPI.getapiappointments(), DateDiff(Today(), startDateTime) >= 0), startDateTime));
    
  3. A la subfinestra Visualització en arbre, expandiu la pantalla AppointmentDetails i seleccioneu el control DetailForm1_1. Definiu la propietat DataSource en appointmentsCollection.

  4. A la subfinestra Visualització d'arbre, seleccioneu el control IconEdit1. Modifiqueu la fórmula a la propietat DisplayMode per provar la col·lecció appoinmentsCollection.

    If(DataSourceInfo(**appointmentsCollection**, DataSourceInfo.EditPermission), DisplayMode.Edit, DisplayMode.Disabled)
    
  5. A la subfinestra Visualització en arbre, expandiu la pantalla DetailForm1_1 i seleccioneu el control Customer Name1_DataCard1. Canvieu la propietat Per defecte a ThisItem.customer.name.

  6. Canvieu les propietats per defecte de les targetes de dades restants de la següent manera:

    • Customer Address_DataCard1: ThisItem.customer.address
    • Contact Number_DataCard1: ThisItem.customer.contactNumber
    • Problem Details_DataCard1: ThisItem.problemDetails
    • Status_DataCard1: ThisItem.appointmentStatus.statusName
    • Notes_DataCard1: ThisItem.notes
    • Image_DataCard1_1: ThisItem.imageUrl
  7. A la subfinestra Visualització en arbre, expandiu la pantalla EditAppointment i seleccioneu el control EditForm1. Definiu la propietat DataSource en appointmentsCollection.

  8. A la subfinestra Visualització en arbre, expandiu el control EditForm1 i seleccioneu el control Customer Name_DataCard03. Canvieu la propietat Per defecte a ThisItem.customer.name.

  9. Canvieu les propietats per defecte de les targetes de dades restants de la següent manera:

  • Contact Number_DataCard2: ThisItem.customer.contactNumber; a més, canvieu la propietat MaxLength per 20
  • Problem Details_DataCard2: ThisItem.problemDetails
  • Status_DataCard5: ThisItem.appointmentStatus.statusName
  • Notes_DataCard3: ThisItem.notes
  • Image_DataCard2: ThisItem.imageUrl
  1. A la subfinestra Visualització en arbre, expandiu el control Problem Details_Card2. Canvieu el nom del camp DataCardValueX (X serà un nombre) d'aquest control a ProblemDetailsValue. Repetiu aquest procés per als controls DataCardValueX a les targetes de dades següents:

    • Status_DataCard5: StatusValue
    • Notes_DataCard3: NotesValue

    Nota

    El control Imatge es tractarà al capítol següent.

  2. Seleccioneu ProblemDetailsValue i definiu la propietat MaxLength en 100.

  3. A la subfinestra Visualització en arbre, seleccioneu el control IconAccept1 i a la pantalla EditAppointment. Definiu la propietat d'acció OnSelect a la fórmula següent.

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

    Aquesta fórmula crida l'operació PUT per al controlador de cites a l'API web. Passa l'identificador de cita de la cita actual com a primer paràmetre i seguidament els detalls que l'usuari podria haver modificat a la pantalla. Els detalls es passen com a objecte JSON. Les declaracions Suprimeix, Defineix i Recopila actualitzen la col·lecció appointmentsCollection amb les dades desades a la base de dades.

    Nota

    No utilitzeu la funció ClearCollect per suprimir i actualitzar tota la col·lecció en situacions com aquesta, perquè seria malgastar el temps si, per exemple, només s'ha canviat un registre.

  4. A la subfinestra Visualització en arbre, seleccioneu el control IconAccept1 i a la pantalla EditAppointment. Definiu la propietat d'acció OnSelect al següent.

    ResetForm(EditForm1);
    
    Navigate(AppointmentDetails, ScreenTransition.None);
    
  5. A la subfinestra esquerra de la pestanya Dades, feu clic amb el botó dret a la connexió de dades de Appointments i, a continuació, seleccioneu Suprimeix per suprimir-la de l'aplicació.

  6. Desa l'aplicació.

  7. Seleccioneu F5 per obtenir una visualització prèvia de l'aplicació. A la pantalla Inici, aneu a la pantalla Cites, seleccioneu i editeu una cita i, a continuació, deseu els canvis. Verifiqueu que s'hagi actualitzat la cita.

  8. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

Crear el servei de cerca cognitiva de l'Azure per a la Knowledge Base de camp

La pantalla KnowledgeBase de l'aplicació no s'adjunta actualment a cap font de dades. L'API web inclou operacions de la Knowledge Base per consultar i actualitzar les taules Tips, BoilerParts i Engineers a la base de dades KnowledgeDB. Tanmateix, la pantalla Consulta de l'aplicació té com a finalitat donar suport a les cerques fetes en totes aquestes taules. És probable que el volum de dades d'aquestes taules augmenti ràpidament, de manera que, a la Maria i la Preeti decideixen implementar la Cerca cognitiva de l'Azure per donar suport a aquesta característica. Una aplicació pot enviar consultes i rebre resultats de la Cerca cognitiva de l'Azure a través d'un connector personalitzat.

La Cerca cognitiva de l'Azure funciona millor si les dades on s'han de fer cerques es troben en una única entitat de base de dades. La Kiana crea una visualització a la base de dades KnowledgeDB que presenta una visualització unificada de les taules Consells, BoilerParts i Enginyers, de la següent manera:

  1. Al portal de l'Azure, aneu a la pàgina de la base de dades SQL KnowledgeDB.

  2. A la subfinestra esquerra, seleccioneu Editor de consultes i inicieu sessió a la base de dades com a sqladmin, amb la contrasenya Pa55w.rd.

    Iniciar sessió a la base de dades de l'Azure SQL.

  3. A la finestra de consulta, introduïu la declaració següent i seleccioneu Executa.

    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
    

    Crear la visualització "Coneixement"

    Comproveu que la visualització Coneixement s'ha creat correctament.

  4. A la subfinestra esquerra, seleccioneu Cadenes de connexió. Anoteu la cadena de connexió ADO.NET; la necessitareu quan configureu la Cerca cognitiva de l'Azure.

    Cadena de connexió ADO.NET de la base de dades KnowledgeDB.

Junt amb Kiana, la Preeti configura una nova instància del servei de cerca cognitiva de l'Azure per fer cerques a les files a la visualització de coneixement, de la següent manera:

  1. A la pàgina inicial, al portal de l'Azure, seleccioneu + Crear un recurs, introduïu Cerca cognitiva de l'Azure, seleccioneu Retorn i, a continuació, seleccioneu Crea.

    Crear el servei de cerca cognitiva de l'Azure.

  2. A la pàgina Nou servei de cerca, introduïu els valors següents i, a continuació, seleccioneu Revisa + crea:

    • Subscripció: seleccioneu la subscripció de l'Azure
    • Grup de recursos: webapi_rg
    • Nom del servei: introduïu un nom únic per al servei
    • Nom de la ubicació: seleccioneu la regió més propera
    • Nivell de preus: gratuït
  3. A la pàgina de validació, seleccioneu Crea i espereu mentre es proveeix el servei.

  4. Aneu a la pàgina del nou servei de cerca, seleccioneu Informació general, anoteu l'adreça URL (la necessitareu més endavant quan creeu el connector personalitzat del Power Apps) i seleccioneu Importa les dades.

    Pàgina d'informació general del servei de cerca

  5. A la pàgina Importació de dades, al quadre de llista desplegable Font de dades, seleccioneu Base de dades SQL de l'Azure.

    Seleccionar la base de dades l'Azure SQL.

  6. A la pàgina Connecta a les dades, especifiqueu la configuració següent:

    • Font de dades: Base de dades SQL de l'Azure
    • Nom de la font de dades: knowledgebase
    • Cadena de connexió: introduïu la cadena de connexió de la base de dades SQL de l'Azure per a la base de dades KnowledgDB que heu registrat abans; en aquesta cadena, assegureu-vos d'establir la contrasenya com a Pa55w.rd
    • Deixeu els camps Identificador d'usuari i Contrasenya en els seus valors per defecte; aquests elements es recuperen de la cadena de connexió
  7. Seleccioneu Prova la connexió. Assegureu-vos que la prova s'ha completat correctament, seleccioneu [Coneixements] al quadre de llista desplegable Taula/Visualització i, a continuació, seleccioneu Següent: afegeix habilitats cognitives (opcional).

    Especificar la visualització de cerca.

  8. A la pàgina Afegeix coneixements cognitius (opcional), seleccioneu Ometre per: Personalitzar l'índex de destinació.

  9. A la pàgina Personalitza l'índex de destinació, seleccioneu Recuperable per a totes les columnes i Cerques per a tema, Cos, Nom i Informació general. Seleccioneu Següent: crear un indexador.

    Personalitzar l'índex de destinació.

  10. A la pàgina Crea un indexador, canvieu el nom de l'indexador per knowledgebase-indexer. Per a la planificació, seleccioneu Hora, definiu la columna de marca d'aigua alta en Id. i, a continuació, seleccioneu Envia:

    Crear l'indexador.

  11. Per provar l'indexador, a la pàgina Informació general del servei de cerca, seleccioneu Explorador de cerca:

    Seleccionar l'explorador de cerca.

  12. Al camp de cadena de consulta, introduïu una paraula per cercar a la Knowledge Base i, a continuació, seleccioneu Cerca. El servei de cerca hauria de generar una llista de documents amb una coincidència als camps Tema, Cos, Nom o Informació general i visualitzeu-los a la subfinestra Resultats. Anoteu l'adreça URL de sol·licitud i els resultats d'exemple; necessitareu aquests elements més endavant com a sol·licitud i resposta d'exemple quan configureu el connector personalitzat del Power Apps.

    Resultats de la consulta de cerca

Crear el connector personalitzat per al servei de cerca cognitiva de l'Azure

Ara, la Kiana pot crear un connector personalitzat que el Power Apps utilitzi per enviar sol·licituds de cerca al servei de cerca. Ho fa amb el Power Apps Studio, de la següent manera:

  1. Inicieu la sessió a Power Apps.

  2. A la subfinestra esquerra, expandiu Dades i seleccioneu Connectors personalitzats. A la subfinestra dreta, seleccioneu + Connector personalitzat nou i, a continuació, seleccioneu Crea des de zero:

    Connector personalitzat nou

  3. Al quadre de diàleg Crea des de zero, definiu el nom del connector nou com a VanArsdelKBConnector i, a continuació, seleccioneu Continua:

    Crear un connector de Knowledge Base.

  4. A la pàgina Informació general, introduïu una descripció i definiu Esquema com a HTTPS. Al quadre Amfitrions, introduïu l'adreça URL del servei de cerca (heu especificat aquesta adreça URL abans), però sense el prefix https:// i, a continuació, seleccioneu Seguretat.

    Pàgina general del connector del servei de cerca

  5. A la pàgina Seguretat, al quadre de llista desplegable Autenticació, seleccioneu Clau de l'API. Al camp Etiqueta de paràmetre, introduïu api-key. Al camp Nom de paràmetre, introduïu api-key. Seleccioneu Definició.

    Pàgina de seguretat del connector del servei de cerca

  6. A la pàgina Definició, seleccioneu Acció nova. Al camp Resum, introduïu Consulta. Al camp Descripció, introduïu Consulta a la Knowledge Base. Al camp ID d'operació, introduïu Consulta. A Sol·licitud, seleccioneu + Importació a partir d'exemple.

    Pàgina de definició del connector del servei de cerca

  7. Al quadre de diàleg Importa d'exemple, introduïu els valors següents i, a continuació, seleccioneu Importa:

    • Verb: GET
    • URL: proporcioneu l'adreça URL de sol·licitud d'exemple que heu especificat en provar el servei de cerca a l'Explorador de cerca abans
    • Capçaleres: Tipus de contingut

    Importar definició de la sol·licitud d'exemple.

  8. Torneu a la pàgina Definició, desplaceu-vos cap avall a la secció Consulta, seleccioneu el botó de punts suspensius situat al costat de la cerca i, a continuació, seleccioneu Edita.

    Editar la definició de la sol·licitud de cerca.

  9. A la pantalla d'edició, a la secció Paràmetres, al camp Valor per defecte, introduïu un asterisc (*). Deixeu els altres camps en els seus valors per defecte i, a continuació, seleccioneu _ Enrere.

    Definir el valor per defecte de la cerca.

  10. A la pàgina Definició, a la secció Consulta, seleccioneu el botó de punts suspensius situat al costat de api-version i, a continuació, seleccioneu Edita.

    Editar la versió de l'API.

  11. A la pantalla d'edició, a la secció Paràmetres, al camp Valor per defecte, introduïu 2020-06-30-Preview (aquesta és la versió associada amb la versió actual de la Cerca cognitiva de l'Azure; podeu veure la versió a l'adreça URL de la sol·licitud que heu especificat abans). Definiu És necessari en i Visibilitat en intern. Deixeu la resta de camps en els seus valors per defecte i, a continuació, seleccioneu Enrere.

    Definir els valors de l'API per als paràmetres de cerca.

  12. A la pàgina Definició, desplaceu-vos cap avall a la secció Resposta i seleccioneu + Afegeix resposta per defecte.

    Afegir la definició de la resposta per defecte.]

  13. Al quadre de diàleg Importació des d'exemple, al camp Capçaleres, introduïu el text Tipus de contingut. Al camp Cos, introduïu els resultats d'exemple que heu enregistrat en provar el servei de cerca i, a continuació, seleccioneu Importa.

    Importar el missatge de resposta d'un exemple.

  14. A la pàgina Definició, seleccioneu la resposta per defecte.

    Seleccionar la resposta per defecte.

  15. Al camp Descripció de la resposta de Tipus de contingut, introduïu application/json i, a continuació, seleccioneu Enrere.

    Definir el contingut de la capçalera del missatge de resposta.

    Nota

    La secció Cos d'aquesta pàgina ha de mostrar els camps de la resposta, com ara Cos, Id, Nom, Informació general i Tema si s'ha analitzat correctament.

  16. Seleccioneu Crea un connector.

    Crear el connector de cerca cognitiva de l'Azure.

El connector s'hauria de crear sense generar informes d'errors ni advertiments.

Actualitzar l'aplicació per utilitzar la cerca cognitiva de l'Azure: Knowledgebase de camp

Ara la Maria pot utilitzar el connector personalitzat a l'aplicació. Però primer necessita una clau que li atorgui els privilegis necessaris per connectar-se al servei de cerca cognitiva de l'Azure. La Preeti obté la clau de la pàgina Claus del servei al portal de l'Azure i la proporciona a la Maria.

Clau del servei de cerca al portal de l'Azure

La Maria edita l'aplicació al Power Apps Studio i realitza les tasques següents:

  1. Obriu l'aplicació VanArsdelApp per editar-la.

  2. Al menú Visualització, seleccioneu Fonts de dades i, a continuació, seleccioneu Afegeix dades.

    Afegir la font de dades a l'aplicació.

  3. Al quadre Cerca, a Seleccioneu una font de dades, introduïu Van. S'ha de llistar el connector VanArdelKBConnector.

    Cercar el connector de cerca cognitiva de l'Azure.

  4. Seleccioneu el connector VanArdelKBConnector. A la subfinestra VanArdelKBConnector, introduïu la clau que la Preeti va proporcionar per al servei de cerca i, a continuació, seleccioneu Connecta.

    Introduir la clau de l'API.

  5. Al menú Fitxer, deseu i tanqueu l'aplicació i, a continuació, torneu a obrir-la. Quan l'aplicació es torna a obrir, pot ser que se us demani que autoritzeu l'ús del connector personalitzat.

    Nota

    Aquest pas és necessari per habilitar el connector personalitzat.

  6. A la subfinestra Visualització en arbre, expandiu la pantalla Knowledgebase i seleccioneu el control TextSearchBox2. Introduïu la fórmula següent per a l'acció OnChange.

    If(!IsBlank(TextSearchBox2.Text), ClearCollect(azResult, VanArsdelKBConnector.Query({search: TextSearchBox2.Text}).value))
    

    Aquesta fórmula crida l'operació de consulta del connector personalitzat que cerca elements que coincideixin amb el terme que l'usuari escriu al quadre de cerca. Els resultats s'emmagatzemen en una col·lecció anomenada azResult.

  7. A la subfinestra Visualització en arbre, a la pantalla Knowledgebase, seleccioneu el control BrowseGallery2. Definiu la propietat Elements en azResult.

  8. Expandiu el control BrowseControl2 i suprimiu el control Image4.

  9. Seleccioneu el control Title2. Definiu les propietats següents:

    • Text: ThisItem.Subject
    • X: 24
    • Width: Parent.TemplateWidth - 104
  10. Seleccioneu el control Subtitle2. Definiu la propietat Text a ThisItem.Body.

  11. Seleccioneu F5 per obtenir una visualització prèvia de l'aplicació. A la pantalla Knowledgebase, introduïu un terme que voleu cercar i, a continuació, premeu la tecla Retorn. S'han de mostrar els articles coincidents de la Knowledge Base.

    Consulta de la KnowledgeBase a l'aplicació

    Nota

    Encara no s'ha creat la pantalla de detalls, per la qual cosa la selecció de la icona > al costat d'un article no funciona.

  12. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

  13. A la subfinestra de visualització en arbre, feu clic amb el botó dret a la pantalla PartDetails i, a continuació, seleccioneu Duplica la pantalla. Aquesta acció afegirà una altra pantalla a l'aplicació, anomenada PartDetails_1.

    Duplicar la pantalla PartDetails.

  14. A la subfinestra visualització en arbre, canvieu el nom de la pantalla PartDetails_1 per KnowledgebaseDetails.

    Seleccioneu el control LblAppNameX a la pantalla, definiu la propietat Text com a "Detalls de l'article" (incloent-hi les cometes).

  15. A la subfinestra Visualització en arbre, seleccioneu el control DetailFormX a la pantalla. Definiu les propietats següents:

    • DataSource: azResult
    • Item: BrowseGallery2.Selected

    Nota

    BrowseGallery2 és la galeria de navegació de la pantalla Knowledgebase. A l'aplicació, aquesta galeria pot tenir un nom diferent.

  16. A la subfinestra Visualització en arbre, expandiu el formulari DetailFormX i canvieu els noms dels següents controls de targeta de dades:

    • Name_DataCard1_1: Name_DataCard
    • CategoryID_DataCard1_1: Subject_DataCard
    • Overview_DataCard1_1: Overview_DataCard
    • Price_DataCard1_1: Body_DataCard
  17. Suprimiu els controls NumberInStock_DataCard1_1 i Image_DataCard1_1.

  18. Seleccioneu el control Name_DataCard. Definiu la propietat Per defecte a ThisItem.Name.

  19. Seleccioneu el control Subject_DataCard. Definiu les propietats següents:

    • DataField: "Subject"
    • DisplayName: "Subject"
    • Default: ThisItem.Subject
  20. Seleccioneu el control Overview_DataCard. Definiu la propietat Per defecte a ThisItem.Overview.

  21. Seleccioneu el control Body_DataCard. Definiu les propietats següents:

    • DataField: "Body"
    • DisplayName: "Body"
    • Default: ThisItem.Body
  22. Seleccioneu el control DataCardValueX al control Body_DataCard. Definiu la propietat Text a Parent.Default.

  23. Canviar la mida de cadascun dels controls de targeta de dades per propagar-los per la pantalla.

    La pantalla ArticleDetails

  24. Seleccioneu la fletxa enrere de la capçalera de pantalla. Canvieu la propietat d'acció OnSelect per Navigate(Knowledgebase, ScreenTransition.None).

  25. A la subfinestra Visualització en arbre, seleccioneu la pantalla Knowledgebase i, a continuació, seleccioneu el control BrowseGalleryX. Canvieu la propietat d'acció OnSelect per Navigate(KnowledgebaseDetails, ScreenTransition.None). Aquesta acció mostra la pantalla de detalls de l'article de la Knowledge Base quan l'usuari selecciona la icona > per a una entrada a la pantalla de navegació.

  26. Desa l'aplicació.

  27. Seleccioneu F5 per obtenir una visualització prèvia de l'aplicació. A la pantalla Knowledgebase, introduïu un terme que voleu cercar i, a continuació, premeu la tecla Retorn. Seleccioneu un article i verifiqueu que es visualitzen els detalls. Verifiqueu que la icona Enrere torni l'usuari a la pantalla de navegació.

  28. Tanqueu la finestra de visualització prèvia i torneu al Power Apps Studio.

La Maria, la Kiana i la Preeti han incorporat correctament l'API web i la Cerca cognitiva de l'Azure a l'aplicació.