Capitolo 6: Utilizzo dell'API Web nell'app

Maria e Kiana sono pronte per combinare l'app e l'API Web. Tuttavia, prima di procedere, decidono di consultare Preeti, il responsabile delle operazioni IT.

Requisiti di gestione delle operazioni IT per l'API Web

Preeti ritiene che l'app e l'API Web debbano essere sicure poiché forniscono l'accesso a dati sensibili archiviati nei vari database. Vuole garanzie che l'autenticazione e l'autorizzazione siano incluse per impedire accessi ingiustificati alle informazioni. Preeti è anche consapevole del fatto che l'azienda è in rapida espansione e che il volume di dati coinvolti nella gestione di clienti, appuntamenti, parti e Knowledge Base probabilmente aumenterà in modo esponenziale a breve termine. Di conseguenza, la soluzione deve essere scalabile.

Kiana spiega a Preeti che l'API Web è attualmente implementata con il servizio app di Azure. Questo servizio supporta una serie di provider di autenticazione che Preeti può configurare utilizzando il portale di Azure. Preeti è particolarmente interessata a Microsoft Entra ID poiché VanArsdel intende implementare questa forma di autenticazione in molti degli altri sistemi dell'azienda nel prossimo futuro.

Il servizio app fornisce anche scalabilità orizzontale e verticale. Se necessario, Preeti può aumentare le risorse disponibili per l'API Web aggiornando il piano di servizio app per l'app Web:

Preeti può inoltre configurare la scalabilità automatica per eseguire la scalabilità orizzontale del sistema. Il servizio app consente a un responsabile delle operazioni di definire le regole di scalabilità automatica che determinano le condizioni in base alle quali il sistema deve eseguire la scalabilità orizzontale in più istanze quando il carico aumenta o ritornare alla scalabilità verticale quando la domanda diminuisce. Preeti può anche configurare la scalabilità automatica preventiva affinché avvenga in base a una pianificazione:

Una parte essenziale del ruolo di un responsabile delle operazioni IT è prevedere come i sistemi potrebbero evolversi e garantire che le strutture di supporto sottostanti gestiscano l'espansione e i cambiamenti futuri. Preeti sa che l'API Web sviluppata da Kiana potrebbe essere estesa e riutilizzata da altri sistemi VanArsdel in futuro. Preeti deve essere in grado di gestire e controllare il modo in cui gli sviluppatori richiedono l'uso dell'API Web, di proteggerla come una risorsa preziosa e di monitorarne l'utilizzo. Pertanto Preeti decide di proteggere l'API Web mediante il servizio Gestione API di Azure.

Gestione API fornisce un ulteriore livello di sicurezza a un'API Web, oltre a consentire un monitoraggio e un controllo dettagliati su quali client possono accedere a quali operazioni. Utilizzando Gestione API, Preeti può gestire l'utilizzo delle risorse e limitare le prestazioni dei client a bassa priorità per garantire che le app essenziali con priorità più alta vengano servite più rapidamente.

Per informazioni sui servizi forniti da Gestione API, vai a Informazioni su Gestione API.

Creazione di un servizio Gestione API

Per creare, come Preeti, il servizio Gestione API tramite il portale di Azure, procedi come segue:

1. Accedi al portale di Azure e, nella pagina Home, seleziona Crea una risorsa.

   

2. Nella casella di testo Cerca nel MarketPlace, immetti Gestione API e premi INVIO.

3. Nella pagina Gestione API, seleziona Crea.

   

4. Nella pagina Crea Gestione API, immetti i seguenti valori e quindi seleziona Esamina + crea:

   • Sottoscrizione: seleziona la sottoscrizione
   • Gruppo di risorse: webapi_rg (è lo stesso gruppo di risorse che hai creato per il servizio app)
   • Area: seleziona l'area più vicina
   • Nome risorsa: immetti un nome univoco per il servizio
   • Nome organizzazione: VanArsdel
   • E-mail amministratore: itadmin@vanarsdel.com
   • Piano tariffario: Sviluppatore (senza contratto di servizio)

   Nota

   Non usare il piano tariffario Sviluppatore per un sistema di produzione.

   

5. Nella pagina di convalida, seleziona Crea e attendi che venga creato il servizio Gestione API.

   Nota

   Il provisioning del servizio Gestione API può richiedere 30 minuti o più.

