Crie seu primeiro aplicativo de guia usando JavaScript
Inicie o desenvolvimento de aplicativos do Microsoft Teams com seu primeiro aplicativo do Teams. Você pode criar um aplicativo de guia com o Teams usando Javascript.
Neste tutorial, você aprenderá:
- Como configurar um novo projeto com o Teams Toolkit.
- Como criar um aplicativo de guias.
- A estrutura do aplicativo:
- A parte da guia com JavaScript usando React.
- O restante dos recursos com Node.js.
- Como implantar seu aplicativo.
Este guia passo a passo ajuda você a criar guia com o Teams Toolkit. Você verá a seguinte saída depois de concluir este guia:
Pré-requisitos
Verifique se você instala as seguintes ferramentas para criar e implantar seus aplicativos.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Visual Studio Code | Ambientes de compilação JavaScript, TypeScript ou Estrutura do SharePoint (SPFx). Use a versão mais recente. | |
| Kit de ferramentas do Teams | A Microsoft Visual Studio Code extensão 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 | 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. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| 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, você configurará 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 CLI (interface de linha de comando) (TeamsFx).
Abra Visual Studio Code e selecione Extensões (Ctrl+Shift+X / ⌘⇧-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 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 o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Esse processo é conhecido como carregamento de aplicativo. Entre em sua conta do Microsoft 365 para exibir essa opção.
Observação
Verifique se você habilita o carregamento de aplicativos para visualizar e testar aplicativos no ambiente local do Teams.
O upload personalizado do aplicativo está habilitado por meio de um locatário e o administrador deve dar acesso ao carregamento de um aplicativo personalizado. Você já tem um locatário e um acesso de administrador? Vamos marcar se você realmente fizer isso!
Verifique 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ê habilita o carregamento de aplicativo personalizado.
Observação
Entre em contato com o administrador do Teams, se você não encontrar 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.
Na tela de boas-vindas, selecione Configurar assinatura do E5.
Configurar a conta de administrador. Depois de concluir, a tela a seguir 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 de guia
Inicie o desenvolvimento de aplicativos do Microsoft Teams criando seu primeiro aplicativo. Este aplicativo usa o recurso de guia.
Nesta página, você aprenderá:
- Como configurar um novo projeto de guia com o Teams Toolkit
- Sobre a estrutura de diretório do seu aplicativo
Criar seu workspace de projeto de guia
Se os pré-requisitos estiverem em vigor, vamos começar!
Observação
A interface do usuário Visual Studio Code mostrada é do Mac. A versão e o ambiente do Teams Toolkit podem ser diferentes com base no sistema operacional.
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 Guia para criar um projeto de guia.
Verifique se a Guia Básica está selecionada 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.
Siga as etapas para alterar o local padrão:
Selecione Procurar.
Selecione o local para o workspace do projeto.
Selecione a pasta Selecionar.
Insira um nome adequado para seu aplicativo e selecione Inserir.
O aplicativo de guia Teams é criado em poucos segundos.
Depois que seu aplicativo é criado, o Teams Toolkit exibe a seguinte mensagem:
Você pode selecionar 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 de guia
O Teams Toolkit fornece todos os componentes para a criação de um aplicativo. Depois de criar o projeto, você pode exibir as pastas e arquivos do projeto no Explorer no Visual Studio Code.
Embora você seja livre para escolher qualquer estrutura de interface do usuário (ou não usar nenhuma), este código de modelo de exemplo fornece um scaffolding com React componentes.
Entre outros itens nessa estrutura de diretório, o Kit de Ferramentas mantém:
| Nome da pasta | Conteúdos |
|---|---|
.vscode |
Arquivos VSCode para depuração. |
appPackage |
Modelos para o manifesto do aplicativo teams. |
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. |
infra |
Modelos para provisionar recursos do Azure. |
src/ |
O código-fonte do aplicativo teams de notificação. |
src/app.js |
Ponto de entrada do aplicativo e restify manipuladores para o site. |
src/views/hello.html |
Um modelo HTML que está associado ao ponto de extremidade da guia. |
src/static |
Os ativos estáticos, como arquivos CSS e JavaScript que podem ser atendidos pelo servidor Web. |
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. |
Compilar e executar seu primeiro aplicativo de guia
Depois de configurar o workspace do projeto com o Teams Toolkit, crie seu projeto de guia. Você precisa entrar na sua conta do Microsoft 365.
Entre em sua conta do Microsoft 365
Use sua conta do Microsoft 365 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.
A seção ACCOUNTS da barra lateral mostra o nome da conta do Microsoft 365. Se o upload de aplicativo personalizado estiver habilitado para sua conta do Microsoft 365, o Teams Toolkit exibirá Sideloading habilitado.
Agora você está pronto para criar o aplicativo e executá-lo no ambiente local!
Compilar e executar seu aplicativo localmente em Visual Studio Code
Para compilar e executar seu aplicativo localmente:
Em Visual Studio Code, selecione F5 para executar o aplicativo no modo de depuração.
Saiba o que acontece quando você executa seu aplicativo localmente no depurador.
Caso esteja se perguntando, ao pressionar a tecla F5 , o Teams Toolkit:
- Verifica 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.
- O certificado de desenvolvimento para localhost está instalado.
- A porta está disponível para o aplicativo de guias.
Observação
Se o Teams Toolkit não conseguir marcar um pré-requisito específico, ele solicitará que você marcar.
- Instale pacotes NPM.
- Registra o aplicativo com Microsoft Entra ID e configura o aplicativo.
- Registra o aplicativo no Portal do Desenvolvedor do Teams e configura o aplicativo.
- Inicia o aplicativo de guias.
- Inicia o Teams em um navegador da Web e carrega o aplicativo de guias.
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 quando o build é concluído. Esse processo pode levar de 3 a 5 minutos para ser concluído.
O kit de ferramentas solicita que você instale um certificado local, se necessário. Esse certificado permite que o Teams carregue seu aplicativo a partir de
https://localhost.Selecione Sim se a caixa de diálogo a seguir for exibida:
Ou selecione Continuar, dependendo do sistema operacional:
O cliente Web do Teams é aberto em uma janela do navegador.
Observação
Se o kit de ferramentas não solicitar a instalação de um certificado, você deverá instalar o certificado manualmente. Para obter mais informações, consulte Adicionar certificado manual.
Entre com sua conta do Microsoft 365, se solicitado.
Selecione Adicionar quando solicitado para carregar o aplicativo personalizado no Teams em seu computador local.
Parabéns, seu primeiro aplicativo está em execução no Teams!
Observação
Se você quiser estender seu aplicativo para o Outlook e o Microsoft 365, você pode optar por depurar seu aplicativo com o Outlook e o Microsoft 365 na lista suspensa EXECUTAR E DEPURAR em Visual Studio Code.
Você pode adicionar o recurso SSO para recuperar os detalhes do usuário. Você pode fazer atividades normais de depuração, como definir pontos de interrupção, como se fosse qualquer outro aplicativo Web. O aplicativo dá suporte à recarga dinâmica. Se você alterar qualquer arquivo dentro do projeto, a página será recarregada.
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.
Implantar seu primeiro aplicativo do Teams
Você aprendeu a criar, compilar e executar o aplicativo Teams com o aplicativo Tab. A etapa final é implantar seu aplicativo no Azure.
Vamos implantar o primeiro aplicativo com o recurso Tab 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 de guias.
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, os recursos de nuvem necessários são criados (também conhecidos como provisionamento). Em seguida, o código do aplicativo é copiado para os recursos de nuvem criados. Para este tutorial, você implantará o aplicativo de guias.
Qual é a diferença entre Provisionar e Implantar?
A etapa Provisionar cria recursos no Azure e no Microsoft 365 para seu aplicativo, mas nenhum código (HTML, CSS, JavaScript etc.) é copiado 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 qualquer um da assinatura existente.
Selecione um grupo de recursos a ser usado para os recursos do Azure.
Observação
Seu aplicativo está hospedado usando recursos do Azure.
Para obter mais informações, consulte Criar grupo de recursos.
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.
Observação
Seu aplicativo está hospedado usando recursos do 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 o F5 (Iniciar depuração) para iniciar seu aplicativo no Azure.
Selecione Adicionar quando solicitado para carregar o aplicativo no Teams.
Parabéns, seu primeiro aplicativo de guias está em execução em seu ambiente do Azure!
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 de guias.
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 tem vários recursos.
Você concluiu o tutorial para criar o aplicativo de guias com JavaScript.
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