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

Совет

Эта статья поможет вам понять, как создать объединенное приложение Teams и надстройку Office, начните с только что созданного приложения Teams и надстройки Outlook. Общие сведения об общем процессе объединения приложений Teams и надстроек Office, включая существующие приложения Teams и уже используемые надстройки, см. в статье Общие рекомендации по объединению надстройки Outlook и приложения Teams.

Введение

Надстройки Outlook — это веб-приложения , расширяющие функциональные возможности Outlook. С помощью надстройки Outlook вы можете:

• Чтение и запись сообщений электронной почты, а также участие в приглашениях на собрания, ответах, отменах и встречах.
• Чтение свойств почтового ящика пользователя.
• Автоматически отвечать на события, например на отправку сообщения электронной почты.
• Интеграция с внешними службами, включая CRM и средства управления проектами.
• Добавьте настраиваемые кнопки ленты или элементы меню для выполнения определенных задач.

Интеграция надстройки Outlook с приложением Teams позволяет реализовать сценарии, которые ни один из них не может реализовать независимо. Рассмотрим сценарий, в котором продавец может вставить клиенту настраиваемую скидку в сообщение электронной почты и записать предложение в серверную базу данных. Менеджер по продажам также может просматривать данные обо всех скидках, которые были предложены на вкладке Teams. Дополнительные сведения см. в разделе Пример предложения скидок.

Обзор надстроек Outlook содержит сведения о возможностях надстроек Outlook, их структуре, улучшении старых способов расширения Outlook, о платформах, на которых может работать надстройка (Windows, Mac, мобильные устройства и Интернет), а также о том, как приступить к созданию надстройки.

В этой статье описано, как добавить надстройку Outlook в приложение Teams, протестировать ее, а затем развернуть в Azure.

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

Перед началом работы убедитесь, что вы соответствуете следующим требованиям:

• Учетная запись Microsoft 365, включающая Teams для тестирования приложения. Кроме того, вы можете иметь отдельные подписки на Microsoft 365 и Teams. Например, тестовая учетная запись с *.onmicrosoft.com в рамках программы разработчика Microsoft 365.
• Ваша учетная запись Microsoft 365 добавляется как учетная запись в классической версии Outlook. Дополнительные сведения см. в статье Добавление учетной записи электронной почты в Outlook.
• Учетная запись Azure с активной подпиской для развертывания приложения Teams в Azure. Если у вас ее нет, вы можете создать бесплатную учетную запись Azure.
• Приложение Teams, созданное с помощью последней версии Набора средств Teams.

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

Чтобы добавить надстройку Outlook в приложение Teams, выполните приведенные далее действия.

1. Подготовьте проект приложения Teams.
2. Создайте проект надстройки Office , который изначально отделен от проекта приложения Teams.
3. Объедините манифест из проекта надстройки Outlook в унифицированный манифест для Microsoft 365.
4. Скопируйте файлы надстройки Outlook в проект приложения Teams.
5. Измените файлы конфигурации инструментов.
6. Одновременное выполнение приложения и надстройки локально
7. Переместите приложение в Azure.

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

Начните с разделения исходного кода вкладки (или бота) на собственную вложенную папку. В этих инструкциях предполагается, что проект изначально имеет следующую структуру. Чтобы создать проект приложения Teams с такой структурой, используйте последнюю версию набора средств Teams.

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- node_modules/
|-- src/
|-- .gitignore
|-- .localConfigs
|-- .webappignore
|-- package-lock.json
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml
|-- tsconfig.json
|-- web.config

Примечание.

Если вы работаете с новым проектом вкладки Teams, папка node_modules и файл package-lock.json отсутствуют. Node_modules создается на более позднем этапе при запуске npm install в корневом каталоге проекта. Папка сборки отсутствует до тех пор, пока не будет выполнен скрипт сборки в проекте.

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

