Ajouter une fonctionnalité d’onglet à l’application Teams

Article
12/17/2024

Les onglets sont des pages web incorporées dans Microsoft Teams. Les onglets fonctionnent comme des balises HTML iframe simples qui pointent vers des domaines déclarés dans le manifeste d’application (précédemment appelé manifeste d’application Teams). Vous pouvez ajouter l’onglet en tant que fonctionnalité à une application Teams dans un canal au sein d’une équipe, d’une conversation de groupe ou d’une application personnelle pour un utilisateur individuel. Vous pouvez inclure des onglets personnalisés avec votre application pour incorporer votre propre contenu web dans Teams ou ajouter des fonctionnalités Teams spécifiques à votre contenu web. Pour plus d’informations, consultez les onglets de génération pour Teams.

Avant de commencer, nous vous recommandons de créer et de parcourir une application d’onglet. Pour plus d’informations, consultez Créer une application d’onglet avec teams Toolkit.

Configuration requise

Vérifiez que les conditions préalables suivantes sont remplies pour configurer la fonctionnalité d’onglet dans une application Teams :

Application Teams et son fichier manifeste d’application
Compte Microsoft 365 pour tester l’application
Compte Microsoft Azure

Onglet Configurer dans l’application Teams

Les étapes suivantes vous aident à configurer la fonctionnalité d’onglet dans une application Teams :

Mettre à jour le manifeste de l’application
Configurer l’environnement de débogage local
Provisionner l’application dans Azure

Conseil

Si vous développez une application d’onglet côté serveur, vous n’avez pas besoin de mettre à jour la structure de dossiers, le profil de débogage ou l’infrastructure Bicep. Ajoutez de nouveaux itinéraires à l’onglet de votre service de bot et mettez à jour le manifeste de l’application dans teams Toolkit. Pour plus d’informations, consultez Exemple d’application.

Mettre à jour le manifeste de l’application

Pour configurer votre onglet dans une conversation personnelle, une conversation de groupe ou un canal, mettez à jour le manifest.json fichier avec le code suivant :

  "staticTabs": [
      {
          "entityId": "index",
          "name": "Personal Tab",
          "contentUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
          "websiteUrl": "${{TAB_ENDPOINT}}/index.html#/tab",
          "scopes": [
              "personal",
              "groupChat",
              "team"
          ]
      }
  ],

Mettez à jour la valeur de validDomains avec le domaine de votre onglet.
```
"validDomains": [
    "${{TAB_DOMAIN}}"
],
```
Remarque

TAB_ENDPOINT et TAB_DOMAIN sont des variables intégrées du Kit de ressources Teams. Ils sont remplacés par le point de terminaison réel pendant l’exécution en fonction de votre environnement actuel.

Configurer l’environnement de débogage local

Apportez le code de votre application onglet dans votre projet dans Visual Studio Code. Si vous n’en avez pas, vous pouvez créer une application onglet avec Teams Toolkit et copier le code source dans votre projet actuel. Par défaut, la structure de dossiers de votre application d’onglet se présente comme suit :
```
    |-- appPackage/
    |-- env/
    |-- infra/
    |-- tab/            
    |   |-- src/
    |   |   |-- app.ts
    |   |-- package.json
    |-- index.ts        
    |-- package.json
    |-- teamsapp.yml
```

Réorganisez la structure des dossiers comme suit :

    |-- appPackage/
    |-- infra/
    |-- tab/           <!--tab app source code-->
    |   |-- src/
    |   |   |-- app.ts
    |   |-- package.json
    |-- bot/            <!--move your current source code to a new sub folder-->
    |   |-- index.ts
    |   |-- package.json
    |-- teamsapp.yml

Mettez à jour le code suivant dans teamsapp.yml les fichiers et teamsapp.local.yml pour l’aligner sur la structure de dossiers :

    deploy:
      # Run npm command
      - uses: cli/runNpmCommand
        with:
          args: install --no-audit
          workingDirectory: ./bot

Pour configurer le profil de débogage pour votre projet d’onglet, ajoutez le code suivant au tasks.json fichier :

{
    "label": "Start application",
    "dependsOn": [
        "Start bot",
        "Start frontend"
    ]
},
{
    "label": "Start bot",
    "type": "shell",
    "command": "npm run dev:teamsfx",
    "isBackground": true,
    "options": {
        "cwd": "${workspaceFolder}/bot"
    },
    "problemMatcher": {
        "pattern": [
            {
                "regexp": "^.*$",
                "file": 0,
                "location": 1,
                "message": 2
            }
        ],
        "background": {
            "activeOnStart": true,
            "beginsPattern": "[nodemon] starting",
            "endsPattern": "restify listening to|Bot/ME service listening at|[nodemon] app crashed"
        }
    }
},
{
    "label": "Start frontend",
    "type": "shell",
    "command": "npm run dev:teamsfx",
    "isBackground": true,
    "options": {
        "cwd": "${workspaceFolder}/tab"
    },
    "problemMatcher": {
        "pattern": {
            "regexp": "^.*$",
            "file": 0,
            "location": 1,
            "message": 2
        },
        "background": {
            "activeOnStart": true,
            "beginsPattern": ".*",
            "endsPattern": "Compiled|Failed|compiled|failed"
        }
    }
}

