Criar seu aplicativo de guia básico

As guias são páginas da Web compatíveis com o Teams inseridas no Microsoft Teams e uma boa maneira de começar a desenvolver para o Teams. Você pode adicioná-las como parte de um canal dentro de uma equipe, chat em grupo ou aplicativo pessoal para um usuário individual.

A captura de tela mostra o aplicativo da guia conceitual no cliente do Teams.

Neste tutorial, você aprenderá a:

Este guia passo a passo ajuda você a criar uma guia com o Kit de Ferramentas de Agentes. Você verá a seguinte saída depois de concluir este guia:

A captura de tela mostra o aplicativo concluído

Pré-requisitos

Certifique-se de instalar as ferramentas a seguir 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.
  Microsoft 365 Agents Toolkit Extensão do Microsoft Visual Studio Code 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 Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas, tudo em um só lugar.
  Microsoft Edge (recomendado) ou Google Chrome Um navegador com ferramentas de desenvolvedor.
Opcional    
  Ferramentas do Azure para o Visual Studio Code e a CLI do Azure Ferramentas do Azure para acessar dados armazenados ou implantar um back-end baseado em nuvem para seu aplicativo do Teams no Azure.
  Ferramentas de desenvolvedor do React para Chrome OU Ferramentas de desenvolvedor do React para Microsoft Edge Uma extensão do DevTools do navegador para a biblioteca JavaScript do React de código aberto.
  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 publicar seu aplicativo Teams, incluindo em sua organização ou na Microsoft Teams Store.

Dica

Se você trabalha com dados do Microsoft Graph, deve conhecer e marcar o Microsoft Graph Explorer. 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 de Agentes do Microsoft 365