1. Создайте папку под корневой вкладкой (или ботом).

   Примечание.

   Для простоты в оставшейся части этой статьи предполагается, что существующее приложение Teams является вкладкой. Если вы начали работу с ботом, замените tab на bot во всех этих инструкциях, включая содержимое, добавляемое или редактируемое в различных файлах.

2. Скопируйте папку infra в новую вложенную папку, а затем удалите azure.parameters.json файл из новой папки tab>infra .

3. Переместите папки node_modules и src в новую вложенную папку.

4. Переместите .webappignoreфайлы , package-lock.json, package.json, tsconfig.jsonи web.config в новую вложенную папку.

   |-- .vscode/
   |-- appPackage/
   |-- build
   |-- env/
   |-- infra/
   |-- tab/
   |-- |-- infra/
   |-- |-- node_modules/
   |-- |-- src/
   |-- |-- .webappignore
   |-- |-- package-lock.json
   |-- |-- package.json
   |-- |-- tsconfig.json
   |-- |-- web.config
   |-- .gitignore
   |-- .localConfigs
   |-- teamsapp.local.yml
   |-- teamsapp.yml
   

5. В объекте package.json , который вы только что переместили в папку tab, удалите скрипт с именем dev:teamsfx из scripts объекта . Этот скрипт будет добавлен в новый package.json на следующем шаге.

6. Создайте файл с именем package.json в корне проекта и добавьте следующее содержимое:

   {
       "name": "CombinedTabAndAddin",
       "version": "0.0.1",
       "author": "Contoso",
       "scripts": {
           "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start:tab",
           "build:tab": "cd tab && npm run build",
           "install:tab": "cd tab && npm install",
           "start:tab": "cd tab && npm run start",
           "test": "echo \"Error: no test specified\" && exit 1"
       },
       "devDependencies": {
           "@microsoft/teamsfx-cli": "2.0.2-alpha.4f379e6ab.0",
           "@microsoft/teamsfx-run-utils": "alpha",
           "env-cmd": "^10.1.0",
           "office-addin-dev-settings": "^2.0.3",
           "ncp": "^2.0.0"
       }
   }
   

7. При необходимости измените nameсвойства , versionи author .

8. teamsapp.yml Откройте файл в корне проекта, найдите строку ignoreFile: .webappignoreи измените ее на ignoreFile: ./tab/.webappignore.

9. teamsapp.local.yml Откройте файл в корне проекта, найдите строку args: install --no-auditи измените ее на args: run install:tab --no-audit.

10. Откройте терминал в Visual Studio Code. Перейдите к корню проекта и выполните команду npm install. node_modules В корневом каталоге проекта создаются новая папка и новый package.lock.json файл.

11. Затем запустите npm run install:tab. В папке tab создаются новая node_modules папка и новый package.lock.json файл, если их еще нет.

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

    1. Откройте Набор средств Teams.

    2. В разделе Учетные записи убедитесь, что вы вошли в учетную запись Microsoft 365.

    3. Выберите Просмотр>выполнить в Visual Studio Code.

    4. В раскрывающемся меню ЗАПУСК И ОТЛАДКА выберите Отладка в Teams (Edge) и нажмите клавишу F5.

       Проект выполняет сборку и запуск. Этот процесс может занять несколько минут. По завершении teams откроется в браузере с запросом на добавление приложения вкладки.

       Примечание.

       Если вы впервые отлаживать приложение Teams на этом компьютере, вам будет предложено установить SSL-сертификат. Выберите Установить , а затем — Да во вторую строку. Войдите в учетную запись Microsoft 365, если вам будет предложено сделать это.

    5. Нажмите Добавить.

    6. Чтобы остановить отладку и удалить приложение, выберите Запустить>остановить отладку в Visual Studio Code.

Создание проекта надстройки Outlook

1. Откройте второй экземпляр Visual Studio Code.

2. Выберите Набор средств Teams на панели действий.

3. Выберите Создать приложение.

4. В раскрывающемся меню Выбор параметра выберите Областьзадач надстройки>Outlook.

