Criar um novo aplicativo de Teams

  • Artigo

Nesta seção, você pode aprender a criar um novo projeto do Microsoft Teams usando o Microsoft Visual Studio Code.

Criar um novo projeto do Teams usando Visual Studio Code

Você pode criar um novo projeto do Teams selecionando Criar um novo aplicativo no Microsoft Teams Toolkit. Você pode iniciar a partir de modelos de aplicativo internos do Teams ou iniciar a partir de exemplos oficiais de aplicativo do Teams no Teams Toolkit. Além disso, o Teams Toolkit dá suporte para começar com modelos de suplemento do Outlook para criar seus próprios Suplementos do Outlook.

A captura de tela mostra as opções de Funcionalidade do Aplicativo.

Para começar com os recursos do Teams, você pode criar os seguintes tipos de aplicativo do Teams:

Tipos de aplicativo Definição
Aplicativos do Teams baseados em cenário Esse grupo de modelos é projetado para cenários de negócios abstratos específicos para os quais o aplicativo teams pode servir. Por exemplo, bot de notificação, bot de comando, guia habilitada para SSO ou aplicativo de guia Painel.
Aplicativos básicos do Teams Os aplicativos básicos do Teams são apenas a guia hello world Teams, bot ou extensão de mensagem que você pode criar e personalizar com base em seus requisitos.
Estender o Aplicativo teams pelo Microsoft 365 Esse grupo de aplicativos do Teams pode ser instalado e executado no Outlook e no Office.com.

Criar um novo aplicativo de Teams

O processo para criar um novo aplicativo do Teams é semelhante para todos os tipos de aplicativos.

Para criar um aplicativo básico do Teams:

  1. Abra o Visual Studio Code.

  2. Selecione o Kit > de Ferramentas do TeamsCriar um Novo Aplicativo.

    A captura de tela mostra o botão Criar Novo Projeto na barra lateral do Teams Toolkit.

  3. Neste exemplo, selecione Tab como recurso de aplicativo.

    A captura de tela mostra o Recurso de Aplicativo a ser selecionado.

  4. Selecione Guia Básica como recurso de aplicativo.

    A captura de tela mostra a opção de selecionar o Recurso de Aplicativo usando uma Guia como Guia Básica.

  5. Selecione JavaScript como linguagem de programação.

    A captura de tela mostra a linguagem de programação a ser selecionada.

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

    A captura de tela mostra a opção de local padrão a ser selecionada.

    Saiba como alterar a pasta padrão:

    1. Selecione Procurar.

      A captura de tela mostra a opção Procurar realçada para procurar armazenamento.

    2. Selecione o local para o workspace do projeto.

      A captura de tela mostra a opção Selecionar Pasta realçada.

    A pasta selecionada é o local do workspace do projeto.

    1. Insira um nome adequado para seu aplicativo, como helloworld, como o nome do aplicativo. Verifique se você usa apenas caracteres alfanuméricos. Pressione Enter.

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

    O aplicativo de guia Teams é criado em alguns segundos.

    A captura de tela mostra o aplicativo criado.

Estrutura de diretório para diferentes tipos de aplicativo

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 seção EXPLORER .


Estrutura de diretório para o aplicativo básico do Teams

O exemplo a seguir mostra uma estrutura básica de diretório de aplicativo da guia teams:

Nome da pasta Conteúdos
.vscode Configurações do VS Code para criar e depurar seu aplicativo teams.
appPackage Arquivo de manifesto de aplicativo (anteriormente chamado de manifesto de aplicativo do Teams) e arquivos de ícone que o Teams usou para reconhecer seu aplicativo do Teams.
env Armazena diferentes parâmetros de ambiente.
infra Arquivos de modelo do Azure bicep . Usado para implantar seu aplicativo teams no Azure.
src Código-fonte para o recurso Tab, incluindo seu aplicativo front-end, componentes da interface do usuário e o aviso de privacidade, termos de uso,
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 O servidor Web pode servir ativos estáticos, como arquivos CSS e JavaScript.
teamsapp.yml Este arquivo de configuração define o comportamento do Teams Toolkit para provisionar, implantar e publicar ciclo de vida. Você pode personalizar esse arquivo para alterar o comportamento do Teams Toolkit em cada ciclo de vida.
teamsapp.local.yml Isso substitui teamsapp.yml com ações que habilitam a execução local e a depuração.

Observação

Se você tiver um aplicativo de extensão de bot ou mensagem, as pastas relevantes serão adicionadas à estrutura do diretório.

Para saber mais sobre a estrutura de diretório de diferentes tipos de aplicativos básicos do Teams, confira a seguinte tabela:

Tipo de aplicativo Links
Para aplicativo de guias Crie seu primeiro aplicativo de guia usando JavaScript
Para o aplicativo bot Crie seu primeiro aplicativo de bot usando JavaScript
Para aplicativo de extensão de mensagem Criar seu primeiro aplicativo de extensão de mensagem usando JavaScript

Estrutura de diretório para o aplicativo Teams baseado em cenário

O exemplo a seguir mostra uma estrutura de diretório de aplicativo do Teams de bot de notificação baseada em cenário:

A nova pasta de projeto contém o seguinte conteúdo:

Nome da pasta Conteúdos
.vscode Configurações do VS Code para criar e depurar seu aplicativo teams.
appPackage O arquivo de manifesto do aplicativo e os arquivos de ícone que o Teams usou para reconhecer seu aplicativo do Teams.
env Armazena diferentes parâmetros de ambiente.
infra Arquivos de modelo do Azure bicep . Usado para implantar seu aplicativo teams no Azure.
teamsapp.yml Este arquivo de configuração define o comportamento do Teams Toolkit para provisionar, implantar e publicar ciclo de vida. Você pode personalizar esse arquivo para alterar o comportamento do Teams Toolkit em cada ciclo de vida.
teamsapp.local.yml Isso substitui teamsapp.yml com ações que habilitam a execução local e a depuração.

A implementação de notificação principal é armazenada na pasta src e contém:

Nome do arquivo Conteúdos
src\adaptiveCards\ Modelos para Cartão Adaptável.
src\internal\ Código de inicialização gerado para funcionalidade de notificação.
src\index.ts O ponto de entrada para lidar com mensagens de bot e enviar notificações.
.gitignore Arquivo para excluir arquivos locais do projeto do bot.
package.json O arquivo de pacote npm para o projeto do bot.

Observação

Se você tiver um bot de comando, um bot de fluxo de trabalho, uma guia habilitada para SSO ou um aplicativo de guia SPFx, pastas relevantes serão adicionadas à estrutura do diretório.

Para saber mais sobre a estrutura de diretório de diferentes tipos de aplicativos do Teams baseados em cenário, confira a tabela a seguir:

Tipo de aplicativo Links
Para aplicativo bot de notificação Enviar notificação para o Teams
Para aplicativo bot de comando Criar bot de comando
Para o aplicativo bot de fluxo de trabalho Criar bot de fluxo de trabalho do Teams
Para aplicativo de guia SPFx Criar um aplicativo Teams com SPFx

Confira também