Pubblicazione dell'API Web tramite Gestione API

Dopo la creazione del servizio Gestione API, Preeti ha pubblicato l'API Web per renderla accessibile ad altri servizi e applicazioni. A questo proposito:

1. Nel portale di Azure, vai al servizio Gestione API.

2. Nella pagina Servizio Gestione API, nel riquadro di sinistra sotto API, seleziona API:

   

3. Nel riquadro Aggiungi nuovo API, seleziona OpenAPI:

   

4. Nell'interazione Crea da specifica OpenAPI, immettere i seguenti valori e quindi selezionare Crea:

   • Specifica OpenAPI: https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json, dove <webapp name> è il nome del servizio app che ospita l'API Web
   • Nome visualizzato: API Field Engineer
   • Nome: field-engineer-api
   • Suffisso URL API: lascia vuoto
   • URL di base: utilizza l'URL predefinito

   

5. Una volta creata l'API Field Engineer, seleziona la scheda Impostazioni per l'API, imposta URL del servizio Web su https://<webapp name>.azurewebsites.net, quindi seleziona Salva:

   

6. Nella scheda Verifica, seleziona API GET/URI appuntamenti e quindi seleziona Invia:

   

7. Verifica che la richiesta abbia esito positivo (il codice HTTP restituito è 200 OK) e che restituisca un risultato contenente un elenco di appuntamenti nel corpo della risposta:

   

Connessione a Gestione API dall'app

Kiana e Maria possono ora collaborare per connettere l'app creata utilizzando Power Apps all'API Web tramite il servizio Gestione API.

La prima attività è creare un connettore personalizzato utilizzato dall'app per comunicare con Gestione API. Ciò comporta l'esportazione dell'API all'ambiente Power Apps utilizzato per creare l'app. Procedi come segue:

1. Nel portale di Azure, accedi alla pagina del servizio Gestione API creata da Preeti.

2. Nel riquadro di sinistra sotto API, seleziona API.

3. Seleziona il pulsante con i puntini di sospensione per l'API Field Engineer, quindi seleziona Esporta.

   

4. Nel riquadro Esporta API, seleziona Power Apps e Power Automate:

   

