Adición de un complemento de Outlook a una aplicación de Teams

Artículo
05/02/2024

Sugerencia

Este artículo le ayuda a comprender cómo crear una aplicación de Teams combinada y un complemento de Office haciendo que comience con una aplicación de Teams recién creada y un complemento de Outlook. Para obtener información general sobre el proceso general de combinación de aplicaciones de Teams y complementos de Office, incluidas las aplicaciones y complementos de Teams existentes que ya están en uso, consulte Guía general para combinar un complemento de Outlook y una aplicación de Teams.

Introducción

Los complementos de Outlook son aplicaciones web que amplían la funcionalidad de Outlook. Con un complemento de Outlook, puede:

Lea y escriba mensajes de correo electrónico y participe en invitaciones a reuniones, respuestas, cancelaciones y citas.
Lee las propiedades del buzón del usuario.
Responda a eventos automáticamente, como el envío de un correo electrónico.
Integre con servicios externos, incluidas las herramientas de administración de proyectos y CRM.
Agregue botones de cinta de opciones personalizados o elementos de menú para realizar tareas específicas.

La integración de un complemento de Outlook con una aplicación de Teams permite escenarios que ninguno de ellos podría lograr de forma independiente. Considere un escenario en el que un vendedor puede insertar un descuento personalizado en un correo electrónico a un cliente y registrar la oferta en una base de datos back-end. El administrador de ventas también puede ver datos sobre todos los descuentos que se han ofrecido en una pestaña de Teams. Para obtener más información, vea Ejemplo de ofertas de descuento.

Información general sobre los complementos de Outlook proporciona información sobre las funcionalidades de los complementos de Outlook, cómo se estructuran, cómo mejoran las formas más antiguas de ampliar Outlook, en qué plataformas se puede ejecutar el complemento (Windows, Mac, mobile y web) y cómo empezar a crear uno.

Este artículo le guiará por los pasos para agregar un complemento de Outlook a una aplicación de Teams, probarlo y, a continuación, implementarlo en Azure.

Requisitos previos

Antes de empezar, asegúrese de cumplir los siguientes requisitos:

Una cuenta de Microsoft 365 que incluye Teams para probar la aplicación. Como alternativa, puede tener suscripciones independientes a Microsoft 365 y Teams. Por ejemplo, una cuenta de prueba con *.onmicrosoft.com a través del Programa para desarrolladores de Microsoft 365.
La cuenta de Microsoft 365 se agrega como una cuenta en Outlook de escritorio. Para obtener más información, vea Agregar una cuenta de correo electrónico a Outlook.
Una cuenta de Azure con suscripción activa para implementar la aplicación de Teams en Azure. Si no tiene una, puede crear su cuenta gratuita de Azure.
Una aplicación de Teams creada con la versión más reciente del kit de herramientas de Teams.

Adición de un complemento de Outlook a una aplicación de Teams

Para agregar un complemento de Outlook a una aplicación de Teams:

Prepare el proyecto de aplicación de Teams.
Cree un proyecto de complemento de Office que inicialmente sea independiente del proyecto de aplicación de Teams.
Combine el manifiesto del proyecto de complemento de Outlook en el manifiesto unificado para Microsoft 365.
Copie los archivos de complemento de Outlook en el proyecto de aplicación de Teams.
Edite los archivos de configuración de herramientas.
Ejecutar la aplicación y el complemento localmente al mismo tiempo
Mueva la aplicación a Azure.

Preparación del proyecto de aplicación de Teams

Comience separando el código fuente de la pestaña (o bot) en su propia subcarpeta. En estas instrucciones se supone que el proyecto tiene inicialmente la siguiente estructura. Para crear un proyecto de aplicación de Teams con esta estructura, use la versión más reciente del kit de herramientas de 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

Nota:

Si está trabajando con un nuevo proyecto de pestaña de Teams, la carpeta node_modules y el archivo package-lock.json no están presentes. El node_modules se crea en un paso posterior cuando se ejecuta npm install en la raíz del proyecto. La carpeta de compilación no está presente a menos que y hasta que ejecute un script de compilación en el proyecto.

Para separar el código fuente de la pestaña o bot, siga estos pasos:

Cree una carpeta en la pestaña con nombre raíz (o bot).

Nota:

Por motivos de simplicidad, el resto de este artículo supone que la aplicación de Teams existente es una pestaña. Si comenzó con un bot, reemplace "tab" por "bot" en todas estas instrucciones, incluido el contenido que agregue o edite en varios archivos.
Copie la carpeta infra en la nueva subcarpeta y, a continuación, elimine el azure.parameters.json archivo de la nueva carpetade la pestaña> infra.
Mueva las carpetas node_modules y src a la nueva subcarpeta.

Mueva los .webappignorearchivos , package-lock.json, package.json, tsconfig.jsony web.config a la nueva subcarpeta.

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

En la package.json carpeta que acaba de mover a la pestaña, elimine el script denominado dev:teamsfx del scripts objeto . Este script se agrega a un nuevo package.json en el paso siguiente.

Cree un nuevo archivo denominado package.json en la raíz del proyecto y agregue el siguiente contenido:

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

Cambie las namepropiedades , versiony author , según sea necesario.
Abra el teamsapp.yml archivo en la raíz del proyecto, busque la línea ignoreFile: .webappignorey cámbielo a ignoreFile: ./tab/.webappignore.
Abra el teamsapp.local.yml archivo en la raíz del proyecto, busque la línea args: install --no-audity cámbiela a args: run install:tab --no-audit.
Abra TERMINAL en Visual Studio Code. Vaya a la raíz del proyecto y ejecute npm install. Se crean una nueva node_modules carpeta y un nuevo package.lock.json archivo en la raíz del proyecto.
A continuación, ejecute npm run install:tab. Una nueva node_modules carpeta y un nuevo package.lock.json archivo se crean en la carpeta tab, si aún no están allí.
Compruebe que puede transferir localmente la pestaña con los pasos siguientes:
1. Abra El kit de herramientas de Teams.
2. En la sección CUENTAS , compruebe que ha iniciado sesión en la cuenta de Microsoft 365.
3. Seleccione Ver>ejecución en Visual Studio Code.
4. En el menú desplegable EJECUTAR Y DEPURAR , seleccione Depurar en Teams (Edge) y presione F5.
  
  El proyecto se compila y ejecuta. Este proceso puede tardar un par de minutos. Cuando se completa, Teams se abre en un explorador con un mensaje para agregar la aplicación de pestaña.
  
  Nota:
  
  Si es la primera vez que depura una aplicación de Teams en este equipo, se le pedirá que instale un certificado SSL. Seleccione Instalar y, a continuación, Sí en el segundo mensaje. Inicie sesión en su cuenta de Microsoft 365 si se le pide que lo haga.
5. Seleccione Agregar.
6. Para detener la depuración y desinstalar la aplicación, seleccione Ejecutar>detener depuración en Visual Studio Code.

Creación de un proyecto de complemento de Outlook

Abra una segunda instancia de Visual Studio Code.
Seleccione Kit de herramientas de Teams en la barra de actividad.
Seleccione Crear una nueva aplicación.
En el menú desplegable Seleccionar una opción, seleccione Panelde tareasdel complemento de> Outlook.
Seleccione la carpeta donde desea crear el complemento.
Asigne un nombre (sin espacios) al proyecto cuando se le solicite.

