Добавление возможности вкладки в приложение Teams

Статья
12/17/2024

Вкладки — это веб-страницы, внедренные в Microsoft Teams. Вкладки работают как простые HTML-теги iframe , указывающие на домены, объявленные в манифесте приложения (ранее — манифест приложения Teams). Вы можете добавить вкладку в качестве возможности в приложение Teams в канале в команде, групповом чате или личном приложении для отдельного пользователя. Вы можете включить настраиваемые вкладки в свое приложение. Это позволит встроить собственный веб-контент в Teams или добавить в такой веб-контент функционал Teams. Дополнительные сведения см. в разделе Вкладки сборки для Teams.

Перед началом работы рекомендуется создать и просмотреть приложение вкладки. Дополнительные сведения см. в разделе Создание приложения вкладки с помощью набора средств Teams.

Предварительные условия

Убедитесь, что выполнены следующие предварительные требования для настройки возможности вкладки в приложении Teams:

Приложение Teams и файл манифеста приложения
Учетная запись Microsoft 365 для тестирования приложения
Учетная запись Microsoft Azure

Вкладка "Настройка" в приложении Teams

Следующие действия помогут вам настроить возможность вкладки в приложении Teams.

Обновление манифеста приложения
Настройка локальной среды отладки
Подготовка приложения в Azure

Совет

При разработке приложения вкладки на стороне сервера не нужно обновлять структуру папок, профиль отладки или инфраструктуру bicep. Добавьте новые маршруты на вкладку в службе бота и обновите манифест приложения в наборе средств Teams. Дополнительные сведения см. в разделе Пример приложения.

Обновление манифеста приложения

Чтобы настроить вкладку в личном чате, групповом чате или канале manifest.json , обновите файл следующим кодом:

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

Обновите значение с validDomains помощью домена вкладки.
```
"validDomains": [
    "${{TAB_DOMAIN}}"
],
```
Примечание.

TAB_ENDPOINT и TAB_DOMAIN являются встроенными переменными набора средств Teams. Они заменяются истинной конечной точкой во время выполнения в зависимости от текущей среды.

Настройка локальной среды отладки

Внесите код приложения вкладки в проект в Visual Studio Code. Если у вас его нет, вы можете создать новое приложение-вкладку с помощью набора средств Teams и скопировать исходный код в текущий проект. По умолчанию структура папок приложения вкладки выглядит следующим образом:
```
    |-- appPackage/
    |-- env/
    |-- infra/
    |-- tab/            
    |   |-- src/
    |   |   |-- app.ts
    |   |-- package.json
    |-- index.ts        
    |-- package.json
    |-- teamsapp.yml
```

Реорганизуйте структуру папок следующим образом:

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

Обновите следующий код в teamsapp.yml файлах и teamsapp.local.yml в соответствии со структурой папок:

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

Чтобы настроить профиль отладки для проекта вкладки, добавьте в файл следующий код tasks.json :

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

Дополнительные сведения о настройке профиля отладки см. в разделе Пример приложения.

Чтобы включить работу проекта вкладки с Набором средств Teams, добавьте в файл следующие действия teamsapp.local.yml :

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

Выберите клавишу F5 для локальной отладки приложения.

Подготовка приложения в Azure

Чтобы создать приложение вкладки на стороне сервера, не нужно обновлять файлы bicep или инфраструктуру Azure. Приложение вкладки можно разместить в той же Служба приложений Azure, что и бот.

Чтобы подготовить статическое веб-приложение Azure для приложения вкладки, добавьте в файл следующий код azure.bicep :

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

Чтобы убедиться, что необходимые параметры заданы правильно, обновите azure.parameters.json файл следующим образом:

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

Чтобы разместить приложение вкладки в Статические веб-приложения Azure, определите azureStaticWebApps/getDeploymentToken действие в файлеteamsapp.yml. Действие зависит от AZURE_STATIC_WEB_APPS_RESOURCE_ID, выходных данных развертываний bicep. Добавьте следующий код после 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
   ...
```
Перейдите в раздел Просмотр>палитры команд... или нажмите клавиши CTRL+SHIFT+P.
Введите Teams: Provision команду , чтобы применить bicep к Azure.

Чтобы автоматизировать сборку и развертывание приложения вкладки, добавьте в файл следующие build действия teamsapp.yml и deploy :

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

Перейдите в раздел Просмотр>палитры команд... или нажмите клавиши CTRL+SHIFT+P.
Введите Teams: Deploy , чтобы развернуть код приложения вкладки в Azure.
В разделе Запуск и отладка выберите Запустить удаленный (Edge) или Запустить удаленный (Chrome) .
Выберите клавишу F5 , чтобы выполнить отладку и предварительный просмотр приложения Teams.

Следующее действие

Практические руководства по добавлению возможностей

Поделиться через