Freigeben über

Hinzufügen einer Registerkartenfunktion zur Teams-App

  • Artikel

Registerkarten sind Webseiten, die in Microsoft Teams eingebettet sind. Registerkarten fungieren als einfache HTML-Tags iframe , die auf Domänen verweisen, die im App-Manifest deklariert sind (zuvor teams-App-Manifest genannt). Sie können eine Registerkarte als Funktion zu einer Teams-App in einem Kanal innerhalb eines Team-, Gruppenchats oder einer persönlichen App für einen einzelnen Benutzer hinzufügen. Sie können benutzerdefinierte Registerkarten in Ihre App einschließen, um Ihre eigenen Webinhalte in Teams einzubetten oder Ihren Webinhalten Teams-spezifische Funktionen hinzuzufügen. Weitere Informationen finden Sie unter Erstellen von Registerkarten für Teams.

Bevor Sie beginnen, empfehlen wir Ihnen, eine Registerkarten-App zu erstellen und zu durchlaufen. Weitere Informationen finden Sie unter Erstellen einer Registerkarten-App mit dem Teams-Toolkit.

Voraussetzungen

Stellen Sie sicher, dass die folgenden Voraussetzungen erfüllt sind, um die Registerkartenfunktion in einer Teams-App zu konfigurieren:

Registerkarte "Konfigurieren" in der Teams-App

Die folgenden Schritte helfen Ihnen beim Konfigurieren der Registerkartenfunktion in einer Teams-App:

  1. Aktualisieren des App-Manifests
  2. Einrichten einer lokalen Debugumgebung
  3. Bereitstellen einer App in Azure

Tipp

Wenn Sie eine serverseitige Registerkarten-App entwickeln, müssen Sie die Ordnerstruktur, das Debugprofil oder die Bicep-Infrastruktur nicht aktualisieren. Fügen Sie der Registerkarte in Ihrem Botdienst neue Routen hinzu, und aktualisieren Sie das App-Manifest im Teams Toolkit. Weitere Informationen finden Sie unter Beispiel-App.

Aktualisieren des App-Manifests

  1. Um Ihre Registerkarte in einem persönlichen Chat, Gruppenchat oder Kanal zu konfigurieren, aktualisieren Sie die manifest.json Datei mit dem folgenden Code:

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

  2. Aktualisieren Sie den Wert von mit der validDomains Domäne Ihrer Registerkarte.

    "validDomains": [
    "${{TAB_DOMAIN}}"
],

    Hinweis

    TAB_ENDPOINT und TAB_DOMAIN sind integrierte Variablen des Teams Toolkits. Sie werden während der Laufzeit basierend auf Ihrer aktuellen Umgebung durch den tatsächlichen Endpunkt ersetzt.

Einrichten einer lokalen Debugumgebung

  1. Bringen Sie Ihren Registerkarten-App-Code in Ihr Projekt in Visual Studio Code. Wenn Sie noch keine haben, können Sie eine neue Registerkarten-App mit dem Teams Toolkit erstellen und den Quellcode in Ihr aktuelles Projekt kopieren. Die Ordnerstruktur Ihrer Registerkarten-App sieht standardmäßig wie folgt aus:

        |-- appPackage/
    |-- env/
    |-- infra/
    |-- tab/            <!--tab app source code-->
    |   |-- src/
    |   |   |-- app.ts
    |   |-- package.json
    |-- index.ts        <!--your current source code-->
    |-- package.json
    |-- teamsapp.yml

  2. Organisieren Sie die Ordnerstruktur wie folgt neu:

        |-- 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

  3. Aktualisieren Sie den folgenden Code in teamsapp.yml den Dateien und teamsapp.local.yml so, dass er an der Ordnerstruktur ausgerichtet ist:

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

  4. Um das Debugprofil für Ihr Registerkartenprojekt zu konfigurieren, fügen Sie der Datei den tasks.json folgenden Code hinzu:

    {
    "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"
        }
    }
}

    Weitere Informationen zum Konfigurieren des Debugprofils finden Sie unter Beispiel-App.

  5. Damit Ihr Registerkartenprojekt mit Teams Toolkit funktioniert, fügen Sie der Datei die teamsapp.local.yml folgenden Aktionen hinzu:

    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}}

  6. Drücken Sie F5 , um Ihre App lokal zu debuggen.

Bereitstellen einer App in Azure

Zum Erstellen einer serverseitigen Registerkarten-App müssen Sie Ihre Bicep-Dateien oder die Azure-Infrastruktur nicht aktualisieren. Sie können Ihre Registerkarten-App im gleichen Azure App Service wie Ihr Bot hosten.

  1. Um eine statische Azure-Web-App für Ihre Registerkarten-App bereitzustellen, fügen Sie ihrer azure.bicep Datei den folgenden Code hinzu:

    @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}'

  2. Um sicherzustellen, dass die erforderlichen Parameter richtig festgelegt sind, aktualisieren Sie die azure.parameters.json Datei wie folgt:

    {
  "$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"
    },
  }
}

  3. Um Ihre Registerkarten-App in Azure Static Web Apps zu hosten, definieren Sie die azureStaticWebApps/getDeploymentToken Aktion in Ihrer teamsapp.yml Datei. Die -Aktion basiert auf , AZURE_STATIC_WEB_APPS_RESOURCE_IDeiner Ausgabe der bicep-Bereitstellungen. Fügen Sie den folgenden Code nach der arm/deploy Aktion hinzu:

     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
   ...

  4. Wechseln Sie zu Befehlspalette anzeigen>... oder drücken Sie STRG+UMSCHALT+P.

  5. Geben Sie Teams: Provision den Befehl ein, um den Bicep auf Azure anzuwenden.

  6. Um die Erstellung und Bereitstellung Ihrer Registerkarten-App zu automatisieren, fügen Sie Ihrer teamsapp.yml Datei die folgenden build Aktionen und deploy hinzu:

      - 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'

  7. Wechseln Sie zu Befehlspalette anzeigen>... oder drücken Sie STRG+UMSCHALT+P.

  8. Geben Sie ein Teams: Deploy , um Ihren Registerkarten-App-Code in Azure bereitzustellen.

  9. Wählen Sie unter Ausführen und Debuggendie Option Remote starten (Edge) oder Remote starten (Chrome) aus.

  10. Wählen Sie F5 aus, um Ihre Teams-App zu debuggen und eine Vorschau anzuzeigen.

Nächster Schritt

Anleitungen zum Hinzufügen von Funktionen

Siehe auch