Créer un agent de moteur personnalisé à l’aide de la bibliothèque IA Teams et du Kit de ressources Teams

Vous pouvez créer un agent de moteur personnalisé pour Microsoft Teams afin d’obtenir un contrôle précis sur les opérations légères. Cela montre l’efficacité du modèle de langage dans la compréhension et l’exécution précises de l’intention de l’utilisateur, en l’alignant sur les actions de l’application.

Dans ce tutoriel, vous allez apprendre à :

Comment configurer un nouveau projet avec Teams Toolkit.
Comment importer les fonctionnalités de la bibliothèque IA Teams.
Comment déployer votre agent de moteur personnalisé dans Teams et contrôler les opérations légères.

Vous pouvez voir la sortie suivante :

Capture d’écran montrant un exemple de fenêtre de conversation sur l’ordinateur local.

Configuration requise

5 minutes restantes

Voici une liste des outils dont vous avez besoin pour créer et déployer votre agent de moteur personnalisé.

	Installer	Pour l’utilisation...
	Toolkit Teams	Microsoft Visual Studio Code extension qui crée une structure de projet pour votre application. Utilisez la dernière version.
	Microsoft Teams	Pour collaborer avec tout le monde, vous utilisez des applications pour la conversation, les réunions et les appels au même endroit.
	Node.js	Environnement runtime JavaScript principal. Pour plus d’informations, consultez Node.js table de compatibilité des versions pour le type de projet.
	Microsoft Edge (recommandé) ou Google Chrome	Un navigateur avec des outils de développement.
	Visual Studio Code	Environnements de build JavaScript, TypeScript et Python. Utilisez la dernière version.
	OpenAI ou Azure OpenAI	Commencez par créer votre clé API OpenAI pour utiliser le GPT d’OpenAI. Si vous souhaitez héberger votre application ou accéder à des ressources dans Microsoft Azure, vous devez créer un service Azure OpenAI avant de commencer.
	Compte de développeur Microsoft 365	Accès au compte Teams avec les autorisations appropriées pour installer une application.

Préparer l’environnement de développement

Une fois que vous avez installé les outils requis, configurez l’environnement de développement.

Installer le kit de ressources Teams

Teams Toolkit permet de simplifier le processus de développement avec des outils permettant de provisionner et de déployer des ressources cloud pour votre application, de publier dans le Magasin Teams, etc.

Vous pouvez utiliser le kit de ressources avec Visual Studio Code. Vous pouvez également utiliser l’interface CLI (interface de ligne de commande), appelée teamsapp.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code et sélectionnez la vue Extensions (Ctrl+Maj+X / ⌘⇧-X ou Afficher > les extensions).
Dans la zone de recherche, entrez Teams Toolkit.
Sélectionnez Installer en regard du Kit de ressources Teams.

L’icône du Kit de ressources Teams s’affiche dans la barre d’activité Visual Studio Code après son installation.

Vous pouvez également trouver le Kit de ressources Teams sur la Place de marché Visual Studio Code.

Pour installer l’interface CLI Teamsapp, utilisez le gestionnaire de npm package :

npm install -g @microsoft/teamsapp-cli

Selon votre configuration, vous devrez peut-être utiliser sudo pour installer l’interface CLI :

sudo npm install -g --unsafe-perm @microsoft/teamsapp-cli

Cette condition est plus courante sur les systèmes Linux et macOS.

Veillez à ajouter le cache global npm à votre chemin d’accès. Cette étape est normalement effectuée dans le cadre du programme d’installation Node.js.

Vous pouvez utiliser l’interface CLI avec la teamsapp commande . Vérifiez que la commande fonctionne en exécutant teamsapp -h.

Attention

Avant de pouvoir exécuter Teamsapp dans les terminaux PowerShell, vous devez activer la stratégie d’exécution « signée à distance » pour PowerShell.

Configurer votre locataire de développement Teams

Un locataire est comme un espace ou un conteneur pour votre organization dans Teams, où vous discutez, partagez des fichiers et exécutez des réunions. Cet espace est également l’endroit où vous chargez et testez votre application personnalisée. Vérifions si vous êtes prêt à développer avec le locataire.

