Ein Canvas-App-Front-End für Ihre ASP.NET-Web-API erstellen (Vorschauversion)

[Dieser Artikel ist Teil der Dokumentation zur Vorschauversion und kann geändert werden.]

Power Platform ermöglicht Web-API-Entwicklern das schnelle Erstellen von Mobil- oder Webanwendungen mit einer Power Apps-Canvas-App als Front-End. Mit dem verbundenen Power Platform Dienst Visual Studio 2022 können ASP.NET Web-API-Entwickelnde ganz leicht einen benutzerdefinierten Connecter für die Verwendung mit Power Apps und Power Automate erstellen.

Sie können den Visual Studio Entwicklungstunnel verwenden, um eine Canvas-App zu erstellen, bevor Sie Ihre API in einem öffentlichen Endpunkt veröffentlichen. Entwicklungstunnel stellen eine Ad-hoc-Verbindung zwischen Ihrer lokal ausgeführten Web-API und Ihrem Power Apps her. Sie können sie verwenden, um Ihre Web-API im Kontext des Power Platform in Echtzeit (innere Schleife) lokal zu testen und zu debuggen.

In diesem Tutorial wird die beispielhafte ASP.NET-Wetter-Web-API verwendet, um eine Verbindung zu einer Canvas-App hinzuzufügen. Es basiert auf dem Tutorial Eine Web-API mit ASP.NET Core erstellen.

Anforderungen

• Visual Studio 2022 Version 17.6 Vorschauversion 2 mit der ASP.NET und installierten Webentwicklungs-Workload. Sie müssen bei Visual Studio angemeldet sein, um Dev-Tunnel zu erstellen und zu verwenden. Das Feature ist in Visual Studio für Mac nicht verfügbar.
• Eine Power Platform Entwicklungsumgebung mit der Berechtigung zum Erstellen benutzerdefinierter Connectoren

Ein ASP.NET-Projekte in Visual Studio erstellen

1. Erstellen Sie ein ASP.NET Core-Web-API-Projekt.
2. Wählen Sie Weiter.
3. Geben Sie WeatherSample als Projektname ein und wählen Sie dann Weiter.
4. Wählen Sie Erstellen aus.

Das WeatherSample-Projekt enthält einen Beispielcontroller für einen RESTful-HTTP-Dienst.

Power Platform als verbundenen Dienst hinzufügen

1. Klicken Sie im Lösungs-Explorer mit der rechten Maustaste auf den Knoten Verbundene Dienste und wählen Sie Verbundene Dienste verwalten aus dem Kontextmenü aus.

2. Wählen Sie auf der Registerkarte Verbundene Dienste das +-Symbol für Dienstabhängigkeiten aus.

3. Geben Sie im Dialogfeld Abhängigkeit hinzufügen Power Platform in das Suchfeld ein.

4. Wählen Sie Microsoft Power Platform und dann Weiter aus.

   Falls Sie nicht bereits angemeldet sind, melden Sie sich an Ihrem Microsoft Power Platform-Konto an. Wenn Sie über kein Power Platform-Konto verfügen, erstellen Sie eine Entwicklerumgebung.

5. Auf dem Bildschirm Verbinden mit Microsoft Power Platform : Wählen Sie Ihre Entwicklerumgebung aus.

6. In Name des benutzerdefinierten Connectors sollte der Wert WeatherSample_Connector bereits festgelegt sein.

7. Wählen Sie unter Öffentlichen Entwicklertunnel auswählen das Symbol + aus.

   1. Geben Sie Name-Feld SampleTunnel ein.
   2. Wählen Sie Tunneltyp: Persistent aus.
   3. Wählen Sie Zugriff : öffentlich aus.
   4. Wählen Sie OK aus.

8. Wählen Sie Fertig stellen aus

9. Sobald der verbundene Dienst konfiguriert ist, wählen Sie Schließen.

Eine Canvas-App mit dem benutzerdefinierten Connector erstellen

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

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

2. Wenn der Browser geöffnet wird, wird eine Warnseite mit der ersten an die Tunnel-URL gesendeten Anforderung geöffnet. Wählen Sie Continue (Weiter) aus.

3. Öffnen Sie bei laufender Web-API Power Apps in einer neuen Browser-Registerkarte.

4. Wählen Sie in der oberen rechten Ecke Ihre Entwicklungsumgebung aus.

5. Erstellen Sie eine leere Canvas-App mit dem Format Telefon .

6. Wählen Sie im oberen Menü Daten hinzufügen aus.

7. Suchen Sie nach dem WeatherSample_Connector und wählen Sie ihn aus. Gehen Sie anschließend auf Verbinden. Weitere Informationen: Verbindungen zu Ihrer Canvas-App hinzufügen

8. Fügen Sie eine Schaltfläche ein und ziehen Sie sie an den unteren Rand des Formulars.

9. Ändern Sie die Schaltfläche Text auf Daten laden.

10. Geben Sie die folgende Formel in der OnSelect-Eigenschaft der Schaltfläche ein:

    ClearCollect(weatherCollection, WeatherSample_Connector.GetWeatherForecast())
    

11. Fügen Sie einen vertikalen Katalog ein

12. Wählen Sie die weatherCollection als Datenquelle aus und ändern Sie dann das Layout aus Titel und Untertitel.

13. Führen Sie die App aus. Sie sollte ungefähr so aussehen:

    

Ihre API debuggen

Legen Sie bei laufender Canvas-App einen Haltepunkt fest und debuggen Sie sie. Sie können auch Hot Reload verwenden.

Siehe auch

Was sind Canvas-Apps
So verwenden Sie Dev-Tunnel im Visual Studio 2022 mit ASP.NET Core-Apps