Compilar um bot de comando com JavaScript
O Microsoft Teams permite automatizar tarefas repetitivas usando um bot de comando. Ele responde a comandos simples enviados em chats com Cartões Adaptáveis.
Neste tutorial, você aprenderá:
- Como criar um bot de comando com o Teams Toolkit.
- Sobre a estrutura de diretório do seu aplicativo.
Este guia passo a passo ajuda você a criar um bot de comando 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 | |
|---|---|---|
| Required | ||
| Visual Studio Code | JavaScript ou TypeScript, ambientes de build. Use a versão mais recente. | |
| Kit de ferramentas do Teams | Uma extensão do Microsoft Visual Studio Code 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 | Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamar tudo em um só lugar. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| Conta de desenvolvedor do 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.
Create um locatário gratuito do desenvolvedor 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 comando
Para criar um bot de comando 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 Create um novo aplicativo.
Selecione Bot para criar um novo projeto de bot.
Verifique se o Comando de Chat está selecionado como o recurso de aplicativo que você deseja criar em seu aplicativo.
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 Selecionar Pasta.
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 comando é 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 . Você será solicitado a carregar o aplicativo bot de comando no Teams em seu computador local.
Selecione Adicionar ou use o menu suspenso para adicionar seu aplicativo bot de comando a uma equipe, chat ou reunião.
Selecione o bot de comando.
Selecione Enter.
Você recebe a seguinte resposta de comando em cartão adaptável:
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.
Se você optar por usar a estrutura da interface do usuário, o código de modelo de exemplo a seguir fornecerá um scaffolding com React componentes. Ele contém o seguinte conteúdo:
| Pasta/Arquivo | Conteúdos |
|---|---|
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. |
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. |
.vscode/ |
Arquivos VSCode para depuração. |
appPackage/ |
Modelos para o manifesto do aplicativo teams. |
infra/ |
Modelos para provisionar recursos do Azure. |
src/ |
O código-fonte do aplicativo. |
src/index.js |
Ponto de entrada do aplicativo e restify manipuladores para comando e resposta. |
src/teamsBot.js |
Um manipulador de atividades de equipes vazio para personalização de bot. |
src/adaptiveCards/helloworldCommand.json |
Um Cartão Adaptável gerado que é enviado para o Teams. |
src/helloworldCommandHandler.js |
A lógica de negócios para lidar com um comando. |
Implantar seu primeiro aplicativo do Teams
Você aprendeu a criar e executar o aplicativo Teams com a funcionalidade do bot de comando. A etapa final é implantar seu aplicativo no Azure.
Vamos implantar o primeiro aplicativo com recursos de bot de comando 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 que você criou o aplicativo bot de comando.
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 Create 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. Após alguns minutos, você verá o seguinte aviso:
Você tem 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 na caixa de diálogo no canto inferior direito. Após alguns minutos, você verá o aviso a seguir.
Abra o painel de depuração (Ctrl+Shift+D / ⌘⇧-D ou Exibir > Execução) de Visual Studio Code.
Selecione Iniciar Remoto no Teams (Edge) na lista suspensa de configuração de inicialização.
Selecione Botão Iniciar Depuração . Você será solicitado a carregar o aplicativo bot de comando no Teams.
Selecione Adicionar ou use o menu suspenso para adicionar seu aplicativo bot de comando a uma equipe, chat ou reunião.
Selecione o bot de comando.
Selecione Enter.
Você recebe a seguinte resposta de comando em cartão adaptável:
Desafio completo
Você veio com algo assim?
Parabéns!
Você concluiu o tutorial para criar um aplicativo de resposta de comando.
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, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de