Freigeben über

6. Kapitel: Verwenden der Web-API in der App

Maria und Kiana sind bereit, die App mit der Web-API zu kombinieren. Bevor sie fortfahren, entscheiden sie sich jedoch, Preeti, den IT Operations Manager, zu konsultieren.

Grundlegendes zu den Anforderungen für das IT-Betriebsmanagement für die Web-API

Preeti befürchtet, dass die App und die Web-API sicher sein müssen, da sie den Zugriff auf vertrauliche Daten ermöglichen, die in den verschiedenen Datenbanken gespeichert sind. Preeti möchte die Zusicherung, dass die Authentifizierung und Autorisierung einbezogen wird, um einen ungerechtfertigten Zugriff auf Informationen zu verhindern. Preeti ist sich auch bewusst, dass das Unternehmen schnell wächst und das Datenvolumen für die Verwaltung von Kunden, Terminen, Teilen und der Wissensdatenbank in naher Zukunft exponentiell zunehmen wird. Folglich muss die Lösung skalierbar sein.

Kiana erklärt Preeti, dass die Web-API derzeit mit Azure App Service implementiert ist. Dieser Dienst unterstützt eine Reihe von Authentifizierungsanbietern, die Preeti über das Azure-Portal konfigurieren kann. Preeti ist besonders an Microsoft Entra ID interessiert, weil VanArsdel diese Form der Authentifizierung in naher Zukunft auf viele seiner anderen Unternehmenssysteme ausweiten möchte.

Konfiguration der App Service-Authentifizierung

App Service bietet auch horizontale und vertikale Skalierbarkeit. Bei Bedarf kann Preeti die für die Web-API verfügbaren Ressourcen erweitern, indem der App Service-Plan für die Web-App aktualisiert wird:

Zentrale Hochskalierung von App Service

Preeti kann auch veranlassen, dass das System durch Konfigurieren der automatischen Skalierung erweitert wird. Mit App Service kann ein Betriebsmanager Regeln für die automatische Skalierung definieren, die die Bedingungen festlegen, unter denen das System bei steigender Last auf mehrere Instanzen erweitert werden soll, oder bei sinkender Nachfrage wieder verringert wird. Preeti kann die vorbeugende automatische Skalierung auch so konfigurieren, dass sie nach einem Zeitplan erfolgt:

Horizontale Skalierung von App Service

Ein wesentlicher Teil der Rolle eines IT-Vorgangsmanagers besteht darin, ein Auge darauf zu haben, wie sich Systeme entwickeln könnten, und sicherzustellen, dass die zugrunde liegenden Supportstrukturen zukünftige Erweiterungen und Änderungen bewältigen. Preeti weiß, dass die von Kiana entwickelte Web-API möglicherweise erweitert und in Zukunft von anderen VanArsdel-Systemen wiederverwendet wird. Preeti muss in der Lage sein, die Art und Weise zu verwalten und zu steuern, in der Entwickler die Verwendung der Web-API anfordern, sie als wertvolle Ressource schützen und ihre Verwendung überwachen. Daher beschließt Preeti, die Web-API hinter dem Azure API-Management-Dienst zu schützen.

Das API-Management bietet eine zusätzliche Sicherheitsebene für eine Web-API und ermöglicht eine detaillierte Überwachung und Steuerung darüber, welche Clients auf welche Vorgänge zugreifen können. Mithilfe der API-Verwaltung kann Preeti die Ressourcennutzung verwalten und die Leistung von Clients mit niedriger Priorität drosseln, um sicherzustellen, dass wichtige Apps mit höherer Priorität schneller gewartet werden.

Informationen zu den von API-Management bereitgestellten Diensten finden Sie unter Informationen zur API-Management.

Erstellen eines API-Management-Dienstes

Preeti hat den API-Management-Dienst mithilfe der folgenden Schritte über das Azure-Portal erstellt:

  1. Wählen Sie sich im Azure-Portal an, und wählen Sie auf der Startseite die Option Ressource erstellen aus.

    Homepage des Azure-Portals

  2. Geben Sie im Feld MarketPlace durchsuchen die Zeichenfolge API-Management ein, und drücken Sie die EINGABETASTE.

  3. Klicken Sie auf der Seite API-Management auf Erstellen.

    Azure – Seite „API-Management-Service erstellen“

  4. Geben Sie auf der Seite API-Management erstellen die folgenden Werte ein, und wählen Sie dann Überprüfen + erstellen ein:

    • Abonnement: Wählen Sie Ihr Abonnement aus
    • Ressourcengruppe: webapi_rg (dies ist dieselbe Ressourcengruppe, die Sie für den App Service erstellt haben.)
    • Region: Wählen Sie die nächstgelegene Region aus
    • Ressourcenname: Geben Sie einen eindeutigen Namen für den Dienst ein
    • Organisationsname: VanArsdel
    • Administrator-E-Mail: itadmin@vanarsdel.com
    • Preisstufe: Entwickler (kein SLA)

    Hinweis

    Verwenden Sie nicht die Entwickler-Preisstufe für ein Produktionssystem.

    Neue Seite „API-Management-Service“

  5. Wählen Sie auf der Validierungsseite die Option Erstellen aus, und warten Sie, bis der API-Management-Dienst erstellt wird.

    Hinweis

    Die Bereitstellung des API-Management-Dienstes kann mindestens 30 Minuten dauern. Seien Sie geduldig.

Veröffentlichen der Web-API über API-Management

