Partilhar via

Criar uma guia

  • Artigo

Os separadores em conversas, canais ou reuniões comportam-se mais como aplicações, uma vez que só pode afixar um separador por aplicação no painel esquerdo para facilitar o acesso.

Importante

Certifique-se de que tem todos os pré-requisitos para criar o seu separador.

Observação

Este tópico reflete a versão 2.0.x da biblioteca de cliente JavaScript do Microsoft Teams (TeamsJS). Se estiver a utilizar uma versão anterior, consulte a descrição geral da biblioteca do TeamsJS para obter orientações sobre as diferenças entre as versões mais recentes do TeamsJS e versões anteriores.

Criar um separador com Node.js

  1. No prompt de comando, instale os pacotes Yeoman e gulp-cli inserindo o seguinte comando após a instalação do Node.js:

    npm install yo gulp-cli --global

  2. Na linha de comandos, instale o gerador de aplicações do Microsoft Teams ao introduzir o seguinte comando:

    npm install generator-teams --global

Seguem-se os passos para criar um separador:

  1. Gerar a sua aplicação com um separador
  2. Adicionar uma página de conteúdo ao separador
  3. Criar um pacote do aplicativo
  4. Criar e executar o aplicativo
  5. Estabelecer um túnel seguro para sua guia
  6. Carregar seu aplicativo para o Teams

Gerar a sua aplicação com um separador

  1. Na linha de comandos, crie um novo diretório para o seu separador.

  2. Introduza o seguinte comando no seu novo diretório para iniciar o gerador de aplicações do Microsoft Teams:

    yo teams

  3. Forneça os seus valores a uma série de perguntas pedidas pelo gerador de aplicações do Microsoft Teams para atualizar o seu manifest.json ficheiro.

    Gerador do Teams

    Série de perguntas para atualizar o ficheiro de manifest.json

    • Qual é o nome da solução?

      O nome da solução é o nome do projeto. Você pode aceitar o nome sugerido selecionando Enter.

    • Onde você deseja colocar os arquivos?

      Está no diretório do projeto. Selecione Enter.

    • Título do seu projeto de aplicativo Microsoft Teams?

      O título é o nome do pacote do aplicativo e é usado no manifesto e na descrição do aplicativo. Insira um título ou selecione Enter para aceitar o nome padrão.

    • O nome (da sua empresa)? (máximo de 32 caracteres)

      O nome da sua empresa é utilizado no manifesto da aplicação. Insira um nome para a empresa ou selecioneEnter para aceitar o nome padrão.

    • Qual versão do manifesto você gostaria de usar?

      Selecione o esquema padrão.

    • Andaimes rápidos? (Y/n)

      O padrão é sim; insira n para inserir sua ID de Parceiro da Microsoft.

    • Introduza o seu ID de Parceiro da Microsoft, se tiver um? (Deixe em branco para ignorar)

      Este campo não é obrigatório e tem de ser utilizado apenas se já fizer parte do Programa de Parceiros da Microsoft Cloud, anteriormente conhecido como Microsoft Partner Network.

    • Quais recursos você deseja adicionar ao seu projeto?

      Selecione ( * ) Um separador.

    • Em qual URL você hospedará essa solução?

      Por predefinição, o gerador sugere um URL do site do Azure. Você só está testando seu aplicativo localmente, portanto, uma URL válida não é necessária.

    • Você gostaria de mostrar um indicador de carregamento quando seu aplicativo/guia carregar?

      Escolha não para incluir um indicador de carregamento quando seu aplicativo ou guia for carregado. O padrão é não, insira n.

    • Você gostaria que aplicativos pessoais fossem renderizados sem uma barra de texto de tabulação?

      Escolha não para incluir aplicativos pessoais a serem renderizados sem uma barra de cabeçalho de tabulação. O padrão é não, insira n.

    • Pretende incluir a Arquitetura de teste e os testes iniciais? (y/N)

      Escolha não para incluir uma estrutura de teste para este projeto. O padrão é não, insira n.

    • Pretende incluir o suporte do ESLint? (y/N)

      Opte por não incluir o suporte ao ESLint. O padrão é não, insira n.

    • Pretende utilizar o Azure Applications Insights para telemetria? (y/N)

      Escolha não para incluir o Azure Application Insights. O padrão é não, insira n.

    • Nome da guia padrão (máximo de 16 caracteres):Guia SSO

      Nomeie sua guia. Esse nome de guia é usado em todo o projeto como um arquivo ou componente de caminho de URL.

    • Que tipo de Guia você gostaria de criar?

      Use as teclas de direção para selecionar Pessoal (estático).

    • Precisa de Microsoft Entra suporte de Início de Sessão Único para o separador?

      Opte por não incluir Microsoft Entra suporte de Início de Sessão Único para o separador. A predefinição é sim, introduza n.

    Observação

    Num separador, a home page do separador só é apresentada quando o utilizador seleciona o botão anterior (ou sai do separador) e volta para a home page. O separador não mantém nem mantém o estado anterior por predefinição.

Adicionar uma página de conteúdo ao separador

Crie uma página de conteúdo e atualize os ficheiros existentes da aplicação de separador:

  1. Crie um novo arquivopersonal.html no Visual Studio Code com a seguinte marcação:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            <!-- Todo: add your a title here -->
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- inject:css -->
        <!-- endinject -->
    </head>
        <body>
            <h1>Personal Tab</h1>
            <p><img src="/assets/icon.png"></p>
            <p>This is your personal tab!</p>
        </body>
