Exercice : créer un connecteur personnalisé depuis Visual Studio

  • 5 minutes

Dans cet exercice, vous allez créer un connecteur personnalisé dans votre environnement Power Platform à partir de votre API web dans Visual Studio.

Power Platform permet aux développeurs d’API web de créer rapidement des applications mobiles ou web à l’aide d’une application canevas Power Apps comme front-end. Avec le service connecté 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.

Remarque

Si vous souhaitez utiliser Visual Studio et Power Apps dans cet exercice, vous devez :

  • installer Visual Studio 2022 avec ASP.NET et la charge de travail de développement web installés : vous devez être connecté à Visual Studio pour créer et utiliser des tunnels de développement ; la fonctionnalité n’est pas disponible dans Visual Studio pour Mac ;
  • créer un environnement de développeur Power Platform gratuit ;
  • télécharger les exemples de données.

Ajouter Power Platform en tant que service connecté

  1. Ouvrez cet exemple d’API depuis GitHub avec Visual Studio. Il s’agit d’un projet d’API web ASP.NET Core.

  2. Dans votre projet, depuis l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud Services connectés, puis sélectionnez Ajouter > Microsoft Power Platform.

    Capture d’écran des services connectés à ajouter mettant l’accent sur l’option Microsoft Power Platform.

  3. Sélectionnez ou saisissez les valeurs suivantes :

    • Environnements Power Platform : select your developer environment
    • Solutions Power Platform : Common Data Service Default Solution
    • Connecteur personnalisé : cliquez sur l’icône + et saisissez InventoryLocations_Connector

    Capture d’écran de la configuration du service connecté.

  4. Pour le champ Sélectionner un tunnel de développement public, cliquez sur l’icône + et sélectionnez les valeurs suivantes :

    • Nom : devtunnel
    • Type de tunnel : Persistent
    • Accès : Public

    Capture d’écran de la configuration du tunnel de développement.

  5. Cliquez sur OK et sur Terminer. Une fois le service connecté configuré, vous pouvez cliquer sur Fermer.

    Capture d’écran du processus de configuration du service connecté terminé.

Vous avez maintenant créé un connecteur personnalisé pour les emplacements de stockage, qui exploite les tunnels de développement pour connecter votre API à Power Platform. Ici, dans la boucle interne, vous exécutez votre API dans votre environnement local.

Exécuter votre API

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 démarrez le débogage.

    Capture d’écran de l’icône d’exécution du 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. Cliquez sur Continuer.

    Capture d’écran de la page d’avertissement initiale.

Important

N’oubliez pas de poursuivre l’exécution de l’API (dans un onglet de navigateur) lors de la création de votre Power App.

Créer une application depuis l’API

Remarque

Pour utiliser l’exemple d’application fourni à cette étape, vous devez installer les Power Platform Tools pour Visual Studio Code.

  1. Ouvrez Visual Studio Code et créez une authentification pour votre utilisateur à l’aide de la commande CLI Power Platform. Redéfinissez l’URL sur l’URL de votre environnement de développeur se trouvant dans le Centre d’administration.

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

  2. Obtenez le connecteur personnalisé que vous avez créé. Copiez l’ID connecteur.

    pac connector list

  3. Générez une application canevas (fichier *.msapp), sur la base des opérations de votre API.

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

Prévisualiser l’application

  1. Ouvrez Power Apps.

  2. Sélectionnez Application vide. Depuis Application canevas à partir de zéro, cliquez sur Créer.

    Capture d’écran de l’Assistant de création d’une application.

  3. Saisissez le nom de l’application, à savoir Inventory app, puis sélectionnez le format Tablette. Cliquez sur Créer.

    Capture d’écran de l’Assistant de création d’une application permettant de saisir un nom d’application.

  4. Dans la barre de commandes, cliquez sur … et sélectionnez Ouvrir.

    Capture d’écran montrant comment ouvrir une application existante.

  5. Cliquez sur Parcourir pour ouvrir le fichier *.msapp que vous avez créé à l’étape 3. Votre exemple d’application est alors chargé dans le studio.

    Capture d’écran du bouton Parcourir les fichiers.

  6. Dans la barre gauche, cliquez sur l’icône représentant des données, puis sur + Ajouter des données. Recherchez InventoryLocations_Connector pour sélectionner Connecter. Il s’agit du connecteur personnalisé créé à partir de l’API web.

    Capture d’écran montrant comment ajouter le connecteur personnalisé.

  7. Pour prévisualiser cette application, cliquez sur l’icône Lire.

    Capture d’écran de l’icône permettant de prévisualiser l’application.

  8. Cliquez sur le bouton d’application OBTENIR pour afficher une liste des emplacements de stockage.

    Capture d’écran de l’aperçu de l’application.

  9. Cliquez sur l’icône Fermer en haut de l’application à droite pour revenir au studio. Cliquez sur l’icône Publier pour enregistrer votre travail.

    Capture d’écran de l’icône Publier.

Conseil

  • Aucun pays n’est renvoyé à partir de l’exemple d’API ? Assurez-vous que l’API est en cours d’exécution lorsque vous créez votre application.
  • Puisque vous utilisez des tunnels de développement ici, vous pouvez itérer sur votre API en temps réel, y compris le débogage et le rechargement à chaud.

Vous avez terminé la création d’une application et d’un connecteur personnalisé depuis une API web.