Rechercher l’option de chargement d’application personnalisée

Après avoir créé l’application, vous devez charger votre application dans Teams sans la distribuer. Ce processus est appelé chargement d’application personnalisée. Connectez-vous à votre compte Microsoft 365 pour afficher cette option.

Remarque

Le chargement d’applications personnalisées est nécessaire pour afficher un aperçu et tester les applications dans l’environnement local Teams. S’il n’est pas activé, vous ne pouvez pas afficher un aperçu et tester votre application dans l’environnement local Teams.

Avez-vous déjà un locataire et disposez-vous de l’accès administrateur ? Nous allons case activée si vous le faites vraiment !

Vérifiez si vous pouvez charger une application personnalisée dans Teams :

Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option Charger une application personnalisée. Si vous voyez l’option , le chargement d’applications personnalisées est activé.

Remarque

Si vous ne trouvez pas l’option de charger une application personnalisée, contactez votre administrateur Teams.

Créer un locataire développeur Teams gratuit (facultatif)

Si vous n’avez pas de compte de développeur Teams, vous pouvez l’obtenir gratuitement. Rejoignez le programme des développeurs Microsoft 365 !

Accédez auProgramme pour les développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant et suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche.
Connectez-vous à Teams à l’aide du compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Obtenir un compte Azure gratuit

Si vous souhaitez héberger votre application ou accéder à des ressources dans Azure, vous devez disposer d’un abonnement Azure. Créez un compte gratuit avant de commencer.

Vous disposez maintenant de tous les outils pour configurer votre compte. L’environnement de développement est prêt à commencer à générer le projet d’application.

Créer un espace de travail de projet pour votre application d’agent de moteur personnalisé

4 minutes restantes

Nous allons créer votre première application d’agent de moteur personnalisé.

La fonctionnalité d’agent de moteur personnalisé d’une application Teams crée un chatbot IA. Vous l’utilisez pour exécuter des tâches simples et automatisées, par exemple, en fournissant un service clientèle. Un agent de moteur personnalisé communique avec un service web et vous aide à utiliser ses offres. Vous pouvez obtenir des prévisions météorologiques, effectuer des réservations ou tout autre service proposé à l’aide de l’agent du moteur personnalisé.

Comme vous avez déjà préparé la création de l’application ou de l’agent de moteur personnalisé, vous pouvez configurer un nouveau projet Teams pour créer l’agent de moteur personnalisé.

Dans ce tutoriel, vous allez apprendre à :

Comment configurer un nouveau projet d’agent de moteur personnalisé avec Teams Toolkit.
À propos de la structure de répertoires de votre projet d’application.

Créer votre espace de travail de projet d’agent de moteur personnalisé

Si les conditions préalables sont en place, commençons !

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Sélectionnez l’icône Teams Toolkit dans la barre d’activité Visual Studio Code.
Sélectionnez Créer une application.
Sélectionnez Agent du moteur personnalisé.
Sélectionnez Chatbot IA de base.
Sélectionnez TypeScript comme langage de programmation.
Sélectionnez OpenAI ou Azure OpenAI.
Entrez Clé OpenAI ou Clé Azure OpenAI et Point de terminaison Azure OpenAI.
Sélectionnez Dossier par défaut pour stocker le dossier racine de votre projet à l’emplacement par défaut.

Vous pouvez également modifier l’emplacement par défaut en procédant comme suit :
1. Sélectionnez Parcourir.
2. Sélectionnez l’emplacement de l’espace de travail du projet.
3. Sélectionnez Sélectionner un dossier.
Entrez un nom approprié pour votre application, puis sélectionnez Entrée.

Une boîte de dialogue s’affiche. Sélectionnez Oui, Je fais confiance aux auteurs ou Non, je ne fais pas confiance aux auteurs en fonction de vos besoins.

Votre agent de moteur personnalisé est créé en quelques secondes.

Une fois votre application créée, le kit de ressources Teams affiche le message suivant :

Récapitulatif rapide de la création d’une application Teams.

Regardez ce bref récapitulatif pour la création d’une application Teams.

