Criar aplicativos com o Teams Toolkit e Visual Studio Code

O Teams Toolkit para Visual Studio Code ajuda os desenvolvedores a criar e implantar aplicativos Teams com identidade integrada, acesso ao armazenamento em nuvem, dados do Microsoft Graph e outros serviços no Azure e M365 com uma abordagem de "configuração zero" para a experiência do desenvolvedor.

Você também pode usar o kit de ferramentas com Visual Studio ou como uma CLI (chamada teamsfx ).

Instale o Teams Toolkit para Visual Studio Code

  1. Abra o Visual Studio Code.
  2. Selecione o exibição Extensões (Ctrl+Shift+X / ⌘⇧-X ou Exibir > Extensões).
  3. Na caixa de pesquisa, digite Teams Toolkit.
  4. Selecione no botão de instalação verde ao lado do Teams Toolkit.

Você também pode encontrar o Teams Toolkit no Visual Studio Code Marketplace.

As ferramentas a seguir são instaladas pela extensão Visual Studio Code quando elas são necessárias. Se já estiver instalada, a versão instalada será usada em vez disso. Se estiver usando o Linux (incluindo o WSL), você deve instalar essas ferramentas antes de usar:

  • Ferramentas principais das funções do Azure

    As Ferramentas Principais de Funções do Azure são usadas para executar qualquer componente back-end localmente durante uma execução de depuração local, incluindo os auxiliares de autenticação necessários ao executar seus serviços no Azure. Ele é instalado no diretório do projeto usando o npm devDependencies .

  • .NET SDK

    O .NET SDK é usado para instalar vinculações personalizadas para implantações de aplicativos de depuração local e funções do Azure. Se você não tiver instalado o SDK .NET 3.1 ou posterior globalmente, a versão portátil será instalada.

  • ngrok

    Alguns Teams de aplicativo (bots de conversação, extensões de mensagens e webhooks de entrada) exigem conexões de entrada. Você precisa expor seu sistema de desenvolvimento para Teams através de um túnel. Um túnel não é necessário para aplicativos que incluem apenas guias. Este pacote é instalado no diretório do projeto (usando npm devDependencies ).

Use o Teams Toolkit para Visual Studio Code

Configurar um novo Teams projeto

O Teams Toolkit pode criar React aplicativos hospedados no Azure ou SPFx web parts hospedadas em seu ambiente de SharePoint M365. Para criar um novo React para ser hospedado no Azure:

  1. Abra o Visual Studio Code.

  2. Abra o Kit de ferramentas do Teams selecionando o ícone do Teams na barra lateral:

    O ícone do Teams na barra lateral do Visual Studio Code

  3. Selecione Criar Novo Projeto.

    Localização do link de Criação de Novo Projeto na barra lateral do Kit de ferramentas do Teams.

  4. Selecione Criar um novo aplicativo do Teams.

    Início do assistente para Criar Novo Projeto

  5. Na etapa Selecionar recursos, o recurso Tab já está selecionado. Você também pode, opcionalmente, selecionar Bot e Extensão de Mensagens. Pressione OK.

    Captura de tela mostrando como adicionar capacidades ao seu novo aplicativo.

  6. Na etapa Tipo de hospedagem front-end, selecione Azure.

    Captura de tela mostrando como selecionar a hospedagem para seu novo aplicativo.

  7. Opcionalmente, na etapa Recursos de nuvem, selecione recursos de nuvem que seu aplicativo usa. Você pode selecionar CRUD (criar, ler, atualizar e excluir) acesso a uma tabela SQL ou uma API:

    Captura de tela mostrando como adicionar recursos em nuvem ao seu novo aplicativo.

  8. Na etapa Linguagem de Programação, você pode escolher JavaScript ou TypeScript:

    Captura de tela mostrando como selecionar a linguagem de programação.

  9. Selecione uma pasta do espaço de trabalho. Uma pasta é criada em sua pasta de espaço de trabalho para o projeto que você está criando.

  10. Insira um nome adequado para seu aplicativo, como helloworld. O nome do aplicativo deve consistir apenas de caracteres alfanuméricos. Pressione Inserir para continuar.

Seu Teams app é criado em alguns segundos. O aplicativo scaffolded contém código para manipular o login único com Azure Active Directory acesso ao microsoft Graph. Se você selecionou recursos do Azure, o código para esses recursos também estará disponível.

Para ver um passo a passo do processo SPFx criação e publicação, consulte o tutorial SPFx .

Configurar seu aplicativo

No seu núcleo, o Teams aplicativo abrange três componentes:

  1. O Microsoft Teams cliente (Web, desktop ou móvel) onde os usuários interagem com seu aplicativo.

  2. Um servidor que responde a solicitações de conteúdo que é exibido em Teams. Por exemplo, conteúdo da guia HTML ou um cartão adaptável do bot.

  3. Um Teams de aplicativo consiste em três arquivos:

    • O manifesto.json.
    • Um ícone de cor para seu aplicativo ser exibido no catálogo de aplicativos público ou da organização.
    • Um ícone de contorno para exibição na barra de Teams de atividades.

O manifesto e os ícones são armazenados na pasta do seu projeto antes .fx de serem carregados para Teams. Quando um aplicativo é instalado, o cliente Teams analisado o arquivo de manifesto para determinar as informações necessárias, como o nome do seu aplicativo e a URL onde os serviços estão localizados.

  1. Para configurar seu aplicativo, navegue até a guia Teams Toolkit no Visual Studio Code.
  2. Selecione Editor de Manifesto na seção Project.

A edição dos campos na página detalhes do aplicativo atualiza o conteúdo do arquivo manifest.json que é finalmente enviado como parte do pacote de aplicativos.

Instalar e executar seu aplicativo localmente

Para compilar e executar seu aplicativo localmente:

  1. No Visual Studio Code, pressione F5 para executar seu aplicativo no modo de depuraçã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 automaticamente quando a compilação é concluída. Isto 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 quando aparecer a seguinte caixa de diálogo:

    Captura de tela mostrando como a solicitação de instalação de um certificado SSL para permitir que o Teams carregue seu aplicativo a partir do localhost.

  2. O seu navegador da web é iniciado para executar o aplicativo. Se for solicitado a abrir o Microsoft Teams, selecione Cancelar para permanecer no navegador. Você também pode ser solicitado a alternar para o aplicativo Teams outras vezes. Selecione o aplicativo Web quando isso acontecer.

    Captura de tela mostrando como escolher a versão da web das equipes quando lançadas

  3. Você pode ser solicitado a entrar. Em caso afirmativo, entre com sua conta M365.

  4. Quando solicitado a instalar o aplicativo no Teams, pressione Adicionar.

Tanto o back-end quanto o front-end são conectados ao Visual Studio Code depurador. Isso permite definir pontos de interrupção em qualquer lugar em seu código e inspecionar o estado. Você também pode usar qualquer ferramenta de depuração de front-end (como o React Ferramentas de Desenvolvedor) no navegador. Para obter mais informações sobre a depuração Visual Studio Code, revise a documentação.

Publicar seu aplicativo no Teams

Antes que ele possa ser usado por outras pessoas, você deve publicar seu aplicativo no Portal do Desenvolvedor para Teams.

  1. Para publicar seu aplicativo, navegue até a guia Teams Toolkit no Visual Studio Code.
  2. Selecione Publicar no Teams na seção Project.

Se estiver usando a hospedagem do Azure, você deverá ter provisionado e implantado na nuvem. Para ver um passo a passo do processo SPFx publicação, consulte o tutorial SPFx .

Próxima etapa

Confira também