5. Nel riquadro Esporta API in PowerApps, seleziona l'ambiente Power Apps in cui hai creato l'app prototipo (Maria nell'immagine seguente), quindi seleziona Esporta.

   

6. Dopo l'esportazione dell'API, seleziona l'API Field Engineer. Nella pagina Impostazioni, scorri verso il basso fino alla sezione Sottoscrizioni, deseleziona Sottoscrizione necessaria e quindi seleziona Salva.

   

Il prototipo di app utilizzava cartelle di lavoro di Excel per le origini dati. Ora che il connettore personalizzato per l'API Web è disponibile, Maria aggiunge il connettore all'app. Procedi come segue:

1. Accedere a Power Apps.

2. Nel riquadro a sinistra espandi Dati, quindi seleziona Connettori personalizzati. Il connettore personalizzato field-engineer-api dovrebbe essere elencato. Seleziona Crea connessione.

   

3. Nella finestra di dialogo field-engineer-api, seleziona Crea.

   

4. Quando la connessione è stata creata, verifica che venga visualizzata nell'elenco delle connessioni disponibili.

   

5. Nel riquadro di sinistra, seleziona App, seleziona VanArsdelApp e quindi seleziona Modifica.

   

6. Nel riquadro sinistro, seleziona la scheda Dati. Seleziona Aggiungi dati, il pulsante con i puntini di sospensione per Connettori e quindi Aggiorna.

   

7. Nell'elenco di connettori, seleziona il connettore field-engineer-api.

   

8. Nella finestra di dialogo field-engineer-api, seleziona il connettore field-engineer-api.

   

9. Nel riquadro Dati, verifica che il connettore FieldEngineerApi sia elencato.

   

Aggiornamento dell'app per utilizzare il connettore: Gestione magazzino sul campo

Ora che la connessione è stata aggiunta all'app, Maria può modificare le schermate per utilizzarla per sostituire le cartelle di lavoro di Excel. Ciò implica lavorare metodicamente in ogni schermata e cambiare l'origine dati. Non dovrebbero essere necessarie altre modifiche. Maria inizia con le schermate BrowseParts e PartDetails, come segue:

1. Nella schermata Home dell'app, seleziona il pulsante Parti. Imposta la proprietà azione OnSelect sulla formula seguente.

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

   La funzione ClearCollect crea una nuova raccolta denominata partsCollection e la popola con i dati risultanti dalla chiamata dell'operazione getboilerparts nella connessione FieldEngineerAPI.

   

   Nota

   È buona norma recuperare i dati in una raccolta e fare riferimento a tale raccolta da tutte le schermate che richiedono le informazioni. Questo approccio può impedire a schermate differenti di eseguire ripetutamente la stessa query e di recuperare gli stessi dati.

2. Seleziona F5 per visualizzare l'anteprima dell'app.

3. Nella schermata Home, seleziona Parti. Questa azione creerà la raccolta partsCollection. Chiudi la finestra di anteprima e torna a Power Apps Studio.

   Nota

   Lo scopo di questo passaggio è consentirti di visualizzare i dati mentre modifichi la schermata BrowseParts nei seguenti passaggi.

4. Seleziona il controllo BrowseGallery1 nella schermata BrowseParts. Nella formula per la proprietà Elementi, sostituisci il riferimento all'origine dati [@Table1] con partsCollection.

   Questa modifica comporterà alcuni errori. Questo perché i nomi dei campi nella cartella di lavoro di Excel originale utilizzavano le maiuscole (Nome, CategoryID e Descrizione), mentre le proprietà restituite nel corpo della risposta dell'API Web sono in minuscolo. Modifica questi riferimenti per utilizzare le lettere minuscole. La formula deve risultare come segue.

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

   

5. Nel riquadro Visualizzazione struttura, seleziona il controllo IconRefresh1. Cambia l'azione OnSelect nella formula ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts()).

   Nota

   La formula originale per questa azione chiama la funzione Aggiorna per ripopolare i dati utilizzando la connessione all'origine dati originale. Non puoi usare Aggiorna con una connessione che esegue una funzione per recuperare i dati, quindi non funzionerà con FieldEngineerApi.getapiboilerparts(). La soluzione in questo passaggio ripopola la raccolta partsCollection con i dati più recenti.

6. Nel riquadro Visualizzazione struttura, espandi il controllo BrowseGallery1 e seleziona il controllo Body1. Cambia la proprietà Text in ThisItem.overview.

7. Nel riquadro Visualizzazione struttura, seleziona il controllo Subtitle1. Cambia la proprietà Text in ThisItem.categoryId.

8. Nel riquadro Visualizzazione struttura, seleziona il controllo Title. Cambia la proprietà Text in ThisItem.name.

9. Nel riquadro Visualizzazione struttura, seleziona il controllo DetailForm1 nella schermata PartDetails. Cambia la proprietà DataSource da [@Table1] a partsCollection.

10. Nel riquadro Visualizzazione struttura, seleziona il controllo Name_DataCard1 sotto DetailForm1. Cambia la proprietà Default in ThisItem.name.

    

11. Cambia la proprietà Default del controllo CategoryID_DataCard1 in ThisItem.categoryId.

12. Cambia la proprietà Default del controllo Overview_DataCard1 in ThisItem.overview.

13. Cambia la proprietà Default del controllo Price_DataCard1 in ThisItem.price.

14. Cambia la proprietà Default del controllo NumberInStock_DataCard1 in ThisItem.numberInStock.

15. Cambia la proprietà Default del controllo Image_DataCard1 in ThisItem.imageUrl.

16. Nel riquadro sinistro della scheda Dati, fai clic con il pulsante destro del mouse sulla connessione dati Table1, quindi seleziona Rimuovi per eliminarla dall'app. Questa connessione non è più necessaria.

    

17. Salva l'app.

    Nota

    Puoi salvare rapidamente l'app senza utilizzare il menu File selezionandoCTRL+S.

18. Seleziona F5 per visualizzare l'anteprima dell'app. Le schermate Esplora parti e Dettagli parte dovrebbero funzionare esattamente come prima, tranne che questa volta recuperano i dati dal database SQL di Azure InventoryDB tramite l'API Web, anziché da un file Excel locale.

19. Chiudi la finestra di anteprima e torna a Power Apps Studio.

Aggiornamento dell'app per utilizzare il connettore: Pianificazione e note sul campo

Maria continua con le schermate BrowseAppointments, AppointmentDetails e EditAppointment. I dati presentati da queste schermate provengono attualmente dalla tabella Appuntamenti in un'altra cartella di lavoro di Excel.

1. Nella schermata Home dell'app, imposta l'azione OnVisible sulla seguente formula.

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

   Questa formula recupera i dati degli appuntamenti nella raccolta appointmentsCollection. Gli appuntamenti vengono filtrati per recuperare le visite programmate a partire dalla data corrente.

2. Seleziona il controllo Etichetta che visualizza l'ora dell'appuntamento successivo. Imposta la proprietà Text su Text(First(appointmentsCollection).startDateTime, ShortTime24).

3. Seleziona il controllo Etichetta che visualizza la data dell'appuntamento successivo. Imposta la proprietà Text su Text(First(appointmentsCollection).startDateTime, LongDate).

4. Selezionare il controllo etichetta che visualizza il nome del cliente per l'appuntamento successivo. Imposta la proprietà Text su First(appointmentsCollection).customer.name.

5. Seleziona F5 per visualizzare l'anteprima dell'app. Nella schermata Home, seleziona Appuntamenti. Questa azione creerà la raccolta appointmentsCollection. Chiudi la finestra di anteprima e torna a Power Apps Studio.

6. Nel riquadro Visualizzazione struttura, seleziona il controllo BrowseAppointmentsGallery nella schermata BrowseAppointments. Cambia la formula nella proprietà Elementi nella seguente formula.

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

   Questa formula filtra i dati visualizzati in base al nome del cliente, consentendo all'utente di immettere il nome di un cliente. Gli appuntamenti sono visualizzati nell'ordine della data e dell'ora.

7. Nel riquadro Visualizzazione struttura, espandi il controllo BrowseAppointmentsGallery e seleziona il controllo Title1_1. Cambia la proprietà Text come segue:

   Text(ThisItem.startDateTime, LongDate)
   

   Questa formula visualizza la parte della data del campo startDateTime per l'appuntamento.

8. Nel riquadro Visualizzazione struttura, espandi il controllo BrowseAppointmentsGallery e seleziona il controllo Subtitle1_1. Cambia la proprietà Text come segue:

   Text(ThisItem.startDateTime, ShortTime24)
   

Questa formula mostra l'elemento temporale del campo startDateTime.

9. Nel riquadro Visualizzazione struttura, espandi il controllo BrowseAppointmentsGallery e seleziona il controllo Body1_1. Cambia la proprietà Text come segue:

   ThisItem.customer.name
   

10. Nel riquadro Visualizzazione struttura, seleziona il controllo IconRefresh1_1 nella schermata BrowseAppointments. Imposta l'azione OnSelect sulla formula seguente.

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

11. Nel riquadro Visualizzazione struttura, espandi la schermata AppointmentDetails e seleziona il controllo DetailForm1_1. Imposta la proprietà DataSource su appointmentsCollection.

12. Nel riquadro Visualizzazione struttura, seleziona il controllo IconEdit1. Modifica la formula nella proprietà DisplayMode per testare la raccolta appoinmentsCollection.

    If(DataSourceInfo(**appointmentsCollection**, DataSourceInfo.EditPermission), DisplayMode.Edit, DisplayMode.Disabled)
    

13. Nel riquadro Visualizzazione struttura, espandi la schermata DetailForm1_1 e seleziona il controllo Customer Name_DataCard1. Cambia la proprietà Default in ThisItem.customer.name.

14. Cambia le proprietà Default delle restanti schede dati come segue:

    • 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

15. Nel riquadro Visualizzazione struttura, espandi la schermata EditAppointment e seleziona il controllo EditForm1. Imposta la proprietà DataSource su appointmentsCollection.

16. Nel riquadro Visualizzazione struttura, espandi il controllo EditForm1 e seleziona il controllo Customer Name_DataCard3. Cambia la proprietà Default in ThisItem.customer.name.

17. Cambia le proprietà Default delle restanti schede dati come segue:

• Contact Number_DataCard2: ThisItem.customer.contactNumber; inoltre, imposta la proprietà MaxLength su 20
• Problem Details_DataCard2: ThisItem.problemDetails
• Status_DataCard5: ThisItem.appointmentStatus.statusName
• Notes_DataCard3: ThisItem.notes
• Image_DataCard2: ThisItem.imageUrl

18. Nel riquadro Visualizzazione struttura, espandi il controllo Problem Details_Card2. Rinomina il campo DataCardValueX (X sarà un numero) sotto questo controllo in ProblemDetailsValue. Ripeti questo processo per i controlli DataCardValueX nelle seguenti schede dati:

    • Status_DataCard5: StatusValue
    • Notes_DataCard3: NotesValue

    Nota

    Il controllo Immagine verrà descritto nel prossimo capitolo.

19. Seleziona ProblemDetailsValue, quindi imposta la proprietà MaxLength su 100.

20. Nel riquadro Visualizzazione struttura, seleziona il controllo IconAccept1 nella schermata EditAppointment. Imposta la proprietà azione OnSelect sulla formula seguente.

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

    Questa formula chiama l'operazione PUT per il controller degli appuntamenti nell'API Web. Passa l'ID appuntamento per l'appuntamento corrente come primo parametro, seguito dai dettagli che l'utente potrebbe aver modificato nella schermata. I dettagli vengono passati come oggetto JSON. Le istruzioni Remove, Set e Collect aggiornano la raccolta appointmentsCollection con i dati salvati nel database.

    Nota

    Non usare la funzione ClearCollect per eliminare e aggiornare l'intera raccolta in situazioni come questa, perché sarebbe uno spreco se, ad esempio, viene cambiato solo un record.

21. Nel riquadro Visualizzazione struttura, seleziona il controllo IconAccept1 nella schermata EditAppointment. Imposta la proprietà azione OnSelect su quanto segue.

    ResetForm(EditForm1);
    
    Navigate(AppointmentDetails, ScreenTransition.None);
    

22. Nel riquadro sinistro della scheda Dati, fai clic con il pulsante destro del mouse sulla connessione dati Appuntamenti, quindi seleziona Rimuovi per eliminarla dall'app.

23. Salva l'app.

24. Seleziona F5 per visualizzare l'anteprima dell'app. Nella schermata Home, vai alla schermata Appuntamenti, seleziona e modifica un appuntamento, quindi salva le modifiche. Verifica che l'appuntamento sia stato aggiornato.

25. Chiudi la finestra di anteprima e torna a Power Apps Studio.

Creazione del servizio Ricerca cognitiva di Azure per Knowledge Base sul campo

La schermata Knowledge Base nell'app non è attualmente associata ad alcuna origine dati. L'API Web include operazioni per l'esecuzione di query e l'aggiornamento delle tabelle Suggerimenti, BoilerParts e Tecnici nel database KnowledgeDB. Tuttavia, lo scopo della schermata Query nell'app è supportare le ricerche in tutte queste tabelle. È probabile che il volume di dati in queste tabelle aumenti rapidamente, quindi Maria, Kiana e Preeti decidono di distribuire Ricerca cognitiva di Azure per supportare questa funzionalità. Un'app può inviare query e ricevere risultati da Ricerca cognitiva di Azure tramite un connettore personalizzato.

Ricerca cognitiva di Azure funziona meglio se i dati da cercare sono contenuti in una singola entità di database. Kiana crea una vista nel database KnowledgeDB che presenta una vista unificata delle tabelle Suggerimenti, BoilerParts e Tecnici come segue:

1. Nel portale di Azure, vai alla pagina Database SQL KnowledgeDB.

2. Nel riquadro di sinistra, seleziona Editor di query e accedi al database con sqladmin, utilizzando la password Pa55w.rd.

   

3. Nella finestra delle query, immetti la seguente istruzione e quindi seleziona Esegui.

   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
   

   

   Verifica che la vista Knowledge sia stata creata correttamente.

4. Nel riquadro sinistro, seleziona Stringa di connessione. Prendi nota della stringa di connessione ADO.NET; ne avrai bisogno durante la configurazione di Ricerca cognitiva di Azure.

   

Lavorando con Kiana, Preeti configura una nuova istanza del servizio Ricerca cognitiva di Azure per eseguire ricerche nelle righe della vista Knowledge. Procedi come segue:

1. Nella pagina Homedel portale di Azure, seleziona + Crea una risorsa, immetti Ricerca cognitiva di Azure, premi INVIO e quindi seleziona Crea.

   

2. Nella pagina Nuovo servizio di ricerca, immetti le seguenti impostazioni e seleziona Esamina + crea:

   • Sottoscrizione: seleziona la sottoscrizione Azure
   • Gruppo di risorse: webapi_rg
   • Nome servizio: immettere un nome univoco per il servizio
   • Nome posizione: seleziona l'area più vicina
   • Piano tariffario: Gratuito

3. Nella pagina di convalida, seleziona Crea e attendi che venga eseguito il provisioning del servizio.

4. Vai alla pagina del nuovo servizio di ricerca, seleziona Panoramica, prendi nota dell'Url (sarà necessario in seguito per creare il connettore personalizzato per Power Apps), quindi seleziona Importa dati.

   

5. Nella pagina Importa dati, nella casella di riepilogo a discesa Origine dati, seleziona Database SQL di Azure.

   

6. Nella pagina Connetti ai tuoi dati, specifica le seguenti impostazioni:

   • Origine dati: Database SQL di Azure
   • Nome origine dati: knowledgebase
   • Stringa di connessione: immetti la stringa di connessione del database SQL di Azure per il database KnowledgDB registrato in precedenza; in questa stringa, assicurati di impostare la password su Pa55w.rd
   • Lascia i campi ID utente e Password sui valori predefiniti; questi elementi vengono recuperati dalla stringa di connessione

7. Seleziona Verifica connessione. Assicurati che il test abbia esito positivo, seleziona [Knowledge] nella casella di riepilogo a discesa Tabella/Vista, quindi seleziona Successivo: Aggiungi competenze cognitive (facoltativo).

   

8. Nella pagina Aggiungi competenze cognitive (facoltativo), seleziona Passa a: Personalizza indice di destinazione.

9. Nella pagina Personalizza indice di destinazione, seleziona Recuperabile per tutte le colonne e Ricercabile per Oggetto, Corpo, Nome e Panoramica. Seleziona Successivo: Crea un indicizzatore.

   

10. Nella pagina Crea un indicizzatore, cambia il Nome dell'indicizzatore in knowledgebase-indexer. In Pianifica, seleziona Oraria, imposta Colonna filigrana alta su ID e quindi seleziona Invia:

    

11. Per testare l'indicizzatore, nella pagina Panoramica del servizio di ricerca, seleziona Esplora ricerche:

    

12. Nel campo Stringaquery immetti una parola da cercare nella Knowledge Base, quindi seleziona Cerca. Il servizio di ricerca dovrebbe generare un elenco di documenti con una corrispondenza nei campi Oggetto, Corpo, Nome o Panoramica e visualizzarli nel riquadro Risultati. Prendi nota dell'URL della richiesta e dei Risultati di esempio; avrai bisogno di queste informazioni in seguito come richiesta e risposta di esempio per la configurazione del connettore personalizzato Power Apps.

    

Creazione del connettore personalizzato per il servizio Ricerca cognitiva di Azure

Kiana ora può creare un connettore personalizzato che Power Apps utilizza per inviare richieste di ricerca al servizio di ricerca. A questo proposito, utilizza Power Apps Studio. Procedi come segue:

1. Accedere a Power Apps.

2. Nel riquadro a sinistra espandi Dati, quindi seleziona Connettori personalizzati. Nel riquadro a destra, seleziona + Nuovo connettore personalizzato e quindi Crea da zero.

   

3. Nella finestra di dialogo Crea da zero, imposta il nome del nuovo connettore su VanArsdelKBConnector e quindi seleziona Continua:

   

4. Nella pagina Informazioni generali, immetti una descrizione e imposta Schema su HTTPS. Nella casella Host, immetti l'URL del servizio di ricerca (l'URL annotato in precedenza), ma senza il prefisso https://, quindi seleziona Sicurezza.

   