</html>

  2. Salve personal.html na pasta pública do aplicativo no seguinte local:

    ./src/public/<yourDefaultTabNameTab>/personal.html

  3. Abra manifest.json no seguinte local no Visual Studio Code:

     ./src/manifest/manifest.json

  4. Adicione o seguinte à matriz staticTabs (staticTabs":[]) e adicione o seguinte objeto JSON:

    {
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{PUBLIC_HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
    "scopes": ["personal"]
}

    Importante

    O componente de caminho DefaultTabNameTab é o valor que você inseriu no gerador para Nome da guia padrão mais a palavra Guia.

    Por exemplo: o DefaultTabName é MyTab depois /MyTabTab/

  5. Atualize Componente de caminho contentURLseu DefaultTabNameTab com o nome verdadeiro da guia.

  6. Salve o arquivo manifest.json atualizado.

  7. Abra Tab.ts no seu Visual Studio Code a partir do seguinte caminho para fornecer a sua página de conteúdo num iFrame:

    ./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts

  8. Adicione o seguinte à lista de decoradores de iFrame:

     @PreventIframe("/<yourDefaultTabName Tab>/personal.html")

  9. Salve o arquivo atualizado. O código da guia está concluído.

Criar um pacote do aplicativo

Você deve ter um pacote de aplicativos para compilar e executar seu aplicativo no Teams. O pacote do aplicativo é criado por meio de uma tarefa gulp que valida o arquivo manifest.json e gera a pasta zip no diretório ./package. No prompt de comando, use o comando gulp manifest:

Compilar e executar seu aplicativo

Compilar seu aplicativo

Insira o seguinte comando no prompt de comando para transcompilar sua solução para a pasta ./dist :

gulp build

Executar seu aplicativo

  1. Na linha de comandos, introduza o seguinte comando para iniciar um servidor Web local:

    gulp serve

  2. Insira http://localhost:3007/<yourDefaultAppNameTab>/ em seu navegador para exibir a página inicila do seu aplicativo.

    Guia padrão

  3. http://localhost:3007/<yourDefaultAppNameTab>/personal.htmlProcure , para ver o seu separador.

    Guia html padrão

Estabelecer um túnel seguro para sua guia

No prompt de comando, saia do localhost e insira o seguinte comando para estabelecer um túnel seguro para sua guia:

gulp ngrok-serve

Depois de o seu separador ser carregado para o Microsoft Teams através de ngrok e guardado com êxito, pode vê-lo no Teams até a sua sessão de túnel terminar.

Carregar seu aplicativo no Teams

  1. Aceda ao Teams e selecione AplicaçõesMicrosoft Teams Store .

  2. Selecione Gerir as suas aplicações>Carregar uma aplicação>Carregar uma aplicação personalizada.

  3. Vá para o diretório do projeto, navegue até a pasta ./package , selecione a pasta zip e escolha Abrir.

    Adicionar o separador

  4. Selecione Adicionar na caixa de diálogo. Sua guia é carregada no Teams.

    Guia pessoal carregada

  5. No painel esquerdo do Teams, selecione as reticências ●●● e, em seguida, selecione a aplicação carregada para ver o separador.

    O seu separador foi criado e adicionado com êxito no Teams. Também pode reordenar os seus separadores no Teams.

Criar um separador com ASP.NET Core

  1. No prompt de comando, crie um novo diretório para o projeto de guia.

  2. Clone o repositório de exemplo em seu novo diretório usando o comando a seguir ou você pode baixar o código-fonte e extrair os arquivos:

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

Seguem-se os passos para criar um separador:

  1. Gerar a sua aplicação com um separador
  2. Atualizar e execute seu aplicativo
  3. Estabelecer um túnel seguro para sua guia
  4. Atualizar o pacote do aplicativo com Portal do Desenvolvedor
  5. Pré-visualizar seu aplicativo no Teams

Gerar a sua aplicação com um separador

  1. Abra o Visual Studio e selecione Abrir um projeto ou solução.

  2. Acesse a pasta deexemplos>microsoft-teams >tab-personal>razor-csharp e abra personalTab.sln.

  3. No Visual Studio, selecione F5 ou selecione Iniciar Depuração no menu Depurar da sua aplicação para verificar se a aplicação foi carregada corretamente. Em um navegador, vá para as seguintes URLs:

    • <http://localhost:3978/>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Rever o código fonte

Startup.cs

Este projeto foi criado com base em um modelo vazio de aplicativo Web do ASP.NET Core 3.1 com a caixa de seleção Avançado: configurar para HTTPS marcada na instalação. Os serviços MVC são registrados pelo método ConfigureServices() da estrutura de injeção de dependência. Além disso, o modelo vazio não habilita o fornecimento de conteúdo estático por padrão, portanto, o middleware de arquivos estáticos é adicionado ao método Configure() usando o seguinte código:

public void ConfigureServices(IServiceCollection services)
  {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

pasta wwwroot

No ASP.NET Core, a pasta raiz da Web é onde o aplicativo procura arquivos estáticos.

Index.cshtml

ASP.NET Core trata arquivos chamados Índice como o padrão ou página inicial para o site. Quando a URL do navegador aponta para a raiz do site,index.cshtml é exibido como o página inicial para seu aplicativo.

Pasta AppManifest

Esta pasta contém os seguintes arquivos de pacote de aplicativos necessários:

  • Um ícone de cor completo medindo 192 x 192 pixels.
  • Um ícone de contorno transparente medindo 32 x 32 pixels.
  • Um arquivo manifest.json que especifica os atributos do seu aplicativo.

Esses arquivos devem ser compactados em um pacote de aplicativos para uso no carregamento de sua guia para o Teams. O Teams carrega o contentUrl especificado no seu manifesto, incorpora-o num <iframe> e compõe-o no seu separador.

.csproj

No Gerenciador de Soluções do Visual Studio, clique com o botão direito do mouse no projeto e selecione Editar arquivo de projeto. No final do arquivo, você pode ver o seguinte código que cria e atualiza sua pasta zip quando o aplicativo é compilado:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Atualizar e executar seu aplicativo

  1. Abra Gerenciador de Soluções do Visual Studio, vá para a pasta Páginas>Compartilhada, abra _Layout.cshtml e adicione o seguinte à seção <head> marcas:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

  2. No Visual Studio Gerenciador de Soluções, abra PersonalTab.cshtml na pasta Pages e adicione microsoftTeams.app.initialize() as <script> etiquetas.

  3. Selecione Salvar.

  4. No Visual Studio, selecione F5 ou escolha Iniciar Depuração no menuDepuração do aplicativo para verificar se o aplicativo foi carregado corretamente.

Estabelecer um túnel seguro para sua guia

Na linha de comandos na raiz do diretório do projeto, execute o seguinte comando para estabelecer um túnel seguro no separador:

ngrok http 3978 --host-header=localhost

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

  1. Vá para Portal do Desenvolvimento.

  2. Abra Aplicativos e selecione Importar aplicativo.

  3. O nome do ficheiro do pacote de aplicação é tab.zip e está disponível no /bin/Debug/netcoreapp3.1/tab.zip caminho.

  4. Selecione tab.zip e abra-o no Portal do Desenvolvedor.

  5. Uma ID de aplicativo padrão é criada e preenchida na seção Informações básicas.

  6. Adicione a descrição Curta e Longa para seu aplicativo em Descrições.

  7. EmInformações do desenvolvedor, adicione os detalhes necessários e, no site do (deve ser uma URL HTTPS válida), forneça sua URL HTTPS ngrok.

  8. Nos URLs da Aplicação, atualize a Política de privacidade para https://<yourngrokurl>/privacy e os Termos de utilização para https://<yourngrokurl>/tou e selecione Guardar.

  9. Em Funcionalidades da aplicação, selecione Aplicação> pessoalCriar o seu primeiro separador pessoal da aplicação, introduza o nome e atualize o URL de Conteúdo com https://<yourngrokurl>/personalTab. Deixe o campo URL do Site em branco e selecione Contexto como pessoalTab na lista pendente e selecione Confirmar.

  10. Selecione Salvar.

  11. Na seção Domínios, os domínios de suas guias devem conter sua URL ngrok sem o prefixo HTTPS <yourngrokurl>.ngrok.io.

Visualizar seu aplicativo no Teams

  1. Selecione Pré-visualização no Teams na barra de ferramentas do Portal do Programador, o Portal do Programador informa-o de que a sua aplicação personalizada foi carregada com êxito. A página Adicionar é exibida para seu aplicativo no Teams.

  2. Selecione Adicionar para carregar a guia no Teams. Sua guia agora está disponível no Teams.

    Guia padrão

    O seu separador foi criado e adicionado com êxito no Teams. Também pode reordenar o seu separador no Teams.

Criar um separador com ASP.NET Core MVC

  1. No prompt de comando, crie um novo diretório para o projeto de guia.

  2. Clone o repositório de exemplo em seu novo diretório usando o comando a seguir ou você pode baixar o código-fonte e extrair os arquivos:

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

Seguem-se os passos para criar um separador:

  1. Gerar a sua aplicação com um separador
  2. Criar e executar o aplicativo.
  3. Estabelecer um túnel seguro para sua guia
  4. Atualizar o pacote do aplicativo com Portal do Desenvolvedor
  5. Pré-visualizar seu aplicativo no Teams

Gerar a sua aplicação com um separador

  1. Abra o Visual Studio e selecione Abrir um projeto ou solução.

  2. Acesse a pasta de exemplos>microsoft-teams >tab-personal>razor-csharp e abraPersonalTabMVC.sln no Visual Studio.

  3. No Visual Studio, selecione F5 ou selecione Iniciar Depuração no menu Depurar da sua aplicação para verificar se a aplicação foi carregada corretamente. Em um navegador, vá para as seguintes URLs:

    • <http://localhost:3978>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Rever o código fonte

Startup.cs

Este projeto foi criado com base em um modelo vazio de aplicativo Web do ASP.NET Core 3.1 com a caixa de seleção Avançado: configurar para HTTPS marcada na instalação. Os serviços MVC são registrados pelo método ConfigureServices() da estrutura de injeção de dependência. Além disso, o modelo vazio não habilita o fornecimento de conteúdo estático por padrão, portanto, o middleware de arquivos estáticos é adicionado ao método Configure() usando o seguinte código:

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

pasta wwwroot

No ASP.NET Core, a pasta raiz da Web é onde o aplicativo procura arquivos estáticos.

Pasta AppManifest

Esta pasta contém os seguintes arquivos de pacote de aplicativos necessários:

  • Um ícone de cor completo medindo 192 x 192 pixels.
  • Um ícone transparente de contorno medindo 32 x 32 pixels.
  • Um arquivo manifest.json que especifica os atributos do seu aplicativo.

Esses arquivos devem ser compactados em um pacote de aplicativos para uso no carregamento de sua guia para o Teams. O Teams carrega o contentUrl especificado no seu manifesto, incorpora-o num iFrame e compõe-o no seu separador.

.csproj

No Gerenciador de Soluções do Visual Studio, clique com o botão direito do mouse no projeto e selecione Editar arquivo de projeto. No final do arquivo, você verá o seguinte código que cria e atualiza sua pasta zip quando o aplicativo é compilado:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Modelos

PersonalTab.cs apresenta um objeto de mensagem e métodos que são chamados doPersonalTabController quando um usuário seleciona um botão no modo de exibiçãoPersonalTab.

Visualizações

Essas exibições são as diferentes exibições ASP.NET Core MVC:

  • ASP.NET Core trata arquivos chamados Índice como o padrão ou página inicial para o site. Quando a URL do navegador aponta para a raiz do site,index.cshtml é exibido como o página inicial para seu aplicativo.

  • Compartilhado: a marcação de exibição parcial _Layout.cshtml contém a estrutura de página geral do aplicativo e os elementos visuais compartilhados. Ele também faz referência à Biblioteca do Teams.

Controladores

Os controladores usam a propriedade ViewBag para transferir valores dinamicamente para as Exibições.

Atualizar e executar seu aplicativo

  1. Abra Gerenciador de Soluções do Visual Studio, vá para a pasta Páginas>Compartilhada, abra _Layout.cshtml e adicione o seguinte à seção <head> marcas:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

  2. No Visual Studio Gerenciador de Soluções, abra PersonalTab.cshtml na pasta Views>PersonalTab e adicione microsoftTeams.app.initialize() dentro das <script> etiquetas.

  3. Selecione Salvar.

  4. No Visual Studio, selecione F5 ou escolha Iniciar Depuração no menuDepuração do aplicativo para verificar se o aplicativo foi carregado corretamente.

Estabelecer um túnel seguro para sua guia

Na linha de comandos na raiz do diretório do projeto, execute o seguinte comando para estabelecer um túnel seguro no separador:

ngrok http 3978 --host-header=localhost

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

  1. Vá para Portal do Desenvolvimento.

  2. Abra Aplicativos e selecione Importar aplicativo.

  3. O nome do pacote do aplicativo é tab.zip. Ele está disponível no seguinte caminho:

    /bin/Debug/netcoreapp3.1/tab.zip

  4. Selecione tab.zip e abra-o no Portal do Desenvolvedor.

  5. Uma ID de aplicativo padrão é criada e preenchida na seção Informações básicas.

  6. Adicione a descrição Curta e Longa para seu aplicativo em Descrições.

  7. Em Informações do programador, adicione os detalhes necessários e, no Site (tem de ser um URL HTTPS válido), forneça o URL HTTPS ngrok.

  8. Nos URLs da Aplicação, atualize a Política de privacidade para https://<yourngrokurl>/privacy e os Termos de utilização para https://<yourngrokurl>/tou e selecione Guardar.

  9. Em Funcionalidades da aplicação, selecione Aplicação> pessoalCriar o seu primeiro separador pessoal da aplicação, introduza o nome e atualize o URL de Conteúdo com https://<yourngrokurl>/personalTab. Deixe o campo URL do Site em branco e selecione Contexto como pessoalTab na lista pendente e selecione Confirmar.

  10. Selecione Salvar.

  11. Na seção Domínios, os domínios de suas guias devem conter sua URL ngrok sem o prefixo HTTPS <yourngrokurl>.ngrok.io.

Visualizar seu aplicativo no Teams

  1. Selecione Pré-visualização no Teams na barra de ferramentas do Portal do Programador, o Portal do Programador informa-o de que a sua aplicação personalizada foi carregada com êxito. A página Adicionar é exibida para seu aplicativo no Teams.

  2. Selecione Adicionar para carregar a guia no Teams. Sua guia agora está disponível no Teams.

    Guia pessoal

    O seu separador foi criado e adicionado com êxito no Teams. Também pode reordenar o seu separador no Teams.

O Blazor permite-lhe criar UIs Web interativas com C#, em vez de JavaScript. Pode criar uma aplicação de separador e uma aplicação de bot com o Blazor e a versão mais recente do Visual Studio.

Captura de ecrã da aplicação Blazor a apresentar o separador Bot e a saída da Extensão de Mensagem depois de o guia passo a passo do Blazor ter sido concluído com êxito.

Observação

O Teams Toolkit não suporta a capacidade de extensão de mensagens.

Eis uma lista das ferramentas necessárias para criar e implementar a sua aplicação.

  Instalar Para usar...
Required    
  Visual Studio versão 17.2.0 preview 2.1 Selecione Visual Studio Enterprise Pré-visualização 2022 (versão 17.2.0 pré-visualização 2.1).
  Microsoft Teams O Microsoft Teams para colaborar com todas as pessoas com quem trabalha através de aplicações para conversas, reuniões e chamadas num único local.
  Microsoft Edge (recomendado) ou Google Chrome Um navegador com ferramentas de desenvolvedor.

Preparar o ambiente de desenvolvimento

Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.

Instalar o Microsoft Teams Toolkit

O Toolkit do Teams ajuda a simplificar o processo de desenvolvimento com ferramentas para aprovisionar e implementar recursos na cloud para a sua aplicação, publicar na Loja Teams e muito mais. Pode utilizar o toolkit com o Visual Studio ou como uma Interface de Linha de Comandos (denominada teamsfx).

Pode utilizar a versão mais recente do Visual Studio para desenvolver aplicações do Teams com o Blazor Server no .NET.

Para instalar a extensão do Microsoft Teams Toolkit:

  1. Transfira a versão mais recente do Visual Studio.

  2. Abra vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe a partir da pasta de transferências.

  3. Selecione Continuar na página Instalador do Visual Studio para configurar a instalação.

    Captura de ecrã de Instalador do Visual Studio com opções de continuação realçadas a vermelho.

  4. Selecione ASP.NET e desenvolvimento Web em Cargas de trabalho.

  5. Selecione Ferramentas de desenvolvimento do Microsoft Teams em Detalhes de instalação.

  6. Selecione Instalar.

    Captura de ecrã a mostrar Visual Studio Enterprise Pré-visualização com a opção Asp.NET, desenvolvimento Web e ferramentas de desenvolvimento do Microsoft Teams em detalhes de instalação e instalação realçadas a vermelho.

    O Visual Studio é instalado dentro de alguns minutos.

Configurar o seu inquilino de desenvolvimento do Teams

Um inquilino é como um espaço ou um contentor para a sua organização no Teams, onde conversa, partilha ficheiros e executa reuniões. Este espaço também é onde carrega e testa a sua aplicação personalizada. Vamos verificar se está pronto para programar com o inquilino.

Ativar a opção de carregamento de aplicações personalizadas

Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Este processo é conhecido como carregamento de aplicações personalizadas. Inicie sessão na sua conta do Microsoft 365 para ver esta opção.

Já tem um inquilino e o acesso de administrador? Vamos marcar se realmente o fizer!

Verifique se pode carregar uma aplicação personalizada no Teams:

  1. No cliente do Teams, selecione Aplicações.

  2. Selecione Gerenciar seus aplicativos.

  3. Selecione Fazer o upload de um aplicativo personalizado. Se vir a opção Carregar uma aplicação personalizada , o carregamento de aplicações personalizadas está ativado.

    Captura de ecrã a mostrar a opção para carregar uma aplicação personalizada no Teams.

    Observação

    Contacte o administrador do Teams se não encontrar a opção para carregar uma aplicação personalizada.

Criar um inquilino gratuito para programadores do Teams (opcional)

Se não tiver uma conta de programador do Teams, pode obtê-la gratuitamente. Adira ao programa de programador do Microsoft 365!

  1. Acesse o Programa para desenvolvedores do Microsoft 365.

  2. Selecione Aderir Agora e siga as instruções apresentadas no ecrã.

  3. No ecrã de boas-vindas, selecione Configurar a subscrição E5.

  4. Configurar a conta de administrador. Depois de terminar, é apresentado o ecrã seguinte.

    Captura de ecrã do Programa de Programador do Microsoft 365 a apresentar as suas subscrições de programador do Microsoft 365 para a aplicação Blazor.

  5. Inicie sessão no Teams com a conta de administrador que acabou de configurar. Verifique se tem a opção Carregar uma aplicação personalizada no Teams.

Obter uma conta gratuita do Azure

Se quiser alojar a sua aplicação ou aceder a recursos no Azure, tem de ter uma subscrição do Azure. Crie uma conta gratuita antes de começar.

Agora tem todas as ferramentas e configurou as suas contas. Em seguida, vamos configurar o seu ambiente de desenvolvimento e começar a criar!

Criar uma área de trabalho de projeto para a sua aplicação de separador

Inicie o desenvolvimento de aplicações do Teams ao criar a sua primeira aplicação. Esta aplicação utiliza a capacidade de tabulação.

Captura de ecrã da aplicação Blazor a apresentar a saída final da aplicação de separador depois de o guia passo a passo do Blazor ter sido concluído com êxito.

Este tutorial explica-lhe os passos para criar, executar e implementar a sua primeira aplicação do Teams com o .NET/Blazor.

Nesta página, irá aprender:

  1. Como configurar um novo projeto de separador com o Teams Toolkit
  2. Acerca da estrutura de diretórios da sua aplicação

Criar o projeto de separador

Utilize o Teams Toolkit para criar o seu primeiro projeto de separador. O toolkit leva-o através de uma série de páginas para criar e configurar o seu projeto de aplicação do Teams:

  1. Criar uma nova página de projeto: pode selecionar o tipo de projeto.
  2. Configurar a nova página do projeto: pode introduzir os detalhes do projeto.
  3. Criar uma nova página de aplicação do Teams : pode selecionar as capacidades da aplicação Teams.

Para criar a área de trabalho do projeto de separador

  1. Abra a versão mais recente do Visual Studio.

  2. Selecione Criar um novo projeto.

    Captura de ecrã do Visual Studio com a opção Criar um novo projeto realçada a vermelho para a aplicação Blazor.

    É apresentada a página Criar um novo projeto .

  3. Selecione os detalhes do projeto.

    Selecione o tipo de projeto:

    1. Procure Microsoft Teams a partir da lista pendente de modelos.

    2. Selecione Aplicação Microsoft Teams como modelo.

    3. Selecione Avançar.

      Captura de ecrã a mostrar a opção Criar um novo projeto com a opção Seguinte realçada a vermelho para a criação da aplicação Blazor.

      É apresentada a página Configurar o novo projeto .

  4. Configure os detalhes do novo projeto.

    Selecione a seguinte configuração do projeto:

    1. Introduza um nome adequado para o seu projeto.

      Observação

      Pode ter em atenção que o nome do projeto que introduzir é preenchido automaticamente como o Nome da solução também. Se quiser, pode alterar o nome da solução sem afetar o nome do projeto.

    2. Selecione o caminho da pasta onde pretende criar a área de trabalho do projeto.

    3. Se quiser, introduza um nome de solução diferente.

    4. Selecione a opção para guardar o projeto e a solução na mesma pasta, se quiser. Para este tutorial, não precisa desta opção.

    5. Selecione Criar.

      Captura de ecrã a mostrar a opção Configurar o novo projeto com a opção Criar realçada a vermelho.

      É apresentada a página Criar uma nova aplicação do Teams .

  5. Selecione a funcionalidade da aplicação Teams.

    1. Selecione a Tecla de Tabulação como a capacidade da sua aplicação.

    2. Selecione Criar.

    Captura de ecrã a mostrar a opção Criar uma nova aplicação do Teams com as opções Tabulação e Criar realçadas a vermelho.

    A sua aplicação de separador Teams é criada em poucos segundos.

    Captura de ecrã a mostrar o Visual Studio com sugestões para começar a criar a sua aplicação.

    Uma recapitulação rápida da criação de uma aplicação de separador do Teams. Veja esta breve recapitulação para criar uma aplicação de separador do Teams.

    Representação gráfica mostra o processo de criação da aplicação de separador Teams1.

Ver uma apresentação do código fonte da aplicação de separador Teams

Após a criação do projeto, tem os componentes para criar uma aplicação de separador básica. Pode ver a estrutura do diretório do projeto no painel Gerenciador de Soluções do Visual Studio.

Captura de ecrã do Explorador de soluções a mostrar os componentes para criar uma aplicação pessoal básica.

O Teams Toolkit cria uma estrutura para o seu projeto com base nas capacidades que selecionou. Entre outros ficheiros, o Teams Toolkit mantém:

Nome da pasta Conteúdos
Ícones do aplicativo Os ícones do aplicativo são armazenados como arquivos PNG em color.png e outline.png.
manifest.json O manifesto da aplicação para publicação através do Portal do Programador do Teams é armazenado no Properties/manifest.json.
BackendController.cs É fornecido um controlador de back-end no Controllers/BackendController.cs para ajudar na autenticação.
Pages/Tab.razor O manifesto da aplicação para publicação através do Portal do Programador do Teams é armazenado no Properties/manifest.json.
TeamsFx.cs e JS/src/index.js O conteúdo é utilizado para inicializar comunicações com o anfitrião do Teams.

Pode adicionar outras funcionalidades de back-end ao adicionar outros controladores ASP.NET Core à sua aplicação.

Criar e executar a sua primeira aplicação de separador do Teams

Depois de configurar a área de trabalho do projeto com o Teams Toolkit, crie o seu projeto de separador.

Para criar e executar a sua aplicação:

  1. Selecione Project>Teams Toolkit>Preparar Dependências de Aplicações do Teams.

    Captura de ecrã a mostrar o Visual Studio com as opções Project, Teams Toolkit e Preparar Dependências de Aplicações do Teams realçadas a vermelho.

  2. Selecione a sua conta do Microsoft 365 ou Adicionar uma conta para iniciar sessão.

    Captura de ecrã da Conta do Microsoft 365 com a opção Continuar realçada a vermelho.

  3. Selecione Depurar>Iniciar Depuração ou selecione F5 para executar a sua aplicação no modo de depuração.

    Saiba o que acontece quando executa a sua aplicação localmente no depurador.

    Quando seleciona F5, Teams Toolkit:

    1. Regista a sua aplicação com Microsoft Entra ID.
    2. Regista a sua aplicação para carregamento no Teams.
    3. Inicia a execução do back-end da aplicação localmente.
    4. Inicia o front-end da aplicação alojado localmente.
    5. Inicia o Teams num browser com um comando para instruir o Teams a carregar uma aplicação personalizada (o URL está registado no manifesto da aplicação).

  4. Instale o certificado SSL autoassinado para depuração local, se solicitado.

    Captura de ecrã a mostrar o Aviso de Segurança com a opção Sim realçada a vermelho.

    O Teams é carregado num browser.

  5. Selecione Adicionar quando lhe for pedido para instalar a aplicação no Teams.

    Captura de ecrã da depuração local do BlazorApp com a opção Adicionar realçada a vermelho.

    Parabéns, a sua primeira aplicação de separador está em execução no seu ambiente local!

    Captura de ecrã a mostrar que a sua primeira aplicação de separador está em execução no seu ambiente local.

  6. Percorra a página para ver os detalhes do utilizador.

  7. Selecione Autorizar para permitir que a sua aplicação obtenha os detalhes do utilizador com o Microsoft Graph.

    A aplicação pede permissão para conceder acesso para apresentar os detalhes do utilizador.

    Captura de ecrã a mostrar a opção autorizar no separador pessoal da sua aplicação.

  8. Selecione Aceitar para permitir que a sua aplicação aceda aos detalhes do utilizador.

    Captura de ecrã das Permissões pedidas a apresentar as Informações da aplicação.

    As suas fotografias e detalhes são apresentados no seu Separador Pessoal.

    Captura de ecrã a mostrar as informações básicas apresentadas no separador pessoal da sua aplicação no Teams.

    Pode realizar atividades de depuração normais, como definir pontos de interrupção, como se fosse outra aplicação Web. O aplicativo dá suporte à recarga dinâmica. Se alterar qualquer ficheiro no projeto, a página será recarregada.

    Saiba como resolver problemas se a sua aplicação não for executada localmente.

    Para executar a sua aplicação no Teams, precisa de uma conta de desenvolvimento do Microsoft 365 que permita o carregamento de aplicações personalizadas. Pode saber mais sobre o mesmo na secção Pré-requisitos.

  9. Pare a depuração no Visual Studio.

Pré-visualizar a sua primeira aplicação de separador do Teams

Aprendeu a criar, criar e executar a aplicação Teams com capacidade de separador. Os passos finais seguintes são implementar a sua aplicação no Azure e pré-visualizar no Teams e seguir os passos:

  1. Aprovisionar a sua aplicação de separador na nuvem: pode aprovisionar a sua aplicação de separador na cloud.

  2. Implementar a sua aplicação de separador na nuvem: pode implementar a sua aplicação de separador na cloud.

  3. Pré-visualizar a sua aplicação de separador no Teams: pode pré-visualizar a sua aplicação de separador no Teams.

    Vamos implementar a primeira aplicação com capacidade de separador no Azure com o Teams Toolkit.

Para aprovisionar a sua aplicação de separador na cloud

  1. Selecione ProjectTeams ToolkitProvision (Aprovisionamento doToolkit> do Project > Teams) na Cloud.

    Captura de ecrã do Visual Studio com as opções Project, Teams Toolkit e Provision in the Cloud (Aprovisionar na Cloud) realçadas a vermelho.

  2. Introduza os detalhes da subscrição e do grupo de recursos na caixa de diálogo Aprovisionamento:

    1. Selecione o nome da subscrição na lista pendente Nome da subscrição .
    2. Selecione o grupo de recursos na lista pendente Grupo de recursos ou selecione Novo para adicionar o grupo de recursos gerado para a sua aplicação.
    3. Selecione a Região, se for criado um novo grupo de recursos.
    4. Selecione Aprovisionar.

    Captura de ecrã a mostrar Aprovisionar com Novo e Aprovisionamento realçados a vermelho.

    É apresentado um aviso de aprovisionamento.

  3. Selecione Aprovisionar.

    Captura de ecrã do Teams Toolkit com a aprovisionamento realçada a vermelho.

    O aprovisionamento no grupo de recursos na cloud demora alguns minutos.

  4. Após a conclusão do aprovisionamento, selecione OK.

    Captura de ecrã da aplicação Teams Toolkit com a opção OK realçada a vermelho.

  5. Selecione Ver Recursos Aprovisionados para ver no portal do Azure.

    Captura de ecrã do Toolkit do Teams com Ver Recursos Aprovisionados realçado a vermelho.

  6. Inicie sessão na sua conta portal do Azure no pedido de início de sessão.

    É apresentado o seu app-dev-rg.

    Captura de ecrã do Blazorapp-dev-rg a apresentar os Recursos aprovisionados no portal do Azure.

    Os seus recursos são aprovisionados no portal do Azure!

Para implementar a sua aplicação de separador na cloud

  1. Selecione Project Teams ToolkitDeploy to the Cloud (Implementar noProject>Teams Toolkit> na Cloud).

    Captura de ecrã do Visual Studio com as opções Project, Teams Toolkit e Deploy to the Cloud realçadas a vermelho.

  2. Selecione OK.

    Captura de ecrã da aplicação criada com o Teams Toolkit com a opção OK realçada a vermelho.

    A sua aplicação de separador foi implementada com êxito na cloud!

Para pré-visualizar a sua aplicação de separador no Teams

  1. SelecionePré-visualização doToolkit> do Project> Teams no Teams.

    Captura de ecrã do Visual Studio com as opções Project, Teams Toolkit e Pré-visualização no Teams realçadas a vermelho.

  2. Selecione Adicionar quando lhe for pedido para instalar a aplicação no Teams.

    Captura de ecrã do Teams a mostrar a opção Adicionar para adicionar a aplicação Blazor. A opção Adicionar realçada a vermelho.

    Parabéns, a sua primeira aplicação de separador está em execução no seu ambiente do Azure!

    Captura de ecrã a mostrar o separador pessoal da sua aplicação no Teams.

    Percorra a página para ver os detalhes do utilizador.

  3. Selecione Autorizar para permitir que a sua aplicação obtenha os detalhes do utilizador com o Microsoft Graph.

    A aplicação pede permissão para conceder acesso para apresentar os detalhes do utilizador.

    Captura de ecrã a mostrar a opção autorizar no separador pessoal da sua aplicação no Teams.

  4. Selecione Aceitar para permitir que a sua aplicação aceda aos detalhes do utilizador.

    Captura de ecrã das Permissões pedidas a apresentar as Informações da aplicação.

    As suas fotografias e detalhes são apresentados no seu Separador Pessoal.

    Captura de ecrã da sua aplicação com o separador pessoal a apresentar informações básicas.

Parabéns;

Concluiu o tutorial para criar uma aplicação de separador com o Blazor.

Reordenar separadores

A partir da versão 1.7 do manifesto, os desenvolvedores podem reorganizar todas as guias em seu aplicativo pessoal. Pode mover o separador de chat do bot , que é sempre predefinido para a primeira posição, em qualquer lugar no cabeçalho do separador da aplicação pessoal. Duas palavras-chave da guia reservada entityId são reservadas, conversas e sobre.

Se você criar um bot com um escopo pessoal, ele aparecerá na primeira posição da guia em um aplicativo pessoal por padrão. Se você quiser movê-lo para outra posição, deverá adicionar um objeto de guia estático ao manifesto com a palavra-chave reservada, conversas. A guia conversa aparece na Web ou na área de trabalho, dependendo de onde você adiciona a guia conversana matriz staticTabs.


{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

Expandir separadores estáticos para conversas de grupo, canais e reuniões

Observação

Para expandir o separador estático para conversas de grupo, canais e reuniões, utilize o manifesto da aplicação v1.16 ou posterior.

Pode expandir separadores estáticos para conversas de grupo, canais e reuniões. Em vez de conteúdos de aplicações afixadas, pode criar separadores que se comportam mais como aplicações, uma vez que pode afixar apenas um separador por aplicação, por exemplo, afixar um único separador de aplicação do YouTube.

Para expandir os separadores estáticos para conversas de grupo, canais e reuniões, atualize o manifesto da aplicação com os scopes parâmetros e context na staticTabs propriedade . Quando declara vários separadores estáticos no manifesto e adiciona a aplicação no âmbito do canal, apenas é apresentado o primeiro separador listado no manifesto.

Segue-se um exemplo de manifesto de aplicação em que é definido um separador estático que funciona em todos os âmbitos e contextos no Teams:

"staticTabs": [ 
  { 
     "entityId": "homeTab", 
     "scopes": [ 
       "personal", 
       "groupChat", 
       "team"
      ], 
     "context": [ 
       "personalTab",
       "channelTab", 
       "privateChatTab", 
       "meetingChatTab", 
       "meetingDetailsTab", 
       "meetingSidePanel", 
       "meetingStage" 
      ], 
      "name": "Contoso", 
      "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", 
      "websiteUrl": "https://contoso.com/content (displayed in web browser)" 
  }
],

Se um contexto não estiver definido no manifesto da aplicação, por predefinição, o Teams considera o seguinte contexto:

"context": [ 
   "personalTab",
   "channelTab",
   "privateChatTab", 
   "meetingChatTab", 
   "meetingDetailsTab", 
   "meetingStage" 
]

Personalizar o separador estático em conversas ou reuniões

Para personalizar a sua experiência de separador estático em conversas, canais ou reuniões, pode utilizar as setConfig APIs no seu separador para atualizar o e websiteUrlo contentUrl . Segue-se um exemplo:

pages.config.setConfig({ 
  "contentUrl": "https://wwww.contoso.com/teamsapp/thread/" + context.threadId,
   ...}

Apenas contentUrl e websiteUrl as alterações são suportadas para setConfig, outras propriedades não podem ser alteradas para separadores estáticos.

Separadores offline

Observação

Os separadores pessoais com funcionalidade offline só são suportados no Teams em dispositivos Android.

Pode criar um separador pessoal que funcione no Teams sem uma ligação à Internet. Um separador offline beneficia os utilizadores que trabalham em áreas com fraca ou nenhuma cobertura de rede, como agentes de campo ou trabalhadores de primeira linha. Os utilizadores podem realizar as seguintes tarefas num separador offline:

  • Registe dados através de formulários que podem incluir imagens e vídeos.
  • Ver detalhes de pedidos, incidentes ou formulários submetidos anteriormente.

Quando o dispositivo do utilizador se volta a ligar à Internet, o separador sincroniza automaticamente os dados armazenados localmente com um armazenamento de Blobs do Azure. Esta ação garante que todas as alterações offline efetuadas pelo utilizador são atualizadas num armazenamento central, mantendo a consistência dos dados em toda a organização.

O gráfico mostra como funciona um separador offline no cliente móvel do Teams.

Criar um separador offline

Antes de começar a criar um separador offline, certifique-se de que cumpre os pré-requisitos para criar um separador pessoal.

  1. Criar um armazenamento de Blobs do Azure. Certifique-se de que anota o nome da conta e do contentor para utilização posterior.

  2. Clone o repositório de Exemplos do Microsoft Teams .

  3. No repositório clonado, aceda a exemplos>tab-support-offline>nodejs e abra a pasta no Visual Studio Code.

    Captura de ecrã a mostrar como abrir o exemplo de código no Visual Studio Code.

  4. Em EXPLORADOR, aceda a servidor>blobStoreOperations.js e substitua {{ account-Name }} e {{ container-Name }} pelos valores da conta de armazenamento de Blobs do Azure e do contentor.

  5. Selecione a chave F5 para depurar a aplicação. O Teams é aberto numa janela do browser quando a compilação estiver concluída.

  6. Inicie sessão com a sua conta do Microsoft 365, se lhe for pedido.

  7. Selecione Adicionar quando for aberta uma caixa de diálogo para lhe permitir adicionar a aplicação de separador ao Teams.

    Captura de ecrã a mostrar como adicionar a aplicação de separador offline ao Teams.

Parabéns! Criou com êxito um separador do Teams com funcionalidade offline.

Exemplo de código

Nome do exemplo Descrição .NET Node.js Manifesto
Separador pessoal Aplicação de exemplo, que mostra o Separador pessoal personalizado com ASP.NET núcleo para conversas de grupo, canais e reuniões. View View View
Separador pessoal offline A aplicação de exemplo apresenta uma aplicação de separador pessoal que funciona offline no Microsoft Teams. NA View View

Próxima etapa

Criar uma guia de canal ou grupo

Confira também