Créer un connecteur personnalisé pour une API existante

  • 20 minutes

Dans cet exercice, vous allez créer votre premier connecteur personnalisé pour une API existante nommée Contoso Invoicing.

Important

Utilisez un environnement de test avec Microsoft Dataverse approvisionné. Si vous ne disposez pas d’un environnement de test, vous pouvez vous inscrire pour bénéficier de l’offre Communauté Power Apps.

Tâche : examiner l’API

Pour examiner l’API, procédez comme suit :

  1. Accédez à Contoso Invoicing.

  2. Cliquez sur le lien vers la documentation.

    Capture d’écran d’une flèche pointant vers le lien vers la documentation de l’API.

  3. Examinez les opérations disponibles.

  4. Sélectionnez chaque opération pour la développer et la passer en revue.

  5. Fermez l’onglet ou la fenêtre de navigateur de la documentation.

  6. Cliquez sur le lien vers la définition OpenAPI.

  7. L’image suivante montre un exemple de la version OpenAPI de ce qui était affiché sur la page de documentation. Cliquez avec le bouton droit et sélectionnez Enregistrer sous.

    Capture d’écran d’une flèche pointant vers le bouton Enregistrer sous.

  8. Enregistrez le fichier localement. Vous utiliserez ce fichier ultérieurement dans l’exercice.

  9. Fermez l’onglet ou la fenêtre de navigateur de la définition.

  10. Cliquez sur le lien Clé API.

  11. Copiez et enregistrez votre clé API, car vous allez en avoir besoin plus tard.

    Capture d’écran de la clé API pour Contoso Invoicing.

  12. Cliquez sur Retour à la page d’accueil.

  13. Cliquez sur Télécharger le logo.

  14. Enregistrez l’image du logo localement afin de l’utiliser ultérieurement.

Tâche : créer une solution

Pour créer une solution, procédez comme suit :

  1. Accédez à Power Apps Maker Portal et veillez à vous trouver dans l’environnement approprié.

  2. Cliquez sur Solutions > + Nouvelle solution.

  3. Saisissez Contoso Invoicing dans le champ Nom d’affichage, puis cliquez sur + Nouvel éditeur.

    Capture d’écran illustrant le bouton + Nouvel éditeur.

  4. Saisissez Contoso pour le Nom d’affichage, Contoso pour le Nom, contoso pour le Préfixe, puis cliquez sur Enregistrer.

  5. Sélectionnez Contoso pour l’Éditeur, puis cliquez sur Créer. Lorsque vous travaillez sur un vrai projet, il est préférable de créer votre éditeur.

    Capture d’écran des détails de la création d’une solution Contoso Invoicing.

  6. Ne quittez pas cette page après avoir cliqué sur Créer.

Tâche : créer un connecteur

Pour créer un connecteur, procédez comme suit :

  1. Ouvrez la solution Contoso Invoicing que vous avez créée.

  2. Cliquez sur + Nouveau, puis sélectionnez Automatisation > Connecteur personnalisé.

    Capture d’écran d’une flèche pointant vers la création d’une connexion personnalisée.

  3. Saisissez Contoso Invoicing pour Nom du connecteur, puis cliquez sur Charger l’image.

    Capture d’écran d’une flèche pointant vers le bouton de chargement d’une image.

  4. Sélectionnez le logo du connecteur que vous avez téléchargé lors de la Tâche 1 : examiner l’API.

  5. Saisissez #175497 pour Couleur d’arrière-plan de l’icône.

  6. Saisissez Connecteur personnalisé pour l’API Contoso Invoicing pour la Description.

  7. Saisissez contosoinvoicingtest.azurewebsites.net pour l’Hôte.

  8. Cliquez sur Créer le connecteur.

    Capture d’écran du bouton Créer un connecteur personnalisé.

  9. Ne quittez pas cette page.

Tâche : importer la définition OpenAPI

Pour importer la définition OpenAPI, procédez comme suit :

  1. Cliquez sur la flèche en regard de Nom du connecteur.

    Capture d’écran d’une flèche pointant vers le bouton Précédent.

  2. Cliquez sur les points de suspension (…) du connecteur, puis sélectionnez Mettre à jour à partir du fichier OpenAPI.

    Capture d’écran d’une flèche pointant vers le bouton Mettre à jour à partir du fichier OpenAPI.

  3. Cliquez sur Importer.

  4. Sélectionnez le fichier swagger.json que vous avez téléchargé lors de la Tâche 1 : examiner l’API, puis cliquez sur Ouvrir.

  5. Cliquez sur Continuer.

  6. Renseignez l’URL de l’hôte en spécifiant contosoinvoicingtest.azurewebsites.net, puis cliquez sur Sécurité.

    Capture d’écran d’une flèche pointant vers l’onglet Sécurité.

  7. Notez que les champs sont renseignés à partir du fichier importé.

  8. Ne quittez pas cette page.

