Adicionar um Suplemento do Outlook a uma aplicação do Teams

Artigo
06/14/2024

Dica

Este artigo ajuda-o a compreender como criar uma aplicação combinada do Teams e um suplemento do Office, fazendo com que comece com uma aplicação do Teams recém-criada e um suplemento do Outlook. Para obter uma descrição geral do processo geral de intercalação de aplicações do Teams e suplementos do Office, incluindo aplicações e suplementos existentes do Teams que já estão a ser utilizados, consulte Orientações gerais para combinar um suplemento do Outlook e uma aplicação do Teams.

Introdução

Os Suplementos do Outlook são aplicações Web que expandem a funcionalidade do Outlook. Com um Suplemento do Outlook, pode:

Leia e escreva mensagens de e-mail e participe em convites de reunião, respostas, cancelamentos e compromissos.
Leia as propriedades da caixa de correio do utilizador.
Responda automaticamente a eventos, como enviar um e-mail.
Integre com serviços externos, incluindo crm e ferramentas de gestão de projetos.
Adicione botões do friso personalizados ou itens de menu para executar tarefas específicas.

Integrar um Suplemento do Outlook numa aplicação do Teams permite cenários que nenhum deles conseguiu alcançar de forma independente. Considere um cenário em que um vendedor pode inserir um desconto personalizado num e-mail para um cliente e registar a oferta numa base de dados de back-end. O gestor de vendas também pode ver dados sobre todos os descontos que foram oferecidos num separador do Teams. Para obter mais informações, veja Exemplo de Ofertas de Desconto.

A Descrição Geral dos Suplementos do Outlook fornece informações sobre as capacidades dos Suplementos do Outlook, como são estruturados, como melhoram as formas mais antigas de expandir o Outlook, as plataformas nas quais o suplemento pode ser executado (Windows, Mac, dispositivos móveis e Web) e como começar a criar um.

Este artigo explica-lhe os passos para adicionar um Suplemento do Outlook a uma aplicação do Teams, testá-lo e, em seguida, implementá-lo no Azure.

Pré-requisitos

Antes de começar, certifique-se de que cumpre os seguintes requisitos:

Uma conta do Microsoft 365 que inclui o Teams para testar a aplicação. Em alternativa, pode ter subscrições separadas do Microsoft 365 e do Teams. Por exemplo, uma conta de teste com *.onmicrosoft.com através do Programa para Programadores do Microsoft 365.
A sua conta do Microsoft 365 é adicionada como uma conta no Outlook de ambiente de trabalho. Para obter mais informações, consulte Adicionar uma conta de e-mail ao Outlook.
Uma conta do Azure com uma subscrição ativa para implementar a aplicação Teams no Azure. Se não tiver uma, pode criar a sua conta gratuita do Azure.
Uma aplicação do Teams criada com a versão mais recente do Teams Toolkit.

Adicionar um Suplemento do Outlook a uma aplicação do Teams

Para adicionar um Suplemento do Outlook a uma aplicação do Teams:

Preparar o projeto da aplicação Teams.
Crie um projeto de Suplemento do Office que esteja inicialmente separado do seu projeto de aplicação teams.
Intercale o manifesto do projeto suplemento do Outlook no manifesto unificado do Microsoft 365.
Copie os ficheiros do Suplemento do Outlook para o projeto da aplicação Teams.
Edite os ficheiros de configuração de ferramentas.
Executar a aplicação e o suplemento localmente ao mesmo tempo
Mover a aplicação para o Azure.

Preparar o projeto da aplicação Teams

Comece por separar o código fonte do separador (ou bot) na sua própria subpasta. Estas instruções partem do princípio de que o projeto tem inicialmente a seguinte estrutura. Para criar um projeto de aplicação do Teams com esta estrutura, utilize a versão mais recente do Teams Toolkit.

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

Observação

Se estiver a trabalhar com um novo projeto de separador do Teams, a pasta node_modules e o ficheiro de package-lock.json não estão presentes. O node_modules é criado num passo posterior quando é executado npm install na raiz do projeto. A pasta build não está presente, a menos que e até executar um script de compilação no projeto.

Para separar o código fonte do separador ou bot, execute os seguintes passos:

Crie uma pasta no separador de raiz com o nome (ou bot).

Observação

Para simplificar, o resto deste artigo pressupõe que a aplicação Teams existente é um separador. Se começou com um bot, substitua "tab" por "bot" em todas estas instruções, incluindo o conteúdo que adicionar ou editar em vários ficheiros.
Copie a pasta infra para a nova subpasta e, em seguida, elimine o azure.parameters.json ficheiro da nova pastainfrade separador>.
Mova as pastas node_modules e src para a nova subpasta.