5. Выберите папку, в которой вы хотите создать надстройку.

6. При появлении запроса присвойте проекту имя (без пробелов).

   Teams Toolkit создает проект с базовыми файлами и шаблонами и открывает его в новом окне Visual Studio Code. Этот проект будет использоваться в качестве источника для файлов и разметки, добавленных в проект Teams.

7. Хотя вы не будете разрабатывать этот проект, выполните следующие действия, чтобы убедиться, что его можно загрузить из Visual Studio Code, прежде чем продолжить:

   1. Убедитесь, что рабочий стол Outlook закрыт.

   2. Откройте Visual Studio Code.

   3. Выберите Набор средств Teams на панели действий.

   4. В разделе УЧЕТНЫе записи убедитесь, что вы вошли в Microsoft 365.

   5. Выберите Просмотр>выполнить в Visual Studio Code.

   6. В раскрывающемся меню ЗАПУСК И ОТЛАДКА выберите Outlook Desktop (Edge Chromium) и нажмите клавишу F5.

      Выполняется сборка проекта, и откроется окно webpack dev-server. Этот процесс может занять несколько минут и открыть окно рабочего стола Outlook.

   7. Перейдите в Outlook.

   8. Откройте папку "Входящие" удостоверения учетной записи Microsoft 365.

   9. Откройте любое сообщение.

      Вкладка Надстройка Contoso с двумя кнопками появится на ленте Главная (или на ленте Сообщение , если открыть сообщение в собственном окне).

   10. Нажмите кнопку Показать область задач . Откроется область задач.

   11. Нажмите кнопку Выполнить действие. В верхней части сообщения появится небольшое уведомление.

   12. Чтобы остановить отладку и удалить надстройку, выберите Запустить>остановить отладку в Visual Studio Code. Если окно разработки Webpack не закрывается, откройте Visual Studio Code TERMINAL в корне проекта и запустите npm stop.

Объединение манифеста

Манифест приложения Teams создается во время отладки и загрузки неопубликованных приложений (или во время сборки) из manifest.json файла в папке \appPackage проекта Teams. Этот файл является шаблоном для манифеста. В этой статье он называется шаблоном или шаблоном манифеста. Большая часть разметки жестко закодирована в шаблон, но есть также некоторые файлы конфигурации, содержащие данные, которые добавляются в окончательный созданный манифест. В этой процедуре выполните следующие задачи:

• Скопируйте разметку из манифеста надстройки в шаблон манифеста приложения Teams.
• Измените файлы конфигурации.

Если не указано иное, измененный файл имеет значение \appPackage\manifest.json.

1. Скопируйте значения свойств "$schema" и "manifestVersion" из манифеста надстройки в соответствующие свойства файла шаблона манифеста приложения Teams.

2. Измените значения свойств name.full, description.short и description.full, чтобы отразить тот факт, что надстройка Outlook является частью приложения.

3. Выполните то же самое для значения name.short.

   Рекомендуется оставить в ${{TEAMSFX_ENV}} конце имени. Эта переменная заменяется строкой "local" при отладке на localhost и "dev" при отладке из удаленного домена или в рабочем режиме.

   Примечание.

   Исторически в документации разработчика надстроек Office используется термин "dev" или "режим разработки" для обозначения запуска надстройки на локальном узле. Он использует термин "prod" или "рабочий режим" для обозначения запуска надстройки на удаленном узле для промежуточной или рабочей среды. В документации разработчика Teams используется термин "local" для обозначения запуска надстройки на локальном узле, а термин "dev" — для обозначения запуска надстройки на удаленном узле для удаленной отладки, которая обычно называется промежуточной. Мы работаем над согласованием терминологии.

   Примером является следующий код JSON:

   "short": "Contoso Tab and Add-in-${{TEAMSFX_ENV}}",
   

   Примечание.

   Значение name.short отображается как в возможности вкладки Teams, так и в надстройке Outlook. Вот несколько примеров:

   • Это метка под кнопкой запуска вкладки Teams.
   • Это содержимое заголовка панели задач надстройки.

