Criar extensão de mensagem

Artigo
06/22/2023

Uma extensão de mensagem permite que os usuários interajam com seu serviço Web por meio de botões e formulários no cliente do Microsoft Teams. Eles podem pesquisar ou iniciar ações em um sistema externo a partir da área de composição da mensagem, da caixa de comando ou diretamente de uma mensagem. Você pode enviar de volta os resultados dessa interação para o cliente do Teams na forma de um cartão altamente formatado.

A captura de tela mostra a extensão de mensagem conceitual no cliente do Teams.

Neste tutorial, você aprenderá a criar um aplicativo de extensão de mensagem baseado em pesquisa e o aplicativo permite que os usuários pesquisem pacotes npm no diretório npm (Gerenciador de Pacotes de Nó).

Familiarize-se com o aplicativo de extensão de mensagem baseado em pesquisa de uma das seguintes maneiras:

Codespaces do GitHub: a instância do codespace permite que você experimente um aplicativo do Teams instantaneamente. Ele abre Visual Studio Code (VS Code), em que a extensão do Teams Toolkit, o código-fonte do aplicativo e todas as dependências são pré-empacotadas para você.
Guia passo a passo: permite configurar seu ambiente de desenvolvimento e criar um aplicativo do Teams desde o início.

GitHub Codespaces
Guias passo a passo

Antes de criar seu codespace, verifique se você tem os seguintes pré-requisitos:

Uma conta do GitHub para criar sua instância de codespace
Uma conta do Microsoft 365 com permissão de carregamento de aplicativo personalizado
Um locatário do Microsoft 365

Dica

O GitHub Codespaces oferece um plano gratuito até uma quantidade fixa de uso por mês. Se você precisar liberar mais espaço, vá para github.com/codespaces e exclua os codespaces que você não precisa mais.

Para criar um aplicativo de extensão de mensagem baseado em pesquisa com codespaces do GitHub, siga estas etapas:

Selecione o botão a seguir para abrir os Codespaces do GitHub.

Você pode ser solicitado a entrar na conta do GitHub se ainda não tiver entrado.
Selecione Criar novo codespace.

A página Configuração do codespace é exibida.

O Teams Toolkit prepara a extensão de mensagem para você e a abre no VS Code no navegador. O ícone kit de ferramentas do Teams é exibido na barra de atividades do VS Code.
Selecione Entrar no Microsoft 365 e entrar no Azure para entrar com sua conta do Microsoft 365.

Observação

Quando você cria seu aplicativo, o GitHub Codespaces o carrega para o cliente do Teams em uma nova guia. Se o navegador bloquear guias pop-up ou janelas, você precisará permitir que pop-ups para seu aplicativo seja aberto.
Selecione Visualizar seu Aplicativo do Teams (F5) para criar sua extensão de mensagem.

O GitHub Codespaces cria seu aplicativo de extensão de mensagem, o carrega no cliente do Teams e é aberto em uma guia de navegador separada.

Seu aplicativo de extensão de mensagem é carregado no Teams.
Depois que a caixa de diálogo do aplicativo for exibida no Teams, selecione Adicionar para instalar sua extensão de mensagem no Teams.

Você criou com êxito a extensão de mensagem baseada em pesquisa e carregou no cliente do Teams.