Nachdem der API-Management-Dienst erstellt wurde, hat Preeti die Web-API veröffentlicht, um sie anderen Diensten und Anwendungen zugänglich zu machen, indem sie die folgenden Schritte ausgeführt hat:

  1. Wechseln Sie im Azure-Portal zum API-Management-Dienst.

  2. Wählen Sie auf der API-Management-Dienst-Seite im linken Bereich unter APIs die Option APIs aus:

    API-Management-Serviceseite Wählen Sie APIs aus.

  3. Klicken Sie im Bereich Neue API hinzufügen auf OpenAPI:

    API-Management-Serviceseite Wählen Sie OpenAPI.

  4. Geben Sie im Dialogfeld Erstellen aus OpenAPI-Spezifikation die folgenden Werte ein und wählen Sie dann Erstellen aus:

    • OpenAPI-Spezifikation: https://<webapp name>.azurewebsites.net/swagger/v1/swagger.json, wobei <webapp name> der Name des App Service ist, der Ihre Web-API hostet
    • Anzeigename: Außendiensttechniker-API
    • Name: Außendiensttechniker-API
    • API-URL-Suffix: Leer lassen
    • Basis-URL: Verwendung der Standard-URL

    API erstellen aus OpenAPI-Spezifikation.

  5. Wenn die Außendiensttechniker-API erstellt wurde, wählen Sie die Registerkarte Einstellungen für die API aus, legen Sie die Webdienst-URL auf https://<webapp name>.azurewebsites.net fest und wählen Sie Speichern aus:

    Konfigurieren Sie API-Einstellungen.

  6. Wählen Sie auf der Registerkarte Testen GET-Api/Termine-URI und wählen Sie Senden:

    Testen Sie die GetAppointments-API.

  7. Stellen Sie sicher, dass die Anforderung erfolgreich ist (der HTTP-Rückkehrcode lautet 200 OK) und dass ein Ergebnis zurückgegeben wird, das eine Liste von Terminen im Antworttext enthält:

    Antwort vom Test der GetAppointments-API

Herstellen einer Verbindung zu API-Management über die App

Kiana und Maria können jetzt zusammenarbeiten, um die mit Power Apps erstellte App über die Web-API mit dem API-Management-Dienst zu verbinden.

Die erste Aufgabe besteht darin, einen benutzerdefinierten Connector zu erstellen, der von der App für die Kommunikation mit API-Management verwendet wird. Dies beinhaltet das Exportieren der API in die Power Apps-Umgebung zum Erstellen der App, die Kiana wie folgt ausführt:

  1. Wechseln Sie im Azure-Portal zur Seite für den API-Management-Dienst, die Preeti erstellt hat.

  2. Wählen Sie im linken Bereich unter APIs APIs aus.

  3. Wählen Sie die Schaltfläche mit den Auslassungspunkten für Außendiensttechniker-Api und dann Export aus.

    Exportieren Sie die Web-API.

  4. Wählen Sie im Bereich API exportieren Power Apps und Power Automate:

    Exportieren Sie die Web-API nach Power Apps.

  5. Wählen Sie im Bereich API nach PowerApps exportieren die Power Apps-Umgebung aus, in der Sie die Prototyp-App erstellt haben (Maria im folgenden Bild), und wählen Sie dann Exportieren aus.

    Export in Marias Power Apps-Umgebung

  6. Nachdem die API exportiert wurde, wählen Sie die Außendiensttechniker-API aus. Scrollen Sie auf der Einstellungen-Seite nach unten zum Abonnements-Abschnitt, löschen Sie Abonnement erforderlich, und wählen Sie Speichern.

    Aufheben der Auswahl des Abonnement erforderlich

Die Prototyp-App verwendete Excel-Arbeitsmappen als die Datenquellen. Nachdem der benutzerdefinierte Connector für die Web-API verfügbar ist, führt Maria die folgenden Schritte aus, um den Connector der App hinzuzufügen:

  1. Melden Sie sich bei Power Apps an.

  2. Erweitern Sie im linken Bereich die Option Daten, und wählen Sie dann Benutzerdefinierte Connectors aus. Der benutzerdefinierte Connector field-engineer-api sollte aufgelistet sein. Wählen Sie Verbindung erstellen aus.

    Erstellen Sie einen neuen benutzerdefinierten Connector.

  3. Wählen Sie im Dialog field-engineer-api Erstellen aus.

    Erstellen Sie einen FieldEngineerAPI-Connector.

  4. Stellen Sie nach dem Erstellen der Verbindung sicher, dass sie in der Liste der verfügbaren Verbindungen angezeigt wird.

    Zeigen Sie verfügbare Verbindungen an.

  5. Wählen Sie im linken Bereich Apps aus, wählen Sie VanArsdelApp und dann Bearbeiten.

    Bearbeiten Sie die VanArsdel-App.

  6. Wählen Sie im linken Bereich die Registerkarte Daten. Wählen Sie Daten hinzufügen, die Schaltfläche mit den Auslassungspunkten für Connectors und dann Aktualisieren.

    Aktualisieren Sie Datenquellen.

  7. Wählen Sie in der Liste der Connectors den aus field-engineer-api-Connector.

    Zeigen Sie Connectors an.

  8. Wählen Sie im Dialogfeld field-engineer-api den field-engineer-api-Connector.

    Fügen Sie eine FieldEngineerAPI-Verbindung hinzu.

  9. Überprüfen Sie im Bereich Daten, ob der FieldEngineerApi-Connector aufgeführt ist.

    Die FieldEngineerAPI-Verbindung wurde hinzugefügt.

Aktualisieren der App zur Verwendung des Connectors: Außendienstbestandsverwaltung