5. Nella pagina Sicurezza, nella casella di riepilogo a discesa Autenticazione, seleziona Chiave API. Nel campo Etichetta parametro, immetti api-key. Nel campo Nome parametro, immetti api-key. Selezionare Definizione.

   

6. Nella pagina Definizione, seleziona Nuova azione. Nel campo Riepilogo, immetti Query. Nel campo Descrizione, immetti Esegui query su knowledgebase. Nel campo ID operazione, immetti Query. Sotto Richiesta, seleziona + Importa da esempio.

   

7. Nella finestra di dialogo Importa da esempio, immetti i seguenti valori, quindi seleziona Importa:

   • Verbo: GET
   • URL: fornisci l'URL della richiesta di esempio annotata in precedenza durante la verifica del servizio di ricerca in Esplora ricerche
   • Intestazioni: Content-type

   

8. Torna alla pagina Definizione, scorri verso il basso fino alla sezione Query, seleziona il pulsante con i puntini di sospensione accanto a search e quindi seleziona Modifica.

   

9. Nella schermata di modifica, nella sezione Parametri, nel campo Valore predefinito, inserisci un asterisco (*). Lascia gli altri campi sui valori predefiniti e quindi seleziona Indietro.

   

10. Nella pagina Definizione, nella sezione Query, seleziona il pulsante con i puntini di sospensione accanto a api-version e quindi seleziona Modifica.

    