4. Если вы изменили значение name.short со значения по умолчанию (это имя проекта, за которым следует ${{TEAMSFX_ENV}} переменная), внесите точно такое же изменение во всех местах, где имя проекта отображается в двух следующих файлах в корне проекта: teamsapp.yml и teamsapp.local.yml.

5. Если в шаблоне манифеста Teams нет массива authorization.permissions.resourceSpecific, скопируйте его из манифеста надстройки в качестве свойства верхнего уровня. Если он уже есть в шаблоне Teams, скопируйте все объекты из массива в манифесте надстройки в массив в шаблоне Teams. Примером является следующий код JSON:

   "authorization": {
       "permissions": {
           "resourceSpecific": [
               {
                   "name": "MailboxItem.Read.User",
                   "type": "Delegated"
               }
           ]
       }
   },
   

6. В файле найдите env/.env.local строки, присваивающие значения TAB_DOMAIN переменным и TAB_ENDPOINT . Добавьте следующие строки сразу под ними:

   ADDIN_DOMAIN=localhost:3000
   ADDIN_ENDPOINT=https://localhost:3000
   

7. env/.env.dev В файле добавьте следующую строку под TAB_ENDPOINT= ... линия:

   ADDIN_ENDPOINT=
   

8. В шаблоне манифеста Teams добавьте заполнитель "${{ADDIN_DOMAIN}}", в начало массива "validDomains" . Набор средств Teams заменяет его доменом localhost при локальной разработке. При развертывании готового объединенного приложения в промежуточной или рабочей среде, как описано в разделе Перемещение приложения в Azure, Набор средств Teams заменяет заполнитель промежуточным или рабочим URI. Примером является следующий код JSON:

   "validDomains": [
       "${{ADDIN_DOMAIN}}",
   
       // other domains or placeholders
   ],
   

9. Скопируйте все свойство extensions из манифеста надстройки в шаблон манифеста приложения Teams в качестве свойства верхнего уровня.

Копирование файлов надстройки Outlook в проект приложения Teams

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

2. Скопируйте следующие файлы и папки из проекта надстройки в папку надстройки проекта приложения Teams.

   • /appPackage
   • /ниже
   • /src
   • .eslintrc.json
   • babel.config.json
   • package-lock.json
   • package.json
   • tsconfig.json
   • webpack.config.js

3. Завершив копирование, удалите файл в папке manifest.json/add-in/appPackage .

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

   |-- .vscode/
   |-- add-in/
   |-- |-- appPackage/assets/
   |-- |-- infra/
   |-- |-- src/
   |-- |-- .eslintrc.json
   |-- |-- babel.config.json
   |-- |-- package-lock.json
   |-- |-- package.json
   |-- |-- tsconfig.json
   |-- |-- webpack.config.js
   |-- appPackage/
   |-- build\appPackage/
   |-- env/
   |-- infra/
   |-- node_modules/
   |-- tab/
   |-- |-- infra/
   |-- |-- node_modules/
   |-- |-- src/
   |-- |-- .webappignore
   |-- |-- package-lock.json
   |-- |-- package.json
   |-- |-- tsconfig.json
   |-- |-- web.config
   |-- .gitignore
   |-- .localConfigs
   |-- package.json
   |-- teamsapp.local.yml
   |-- teamsapp.yml
   

Изменение файлов конфигурации инструментов

1. package.json Откройте файл в корневой папке проекта.

2. Добавьте следующие скрипты в объект scripts:

   "install:add-in": "cd add-in && npm install",
   "postinstall": "npm run install:add-in && npm run install:tab",
   "build:add-in": "cd add-in && npm run build",
   "build:add-in:dev": "cd add-in && npm run build:dev",
   "build": "npm run build:tab && npm run build:add-in",
   

3. package.json Откройте файл в папке надстройки (не в папке tab или в корневом каталоге проекта).