Teams Toolkit crea el proyecto con archivos básicos y scaffolding y lo abre en una nueva ventana de Visual Studio Code. Usará este proyecto como origen para los archivos y el marcado que agregue al proyecto de Teams.
Aunque no va a desarrollar este proyecto, realice los pasos siguientes para comprobar que se puede transferir de forma local desde Visual Studio Code antes de continuar:
1. Asegúrese de que el escritorio de Outlook está cerrado.
2. Abrir Visual Studio Code.
3. Seleccione Kit de herramientas de Teams en la barra de actividad.
4. En la sección CUENTAS , compruebe que ha iniciado sesión en Microsoft 365.
5. Seleccione Ver>ejecución en Visual Studio Code.
6. En el menú desplegable EJECUTAR Y DEPURAR, seleccione Outlook Desktop (Edge Chromium) y presione F5.
  
  El proyecto se compila y se abre una ventana de servidor de desarrollo de Webpack. Este proceso puede tardar un par de minutos y abre una ventana de escritorio de Outlook.
7. Vaya a Outlook.
8. Abra la Bandeja de entrada de la identidad de la cuenta de Microsoft 365.
9. Abra cualquier mensaje.
  
  Aparece una pestaña Complemento de Contoso con dos botones en la cinta Inicio (o en la cinta Mensaje , si abre el mensaje en su propia ventana).
10. Seleccione el botón Mostrar panel de tareas . Se abre un panel de tareas.
11. Seleccione el botón Realizar una acción. Aparece una pequeña notificación cerca de la parte superior del mensaje.
12. Para detener la depuración y desinstalar el complemento, seleccione Ejecutar>detener depuración en Visual Studio Code. Si la ventana webpack dev-server no se cierra, abra el Visual Studio Code TERMINAL en la raíz del proyecto y ejecute npm stop.

Combinar el manifiesto

El manifiesto de la aplicación de Teams se genera en tiempo de depuración y transferencia local (o tiempo de compilación) desde el manifest.json archivo en la carpeta \appPackage del proyecto de Teams. Este archivo es una plantilla para un manifiesto. En este artículo, se conoce como plantilla o plantilla de manifiesto. La mayoría del marcado se codifica de forma rígida en la plantilla, pero también hay algunos archivos de configuración que contienen datos que se agregan al manifiesto generado final. En este procedimiento, realice las siguientes tareas:

Copie el marcado del manifiesto del complemento en la plantilla de manifiesto de la aplicación teams.
Edite los archivos de configuración.

A menos que se especifique lo contrario, el archivo que cambie es \appPackage\manifest.json.

Copie los valores de propiedad "$schema" y "manifestVersion" del manifiesto del complemento en las propiedades correspondientes del archivo de plantilla de manifiesto de la aplicación Teams.
Modifique los valores de propiedad "name.full", "description.short" y "description.full" según sea necesario para reflejar el hecho de que un complemento de Outlook forma parte de la aplicación.
Haga lo mismo con el valor "name.short".

Se recomienda mantener en ${{TEAMSFX_ENV}} el final del nombre. Esta variable se reemplaza por la cadena "local" al depurar en localhost y por "dev" al depurar desde un dominio remoto o en modo de producción.

Nota:

Históricamente, la documentación para desarrolladores de complementos de Office usa el término "desarrollo" o "modo de desarrollo" para hacer referencia a la ejecución del complemento en un host local. Usa el término "prod" o "modo de producción" para hacer referencia a la ejecución del complemento en un host remoto para ensayo o producción. La documentación para desarrolladores de Teams usa el término "local" para hacer referencia a la ejecución del complemento en un host local y el término "desarrollo" para hacer referencia a la ejecución del complemento en un host remoto para la depuración remota, que normalmente se denomina "ensayo". Estamos trabajando para conseguir que la terminología sea coherente.

El siguiente JSON es un ejemplo:
```
"short": "Contoso Tab and Add-in-${{TEAMSFX_ENV}}",
```
Nota:

