Créer un serveur frontal d’applications canevas pour votre API web ASP.NET (version préliminaire)

[Cet article fait partie de la documentation en version préliminaire et peut faire l’objet de modifications.]

Power Platform permet aux développeurs d’API web de créer rapidement des applications mobiles ou web en utilisant une application canevas Power Apps comme serveur frontal. Avec les services connectés de Power Platform dans Visual Studio 2022, les développeurs d’API Web ASP.NET peuvent facilement créer un connecteur personnalisé à utiliser avec Power Apps et Power Automate.

Vous pouvez utiliser des tunnels de développement Visual Studio pour créer une application canevas avant de publier votre API dans un point de terminaison public. Les tunnels de développement créent une connexion ad hoc entre votre API Web qui s’exécute localement et votre Power Apps. Vous pouvez les utiliser pour tester et déboguer localement votre API Web dans le contexte de Power Platform en temps réel (boucle interne).

Ce didacticiel utilise l’exemple d’API Web Météo de ASP.NET pour ajouter une connexion à une application canevas. Il est basé sur le didacticiel Créer une API Web avec ASP.NET Core.

Conditions préalables

• Visual Studio 2022 version 17.6 Preview 2 avec la charge de travail ASP.NET et développement web installée. Vous devez être connecté à Visual Studio pour créer et utiliser les tunnels de développement. Cette fonctionnalité n’est pas disponible dans Visual Studio pour Mac.
• Un environnement de développeur Power Platform avec l’autorisation de créer des connecteurs personnalisés

Créer un projet ASP.NET dans Visual Studio

1. Créez un projet d’API Web ASP.NET Core.
2. Sélectionnez Suivant.
3. Saisissez WeatherSample pour le Nom du projet, puis sélectionnez Suivant.
4. Sélectionnez Créer.

Le projet WeatherSample contient un exemple de contrôleur pour un service HTTP RESTful.

Ajouter Power Platform en tant que service connecté

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud Services connectés et sélectionnez Gérer les services connectés dans le menu contextuel.

2. Dans l’onglet Services connectés , sélectionnez l’icône + pour Dépendances de service.

3. Dans la boîte de dialogue Ajouter une dépendance, saisissez Power Platform dans la zone de recherche.

4. Sélectionnez Microsoft Power Platform, puis sélectionnez Suivant.

   Si vous n’êtes pas déjà connecté, connectez-vous à votre compte Microsoft Power Platform. Si vous n’avez pas de compte Power Platform, créez un environnement de développeur.

5. Dans l’écran Se connecter à Microsoft Power Platform : sélectionnez votre environnement de développeur.

6. Dans Nom des connecteurs personnalisés, la valeur WeatherSample_Connector doit déjà être définie.

7. Dans Sélectionner un tunnel de développement public, sélectionnez l’icône +.

   1. Dans le champ Nom, saisissez SampleTunnel.
   2. Sélectionnez Type de tunnel : Persistant.
   3. Sélectionnez Accès : Public.
   4. Sélectionnez OK.

8. Sélectionnez Terminer

9. Une fois le service connecté configuré, sélectionnez Fermer.

Créer une application canevas avec le connecteur personnalisé

Lorsque Visual Studio exécute une application Web et qu’un tunnel est actif, le navigateur Web s’ouvre sur une URL de tunnel au lieu d’une URL d’hôte local.

1. Exécutez votre solution Visual Studio et commencez le débogage.

2. Lorsque le navigateur s’ouvre, une page d’avertissement s’ouvre avec la première demande envoyée à l’URL du tunnel. Sélectionnez Continuer.

3. Avec l’API Web en cours d’exécution, ouvrez Power Apps dans un nouvel onglet du navigateur.

4. Sélectionnez votre environnement de développeur dans le coin supérieur droit.

5. Créez une application canevas vide avec Téléphone comme format.

6. Dans le menu supérieur, sélectionnez Ajouter des données.

7. Recherchez et sélectionnez WeatherSample_Connector, puis sélectionnez Connecter. Plus d’informations : Ajouter des connexions à votre application canevas

8. Insérez un bouton et faites-le glisser vers le bas du formulaire.

9. Modifiez le bouton Texte en Charger les données.

10. Saisissez la formule suivante dans la propriété OnSelect du bouton :

    ClearCollect(weatherCollection, WeatherSample_Connector.GetWeatherForecast())
    

11. Insérez une galerie verticale

12. Sélectionnez weatherCollection comme source de données, puis modifiez la disposition en Titre et sous-titre.

13. Exécutez l’application. Elle devrait ressembler à l’exemple suivant :

    

Déboguer votre API

Avec votre application canevas en cours d’exécution, définissez un point d’arrêt et déboguez-le. Vous pouvez également utiliser le Rechargement à chaud.

Voir aussi

En quoi consistent les applications canevas ?
Comment utiliser les tunnels de développement dans Visual Studio 2022 avec les applications ASP.NET Core