Mova os .webappignoreficheiros , package-lock.json, package.json, tsconfig.jsone web.config para a nova subpasta.

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

package.json Na pasta que acabou de mover para a pasta de separadores, elimine o script com o nome dev:teamsfx do scripts objeto. Este script é adicionado a um novo package.json no passo seguinte.

Crie um novo ficheiro com o nome package.json na raiz do projeto e adicione o seguinte conteúdo:

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

Altere as namepropriedades , versione author , conforme necessário.
Abra o teamsapp.yml ficheiro na raiz do projeto, localize a linha ignoreFile: .webappignoree altere-o para ignoreFile: ./tab/.webappignore.
Abra o teamsapp.local.yml ficheiro na raiz do projeto, localize a linha args: install --no-audite altere-o para args: run install:tab --no-audit.
Abra o TERMINAL no Visual Studio Code. Navegue para a raiz do projeto e execute npm install. É criada uma nova node_modules pasta e um novo package.lock.json ficheiro na raiz do projeto.
Em seguida, execute npm run install:tab. Uma nova node_modules pasta e um novo package.lock.json ficheiro são criados na pasta de separadores, caso ainda não estejam lá.
Verifique se pode carregar o separador em sideload com os seguintes passos:
1. Abra o Teams Toolkit.
2. Na secção CONTAS , verifique se tem sessão iniciada na conta do Microsoft 365.
3. Selecione Ver>Executar no Visual Studio Code.
4. No menu pendente EXECUTAR E DEPURAR , selecione Depurar no Teams (Edge) e prima F5.
  
  O projeto compila e é executado. Este processo pode demorar alguns minutos. Quando terminar, o Teams é aberto num browser com um pedido para adicionar a sua aplicação de separador.
  
  Observação
  
  Se esta for a primeira vez que depurou uma aplicação do Teams neste computador, ser-lhe-á pedido para instalar um certificado SSL. Selecione Instalar e, em seguida, Sim na segunda linha de comandos. Inicie sessão na sua conta do Microsoft 365 se lhe for pedido para o fazer.
5. Selecione Adicionar.
6. Para parar a depuração e desinstalação da aplicação, selecione Executar>Parar Depuração no Visual Studio Code.

Criar um projeto de Suplemento do Outlook

Abra uma segunda instância de Visual Studio Code.
Selecione Toolkit do Teams na Barra de Atividade.
Selecione Criar uma nova aplicação.
No menu pendente Selecionar uma opção , selecione Painel de>Tarefas do suplemento do Outlook.
Selecione a pasta onde pretende criar o suplemento.
Atribua um nome (sem espaços) ao projeto quando lhe for pedido.

O Teams Toolkit cria o projeto com ficheiros básicos e estrutura e abre-o numa nova janela de Visual Studio Code. Irá utilizar este projeto como origem para ficheiros e marcações que adicionar ao projeto do Teams.
Embora não esteja a desenvolver este projeto, execute os seguintes passos para verificar se pode ser sideloaded a partir de Visual Studio Code antes de continuar:
1. Certifique-se de que o ambiente de trabalho do Outlook está fechado.
2. Abra o Visual Studio Code.
3. Selecione Toolkit do Teams na Barra de Atividade.
4. Na secção CONTAS , verifique se tem sessão iniciada no Microsoft 365.
5. Selecione Ver>Executar no Visual Studio Code.
6. No menu pendente EXECUTAR E DEPURAR, selecione Ambiente de Trabalho do Outlook (Edge Chromium) e prima F5.
  
  O projeto é compilação e é aberta uma janela Dev-Server do Webpack. Este processo pode demorar alguns minutos e abre uma janela de ambiente de trabalho do Outlook.
7. Aceda ao Outlook.
8. Abra a Caixa de Entrada da sua identidade de conta do Microsoft 365.
9. Abra qualquer mensagem.
  
  É apresentado um separador Suplemento da Contoso com dois botões no friso Base (ou no friso Mensagem , se abrir a mensagem na sua própria janela).
10. Selecione o botão Mostrar Painel de Tarefas . É aberto um painel de tarefas.
11. Selecione o botão Executar uma ação. É apresentada uma pequena notificação junto à parte superior da mensagem.
12. Para parar a depuração e desinstalar o suplemento, selecione Executar>Parar Depuração no Visual Studio Code. Se a janela Dev-Server do Webpack não fechar, abra o terminal do Visual Studio Code na raiz do projeto e execute npm stop.