Tâche : examiner et ajuster les définitions

Pour examiner et ajuster les définitions, procédez comme suit :

  1. Cliquez sur l’onglet Définition.

  2. Prenez quelques minutes pour examiner les opérations importées.

  3. Notez le cercle d’information bleu en regard de GetInvoice.

  4. Sélectionnez l’opération GetInvoice.

    Capture d’écran illustrant l’opération GetInvoice.

  5. Notez que l’opération indique qu’il manque un Résumé.

  6. Saisissez Obtenir la facture comme Résumé pour améliorer la convivialité.

    Capture d’écran du résumé de l’action Obtenir la facture.

  7. Notez le cercle d’information bleu en regard de l’opération PayInvoice, ce qui indique qu’il manque une Description.

  8. Entrez Payer une facture pour la Description.

  9. Supprimez les deux opérations NewInvoice inutiles.

    Capture d’écran illustrant le bouton Supprimer l’action.

  10. Sélectionnez l’opération GetInvoiceSchema.

  11. Redéfinissez l’option Visibilité sur interne afin qu’elle ne s’affiche pas dans la liste d’actions des utilisateurs.

  12. Cliquez sur Mettre à jour le connecteur.

    Capture d’écran d’une flèche pointant vers le bouton Mettre à jour le connecteur.

  13. Ne quittez pas cette page.

Tâche : tester le connecteur

Pour tester le connecteur, procédez comme suit :

  1. Cliquez sur l’onglet Test.

  2. Cliquez sur + Nouvelle connexion.

    Capture d’écran d’une flèche pointant vers le bouton Nouvelle connexion.

  3. Collez la Clé API que vous avez enregistrée lors de la Tâche 1 : examiner l’API, puis cliquez sur Créer une connexion.

  4. Cliquez sur le bouton Actualiser.

    Capture d’écran d’une flèche pointant vers le bouton Actualiser.

  5. Cliquez sur ListInvoiceTypes > Opération de test.

    Capture d’écran d’une flèche pointant vers le bouton Opération de test.

  6. Vous devriez voir les données des types de factures dans la zone du corps.

    Capture d’écran des types de factures.

Tâche : utiliser un connecteur personnalisé dans une application canevas

Lors de cette tâche, vous allez créer une application canevas et afficher une liste de factures à l’aide du connecteur personnalisé que vous avez créé.

  1. Accédez à Power Apps Maker Portal et vérifiez que vous vous trouvez dans l’environnement approprié.

  2. Cliquez sur Solutions, puis ouvrez la solution Contoso Invoicing que vous avez créée.

  3. Cliquez sur + Nouveau, puis sélectionnez Application > Application canevas.

    Capture d’écran illustrant le bouton + Nouveau permettant de créer une application canevas.

  4. Saisissez Application Contoso Invoicing pour le Nom de l’application, sélectionnez Téléphone pour le Format, puis cliquez sur Créer.

  5. Cliquez sur l’onglet Données, puis sur + Ajouter des données, développez Connecteurs, puis sélectionnez le connecteur personnalisé Contoso Invoicing que vous avez créé.

    Capture d’écran illustrant le connecteur personnalisé Contoso Invoicing.

  6. Cliquez sur + Ajouter un connecteur.

  7. Collez la Clé API que vous avez enregistrée lors de la Tâche 1 : examiner l’API, puis cliquez sur Connecter.

  8. Cliquez sur OK dans la fenêtre contextuelle d’avertissement premium.

  9. Cliquez sur l’onglet Arborescence.

  10. Cliquez sur + Insérer, puis sélectionnez Galerie verticale.

    Capture d’écran illustrant le bouton Insérer et l’option Galerie verticale.

  11. Sélectionnez ContosoInvoicing pour les Données.

    Capture d’écran illustrant la boîte de dialogue Sélectionner les données.

  12. Définissez la propriété Items sur la valeur ci-dessous.

    ContosoInvoicing.ListInvoices().invoices

    Capture d’écran illustrant la propriété Items de la galerie.

  13. Développez la galerie et sélectionnez le composant Sous-titre.

  14. Définissez la propriété Text du composant Sous-titre sur ThisItem.amount.

  15. Développez la galerie et sélectionnez le composant Titre dans la galerie.

  16. Définissez la propriété Text du composant Titre sur ThisItem.accountName.

    Capture d’écran illustrant la propriété Text du composant Titre.

  17. La galerie devrait maintenant ressembler à l’image ci-dessous.

    Capture d’écran illustrant la galerie.