4. Три скрипта в объекте scripts имеют параметр, manifest.json как показано в следующих примерах:

   "start": "office-addin-debugging start appPackage/manifest.json",
   "stop": "office-addin-debugging stop appPackage/manifest.json",
   "validate": "office-addin-manifest validate appPackage/manifest.json",
   

   В скрипте измените start значение appPackage/manifest.json на ../appPackage/build/appPackage.local.zip. По завершении строка должна выглядеть следующим образом:

   "start": "office-addin-debugging start ../appPackage/build/appPackage.local.zip",
   

   В скриптах validate и stop измените параметр на ../appPackage/build/manifest.local.json. По завершении обновления должны выглядеть следующим образом:

   "stop": "office-addin-debugging stop ../appPackage/build/manifest.local.json",
   "validate": "office-addin-manifest validate ../appPackage/build/manifest.local.json",
   

5. В Visual Studio Code откройте терминал.

6. Перейдите в папку надстройки и выполните команду npm install.

7. В папке надстройки откройте webpack.config.js файл.

8. Измените строку from: "appPackage/manifest*.json", на from: "../appPackage/build/manifest*.json",.

9. В корневой папке проекта откройте teamsapp.local.yml файл и найдите provision раздел . Используйте символ, # чтобы закомментировать строки, проверяющие шаблон манифеста. Это необходимо, так как система проверки манифеста Teams еще не совместима с изменениями, внесенными в шаблон манифеста. По завершении строки должны выглядеть следующим образом:

   # - uses: teamsApp/validateManifest
   #   with:
   #     # Path to manifest template
   #     manifestPath: ./appPackage/manifest.json 
   

   Убедитесь, что вы закомментируете teamsApp/validateManifest только раздел. Не комментируйте teamsManifest/validateAppPackage раздел.

10. Повторите предыдущий шаг для teamsapp.yml файла. Три строки находятся в разделах provision и publish . Закомментируйте их в обоих местах.

11. .vscode\tasks.json Откройте файл в проекте надстройки и скопируйте все задачи в массивеtasks. Добавьте их в tasks массив того же файла в проекте Teams. Не удаляйте все уже имеющиеся задачи. Убедитесь, что все задачи разделены запятыми.

12. В каждом из только что скопированных объектов задач добавьте следующее options свойство, чтобы убедиться, что эти задачи выполняются в папке надстройки .

    "options": {
        "cwd": "${workspaceFolder}/add-in/"
    }
    

    Например, по Debug: Outlook Desktop завершении задача должна выглядеть как в следующем формате JSON.

    {
        "label": "Debug: Outlook Desktop",
        "type": "npm",
        "script": "start",
        "dependsOn": [
          "Check OS",
          "Install"
        ],
        "presentation": {
          "clear": true,
          "panel": "dedicated",
        },
        problemMatcher": [],
        "options": {
            "cwd": "${workspaceFolder}/add-in/"
        }
    }
    

13. Добавьте следующую задачу в массив задач в .vscode\tasks.json файле проекта. Помимо прочего, эта задача создает окончательный манифест.

    {
        // Create the debug resources.
        // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
        "label": "Create resources",
        "type": "teamsfx",
        "command": "provision",
        "args": {
            "template": "${workspaceFolder}/teamsapp.local.yml",
            "env": "local"
        }
    },
    

14. Добавьте следующую задачу в массив задач. Обратите внимание, что она добавляет Start Add-in Locally задачу, которая объединяет задачу приложения Create resources вкладки с задачей отладки надстройки и указывает, что они должны выполняться в этом порядке.

    {
        "label": "Start Add-in Locally",
        "dependsOn": [
            "Create resources",
            "Debug: Outlook Desktop"
        ],
        "dependsOrder": "sequence"
    },
    

15. Добавьте следующую задачу в массив задач. Он объединяет Start Teams App Locally задачу с Start Add-in Locally и указывает, что они должны выполняться в этом порядке.

     {
         "label": "Start App and Add-in Locally",
         "dependsOn": [
             "Start Teams App Locally",
             "Start Add-in Locally"
         ],
         "dependsOrder": "sequence"
     },
    