Intercalar o manifesto

O manifesto da aplicação Teams é gerado no tempo de depuração e sideload (ou no tempo de compilação) do manifest.json ficheiro na pasta \appPackage do projeto teams. Este ficheiro é um modelo para um manifesto. Neste artigo, é referido como modelo oumodelo de manifesto. A maioria das marcações é codificada para o modelo, mas também existem alguns ficheiros de configuração que contêm dados que são adicionados ao manifesto gerado final. Neste procedimento, execute as seguintes tarefas:

Copie a marcação do manifesto do suplemento para o modelo de manifesto da aplicação Teams.
Edite os ficheiros de configuração.

A menos que seja especificado o contrário, o ficheiro que alterar é \appPackage\manifest.json.

Copie os valores das propriedades "$schema" e "manifestVersion" do manifesto do suplemento para as propriedades correspondentes do ficheiro de modelo de manifesto da aplicação Teams.
Modifique os valores de propriedade "name.full", "description.short" e "description.full", conforme necessário, para refletir o facto de um suplemento do Outlook fazer parte da aplicação.
Faça o mesmo para o valor "name.short".

Recomendamos que mantenha o ${{TEAMSFX_ENV}} no final do nome. Esta variável é substituída pela cadeia "local" quando está a depurar no localhost e por "dev" quando está a depurar a partir de um domínio remoto ou no modo de produção.

Observação

Historicamente, a documentação do programador do Suplemento do Office utiliza o termo "dev" ou "modo de programador" para fazer referência à execução do suplemento num localhost. Utiliza o termo "prod" ou "modo de produção" para fazer referência à execução do suplemento num anfitrião remoto para teste ou produção. A documentação do programador do Teams utiliza o termo "local" para fazer referência à execução do suplemento num localhost e ao termo "dev" para fazer referência à execução do suplemento num anfitrião remoto para depuração remota, que normalmente se chama "teste". Estamos a trabalhar para que a terminologia seja consistente.

O seguinte JSON é um exemplo:
```
"short": "Contoso Tab and Add-in-${{TEAMSFX_ENV}}",
```
Observação

O valor "name.short" aparece na capacidade do separador Teams e no suplemento outlook. Aqui estão alguns exemplos:
- É a etiqueta sob o botão iniciar do separador Teams.
- É o conteúdo da barra de título do painel de tarefas do suplemento.
Se tiver alterado o valor "name.short" da predefinição (que é o nome do projeto seguido ${{TEAMSFX_ENV}} da variável), faça exatamente a mesma alteração em todos os locais onde o nome do projeto aparece nos dois ficheiros seguintes na raiz do projeto: teamsapp.yml e teamsapp.local.yml.
Se não existir uma matriz "authorization.permissions.resourceSpecific" no modelo de manifesto do Teams, copie-a do manifesto do suplemento como uma propriedade de nível superior. Se já existir um no modelo do Teams, copie todos os objetos da matriz no manifesto do suplemento para a matriz no modelo do Teams. O seguinte JSON é um exemplo:
```
"authorization": {
    "permissions": {
        "resourceSpecific": [
            {
                "name": "MailboxItem.Read.User",
                "type": "Delegated"
            }
        ]
    }
},
```
env/.env.local No ficheiro, localize as linhas que atribuem valores às TAB_DOMAIN variáveis e TAB_ENDPOINT . Adicione as seguintes linhas imediatamente abaixo das mesmas:
```
ADDIN_DOMAIN=localhost:3000
ADDIN_ENDPOINT=https://localhost:3000
```
env/.env.dev No ficheiro, adicione a seguinte linha abaixo de TAB_ENDPOINT= ... linha:
```
ADDIN_ENDPOINT=
```
No modelo de manifesto do Teams, adicione o marcador "${{ADDIN_DOMAIN}}", de posição à parte superior da "validDomains" matriz. O Toolkit do Teams substitui-o por um domínio localhost quando estiver a desenvolver localmente. Quando implementar a aplicação combinada concluída para teste ou produção, conforme descrito em Mover a aplicação para o Azure, o Teams Toolkit substitui o marcador de posição pelo URI de teste/produção. O seguinte JSON é um exemplo:
```
"validDomains": [
    "${{ADDIN_DOMAIN}}",

    // other domains or placeholders
],
```
Copie toda a propriedade "extensions" do manifesto do suplemento para o modelo de manifesto da aplicação Teams como uma propriedade de nível superior.