Nachdem die Verbindung zur App hinzugefügt wurde, kann Maria die Bildschirme so ändern, dass sie zum Ersetzen der Excel-Arbeitsmappen verwendet werden. Dies beinhaltet das methodische Durcharbeiten jedes Bildschirms und das Ändern des Datenquelle. Es sollten keine weiteren Änderungen erforderlich sein. Maria beginnt mit dem BrowseParts- und PartDetails-Bildschirmen wie folgt:

  1. Wählen Sie auf dem Home-Bildschirm der App die Schaltfläche Teile. Legen Sie die OnSelect-Aktionseigenschaft auf die folgende Formel fest.

    ClearCollect(partsCollection, FieldEngineerAPI.getapiboilerparts());

Navigate(BrowseParts, ScreenTransition.Fade)

    Die ClearCollect-Funktion erstellt eine neue Sammlung mit dem Namen partsCollection und füllt sie mit den Daten, die sich aus dem Aufruf der getboilerparts-Operation in der FieldEngineerAPI-Verbindung ergeben.

    Erstellen Sie eine partsCollection-Variable.

    Hinweis

    Es wird empfohlen, die Daten in eine Sammlung abzurufen und von allen Bildschirmen, auf denen die Informationen benötigt werden, auf diese Sammlung zu verweisen. Dieser Ansatz kann verhindern, dass verschiedene Bildschirme wiederholt dieselbe Abfrage ausführen und dieselben Daten abrufen.

  2. Wählen Sie F5 zur Vorschau der App.

  3. Wählen Sie auf dem Home-Bildschirm Teile aus. Diese Aktion erstellt die partsCollection-Sammlung. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

    Hinweis

    Mit diesem Schritt können Sie die Daten anzeigen, während Sie den BrowseParts-Bildschirm in den folgenden Schritten bearbeiten.

  4. Wählen Sie das BrowseGallery1-Steuerelement auf dem BrowseParts-Bildschirm aus. Ersetzen Sie in der Formel für die Artikel-Eigenschaft den Verweis auf die [@Table1]-Datenquelle durch partsCollection.

    Diese Änderung führt zu einigen Fehlern. Dies liegt daran, dass für die Feldnamen in der ursprünglichen Excel-Arbeitsmappe die Großschreibung verwendet wurde (Name, CategoryID und Übersicht), während die im Hauptteil der Web-API-Antwort zurückgegebenen Eigenschaften in Kleinbuchstaben angegeben werden. Ändern Sie diese Referenzen, sodass Kleinbuchstaben verwendet werden. Die Formel sollte wie in der folgenden Tabelle aussehen.

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

    Aktualisieren Sie die Formel für den Bildschirm zum Durchsuchen.

  5. Wählen Sie im Bereich Strukturansicht das Steuerelement IconRefresh1 aus. Ändern Sie die OnSelect-Aktion zur Formel ClearCollect (partsCollection, FieldEngineerAPI.getapiboilerparts ()).

    Hinweis

    Die ursprüngliche Formel für diese Aktion ruft die Aktualisieren-Funktion zum erneuten Auffüllen der Daten mithilfe der Verbindung zur ursprünglichen Datenquelle. Sie können Aktualisieren nicht mit einer Verbindung verwenden, die eine Funktion zum Abrufen der Daten ausführt, sodass dies mit FieldEngineerApi.getapiboilerparts () nicht funktioniert. Die Lösung in diesem Schritt füllt die partsCollection-Sammlung mit den neuesten Daten.

  6. Erweitern Sie im Strukturansicht-Bereich das BrowseGallery1-Steuerelement, und wählen Sie das Body1-Steuerelement. Ändern Sie die Eigenschaft Text in ThisItem.overview.

  7. Wählen Sie im Bereich Strukturansicht das Steuerelement Subtitle1 aus. Ändern Sie die Eigenschaft Text in ThisItem.categoryId.

  8. Wählen Sie im Bereich Strukturansicht das Steuerelement Titel aus. Ändern Sie die Eigenschaft Text in ThisItem.name.

  9. Wählen Sie im Bereich Strukturansicht das Steuerelement DetailForm1 auf dem Bildschirm PartDetails aus. Ändern Sie die Datenquelle-Eigenschaft von [@Table1] auf partsCollection.

  10. Wählen Sie im Bereich Strukturansicht das Steuerelement Name_DataCard1 unter DetailForm1. Ändern Sie die Eigenschaft Standard in ThisItem.name.

    Ändern Sie die Standardeinstellung für die Datenkarte „Name“.

  11. Ändern Sie die Standard-Eigenschaft des CategoryID_DataCard1-Steuerelements zu ThisItem.categoryId.

  12. Ändern Sie die Standard-Eigenschaft des Übersicht_DataCard1-Steuerelements zu ThisItem.overview.

  13. Ändern Sie die Standard-Eigenschaft des Preis_DataCard1-Steuerelements zu ThisItem.price.

  14. Ändern Sie die Standard-Eigenschaft des NumberInStock_DataCard1-Steuerelements zu ThisItem.numberInStock.

  15. Ändern Sie die Standard-Eigenschaft des Bild_DataCard1-Steuerelements zu ThisItem.imageUrl.

  16. Klicken Sie im linken Bereich auf der Registerkarte Daten mit der rechten Maustaste auf die Table1-Datenverbindung, und wählen Sie dann Entfernen, um sie aus der App zu löschen. Diese Verbindung wird nicht mehr benötigt.

    Entfernen Sie die Table1-Verbindung.

  17. Speichern Sie die App.

    Hinweis

    Sie können die App schnell speichern, ohne das Datei-Menü zu verwenden, indem Sie STRG+S auswählen.

  18. Wählen Sie F5 zur Vorschau der App. Die Bildschirme Teile durchsuchen und Teiledetails sollten genau wie zuvor funktionieren, außer dass sie diesmal Daten über die Web-API von der InventoryDB-Azure SQL-Datenbank abrufen und nicht aus einer lokalen Excel-Datei.

  19. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

