Partilhar via

Criar um novo aplicativo de Teams

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 um Novo Agente/Aplicação no Toolkit de Agentes do Microsoft 365 (anteriormente conhecido como Toolkit do Teams). 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 Toolkit de Agentes. Além disso, o Toolkit de Agentes 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 >de Agentes do Microsoft 365Criar um Novo Agente/Aplicação> selecione Agentes e Aplicações do Teams.

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

  3. Selecione Outras Capacidades do Teams

    Captura de ecrã a mostrar As Outras Capacidades do Teams a selecionar.

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

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

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

    Para alterar a localização predefinida, siga estes passos:

    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.

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

Detetei um problema

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

O Toolkit de Agentes fornece todos os componentes para a criação de 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 bicep Azure ficheiros de modelo. 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 express 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.
m365agents.yml Este ficheiro de configuração define o comportamento do Toolkit de Agentes para aprovisionar, implementar e publicar ciclo de vida. Pode personalizar este ficheiro para alterar o comportamento do Toolkit de Agentes em cada ciclo de vida.
m365agents.local.yml Isto substitui m365agents.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 bicep Azure ficheiros de modelo. Utilizado para implementar a sua aplicação Teams no Azure.
m365agents.yml Este ficheiro de configuração define o comportamento do Toolkit de Agentes para aprovisionar, implementar e publicar ciclo de vida. Pode personalizar este ficheiro para alterar o comportamento do Toolkit de Agentes em cada ciclo de vida.
m365agents.local.yml Isto substitui m365agents.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

Para experimentar mais guiges passo a passo na criação de aplicações, veja Tutoriais.

Confira também

  • Last updated on