16. .vscode\launch.json Откройте файл в проекте, который настраивает пользовательский интерфейс RUN AND DEBUG в Visual Studio Code, и добавьте следующие два объекта в начало массива configurations.

    {
        "name": "Launch Add-in Outlook Desktop (Edge Chromium)",
        "type": "msedge",
        "request": "attach",
        "port": 9229,
        "timeout": 600000,
        "webRoot": "${workspaceRoot}",
        "preLaunchTask": "Start Add-in Locally",
        "postDebugTask": "Stop Debug"
    },
    {
        "name": "Launch App and Add-in Outlook Desktop (Edge Chromium)",
        "type": "msedge",
        "request": "attach",
        "port": 9229,
        "timeout": 600000,
        "webRoot": "${workspaceRoot}",
        "preLaunchTask": "Start App and Add-in Locally",
        "postDebugTask": "Stop Debug"
    },
    

17. compounds В разделе того же файла переименуйте Debug in Teams (Edge) состав Launch App Debug (Edge) в , а состав — в Launch App Debug (Chrome)Debug in Teams (Chrome) .

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

    1. Убедитесь, что рабочий стол Outlook закрыт.

    2. Откройте Visual Studio Code.

    3. Выберите Набор средств Teams на панели действий.

    4. В разделе УЧЕТНЫе записи убедитесь, что вы вошли в Microsoft 365.

    5. Выберите Просмотр>выполнить в Visual Studio Code.

    6. В раскрывающемся меню ЗАПУСК И ОТЛАДКА выберите Запустить надстройку Outlook Desktop (edge Chromium) и нажмите клавишу F5. Выполняется сборка проекта, и откроется окно webpack dev-server. Этот процесс может занять несколько минут и открыть окно рабочего стола Outlook.

    7. Перейдите в Outlook.

    8. Откройте папку "Входящие" удостоверения учетной записи Microsoft 365.

    9. Откройте любое сообщение.

       Вкладка Надстройка Contoso с двумя кнопками появится на ленте Главная (или на ленте Сообщение , если открыть сообщение в собственном окне).

    10. Нажмите кнопку Показать область задач . Откроется область задач.

    11. Нажмите кнопку Выполнить действие. В верхней части сообщения появится небольшое уведомление.

    12. Чтобы остановить отладку и удалить надстройку, выберите Запустить>остановить отладку в Visual Studio Code. Если окно разработки Webpack не закрывается, откройте Visual Studio Code TERMINAL в корне проекта и запустите npm stop.

Одновременное выполнение приложения и надстройки локально

Вы можете загрузить и запустить приложение и надстройку одновременно, но отладчик не может надежно подключиться при выполнении обоих приложений. Таким образом, чтобы выполнить отладку, запускайте только по одному за раз.

Сведения об отладке приложения см. в последнем шаге раздела Подготовка проекта приложения Teams .

Сведения об отладке надстройки см. в последнем шаге раздела Изменение файлов конфигурации инструментов .

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

1. Убедитесь, что рабочий стол Outlook закрыт.

2. Откройте Visual Studio Code.

3. Выберите Набор средств Teams на панели действий.

4. В разделе УЧЕТНЫе записи убедитесь, что вы вошли в Microsoft 365.

5. Выберите Просмотр>выполнить в Visual Studio Code.

6. В раскрывающемся меню ЗАПУСК И ОТЛАДКА выберите Запуск приложения и надстройки Outlook Desktop (Edge Chromium) и нажмите клавишу F5. Выполняется сборка проекта, и откроется окно webpack dev-server. Приложение tab размещается в терминале Visual Studio Code. Этот процесс может занять несколько минут, и выполняются следующие действия:

   • Teams открывается в браузере с запросом на добавление приложения вкладки. Если Teams не была открыта к моменту открытия рабочего стола Outlook, автоматическая загрузка неопубликованных приложений завершилась ошибкой. Его можно загрузить вручную, чтобы увидеть одновременное выполнение приложения и надстройки. Инструкции по загрузке неопубликованных приложений см. в разделе Отправка приложения в Teams. Вы найдете файл manifest.zip для отправки по адресу C:\Users\{yourname}\AppData\Local\Temp.
   • Откроется рабочий стол Outlook.