Aktualisieren der App zur Verwendung des Connectors: Außendienstplanung und Hinweise

Maria fährt mit den Bildschirmen BrowseAppointments, AppointmentDetails und EditAppointment fort. Die von diesen Bildschirmen angezeigten Daten stammen derzeit aus der Termine-Tabelle in einer anderen Excel-Arbeitsmappe.

  1. Legen Sie auf dem Startbildschirm der App die OnVisible-Aktion auf die folgende Formel fest.

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

    Diese Formel ruft Termindaten in die appointmentsCollection-Sammlung ab. Die Termine werden gefiltert, um Besuche abzurufen, die am oder nach dem aktuellen Datum geplant sind.

  2. Wählen Sie das Beschriftungssteuerelement aus, das die Zeit des nächsten Termins anzeigt. Legen Sie die Text-Eigenschaft auf Text(First(appointmentsCollection).startDateTime, ShortTime24) fest.

  3. Wählen Sie das Beschriftungssteuerelement aus, das das Datum für den nächsten Termin anzeigt. Legen Sie die Text-Eigenschaft auf Text(First(appointmentsCollection).startDateTime, LongDate) fest.

  4. Wählen Sie das Beschriftungssteuerelement aus, das den Kundennamen für den nächsten Termin anzeigt. Legen Sie die Text-Eigenschaft auf First(appointmentsCollection).customer.name fest.

  5. Wählen Sie F5 zur Vorschau der App. Wählen Sie auf dem Home-Bildschirm Termine aus. Diese Aktion erstellt die appointmentsCollection-Sammlung. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

  6. Wählen Sie im Bereich Strukturansicht das Steuerelement BrowseAppointmentsGallery auf dem Bildschirm BrowseAppointments aus. Ändern Sie die Formel in der Artikel-Eigenschaft auf die folgende Formel.

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

    Diese Formel filtert die auf dem Bildschirm angezeigten Daten nach dem Kundennamen, sodass der Benutzer den Namen eines Kunden eingeben kann. Die Termine werden in Datums- und Uhrzeitreihenfolge angezeigt.

  7. Erweitern Sie im Strukturansicht-Bereich das BrowseAppointmentsGallery-Steuerelement, und wählen Sie das Title1_1-Steuerelement. Ändern Sie die Eigenschaft Text folgendermaßen.

    Text(ThisItem.startDateTime, LongDate)

    Diese Formel zeigt den Datumsteil des startDateTime-Felds für den Termin.

  8. Erweitern Sie im Strukturansicht-Bereich das BrowseAppointmentsGallery-Steuerelement, und wählen Sie das Subtitle1_1-Steuerelement. Ändern Sie die Eigenschaft Text folgendermaßen.

    Text(ThisItem.startDateTime, ShortTime24)

Diese Formel zeigt das Zeitelement des startDateTime-Felds.

  1. Erweitern Sie im Strukturansicht-Bereich das BrowseAppointmentsGallery-Steuerelement, und wählen Sie das Body1_1-Steuerelement. Ändern Sie die Eigenschaft Text folgendermaßen.

    ThisItem.customer.name

  2. Wählen Sie im Bereich Strukturansicht das Steuerelement IconRefresh1_1 auf dem Bildschirm BrowseAppointments aus. Legen Sie die OnSelect-Aktion auf die folgende Formel fest.

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

  3. Erweitern Sie im Strukturansicht-Bereich den AppointmentDetails-Bildschirm, und wählen Sie das DetailForm1_1-Steuerelement. Legen Sie die DataSource-Eigenschaft auf appointmentsCollection fest.

  4. Wählen Sie im Bereich Strukturansicht das Steuerelement IconEdit1 aus. Ändern Sie die Formel in der DisplayMode-Eigenschaft, um die appoinmentsCollection-Sammlung zu testen.

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

  5. Erweitern Sie im Strukturansicht-Bereich den DetailForm1_1-Bildschirm, und wählen Sie das Customer Name_DataCard1-Steuerelement. Ändern Sie die Eigenschaft Standard in ThisItem.customer.name.

  6. Änderen SIe die Standard-Eigenschaften der übrigen Datenkarten wie folgt:

    • Kundenadresse_DataCard1: ThisItem.customer.address
    • Kontaktnummer_DataCard1: ThisItem.customer.contactNumber
    • Problemdetails_DataCard1: ThisItem.problemDetails
    • Status_DataCard1: ThisItem.appointmentStatus.statusName
    • Hinweise_DataCard1: ThisItem.notes
    • Bild_DataCard1_1: ThisItem.imageUrl

  7. Erweitern Sie im Strukturansicht-Bereich den EditAppointment-Bildschirm, und wählen Sie das EditForm1-Steuerelement. Legen Sie die DataSource-Eigenschaft auf appointmentsCollection fest.

  8. Erweitern Sie im Strukturansicht-Bereich das EditForm1-Steuerelement, und wählen Sie das Customer Name_DataCard3-Steuerelement. Ändern Sie die Eigenschaft Standard in ThisItem.customer.name.

  9. Änderen SIe die Standard-Eigenschaften der übrigen Datenkarten wie folgt:

  • Kontakt Nummer_DataCard2: ThisItem.customer.contactNumber ; ändern Sie zusätzlich die MaxLength-Eigenschaft auf 20
  • Problemdetails_DataCard2: ThisItem.problemDetails
  • Status_DataCard5: ThisItem.appointmentStatus.statusName
  • Hinweise_DataCard3: ThisItem.notes
  • Bild_DataCard2: ThisItem.imageUrl

  1. Erweitern Sie im Strukturansicht-Bereich das Problem Details_Card2-Steuerelement. Benennen Sie das Feld DataCardValueX (X wird eine Zahl sein) unter diesem Steuerelement in ProblemDetailsValue um. Wiederholen Sie diesen Vorgang für die DataCardValueX-Steuerelemente in den folgenden Datenkarten:

    • Status_DataCard5: StatusValue
    • Hinweise_DataCard3: NotesValue

    Hinweis

    Das Bildsteuerelement wird im nächsten Kapitel behandelt.

  2. Wählen Sie ProblemDetailsValue aus und legen Sie dann die Eigenschaft MaxLength auf 100 fest.

  3. Wählen Sie im Strukturansicht-Bereich das IconAccept1-Steuerelement und das EditForm1-Steuerelement aus. Legen Sie die OnSelect-Aktionseigenschaft auf die folgende Formel fest.

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

    Diese Formel ruft die die PUT-Vorgang für den Termin-Controller in der Web-API auf. Sie übergibt die Termin-ID für den aktuellen Termin als ersten Parameter, gefolgt von den Details, die der Benutzer möglicherweise auf dem Bildschirm geändert hat. Die Details werden als JSON-Objekt übergeben. Die Anweisungen zum Entfernen, Festlegen und Sammeln aktualisieren die Sammlung appointmentsCollection mit den in der Datenbank gespeicherten Daten.

    Hinweis

    Verwenden Sie in solchen Situationen nicht die ClearCollect-Funktion zum Löschen und Aktualisieren der gesamten Sammlung, da es verschwenderisch wäre, wenn sich beispielsweise nur ein Datensatz hat geändert.

  4. Wählen Sie im Strukturansicht-Bereich das IconAccept1-Steuerelement und das EditForm1-Steuerelement aus. Legen Sie die OnSelect-Aktion auf Folgendes fest.

    ResetForm(EditForm1);