Créer une application Teams

Utilisez le CLI teamsapp pou créer votre premier projet. Commencez à partir du dossier dans lequel vous souhaitez créer le dossier du projet.

teamsapp new

Vous pouvez utiliser l’interface CLI pour créer une application Teams. L’interface CLI vous guide à travers une série de questions. Chaque question comprend une instruction sur la réponse.

Par exemple, utilisez les touches de direction pour sélectionner une option. Une fois le choix fait, sélectionnez Entrée pour le confirmer.

Sélectionnez Créer une application Teams.
Sélectionnez Bot et désélectionnez Tab.
Sélectionnez JavaScript comme langage de programmation.
Sélectionnez Entrée pour sélectionner le dossier d’espace de travail par défaut.
Entrez un nom approprié pour votre application, tel que HelloBot. Le nom de l’application doit contenir des caractères alphanumériques uniquement.

Une fois que vous avez répondu à toutes les questions, votre projet est créé.

Découvrez le code source de l’application

Une fois la génération de modèles automatique effectuée, affichez les répertoires de projet et les fichiers dans la zone Explorer de Visual Studio Code.

Capture d’écran montrant l’exemple de dossier de bot Teams Toolkit Structure.

Nom du dossier	Sommaire
`env/.env.local.user`	Fichier de configuration pour l’environnement local utilisé par `teamsapp.yml` pour personnaliser les règles d’approvisionnement et de déploiement.
`index.ts`	Point d’entrée principal de l’application.
`teamsBot.ts`	Gestionnaire d’activités Teams.
`appPackage`	Fichiers de modèle de manifeste d’application et icônes d’application (color.png et outline.png).
`appPackage/manifest.json`	Manifeste d’application pour l’exécution de l’application dans un environnement local et distant.
`config.ts`	`config.ts` encapsule l’accès aux variables d’environnement utilisées pour configurer l’adaptateur de bots.
`teamsapp.yml`	Il s’agit du projet main Kit de ressources Teams qui définit les propriétés et les définitions de phase de configuration.
`teamsapp.local.yml`	Cela remplace teamsapp.yml par des actions qui permettent l’exécution et le débogage locaux.

Générer et exécuter votre premier agent de moteur personnalisé

3 minutes restantes

Après avoir configuré votre espace de travail de projet avec Teams Toolkit, générez votre projet. Vérifiez que vous êtes connecté à votre compte Microsoft 365.

Utilisez ce compte pour vous connecter à Teams. Si vous utilisez un locataire du programme de développement Microsoft 365, le compte d’administrateur que vous avez configuré lors de l’inscription est votre compte Microsoft 365.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Sélectionnez l’icône Teams Toolkit dans la barre latérale.
Sélectionnez Se connecter à M365.

Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte.
Connectez-vous à votre compte Microsoft 365 à l’aide de vos informations d’identification.
Fermez le navigateur lorsque vous y êtes invité et revenez à Visual Studio Code.
Revenez au Kit de ressources Teams dans Visual Studio Code.

Utilisez ce compte pour vous connecter à Teams. Si vous utilisez un locataire du programme de développement Microsoft 365, le compte d’administrateur que vous avez configuré lors de l’inscription est votre compte Microsoft 365.

Vous êtes maintenant prêt à générer l’application et à l’exécuter localement !

Connectez-vous à Microsoft 365 avec l’interface CLI Teamsapp :
```
teamsapp account login m365
```
Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte. Connectez-vous à votre compte Azure à l’aide de vos informations d’identification. Fermez le navigateur lorsque vous y êtes invité.
Connectez-vous à Azure avec l’interface CLI Teamsapp :
```
teamsapp account login azure
```
Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte. Connectez-vous à votre compte Azure à l’aide de vos informations d’identification. Fermez le navigateur lorsque vous y êtes invité.

Les connexions de compte sont partagées entre Visual Studio Code et l’interface CLI Teamsapp.

Maintenant que l’environnement de développement est configuré, vous pouvez créer, générer et déployer votre première application Teams.

Mettre à jour votre agent de moteur personnalisé avec les fonctionnalités de bibliothèque d’IA Teams

