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 4.0.0. | |
| 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, chamadas e 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 no Teams Toolkit versão 4.0.0 e 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 Kit de Ferramentas do Teams ajuda a simplificar o processo de desenvolvimento com ferramentas para provisionar e implantar recursos de nuvem para seu aplicativo, publicar na loja do Teams e muito mais.
Você pode usar o kit de ferramentas com Visual Studio Code ou CLI (interface de linha de comando) chamada TeamsFx.
Abra Visual Studio Code e selecione Extensões (Ctrl+Shift+X / ⌘⇧-X ou Exibir > Extensões).
Na caixa de pesquisa, insira kit de ferramentas do Teams.
Selecione Instalar ao lado do Kit de Ferramentas do Teams.
O ícone Kit de Ferramentas do Teams é exibido na Barra de Atividades Visual Studio Code depois de instalado.
Você também pode encontrar o Kit de Ferramentas do Teams no Visual Studio Code Marketplace.
Observação
A versão mais recente do Teams Toolkit é 4.2.0.
Configurar seu locatário de desenvolvimento do Teams
Um locatário é como um espaço ou um contêiner em que você conversa, compartilha arquivos e executa reuniões para sua organização no Teams. Você também pode carregar e testar seu aplicativo.
Verificar a opção sideload
Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Isso é conhecido como sideload. Entre em sua conta do Microsoft 365 para exibir essa opção.
Observação
O sideload é necessário para visualizar e testar aplicativos no ambiente local do Teams. Habilite o Sideloading para visualizar e testar seu aplicativo no Teams localmente.
Você já tem um locatário e tem acesso ao administrador? Vamos marcar se você realmente fizer isso!
Para verificar aplicativos de sideload no Teams:
No cliente do Teams, selecione Armazenar .
Selecione Gerenciar seus aplicativos.
Selecione Publicar um aplicativo.
Procure a opção para Carregar um aplicativo personalizado. Se você vir a opção, os aplicativos de sideload estarão habilitados.
Observação
Entre em contato com o administrador do Teams, se você não tiver a opção de carregar um aplicativo personalizado.
Criar um locatário de desenvolvedor gratuito do Teams (opcional)
Se você não tiver uma conta de desenvolvedor do Teams, poderá obtê-la gratuitamente. Ingresse no programa de desenvolvedor do Microsoft 365!
Selecione Ingressar Agora e siga as instruções na tela.
Selecione Configurar a assinatura do E5 na tela de boas-vindas.
Configurar a conta de administrador. Depois de concluir, a tela a seguir será exibida.
Entre no Teams usando a nova conta de administrador. Agora você deve ter a opção Carregar um aplicativo personalizado .
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 Criar um novo aplicativo.
Selecione Criar uma opção de aplicativo do Teams para criar um aplicativo usando o Teams Toolkit.
Verifique se o bot de comando está selecionado como o recurso 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(Edge) ou Depurar(Chrome) na lista suspensa.
Selecione Botão Iniciar Depuração .
Selecione Adicionar.
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:
| Nome do arquivo | Conteúdos |
|---|---|
bot/src/internal/initialize.js |
Criar o adaptador de bot global e inicializar com o Teams Frameworks |
bot/src/index.js |
Código do servidor para hospedar o aplicativo bot e escutar em /api/messages para processar a atividade do Teams com o Bot Framework |
bot/src/helloworldCommandHandler.js |
Um manipulador de comandos hello world para processar um comando helloworld e retornar um cartão adaptável como resposta |
bot/src/adaptiveCards/*.json |
Arquivo JSON cartão adaptável usado como resposta de 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.
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.
Entre em sua conta do Azure usando suas credenciais.
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ê.
Observação
Verifique se você tem pelo menos uma assinatura utilizável do Azure disponível.
Agora você está pronto para implantar seu aplicativo no Azure!
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 na Nuvem emIMPLANTAÇÃO.
Selecione um grupo de recursos existente ou crie um novo grupo de recursos. Para obter mais informações, consulte Criar 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 na nuvem em IMPLANTAÇÃO 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 (Edge) na lista suspensa de configuração de inicialização.
Selecione Botão Iniciar Depuração .
Selecione Adicionar.
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
Enviar e exibir comentários de