Navigate(AppointmentDetails, ScreenTransition.None);

  5. Klicken Sie im linken Bereich auf der Registerkarte Daten mit der rechten Maustaste auf die Termine-Datenverbindung, und wählen Sie dann Entfernen, um sie aus der App zu löschen.

  6. Speichern Sie die App.

  7. Wählen Sie F5 zur Vorschau der App. Wechseln Sie vom Home-Bildschirm zum Termine-Bildschirm, wählen Sie auf dem Bildschirm einen Termin aus, bearbeiten Sie ihn, und speichern Sie die Änderungen. Stellen Sie sicher, dass der Termin aktualisiert wurde.

  8. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

Erstellen des Azure Cognitive Search-Dienstes für die Außendienst-Wissensdatenbank

Der Wissensdatenbank-Bildschirm in der App ist derzeit keiner Datenquelle zugeordnet. Die Web-API enthält Vorgänge zum Abfragen und Aktualisieren der Tabellen Tipps, BoilerParts und Techniker in der KnowledgeDB-Datenbank. Der Abfrage-Bildschirm in der App soll die Suche in all diesen Tabellen unterstützen. Das Datenvolumen in diesen Tabellen wird wahrscheinlich schnell zunehmen. Daher entscheiden sich Maria, Kiana und Preeti für die Bereitstellung von Azure Cognitive Search, um diese Funktion zu unterstützen. Eine App kann über einen benutzerdefinierten Connector Abfragen senden und Ergebnisse von Azure Cognitive Search empfangen.

Azure Cognitive Search funktioniert am besten, wenn die zu durchsuchenden Daten in einer einzelnen Datenbankeinheit enthalten sind. Kiana erstellt wie folgt einen Blick in die KnowledgeDB-Datenbank, die eine einheitliche Ansicht der Tabellen Tipps, BoilerParts und Techniker darstellt:

  1. Wechseln Sie im Azure-Portal zur Seite KnowledgeDB SQL-Datenbank.

  2. Wählen Sie im linken Bereich Abfrage-Editor aus, und melden Sie sich bei der Datenbank als sqladmin mit dem Passwort Pa55w.rd an.

    Melden Sie sich bei der Azure SQL-Datenbank an.

  3. Geben Sie im Abfragefenster die folgende Anweisung ein, und wählen Sie dann Ausführen aus.

    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

    Die „Wissen“-Ansicht erstellen

    Stellen Sie sicher, dass die Ansicht Wissen erfolgreich erstellt wurde.

  4. Wählen Sie im linken Bereich Verbindungszeichenfolgen aus. Notieren Sie sich die ADO.NET-Verbindungszeichenfolge; Sie benötigen sie bei der Konfiguration von Azure Cognitive Search.

    ADO.NET-Verbindungszeichenfolge für die KnowledgeDB-Datenbank