Teams Toolkit est le moyen le plus simple de créer une structure et d’exécuter un agent de moteur personnalisé. Teams Toolkit crée la structure de base pour vous permettre de commencer à configurer votre agent de moteur personnalisé.

Commençons par configurer les fonctionnalités de bibliothèque d’IA Teams :

Accédez à Visual Studio Code et ouvrez une fenêtre de terminal.
Exécutez la commande suivante dans le terminal pour installer yarn:
```
npm install
npm install @microsoft/teams-ai
```
Remarque

Si vous créez l’exemple par le biais de Teams Toolkit, vous trouverez le .env.local.user fichier dans l’installation qui est créé automatiquement. Si le fichier n’est pas disponible, créez le .env.local.user fichier et mettez à jour la clé OpenAI ou la clé Azure OpenAI et le point de terminaison Azure OpenAI.

Accédez au app.ts fichier :

Ajoutez TurnContext à l’instruction import comme suit :


import { MemoryStorage, TurnContext} from 'botbuilder';

Ajoutez DefaultConversationState, Memory, TurnState à l’instruction "@microsoft/teams-ai" import comme suit :

     // See https://aka.ms/teams-ai-library to learn more about the Teams AI library.
     import { Application, ActionPlanner, DefaultConversationState, Memory, TurnState, OpenAIModel, PromptManager } from "@microsoft/teams-ai";

Après « @microsoft/teams-ai », ajoutez ce qui suit :

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface ConversationState extends DefaultConversationState {
  lightsOn: boolean;
}
type ApplicationTurnState = TurnState<ConversationState>;

if (!process.env.OPENAI_API_KEY) {
throw new Error('Missing environment variables - please check that OPENAI_KEY or AZURE_OPENAI_KEY is set.');
}

Après Define storage and application code, ajoutez ce qui suit :

// Define a prompt function for getting the current status of the lights
planner.prompts.addFunction('getLightStatus', async (context: TurnContext, memory: Memory) => {
return memory.getValue('conversation.lightsOn') ? 'on' : 'off';
});

Après return memory.getValue('conversation.lightsOn') ? 'on' : 'off';, ajoutez ce qui suit :

// Register action handlers
app.ai.action('LightsOn', async (context: TurnContext, state: ApplicationTurnState) => {
    state.conversation.lightsOn = true;
    await context.sendActivity(`[lights on]`);
    return `the lights are now on`;
});

app.ai.action('LightsOff', async (context: TurnContext, state: ApplicationTurnState) => {
    state.conversation.lightsOn = false;
    await context.sendActivity(`[lights off]`);
    return `the lights are now off`;
});

interface PauseParameters {
    time: number;
}

app.ai.action('Pause', async (context: TurnContext, state: ApplicationTurnState, parameters: PauseParameters) => {
    await context.sendActivity(`[pausing for ${parameters.time / 1000} seconds]`);
    await new Promise((resolve) => setTimeout(resolve, parameters.time));
    return `done pausing`;
});

Accédez au adapter.ts fichier :

Sous Import required bot services., supprimez le code existant et mettez à jour les éléments suivants :

// Import required bot services.
// See https://aka.ms/bot-services to learn more about the different parts of a bot.
import { TeamsAdapter } from '@microsoft/teams-ai';
import { ConfigurationServiceClientCredentialFactory } from 'botbuilder';

Supprimez le code suivant sous This bot's main dialog.:

// This bot's main dialog.
import config from "./config";

const botFrameworkAuthentication = new ConfigurationBotFrameworkAuthentication(
{},
new ConfigurationServiceClientCredentialFactory(config)
);

Après import { ConfigurationServiceClientCredentialFactory } from 'botbuilder';, remplacez le code sous par Create adapter. ce qui suit :

// Create adapter.
// See https://aka.ms/about-bot-adapter to learn more about how bots work.
const adapter = new TeamsAdapter(
    {},
    new ConfigurationServiceClientCredentialFactory({
        MicrosoftAppId: process.env.BOT_ID,
        MicrosoftAppPassword: process.env.BOT_PASSWORD,
        MicrosoftAppType: 'MultiTenant'
    })
);

