Crie seu primeiro aplicativo de bot usando JavaScript
Inicie o desenvolvimento de aplicações do Microsoft Teams com a sua primeira aplicação Teams. Pode criar uma aplicação de bot com o Teams através de Javascript.
A sua aplicação tem uma capacidade, que vem com a sua própria IU e UX:
Neste tutorial, irá aprender:
- Como configurar um novo projeto com o Teams Toolkit.
- Como criar uma aplicação de bot.
- Como implementar a sua aplicação.
Pré-requisitos
Certifique-se de que instala as seguintes ferramentas para criar e implementar as suas aplicações.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Kit de ferramentas do Teams | Uma extensão do Microsoft Visual Studio Code que cria um projeto estruturado para a sua aplicação. Utilize a versão mais recente. | |
| Microsoft Teams | Microsoft Teams para colaborar com todas as pessoas com quem trabalha através de aplicações para chat, reuniões e ligar para todos num único local. | |
| Node.js | Ambiente de runtime do JavaScript de back-end. Para obter mais informações, veja Node.js tabela de compatibilidade de versões 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). Utilize a versão mais recente. | |
| Opcional | ||
| Ferramentas do Azure para Visual Studio Code e CLI do Azure | Ferramentas do Azure para aceder a dados armazenados ou implementar um back-end baseado na cloud para a sua aplicação Teams no Azure. | |
| Ferramentas de Programação do React para Chrome OR React Developer Tools for Microsoft Edge | Uma extensão DevTools do browser para a biblioteca DevTools do React JavaScript de código aberto. | |
| Microsoft Graph Explorer | O Microsoft Graph Explorer, uma ferramenta baseada no browser que lhe permite executar uma consulta a partir de dados do Microsoft Graph. | |
| Portal do Desenvolvedor do Teams | Portal baseado na Web para configurar, gerir e distribuir a sua aplicação Teams, incluindo para a sua organização ou para a Microsoft Teams Store. |
Dica
Se trabalhar com dados do Microsoft Graph, deve saber mais e marcar o Explorador do Microsoft Graph. Esta ferramenta baseada no browser permite-lhe consultar o Microsoft Graph fora de uma aplicação.
Preparar o ambiente de desenvolvimento
Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.
Instalar o Teams Toolkit
O Microsoft Teams Toolkit ajuda a simplificar o processo de desenvolvimento com ferramentas para aprovisionar e implementar recursos na cloud para a sua aplicação e publicar na Loja Teams.
Pode utilizar o Teams Toolkit com o Visual Studio Code ou uma interface de linha de comandos denominada CLI do TeamsFx.
Abra o Visual Studio Code e selecione Extensões (Ctrl+Shift+X ou Ver>Extensões).
Na caixa de pesquisa, introduza Teams Toolkit.
Selecione Instalar.
O ícone do Toolkit
do Teams é apresentado na Barra de Atividade do Visual Studio Code.
Também pode instalar o Teams Toolkit a partir do Marketplace do Visual Studio Code.
Configurar o seu inquilino de desenvolvimento do Teams
Um inquilino é um espaço ou contentor para a sua organização no Teams, onde conversa, partilha ficheiros e executa reuniões. Este espaço também é onde carrega e testa a sua aplicação. Vamos verificar se está pronto para programar com o inquilino.
Verificar a opção carregar uma aplicação
Depois de criar a sua aplicação personalizada, tem de carregar a sua aplicação para o Teams com a opção Carregar uma aplicação personalizada . Inicie sessão na sua conta do Microsoft 365 para verificar se esta opção está ativada.
Os passos seguintes ajudam-no a verificar se pode carregar aplicações no Teams:
No cliente do Teams, selecione o ícone Aplicações .
Selecione Gerenciar seus aplicativos.
Selecione Carregar uma aplicação.
Procure a opção Carregar uma aplicação personalizada. Se a opção estiver visível, pode carregar aplicações personalizadas.
Observação
Se não encontrar a opção para carregar uma aplicação personalizada, contacte o administrador do Teams.
Criar um inquilino gratuito para programadores do Teams (opcional)
Se não tiver uma conta de programador do Teams, adira ao programa de programador do Microsoft 365.
Selecione Aderir Agora e siga as instruções apresentadas no ecrã.
No ecrã de boas-vindas, selecione Configurar a subscrição E5.
Configurar a conta de administrador. Depois de terminar, é apresentado o ecrã seguinte:
Inicie sessão no Teams com a conta de administrador que acabou de configurar. Verifique se tem a opção Carregar uma aplicação personalizada no Teams.
Obter uma conta gratuita do Azure
Se quiser alojar a sua aplicação ou aceder a recursos no Azure, tem de ter uma subscrição do Azure. Crie uma conta gratuita antes de começar.
Agora, tem todas as ferramentas para configurar a sua conta. Em seguida, vamos configurar o seu ambiente de desenvolvimento e começar a criar! Selecione a aplicação que pretende criar primeiro.
Criar uma área de trabalho de projeto para a sua aplicação de bot
Vamos criar a sua primeira aplicação de bot.
A capacidade de bot de uma aplicação do Teams cria um chatbot ou um bot de conversação. Pode utilizá-lo para executar tarefas simples e automatizadas, como fornecer suporte ao cliente. Um bot fala com um serviço Web e ajuda-o a utilizar as suas ofertas. Pode obter previsão meteorológica, fazer reservas ou qualquer outro serviço oferecido através de um bot de conversação.
Como já se preparou para criar estas aplicações, pode configurar um novo projeto do Teams para criar a aplicação de bot.
Neste tutorial, irá aprender:
- Como configurar um novo projeto de bot com o Teams Toolkit.
- Acerca da estrutura de diretórios do seu projeto de aplicação.
Importante
Os bots estão disponíveis em ambientes de Cloud da Comunidade Governamental (GCC), GCC-High e Departamento de Defesa (DOD ).
Criar a área de trabalho do projeto de bot
Se os pré-requisitos estiverem implementados, vamos começar!
Observação
A IU do Visual Studio Code apresentada é do Mac. Pode ser diferente consoante o seu sistema operativo, a versão do Teams Toolkit e o ambiente.
Abra o Visual Studio Code.
Selecione o ícone Do Teams Toolkit
na Barra de Atividade do Visual Studio Code.Selecione Criar uma Nova Aplicação.
Selecione Bot para criar um novo projeto de bot.
Certifique-se de que o Bot Básico está selecionado como a funcionalidade de aplicação que pretende criar na sua aplicação.
Selecione JavaScript como linguagem de programação.
Selecione Pasta predefinida para armazenar a pasta raiz do projeto na localização predefinida.
Também pode alterar a localização predefinida através dos seguintes passos:
Selecione Procurar.
Selecione a localização da área de trabalho do projeto.
Selecione a opção Selecionar Pasta.
Introduza um nome adequado para a sua aplicação e, em seguida, selecione Enter.
É apresentada uma caixa de diálogo onde teria de escolher sim ou não para confiar nos autores dos ficheiros nesta pasta.
A sua aplicação teams com uma capacidade de bot é criada em poucos segundos.
Após a criação da sua aplicação, o Toolkit do Teams apresenta a seguinte mensagem:
Selecione Depuração local para pré-visualizar o projeto.
Uma recapitulação rápida da criação de uma aplicação do Teams.
Veja esta breve recapitulação para criar uma aplicação do Teams.
Veja uma apresentação do código fonte da aplicação bot
Depois de concluída a estrutura, veja os diretórios e ficheiros do projeto no Explorer no Visual Studio Code.
| Pasta/Ficheiro | Conteúdos |
|---|---|
teamsapp.yml |
O ficheiro de projeto principal descreve a configuração da aplicação e define o conjunto de ações a executar em cada fase do ciclo de vida. |
teamsapp.local.yml |
Isto substitui teamsapp.yml por ações que permitem a execução local e a depuração. |
.vscode/ |
Ficheiros VSCode para depuração local. |
appPackage/ |
Modelos para o manifesto de aplicação do Teams. |
adaptiveCards/ |
Os cartões ajustáveis enviados pelo bot. |
infra/ |
Modelos para aprovisionar recursos do Azure. |
index.js |
Processador e restify ponto de entrada da aplicação. |
teamsBot.js |
Processador 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 a sua primeira aplicação de bot
Depois de configurar a área de trabalho do projeto com o Teams Toolkit, crie o seu projeto de bot. Tem de iniciar sessão na sua conta do Microsoft 365.
Iniciar sessão na sua conta do Microsoft 365
Utilize esta conta para iniciar sessão no Teams. Se estiver a utilizar um inquilino do programa de programador do Microsoft 365, a conta de administrador que configurou durante o registo é a sua conta do Microsoft 365.
Abra o Visual Studio Code.
Selecione o ícone Do Teams Toolkit
na barra lateral.Selecione Iniciar sessão no M365 com as suas credenciais.
O browser predefinido é aberto para lhe permitir iniciar sessão na conta.
Feche o browser quando lhe for pedido e regresse ao Visual Studio Code.
Regresse ao Teams Toolkit no Visual Studio Code.
Utilize esta conta para iniciar sessão no Teams. Se estiver a utilizar um inquilino do programa de programador do Microsoft 365, a conta de administrador que configurou durante o registo é a sua conta do Microsoft 365.
Agora, está pronto para criar a aplicação e executá-la localmente!
Criar e executar a sua primeira aplicação de bot localmente
Para criar e executar a sua aplicação no ambiente local:
Selecione F5 no Visual Studio Code para executar a sua aplicação no modo de depuração.
Observação
Se o Toolkit do Teams não conseguir verificar um pré-requisito específico, ser-lhe-á pedido para verificar.
Saiba o que acontece quando executa a sua aplicação localmente no depurador.
Caso esteja a perguntar-se, quando premir a tecla F5 , o Toolkit do Teams:
- Verifica todos os seguintes pré-requisitos:
- Tem sessão iniciada com uma conta do Microsoft 365.
- O carregamento de aplicações personalizadas está ativado para a sua conta do Microsoft 365.
- Suportada Node.js versão está instalada.
- A porta necessária para a aplicação de bot está disponível.
- Instale pacotes npm.
- Inicia o Túnel de Programador para criar um túnel HTTP.
- Regista a aplicação no Microsoft Entra ID e configura a aplicação.
- Regista a aplicação bot no Bot Framework e configura a aplicação de bot.
- Regista a aplicação no Portal do Programador do Teams e configura a aplicação.
- Inicia a aplicação de bot.
- Inicia o Teams num browser e carrega a aplicação de bot personalizado.
Observação
Quando executa a aplicação pela primeira vez, todas as dependências são transferidas e a aplicação é criada. Uma janela do navegador é aberta automaticamente quando a compilação é concluída. Este processo pode demorar entre três a cinco minutos a ser concluído.
O Teams executa a sua aplicação num browser.
Inicie sessão com a sua conta do Microsoft 365, se lhe for pedido.
Selecione Adicionar quando lhe for pedido para carregar a aplicação de bot personalizado para o Teams no seu computador local ou utilize o menu pendente para adicionar a aplicação bot a uma equipa, conversa ou reunião.
Agora, o bot está a ser executado com êxito no Teams! Depois de a aplicação ser carregada, é aberta uma sessão de chat com o bot.
Pode escrever
welcomepara mostrar um cartão de introdução e escreverlearnpara aceder à documentação do comando do bot e do cartão adaptável.
Pode realizar atividades de depuração normais, como definir pontos de interrupção, como em qualquer outra aplicação Web. Abra o arquivo
bot/teamsBot.jse localize o métodoonMessage(). Defina um ponto de interrupção em qualquer caso. Em seguida, escreva algum texto.
Saiba como resolver problemas se a sua aplicação não for executada localmente.
Para executar com êxito a sua aplicação no Teams, certifique-se de que ativou o carregamento de aplicações personalizadas na sua conta do Teams. Pode saber mais sobre o carregamento de aplicações personalizadas na secção de pré-requisitos.
Importante
O carregamento de aplicações personalizadas está disponível na Cloud da Comunidade Governamental (GCC), GCC-High e DOD.
Dica
Verifique se existem problemas antes de carregar uma aplicação personalizada com a ferramenta de validação de aplicações. Esta ferramenta está incluída no toolkit. Corrija os erros para carregar a aplicação.
Implementar a sua primeira aplicação teams
Aprendeu a criar, criar e executar a aplicação Teams com a capacidade bot. O passo final é implementar a sua aplicação no Azure.
Vamos implementar a primeira aplicação com a capacidade bot no Azure com o Teams Toolkit.
Iniciar sessão na sua conta do Azure
Utilize esta conta para aceder ao portal do Microsoft Azure e para aprovisionar novos recursos na cloud para suportar a sua aplicação.
Abra o Visual Studio Code.
Abra a pasta do projeto na qual criou a aplicação de bot.
Selecione o ícone Do Teams Toolkit
na barra lateral.Selecione Iniciar sessão no Azure com as suas credenciais.
Dica
Se tiver a extensão conta do AZURE instalada e estiver a utilizar a mesma conta, pode ignorar este passo. Utilize a mesma conta que está a utilizar noutras extensões.
O browser predefinido é aberto para lhe permitir iniciar sessão na conta.
Feche o browser quando lhe for pedido e regresse ao Visual Studio Code.
A secção CONTAS da barra lateral mostra as duas contas separadamente. Também lista o número de subscrições utilizáveis do Azure disponíveis para si. Certifique-se de que tem, pelo menos, uma subscrição utilizável do Azure disponível. Caso contrário, termine sessão e utilize uma conta diferente.
Parabéns, criou uma aplicação do Teams! Agora, vamos continuar e aprender a implementar uma das aplicações no Azure com o Teams Toolkit.
Implantar seu aplicativo no Azure.
A implementação consiste em dois passos. Primeiro, o Azure cria os recursos da cloud necessários (também conhecidos como aprovisionamento). Em seguida, o Azure copia o código da sua aplicação para os recursos da cloud criados. Neste tutorial, irá implementar a aplicação de bot.
Qual é a diferença entre Aprovisionar e Implementar?
O passo Aprovisionamento cria recursos no Azure e no Microsoft 365 para a sua aplicação, mas não copia código (HTML, CSS ou JavaScript) para os recursos. O passo Implementar copia o código da sua aplicação para os recursos que criou durante o passo de aprovisionamento. É comum implementar várias vezes sem aprovisionar novos recursos. Uma vez que o passo de aprovisionamento pode demorar algum tempo a ser concluído, é separado do passo de implementação.
Selecione o ícone do Kit de Ferramentas do Teams na barra Visual Studio Code lateral.
Selecione Aprovisionar.
Selecione uma subscrição a utilizar para os recursos do Azure.
A sua aplicação é alojada com os recursos do Azure.
Uma caixa de diálogo avisa-o de que podem ser incorridos custos ao executar recursos no Azure.
Selecione Aprovisionar.
O processo de aprovisionamento cria recursos na cloud do Azure. Pode demorar algum tempo. Pode monitorizar o progresso ao ver as caixas de diálogo no canto inferior direito. Após alguns minutos, verá o seguinte aviso:
Se quiser, pode ver os recursos aprovisionados. Para este tutorial, não precisa de ver recursos.
O recurso aprovisionado é apresentado na secção AMBIENTE .
Selecione Implementar no painel CICLO DE VIDA depois de o aprovisionamento estar concluído.
Tal como acontece com o aprovisionamento, a implementação demora algum tempo. Pode monitorizar o processo ao ver as caixas de diálogo no canto inferior direito. Após alguns minutos, verá um aviso de conclusão.
Agora, pode utilizar o mesmo processo para implementar as aplicações Bot e Extensão de Mensagens no Azure.
Executar a aplicação implementada
Assim que os passos de aprovisionamento e implementação estiverem concluídos:
Abra o painel de depuração (Ctrl+Shift+D / ⌘⇧-D ou Ver Execução>) a partir do Visual Studio Code.
Selecione Iniciar Remoto (Edge) na lista pendente iniciar configuração.
Selecione Iniciar depuração (F5). É-lhe pedido que carregue a aplicação de bot para o Teams.
Selecione Adicionar ou utilizar o menu pendente para adicionar a aplicação bot a uma equipa, conversa ou reunião.
Adicionou com êxito a sua aplicação de bot ao cliente do Teams.
Saiba o que acontece quando implementou a sua aplicação 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 implementação é um processo de dois passos. Aprovisiona os recursos numa subscrição ativa do Azure e, em seguida, implementa ou carrega o código de back-end e front-end da aplicação para o Azure.
- O back-end, se configurado, utiliza vários serviços do Azure, incluindo o Serviço de Aplicações do Azure e o Armazenamento do Azure.
- A aplicação de front-end é implementada numa conta de Armazenamento do Azure configurada para alojamento web estático.
Parabéns!
Já o fez!
Criou uma aplicação de bot.
Agora que aprendeu a criar uma aplicação básica, pode avançar para a criação de aplicações mais complexas. Siga os procedimentos para criar e implementar a aplicação e a sua aplicação apresenta várias funcionalidades.
Concluiu o tutorial para criar o bot com JavaScript.
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.