El valor "name.short" aparece en la funcionalidad de pestaña Teams y en el complemento de Outlook. Estos son algunos ejemplos:
- Es la etiqueta en el botón de inicio de la pestaña Teams.
- Es contenido de la barra de título del panel de tareas del complemento.
Si ha cambiado el valor "name.short" de su valor predeterminado (que es el nombre del proyecto seguido de la ${{TEAMSFX_ENV}} variable ), realice exactamente el mismo cambio en todos los lugares donde el nombre del proyecto aparezca en los dos archivos siguientes en la raíz del proyecto: teamsapp.yml y teamsapp.local.yml.
Si no hay ninguna matriz "authorization.permissions.resourceSpecific" en la plantilla de manifiesto de Teams, cópiela del manifiesto del complemento como una propiedad de nivel superior. Si ya hay uno en la plantilla de Teams, copie los objetos de la matriz del manifiesto del complemento en la matriz de la plantilla de Teams. El siguiente JSON es un ejemplo:
```
"authorization": {
    "permissions": {
        "resourceSpecific": [
            {
                "name": "MailboxItem.Read.User",
                "type": "Delegated"
            }
        ]
    }
},
```
En el env/.env.local archivo, busque las líneas que asignan valores a las TAB_DOMAIN variables y TAB_ENDPOINT . Agregue las líneas siguientes inmediatamente debajo de ellas:
```
ADDIN_DOMAIN=localhost:3000
ADDIN_ENDPOINT=https://localhost:3000
```
En el env/.env.dev archivo, agregue la siguiente línea debajo de ... TAB_ENDPOINT= línea:
```
ADDIN_ENDPOINT=
```
En la plantilla de manifiesto de Teams, agregue el marcador de posición "${{ADDIN_DOMAIN}}", a la parte superior de la "validDomains" matriz. El kit de herramientas de Teams lo reemplaza por un dominio localhost al desarrollar localmente. Cuando se implementa la aplicación combinada finalizada en ensayo o producción, tal como se describe en Traslado de la aplicación a Azure, teams Toolkit reemplaza el marcador de posición por el URI de ensayo y producción. El siguiente JSON es un ejemplo:
```
"validDomains": [
    "${{ADDIN_DOMAIN}}",

    // other domains or placeholders
],
```
Copie toda la propiedad "extensiones" del manifiesto del complemento en la plantilla de manifiesto de aplicación de Teams como una propiedad de nivel superior.

Copia de los archivos de complementos de Outlook en el proyecto de aplicación de Teams

Cree una carpeta de nivel superior denominada complemento en el proyecto de aplicación de Teams.
Copie los siguientes archivos y carpetas del proyecto de complemento en la carpeta de complementos del proyecto de aplicación de Teams.
- /appPackage
- /infra
- /Fuente
- .eslintrc.json
- babel.config.json
- package-lock.json
- package.json
- tsconfig.json
- webpack.config.js

Cuando haya terminado de copiar, elimine el manifest.json archivo en la carpeta /add-in/appPackage .

La estructura de carpetas ahora debe tener un aspecto similar al del ejemplo siguiente:

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

Edición de los archivos de configuración de herramientas

Abra el package.json archivo en la raíz del proyecto.

Agregue los siguientes scripts al objeto "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",

Abra el package.json archivo en la carpeta del complemento (no en la carpeta tab ni en la raíz del proyecto).

Tres de los scripts del scripts objeto tienen un manifest.json parámetro como en los ejemplos siguientes:

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

En el start script, cambie appPackage/manifest.json a ../appPackage/build/appPackage.local.zip. Cuando haya terminado, la línea debe tener este aspecto:

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

En los validate scripts y stop , cambie el parámetro a ../appPackage/build/manifest.local.json. Cuando haya terminado, las actualizaciones deben tener este aspecto:

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