Accédez au index.ts fichier :

Dans , Create HTTP server.après console.log(\nBot Démarré, ${server.name} à l’écoute de ${server.url}); ajoutez les éléments suivants :

console.log('\nGet Bot Framework Emulator: https://aka.ms/botframework-emulator');
console.log('\nTo test your bot in Teams, sideload the app manifest.json within Teams Apps.');

Dans le dossier racine, créez unenouvelle structure de dossiers : séquence d’invites>.
Sous séquence, créez les fichiers suivants :
- config.json
- skprompt.txt
- actions.json
Accédez au config.json fichier et ajoutez le code suivant pour créer les paramètres du modèle d’invite :
```
{
    "schema": 1.1,
    "description": "A bot that can turn the lights on and off",
    "type": "completion",
    "completion": {
        "model": "gpt-3.5-turbo",
        "completion_type": "chat",
        "include_history": true,
        "include_input": true,
        "max_input_tokens": 2800,
        "max_tokens": 1000,
        "temperature": 0.2,
        "top_p": 0.0,
        "presence_penalty": 0.6,
        "frequency_penalty": 0.0,
        "stop_sequences": []
    },
    "augmentation": {
        "augmentation_type": "sequence"
    }
}
```
L’agent de moteur personnalisé utilise OpenAI ou Azure OpenAI pour sa modélisation en langage naturel. Le config.json fichier gère le traitement de la langue pour l’agent du moteur personnalisé. Ce fichier, initié par le PromptManager à partir du index.ts fichier, supervise le traitement de la langue de l’agent. Lors de l’initialisation d’une invite, le gestionnaire d’invites recherche le fichier de configuration de l’invite (séquence/config.json) et transmet les paramètres d’invite à OpenAI ou Azure OpenAI.
Accédez au skprompt.txt fichier. Ajoutez les instructions suivantes pour OpenAI ou Azure OpenAI afin de mener et de faciliter la conversation :
```
The following is a conversation with an AI assistant.
The assistant can turn a light on or off.

context:
The lights are currently {{getLightStatus}}.
```
Le skprompt.txt fichier contient des invites texte avec lesquelles les utilisateurs interagissent avec OpenAI ou Azure OpenAI. OpenAI ou Azure OpenAI tente d’utiliser ces invites pour produire la série suivante de mots qui sont les plus susceptibles de suivre le texte précédent.

Accédez au actions.json fichier. Ajoutez le code suivant pour définir les actions de l’agent de moteur personnalisé :

{

    {
        "name": "LightsOn",
        "description": "Turn the lights on",
        "parameters": []
    },
    {
        "name": "LightsOff",
        "description": "Turn the lights off",
        "parameters": []
    },
    {
        "name": "Pause",
        "description": "Delays for a period of time",
        "parameters": {
            "type": "object",
            "properties": {
                "time": {
                    "type": "number",
                    "description": "The amount of time to delay in milliseconds"
                }
            },
            "required": [
                "time"
            ]
        }
    }
}

Le actions.json fichier contient les actions que l’agent du moteur personnalisé peut effectuer. Le ActionPlanner du index.ts fichier utilise les actions définies dans le actions.json fichier pour effectuer les actions.

Cet exemple utilise OpenAI ou Azure OpenAI pour toute sa modélisation en langage naturel. L’utilisateur peut parler à l’agent du moteur personnalisé dans n’importe quelle langue de son choix. L’agent du moteur personnalisé comprend et répond de manière appropriée sans code supplémentaire.

Générer et exécuter votre agent de moteur personnalisé localement

Pour générer et exécuter votre application dans l’environnement local :

Sélectionnez la touche F5 pour exécuter votre application en mode débogage.

Remarque

Si le Kit de ressources Teams ne peut pas case activée un prérequis particulier, il vous invite à case activée.
Découvrez ce qui se passe lorsque vous exécutez votre application localement dans le débogueur.

