Criar um aplicativo de extensão de mensagem

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. Os usuários podem pesquisar ou iniciar ações em um sistema externo a partir da área de redaçã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 card com formatação avançada.

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 (Node Gerenciador de Pacotes).

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

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

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

Dica

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

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

  1. Selecione o botão a seguir para abrir o GitHub Codespaces.

    Abrir extensão de mensagem no GitHub Codespaces

    Talvez você receba uma solicitação para entrar na conta do GitHub, caso ainda não o tenha feito.

  2. Selecione Criar novo codespace.

    A captura de tela mostra a página do GitHub para criar um codespace para extensão de mensagem.

    A página Configurando seu codespace é exibida.

    A captura de tela mostra o codespace criando sua extensão de mensagem.

    O Agents Toolkit prepara a extensão de mensagem para você e a abre no VS Code no navegador. O ícone do Microsoft 365 Agents Toolkit aparece na barra de atividades do VS Code.

  3. Selecione Entrar no Microsoft 365 e Entrar no Azure para entrar com sua conta do Microsoft 365.

    A captura de tela mostra a janela do Kit de Ferramentas de Agentes no navegador para fazer login.

    Observação

    Quando você cria seu aplicativo, o GitHub Codespaces o carrega no cliente do Teams em uma nova guia. Se o navegador bloquear guias ou janelas pop-up, você precisará permitir pop-ups para que seu aplicativo abra.

  4. Selecione Visualizar seu aplicativo Teams (F5) para criar sua extensão de mensagem.

    A captura de tela mostra a janela Kit de Ferramentas de Agentes no navegador com sua extensão de mensagem.

    O GitHub Codespaces cria seu aplicativo de extensão de mensagem, carrega-o no cliente do Teams e abre em uma aba separada do navegador.

  5. Selecione Adicionar para instalar sua extensão de mensagem no Teams.

    Captura de tela da caixa de diálogo de detalhes do aplicativo para adicionar o aplicativo de extensão de mensagem no Teams.

  6. Selecione Abrir para abrir o aplicativo no escopo pessoal.

    Captura de tela da caixa de diálogo de seleção de escopo para abrir o aplicativo no escopo pessoal.

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

    A captura de tela mostra sua extensão de mensagem carregada no cliente do Teams.

Para obter mais informações sobre extensões de mensagem, consulte extensões de mensagem.

Se você estiver interessado em um bot, selecione o seguinte:

Se você quiser compilar o aplicativo de guia básico, selecione o seguinte:

Próxima etapa

Confira também

diretório npm