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

Бот, также известный как чат-бот или чат-бот, — это приложение, которое отвечает на простые команды в параметре чата, предоставляя соответствующие ответы. Боты обычно используются для различных задач, таких как уведомление о сбоях сборки, предоставление обновлений погоды, расписания автобусов или информации о поездках. Взаимодействие с ботами может варьироваться от простого обмена вопросами и ответами до сложных бесед. Как облачное приложение бот может предложить безопасный и ценный доступ к облачным службам и корпоративным ресурсам. Дополнительные сведения см. в статье Создание ботов для Microsoft Teams.

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

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

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

Добавление бота в приложение вкладки
Добавление бота в приложение расширения сообщений

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

Создание приложения бота с помощью microsoft 365 Agents Toolkit
Настройка возможностей бота в манифесте приложения
Добавление кода бота в проект
Настройка локальной среды отладки
Подготовка приложения в Azure

Создание приложения бота с помощью набора средств агентов

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

Настройка возможностей бота в манифесте приложения

Вы можете настроить возможность бота в appPackage/manifest.json файле. Дополнительные сведения см. в разделе Схема манифеста приложения.

Примером является следующий фрагмент кода:

    "bots": [
        {
            "botId": "${{BOT_ID}}",
            "scopes": [
                "personal",
                "team",
                "groupchat"
            ],
            "supportsFiles": false,
            "isNotificationOnly": false,
            "commandLists": [
                {
                    "scopes": [
                        "personal",
                        "team",
                        "groupchat"
                    ],
                    "commands": [
                        {
                            "title": "welcome",
                            "description": "Resend welcome card of this Bot"
                        },
                        {
                            "title": "learn",
                            "description": "Learn about Adaptive Card and Bot Command"
                        }
                    ]
                }
            ]
        }
    ]

Добавление кода бота в проект

bot/ Создайте папку в проекте и скопируйте исходный код приложения бота в папку в Visual Studio Code. Структура папок проекта выглядит следующим образом:

    |-- .vscode/
    |-- appPackage/
    |-- env/
    |-- infra/
    |--public/
    |-- bot/           <!--bot source code-->
    |   |-- adaptiveCards/
    |   |-- index.ts
    |   |-- config.ts
    |   |-- teamsBot.ts
    |   |-- package.json
    |   |-- tsconfig.json
    |   |-- web.config
    |   |-- .webappignore
    |-- src/            <!--your current source code-->
    |   |-- app.ts
    |   |-- static/
    |   |-- views/
    |-- package.json
    |-- tsconfig.json
    |-- m365agents.local.yml
    |-- m365agents.yml

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

Совет

Используйте команду npm init -y для создания корневого package.json файла.

    |-- .vscode/
    |-- appPackage/
    |-- env/
    |-- infra/
    |-- bot/            <!--bot source code-->
    |   |-- adaptiveCards/
    |   |-- index.ts
    |   |-- config.ts
    |   |-- teamsBot.ts
    |   |-- package.json
    |   |-- tsconfig.json
    |   |-- web.config
    |   |-- .webappignore
    |-- tab/           <!--move your current source code to a new sub folder-->
    |   |-- src/
    |   |   |-- app.ts
    |   |   |-- static/
    |   |   |-- views/
    |   |-- package.json
    |   |-- tsconfig.json
    |-- package.json <!--root package.json-->
    |-- m365agents.local.yml
    |-- m365agents.yml

Добавьте следующий код в корневой каталог package.json:

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "install:bot": "cd bot && npm install",
      "install:tab": "cd tab && npm install",
      "install": "concurrently \"npm run install:bot\" \"npm run install:tab\"",
      "dev:bot": "cd bot && npm run dev",
      "start:tab": "cd tab && npm run start",
      "build:tab": "cd tab && npm run build",
      "build:bot": "cd bot && npm run build",
      "build": "concurrently \"npm run build:tab\" \"npm run build:bot\""
    },
    "dependencies": {
        "concurrently": "^7.6.0"
    },

Примечание.

В проекте JavaScript проект можно запустить без build папки. Необходимо удалить build:bot скрипт и обновить build его до npm run build:tab.

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

Обновите .vscode/tasks.json следующим образом:

Добавьте три новые задачи: Start local tunnel, Start botи Start frontend.
Обновите Start application массив задачи, включив dependsOn в него Start bot и Start frontend.
cwd Настройте параметр для Start bot и Start frontend. Это действие необходимо, так как вы ранее переместили код для вкладки и бота в соответствующие папки при реорганизации структуры папок.
Добавьте Start local tunnel в Start Teams App Locally массив задачи dependsOn .

    "tasks":[
            {
                // Start the local tunnel service to forward public URL to local port and inspect traffic.
                // See https://aka.ms/teamsfx-tasks/local-tunnel for the detailed args definitions.
                "label": "Start local tunnel",
                "type": "teamsfx",
                "command": "debug-start-local-tunnel",
                "args": {
                    "type": "dev-tunnel",
                    "ports": [
                        {
                            "portNumber": 3978,
                            "protocol": "http",
                            "access": "public",
                            "writeToEnvironmentFile": {
                                "endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
                                "domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
                            }
                        }
                    ],
                    "env": "local"
                },
                "isBackground": true,
                "problemMatcher": "$teamsfx-local-tunnel-watch"
            },
            {
                "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": "listening to|Compiled|Failed|compiled|failed"
                    }
                }
            },
             {
                 "label": "Start application",
                 "dependsOn": [
                     "Start bot",
                     "Start frontend"
                 ]
             },
             {
                 "label": "Start Teams App Locally",
                 "dependsOn": [
                     "Validate prerequisites",
                     "Start local tunnel",
                     "Provision",
                     "Deploy",
                     "Start application"
                 ],
                 "dependsOrder": "sequence"
             },
    ]

В файле:m365agents.local.yml

В provisionразделе добавьте botAadApp/create действия и botFramework/create .
В разделе deployобновите код file/createOrUpdateEnvironmentFile действия.

 provision:
   - uses: botAadApp/create
     with:
       # The Microsoft Entra application's display name
       name: bot-${{TEAMSFX_ENV}}
     writeToEnvironmentFile:
       # The Microsoft Entra application's client id created for bot.
       botId: BOT_ID
       # The Microsoft Entra application's client secret created for bot.
       botPassword: SECRET_BOT_PASSWORD 

   # Create or update the bot registration on dev.botframework.com
   - uses: botFramework/create
     with:
       botId: ${{BOT_ID}}
       name: bot
       messagingEndpoint: ${{BOT_ENDPOINT}}/api/messages
       description: ""
       channels:
         - name: msteams
 deploy:
   - uses: file/createOrUpdateEnvironmentFile # Generate runtime environment variables
     with:
       target: ./tab/.localConfigs
       envs:
         BROWSER: none
         HTTPS: true
         PORT: 53000
         SSL_CRT_FILE: ${{SSL_CRT_FILE}}
         SSL_KEY_FILE: ${{SSL_KEY_FILE}}

   - uses: file/createOrUpdateEnvironmentFile # Generate runtime environment variables
     with:
       target: ./bot/.localConfigs
       envs:
         BOT_ID: ${{BOT_ID}}
         BOT_PASSWORD: ${{SECRET_BOT_PASSWORD}}

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

В разделе Запуск и отладка выберите Отладка (Edge) или Отладка (Chrome).
Выберите клавишу F5 для локальной отладки и предварительного просмотра приложения Teams.

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

Скопируйте папку botRegistration/ из бота в infra/.

Добавьте следующий код в azure.bicep файл:

 param resourceBaseName2 string
 param webAppName2 string = resourceBaseName2
 @maxLength(42)
 param botDisplayName string
 @description('Required when create Azure Bot service')
 param botAadAppClientId string

 @secure()
 @description('Required by Bot Framework package in your bot project')
 param botAadAppClientSecret string
 resource webApp2 'Microsoft.Web/sites@2021-02-01' = {
   kind: 'app'
   location: location
   name: webAppName2
   properties: {
     serverFarmId: serverfarm.id
     httpsOnly: true
     siteConfig: {
       alwaysOn: true
       appSettings: [
         {
           name: 'WEBSITE_RUN_FROM_PACKAGE'
           value: '1' // Run Azure APP Service from a package file
         }
         {
           name: 'WEBSITE_NODE_DEFAULT_VERSION'
           value: '~18' // Set NodeJS version to 18.x for your site
         }
         {
           name: 'RUNNING_ON_AZURE'
           value: '1'
         }
         {
           name: 'BOT_ID'
           value: botAadAppClientId
         }
         {
           name: 'BOT_PASSWORD'
           value: botAadAppClientSecret
         }
       ]
       ftpsState: 'FtpsOnly'
     }
   }
 }

 // Register your web service as a bot with the Bot Framework
 module azureBotRegistration './botRegistration/azurebot.bicep' = {
   name: 'Azure-Bot-registration'
   params: {
     resourceBaseName: resourceBaseName
     botAadAppClientId: botAadAppClientId
     botAppDomain: webApp2.properties.defaultHostName
     botDisplayName: botDisplayName
   }
 }

 // The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
 output BOT_AZURE_APP_SERVICE_RESOURCE_ID string = webApp2.id
 output BOT_DOMAIN string = webApp2.properties.defaultHostName

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

 {
 "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
 "contentVersion": "1.0.0.0",
 "parameters": {
   "resourceBaseName": {
     "value": "tab${{RESOURCE_SUFFIX}}"
   },
   "webAppSku": {
     "value": "B1"
   },
   "botAadAppClientId": {
     "value": "${{BOT_ID}}"
   },
   "botAadAppClientSecret": {
     "value": "${{SECRET_BOT_PASSWORD}}"
   },
   "botDisplayName": {
     "value": "bot"
   },
   "resourceBaseName2":{
     "value": "bot${{RESOURCE_SUFFIX}}"
   }
 }
 }