In Zusammenarbeit mit Kiana konfiguriert Preeti eine neue Instanz des Azure Cognitive Search-Dienstes, um Suchvorgänge für Zeilen in der Wissen-Ansicht durchzuführen:

  1. Wählen Sie auf der Startseite im Azure-Portal die Seite + Eine Ressource erstellen aus, geben Sie Azure Cognitive Search ein, wählen Sie Eingeben und dann Erstellen aus.

    Erstellen Sie den Azure Cognitive Search-Dienst.

  2. Geben Sie auf der Seite Neuer Suchdienst die folgenden Einstellungen ein, und wählen Sie dann Überprüfen + erstellen ein:

    • Abonnement: Wählen Sie Ihr Azure-Abonnement aus
    • Ressourcengruppe: webapi_rg
    • Dienstname: Geben Sie einen eindeutigen Namen für den Dienst ein
    • Standortname: Wählen Sie die nächstgelegene Region aus
    • Preisstufe: Kostenlos

  3. Wählen Sie auf der Validierungsseite die Option Erstellen aus, und warten Sie, bis der Dienst bereitgestellt wird.

  4. Gehen Sie zur Seite für den neuen Suchdienst, und wählen Sie Übersicht aus, notieren Sie sich die Url (Sie benötigen diese später, wenn Sie den benutzerdefinierten Connector für Power Apps erstellen), und wählen Sie dann Daten importieren aus.

    Suchdienst-Übersichtsseite

  5. Wählen Sie auf der Daten importieren-Seite im Datenquelle-Dropdown-Listenfeld Azure SQL-Datenbank aus.

    Wählen Sie eine Azure SQL-Datenbank aus.

  6. Geben Sie auf der Verbindung mit Ihren Daten herstellen-Seite die folgenden Einstellungen an:

    • Datenquelle: Azure SQL-Datenbank
    • Datenquellenname: Wissensdatenbank
    • Verbindungszeichenfolge: Geben Sie die Verbindungszeichenfolge für die Azure SQL-Datenbank für die KnowledgDB-Datenbank ein, die Sie zuvor aufgezeichnet haben; stellen Sie in dieser Zeichenfolge sicher, dass das Kennwort auf Pa55w.rd festgelegt ist
    • Belassen Sie die Felder Benutzer-ID und Passwort bei ihren Standardwerten; diese Elemente werden aus der Verbindungszeichenfolge abgerufen

  7. Klicken Sie auf Verbindung testen. Stellen Sie sicher, dass der Test erfolgreich ist, wählen Sie [Wissen] in dem Tabelle/Ansicht-Dropdown-Listenfeld aus, und wählen Sie dann Weiter: Kognitive Fähigkeiten hinzufügen (optional) aus.

    Geben Sie die Suchansicht an.

  8. Wählen Sie auf der Kognitive Fähigkeiten hinzufügen (optional)-Seite Direkt zu: Zielindex anpassen.

  9. Wählen Sie auf der Zielindex anpassen-Seite für alle Spalten Abrufbar und Durchsuchbar für Betreff, Text, Name und Übersicht. Wählen Sie Weiter: Einen Indexer erstellen aus.

    Passen Sie den Zielindex an.

  10. Ändern Sie auf der Seite Einen Indexer erstellen den Indexer Name zu knowledgebase-indexer. Wählen Sie bei Zeitplan Stündlich aus, legen Sie die Spalte „Hohes Wasserzeichen“ auf ID fest, und wählen Sie dann Einreichen aus:

    Erstellen Sie den Indexer.

  11. Um den Indexer zu testen, klicken Sie auf die Übersicht-Seite für den Suchdienst und wählen Sie Such-Explorer aus:

    Wählen Sie den Suchexplorer aus.

  12. Geben Sie im Abfrage-Zeichenfolge-Feld ein Wort ein, nach dem in der Wissensdatenbank gesucht werden soll, und wählen Sie dann Suchen aus. Der Suchdienst sollte eine Liste von Dokumenten mit einer Übereinstimmung in den Feldern Betreff, Text, Name oder Übersicht erstellen und sie im Ergebnisse-Feld anzeigen. Notieren Sie sich die Anforderungs-URL und das Beispiel Ergebnisse; Sie benötigen diese Elemente später als Beispielanforderung und -antwort, wenn Sie den benutzerdefinierten Power Apps-Connector einrichten.

    Suchabfrageergebnisse

Erstellen des benutzerdefinierten Connectors für den Azure Cognitive Search-Dienst

