Compilar um bot de notificação com JavaScript
O bot de notificação envia mensagens proativamente no canal do Teams ou chat em grupo ou chat pessoal. Você pode disparar o bot de notificação com uma solicitação HTTP, como cartões ou textos.
Neste tutorial, você aprenderá:
- Como criar um novo bot de notificação com o Teams Toolkit.
- Sobre a estrutura de diretório do seu aplicativo.
- Como enviar várias notificações.
Este guia passo a passo ajuda você a criar um bot de notificação com o Teams Toolkit. Você pode ver a seguinte saída:
Pré-requisitos
Aqui está uma lista de ferramentas necessárias para criar e implantar seus aplicativos.
| Instalar | Para usar | |
|---|---|---|
| Visual Studio Code | Ambientes de build JavaScript ou TypeScript. Use a versão mais recente. | |
| Kit de ferramentas do Teams | A Microsoft Visual Studio Code extensão que cria um scaffolding de projeto para seu aplicativo. Use a versão mais recente. | |
| Node.js | Ambiente de runtime do JavaScript de back-end. Para obter mais informações, consulte Node.js tabela de compatibilidade de versão para o tipo de projeto. | |
| Microsoft Teams | O Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas em um só lugar. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| Microsoft 365 | Acesso à conta do Teams com as permissões apropriadas para instalar um aplicativo. |
Observação
O guia é testado na versão mais recente do Teams Toolkit e no Nodejs versão 14 e 16. As etapas neste guia podem funcionar com outras versões, mas isso não foi testado.
Preparar o ambiente de desenvolvimento
Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.
Instalar o Kit de Ferramentas do Teams
O Microsoft Teams Toolkit ajuda a simplificar o processo de desenvolvimento com ferramentas para provisionar e implantar recursos de nuvem para seu aplicativo e publicar na Teams Store.
Você pode usar o Teams Toolkit com Visual Studio Code ou uma interface de linha de comando chamada CLI do TeamsFx.
Abra Visual Studio Code e selecione Extensões (Ctrl+Shift+X ou Exibir>Extensões).
Na caixa de pesquisa, insira o Kit de Ferramentas do Teams.
Selecione Instalar.
O ícone Kit de
Ferramentas do Teams é exibido na Barra de Atividades do Visual Studio Code.
Você também pode instalar o Teams Toolkit no Visual Studio Code Marketplace.
Configurar seu locatário de desenvolvimento do Teams
Um locatário é um espaço ou um contêiner para sua organização no Teams, onde você conversa, compartilha arquivos e executa reuniões. Esse espaço também é onde você carrega e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.
Verifique se há a opção carregar um aplicativo
Depois de criar seu aplicativo personalizado, você deve carregar seu aplicativo no Teams com a opção Carregar um aplicativo personalizado . Entre em sua conta do Microsoft 365 para marcar se essa opção estiver habilitada.
As etapas a seguir ajudam você a verificar se você pode carregar aplicativos no Teams:
No cliente do Teams, selecione o ícone Aplicativos .
Selecione Gerenciar seus aplicativos.
Selecione Carregar um aplicativo.
Procure a opção para Carregar um aplicativo personalizado. Se a opção estiver visível, você poderá carregar aplicativos personalizados.
Observação
Se você não encontrar a opção de carregar um aplicativo personalizado, entre em contato com o administrador do Teams.
Criar um locatário de desenvolvedor gratuito do Teams (opcional)
Se você não tiver uma conta de desenvolvedor do Teams, ingresse no programa de desenvolvedor do Microsoft 365.
Selecione Ingressar Agora e siga as instruções na tela.
Na tela de boas-vindas, selecione Configurar assinatura do E5.
Configurar a conta de administrador. Depois de concluir, a seguinte tela será exibida:
Entre no Teams usando a conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.
Criar bot de notificação
Para criar um bot de notificação usando Visual Studio Code
Abra o Visual Studio Code.
Selecione o ícone Kit de
Ferramentas do Teams na Barra de Atividades Visual Studio Code.Selecione Criar um Novo Aplicativo.
Selecione Bot para criar um novo projeto de bot.
Verifique se a Mensagem de Notificação de Chat está selecionada como o recurso de aplicativo que você deseja criar em seu aplicativo.
Selecione Servidor restify de gatilho HTTP como o gatilho.
Selecione JavaScript como linguagem de programação.
Selecione Pasta padrão para armazenar sua pasta raiz do projeto no local padrão.
Você também pode alterar o local padrão pelas seguintes etapas:
Selecione Procurar.
Selecione o local para o workspace do projeto.
Selecione a Pasta Selecionar.
Insira um nome adequado para seu aplicativo.
Selecione Enter.
Depois que seu aplicativo é criado, o Kit de Ferramentas do Teams exibe a seguinte mensagem:
O aplicativo bot de notificação é criado em alguns segundos.
Selecione Ícone Executar e Depurar
na Barra de Atividades do Visual Studio Code.Selecione Depurar no Teams (Edge) ou Depurar no Teams (Chrome) na lista suspensa.
Selecione Botão Iniciar Depuração .
Selecione Adicionar.
Seu aplicativo bot de notificação é carregado no cliente do Teams.
Em tempo real, os eventos são disparados por uma fonte externa, como uma API de terceiros que faz com que o bot de notificação envie uma notificação ao usuário. Para emular um gatilho de evento, você pode enviar um evento manualmente usando powershell ou terminal.
Para invocar um evento para disparar uma notificação, use uma das seguintes maneiras:
Se você usar o Windows, siga as etapas:
Abra Windows PowerShell.
Execute o comando
Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notification.
Se você não usar o Windows, siga as etapas:
- Em Visual Studio Code, vá para Terminal>Novo Terminal para abrir outro terminal.
- Execute o comando
curl -X POST http://localhost:3978/api/notification.
Você obterá a seguinte saída no Teams:
Observação
Se quiser estender seu aplicativo para o Outlook e o Microsoft 365, você pode optar por depurar seu aplicativo com o Outlook e o Microsoft 365 na lista suspensa EXECUTAR E DEPURAR no Visual Studio Code.
Faça um tour pelo código-fonte
O Teams Toolkit fornece componentes para a criação de um aplicativo. Depois de criar o projeto, você pode exibir as pastas e arquivos do projeto na área Explorer de Visual Studio Code.
A nova pasta de projeto contém o seguinte conteúdo:
| Nome da pasta/arquivo | Conteúdos |
|---|---|
.vscode |
Arquivos VSCode para depuração. |
appPackage |
Modelos para o manifesto do aplicativo (anteriormente chamado de manifesto do aplicativo teams). |
env |
Pares de nome/valor são armazenados em arquivos de ambiente e usados por teamsapp.yml para personalizar as regras de provisionamento e implantação. |
infra |
Modelos para provisionar recursos do Azure. |
src\ |
O código-fonte do aplicativo teams de notificação. |
src\index.js |
Ponto de entrada do aplicativo e restify manipuladores para notificações. |
src\teamsbot.js |
Um manipulador de atividades de equipes vazio para personalização de bot. |
src\adaptiveCards\notification-default.json |
Um Cartão Adaptável gerado que é enviado para o Teams. |
teamsapp.yml |
O arquivo principal do projeto descreve a configuração do aplicativo e define o conjunto de ações a serem executadas em cada estágio do ciclo de vida. |
teamsapp.local.yml |
Isso substitui teamsapp.yml as ações que permitem a execução local e a depuração. |
Enviar notificação para o canal do Teams
Para enviar notificação ao canal do Teams
Em Visual Studio Code, em EXPLORER, selecione MYNOTIFICATIONBOT> src> index.js.
Você pode ver a seguinte página:
Use o código a seguir em
for (const target of await bot.notification.installations()) {Visual Studio Code.if (target.type === "Channel") { const members = await target.members(); await target.sendMessage("This is a message to channel: " + members.length + " members."); for (const member of members) { await member.sendMessage("This is a message to Member: " + member.account.email); } } /*
Para personalizar o armazenamento (opcional):
Em Visual Studio Code, em EXPLORER, selecione MYNOTIFICATIONBOT> src> interno> initialize.js.
Você pode ver a seguinte página:
Atualize o código a seguir em initialize.js arquivo para personalizar o armazenamento.
const myStorage = new MyStorage(...); // initialize ConversationBot with notification enabled and customized storage const bot = new ConversationBot({ // The bot id and password to create BotFrameworkAdapter. // See https://aka.ms/about-bot-adapter to learn more about adapters. adapterConfig: { appId: process.env.BOT_ID, appPassword: process.env.BOT_PASSWORD, }, // Enable notification notification: { enabled: true, storage: myStorage, }, });Use seu próprio local de armazenamento em vez de MyStorage.
Observação
É necessário usar seu próprio armazenamento para ambiente de produção. Se o armazenamento não for fornecido, o armazenamento de arquivos local padrão será considerado.
Selecione Executar e Depurar
ícone na barra lateral Visual Studio Code.Selecione Depurar no Teams (Edge) ou Depurar no Teams (Chrome) na lista suspensa.
Selecione Botão Iniciar Depuração .
Você obtém a saída a seguir no Teams.
Selecione Adicionar a uma equipe na lista suspensa.
Na caixa Pesquisar, adicione qualquer canal.
Selecione Configurar um bot.
A tela a seguir é exibida:
Abra Windows PowerShell.
Execute o comando
Invoke-Webrequest -Method POST -URI http://localhost:3978/api/notification.
Você recebe a notificação no canal do Teams:
Você recebe a notificação no chat pessoal:
Implantar seu primeiro aplicativo do Teams
Você aprendeu a criar e executar o aplicativo teams com a funcionalidade do bot de notificação. A etapa final é implantar seu aplicativo no Azure.
Vamos implantar o primeiro aplicativo com o recurso de bot de notificação no Azure usando o Teams Toolkit.
Entre em sua conta do Azure
Use sua conta para acessar o microsoft portal do Azure e fornecer recursos de nuvem provisionados para dar suporte ao seu aplicativo.
Abra o Visual Studio Code.
Abra a pasta de projeto em que você criou o aplicativo bot de notificação.
Selecione o ícone kit de
ferramentas do Teams na barra lateral.Selecione Entrar no Azure usando suas credenciais.
Dica
Se você tiver a extensão da CONTA do AZURE instalada e estiver usando a mesma conta, poderá ignorar esta etapa.
Seu navegador da Web padrão é aberto para permitir que você entre na conta.
Feche o navegador quando solicitado e retorne ao Visual Studio Code.
A seção ACCOUNTS da barra lateral mostra as duas contas separadamente. Ele também lista o número de assinaturas utilizáveis do Azure disponíveis para você. Verifique se você tem pelo menos uma assinatura utilizável do Azure disponível. Caso contrário, saia e use uma conta diferente.
Parabéns, você criou um aplicativo do Teams! Agora vamos continuar e aprender a implantar um dos aplicativos no Azure usando o Kit de Ferramentas do Teams.
Implantar seu aplicativo no Azure.
Em IMPLANTAÇÃO, você pode provisionar os recursos de nuvem necessários e o código do aplicativo é copiado para os recursos de nuvem criados.
Selecione o ícone do Kit de Ferramentas do Teams
na barra Visual Studio Code lateral.Selecione Provisionar em CICLO DE VIDA.
Selecione um grupo de recursos existente ou crie um novo grupo de recursos. Para obter mais informações, consulte Criar grupo de recursos.
Selecione qualquer um da assinatura existente.
Selecione um grupo de recursos existente ou crie um novo grupo de recursos.
Observação
Uma caixa de diálogo aparece mencionando que os custos podem ser incorridos ao executar recursos no Azure.
Selecione Provisionar.
O processo de provisionamento cria recursos na nuvem do Azure. Você pode monitorar o progresso observando as caixas de diálogo no canto inferior direito.
Você vê a opção de exibir os recursos provisionados. Para este tutorial, você não precisa exibir recursos.
Selecione Implantar em CICLO DE VIDA após a conclusão do provisionamento.
Selecione Implantar.
A implantação leva algum tempo. Você pode monitorar o progresso nas caixas de diálogo no canto inferior direito.
Desafio completo
Você veio com algo assim?
Parabéns!
Você concluiu o tutorial para criar um bot de notificação. Você pode estender o bot de notificação para adicionar os recursos de resposta de comando e fluxo de trabalho.
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.
Comentários
Em breve: ao longo de 2024, vamos eliminar problemas do GitHub como o mecanismo de comentários para conteúdo e substituí-lo por um novo sistema de comentários. Para obter mais informações, consulte: https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de