En Visual Studio Code, abra TERMINAL.
Vaya a la carpeta del complemento y ejecute el comando npm install.
En la carpeta del complemento , abra el webpack.config.js archivo.
Cambie la línea from: "appPackage/manifest*.json", a from: "../appPackage/build/manifest*.json",.
En la raíz del proyecto, abra el teamsapp.local.yml archivo y busque la provision sección . Use el # carácter para comentar las líneas que validan la plantilla de manifiesto. Esto es necesario porque el sistema de validación de manifiestos de Teams aún no es compatible con los cambios realizados en la plantilla de manifiesto. Cuando haya terminado, las líneas deben tener un aspecto similar al código siguiente:
```
# - uses: teamsApp/validateManifest
#   with:
#     # Path to manifest template
#     manifestPath: ./appPackage/manifest.json 
```
Asegúrese de comentar solo la teamsApp/validateManifest sección. No comente la teamsManifest/validateAppPackage sección.
Repita el paso anterior para el teamsapp.yml archivo. Las tres líneas se encuentran en las provision secciones y publish . Comentarlos en ambos lugares.
Abra el .vscode\tasks.json archivo en el proyecto del complemento y copie todas las tareas de la tasks matriz. Agréguelos a la tasks matriz del mismo archivo en el proyecto de Teams. No quite ninguna de las tareas que ya están allí. Asegúrese de que todas las tareas están separadas por comas.

En cada uno de los objetos de tarea que acaba de copiar, agregue la siguiente options propiedad para asegurarse de que estas tareas se ejecutan en la carpeta del complemento .

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

Por ejemplo, la Debug: Outlook Desktop tarea debe aparecer como el siguiente JSON cuando haya terminado.

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

Agregue la siguiente tarea a la matriz tasks en el .vscode\tasks.json archivo del proyecto. Entre otras cosas, esta tarea crea el manifiesto final.

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

Agregue la siguiente tarea a la matriz tasks. Tenga en cuenta que agrega una Start Add-in Locally tarea que combina la tarea de Create resources la aplicación de pestaña con la tarea de depuración del complemento y especifica que deben ejecutarse en ese orden.
```
{
    "label": "Start Add-in Locally",
    "dependsOn": [
        "Create resources",
        "Debug: Outlook Desktop"
    ],
    "dependsOrder": "sequence"
},
```

Agregue la siguiente tarea a la matriz tasks. Combina la Start Teams App Locally tarea con Start Add-in Locally y especifica que deben ejecutarse en ese orden.

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

Abra el .vscode\launch.json archivo en el proyecto, que configura la interfaz de usuario RUN AND DEBUG en Visual Studio Code y agregue los dos objetos siguientes a la parte superior de la matriz "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"
},

En la compounds sección del mismo archivo, cambie el nombre del Debug in Teams (Edge) compuesto a Launch App Debug (Edge) y cambie el nombre del Debug in Teams (Chrome) compuesto a Launch App Debug (Chrome).
Compruebe que puede transferir localmente la funcionalidad del complemento de la aplicación teams a Outlook con los pasos siguientes:
1. Asegúrese de que el escritorio de Outlook está cerrado.
2. Abrir Visual Studio Code.
3. Seleccione Kit de herramientas de Teams en la barra de actividad.
4. En la sección CUENTAS , compruebe que ha iniciado sesión en Microsoft 365.
5. Seleccione Ver>ejecución en Visual Studio Code.
6. En el menú desplegable EJECUTAR Y DEPURAR, seleccione Iniciar complemento de Outlook Desktop (edge Chromium) y presione F5. El proyecto se compila y se abre una ventana de servidor de desarrollo de Webpack. Este proceso puede tardar un par de minutos y abre una ventana de escritorio de Outlook.
7. Vaya a Outlook.
8. Abra la Bandeja de entrada de la identidad de la cuenta de Microsoft 365.
9. Abra cualquier mensaje.
  
  Aparece una pestaña Complemento de Contoso con dos botones en la cinta Inicio (o en la cinta Mensaje , si abre el mensaje en su propia ventana).
10. Seleccione el botón Mostrar panel de tareas . Se abre un panel de tareas.
11. Seleccione el botón Realizar una acción. Aparece una pequeña notificación cerca de la parte superior del mensaje.
12. Para detener la depuración y desinstalar el complemento, seleccione Ejecutar>detener depuración en Visual Studio Code. Si la ventana webpack dev-server no se cierra, abra el Visual Studio Code TERMINAL en la raíz del proyecto y ejecute npm stop.