В файле:m365agents.yml

В разделе provisionдобавьте botAadApp/create действие . Дополнительные сведения см. в разделе Пример приложения.
deploy В разделе добавьте следующий код:

 deploy:
   - uses: cli/runNpmCommand # Run npm command
     with:
       args: install
   - uses: cli/runNpmCommand # Run npm command
     with:
       args: run build
   # Deploy bits to Azure Storage Static Website
   - uses: azureAppService/zipDeploy
     with:
       workingDirectory: ./tab
       # Deploy base folder
       artifactFolder: .
       # Ignore file location, leave blank will ignore nothing
       ignoreFile: .webappignore
       # The resource id of the cloud resource to be deployed to.
       # This key will be generated by arm/deploy action automatically.
       # You can replace it with your existing Azure Resource id
       # or add it to your environment variable file.
       resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}}
   - uses: azureAppService/zipDeploy
     with:
       workingDirectory: ./bot
       # Deploy base folder
       artifactFolder: .
       # Ignore file location, leave blank will ignore nothing
       ignoreFile: .webappignore
       # The resource id of the cloud resource to be deployed to.
       # This key will be generated by arm/deploy action automatically.
       # You can replace it with your existing Azure Resource id
       # or add it to your environment variable file.
       resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}

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

Вы можете легко добавить возможность бота в приложение расширения сообщений, так как расширения сообщений основаны на Bot Framework.

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

Создание приложения бота с помощью набора средств агентов
Обновление файла манифеста
Добавление кода бота в проект

Создание приложения бота с помощью набора средств агентов

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

Обновление файла манифеста

Примером является следующий фрагмент кода:

 "bots": [
     {
         "botId": "${{BOT_ID}}",
         "scopes": [
             "personal",
             "team",
             "groupchat"
         ],
         "supportsFiles": false,
         "isNotificationOnly": false,
         "commandLists": [
             {
                 "scopes": [
                     "personal",
                     "team",
                     "groupchat"
                 ],
                 "commands": [
                     {
                         "title": "welcome",
                         "description": "Resend welcome card of this Bot"
                     },
                     {
                         "title": "learn",
                         "description": "Learn about Adaptive Card and Bot Command"
                     }
                 ]
             }
         ]
     }
 ]

Добавление кода бота в проект

Приложение расширения сообщений содержит класс, расширяющий TeamsActivityHandler. Скопируйте настроенный код бота из приложения бота в этот класс в Visual Studio Code. Следующий код является примером расширения сообщений, которое содержит функции из приложения бота, созданного в наборе средств агентов:
```
   public class YourHandler extends TeamsActivityHandler{

     // bot code
     constructor(){
       super();
       this.likeCountObj = { likeCount: 0 };
       this.onMessage(async (context, next) => {});
       this.onMembersAdded(async (context, next) => {});
     }
     async onAdaptiveCardInvoke(context: TurnContext,
 invokeValue: AdaptiveCardInvokeValue):  Promise<AdaptiveCardInvokeResponse> {};

     /**
      * your own message extension code
     */
   }
```
Перейдите в раздел Просмотр>палитры команд... или нажмите клавиши CTRL+SHIFT+P.
Введите , Teams: Provision чтобы применить bicep к Azure.
Введите Teams: Deploy , чтобы развернуть код приложения вкладки в Azure.
В разделе Запуск и отладка выберите Запустить удаленный (Edge) или Запустить удаленный (Chrome) .
Выберите клавишу F5 , чтобы выполнить отладку и предварительный просмотр приложения Teams.

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

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

См. также

Настройка конвейеров CI/CD

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2024-12-17

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

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

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

Создание приложения бота с помощью набора средств агентов

Настройка возможностей бота в манифесте приложения

Добавление кода бота в проект

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

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

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

См. также

Обратная связь

Дополнительные ресурсы