Criar seu primeiro aplicativo de extensão de mensagem usando JavaScript
Inicie o desenvolvimento de aplicações do Microsoft Teams com a sua primeira aplicação teams com JavaScript.
Neste tutorial, irá aprender:
- Como configurar um novo projeto com o Teams Toolkit.
- Como criar uma aplicação de extensão de mensagem.
- Como implementar a sua aplicação.
Este guia passo a passo ajuda-o a criar uma aplicação teams de extensão de mensagens com o Teams Toolkit no Visual Studio Code. Verá o seguinte resultado depois de concluir este guia:
Pré-requisitos
Certifique-se de que instala as seguintes ferramentas para criar e implementar as suas aplicações.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Visual Studio Code | Ambientes de compilação JavaScript ou TypeScript. Utilize a versão mais recente. | |
| Kit de ferramentas do Teams | O Microsoft Visual Studio Code extensão que cria um projeto estruturado para a sua aplicação. Utilize a versão mais recente. | |
| Node.js | Ambiente de runtime JavaScript de back-end. Para obter mais informações, veja Node.js tabela de compatibilidade de versões. | |
| Microsoft Teams | Colabore com pessoas com quem trabalha através de aplicações para conversas, reuniões e chamadas num único local. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um browser com ferramentas de programador essenciais para depuração e teste. | |
| Conta de programador do Microsoft 365 | Acesso à conta do Teams com as permissões adequadas para instalar uma aplicação personalizada. | |
| 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 ou ferramentas de programador React para o Microsoft Edge | Uma extensão DevTools do browser para a biblioteca JavaScript de React open source. |
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 Visual Studio Code ou uma interface de linha de comandos denominada CLI do TeamsFx.
Abra 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 Visual Studio Code Marketplace.
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 marcar se esta opção estiver 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.
Criar uma área de trabalho de projeto para a sua aplicação de extensão de mensagem
Agora, vamos criar a sua primeira aplicação de extensão de mensagem.
A capacidade de extensão de mensagens permite-lhe interagir com um serviço Web através de botões e formulários. Utilize a área de composição de mensagens, a caixa de comando ou uma mensagem diretamente no cliente do Teams para procurar e iniciar ações num sistema externo. As extensões de mensagens dependem de bots para fornecer uma caixa de diálogo entre o utilizador e o seu código.
Existem dois tipos de extensões de mensagens do Teams:
- Comandos de pesquisa: pode procurar sistemas externos e inserir os resultados numa mensagem sob a forma de um card.
- Comandos de ação: pode apresentar aos seus utilizadores um pop-up modal para recolher ou apresentar informações. Em seguida, pode processar a respetiva interação e enviar as informações de volta para o Teams.
Vamos criar uma aplicação de extensão de mensagem com um comando de pesquisa. Primeiro, configure um novo projeto do Teams para criar a aplicação de extensão de mensagens.
Neste tutorial, irá aprender:
- Como configurar um novo projeto de extensão de mensagens com o Teams Toolkit.
- Acerca da estrutura de diretórios do seu projeto de aplicação.
Criar a área de trabalho do projeto de extensão de mensagem
Se os pré-requisitos estiverem implementados, vamos começar!
Observação
A IU Visual Studio Code apresentada pode ser diferente consoante o seu sistema operativo, versão do Toolkit, tema e ambiente.
Abra o Visual Studio Code.
Selecione o ícone Do Teams Toolkit
na barra de atividade Visual Studio Code.Selecione Criar uma Nova Aplicação.
Selecione Extensão da Mensagem.
Selecione Resultados de Pesquisa Personalizados.
Selecione Começar com um Bot.
Selecione JavaScript.
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 Selecionar Pasta.
Introduza um nome adequado para a sua aplicação. Selecione Enter.
O Teams Toolkit cria a aplicação dentro de alguns segundos.
Depois de criar a sua aplicação, o Toolkit do Teams apresenta a seguinte mensagem:
Ver uma apresentação do código fonte da aplicação de extensão de mensagem
Uma extensão de mensagem utiliza o Bot Framework para interagir com o seu serviço através de uma conversação. Depois de estruturar, veja os diretórios e ficheiros do projeto em EXPLORADOR.
| 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 |
teamsapp.yml Substitui por ações que permitem a execução local e a depuração. |
.vscode/ |
Visual Studio Code ficheiros para depuração local. |
appPackage/ |
Modelos para o manifesto de aplicação do Teams. |
infra/ |
Modelos para aprovisionar recursos do Azure. |
index.js |
Processador e express ponto de entrada da aplicação. |
Dica
Familiarize-se com bots e a extensão de mensagens fora do Teams antes de integrar a sua aplicação no Teams.
Criar e executar a sua primeira aplicação de extensão de mensagem
Depois de configurar a área de trabalho do projeto com o Teams Toolkit, está na altura de criar o seu projeto. Tem de iniciar sessão na sua conta do Microsoft 365.
Iniciar sessão na sua conta do Microsoft 365
Inicie sessão com a conta de administrador que criou ao aderir ao programa de programador do Microsoft 365.
Abra o Visual Studio Code.
Selecione o ícone Do Teams Toolkit
na barra de atividade.Selecione Iniciar sessão no Microsoft 365 com as suas credenciais. O browser predefinido é aberto para permitir que inicie sessão.
Feche o browser depois de iniciar sessão com as suas credenciais.
Regresse ao Teams Toolkit no Visual Studio Code.
A secção CONTAS da barra lateral mostra o nome da sua conta do Microsoft 365. Se o carregamento de aplicações personalizadas estiver ativado para a sua conta do Microsoft 365, o Teams Toolkit apresenta Sideloading ativado.
Agora, está pronto para criar a aplicação e executá-la localmente!
Criar e executar a sua aplicação no ambiente local
Agora pode criar e depurar a sua primeira aplicação de extensão de mensagens do Teams localmente.
Criar e executar a sua aplicação localmente
Selecione a tecla F5 no Visual Studio Code para executar a aplicação no modo de depuração.
Observação
Se o Teams Toolkit não conseguir verificar um pré-requisito específico, ser-lhe-á pedido para marcar.
Saiba o que acontece quando executa a sua aplicação localmente no depurador.
Quando seleciona F5, o Toolkit do Teams executa as seguintes funções:
Verifica 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.
Instala 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 de bot no Bot Framework e configura a aplicação.
Regista a aplicação no Portal do Programador do Teams e configura a aplicação.
Inicia a aplicação de extensão de mensagem alojada localmente.
Inicia o Teams num browser e carrega a aplicação Teams.
Quando depura a aplicação pela primeira vez, o Teams transfere as dependências e cria a aplicação. Este processo pode demorar entre 3 a 5 minutos a concluir.
O Teams é aberto numa janela do browser quando a compilação estiver concluída. Inicie sessão com a sua conta do Microsoft 365, se lhe for pedido.
É aberta uma caixa de diálogo para lhe permitir adicionar a aplicação de extensão de mensagem ao Teams. Selecione Adicionar.
O Teams carrega a aplicação de extensão de mensagem.
Como as aplicações de extensão de mensagens dependem de bots para permitir a comunicação entre o utilizador e o serviço Web, a sua aplicação é carregada para uma funcionalidade de chat de um bot.
- Se tiver criado uma aplicação de bot antes de criar a aplicação de extensão de mensagem, o Teams carrega a extensão de mensagem na aplicação de bot que criou. As mensagens de chat anteriores da aplicação de bot estão visíveis.
- Se tiver criado uma extensão de mensagem primeiro, o Teams carrega a sua aplicação no chat mais recente que está aberto no Teams.
Testar seu aplicativo
Quando a sua aplicação é carregada pela primeira vez, a aplicação de extensão de mensagem é aberta para que possa testar. Esta aplicação de exemplo permite-lhe procurar pacotes npm open source a partir do registo de software.
Como executar uma consulta de pesquisa
Introduza o nome de um pacote npm open source na caixa de pesquisa da extensão da mensagem, como cli. A extensão da mensagem apresenta uma lista dos itens correspondentes.
Selecione um dos itens da lista. A aplicação cria um Cartão Ajustável com o item na área de composição de mensagens para que possa enviá-lo numa conversa ou canal.
Selecione Enter. A aplicação de extensão de mensagem envia o Cartão Ajustável com o item no chat ou canal.
Como abrir a sua aplicação de extensão de mensagem
Testou a funcionalidade de pesquisa da aplicação de extensão de mensagem no passo anterior. Agora, saiba quais são as diferentes formas de abrir a aplicação de extensão de mensagens.
Abrir a aplicação a partir da caixa de comandos
Introduza / seguido do nome da sua aplicação de extensão de mensagem na caixa de comando.
A aplicação é aberta na caixa de comandos e pode utilizá-la para executar uma consulta.
Observação
- Utilizar / para abrir a sua aplicação de extensão de mensagem a partir da caixa de comando só funciona no novo cliente do Teams.
- Utilize @ para abrir a sua aplicação de extensão de mensagem a partir da caixa de comando no cliente clássico do Teams.
Abrir a aplicação a partir da área de composição de mensagens
Selecione os três pontos na parte inferior da área de composição de mensagens.
Selecione a sua aplicação de extensão de mensagem.
A aplicação de extensão de mensagem é carregada com as opções para executar uma pesquisa.
Abrir a aplicação a partir de aplicações personalizadas carregadas
Selecione Aplicações>Gerir as suas aplicações.
Selecione o menu pendente da sua aplicação na lista de aplicações e selecione Aplicação pessoal.
É apresentada uma caixa de diálogo a sugerir que experimente a sua aplicação. Se selecionar Obter, a caixa de diálogo desaparece. Selecione Experimentar.
É apresentada uma lista das suas aplicações de extensão de mensagens no seu chat mais recente do Teams. Selecione a sua aplicação de extensão de mensagem na lista.
Saiba como resolver problemas se a sua aplicação não for executada localmente
Para executar a sua aplicação no Teams, tem de ter uma conta de desenvolvimento do Microsoft 365 que permita o carregamento de aplicações personalizadas. Pode saber mais sobre o carregamento de aplicações personalizadas na secção Pré-requisitos.
Implementar a sua primeira aplicação teams
Vamos implementar a sua primeira aplicação de extensão de mensagens no Azure com o Teams Toolkit.
Iniciar sessão na sua conta do Azure
Inicie sessão na sua conta do Azure para aceder ao Microsoft portal do Azure e 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 extensão de mensagem.
Selecione o ícone Do Teams Toolkit
na barra de atividade.Selecione Iniciar sessão no Azure com as suas credenciais. O browser predefinido é aberto para permitir que inicie sessão.
Dica
Se tiver a extensão conta do AZURE instalada e estiver a utilizar a mesma conta, pode ignorar este passo.
Feche o browser quando lhe for pedido e regresse ao Visual Studio Code.
A secção CONTAS da barra lateral 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.
Implantar seu aplicativo no Azure.
A implementação consiste em dois passos. Em primeiro lugar, são criados os recursos da cloud necessários (também conhecidos como aprovisionamento). Em seguida, o código da sua aplicação é copiado para os recursos da cloud criados. Vai implementar a aplicação de extensão de mensagens neste tutorial.
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 nenhum código (como HTML, CSS ou JavaScript) é copiado 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 demora algum tempo a ser concluído, é separado do passo de implementação.
Selecione o ícone Do Teams Toolkit na barra de atividade Visual Studio Code.
Selecione Aprovisionar.
Selecione uma subscrição.
Selecione um grupo de recursos.
Se não tiver um grupo de recursos para selecionar, pode criar um novo grupo de recursos com os seguintes passos:
Selecione + Novo grupo de recursos.
Selecione o nome predefinido ou introduza um nome adequado para o seu grupo de recursos.
Selecione a localização do grupo de recursos.
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. Após alguns minutos, verá a seguinte mensagem:
Se quiser, pode ver os recursos aprovisionados. Para este tutorial, não precisa de ver recursos.
O recurso aprovisionado é apresentado em AMBIENTE.
Em CICLO DE VIDA, selecione Implementar.
É apresentada uma caixa de diálogo que lhe pergunta se pretende implementar recursos no ambiente de desenvolvimento. Selecione Implantar.
Tal como acontece com o aprovisionamento, a implementação demora algum tempo. Após alguns minutos, verá uma mensagem de conclusão.
Executar a aplicação implementada
Após a conclusão dos passos de aprovisionamento e implementação, aceda a Executar e Depurar (Ctrl+Shift+D ou Ver > Execução) no Teams Toolkit.
Selecione o menu pendente EXECUTAR E DEPURAR .
Selecione Iniciar Remoto no Teams (Edge).
Selecione o botão ▷ .
É aberta uma caixa de diálogo para instalar a sua aplicação implementada no Teams. Selecione Adicionar.
O Teams abre a aplicação de extensão de mensagens no chat mais recente.
Saiba o que acontece quando você implanta o seu aplicativo no Azure
Antes da implementação, a aplicação é executada 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 Aplicativo 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!
Concluiu o tutorial para criar uma aplicação de extensão de mensagem com JavaScript!
Encontrou algo assim?
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.