11. Nella schermata di modifica, nella sezione Parametri, nel campo Valore predefinito, immetti 2020-06-30-Preview (questa è la versione associata alla versione corrente di Ricerca cognitiva di Azure; la versione è indicata nell'URL della richiesta annotato in precedenza). Imposta È obbligatorio su Sì e imposta Visibilità su Interno. Lascia gli altri campi sui valori predefiniti e quindi seleziona Indietro.

    

12. Nella pagina Definizione, scorri verso il basso fino alla sezione Risposta e seleziona + Aggiungi risposta predefinita.

    ]

13. Nella finestra di dialogo Importa da esempio, nel campo Intestazioni, immetti il testo Content-type. Nel campo Corpo immetti i risultati di esempio registrati durante il test del servizio di ricerca, quindi seleziona Importa.

    

14. Nella pagina Definizione, seleziona la risposta predefinita.

    

15. Nel campo Descrizione della risposta Content-type, immetti application/json e quindi seleziona Indietro.

    

    Nota

    La sezione Corpo in questa pagina deve visualizzare i campi della risposta, come Corpo, ID, Nome, Panoramica e Oggetto se è stata analizzata con successo.

16. Selezionare Crea connettore.

    

Il connettore deve essere creato senza che vengano segnalati errori o avvisi.

