Crie seu primeiro aplicativo de bot usando JavaScript
Inicie o desenvolvimento de aplicativos do Microsoft Teams com seu primeiro aplicativo do Teams. Você pode criar um aplicativo bot com o Teams usando Javascript.
Seu aplicativo tem uma funcionalidade, que vem com sua própria interface do usuário e UX:
Neste tutorial, você aprenderá:
- Como configurar um novo projeto com o Teams Toolkit.
- Como criar um aplicativo bot.
- Como implantar seu aplicativo.
Pré-requisitos
Verifique se você instala as seguintes ferramentas para criar e implantar seus aplicativos.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| 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. | |
| 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. | |
| 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 Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| Visual Studio Code | Ambientes de compilação JavaScript, TypeScript ou Estrutura do SharePoint (SPFx). Use a versão mais recente. | |
| Opcional | ||
| Ferramentas do Azure para Visual Studio Code e CLI do Azure | Ferramentas do Azure para acessar dados armazenados ou implantar um back-end baseado em nuvem para seu aplicativo teams no Azure. | |
| React Ferramentas de Desenvolvedor para Ferramentas de Desenvolvedor do Chrome OR React para Microsoft Edge | Uma extensão DevTools do navegador para a biblioteca JavaScript React de código aberto. | |
| Microsoft Graph Explorer | O Microsoft Graph Explorer, uma ferramenta baseada em navegador que permite executar uma consulta de dados do Microsoft Graph. | |
| Portal do Desenvolvedor do Teams | Portal baseado na Web para configurar, gerenciar e distribuir seu aplicativo do Teams, inclusive para sua organização ou para a Microsoft Teams Store. |
Dica
Se você trabalhar com dados do Microsoft Graph, saiba mais sobre e marque a Explorer do Microsoft Graph. Essa ferramenta baseada no navegador permite consultar o Microsoft Graph fora de um aplicativo.
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.
Obter uma conta gratuita do Azure
Se você quiser hospedar seu aplicativo ou acessar recursos no Azure, deverá ter uma assinatura do Azure. Crie uma conta gratuita antes de começar.
Agora você tem todas as ferramentas para configurar sua conta. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar! Selecione o aplicativo que você deseja criar primeiro.
Criar workspace de projeto para seu aplicativo bot
Vamos criar seu primeiro aplicativo bot.
A funcionalidade de bot de um aplicativo do Teams cria um chatbot ou um bot de conversação. Você o usa para executar tarefas simples e automatizadas, como fornecer serviço ao cliente. Um bot conversa com um serviço Web e ajuda você a usar suas ofertas. Você pode obter previsão do tempo, fazer reservas ou qualquer outro serviço oferecido usando um bot de conversa.
Como você já se preparou para criar esses aplicativos, você pode configurar um novo projeto do Teams para criar o aplicativo bot.
Neste tutorial, você aprenderá:
- Como configurar um novo projeto de bot com o Teams Toolkit.
- Sobre a estrutura de diretório do seu projeto de aplicativo.
Importante
Os bots estão disponíveis em ambientes do GCC (Government Community Cloud), GCC-High e DoD (Departamento de Defesa ).
Criar seu workspace de projeto de bot
Se os pré-requisitos estiverem em vigor, vamos começar!
Observação
A interface do usuário Visual Studio Code mostrada é do Mac. Pode ser diferente dependendo do sistema operacional, da versão do Teams Toolkit e do ambiente.
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 o Bot Básico 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 a Pasta Selecionar.
Insira um nome adequado para seu aplicativo e selecione Inserir.
Uma caixa de diálogo é exibida, em que você seria obrigado a escolher sim ou não para confiar nos autores dos arquivos nesta pasta.
Seu aplicativo teams com um recurso de bot é criado em poucos segundos.
Depois que seu aplicativo é criado, o Kit de Ferramentas do Teams exibe a seguinte mensagem:
Selecione Depuração local para visualizar seu projeto.
Uma recapitulação rápida da criação de um aplicativo do Teams.
Assista a esta breve recapitulação para criar um aplicativo do Teams.
Faça um tour pelo código-fonte do aplicativo bot
Depois que o scaffolding for concluído, exiba os diretórios e arquivos do projeto no Explorer no Visual Studio Code.
| 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. |
.vscode/ |
Arquivos VSCode para depuração local. |
appPackage/ |
Modelos para o manifesto do aplicativo teams. |
adaptiveCards/ |
Os cartões adaptáveis enviados por bot. |
infra/ |
Modelos para provisionar recursos do Azure. |
index.js |
Ponto de entrada do aplicativo e restify manipulador. |
teamsBot.js |
Manipulador de atividades do Teams. |
Dica
Familiarize-se com os bots fora do Teams antes de integrar o seu primeiro bot dentro do Teams.
Criar e executar seu primeiro aplicativo bot
Depois de configurar o workspace do projeto com o Teams Toolkit, crie seu projeto de bot. Você precisa entrar na sua conta do Microsoft 365.
Entre em sua conta do Microsoft 365
Use essa conta para entrar no Teams. Se você estiver usando um locatário do programa de desenvolvedor do Microsoft 365, a conta de administrador que você configurou durante o registro é sua conta do Microsoft 365.
Abra o Visual Studio Code.
Selecione o ícone kit de
ferramentas do Teams na barra lateral.Selecione Entrar no M365 usando suas credenciais.
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.
Retorne ao Teams Toolkit no Visual Studio Code.
Use essa conta para entrar no Teams. Se você estiver usando um locatário do programa de desenvolvedor do Microsoft 365, a conta de administrador que você configurou durante o registro é sua conta do Microsoft 365.
Agora você está pronto para criar o aplicativo e executá-lo localmente!
Criar e executar seu primeiro aplicativo bot localmente
Para criar e executar seu aplicativo no ambiente local:
Selecione F5 no Visual Studio Code para executar seu aplicativo no modo de depuração.
Observação
Se o Teams Toolkit não conseguir marcar um pré-requisito específico, ele solicitará que você marcar.
Saiba o que acontece quando você executa seu aplicativo localmente no depurador.
Caso esteja se perguntando, ao pressionar a tecla F5 , o Kit de Ferramentas do Teams:
- Verifica todos os seguintes pré-requisitos:
- Você está conectado com uma conta do Microsoft 365.
- O upload de aplicativo personalizado está habilitado para sua conta do Microsoft 365.
- A versão de Node.js com suporte está instalada.
- A porta necessária pelo aplicativo bot está disponível.
- Instale pacotes npm.
- Inicia o Túnel de Desenvolvimento para criar um túnel HTTP.
- Registra o aplicativo em Microsoft Entra ID e configura o aplicativo.
- Registra o aplicativo bot no Bot Framework e configura o aplicativo bot.
- Registra o aplicativo no Portal do Desenvolvedor do Teams e configura o aplicativo.
- Inicia o aplicativo bot.
- Inicia o Teams em um navegador da Web e carrega o aplicativo bot personalizado.
Observação
Quando você executa o aplicativo pela primeira vez, todas as dependências são baixadas e o aplicativo é criado. Uma janela do navegador é aberta automaticamente quando a compilação é concluída. Esse processo pode levar de três a cinco minutos para ser concluído.
O Teams executa seu aplicativo em um navegador da Web.
Entre com sua conta do Microsoft 365, se solicitado.
Selecione Adicionar quando solicitado a carregar o aplicativo de bot personalizado no Teams em seu computador local ou use o menu suspenso para adicionar seu aplicativo bot a uma equipe, chat ou reunião.
Agora o bot está sendo executado com êxito no Teams! Depois que o aplicativo é carregado, uma sessão de chat com o bot é aberta.
Você pode digitar
welcomepara mostrar um cartão de introdução e digitarlearnpara ir para cartão adaptável e documentação de comando de bot.
Você pode fazer atividades normais de depuração, como definir pontos de interrupção, como em qualquer outro aplicativo Web. Abra o arquivo
bot/teamsBot.jse localize o métodoonMessage(). Defina um ponto de interrupção em qualquer caso. Em seguida, digite algum texto.
Saiba como solucionar problemas se o aplicativo não for executado localmente.
Para executar seu aplicativo com êxito no Teams, verifique se você habilitou o carregamento de aplicativo personalizado em sua conta do Teams. Você pode saber mais sobre o upload de aplicativo personalizado na seção pré-requisitos.
Importante
O upload de aplicativo personalizado está disponível em GCC (Government Community Cloud), GCC-High e DOD.
Dica
Verifique se há problemas antes de carregar um aplicativo personalizado, usando a ferramenta de validação do aplicativo. Essa ferramenta está incluída no kit de ferramentas. Corrija os erros para carregar o aplicativo.
Implantar seu primeiro aplicativo do Teams
Você aprendeu a criar, compilar e executar o aplicativo teams com a capacidade do Bot. A etapa final é implantar seu aplicativo no Azure.
Vamos implantar o primeiro aplicativo com o recurso Bot no Azure usando o Teams Toolkit.
Entre em sua conta do Azure
Use essa conta para acessar o Microsoft portal do Azure e provisionar novos recursos de nuvem para dar suporte ao seu aplicativo.
Abra o Visual Studio Code.
Abra a pasta de projeto na qual você criou o aplicativo bot.
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. Use a mesma conta que você está usando em outras extensões.
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.
A implantação consiste em duas etapas. Primeiro, o Azure cria recursos de nuvem necessários (também conhecidos como provisionamento). Em seguida, o Azure copia o código do aplicativo para os recursos de nuvem criados. Para este tutorial, você implantará o aplicativo bot.
Qual é a diferença entre Provisionar e Implantar?
A etapa Provisionar cria recursos no Azure e no Microsoft 365 para seu aplicativo, mas não copia código (HTML, CSS ou JavaScript) para os recursos. A etapa Implantar copia o código do aplicativo para os recursos criados durante a etapa de provisionamento. É comum implantar várias vezes sem provisionar novos recursos. Como a etapa de provisionamento pode levar algum tempo para ser concluída, ela é separada da etapa de implantação.
Selecione o ícone do Kit de Ferramentas do Teams na barra Visual Studio Code lateral.
Selecione Provisionar.
Selecione uma assinatura a ser usada para os recursos do Azure.
Seu aplicativo está hospedado usando recursos do Azure.
Uma caixa de diálogo avisa que os custos podem ser incorridos ao executar recursos no Azure.
Selecione Provisionar.
O processo de provisionamento cria recursos na nuvem do Azure. Pode levar algum tempo. Você pode monitorar o progresso observando as caixas de diálogo no canto inferior direito. Após alguns minutos, você verá o seguinte aviso:
Se desejar, você pode exibir os recursos provisionados. Para este tutorial, você não precisa exibir recursos.
O recurso provisionado é exibido na seção ENVIRONMENT .
Selecione Implantar no painel LIFECYCLE após a conclusão do provisionamento.
Assim como acontece com o provisionamento, a implantação leva algum tempo. Você pode monitorar o processo observando as caixas de diálogo no canto inferior direito. Após alguns minutos, você verá um aviso de conclusão.
Agora, você pode usar o mesmo processo para implantar seus aplicativos Bot e Extensão de Mensagem no Azure.
Executar o aplicativo implantado
Depois que as etapas de provisionamento e implantação forem concluídas:
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 a depuração Iniciar (F5). Você é solicitado a sideload do aplicativo bot no Teams.
Selecione Adicionar ou use o menu suspenso para adicionar seu aplicativo bot a uma equipe, chat ou reunião.
Você adicionou com êxito seu aplicativo bot ao cliente do Teams.
Saiba o que acontece quando você implantou seu aplicativo no Azure
Antes da implantação, o aplicativo era executado localmente:
- O back-end é executado usando o Azure Functions Core Tools.
- O ponto de extremidade HTTP do aplicativo, onde o Microsoft Teams carrega o aplicativo, é executado localmente.
A implantação é um processo de duas etapas. Você provisiona os recursos em uma assinatura ativa do Azure e, em seguida, implanta ou carrega o back-end e o código de front-end do aplicativo no Azure.
- O back-end, se configurado, usa vários serviços do Azure, incluindo Serviço de Aplicativo do Azure e Armazenamento do Azure.
- O aplicativo front-end é implantado em uma conta de Armazenamento do Azure configurada para hospedagem da Web estática.
Parabéns!
Você fez isso!
Você criou um aplicativo bot.
Agora que você aprendeu a criar um aplicativo básico, você pode passar a criar aplicativos mais complexos. Siga os procedimentos para criar e implantar o aplicativo, e seu aplicativo terá vários recursos.
Você concluiu o tutorial para criar bot com JavaScript.
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