Exercice - Créer des ressources Azure pour héberger une application d’onglet Teams

  • 8 minutes

Dans cet exercice, vous allez d’abord créer et provisionner une application d’onglet Teams à l’aide du Kit de ressources Teams pour Visual Studio Code. Dans un exercice ultérieur, vous allez configurer l’application pour qu’elle soit hébergée dans Azure.

Remarque

Les exercices de ce module de formation utilisent Teams Toolkit v5.0.0. Les étapes suivantes commencent par l’extension Teams Toolkit installée.

Créer une application d’onglet

  1. Dans Visual Studio Code, dans la barre d’activité, sélectionnez l’icône Microsoft Teams .

  2. Dans le panneau Kit de ressources Teams, sélectionnez le bouton Créer une application .

  3. Dans les options, sélectionnez Tab.

    Capture d’écran de l’option Teams Toolkit pour l’application onglet.

  4. Ensuite, sélectionnez React avec l’interface utilisateur Fluent.

    Capture d’écran du modèle d’application Teams Toolkit avec l’onglet sélectionné.

  5. Dans les options du langage de programmation, sélectionnez JavaScript.

  6. Sélectionnez un emplacement pour le dossier de projet de l’application onglet et tous ses fichiers.

  7. Pour le nom de l’application, entrez hello-tab , puis sélectionnez Entrée.

    La génération de modèles automatique de projet commence. Lorsque le projet est généré automatiquement, une nouvelle fenêtre Visual Studio Code s’ouvre avec le nouveau projet chargé.

    Capture d’écran du projet Nouvel onglet du Kit de ressources Teams après sa génération automatique.

  8. Dans Visual Studio Code, sélectionnez Exécuter>Démarrer le débogage ou sélectionnez la touche F5 pour démarrer la session de débogage.

    Visual Studio Code génère et démarre l’application. Exécutez la session de débogage avant de commencer à provisionner des ressources Azure.

  9. Une fois l’application testée avec succès, arrêtez l’exécution locale de l’application.

    Pour mettre fin à la session de débogage et arrêter l’exécution de l’application, vous pouvez fermer le navigateur, sélectionner Exécuter>arrêter le débogage ou sélectionner Maj+F5.

Se connecter à Azure dans teams Toolkit

Ensuite, dans le panneau Teams Toolkit, connectez-vous à Azure.

  1. Dans la barre d’activité, sélectionnez l’icône Microsoft Teams .

  2. Dans le panneau Teams Toolkit, sous Comptes, sélectionnez Se connecter à Azure.

    Capture d’écran du panneau Teams Toolkit avec le bouton permettant de se connecter à Azure.

  3. Dans la boîte de dialogue qui s’affiche, sélectionnez Se connecter.

    Capture d’écran d’une boîte de dialogue pour confirmer la connexion à Azure.

Provisionner les ressources

Vous pouvez maintenant provisionner les ressources dont votre application d’onglet Teams a besoin.

  1. Dans le panneau Teams Toolkit, sous Cycle de vie, sélectionnez Provisionner.

    Capture d’écran mettant en évidence l’option provisionner dans le cloud dans la section déploiement.

  2. Ensuite, vous devez sélectionner un groupe de ressources dans lequel vous pouvez provisionner les ressources. Créez un groupe de ressources en sélectionnant l’option Nouveau groupe de ressources dans le menu Sélectionner un groupe de ressources .

    Capture d’écran montrant comment créer un groupe de ressources.

  3. L’outil suggère automatiquement le nom du groupe de ressources comme rg-hello-tab0989fd-dev. Ensuite, sélectionnez Entrée.

  4. Ensuite, sélectionnez l’emplacement USA Est pour le nouveau groupe de ressources, puis sélectionnez Entrée.

  5. Dans une boîte de dialogue pour confirmer votre sélection, sélectionnez Provisionner.

    Capture d’écran de la boîte de dialogue pour confirmer l’approvisionnement.

    L’approvisionnement commence pour toutes les ressources dont vous avez besoin pour héberger l’application d’onglet Teams dans Azure. L’approvisionnement peut prendre un certain temps.

Vous avez maintenant provisionné avec succès toutes les ressources dont vous avez besoin pour héberger l’application d’onglet Teams.

Ensuite, vous allez déployer le code source de votre application sur ces ressources.