Aggiornamento dell'app per utilizzare Ricerca cognitiva di Azure: Knowledge Base sul campo

Maria ora può utilizzare il connettore personalizzato nell'app. Tuttavia, è dapprima necessaria una chiave che le conceda i privilegi necessari per connettersi al servizio Ricerca cognitiva di Azure. Preeti ottiene la chiave dalla pagina Chiavi del servizio nel portale di Azure e la fornisce a Maria.

Maria modifica l'app in Power Apps Studio. Procedi come segue:

1. Apri l'app VanArsdelApp per la modifica.

2. Nel menu Visualizza, seleziona Origini dati e quindi seleziona Aggiungi dati.

   

3. Nella casella Cerca, sotto Seleziona un'origine dati, immetti Van. Il connettore VanArdelKBConnector dovrebbe essere elencato.

   

4. Seleziona il connettore VanArdelKBConnector. Nel riquadro VanArdelKBConnector, immetti la chiave fornita da Preeti per il servizio di ricerca, quindi seleziona Connetti.

   

5. Nel menu File, salva e chiudi l'app, quindi aprila di nuovo. È possibile che ti venga richiesto di autorizzare l'uso del connettore personalizzato quando l'app viene riaperta.

   Nota

   Questo passaggio è necessario per abilitare il connettore personalizzato.

