Compartilhar via

Criar um novo aplicativo de Teams

  • Artigo

Nesta secção, pode aprender a criar um novo projeto do Microsoft Teams com o Microsoft Visual Studio Code.

Criar um novo projeto do Teams com o Visual Studio Code

Pode criar um novo projeto do Teams ao selecionar Criar uma Nova Aplicação no Microsoft Teams Toolkit. Pode começar a partir de modelos de aplicações do Teams incorporados ou começar a partir de exemplos de aplicações oficiais do Teams no Teams Toolkit. Além disso, o Teams Toolkit suporta começar com modelos de Suplementos do Outlook para criar os seus próprios Suplementos do Outlook.

Captura de ecrã a mostrar as opções de Capacidade da Aplicação.

Para começar com as capacidades do Teams, pode criar os seguintes tipos de aplicação teams:

Tipos de Aplicações Definição
Aplicações do Teams baseadas em cenários Este grupo de modelos foi concebido para cenários empresariais abstratos específicos para os quais a sua aplicação de equipas pode servir. Por exemplo, bot de notificação, bot de comandos, separador com SSO ativado ou aplicação de separador Dashboard.
Aplicações Básicas do Teams As aplicações básicas do Teams são apenas o separador, bot ou extensão de mensagens hello world teams que pode criar e personalizar com base nos seus requisitos.
Expandir a Aplicação Teams através do Microsoft 365 Este grupo de aplicações do Teams pode ser instalado e executado no Outlook e Office.com.

Criar um novo aplicativo de Teams

O processo de criação de uma nova aplicação do Teams é semelhante para todos os tipos de aplicações.

Para criar uma aplicação básica do Teams:

  1. Abra o Visual Studio Code.

  2. Selecione o Toolkit> do TeamsCriar uma Nova Aplicação.

    Captura de ecrã a mostrar o botão Criar Novo Projeto na barra lateral do Teams Toolkit.

  3. Neste exemplo, selecione Tabulação como capacidade de aplicação.

    Captura de ecrã a mostrar a Capacidade de Aplicação a selecionar.

  4. Selecione Separador Básico como capacidade de aplicação.

    Captura de ecrã a mostrar a opção para selecionar Funcionalidade de Aplicação utilizando um Separador como Separador Básico.

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

    Captura de ecrã a mostrar a linguagem de programação a selecionar.

  6. Selecione Pasta predefinida para armazenar a pasta raiz do projeto na localização predefinida.

    Captura de ecrã a mostrar a opção de localização predefinida a selecionar.

    Saiba como alterar a pasta predefinida:

    1. Selecione Procurar.

      Captura de ecrã a mostrar a opção Procurar realçada para procurar armazenamento.

    2. Selecione a localização da área de trabalho do projeto.

      Captura de ecrã a mostrar a opção Selecionar Pasta realçada.

    A pasta que selecionar é a localização da área de trabalho do projeto.

    1. Introduza um nome adequado para a sua aplicação, como helloworld, como o nome da aplicação. Certifique-se de que utiliza apenas carateres alfanuméricos. Pressione Enter.

    Captura de ecrã a mostrar onde introduzir o nome da aplicação.

    A aplicação de separador Teams é criada dentro de alguns segundos.

    Captura de ecrã a mostrar a aplicação criada.

Estrutura de diretórios para diferentes tipos de aplicações

O Teams Toolkit fornece todos os componentes para criar uma aplicação. Depois de criar o projeto, pode ver as pastas e os ficheiros do projeto na secção EXPLORADOR .


Estrutura de diretórios para a aplicação básica do Teams

O exemplo seguinte mostra uma estrutura básica do diretório da aplicação de separador do Teams:

Nome da pasta Conteúdos
.vscode Definições para o VS Code criar e depurar a sua aplicação Teams.
appPackage Ficheiro de manifesto de aplicação (anteriormente denominado manifesto de aplicação do Teams) e ficheiros de ícone que o Teams utilizou para reconhecer a sua aplicação teams.
env Armazena parâmetros de ambiente diferentes.
infra Ficheiros de modelo do Azure bicep . Utilizado para implementar a sua aplicação Teams no Azure.
src Código fonte para a capacidade de Tabulação, incluindo a sua aplicação de front-end, componentes da IU e o aviso de privacidade, termos de utilização,
src/app.js Processadores e restify pontos de entrada de aplicações para o site.
src/views/hello.html Um modelo HTML que está vinculado ao ponto final do separador.
src/static O servidor Web pode servir recursos estáticos, como ficheiros CSS e JavaScript.
teamsapp.yml Este ficheiro de configuração define o comportamento do Teams Toolkit para aprovisionar, implementar e publicar ciclo de vida. Pode personalizar este ficheiro para alterar o comportamento do Teams Toolkit em cada ciclo de vida.
teamsapp.local.yml Isto substitui teamsapp.yml com ações que permitem a execução local e a depuração.

Observação

Se tiver uma aplicação de extensão de bot ou mensagem, as pastas relevantes são adicionadas à estrutura do diretório.

Para saber mais sobre a estrutura de diretórios de diferentes tipos de aplicações básicas do Teams, consulte a tabela seguinte:

Tipo de Aplicação Links
Para a aplicação de separador Crie seu primeiro aplicativo de guia usando JavaScript
Para a aplicação bot Crie seu primeiro aplicativo de bot usando JavaScript
Para a aplicação de extensão de mensagem Criar seu primeiro aplicativo de extensão de mensagem usando JavaScript

Estrutura de diretórios para a aplicação Teams baseada em cenários

O exemplo seguinte mostra uma estrutura de diretório de aplicações do Teams baseada em cenários:

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

Nome da pasta Conteúdos
.vscode Definições para o VS Code criar e depurar a sua aplicação Teams.
appPackage O ficheiro de manifesto da aplicação e os ficheiros de ícone que o Teams utilizou para reconhecer a sua aplicação Teams.
env Armazena parâmetros de ambiente diferentes.
infra Ficheiros de modelo do Azure bicep . Utilizado para implementar a sua aplicação Teams no Azure.
teamsapp.yml Este ficheiro de configuração define o comportamento do Teams Toolkit para aprovisionar, implementar e publicar ciclo de vida. Pode personalizar este ficheiro para alterar o comportamento do Teams Toolkit em cada ciclo de vida.
teamsapp.local.yml Isto substitui teamsapp.yml com ações que permitem a execução local e a depuração.

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

Nome do arquivo Conteúdos
src\adaptiveCards\ Modelos para Cartão Ajustável.
src\internal\ Gerado o código de inicialização para a funcionalidade de notificação.
src\index.ts O ponto de entrada para processar mensagens de bot e enviar notificações.
.gitignore Ficheiro para excluir ficheiros locais do projeto de bot.
package.json O ficheiro de pacote npm para o projeto de bot.

Observação

Se tiver um bot de comandos, um bot de fluxo de trabalho, um separador com SSO ativado ou uma aplicação de separador SPFx, as pastas relevantes são adicionadas à estrutura do diretório.

Para saber mais sobre a estrutura de diretórios de diferentes tipos de aplicações do Teams baseadas em cenários, consulte a tabela seguinte:

Tipo de Aplicação Links
Para a aplicação de bot de notificação Enviar notificação para o Teams
Para a aplicação de bot de comandos Criar bot de comando
Para a aplicação bot de fluxo de trabalho Criar bot de fluxo de trabalho do Teams
Para a aplicação de separador SPFx Criar um aplicativo Teams com SPFx

Confira também