Si vous vous demandez, lorsque vous appuyez sur la touche F5 , le Kit de ressources Teams :
1. Vérifie tous les prérequis suivants :
- Vous êtes connecté avec un compte Microsoft 365.
- Le chargement d’applications personnalisées est activé pour votre compte Microsoft 365.
- La version Node.js prise en charge est installée.
- Le port requis par l’application de bot est disponible.
1. Installez les packages npm.
2. Démarre Dev Tunnel pour créer un tunnel HTTP.
3. Inscrit l’application dans Microsoft Entra ID et configure l’application.
4. Inscrit l’application dans le Kit de développement logiciel (SDK) Bot Framework et configure l’application.
5. Inscrit l’application dans le portail des développeurs Teams et configure l’application.
6. Démarre l’application.
7. Démarre Teams dans un navigateur web et charge l’application.
Remarque

Lorsque vous exécutez l’application pour la première fois, toutes les dépendances sont téléchargées et l’application est générée. Une fenêtre de navigateur s’ouvre automatiquement lors la build est terminée. Ce processus peut prendre trois à cinq minutes.

Teams exécute votre application dans un navigateur web.
Connectez-vous avec votre compte Microsoft 365, si vous y êtes invité.
Sélectionnez Ajouter lorsque vous êtes invité à charger votre application sur Teams sur votre ordinateur local.

Maintenant, l’agent de moteur personnalisé s’exécute correctement sur Teams ! Une fois l’application chargée, une session de conversation avec l’agent du moteur personnalisé s’ouvre.

Vous pouvez taper LightsOn pour commencer à interagir avec l’agent du moteur personnalisé.

Découvrez comment résoudre les problèmes si votre application ne s’exécute pas localement.

Pour exécuter correctement votre application dans Teams, vérifiez que vous avez activé le chargement d’applications personnalisées dans votre compte Teams. Vous pouvez en savoir plus sur le chargement d’applications personnalisées dans la section Conditions préalables.

Importante

Le chargement d’applications personnalisées est disponible dans les environnements Government Community Cloud (GCC), GCC-High et Department of Defense (DOD).

Conseil

Vérifiez les problèmes avant de charger une application personnalisée à l’aide de l’outil de validation d’application. Cet outil est inclus dans le kit de ressources. Corrigez les erreurs de chargement de l’application.

Déployer votre agent de moteur personnalisé

2 minutes restantes

Vous avez appris à créer, générer et exécuter l’agent de moteur personnalisé. La dernière étape consiste à déployer votre application sur Azure.

Déployons l’agent de moteur personnalisé sur Azure à l’aide du kit de ressources Teams.

Utilisez ce compte pour accéder à Microsoft Portail Azure et provisionner de nouvelles ressources cloud pour prendre en charge votre application.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Ouvrez le dossier de projet dans lequel vous avez créé l’application.
Sélectionnez l’icône Teams Toolkit dans la barre latérale.
Sélectionnez Se connecter à Azure.

Conseil

Si l’extension compte Azure est installée et que vous utilisez le même compte, vous pouvez ignorer cette étape. Utilisez le même compte que celui que vous utilisez dans d’autres extensions.

Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte.
Connectez-vous à votre compte Azure à l’aide de vos informations d’identification.
Fermez le navigateur lorsque vous y êtes invité et revenez à Visual Studio Code.

La section COMPTES dans la barre latérale affiche les deux comptes séparément. Il répertorie également le nombre d’abonnements Azure utilisables disponibles. Vérifiez que vous disposez d’au moins un abonnement Azure utilisable. Si ce n’est pas le cas, déconnectez-vous et utilisez un autre compte.

Vous êtes maintenant prêt à déployer votre application sur Azure !

Félicitations, vous avez créé un agent de moteur personnalisé !

Connectez-vous à Microsoft 365 avec l’interface CLI Teamsapp :
```
teamsapp account login m365
```
Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte. Connectez-vous à votre compte Azure à l’aide de vos informations d’identification. Fermez le navigateur lorsque vous y êtes invité.
Connectez-vous à Azure avec l’interface CLI Teamsapp :
```
teamsapp account login azure
```
Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte. Connectez-vous à votre compte Azure à l’aide de vos informations d’identification. Fermez le navigateur lorsque vous y êtes invité.