Kiana kann jetzt einen benutzerdefinierten Connector erstellen, den Power Apps verwendet, um Suchanfragen an den Suchdienst zu senden. Kiana macht das mit Power Apps Studio wie folgt:

  1. Melden Sie sich bei Power Apps an.

  2. Erweitern Sie im linken Bereich die Option Daten, und wählen Sie dann Benutzerdefinierte Connectors aus. Wählen Sie im rechten Bereich + Neuer benutzerdefinierter Connector und dann Ohne Vorlage erstellen aus.

    Neuer benutzerdefinierter Connector

  3. Legen Sie im Dialogfeld Ohne Vorlage erstellen den neuen Connector-Namen auf VanArsdelKBConnector fest, und wählen Sie dann Fortsetzen aus:

    Erstellen Sie einen Wissensdatenbank-Connector.

  4. Geben Sie auf der Allgemeine Information-Seite eine Beschreibung ein, und legen Sie das Schema auf HTTPS fest. Geben Sie im Feld Hosts die URL für Ihren Suchdienst ein (Sie haben diese URL zuvor notiert), jedoch ohne das https://-Präfix, und wählen Sie dann Sicherheit aus.

    Allgemeine Seite für den Suchdienst-Connector

  5. Wählen Sie auf der Sicherheit-Seite im Authentifizierung-Dropdown-Listenfeld API-Schlüssel aus. Geben Sie im Parameterbezeichnung-Feld api-key ein. Geben Sie im Parametername-Feld api-key ein. Wählen Sie Definition aus.

    Sicherheitsseite für den Suchdienst-Connector

  6. Wählen Sie auf der Seite Definition die Option Neue Aktion aus. Geben Sie im Feld Zusammenfassung Abfrage ein. Geben Sie im Feld Beschreibung Wissensdatenbank abfragen ein. Geben Sie im Feld Vorgangs-ID Abfrage ein. Wählen Sie unter Anfrage + Aus Beispiel importieren aus.

    Definitionsseite für den Suchdienst-Connector

  7. Geben Sie im Dialogfeld Import aus Beispiel die folgenden Werte ein und wählen Sie Importieren:

    • Verb: GET
    • URL: Geben Sie die Beispielanforderungs-URL an, die Sie zuvor beim Testen des Suchdienstes im Such-Explorer notiert haben
    • Kopfzeilen: Content-type

    Importieren Sie eine Definition aus einer Beispielanforderung.

  8. Zurück auf der Definition-Seite scrollen Sie nach unten zum Abschnitt Abfrage, wählen Sie die Schaltfläche mit den Auslassungspunkten neben Suchen und dann Bearbeiten aus.

    Bearbeiten Sie die Definition einer Suchanforderung.

  9. Geben Sie auf dem Bearbeitungsbildschirm im Abschnitt Parameter im Feld Standardwert ein Sternchen (*) ein. Belassen Sie die anderen Felder auf ihren Standardwerten, und wählen Sie dann Zurück.

    Legen Sie einen Suchstandardwert fest.

  10. Wählen Sie auf der Definition-Seite im Abschnitt Abfrage die Schaltfläche mit den Auslassungspunkten neben api-version und dann Bearbeiten aus.

    Bearbeiten Sie die API-Version.

  11. Geben Sie auf dem Bearbeitungsbildschirm im Parameter-Abschnitt im Standardwert-Feld 2020-06-30-Vorschau ein (dies ist die Version, die der aktuellen Version von Azure Cognitive Search zugeordnet ist. Sie können die Version in der zuvor angegebenen Anforderungs-URL sehen). Legen Sie Erforderlich auf Ja und Sichtbarkeit auf intern fest. Belassen Sie die anderen Felder auf ihren Standardwerten, und wählen Sie dann Zurück.

    Legen Sie die API-Werte für Suchparameter fest.

  12. Scrollen Sie auf der Seite Definition nach unten zum Abschnitt Antwort, und wählen Sie + Standardantwort hinzufügen aus.

    Fügen Sie der Standardantwort eine Definition hinzu.]

  13. Geben Sie im Aus Beispiel importieren-Dialog im Kopfzeile-Feld den Text Inhaltstyp ein. Geben Sie im Feld Text die Beispielergebnisse ein, die Sie beim Testen des Suchdienstes aufgezeichnet haben, und wählen Sie dann Importieren aus.

    Importieren Sie die Antwortnachricht aus einem Beispiel.

  14. Wählen Sie auf der Definition-Seite die Standard-Antwort.

    Wählen Sie die Standardantwort aus.

  15. Geben Sie im Beschreibung-Feld der Inhaltstyp-Antwort Anwendung/json ein, und wählen Sie dann Zurück aus.

    Legen Sie den Inhalt der Antwortnachrichten-Kopfzeile fest.

    Hinweis

    Der Text-Abschnitt auf dieser Seite sollte die Felder der Antwort anzeigen, z. B. Text, ID, Name, Übersicht und Betreff, wenn diese erfolgreich analysiert wurden.

  16. Wählen Sie Konnektor erstellen aus.

    Erstellen Sie den Azure Cognitive Search-Connector.

Der Connector sollte erstellt werden, ohne dass Fehler oder Warnungen gemeldet werden.

Aktualisieren der App zur Verwendung von Azure Cognitive Search:Außendienst-Wissensdatenbank

Maria kann jetzt den benutzerdefinierten Connector in der App verwenden. Zunächst ist jedoch ein Schlüssel erforderlich, der Maria die erforderlichen Berechtigungen zum Herstellen einer Verbindung mit dem Azure Cognitive Search-Dienst gewährt. Preeti erhält den Schlüssel von der Schlüssel-Seite für den Dienst im Azure-Portal und gibt ihn an Maria weiter.

Suchdienstschlüssel im Azure-Portal