Ejecutar la aplicación y el complemento localmente al mismo tiempo

Puede transferir localmente y ejecutar la aplicación y el complemento simultáneamente, pero el depurador no se puede asociar de forma confiable cuando ambos se ejecutan. Por lo tanto, para depurar, ejecute solo uno a uno.

Para depurar la aplicación, consulte el último paso de la sección Preparar el proyecto de aplicación de Teams .

Para depurar el complemento, consulte el último paso de la sección Editar los archivos de configuración de herramientas .

Para ver la aplicación y el complemento en ejecución al mismo tiempo, siga estos pasos.

Asegúrese de que el escritorio de Outlook está cerrado.
Abrir Visual Studio Code.
Seleccione Kit de herramientas de Teams en la barra de actividad.
En la sección CUENTAS , compruebe que ha iniciado sesión en Microsoft 365.
Seleccione Ver>ejecución en Visual Studio Code.
En el menú desplegable EJECUTAR Y DEPURAR, seleccione Iniciar aplicación y Complemento Outlook Desktop (edge Chromium) y presione F5. El proyecto se compila y se abre una ventana de servidor de desarrollo de Webpack. La aplicación de pestaña se hospeda en el terminal de Visual Studio Code. Este proceso puede tardar un par de minutos y se producen las siguientes acciones:
- Teams se abre en un explorador con un mensaje para agregar la aplicación de pestaña. Si Teams no se ha abierto en el momento en que se abre el escritorio de Outlook, se ha producido un error en la instalación local automática. Puede transferirla de forma local manualmente para ver la aplicación y el complemento en ejecución al mismo tiempo. Para obtener instrucciones de instalación local, consulte Carga de la aplicación en Teams. Encontrará el archivo manifest.zip que se va a cargar en C:\Users\{yourname}\AppData\Local\Temp.
- Se abre el escritorio de Outlook.
En el símbolo del sistema de Teams, seleccione Agregar y se abrirá la pestaña.
Vaya a Outlook.
En Outlook, abra la Bandeja de entrada de la identidad de la cuenta de Microsoft 365.
Abra cualquier mensaje.

Aparece una pestaña Complemento de Contoso con dos botones en la cinta Inicio (o en la cinta Mensaje , si abre el mensaje en su propia ventana).
Seleccione el botón Mostrar panel de tareas . Se abre un panel de tareas.
Seleccione el botón Realizar una acción. Aparece una pequeña notificación cerca de la parte superior del mensaje.
Para detener la depuración y desinstalar el complemento, seleccione Ejecutar>detener depuración en Visual Studio Code. Si la ventana webpack dev-server no se cierra, abra el Visual Studio Code TERMINAL en la raíz del proyecto y ejecute npm stop.
Si tuviera que transferir manualmente de forma local la aplicación de pestaña teams, quítelo de Teams como se indica en Quitar la aplicación.

Traslado de la aplicación a Azure

Abra el teamsapp.yml archivo en la raíz del proyecto y busque la línea deploymentName: Create-resources-for-tab. Cambie el valor a deploymentName: Create-resources-for-tab-and-addin.
En el mismo archivo, agregue el código siguiente al final de la provision: sección.

Nota:

La sangría es significativa en YAML, por lo que - uses- name las instrucciones se deben aplicar sangrías a dos espacios, with las instrucciones deben alinearse con usesy los elementos secundarios de with deben aplicar sangría a otros dos espacios.
```
provision:

  -- other YAML omitted --

  - uses: azureStorage/enableStaticWebsite
    with:
      storageResourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}
      indexPage: index.html
      errorPage: error.html
```

En el mismo archivo, reemplace toda deploy: la sección por el código siguiente. Estos cambios tienen en cuenta la nueva estructura de carpetas y el hecho de que es necesario implementar los archivos de complemento y pestaña.

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