Les connexions de compte sont partagées entre Visual Studio Code et l’interface CLI Teamsapp.

Félicitations, vous êtes connecté à votre compte Azure !

Déployer votre application vers Azure

Le déploiement se compose de deux étapes. Tout d’abord, les ressources cloud nécessaires sont créées (également appelées approvisionnement). Ensuite, le code de votre application est copié dans les ressources cloud créées. Pour ce tutoriel, vous allez déployer l’agent de moteur personnalisé.

Quelle est la différence entre provisionner et déployer ?

L’étape Provisionner crée des ressources dans Azure et Microsoft 365 pour votre application, mais aucun code (HTML, CSS, JavaScript) n’est copié dans les ressources. L’étape Déployer copie le code de votre application dans les ressources que vous avez créées pendant l’étape de provisionnement. Il est courant de déployer plusieurs fois sans provisionner de nouvelles ressources. Étant donné que l’étape de provisionnement peut prendre un certain temps, elle est distincte de l’étape de déploiement.

Visual Studio Code
Ligne de commande

Sélectionnez l’icône du kit de ressources Teams dans la barre latérale Visual Studio Code.

Sélectionnez Provisionner.
Sélectionnez un abonnement à utiliser pour les ressources Azure.

Votre application est hébergée à l’aide de ressources Azure.

Une boîte de dialogue vous avertit que des coûts peuvent être induits lors de l’exécution de ressources dans Azure.
Sélectionnez Provisionner.

Le processus d’approvisionnement crée des ressources dans le cloud Azure. Cela peut prendre un certain temps. Vous pouvez surveiller la progression en regardant les dialogues dans le coin inférieur droit. Après quelques minutes, vous voyez l’avis suivant :

Si vous le souhaitez, vous pouvez afficher les ressources approvisionnées. Pour ce didacticiel, vous n’avez pas besoin d’afficher les ressources.

La ressource provisionnée apparaît dans la section ENVIRONNEMENT .
Sélectionnez Déployer dans le panneau LIFECYCLE une fois l’approvisionnement terminé.

Comme pour l’approvisionnement, le déploiement prend un certain temps. Vous pouvez surveiller le processus en regardant les dialogues dans le coin inférieur droit. Après quelques minutes, vous voyez un avis d’achèvement.

À présent, vous pouvez utiliser le même processus pour déployer votre agent de moteur personnalisé sur Azure.

Dans la fenêtre de votre terminal :

Exécutez teamsapp provision.
```
teamsapp provision
```

Lorsque vous y êtes invité, sélectionnez un abonnement Azure pour utiliser des ressources Azure.

Votre application est hébergée à l’aide de ressources Azure.

Exécutez teamsapp deploy.
```
teamsapp deploy
```

Exécuter l’application déployée

Une fois les étapes de provisionnement et de déploiement terminées :

Ouvrez le panneau de débogage (Ctrl+Maj+D / ⌘⇧-D ou Afficher > l’exécution) à partir de Visual Studio Code.
Sélectionnez Lancer à distance (Edge) dans la liste déroulante de configuration de lancement.
Sélectionnez Démarrer le débogage (F5) pour lancer votre application à partir d’Azure.
Sélectionnez Ajouter.

Le kit de ressources affiche un message indiquant que l’application est ajoutée à Teams.

Votre application est chargée sur le client Teams.

Découvrez ce qui se passe lorsque vous avez déployé votre application sur Azure

Avant le déploiement, l’application s’est exécutée localement :

Le serveur principal s’exécute en utilisant Azure Functions Core Tools.
Le point de terminaison HTTP de l’application, dans lequel Microsoft Teams charge l’application, s’exécute localement.

Le déploiement est un processus en deux étapes. Vous approvisionnez les ressources sur un abonnement Azure actif, puis vous déployez ou chargez le code back-end et front-end pour l’application dans Azure.

Le back-end, s’il est configuré, utilise différents services Azure, notamment Azure App Service et Stockage Azure.
L’application frontend est déployée sur un compte de stockage Azure configuré pour l’hébergement web statique.