7. В командной строке Teams выберите Добавить , и откроется вкладка.

8. Перейдите в Outlook.

9. В Outlook откройте папку "Входящие" удостоверения учетной записи Microsoft 365.

10. Откройте любое сообщение.

    Вкладка Надстройка Contoso с двумя кнопками появится на ленте Главная (или на ленте Сообщение , если открыть сообщение в собственном окне).

11. Нажмите кнопку Показать область задач . Откроется область задач.

12. Нажмите кнопку Выполнить действие. В верхней части сообщения появится небольшое уведомление.

13. Чтобы остановить отладку и удалить надстройку, выберите Запустить>остановить отладку в Visual Studio Code. Если окно разработки Webpack не закрывается, откройте Visual Studio Code TERMINAL в корне проекта и запустите npm stop.

14. Если вам пришлось вручную загрузить неопубликованное приложение на вкладке Teams, удалите его из Teams, как описано в разделе Удаление приложения.

Перемещение приложения в Azure

1. teamsapp.yml Откройте файл в корне проекта и найдите строку deploymentName: Create-resources-for-tab. Замените его значением deploymentName: Create-resources-for-tab-and-addin.

2. В том же файле добавьте следующий код в конец provision: раздела.

   Примечание.

   Отступ имеет смысл в YAML, поэтому - uses операторы - name должны быть отступами на два пробела, with операторы должны быть выровнены с uses, а дочерние with элементы должны иметь отступ еще два пробела.

   provision:
   
     -- other YAML omitted --
   
     - uses: azureStorage/enableStaticWebsite
       with:
         storageResourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}
         indexPage: index.html
         errorPage: error.html
   

3. В том же файле замените весь deploy: раздел следующим кодом. Эти изменения учитывают новую структуру папок и необходимость развертывания файлов надстройки и вкладок.

   deploy:
     - name: InstallAllCapabilities
       uses: cli/runNpmCommand # Run npm command
       with:
         args: install
   
     - name: BuildAllCapabilities
       uses: cli/runNpmCommand # Run npm command
       with:
         args: run build --if-present
   
     - name: DeployTab
       uses: azureAppService/zipDeploy
       with:
         artifactFolder: tab
         ignoreFile: ./tab/.webappignore
         # The ID of the cloud resource where the tab app will be deployed.
         # This key will be generated by arm/deploy action automatically.
         resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}} 
   
     - name: DeployAddin
       uses: azureStorage/deploy
       with:
         workingDirectory: .
         # Deploy base folder
         artifactFolder: add-in/dist
         # The ID of the cloud resource where the add-in will be deployed.
         resourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}
   

4. infra/azure.parameters.json Откройте файл в корневом каталоге проекта и замените его содержимое следующим кодом JSON:

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

