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.
Seu aplicativo terá uma funcionalidade, que vem com sua própria interface do usuário e UX:
Observação
Neste tutorial, você pode criar um aplicativo de guia com 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.
Pré-requisitos
Aqui está uma lista de ferramentas necessárias 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 1.55 ou posterior. | |
| 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 | O Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chats, reuniões, chamadas - tudo 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 loja do Teams. |
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 Kit de Ferramentas do Microsoft 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 a exibição 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 para sua organização no Teams, onde você conversa, compartilha arquivos e executa reuniões. Esse espaço também é onde seu sideload e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.
Verificar a opção sideload
Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Esse processo é 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. Se ele não estiver habilitado, você não poderá 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!
Verifique se você pode carregar aplicativos de sideload no Teams:
No cliente do Teams, selecione o ícone Store .
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
Se você não tiver a opção de carregar um aplicativo personalizado, converse 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, 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ê deseja 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 e configurou sua conta. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar! Selecione o aplicativo que você deseja fazer 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. 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 Criar um novo aplicativo do Teams para criar um aplicativo usando o Teams Toolkit.
Verifique se Tab está selecionado como a funcionalidade que você deseja criar em seu aplicativo. Clique em OK.
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. Selecione Enter.
O aplicativo de guia Teams é criado em alguns 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 na área Explorer de 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 |
|---|---|
.fx/configs |
Arquivos de configuração que o usuário pode personalizar para o aplicativo teams. |
- .fx/configs/config.<envName>.json |
Arquivo de configuração para cada ambiente. |
- .fx/configs/azure.parameters.<envName>.json |
Arquivo de parâmetros para provisionamento do Azure BICEP para cada ambiente. |
- .fx/configs/projectSettings.json |
Configurações de projeto globais que se aplicam a todos os ambientes. |
- .fx/states |
Saída de provisionamento gerada pelo Teams Toolkit. O kit de ferramentas cria essa pasta depois que você provisiona recursos para seu aplicativo. |
- .fx/states/state.<envName>.json |
Provisionar arquivo de saída para cada ambiente. |
- .fx/states/<env>.userdata |
Dados confidenciais do usuário para a saída de provisionamento para cada ambiente. |
tabs |
Código para a funcionalidade Tab necessária no runtime, como o aviso de privacidade, os termos de uso e as guias de configuração. |
- tabs/src/index.jsx |
Ponto de entrada para o aplicativo front-end, em que o componente main App é renderizado comReactDOM.render() |
- tabs/src/components/App.jsx |
Código para lidar com o roteamento de URL no aplicativo. Ele chama a biblioteca de clientes JavaScript do Microsoft Teams para estabelecer a comunicação entre seu aplicativo e o Teams. |
- tabs/src/components/Tab.jsx |
Código para implementar a interface do usuário do aplicativo. |
- tabs/src/components/TabConfig.jsx |
Código para implementar a interface do usuário que configura seu aplicativo. |
templates/appPackage |
Arquivos de modelo de manifesto de aplicativo e os ícones do aplicativo: color.png e outline.png. |
- templates/appPackage/manifest.template.json |
Manifesto do aplicativo para executar o aplicativo em ambiente local ou remoto. |
templates/azure |
Arquivos de modelo BICEP |
Quando você adiciona a funcionalidade de nuvem, o Teams Toolkit adiciona as pastas necessárias ao projeto. A api pasta mantém o código em qualquer Azure Functions você grava.
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.
Seu navegador da Web padrão é aberto para permitir que você entre na conta.
Entre em sua conta do Microsoft 365 usando suas credenciais.
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. O Teams Toolkit exibe o Sideloading habilitado se o sideload estiver habilitado para sua conta do Microsoft 365.
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 sideload 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-lo.
- Instale pacotes NPM.
- Registra o aplicativo com Azure AD 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 a sideload do aplicativo no Teams em seu computador local.
Parabéns, seu primeiro aplicativo está em execução no Teams!
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 sideload em sua conta do Teams. Você pode saber mais sobre sideload 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.
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.
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ê. Verifique se você tem pelo menos uma assinatura utilizável do Azure disponível. Caso contrário, saia e use uma conta diferente.
Agora você está pronto para implantar seu aplicativo no Azure!
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 front-end do aplicativo será implantado em uma conta de Armazenamento do Microsoft Azure configurada para hospedagem 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. Para começar, tente adicionar recursos aos seus aplicativos existentes.
Para adicionar recursos ao aplicativo existente:
Selecione Adicionar recursos na seção Desenvolvimento da barra lateral do Teams Toolkit.
Selecione o recurso que você deseja adicionar ao seu aplicativo.
Isso é tudo. O Teams Toolkit adiciona o scaffolding para o novo recurso à estrutura de diretório do seu aplicativo. Siga os procedimentos para criar e implantar o aplicativo, e seu aplicativo terá 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