Copiar os ficheiros do Suplemento do Outlook para o projeto da aplicação Teams

Crie uma pasta de nível superior denominada suplemento no projeto da aplicação Teams.
Copie os seguintes ficheiros e pastas do projeto de suplemento para a pasta de suplementos do projeto de aplicação Teams.
- /appPackage
- /infra
- /src
- .eslintrc.json
- babel.config.json
- package-lock.json
- package.json
- tsconfig.json
- webpack.config.js

Quando terminar de copiar, elimine o manifest.json ficheiro na pasta /add-in/appPackage .

A sua estrutura de pastas tem agora de ter um aspeto semelhante ao seguinte exemplo:

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

Editar os ficheiros de configuração de ferramentas

Abra o package.json ficheiro na raiz do projeto.

Adicione os seguintes scripts ao 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 o package.json ficheiro na pasta do suplemento (não a pasta de separadores ou a raiz do projeto).

Três dos scripts no scripts objeto têm um manifest.json parâmetro como nos seguintes exemplos:

"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 No script, altere appPackage/manifest.json para ../appPackage/build/appPackage.local.zip. Quando terminar, a linha tem de ter o seguinte aspeto:

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

validate Nos scripts estop, altere o parâmetro para ../appPackage/build/manifest.local.json. Quando terminar, as atualizações têm de ter o seguinte aspeto:

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

No Visual Studio Code, abra TERMINAL.
Navegue para a pasta do suplemento e execute o comando npm install.
Na pasta do suplemento , abra o webpack.config.js ficheiro.
Altere a linha from: "appPackage/manifest*.json", para from: "../appPackage/build/manifest*.json",.
Na raiz do projeto, abra o teamsapp.local.yml ficheiro e localize a provision secção . Utilize o # caráter para comentar as linhas que validam o modelo de manifesto. Isto é necessário porque o sistema de validação de manifestos do Teams ainda não é compatível com as alterações que efetuou ao modelo de manifesto. Quando terminar, as linhas deverão ter o seguinte aspeto:
```
# - uses: teamsApp/validateManifest
#   with:
#     # Path to manifest template
#     manifestPath: ./appPackage/manifest.json 
```
Certifique-se de que comenta apenas a teamsApp/validateManifest secção. Não comente a teamsManifest/validateAppPackage secção.
Repita o passo anterior para o teamsapp.yml ficheiro. As três linhas encontram-se provision nas secções e publish . Comente-os em ambos os locais.
Abra o .vscode\tasks.json ficheiro no projeto de suplemento e copie todas as tarefas na tasks matriz. Adicione-os à tasks matriz do mesmo ficheiro no projeto do Teams. Não remova nenhuma das tarefas que já existem. Certifique-se de que todas as tarefas estão separadas por vírgulas.

Em cada um dos objetos de tarefa que acabou de copiar, adicione a seguinte options propriedade para garantir que estas tarefas são executadas na pasta de suplementos .

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

Por exemplo, a Debug: Outlook Desktop tarefa tem de ser apresentada como o seguinte JSON quando terminar.

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

Adicione a seguinte tarefa à matriz de tarefas no .vscode\tasks.json ficheiro do projeto. Entre outras coisas, esta tarefa cria o manifesto 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"
    }
},

Adicione a seguinte tarefa à matriz de tarefas. Tenha em atenção que adiciona uma Start Add-in Locally tarefa que combina a tarefa da Create resources aplicação de separador com a tarefa de depuração do suplemento e especifica que tem de ser executada por essa ordem.
```
{
    "label": "Start Add-in Locally",
    "dependsOn": [
        "Create resources",
        "Debug: Outlook Desktop"
    ],
    "dependsOrder": "sequence"
},
```

Adicione a seguinte tarefa à matriz de tarefas. Combina a Start Teams App Locally tarefa com a Start Add-in Locally e especifica que têm de ser executadas por essa ordem.

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

Abra o .vscode\launch.json ficheiro no projeto, que configura a IU EXECUTAR E DEPURAR no Visual Studio Code e adicione os dois objetos seguintes à parte superior da matriz "configurações".

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