Maria bearbeitet die App in Power Apps Studio und führt die folgenden Aufgaben aus:

  1. Öffnen Sie die App VanArsdelApp zur Bearbeitung in.

  2. Wählen Sie im Ansicht-Menü Datenquellen und dann Daten hinzufügen aus.

    Fügen Sie der App die Datenquelle hinzu.

  3. Geben Sie im Suche-Feld unter Ein Datenquelle auswählen Maximilian ein. Der VanArdelKBConnector-Connector sollte aufgelistet sein.

    Suchen Sie nach dem Azure Cognitive Search-Connector.

  4. Wählen Sie den VanArdelKBConnector-Connector aus. Geben Sie im Bereich VanArdelKBConnector den Schlüssel ein, den Preeti für den Suchdienst bereitgestellt hat, und wählen Sie dann Verbinden aus.

    Geben Sie den API-Schlüssel ein.

  5. Speichern und schließen Sie die App im Menü Datei, und öffnen Sie sie dann erneut. Möglicherweise werden Sie aufgefordert, die Verwendung des benutzerdefinierten Connectors zu autorisieren, wenn die App erneut geöffnet wird.

    Hinweis

    Dieser Schritt ist erforderlich, um den benutzerdefinierten Connector zu aktivieren.

  6. Erweitern Sie im Strukturansicht-Bereich den Wissensdatenbank-Bildschirm, und wählen Sie das TextSearchBox2-Steuerelement. Geben Sie die folgende Formel für die OnChange-Aktion.

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

    Diese Formel ruft den Abfrage-Vorgang des benutzerdefinierten Connectors bei der Suche nach Elementen ab, die dem Begriff entsprechen, den der Benutzer in das Suchfeld eingibt. Die Ergebnisse werden in einer Sammlung mit dem Namen azResult gespeichert.

  7. Erweitern Sie im Strukturansicht-Bereich auf dem Wissensdatenbank-Bildschirm das Steuerelement BrowseGallery2 aus. Legen Sie die Eigenschaft Items auf azResult fest.

  8. Erweitern Sie das BrowseGallery2-Steuerelement, und entfernen Sie das Image4-Steuerelement.

  9. Wählen Sie das Title2-Steuerelement aus. Legen Sie die folgenden Eigenschaften fest:

    • Text: ThisItem.Subject
    • X: 24
    • Breite: Parent.TemplateWidth - 104

  10. Wählen Sie das Subtitle2-Steuerelement aus. Setzen Sie die Eigenschaft Text auf ThisItem.Body.

  11. Wählen Sie F5 zur Vorschau der App. Geben Sie auf dem Bildschirm Wissensdatenbank einen Suchbegriff ein, und wählen Sie dann Eingabe aus. Passende Artikel aus der Wissensdatenbank sollten angezeigt werden.

    Wissensdatenbankabfrage in der App

    Hinweis

    Der Detailbildschirm wurde noch nicht erstellt. Daher funktioniert die Auswahl des >-Symbol neben einem Artikel nicht.

  12. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

  13. Klicken Sie im Bereich Strukturansicht mit der rechten Maustaste auf den PartDetails-Bildschirm, und wählen Sie dann Bildschirm duplizieren. Diese Aktion fügt der App einen weiteren Bildschirm mit dem Namen PartDetails_1 hinzu.

    Duplizieren Sie den PartDetails-Bildschirm.

  14. Nennen Sie im Strukturansicht-Bereich den Bildschirm PartDetails_1 in KnowledgebaseDetails um.

    Wählen Sie das LblAppNameX-Steuerelement auf dem Bildschirm aus. Legen Sie die Text-Eigenschaft auf „Artikeldetails“ (einschließlich der Anführungszeichen) fest.

  15. Wählen Sie im Strukturansicht-Bereich das DetailFormX-Steuerelement aus. Legen Sie die folgenden Eigenschaften fest:

    • Datenquelle: azResult
    • Element: BrowseGallery2.Selected

    Hinweis

    BrowseGallery2 ist die Suchgalerie auf dem Wissensdatenbank-Bildschirm. In Ihrer Anwendung hat diese Galerie möglicherweise einen anderen Namen.

  16. Erweitern Sie im Strukturansicht-Bereich das DetailFormX-Formular, und ändern Sie dann die Namen der folgenden Datenkartensteuerelemente:

    • Name_DataCard1_1: Name_DataCard
    • CategoryID_DataCard1_1: Betreff_DataCard
    • Übersicht_DataCard1_1: Übersicht_DataCard
    • Preis_DataCard1_1: Text_DataCard

  17. Löschen Sie die Steuerelemente NumberInStock_DataCard1_1 und Bild_DataCard1_1.

  18. Wählen Sie das Name_DataCard-Steuerelement aus. Legen Sie die Eigenschaft Standard auf ThisItem.Name fest.

  19. Wählen Sie das Betreff_DataCard-Steuerelement aus. Legen Sie die folgenden Eigenschaften fest:

    • DataField: „Betreff“
    • Anzeigename: „Betreff“
    • Standard: ThisItem.Subject

  20. Wählen Sie das Übersicht_DataCard-Steuerelement aus. Legen Sie die Eigenschaft Standard auf ThisItem.Overview fest.

  21. Wählen Sie das Text_DataCard-Steuerelement aus. Legen Sie die folgenden Eigenschaften fest:

    • DataField: „Text“
    • DisplayName: „Text“
    • Standard: ThisItem.Body

  22. Wählen Sie das DataCardValueX-Steuerelement im Text_DataCard-Steuerelement aus. Legen Sie die Eigenschaft Text auf Parent.Default fest.

  23. Ändern Sie die Größe der einzelnen Steuerelemente der Datenkarte, um sie auf dem Bildschirm zu verteilen.

    Der ArticleDetails-Bildschirm

  24. Wählen Sie den Zurückpfeil in der Kopfzeile des Bildschirms aus. Ändern Sie die OnSelect-Aktionseigenschaft zu Navigate(Knowledgebase, ScreenTransition.None).

  25. Wählen Sie im Strukturansicht-Bereich den Wissensdatenbank-Bildschirm und dann das Steuerelement BrowseGalleryX aus. Ändern Sie die OnSelect-Aktionseigenschaft zu Navigate(KnowledgebaseDetails, ScreenTransition.None). Diese Aktion zeigt den Detailbildschirm für den Wissensdatenbankartikel an, wenn der Benutzer das Symbol > für einen Eintrag im Suchbildschirm auswählt.

  26. Speichern Sie die App.

  27. Wählen Sie F5 zur Vorschau der App. Geben Sie auf dem Bildschirm Wissensdatenbank einen Suchbegriff ein, und wählen Sie dann Eingabe aus. Wählen Sie einen Artikel aus und überprüfen Sie, ob seine Details angezeigt werden. Stellen Sie sicher, dass das Zurück-Symbol den Benutzer zum Suchbildschirm zurückbringt.

  28. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

Maria, Kiana und Preeti haben die Web-API und Azure Cognitive Search erfolgreich in die App integriert.

Zurück Weiter