O Microsoft 365 Agents Toolkit (anteriormente conhecido como 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 Agents Toolkit com o Visual Studio Code ou uma interface de linha de comando chamada CLI do Microsoft 365 Agents Toolkit (anteriormente conhecida como CLI do TeamsFx).

  1. Abra o Visual Studio Code e selecione Extensões (Ctrl+Shift+X ou Exibir>Extensões).

  2. Na caixa de pesquisa, insira Kit de Ferramentas para Agentes do Microsoft 365.

  3. Selecione Instalar.

    A captura de tela mostra a instalação da extensão Kit de Ferramentas de Agentes.

    O ícone do Microsoft 365 Agents Toolkit aparece na barra de atividades do Visual Studio Code.

Você também pode instalar o Agents Toolkit do 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 realiza reuniões. Este espaço também é onde você carrega e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.

Verificar se há opção de carregar um aplicativo

Depois de criar seu aplicativo personalizado, você deve carregar seu aplicativo no Teams com a opção Carregar um aplicativo personalizado . Entre em sua conta do Microsoft 365 para marcar se esta opção está habilitada.

As etapas a seguir ajudam a verificar se você pode carregar aplicativos no Teams:

  1. No cliente do Teams, selecione o ícone Aplicativos .

  2. Selecione Gerenciar seus aplicativos.

  3. Selecione Carregar um aplicativo.

  4. Procure a opção para carregar um aplicativo personalizado. Se a opção estiver visível, você poderá carregar aplicativos personalizados.

    A captura de tela mostra a opção de carregar um aplicativo personalizado no Teams.

    Observação

    Se você não encontrar a opção para carregar um aplicativo personalizado, entre em contato com o administrador do Teams.

Criar um locatário de desenvolvedor do Teams gratuito (opcional)

Se você não tiver uma conta de desenvolvedor do Teams, ingresse no programa de desenvolvedor do Microsoft 365.

  1. Acesse o Programa para desenvolvedores do Microsoft 365.

  2. Selecione Ingressar Agora e siga as instruções na tela.

  3. Na tela de boas-vindas, selecione Configurar assinatura E5.

  4. Configurar a conta de administrador. Depois de concluir, a seguinte tela será exibida:

    A captura de tela mostra o Programa para Desenvolvedores do Microsoft 365.

  5. 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.

Tive um problema

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 espaço de trabalho de projeto para seu aplicativo de guia

Inicie o desenvolvimento de aplicativos Microsoft Teams criando seu primeiro aplicativo. Este aplicativo usa o recurso de guia.

O diagrama mostra que este aplicativo tem três recursos. A guia está realçada.

Criar seu espaço de trabalho de projeto de guia

Se os pré-requisitos estiverem prontos, vamos começar!

Observação

A interface do usuário do Visual Studio Code mostrada é do Mac. A versão e o ambiente do Agents Toolkit podem ser diferentes com base no seu sistema operacional.

  1. Abra o Visual Studio Code.

  2. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades do Visual Studio Code.

  3. Selecione Criar um novo agente/aplicativo>do aplicativo do Teams.

    As capturas de tela mostram o local do link Criar Novo Projeto na barra lateral do Kit de Ferramentas do Teams.

  4. Selecionar Outros Recursos do Teams

    A captura de tela mostra os Recursos de Outras Equipes para selecionar.

  5. Neste exemplo, selecione Tab como funcionalidade do aplicativo.

    A captura de tela mostra a capacidade do aplicativo a ser selecionada.

  6. Selecione a pasta padrão para armazenar a pasta raiz do projeto no local padrão.

    A captura de tela mostra como selecionar o local padrão.

Siga as etapas para alterar o local padrão:

  1. Selecione Procurar.

    A captura de tela mostra para selecionar procurar armazenamento.

  2. Selecione o local para o espaço de trabalho do projeto.

  3. Selecione a pasta Selecionar.

    A captura de tela mostra como selecionar a pasta.

  4. Insira um nome adequado para seu aplicativo e selecione Enter.

    A captura de tela mostra onde inserir o nome do aplicativo.

O aplicativo da guia Teams é criado em poucos segundos.

A captura de tela mostra o aplicativo criado.

Depois que seu aplicativo é criado, o Agents Toolkit exibe a seguinte mensagem:

A captura de tela é exibida para visualizar o projeto.

Você pode selecionar Depuração local para visualizar seu projeto.

Uma rápida recapitulação da criação de um aplicativo do Teams. Assista a esta breve recapitulação da criação de um aplicativo do Teams.

Criar um aplicativo do Teams

Tive um problema

Faça um tour pelo código-fonte do aplicativo de guia

O Agents 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.

A captura de tela mostra a guia estrutura.

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 uma estrutura com componentes do React.

Entre outros itens nessa estrutura de diretórios, o Toolkit mantém:

Pasta Conteúdos
.vscode Arquivos VSCode para depuração
appPackage Modelos para o manifesto do aplicativo
env Arquivos de ambiente
infra Modelos para provisionamento de recursos do Azure
src O código-fonte do aplicativo

Os arquivos a seguir podem ser personalizados e demonstrar um exemplo de implementação para você começar.

Arquivo Conteúdos
index.html arquivo HTML.
src/Tab/App.css CSS do aplicativo.
src/Tab/App.tsx Arquivo de origem da guia. Ele chama teamsjs o SDK para obter o contexto em qual aplicativo do Microsoft 365 seu aplicativo está sendo executado.
src/index.ts Iniciando o aplicativo usando o SDK do Microsoft Teams.
vite.config.js Configuração para a ferramenta de construção Vite.
nodemon.json Configuração para Nodemon observar e reiniciar o servidor.

A seguir estão os arquivos de projeto específicos do Kit de Ferramentas de Agentes do Microsoft 365. Você pode visitar um guia completo no Github para entender como o Microsoft 365 Agents Toolkit funciona.

Arquivo Conteúdos
m365agents.yml Este é o arquivo principal do projeto do Kit de Ferramentas de Agentes do Microsoft 365. O arquivo de projeto define duas coisas principais: Propriedades e configuração Definições de estágio.
m365agents.local.yml Isso substitui m365agents.yml por ações que permitem a execução e a depuração locais.

Compilar e executar seu primeiro aplicativo de guia

Depois de configurar o espaço de trabalho do projeto com o Kit de Ferramentas de Agentes, crie seu projeto de guia. Você precisa entrar em sua conta do Microsoft 365.

Entrar na 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.

  1. Abra o Visual Studio Code.
  2. Selecione o ícone do Kit de Ferramentas para Agentes do Microsoft 365 na barra lateral.
  3. Selecione Entrar no M365 usando suas credenciais. Seu navegador padrão da Web será aberto para permitir que você entre na conta.
  4. Feche o navegador quando solicitado e retorne ao Visual Studio Code.
  5. Retorne ao Kit de Ferramentas de Agentes no Visual Studio Code.

A seção CONTAS da barra lateral mostra o nome da sua conta do Microsoft 365. Se o upload de aplicativo personalizado estiver habilitado para sua conta do Microsoft 365, o Agents Toolkit exibirá Upload de aplicativo personalizado habilitado.

Captura de tela mostrando onde entrar no Microsoft 365 e no Azure.

Agora você está pronto para compilar o aplicativo e executá-lo no ambiente local!

Tive um problema

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 você esteja se perguntando, ao pressionar a tecla F5 , Agents Toolkit:

  1. 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.
  • Com suporte Node.js versão estiver instalada.
  • O certificado de desenvolvimento para localhost está instalado.
  • A porta está disponível para o aplicativo de guia.

Observação

Se o Agents Toolkit não conseguir marcar um pré-requisito específico, ele solicitará que você marque.

  1. Instala pacotes NPM.
  2. Registra o aplicativo no Microsoft Entra ID e configura o aplicativo.
  3. Registra o aplicativo no Portal do Desenvolvedor do Teams e configura o aplicativo.
  4. Inicia o aplicativo de guia.
  5. Inicia o Teams em um navegador da Web e carrega o aplicativo de guia.

Captura de tela mostrando quando a tecla F5 é pressionada.

Observação

Quando você executa o aplicativo pela primeira vez, todas as dependências são baixadas e o aplicativo é compilado. Uma janela do navegador é aberta quando a compilação é concluída. Esse processo pode levar de 3 a 5 minutos para ser concluído.

O kit de ferramentas solicita a instalação de 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:

Captura de tela que mostra o aviso da Microsoft.

Ou selecione Continuar, dependendo do sistema operacional:

Captura de tela mostrando o prompt para instalar um certificado SSL para permitir que o Teams carregue seu aplicativo do localhost no Mac.

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.

  1. Entre com sua conta do Microsoft 365, se solicitado.
  2. Selecione Adicionar quando solicitado a carregar o aplicativo personalizado no Teams em seu computador local.

A captura de tela mostra para adicionar o aplicativo ao Teams.

  1. Parabéns, seu primeiro aplicativo está em execução no Teams!

A captura de tela mostra o aplicativo concluído

Observação

Se quiser estender seu aplicativo para o Outlook e o Microsoft 365, você poderá optar por depurar seu aplicativo com o Outlook e o Microsoft 365 no menu suspenso EXECUTAR E DEPURAR no 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 da web. O aplicativo dá suporte à recarga dinâmica. Se você alterar qualquer arquivo dentro do projeto, a página será recarregada.

Tive um problema

Saiba como solucionar problemas se o aplicativo não for executado localmente.

Para executar seu aplicativo no Teams com êxito, certifique-se de ter habilitado o upload de aplicativo personalizado em sua conta do Teams. Você pode saber mais sobre o upload de aplicativo personalizado na seção de pré-requisitos.

Implantar seu primeiro aplicativo do Teams

Você aprendeu a criar, criar e executar o aplicativo Teams com o aplicativo Guia. A etapa final é implantar seu aplicativo no Azure.

Vamos implantar o primeiro aplicativo com o recurso Guia no Azure usando o Kit de Ferramentas de Agentes.

Entrar na sua conta do Azure

Use essa conta para acessar o portal do Azure Microsoft e provisionar novos recursos de nuvem para dar suporte ao seu aplicativo.

  1. Abra o Visual Studio Code.
  2. Abra a pasta do projeto na qual você criou o aplicativo de guia.
  3. Selecione o ícone do Kit de Ferramentas para Agentes do Microsoft 365 na barra lateral.
  4. Selecione Entrar no Azure usando suas credenciais.

Dica

Se você tiver a extensão 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.

Seu navegador padrão da Web será aberto para permitir que você entre na conta.

  1. Feche o navegador quando solicitado e retorne ao Visual Studio Code.

A seção CONTAS da barra lateral mostra as duas contas separadamente. Ele também lista o número de assinaturas do Azure utilizáveis disponíveis para você. Certifique-se de ter pelo menos uma assinatura do Azure utilizável disponível. Caso contrário, saia e use outra conta.

Parabéns, você criou um aplicativo do Teams! Agora vamos aprender como implantar um dos aplicativos no Azure usando o Kit de Ferramentas de Agentes.

Tive um problema

Implantar seu aplicativo no Azure.

A implantação consiste em duas etapas. Primeiro, os recursos de nuvem necessários são criados (também conhecido como provisionamento). Em seguida, o código do aplicativo é copiado para os recursos de nuvem criados. Para este tutorial, implantará o aplicativo de 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 seu aplicativo para os recursos que você criou 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 Microsoft 365 Agents Toolkit na barra lateral do Visual Studio Code.

  1. Selecione Provisionar.

    A captura de tela mostra os comandos de provisionamento.

  2. Selecione qualquer pessoa da assinatura existente.

    A captura de tela mostra a seleção da Assinatura existente.

  3. Selecione um grupo de recursos a ser usado para os recursos do Azure.

    A captura de tela mostra recursos para provisionamento.

    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.

  4. Selecione Provisionar.

    A captura de tela mostra o provisionamento da caixa de diálogo.

    O processo de provisionamento cria recursos na nuvem do Azure. Pode levar algum tempo. Você pode monitorar o progresso assistindo às caixas de diálogo no canto inferior direito. Após alguns minutos, você verá o seguinte aviso:

    A captura de tela mostra o recurso provisionado com êxito na nuvem.

    Se desejar, você pode exibir os recursos provisionados. Para este tutorial, você não precisa exibir recursos.

    O recurso provisionado aparece na seção AMBIENTE .

    A captura de tela mostra o recurso provisionado.

  5. Selecione Implantar no painel LIFECYCLE após a conclusão do provisionamento.

    A captura de tela mostra a implantação do aplicativo na nuvem.

    Assim como no provisionamento, a implantação leva algum tempo. Você pode monitorar o processo assistindo às caixas de diálogo no canto inferior direito. Depois de 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.

Observação

Seu aplicativo está hospedado usando recursos do Azure.

Executar o aplicativo implantado

Quando as etapas de provisionamento e implantação forem concluídas:

  1. Abra o painel de depuração (Ctrl+Shift+D / ⌘⇧-D ou Exibir > Execução) no Visual Studio Code.

  2. Selecione Iniciar remoto (Edge) na lista suspensa Configuração de inicialização.

  3. Selecione Iniciar depuração (F5) para iniciar seu aplicativo do Azure.

    A captura de tela mostra como iniciar o aplicativo remotamente.

  4. Selecione Adicionar quando solicitado a carregar o aplicativo no Teams.

    A captura de tela mostra um aplicativo sendo instalado.

    Parabéns, seu primeiro aplicativo de guia está em execução no seu ambiente do Azure!

    A captura de tela mostra a mensagem para experimentar o aplicativo agora ou mais tarde.

Tive um problema

Saiba o que acontece quando você implanta 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 aplicativo de front-end é implantado em uma conta de Armazenamento do Azure configurada para hospedagem na Web estática.

Parabéns

Você conseguiu!

Você criou um aplicativo de guia.

Agora que você aprendeu a criar um aplicativo básico, pode passar para a criação de aplicativos mais complexos. Siga os procedimentos para criar e implantar o aplicativo e seu aplicativo tem vários recursos.

Você concluiu o tutorial para construir o aplicativo de guia com JavaScript.

  • Last updated on