Pour plus d’informations sur la configuration du profil de débogage, consultez exemple d’application.

Pour permettre à votre projet d’onglet de fonctionner avec Teams Toolkit, ajoutez les actions suivantes au teamsapp.local.yml fichier :

provision:
  - uses: script # Set TAB_DOMAIN for local launch
    name: Set TAB_DOMAIN for local launch
    with:
      run: echo "::set-output TAB_DOMAIN=localhost:53000"
  - uses: script # Set TAB_ENDPOINT for local launch
    name: Set TAB_ENDPOINT for local launch
    with:
      run: echo "::set-output TAB_ENDPOINT=https://localhost:53000"
deploy:
  - uses: devTool/install # Install development tool(s)
    with:
      devCert:
        trust: true
    writeToEnvironmentFile: # Write the information of installed development tool(s) into environment file for the specified environment variable(s).
      sslCertFile: SSL_CRT_FILE
      sslKeyFile: SSL_KEY_FILE
  - uses: cli/runNpmCommand # Run npm command
    with:
      args: install --no-audit
      workingDirectory: ./tab
  - uses: file/createOrUpdateEnvironmentFile # Generate runtime environment variables for tab
    with:
      target: ./tab/.localConfigs
      envs:
        BROWSER: none
        HTTPS: true
        PORT: 53000
        SSL_CRT_FILE: ${{SSL_CRT_FILE}}
        SSL_KEY_FILE: ${{SSL_KEY_FILE}}

Sélectionnez la touche F5 pour déboguer votre application localement.

Provisionner l’application dans Azure

Pour créer une application d’onglet côté serveur, vous n’avez pas besoin de mettre à jour vos fichiers Bicep ou votre infrastructure Azure. Vous pouvez héberger votre application d’onglet dans la même Azure App Service que votre bot.

Pour provisionner une application web statique Azure pour votre application onglet, ajoutez le code suivant à votre azure.bicep fichier :

@maxLength(20)
@minLength(4)
param resourceBaseName string
param storageSku string
param staticWebAppName string = resourceBaseName

// Azure Static Web Apps that hosts your static web site
resource swa 'Microsoft.Web/staticSites@2022-09-01' = {
  name: staticWebAppName
  // SWA do not need location setting
  location: 'centralus'
  sku: {
    name: staticWebAppSku
    tier: staticWebAppSku
  }
  properties: {}
}
var siteDomain = swa.properties.defaultHostname

output AZURE_STATIC_WEB_APPS_RESOURCE_ID string = swa.id
output TAB_DOMAIN string = siteDomain
output TAB_ENDPOINT string = 'https://${siteDomain}'

Pour vous assurer que les paramètres nécessaires sont correctement définis, mettez à jour le azure.parameters.json fichier comme suit :

{
  "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "resourceBaseName": {
      "value": "helloworld${{RESOURCE_SUFFIX}}"
    },
    "storageSku": {
      "value": "Free"
    },
  }
}

Pour héberger votre application d’onglet dans Azure Static Web Apps, définissez l’action azureStaticWebApps/getDeploymentToken dans votre teamsapp.yml fichier. L’action s’appuie sur , AZURE_STATIC_WEB_APPS_RESOURCE_IDune sortie des déploiements bicep. Ajoutez le code suivant après l’action arm/deploy :
```
 provision:
   ...
   - uses: arm/deploy
     ...
   # Add this action
   - uses: azureStaticWebApps/getDeploymentToken
     with:
       resourceId: ${{AZURE_STATIC_WEB_APPS_RESOURCE_ID}}
       writeToEnvironmentFile:
         deploymentToken: SECRET_TAB_SWA_DEPLOYMENT_TOKEN
   ...
```
Accédez à Afficher>la palette de commandes... ou sélectionnez Ctrl+Maj+P.
Commande Entrer Teams: Provision pour appliquer le bicep à Azure.

Pour automatiser la génération et le déploiement de votre application onglet, ajoutez les actions et deploy suivantes build à votre teamsapp.yml fichier :

  - uses: cli/runNpmCommand # Run npm command
    with:
      args: install
      workingDirectory: ./tab
  - uses: cli/runNpmCommand # Run npm command
    with:
      args: run build
      workingDirectory: ./tab
  # Deploy bits to Azure Storage Static Website
 - uses: cli/runNpxCommand
     name: deploy to Azure Static Web Apps
     with:
       args: '@azure/static-web-apps-cli deploy ./build -d ${{SECRET_TAB_SWA_DEPLOYMENT_TOKEN}} --env production'

Accédez à Afficher>la palette de commandes... ou sélectionnez Ctrl+Maj+P.
Entrez Teams: Deploy pour déployer le code de votre application d’onglet sur Azure.
Sous Exécuter et déboguer, sélectionnez Lancer à distance (Edge) ou Lancer à distance (Chrome).
Sélectionnez la touche F5 pour déboguer et afficher un aperçu de votre application Teams.

Étape suivante

Guides pratiques pour l’ajout de fonctionnalités

Partager via