Crie seu primeiro aplicativo de guia usando JavaScript
Inicie o desenvolvimento de aplicativos do Microsoft Teams com seu primeiro aplicativo do Teams. Você criará um aplicativo de guia com o Teams.
Seu aplicativo terá uma funcionalidade, que vem com sua própria interface do usuário e experiência do usuário:
Observação
Neste tutorial, você criará um aplicativo guia com Javascript.
Neste tutorial, você aprenderá:
- Como configurar um novo projeto com o Kit de Ferramentas do Teams.
- Como criar um aplicativo guia.
- 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 que você precisará para criar e implantar seus aplicativos.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Kit de ferramentas do Teams | Uma extensão Visual Studio Code Microsoft que cria um scaffolding de projeto para seu aplicativo. Use a versão 4.0.0. | |
| 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. | |
| Node.js | Ambiente de runtime do JavaScript de back-end. Use a versão mais recente do v16 LTS. | |
| 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 1.55 ou posterior. | |
| Opcional | ||
| Ferramentas do Azure para Visual Studio Code 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 Developer Tools para Chrome OU React Developer Tools para Microsoft Edge | Uma extensão de DevTools do navegador para a biblioteca javaScript React software livre. | |
| Microsoft Graph Explorer | 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ê trabalha com dados do Microsoft Graph, deve aprender e marcar o Explorador do Microsoft Graph. Essa ferramenta baseada em navegador permite que você consulte 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 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 a CLI (interface de linha de comando), chamada TeamsFx.
- Abra Visual Studio Code e selecione o modo de exibição Extensões (Ctrl+Shift+X / ⌘⇧-X ou Exibir > Extensões).
- Na caixa de pesquisa, insira o Kit de Ferramentas do Teams.
- Selecione Instalar ao lado do Kit de Ferramentas do Teams.
O ícone do Kit de Ferramentas do Teams aparece Visual Studio Code barra lateral após sua instalação.
Você também pode encontrar o Kit de Ferramentas do Teams no Visual Studio Code Marketplace.
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 teste seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.
Verificar a opção de 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 de administrador? Vamos verificar se você realmente faz!
Verifique se você pode fazer sideload de aplicativos no Teams:
No cliente do Teams, selecione o ícone da Loja.
Selecione Gerenciar seus aplicativos.
Selecione Publicar um aplicativo.
Procure a opção para carregar um aplicativo personalizado. Se você vir a opção, o sideload de aplicativos estará habilitado.
Observação
Se você não tiver a opção de carregar um aplicativo personalizado, fale 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. Participe do 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 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 do projeto para seu aplicativo guia
Inicie o desenvolvimento de aplicativos do Microsoft Teams criando seu primeiro aplicativo. Esse aplicativo usa a funcionalidade de tabulação.
Nesta página, você aprenderá:
- Como configurar um novo projeto de guia com o Kit de Ferramentas do Teams
- Sobre a estrutura de diretório do seu aplicativo
Criar seu workspace de projeto de guia
Se os pré-requisitos estão em vigor, vamos começar!
Observação
A Visual Studio Code da interface do usuário mostrada é do Mac. Ele pode ser diferente dependendo do sistema operacional, da versão do Kit de Ferramentas do Teams e do ambiente.
Abra o Visual Studio Code.
Selecione o ícone do Kit de Ferramentas do Teams
na barra Visual Studio Code lateral.Selecione Criar um novo aplicativo do Teams.
Selecione Criar um novo aplicativo do Teams para criar um aplicativo usando o Kit de Ferramentas do Teams.
Verifique se Tab está selecionado como a funcionalidade que você deseja criar em seu aplicativo. Selecione OK.
Selecione JavaScript como linguagem de programação.
Selecione a pasta workspace escolhendo a pasta necessária.
Insira
helloworldcomo o nome do aplicativo. Certifique-se de usar apenas caracteres alfanuméricos. Selecione Enter.
O aplicativo de guia do Teams é criado em alguns segundos.
Depois que seu aplicativo é criado, o Kit de Ferramentas do Teams exibe a seguinte mensagem:.
Você pode selecionar a 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 guia
O Kit de Ferramentas do Teams fornece todos os componentes para a criação de um aplicativo. Depois de criar o projeto, você pode exibir as pastas e os arquivos do projeto na área explorer do Visual Studio Code.
Embora você esteja 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 BICEP do Azure para cada ambiente. |
- .fx/configs/projectSettings.json |
Configurações globais de projeto que se aplicam a todos os ambientes. |
- .fx/states |
Provisione a saída gerada pelo Kit de Ferramentas do Teams. O kit de ferramentas cria essa pasta depois que você provisiona recursos para seu aplicativo. |
- .fx/states/state.<envName>.json |
Provisione o 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 em 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 de front-end, em que o componente principal do aplicativo é renderizado com ReactDOM.render() |
- tabs/src/components/App.jsx |
Código para lidar com o roteamento de URL no aplicativo. Ele chama o Microsoft Teams JavaScript client SDK 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 seu 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 do aplicativo e os ícones do aplicativo: color.png e outline.png. |
- templates/appPackage/manifest.template.json |
Manifesto do aplicativo para executar o aplicativo no ambiente local ou remoto. |
templates/azure |
Arquivos de modelo BICEP |
Quando você adiciona a funcionalidade de nuvem, o Kit de Ferramentas do Teams adiciona as pastas necessárias ao projeto. A api pasta mantém o código em qualquer Azure Functions você escreve.
Compilar e executar seu primeiro aplicativo de guia
Depois de configurar o workspace do projeto com o Kit de Ferramentas do Teams, crie seu projeto de guia. Você precisará entrar em 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 configurada durante o registro será sua conta do Microsoft 365.
Abra o Visual Studio Code.
Selecione o ícone do Kit de Ferramentas do
Teams na barra lateral.Selecione Entrar no M365.
O 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 Kit de Ferramentas do Teams dentro Visual Studio Code.
A seção ACCOUNTS da barra lateral mostra o nome da sua conta do Microsoft 365. O Kit de Ferramentas do Teams exibirá o Sideload habilitado se o sideload estiver habilitado para sua conta do Microsoft 365.
Agora você está pronto para compilar o aplicativo e execute-o no ambiente local!
Compilar e executar seu aplicativo localmente em Visual Studio Code
Para compilar e executar seu aplicativo localmente:
No 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 Kit de Ferramentas do Teams:
- 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 Node.js com suporte está instalada.
- Os pacotes NPM para o aplicativo guia são instalados.
- O certificado de desenvolvimento para localhost está instalado.
- A porta está disponível para o aplicativo guia.
Observação
Se o Kit de Ferramentas do Teams não puder verificar um pré-requisito específico, ele solicitará que você o verifique.
- 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 guia.
- Inicia o Teams em um navegador da Web e o sideload do aplicativo guia.
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.
Entre com sua conta do Microsoft 365, se solicitado.
Selecione Adicionar quando solicitado a realizar 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 de 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 o sideload na seção Pré-requisitos.
Implantar seu primeiro aplicativo 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 a funcionalidade Tab no Azure usando o Kit de Ferramentas do Teams.
Entrar 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 do projeto na qual você criou o aplicativo guia.
Selecione o ícone do Kit de Ferramentas do
Teams na barra lateral.Selecione Entrar no Azure.
Dica
Se você tiver a extensão de Conta do Azure instalada e estiver usando a mesma conta, ignore esta etapa. Use a mesma conta que você está usando em outras extensões.
O 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 guia.
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 na Nuvem.
Selecione uma assinatura a ser usada para os recursos do Azure.
Observação
Sempre há alguns recursos do Azure usados para hospedar seu aplicativo.
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ê poderá exibir os recursos provisionados. Para este tutorial, você não precisa exibir recursos.
O recurso provisionado aparece na seção Ambiente .
Selecione Implantar na nuvem no painel Implantação 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 de 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 View > Run) Visual Studio Code.
Selecione Iniciar Remoto (Borda) na lista suspensa de configuração de inicialização.
Selecione a depuração Iniciar (F5) para iniciar seu aplicativo no Azure.
Selecione Adicionar quando solicitado a realizar sideload do aplicativo no Teams.
Parabéns, seu primeiro aplicativo guia está em execução em seu ambiente do Azure!
Saiba o que acontece quando você implanta o 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 código de back-end e front-end do aplicativo no Azure.
- O back-end, se configurado, usa vários serviços do Azure, incluindo o Serviço de Aplicativo do Azure e o 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ê já fez isso!
Você criou um aplicativo guia.
Agora que você aprendeu a criar um aplicativo básico, pode passar para a criação de aplicativos mais complexos. Para começar, tente adicionar recursos aos seus aplicativos existentes.
Para adicionar recursos ao seu aplicativo existente:
Selecione Adicionar recursos na seção Desenvolvimento da barra lateral do Kit de Ferramentas do Teams.
Selecione a funcionalidade que você deseja adicionar ao seu aplicativo.
Isso é tudo. O Kit de Ferramentas do Teams adiciona o scaffolding para a nova funcionalidade à estrutura de diretório do aplicativo. Siga os procedimentos para compilar e implantar o aplicativo, e seu aplicativo terá vários recursos.
Você concluiu o tutorial para criar um aplicativo guia com JavaScript.
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.