5. infra/azure.bicep Откройте файл в корневой папке проекта (а не в вложенных папках вкладки или надстройки) и замените его содержимое следующим кодом:

   // Params for Teams tab resources
   @maxLength(20)
   @minLength(4)
   @description('Used to generate names for all resources in this file')
   param resourceBaseName string
   param webAppSku string
   param serverfarmsName string = resourceBaseName
   param webAppName string = resourceBaseName
   param location string = resourceGroup().location
   param storageSku string
   param storageName string = resourceBaseName
   
   module tabModule '../tab/infra/azure.bicep' = {
     name: 'tabModule'
     params: {
       resourceBaseName: resourceBaseName
       webAppSku: webAppSku
       serverfarmsName: serverfarmsName
       webAppName: webAppName
       location: location
     }
   }
   
   module addinModule '../add-in/infra/azure.bicep' = {
     name: 'addinModule'
     params: {
       resourceBaseName: resourceBaseName
       storageSku: storageSku
       storageName: storageName
       location: location
     }
   }
   
   // The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
   output TAB_AZURE_APP_SERVICE_RESOURCE_ID string = tabModule.outputs.TAB_AZURE_APP_SERVICE_RESOURCE_ID // used in deploy stage
   output TAB_DOMAIN string = tabModule.outputs.TAB_DOMAIN
   output TAB_ENDPOINT string = tabModule.outputs.TAB_ENDPOINT
   
   output ADDIN_AZURE_STORAGE_RESOURCE_ID string = addinModule.outputs.ADDIN_AZURE_STORAGE_RESOURCE_ID // used in deploy stage
   output ADDIN_DOMAIN string = addinModule.outputs.ADDIN_DOMAIN
   output ADDIN_ENDPOINT string = addinModule.outputs.ADDIN_ENDPOINT
   

6. В Visual Studio Code откройте Набор средств Teams.

7. В разделе Учетные записи убедитесь, что вы вошли в учетную запись Azure (в дополнение к входу в учетную запись Microsoft 365). Дополнительные сведения о входе в систему см. в разделе Упражнение. Создание ресурсов Azure для размещения приложения-вкладки Teams и перейдите к разделу Вход в Azure с помощью набора средств Teams .

8. В разделе Жизненный цикл набора средств Teams выберите Подготовить. Это может занять несколько минут. Вам может быть предложено выбрать одну из групп ресурсов Azure.

9. После завершения подготовки выберите Развернуть , чтобы развернуть код приложения в Azure.

Запуск возможности вкладки из удаленного развертывания

1. В Visual Studio Code выберите Просмотр>выполнения.
2. В раскрывающемся меню выберите Запуск удаленного управления в Teams (Edge) или Запуск удаленного управления в Teams (Chrome).
3. Нажмите клавишу F5, чтобы просмотреть возможность вкладки Teams.

Запуск возможности надстройки из удаленного развертывания

1. Скопируйте рабочий URL-адрес из ADDIN_ENDPOINT файла in env/.env.dev .

2. Измените \add-in\webpack.config.js файл и измените urlProd значение константы на только что скопированное значение. Не забудьте добавить "/" в конец URL-адреса.

3. В Visual Studio Code TERMINAL перейдите к корню проекта и выполните команду npm run build:add-in.

4. Скопируйте файл \add-in\dist\manifest.dev.json в папку \appPackage .

5. Переименуйте копию в папке \appPackage на manifest.addinPreview.json.

6. В терминале запустите npx office-addin-dev-settings sideload .\appPackage\manifest.addinPreview.json. Этот процесс может занять несколько минут и открыть рабочий стол Outlook. (Если вам будет предложено установить office-addin-dev-settings, ответьте да.)

7. Перейдите в Outlook.

8. Откройте папку "Входящие" удостоверения учетной записи Microsoft 365.

9. Откройте любое сообщение.

   Вкладка Надстройка Contoso с двумя кнопками появится на ленте Главная (или на ленте Сообщение , если открыть сообщение в собственном окне).

10. Нажмите кнопку Показать область задач . Откроется область задач.

11. Нажмите кнопку Выполнить действие. В верхней части сообщения появится небольшое уведомление.

Что дальше

Существуют и другие часто предлагаемые дальнейшие действия, например:

• Добавьте проверку подлинности и выполните API Graph вызов. Сведения о возможности вкладки см. в статье Добавление единого входа в приложение Teams. Сведения о возможности надстройки см . в статье Включение единого входа (SSO) в надстройке Office.
• Настройка конвейеров CI/CD.
• Вызов серверного API.

См. также

• Обзор надстроек Outlook
• Надстройки Office с манифестом унифицированного приложения для Microsoft 365
• Создание надстройки Outlook с помощью унифицированного манифеста для Microsoft 365