6. Nel riquadro Visualizzazione struttura, espandi la schermata Knowledge Base e seleziona il controllo TextSearchBox2. Immetti la seguente formula per l'azione OnChange.

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

   Questa formula chiama l'operazione Query del connettore personalizzato alla ricerca di elementi che corrispondono al termine digitato dall'utente nella casella di ricerca. I risultati sono archiviati in una raccolta denominata azResult.

7. Nel riquadro Visualizzazione struttura, sotto la schermata Knowledge Base, seleziona il controllo BrowseGallery2. Imposta la proprietà Elementi su azResult.

8. Espandi il controllo BrowseGallery2 e rimuovi il controllo Image4.

9. Seleziona il controllo Title2. Imposta le proprietà seguenti:

   • Testo: ThisItem.Subject
   • X: 24
   • Larghezza: Parent.TemplateWidth - 104

10. Seleziona il controllo Subtitle2. Imposta la proprietà Text su ThisItem.Body.

11. Seleziona F5 per visualizzare l'anteprima dell'app. Nella schermata Knowledge Base, immetti un termine di ricerca, quindi premi il tasto INVIO. Dovrebbero essere visualizzati articoli corrispondenti presenti nella Knowledge Base.

    

    Nota

    La schermata dei dettagli non è stata ancora creata, quindi la selezione dell'icona > accanto a un articolo non funziona.

