Depurar seu aplicativo Teams localmente

Artigo
03/13/2024

O Microsoft Teams Toolkit ajuda você a depurar e visualizar seu aplicativo do Microsoft Teams localmente. Durante o processo de depuração, o Teams Toolkit inicia automaticamente os serviços de aplicativo, inicia depuradores e carrega o aplicativo teams. Você pode visualizar seu aplicativo do Teams no cliente Web do Teams localmente após a depuração.

Depurar seu aplicativo teams localmente para Visual Studio Code

O Teams Toolkit na Microsoft Visual Studio Code oferece os recursos para automatizar a depuração do aplicativo teams localmente. Visual Studio Code permite que você depure a guia, o bot e a extensão da mensagem. Você precisa configurar o Teams Toolkit antes de depurar seu aplicativo.

Observação

Seu projeto antigo do Teams Toolkit é atualizado para usar novas tarefas, para obter mais informações, consulte doc tarefas.

Configurar seu Kit de Ferramentas do Teams para depuração

As etapas a seguir ajudam você a configurar seu Kit de Ferramentas do Teams antes de iniciar o processo de depuração:

Selecione Depurar no Teams (Edge) ou Depurar no Teams (Chrome) na lista suspensa RUN AND DEBUG ▷ .
Selecione Executar>Iniciar Depuração (F5).
Selecione Criar um locatário de teste do Microsoft 365 para a conta do Microsoft 365.

Dica

Você pode selecionar Criar um Locatário de Teste do Microsoft 365 para saber mais sobre o Microsoft 365 Developer Program. Seu navegador da Web padrão é aberto para permitir que você entre em sua conta do Microsoft 365 com suas credenciais.
Selecione Instalar para instalar o certificado de desenvolvimento para localhost.

Dica

Você pode selecionar Saiba mais para saber mais sobre o certificado de desenvolvimento.
Selecione Sim na caixa de diálogo Aviso de Segurança .

O Kit de Ferramentas inicia uma nova instância do navegador Microsoft Edge ou Chrome com base em sua seleção e abre uma página da Web para carregar o cliente do Teams.

Instalar túnel de desenvolvimento.
Execute o seguinte comando para fazer logon no túnel de desenvolvimento:
```
devtunnel user login
```
Execute o seguinte comando para iniciar o serviço de túnel local:
```
devtunnel host -p 3978 --protocol http --allow-anonymous
```
Em um terminal separado, execute o seguinte comando para atualizar os BOT_DOMAIN valores e BOT_ENDPOINT no env/.env.local arquivo:
```
BOT_DOMAIN=sample-id-3978.devtunnels.ms
BOT_ENDPOINT=https://sample-id-3978.devtunnels.ms/
```
Execute o seguinte comando para provisionar o aplicativo no Teams:
```
teamsapp provision --env local
```
Execute o seguinte comando para implantar o aplicativo no Teams:
```
teamsapp deploy --env local
```
Execute o seguinte comando para visualizar seu aplicativo localmente:
```
teamsapp preview --env local
```

Se você quiser visualizar um bot de notificação hospedado no Azure Functions, execute o seguinte comando no diretório do projeto:

npm run prepare-storage:teamsapp

Depurar seu aplicativo

Após o processo de instalação inicial, o Teams Toolkit inicia os seguintes processos:

Inicia serviços de aplicativo
Inicia configurações de depuração
Carrega o aplicativo Teams

Inicia serviços de aplicativo

Executa tarefas conforme definido em .vscode/tasks.json. Por padrão, o nome da tarefa é "Start application". Se o projeto contiver mais de um componente, haverá tarefas mais dependentes.

// .vscode/tasks.json
{
    "label": "Start application",
    "dependsOn": [
        "Start Frontend", // Tab
        "Start Backend", // Azure Functions
        "Start Bot" // Bot or message extensions
    ]
}

A imagem a seguir exibe nomes de tarefa nas guias OUTPUT e TERMINAL do Visual Studio Code durante a execução da guia, bot ou extensão de mensagem e Azure Functions.

Iniciar túnel local

Use o túnel de desenvolvimento como um serviço de túnel local para tornar o ponto de extremidade de mensagem do bot local público.

Túnel de desenvolvimento

Para migrar manualmente sua tarefa de túnel local de um projeto v4, atualize o seguinte código no .vscode/tasks.json arquivo:

{
      "label": "Start local tunnel",
      "type": "teamsfx",
      "command": "debug-start-local-tunnel",
      "args": {
          "type": "dev-tunnel",
          "ports": [
              {
                  "portNumber": 3978,
                  "protocol": "http",
                  "access": "public",
                  "writeToEnvironmentFile": {
                      "endpoint": "BOT_ENDPOINT",
                      "domain": "BOT_DOMAIN"
                  }
              }
        ],
          "env": "local"
      },
      "isBackground": true,
      "problemMatcher": "$teamsfx-local-tunnel-watch"
    },

Para usar outra porta para o serviço de bot local, altere o portNumber no arquivo e também altere o portNumberindex.js no arquivo ouindex.ts..vscode/tasks.json

A tabela a seguir lista os argumentos necessários:

Arguments	Tipo	Obrigatório	Descrição
`type`	cadeia de caracteres	obrigatório	O tipo de serviço de túnel a ser usado. Esse argumento deve ser definido como `dev-tunnel`.
`env`	string	opcional	O nome do ambiente. O Teams Toolkit grava as variáveis de ambiente definidas no `output.env.<env>` arquivo.
`ports`	array	obrigatório	Uma matriz de configurações de porta, cada uma especificando o número da porta local, o protocolo e as configurações de controle de acesso.

O ports argumento deve ser uma matriz de objetos, com cada objeto especificando a configuração de uma porta específica. Cada objeto deve conter os seguintes campos:

Porta	Tipo	Obrigatório	Descrição
`portNumber`	number	obrigatório	O número da porta local do túnel.
`protocol`	cadeia de caracteres	obrigatório	O protocolo do túnel.
`access`	string	opcional	A configuração de controle de acesso para o túnel. Esse valor pode ser definido como `private` ou `public`. Se não for especificado, o valor padrão será `private`.
`writeToEnvironmentFile`	objeto	opcional	A chave do ponto de extremidade do túnel e das variáveis de ambiente de domínio do túnel que são gravadas no `.env` arquivo.

O writeToEnvironmentFile objeto contém dois campos:

WriteToEnvironmentFile	Tipo	Obrigatório	Descrição
`endpoint`	cadeia de caracteres	opcional	A chave da variável de ambiente do ponto de extremidade do túnel.
`domain`	string	opcional	A chave da variável de ambiente de domínio de túnel.

Quando writeToEnvironmentFile é incluído, as variáveis de ambiente especificadas são gravadas no .env arquivo. Quando o campo é omitido, nenhuma variável de ambiente é gravada no arquivo.

Inicia configurações de depuração

Inicia as configurações de depuração conforme definido em .vscode/launch.json.

A captura de tela mostra o depurador iniciar.

A tabela a seguir lista os nomes e tipos de configuração de depuração para projeto com guia, bot ou aplicativo de extensão de mensagem e Azure Functions:

Componente	Nome da configuração de depuração	Tipo de configuração de depuração
Tab	Anexar ao Frontend (Edge) ou Anexar ao Frontend (Chrome)	msedge ou chrome
Bot ou extensões de mensagens	Anexar ao Bot	Nó
Azure Functions	Anexar ao Back-end	Nó

A tabela a seguir lista os nomes e tipos de configuração de depuração para o projeto com o aplicativo bot, Azure Functions e sem aplicativo de guias:

Componente	Nome da configuração de depuração	Tipo de configuração de depuração
Bot ou extensão de mensagem	Iniciar Bot (Edge) ou Iniciar Bot (Chrome)	msedge ou chrome
Bot ou extensão de mensagem	Anexar ao Bot	Nó
Azure Functions	Anexar ao Back-end	Nó

Carrega o aplicativo Teams

A configuração Anexar ao Frontend ou Iniciar Aplicativo inicia a instância do navegador Microsoft Edge ou Chrome para carregar o cliente do Teams na página da Web. Depois que o cliente do Teams for carregado, carregue o aplicativo teams controlado pela URL de carregamento definida nas configurações de inicialização do Microsoft Teams. Quando o cliente do Teams estiver carregado no navegador da Web, selecione Adicionar ou selecione uma opção na lista suspensa de acordo com seus requisitos.

Seu aplicativo foi adicionado ao Teams!

Próxima etapa

Processo de depuração em segundo plano