Übung – Einen zertifizieren benutzerdefinierten Konnektor von Visual Studio erstellen

  • 5 Minuten

In dieser Übung erstellen Sie einen benutzerdefinierten Konnektor aus Ihrer Web-API in Visual Studio in Ihrer Power Platform-Umgebung.

Power Platform ermöglicht Web-API-Entwicklern die schnelle Erstellung mobiler Anwendungen oder Webanwendungen mit einer Power Apps Canvas-App als Front-End. Mit dem verbundenen Power Platform-Dienst im Visual Studio 2022 können ASP.NET Web-API-Entwickler ganz einfach einen benutzerdefinierten Konnektor für die Verwendung mit Power Apps erstellen.

Hinweis

Sie müssen folgendermaßen vorgehen, um in dieser Übung Visual Studio und Power Apps verwenden:

  • Installieren Sie Visual Studio 2022 17.7 mit dem installierten ASP.NET- und Webentwicklungs-Workload. Um den Entwicklungstunnel zu erstellen und zu verwenden, müssen Sie bei Visual Studio angemeldet sein. Die Funktion ist in Visual Studio für Mac nicht verfügbar.

  • Erstellen Sie eine kostenfreie Power Platform-Entwicklungsumgebung.

  • Laden Sie diese Beispiel-API von GitHub herunter.

Power Platform als verbundenen Dienst hinzufügen

  1. Öffnen Sie diese Beispiel-API von GitHub mit Visual Studio. Dies ist ein ASP.NET Core-Web-API-Projekt.

  2. Klicken Sie in Ihrem Projekt vom Projektmappen-Explorer mit der rechten Maustaste auf den Knoten Verbundene Dienste und dann auf die Option Hinzufügen > Microsoft Power Platform

    Screenshot des verbundenen Dienstes zum Hinzufügen. Der Fokus liegt hier auf der Option Microsoft Power Platform.

  3. Wählen Sie die folgenden Werte aus, oder geben Sie sie ein:

    • Power Platform-Umgebungen: select your developer environment
    • Power Platform-Lösungen: Common Data Service Default Solution
    • Benutzerdefinierter Konnektor: Wählen Sie das +-Symbol aus, und geben Sie InventoryLocations_Connector ein.

    Screenshot der Konfiguration für verbundene Dienste

  4. Wählen Sie für das Feld Einen öffentlichen Entwicklungstunnel auswählen das +-Symbol und die folgenden Werte aus:

    • Name: devtunnel
    • Tunneltyp: Persistent
    • Zugriff: Public

    Screenshot der Konfiguration „Entwicklungstunnel“

  5. Klicken Sie auf OK und dann auf die Option Fertig stellen. Sie können dann auf Schließen klicken, wenn der verbundene Dienst konfiguriert ist.

    Screenshot des Abschlusses des Konfigurationsprozesses für den verbundenen Dienst

Sie haben jetzt einen benutzerdefinierten Konnektor für Lagerorte erstellt, der Entwicklungstunnel zum Verwenden Ihrer API mit Power Platform verwendet. In dieser inneren Schleife führen Sie Ihre API in Ihrer lokalen Umgebung aus.

Ihre API ausführen

Der Webbrowser öffnet eine Tunnel-URL statt einer Localhost-URL, wenn Visual Studio eine Web-App ausführt und ein Tunnel aktiv ist.

  1. Führen Sie Ihre Visual Studio-Lösung aus, und beginnen Sie mit dem Debuggen.

    Screenshot des Symbols „Debugging“

  2. Eine Warnseite mit der ersten an die Tunnel-URL gesendeten Anfrage wird geöffnet, wenn der Browser geöffnet wird. Wählen Sie Fortsetzen aus.

    Screenshot der Seite mit der Erstwarnung

Wichtig

Denken Sie daran, die API laufen zu lassen, wenn Sie Ihre Power App erstellen.

App aus der API erstellen

Hinweis

Sie müssen Power Platform Tools für Visual Studio Code installieren, um die in diesem Schritt bereitgestellte Beispiel-App verwenden zu können.

  1. Öffnen Sie Visual Studio Code, und erstellen Sie mit dem Power Platform CLI-Befehl für Ihren Benutzer eine neue Authentifizierung. Ändern Sie die URL in die URL Ihrer Entwicklerumgebung, die im Admin Center angezeigt wird.

    pac auth create --url https://yourenvironment.crm.dynamics.com

  2. Rufen Sie den benutzerdefinierten Konnektor ab, den Sie gerade erstellt haben. Kopieren Sie die Konnektor-ID.

    pac connector list

  3. Generieren Sie eine Canvas-App (*.msapp-Datei) auf Grundlage der Vorgänge Ihrer API.

    pac canvas create --connector-id your connector id --msapp your file name.msapp

Vorschau der App anzeigen

  1. Öffnen Sie Power Apps.

  2. Wählen Sie Leere App aus. Wählen Sie von Canvas-App ohne Vorlage die Option Erstellen aus.

    Screenshot des Assistenten „App erstellen“

  3. Geben Sie den App-Namen Inventory app ein, und wählen Sie das Format Tablet aus. Wählen Sie Erstellen aus.

    Screenshot des Assistenten zum Erstellen einer App und zur Eingabe eines App-Namens

  4. Wählen Sie auf der Befehlsleiste ... und Öffnen aus.

    Screenshot vom Öffnen einer bestehenden App

  5. Suchen Sie nach der *.msapp-Datei, die Sie in Schritt 3 erstellt haben, und öffnen Sie sie. So wird Ihre Beispiel-App im Studio geladen.

    Screenshot der Option „Dateien durchsuchen“

  6. Wählen Sie in der linken Leiste das Datensymbol und die Option Daten hinzufügen aus. Suchen Sie nach InventoryLocations_Connector, um die Option Verbinden auszuwählen. Dies ist der benutzerdefinierte Konnektor, der über die Web-API erstellt wurde.

    Screenshot davon, wie ein benutzerdefinierter Konnektor hinzugefügt wird

  7. Wählen Sie das Symbol Wiedergeben aus, um die Vorschau Ihrer App anzuzeigen.

    Screenshot Symbols zur Vorschau der App

  8. Klicken Sie auf die App-Schaltfläche ABRUFEN, um eine Liste der Lagerorte anzuzeigen.

    Screenshot der App-Vorschau

  9. Wählen Sie das Symbol Schließen oben rechts in der App aus, um zum Studio zurückzuwechseln. Sie können Ihre Arbeit speichern, indem Sie auf das Symbol Veröffentlichen klicken.

    Screenshot des Symbols „Veröffentlichen“

Tipp

  • Gibt aus der Beispiel-API keine Länder zurück? Stellen Sie sicher, dass die API beim Erstellen Ihrer App ausgeführt wird.
  • Sie können Ihre API in Echtzeit iterieren, einschließlich Debugging und Hot-Reload, da Sie hier Entwicklungstunnel verwenden.

Sie haben erfolgreich eine App und einen benutzerdefinierten Konnektor von einer Web-API erstellt.