12. Chiudi la finestra di anteprima e torna a Power Apps Studio.

13. Nel riquadro Visualizzazione struttura, fai clic con il pulsante destro del mouse sulla schermata PartDetails, quindi seleziona Duplica schermata. Questa azione aggiungerà un'altra schermata all'app, denominata PartDetails_1.

    

14. Nel riquadro Visualizzazione struttura, rinomina la schermata PartDetails_1 in KnowledgebaseDetails.

    Seleziona il controllo LblAppNameX nella schermata; imposta la proprietà Text su "Dettagli articolo" (incluse le virgolette).

15. Nel riquadro Visualizzazione struttura, seleziona il controllo DetailFormX nella schermata. Impostare le proprietà seguenti:

    • DataSource: azResult
    • Elemento: **BrowseGallery2.Selected**

    Nota

    BrowseGallery2 è la raccolta di esplorazione nella schermata Knowledge Base. Nell'applicazione, questa raccolta potrebbe avere un nome diverso.

16. Nel riquadro Visualizzazione struttura, espandi il modulo DetailFormX, quindi modifica i nomi dei seguenti controlli della scheda dati:

    • Name_DataCard1_1: Name_DataCard
    • CategoryID_DataCard1_1: Subject_DataCard
    • Overview_DataCard1_1: Overview_DataCard
    • Price_DataCard1_1: Body_DataCard

17. Elimina i controlli NumberInStock_DataCard1_1 e Image_DataCard1_1.

18. Seleziona il controllo Name_DataCard. Imposta la proprietà Default su ThisItem.Name.

19. Seleziona il controllo Subject_DataCard. Impostare le proprietà seguenti:

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

20. Seleziona il controllo Overview_DataCard. Imposta la proprietà Default su ThisItem.Overview.

21. Seleziona il controllo Body_DataCard. Impostare le proprietà seguenti:

    • DataField: "Body"
    • DisplayName: "Body"
    • Default: ThisItem.Body

22. Seleziona il controllo DataCardValueX nel controllo Body_DataCard. Imposta la proprietà Text su Parent.Default.

23. Ridimensiona ciascuno dei controlli della scheda dati per distribuirli sullo schermo.

    

24. Seleziona la freccia indietro nell'intestazione della schermata. Cambia la proprietà azione OnSelect in Navigate(Knowledgebase, ScreenTransition.None).

25. Nel riquadro Visualizzazione struttura, seleziona la schermata Knowledge Base, quindi seleziona il controllo BrowseGalleryX. Cambia la proprietà azione OnSelect in Navigate(KnowledgebaseDetails, ScreenTransition.None). Questa azione visualizza la schermata dei dettagli per l'articolo della Knowledge Base quando l'utente seleziona l'icona > di una voce nella schermata di esplorazione.

26. Salva l'app.

27. Seleziona F5 per visualizzare l'anteprima dell'app. Nella schermata Knowledge Base, immetti un termine di ricerca, quindi premi il tasto INVIO. Seleziona un articolo e verifica che vengano visualizzati i relativi dettagli. Verifica che l'icona Indietro visualizzi di nuovo la schermata di esplorazione.

28. Chiudi la finestra di anteprima e torna a Power Apps Studio.

Maria, Kiana e Preeti hanno incorporato con successo l'API Web e Ricerca cognitiva di Azure nell'app.

PrecedenteSuccessivo