compounds Na secção do mesmo ficheiro, mude o nome do Debug in Teams (Edge) composto para Launch App Debug (Edge) e mude o nome do Debug in Teams (Chrome) composto para Launch App Debug (Chrome).
Verifique se pode fazer sideload da capacidade de suplemento da aplicação Teams para o Outlook com os seguintes passos:
1. Certifique-se de que o ambiente de trabalho do Outlook está fechado.
2. Abra o Visual Studio Code.
3. Selecione Toolkit do Teams na Barra de Atividade.
4. Na secção CONTAS , verifique se tem sessão iniciada no Microsoft 365.
5. Selecione Ver>Executar no Visual Studio Code.
6. No menu pendente EXECUTAR E DEPURAR, selecione Iniciar Suplemento do Outlook para Ambiente de Trabalho (Edge Chromium) e prima F5. O projeto é compilação e é aberta uma janela Dev-Server do Webpack. Este processo pode demorar alguns minutos e abre uma janela de ambiente de trabalho do Outlook.
7. Aceda ao Outlook.
8. Abra a Caixa de Entrada da sua identidade de conta do Microsoft 365.
9. Abra qualquer mensagem.
  
  É apresentado um separador Suplemento da Contoso com dois botões no friso Base (ou no friso Mensagem , se abrir a mensagem na sua própria janela).
10. Selecione o botão Mostrar Painel de Tarefas . É aberto um painel de tarefas.
11. Selecione o botão Executar uma ação. É apresentada uma pequena notificação junto à parte superior da mensagem.
12. Para parar a depuração e desinstalar o suplemento, selecione Executar>Parar Depuração no Visual Studio Code. Se a janela Dev-Server do Webpack não fechar, abra o terminal do Visual Studio Code na raiz do projeto e execute npm stop.

Executar a aplicação e o suplemento localmente ao mesmo tempo

Pode fazer sideload e executar a aplicação e o suplemento em simultâneo, mas o depurador não pode anexar de forma fiável quando ambos estão em execução. Por isso, para depurar, execute apenas um de cada vez.

Para depurar a aplicação, veja o último passo da secção Preparar o projeto da aplicação Teams .

Para depurar o suplemento, veja o último passo da secção Editar os ficheiros de configuração de ferramentas .

Para ver a aplicação e o suplemento em execução ao mesmo tempo, siga os seguintes passos.

Certifique-se de que o ambiente de trabalho do Outlook está fechado.
Abra o Visual Studio Code.
Selecione Toolkit do Teams na Barra de Atividade.
Na secção CONTAS , verifique se tem sessão iniciada no Microsoft 365.
Selecione Ver>Executar no Visual Studio Code.
No menu pendente EXECUTAR E DEPURAR, selecione Iniciar Aplicação e Adicionar Ambiente de Trabalho do Outlook (Edge Chromium) e prima F5. O projeto é compilação e é aberta uma janela Dev-Server do Webpack. A aplicação de separador está alojada no terminal Visual Studio Code. Este processo pode demorar alguns minutos e ocorrem as seguintes ações:
- O Teams é aberto num browser com um pedido para adicionar a sua aplicação de separador. Se o Teams não tiver sido aberto quando o Ambiente de Trabalho do Outlook for aberto, o sideload automático falhou. Pode fazer o sideload manualmente para ver a aplicação e o suplemento em execução ao mesmo tempo. Para obter instruções de sideload, consulte Carregar a sua aplicação no Teams. Encontrará o ficheiro manifest.zip a carregar em C:\Users\{yourname}\AppData\Local\Temp.
- O ambiente de trabalho do Outlook é aberto.
Na linha de comandos do Teams, selecione Adicionar e o separador é aberto.
Aceda ao Outlook.
No Outlook, abra a Caixa de Entrada da sua identidade de conta do Microsoft 365.
Abra qualquer mensagem.

É apresentado um separador Suplemento da Contoso com dois botões no friso Base (ou no friso Mensagem , se abrir a mensagem na sua própria janela).
Selecione o botão Mostrar Painel de Tarefas . É aberto um painel de tarefas.
Selecione o botão Executar uma ação. É apresentada uma pequena notificação junto à parte superior da mensagem.
Para parar a depuração e desinstalar o suplemento, selecione Executar>Parar Depuração no Visual Studio Code. Se a janela Dev-Server do Webpack não fechar, abra o terminal do Visual Studio Code na raiz do projeto e execute npm stop.
Se teve de carregar manualmente a aplicação de separador Teams, remova-a do Teams conforme indicado em Remover a sua aplicação.

Mover a aplicação para o Azure

Abra o teamsapp.yml ficheiro na raiz do projeto e localize a linha deploymentName: Create-resources-for-tab. Altere-o para deploymentName: Create-resources-for-tab-and-addin.
No mesmo ficheiro, adicione o seguinte código ao final da provision: secção.