Abra el infra/azure.parameters.json archivo en la raíz del proyecto y reemplace su contenido por el siguiente 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"
      }
    }
}

Abra el infra/azure.bicep archivo en la raíz del proyecto (no el de las subcarpetas de pestaña o complemento) y reemplace su contenido por el código siguiente:

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

En Visual Studio Code, abra Teams Toolkit.
En la sección CUENTAS , asegúrese de que ha iniciado sesión en su cuenta de Azure (además de haber iniciado sesión en su cuenta de Microsoft 365). Para obtener más información sobre el inicio de sesión, abra Ejercicio: Creación de recursos de Azure para hospedar una aplicación de pestaña de Teams y desplácese hasta la sección Iniciar sesión en Azure en el kit de herramientas de Teams .
En la sección CICLO DE VIDA del Kit de herramientas de Teams, seleccione Aprovisionar. Puede tardar varios minutos. Es posible que se le pida que seleccione uno de los grupos de recursos de Azure.
Cuando se complete el aprovisionamiento, seleccione Implementar para implementar el código de la aplicación en Azure.

Ejecución de la funcionalidad de tabulación desde la implementación remota

En Visual Studio Code, seleccione Ver>ejecución.
En el menú desplegable, seleccione Iniciar remoto en Teams (Edge) o Iniciar remoto en Teams (Chrome).
Presione F5 para obtener una vista previa de la funcionalidad de pestaña de Teams.

Ejecución de la funcionalidad del complemento desde la implementación remota

Copie la dirección URL de producción del ADDIN_ENDPOINT archivo en env/.env.dev .
Edite \add-in\webpack.config.js el archivo y cambie urlProd el valor constante al valor que acaba de copiar. Asegúrese de agregar un "/" al final de la dirección URL.
En el Visual Studio Code TERMINAL, vaya a la raíz del proyecto y ejecute npm run build:add-in.
Copie el archivo \add-in\dist\manifest.dev.json en la \appPackage carpeta .
Cambie el nombre de la copia de la \appPackage carpeta a manifest.addinPreview.json.
En TERMINAL, ejecute npx office-addin-dev-settings sideload .\appPackage\manifest.addinPreview.json. Este proceso puede tardar un par de minutos y abre el escritorio de Outlook. (Si se le pide que instale office-addin-dev-settings, responda sí).
Vaya a Outlook.
Abra la Bandeja de entrada de la identidad de la cuenta de Microsoft 365.
Abra cualquier mensaje.

Aparece una pestaña Complemento de Contoso con dos botones en la cinta Inicio (o en la cinta Mensaje , si abre el mensaje en su propia ventana).
Seleccione el botón Mostrar panel de tareas . Se abre un panel de tareas.
Seleccione el botón Realizar una acción. Aparece una pequeña notificación cerca de la parte superior del mensaje.

¿Qué sigue?

Hay otros pasos siguientes que se suelen sugerir, por ejemplo:

Agregue autenticación y realice una llamada Graph API. Para obtener la funcionalidad de pestaña, consulte Agregar inicio de sesión único a la aplicación Teams. Para obtener la funcionalidad del complemento, consulte Habilitar el inicio de sesión único (SSO) en un complemento de Office.
Configurar canalizaciones de CI/CD.
Llame a una API de back-end.

Compartir a través de

Adición de un complemento de Outlook a una aplicación de Teams

Introducción

Requisitos previos

Adición de un complemento de Outlook a una aplicación de Teams

Preparación del proyecto de aplicación de Teams

Creación de un proyecto de complemento de Outlook

Combinar el manifiesto

Copia de los archivos de complementos de Outlook en el proyecto de aplicación de Teams

Edición de los archivos de configuración de herramientas

Ejecutar la aplicación y el complemento localmente al mismo tiempo

Traslado de la aplicación a Azure

Ejecución de la funcionalidad de tabulación desde la implementación remota

Ejecución de la funcionalidad del complemento desde la implementación remota

¿Qué sigue?

Vea también

Recursos adicionales