Observação

O avanço é significativo no YAML, por isso - uses , e - name as instruções devem ter um avanço de dois espaços, with as instruções devem ser alinhadas com usese os subordinados de with devem ter um avanço de mais dois espaços.
```
provision:

  -- other YAML omitted --

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

No mesmo ficheiro, substitua toda deploy: a secção pelo seguinte código. Estas alterações têm em conta a nova estrutura de pastas e o facto de os ficheiros de suplementos e separadores precisarem de ser implementados.

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 o infra/azure.parameters.json ficheiro na raiz do projeto e substitua o respetivo conteúdo pelo seguinte 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 o infra/azure.bicep ficheiro na raiz do projeto (não no separador ou nas subpastas do suplemento) e substitua o respetivo conteúdo pelo seguinte código:

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

No Visual Studio Code, abra o Teams Toolkit.
Na secção CONTAS , certifique-se de que tem sessão iniciada na sua conta do Azure (além de ter sessão iniciada na sua conta do Microsoft 365). Para obter mais informações sobre como iniciar sessão, abra Exercício – Criar recursos do Azure para alojar uma aplicação de separador do Teams e desloque-se para a secção Iniciar sessão no Azure no Teams Toolkit .
Na secção CICLO DE VIDA do Teams Toolkit, selecione Aprovisionar. Pode demorar vários minutos. Poderá ser-lhe pedido que selecione um dos grupos de recursos do Azure.
Quando o aprovisionamento estiver concluído, selecione Implementar para implementar o código da aplicação no Azure.

Executar a capacidade de separador a partir da implementação remota

Em Visual Studio Code, selecione Ver Execução>.
No menu pendente, selecione Iniciar Remoto no Teams (Edge) ou Iniciar Remoto no Teams (Chrome).
Prima F5 para pré-visualizar a sua capacidade de separador do Teams.

Executar a capacidade de suplemento a partir da implementação remota

Copie o URL de produção do ADDIN_ENDPOINT ficheiro em env/.env.dev .
Edite \add-in\webpack.config.js o ficheiro e altere urlProd o valor constante para o valor que acabou de copiar. Certifique-se de que adiciona um "/" no final do URL.
No TERMINAL do Visual Studio Code, navegue para a raiz do projeto e, em seguida, execute npm run build:add-in.
Copie o ficheiro \add-in\dist\manifest.dev.json para a \appPackage pasta .
Mude o nome da cópia na \appPackage pasta para manifest.addinPreview.json.
No TERMINAL, execute npx office-addin-dev-settings sideload .\appPackage\manifest.addinPreview.json. Este processo pode demorar alguns minutos e abre o ambiente de trabalho do Outlook. (Se lhe for pedido para instalar office-addin-dev-settings, responda sim.)
Aceda ao Outlook.
Abra a Caixa de Entrada da sua identidade de conta do Microsoft 365.
Abra qualquer mensagem.

É apresentado um separador Suplemento da Contoso com dois botões no friso Base (ou no friso Mensagem , se abrir a mensagem na sua própria janela).
Selecione o botão Mostrar Painel de Tarefas . É aberto um painel de tarefas.
Selecione o botão Executar uma ação. É apresentada uma pequena notificação junto à parte superior da mensagem.

O que vem a seguir

Existem outros passos comuns sugeridos, por exemplo:

Adicione a autenticação e faça uma chamada API do Graph. Para obter a capacidade de separador, consulte Adicionar início de sessão único à aplicação Teams. Para obter a capacidade de suplemento, consulte Ativar o início de sessão único (SSO) num Suplemento do Office.
Configurar pipelines CI/CD.
Chamar uma API de back-end.

Compartilhar via

Adicionar um Suplemento do Outlook a uma aplicação do Teams

Introdução

Pré-requisitos

Adicionar um Suplemento do Outlook a uma aplicação do Teams

Preparar o projeto da aplicação Teams

Criar um projeto de Suplemento do Outlook

Intercalar o manifesto

Copiar os ficheiros do Suplemento do Outlook para o projeto da aplicação Teams

Editar os ficheiros de configuração de ferramentas

Executar a aplicação e o suplemento localmente ao mesmo tempo

Mover a aplicação para o Azure

Executar a capacidade de separador a partir da implementação remota

Executar a capacidade de suplemento a partir da implementação remota

O que vem a seguir

Confira também

Recursos adicionais