Criar uma guia

As guias em chats, canais ou reuniões funcionam de maneira semelhante aos aplicativos, pois você pode fixar apenas uma guia por aplicativo no painel esquerdo para facilitar o acesso.

Importante

Apresentamos a extensão do Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit) no Visual Studio Code. Esta versão vem para você com muitos novos recursos de desenvolvimento de aplicativos. Recomendamos que você use o Agents Toolkit v5 para criar seu aplicativo do Teams.

Verifique se você tem todos os pré-requisitos para criar sua guia.

Observação

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

Criar uma guia com JavaScript

Siga o guia passo a passo para criar seu aplicativo de guia usando JavaScript.

Tive um problema

Adicionar uma página de conteúdo à guia

Crie uma página de conteúdo e atualize os arquivos existentes do aplicativo de guia:

  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 em seu Visual Studio Code do seguinte caminho para fornecer sua página de conteúdo em um iFrame:

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

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

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

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

Tive um problema

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. No prompt de comando, digite 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. Procurar http://localhost:3007/<yourDefaultAppNameTab>/personal.htmlpara exibir a guia.

    Guia html padrão

Tive um problema

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 que sua guia for carregada no Microsoft Teams por meio do ngrok e salva com êxito, você poderá exibi-la no Teams até que sua sessão de túnel termine.

Carregar seu aplicativo no Teams

  1. Vá para o Teams e selecione AplicativosMicrosoft Teams Store .

  2. Selecione Gerenciar seus aplicativos>Carregar um aplicativo>Carregar um aplicativo personalizado.

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

    Adicionando sua guia

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

    Guia pessoal carregada

  5. No painel esquerdo do Teams, selecione reticências ●●● e escolha o aplicativo carregado para exibir a guia.

    Sua guia foi criada e adicionada com êxito no Teams. Você também pode reordenar suas guias no Teams.

Tive um problema

Criar uma guia com o 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

Veja a seguir as etapas para criar uma guia:

  1. Gerar seu aplicativo com uma guia
  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 seu aplicativo com uma guia

  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 escolha Iniciar Depuração no menu Depurar do aplicativo para verificar se o aplicativo está carregado corretamente. Em um navegador, vá para as seguintes URLs:

    • <http://localhost:3978/>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Revise 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 especificado em seu manifesto contentUrl , insere em um <iframe> e renderiza em sua guia.

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

Tive um problema

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 da pasta Páginas e adicione microsoftTeams.app.initialize() as <script> marcas.

  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.

Tive um problema

Estabelecer um túnel seguro para sua guia

No prompt de comando na raiz do diretório do projeto, execute o seguinte comando para estabelecer um túnel seguro para sua guia:

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 arquivo do pacote do aplicativo é tab.zip, e está localizado 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. Em Informações do Desenvolvedor, adicione os detalhes necessários. No Site (deve ser uma URL HTTPS válida), forneça a URL HTTPS do ngrok.

  8. Em URLs de aplicativo, atualize a Política de privacidade e https://<yourngrokurl>/privacy os Termos de uso para https://<yourngrokurl>/toue selecione Salvar.

  9. Em Recursos do aplicativo, selecione Aplicativo> pessoalCriar sua primeira guia de aplicativo pessoal. Insira o nome e atualize a URL do conteúdo com https://<yourngrokurl>/personalTab. Deixe o campo URL do site em branco, selecione Contexto como personalTab na lista suspensa 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.

Tive um problema

Visualizar seu aplicativo no Teams

  1. Selecione Visualizar no Teams na barra de ferramentas do portal do desenvolvedor. O portal do desenvolvedor informa que o aplicativo personalizado foi carregado 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

    Sua guia foi criada e adicionada com êxito no Teams. Você também pode reordenar sua guia no Teams.

Criar uma guia com o 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 seguinte comando ou você pode baixar o código-fonte e extrair os arquivos:

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

Veja a seguir as etapas para criar uma guia:

  1. Gerar seu aplicativo com uma guia
  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 seu aplicativo com uma guia

  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 escolha Iniciar Depuração no menu Depurar do aplicativo para verificar se o aplicativo está carregado corretamente. Em um navegador, vá para as seguintes URLs:

    • <http://localhost:3978>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Revise 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 especificado em seu manifesto contentUrl , insere em um iFrame e renderiza em sua guia.

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

Tive um problema

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 da pasta Views>PersonalTab e adicione microsoftTeams.app.initialize() dentro das <script> marcas.

  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.

Tive um problema

Estabelecer um túnel seguro para sua guia

No prompt de comando na raiz do diretório do projeto, execute o seguinte comando para estabelecer um túnel seguro para sua guia:

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 desenvolvedor, adicione os detalhes necessários. No Site (deve ser uma URL HTTPS válida), forneça a URL HTTPS do ngrok.

  8. Em URLs de aplicativo, atualize a Política de privacidade e https://<yourngrokurl>/privacy os Termos de uso para https://<yourngrokurl>/toue selecione Salvar.

  9. Em Recursos do aplicativo, selecione Aplicativo> pessoalCriar sua primeira guia de aplicativo pessoal. Insira o nome e atualize a URL do conteúdo com https://<yourngrokurl>/personalTab. Deixe o campo URL do site em branco, selecione Contexto como personalTab na lista suspensa 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.

Tive um problema

Visualizar seu aplicativo no Teams

  1. Selecione Visualizar no Teams na barra de ferramentas do portal do desenvolvedor. O portal do desenvolvedor informa que o aplicativo personalizado foi carregado 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

    Sua guia foi criada e adicionada com êxito no Teams. Você também pode reordenar sua guia no Teams.

O Blazor permite criar interfaces de usuário da Web interativas usando C#, em vez de JavaScript. Você pode criar um aplicativo de guia e um aplicativo de bot com o Blazor e a versão mais recente do Visual Studio.

Captura de tela do aplicativo Blazor exibindo a saída da guia, do Bot e da Extensão de Mensagem após a conclusão bem-sucedida do guia passo a passo do Blazor.

Observação

O Agents Toolkit não dá suporte ao recurso de extensão de mensagem.

Aqui está uma lista de ferramentas necessárias para criar e implantar seu aplicativo.

  Instalar Para usar...
Required    
  Visual Studio versão 17.2.0 versão prévia 2.1 Selecione Visual Studio Enterprise 2022 Preview (versão 17.2.0 versão prévia 2.1).
  Microsoft Teams Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas em um só lugar.
  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 Kit de Ferramentas de Agentes

O Agents Toolkit ajuda a simplificar o processo de desenvolvimento com ferramentas para provisionar e implantar recursos de nuvem para seu aplicativo, publicar na Teams Store e muito mais. Você pode usar o Agents Toolkit com o Visual Studio ou como Interface de Linha de Comando do Agents Toolkit.

Você pode usar a versão mais recente do Visual Studio para desenvolver aplicativos do Teams com o Blazor Server no .NET.

Para instalar a extensão Agents Toolkit:

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

  2. Abra o arquivo do instalador do Visual Studio (.exe) na pasta de download.

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

    Captura de tela do Visual Studio Installer com as opções de continuação destacadas em vermelho.

  4. Em Cargas de trabalho, selecione ASP.NET e desenvolvimento para a Web.

  5. Em Detalhes da instalação, selecione Kit de Ferramentas de Agentes do Microsoft 365.

  6. Selecione Instalar.

    Captura de tela de Visual Studio Enterprise Visualização com a opção Asp.NET, desenvolvimento na Web e ferramentas de desenvolvimento do Microsoft Teams em detalhes de instalação e instalação destacada em vermelho.

    Seu Visual Studio é instalado em poucos minutos.

Tive um problema

Configurar seu locatário de desenvolvimento do Teams

Um locatário é como um espaço ou um contêiner para sua organização no Teams, onde você conversa, compartilha arquivos e realiza reuniões. Este espaço também é onde você carrega e testa seu aplicativo personalizado. Vamos verificar se você está pronto para desenvolver com o locatário.

Habilitar upload de aplicativo personalizado

Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Esse processo é conhecido como upload de aplicativo personalizado. Entre na sua conta do Microsoft 365 para ver essa opção.

Você já tem um locatário e acesso de administrador? Vamos marcar se você realmente faz!

Para verificar se você pode carregar um aplicativo personalizado no Teams:

  1. No cliente do Teams, selecione Aplicativos.

  2. Selecione Gerenciar seus aplicativos.

  3. Selecione Carregar um aplicativo. Se você vir a opção Carregar um aplicativo personalizado , o carregamento de aplicativo personalizado estará habilitado.

    A captura de tela mostra a opção de carregar um aplicativo personalizado no Teams.

    Observação

    Entre em contato com o administrador do Teams se você não encontrar a opção de carregar um aplicativo personalizado.

Criar um locatário de desenvolvedor do Teams gratuito (opcional)

Se você não tiver uma conta de desenvolvedor do Teams, poderá obtê-la gratuitamente. Participe do programa de desenvolvedores do Microsoft 365!

  1. Acesse o Programa para desenvolvedores do Microsoft 365.

  2. Selecione Ingressar Agora e siga as instruções na tela.

  3. Na tela de boas-vindas, selecione Configurar assinatura E5.

  4. Configurar a conta de administrador. Depois de concluir, a tela a seguir será exibida.

    Captura de tela do Programa de Desenvolvedor do Microsoft 365 exibindo suas assinaturas de desenvolvedor do Microsoft 365 para o aplicativo Blazor.

  5. Entre no Teams usando a conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.

Obter uma conta gratuita do Azure

Se você deseja hospedar seu aplicativo ou acessar recursos no Azure, deve ter uma assinatura do Azure. Crie uma conta gratuita antes de começar.

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

Criar espaço de trabalho de projeto para seu aplicativo de guia

Inicie o desenvolvimento de aplicativos do Teams criando seu primeiro aplicativo. Este aplicativo usa o recurso de guia.

Captura de tela do aplicativo Blazor exibindo a saída final do aplicativo de guia depois que o guia passo a passo do Blazor for concluído com êxito.

Este tutorial orienta você na criação, execução e implantação de seu primeiro aplicativo do Teams usando .NET/Blazor.

Nesta página, você aprenderá:

  1. Como configurar um novo projeto de guia com o Kit de Ferramentas de Agentes
  2. Sobre a estrutura de diretórios de seu aplicativo

Criar seu projeto de guia

Use o Agents Toolkit para criar seu primeiro projeto de guia. O kit de ferramentas orienta você por uma série de páginas para criar e configurar seu projeto de aplicativo do Teams:

  1. Criar uma nova página de projeto : Selecione o tipo de projeto.
  2. Configure sua nova página de projeto : insira os detalhes do projeto.
  3. Criar uma nova página de aplicativo do Teams : Selecione os recursos do aplicativo do Teams.

Para criar seu espaço de trabalho de projeto de guia

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

  2. Selecione Criar um novo projeto.

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

    A página Criar um novo projeto é exibida.

  3. Selecione o tipo e os detalhes do projeto:

    1. Pesquise o Microsoft 365 na lista suspensa de modelos.

    2. Selecione Agentes do Microsoft 365 como modelo.

    3. Selecione Avançar.

      Captura de tela de Criar um novo projeto com a opção Avançar destacada em vermelho para a criação do aplicativo Blazor.

      A página Configure seu novo projeto é exibida.

  4. Configure os detalhes do novo projeto:

    1. Insira um nome adequado para o seu projeto.

      Observação

      O nome do projeto inserido é preenchido automaticamente como o nome da Solução também. Você pode alterar o nome da solução sem afetar o nome do projeto.

    2. Selecione o caminho da pasta onde deseja criar o espaço de trabalho do projeto.

    3. Insira um nome de solução diferente, se desejar.

    4. Marque a opção para salvar o projeto e a solução na mesma pasta, se desejar. Para este tutorial, você não precisa dessa opção.

    5. Selecione Criar.

      Captura de tela de Configure seu novo projeto com a opção Criar destacada em vermelho.

      A página Criar um novo aplicativo do Teams é exibida.

  5. Selecione o recurso do aplicativo Teams:

    1. Selecione a guia como a funcionalidade do seu aplicativo.

    2. Selecione Criar.

      Captura de tela de Criar um novo aplicativo do Teams com as opções Tab e Criar destacadas em vermelho.

    Seu aplicativo de guia do Teams é criado em poucos segundos.

    Captura de tela do Visual Studio exibindo dicas para começar durante a criação do seu aplicativo.

    Uma rápida recapitulação da criação de um aplicativo de guia do Teams. Assista a esta breve recapitulação sobre como criar um aplicativo de guia do Teams.

    A representação gráfica mostra o processo de criação da guia Teams app1.

Tive um problema

Faça um tour pelo código-fonte do aplicativo da guia Teams

Após a criação do projeto, você tem os componentes para criar um aplicativo de guia básico. Você pode exibir a estrutura de diretório do projeto no painel do Gerenciador de Soluções do Visual Studio.

Captura de tela do Gerenciador de soluções exibindo os componentes para criar um aplicativo pessoal básico.

O Agents Toolkit cria uma estrutura para o seu projeto com base nos recursos selecionados. Entre outros arquivos, o Agents 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 do aplicativo para publicação por meio do Portal do desenvolvedor do Teams está armazenado no Properties/manifest.jsonformato .
BackendController.cs Um controlador de back-end é fornecido para auxiliar na Controllers/BackendController.cs autenticação.
Pages/Tab.razor O manifesto do aplicativo para publicação por meio do Portal do desenvolvedor do Teams está armazenado no Properties/manifest.jsonformato .
TeamsFx.cs e JS/src/index.js O conteúdo é usado para inicializar as comunicações com o host do Teams.

Você pode adicionar funcionalidade de back-end adicionando outros controladores do ASP.NET Core ao seu aplicativo.

Criar e executar seu primeiro aplicativo de guia do Teams

Depois de configurar o espaço de trabalho do projeto com o Kit de Ferramentas de Agentes, crie seu projeto de guia.

Para compilar e executar seu aplicativo:

  1. Selecionar projeto>Kit de Ferramentas de Agentes do> Microsoft 365Selecione a conta do Microsoft 365.

    Captura de tela do Visual Studio com Project, Kit de Ferramentas de Agentes e Preparar As opções de dependências do aplicativo Teams estão destacadas em vermelho.

  2. Selecione sua conta do Microsoft 365 ou adicione uma conta para entrar.

    Captura de tela da Conta do Microsoft 365 com a opção Continuar destacada em vermelho.

  3. Selecione Depurar>,Iniciar Depuração ou selecione F5 para executar o aplicativo no modo de depuração.


    Saiba o que acontece quando você executa seu aplicativo localmente no depurador.

    Ao selecionar F5, Kit de Ferramentas de Agentes:

    1. Registra seu aplicativo com o Microsoft Entra ID.
    2. Registra seu aplicativo para carregamento no Teams.
    3. Inicia o back-end do aplicativo sendo executado localmente.
    4. Inicia o front-end do aplicativo hospedado localmente.
    5. Inicia o Teams em um navegador da Web com um comando para instruir o Teams a carregar um aplicativo personalizado (a URL é registrada no manifesto do aplicativo).

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

    Captura de tela do Aviso de Segurança com a opção Sim realçada.

    O Teams é carregado em um navegador da Web.

  5. Selecione Adicionar.

    Captura de tela da caixa de diálogo do aplicativo de guia pessoal com a opção Adicionar realçada.

  6. Selecione Abrir para abrir o aplicativo no escopo pessoal.

    Captura de tela da caixa de diálogo de seleção de escopo com a opção Abrir destacada.

    Parabéns, seu primeiro aplicativo de guia está sendo executado em seu ambiente local!

    A captura de tela mostra que o aplicativo da primeira guia está em execução no ambiente local.

  7. Mova-se pela página para exibir os detalhes do usuário.

  8. Selecione Autorizar para permitir que seu aplicativo recupere detalhes do usuário usando o Microsoft Graph.

    O aplicativo solicita permissão para conceder acesso para exibir detalhes do usuário.

    A captura de tela mostra a opção autorizar na guia pessoal do seu aplicativo.

  9. Selecione Aceitar para permitir que seu aplicativo acesse os detalhes do usuário.

    Captura de tela das permissões solicitadas exibindo as informações do aplicativo.

    Sua fotografia e detalhes aparecem na guia Pessoal.

    A captura de tela mostra as informações básicas exibidas na guia pessoal do seu aplicativo no Teams.

    Você pode fazer atividades normais de depuração, como definir pontos de interrupção, como se fosse qualquer outro aplicativo da web. O aplicativo dá suporte à recarga dinâmica. Se você alterar qualquer arquivo dentro do projeto, a página será recarregada.


    Saiba como solucionar problemas se o aplicativo não for executado localmente.

    Para executar seu aplicativo no Teams, você precisa de uma conta de desenvolvimento do Microsoft 365 que permita o upload personalizado do aplicativo. Você pode saber mais sobre isso na seção Pré-requisitos.

  10. Interrompa a depuração no Visual Studio.

Tive um problema

Visualizar seu primeiro aplicativo de guia do Teams

Você aprendeu a criar, criar e executar aplicativos do Teams com o recurso de guia. As etapas finais a seguir são implantar seu aplicativo no Azure e visualizá-lo no Teams seguindo as etapas:

  1. Provisionar seu aplicativo de guia na nuvem
  2. Implantar seu aplicativo de guias na nuvem
  3. Visualizar seu aplicativo de guia no Teams

Vamos implantar o primeiro aplicativo com recurso de guia no Azure usando o Kit de Ferramentas de Agentes.

Para provisionar seu aplicativo de guia na nuvem

  1. Selecione Project>Microsoft 365 Agents Toolkit>provisionar na nuvem.

    Captura de tela do Visual Studio com as opções Project, Agents Toolkit e Provisionar na Nuvem estão destacadas em vermelho.

  2. Insira os detalhes da assinatura e do grupo de recursos na caixa de diálogo Provisionar :

    1. Selecione o nome da assinatura na lista suspensa Nome da assinatura .
    2. Selecione o grupo de recursos na lista suspensa do grupo de recursos ou selecione Novo para adicionar o grupo de recursos gerado para seu aplicativo.
    3. Selecione sua Região, caso um novo grupo de recursos seja criado.
    4. Selecione Provisionar.

    Captura de tela de Provisionar com Novo e Provisão destacados em vermelho.

    Provisionar exibições de aviso.

  3. Selecione Provisionar.

    Captura de tela do Kit de Ferramentas para Agentes com Provisão destacado em vermelho.

    Leva alguns minutos para que seu grupo de recursos provisione na nuvem.

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

    Captura de tela do aplicativo Agents Toolkit com a opção OK destacada em vermelho.

  5. Selecione Exibir Recursos Provisionados para exibir no portal do Azure.

    Captura de tela do Agents Toolkit com Exibir recursos provisionados destacados em vermelho.

  6. Entre em sua conta do portal do Azure no prompt de entrada.

    Seu app-dev-rg é exibido.

    Captura de tela de Blazorapp-dev-rg exibindo os Recursos provisionados no portal do Azure.

    Seus recursos são provisionados no portal do Azure!

Tive um problema

Para implantar seu aplicativo de guias na nuvem

  1. Selecione Projeto> Kit de ferramentas > deagentes do Microsoft 365Implantar na nuvem.

    Captura de tela do Visual Studio com as opções Project, Agents Toolkit e Deploy to the Cloud destacadas em vermelho.

  2. Selecione OK.

    Captura de tela do aplicativo criado com o Kit de Ferramentas de Agentes com a opção OK destacada em vermelho.

    Seu aplicativo de guia foi implantado com sucesso na nuvem!

Para visualizar seu aplicativo de guia no Teams

  1. Selecione Projeto>Visualização do Kit de Ferramentas de Agentes> do Microsoft 365no Teams.

    Captura de tela do Visual Studio com as opções Project, Agents Toolkit e Preview no Teams estão destacadas em vermelho.

    O Teams é carregado em um navegador da Web.

  2. Selecione Adicionar.

    Captura de tela da caixa de diálogo do aplicativo de guia pessoal com a opção Adicionar realçada.

  3. Selecione Abrir para abrir o aplicativo no escopo pessoal.

    Captura de tela da caixa de diálogo de seleção de escopo com a opção Abrir destacada.

    Parabéns, seu primeiro aplicativo de guia está em execução no seu ambiente do Azure!

    A captura de tela mostra a guia pessoal do seu aplicativo no Teams.

    Mova-se pela página para exibir os detalhes do usuário.

  4. Selecione Autorizar para permitir que seu aplicativo recupere detalhes do usuário usando o Microsoft Graph.

    O aplicativo solicita permissão para conceder acesso para exibir detalhes do usuário.

    A captura de tela mostra a opção autorizar na guia pessoal do seu aplicativo no Teams.

  5. Selecione Aceitar para permitir que seu aplicativo acesse os detalhes do usuário.

    Captura de tela das permissões solicitadas exibindo as informações do aplicativo.

    Sua fotografia e detalhes aparecem na guia Pessoal.

    Captura de tela do seu aplicativo com guia pessoal exibindo informações básicas.

Tive um problema

Parabéns

Você concluiu o tutorial para criar um aplicativo de guia com o Blazor.

Reordenar guias

A partir da versão 1.7 do manifesto, os desenvolvedores podem reorganizar todas as guias em seu aplicativo pessoal. Você pode mover a guia de chat do bot , que sempre é padronizada para a primeira posição, em qualquer lugar no cabeçalho da guia do aplicativo 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 de conversa aparece na Web e na área de trabalho, dependendo de onde você adiciona a guia de conversa na staticTabs matriz.


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

Observação

No dispositivo móvel, as guias são reordenadas conforme definido no staticTabs.

Essa propriedade também permite definir a funcionalidade de aterrissagem padrão para seu aplicativo. Você pode configurar o aplicativo para abrir como uma guia ou um bot por padrão. Para obter mais informações, consulte configurar a funcionalidade de pouso padrão.

Estender guias estáticas para chats em grupo, canais e reuniões

Observação

Para estender sua guia estática para chats em grupo, canais e reuniões, use o manifesto do aplicativo v1.16 ou posterior.

Você pode estender guias estáticas para chats em grupo, canais e reuniões. Em vez de conteúdo de aplicativo fixado, você pode criar guias que se comportam mais como aplicativos, pois pode fixar apenas uma guia por aplicativo, por exemplo, fixando uma única guia de aplicativo do YouTube.

Para estender suas guias estáticas para chats em grupo, canais e reuniões, atualize o manifesto do aplicativo com os scopes parâmetros and context na staticTabs propriedade. Quando você declara várias guias estáticas no manifesto e adiciona o aplicativo no escopo do canal, somente a primeira guia listada no manifesto é exibida.

A seguir está um exemplo de manifesto do aplicativo em que uma guia estática é definida que funciona em todos os escopos 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 do aplicativo, por padrão, o Teams considerará o seguinte contexto:

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

Habilitar aplicativos de guia pessoal para extensibilidade de chamada

Você pode criar aplicativos de escopo pessoal que se integram à PSTN (Rede Telefônica Pública Comutada) e às chamadas de Teams para Teams. Use o escopo e o contexto corretos para criar aplicativos que utilizem o tipo de guia, o escopo estático, o contexto pessoal e os painéis laterais da reunião.

Para obter mais informações, consulte Criar guias para chamadas.

Personalizar sua guia estática em chats ou reuniões

Para personalizar sua experiência com a guia estática em chats, canais ou reuniões, você pode usar as setConfig APIs na guia para atualizar o e websiteUrl.contentUrl Observe o exemplo a seguir:

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

Há suporte apenas contentUrl para e websiteUrl as alterações para setConfig, outras propriedades não podem ser alteradas para guias estáticas.

Guias offline

Observação

As guias pessoais com funcionalidade offline só são compatíveis com o Teams em dispositivos Android.

Você pode criar uma guia pessoal que funciona no Teams sem uma conexão com a Internet. Uma guia offline beneficia os usuários que trabalham em áreas com pouca ou nenhuma cobertura de rede, como agentes de campo ou trabalhadores da linha de frente. Os usuários podem realizar as seguintes tarefas em uma guia offline:

  • Registre dados por meio de formulários que podem incluir imagens e vídeos.
  • Exiba detalhes de solicitações, incidentes ou formulários enviados anteriormente.

Quando o dispositivo do usuário se reconecta à Internet, a guia sincroniza automaticamente os dados armazenados localmente com um armazenamento de Blobs do Azure. Essa ação garante que todas as alterações offline feitas pelo usuário sejam atualizadas em um armazenamento central, mantendo a consistência dos dados em toda a organização.

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

Criar uma guia offline

Antes de começar a criar uma guia offline, verifique se você atende aos pré-requisitos para criar uma guia pessoal.

  1. Crie um Armazenamento de Blobs do Azure. Anote o nome da conta e do contêiner para uso posterior.

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

  3. No repositório clonado, vá para samples>tab-support-offline>nodejs e abra a pasta no Visual Studio Code.

    A captura de tela mostra como abrir o exemplo de código no Visual Studio Code.

  4. Em EXPLORER, vá parablobStoreOperations.jsdo servidor> e substitua {{ account-Name }} e {{ container-Name }} com os valores da conta de armazenamento de Blobs e do contêiner do Azure.

  5. Selecione a tecla F5 para depurar o aplicativo. O Teams é aberto em uma janela do navegador quando a compilação é concluída.

  6. Entre com sua conta do Microsoft 365, se solicitado.

  7. Selecione Adicionar quando uma caixa de diálogo for aberta para permitir que você adicione o aplicativo de guia ao Teams.

    A captura de tela mostra como adicionar o aplicativo de guia offline ao Teams.

Parabéns! Você criou com sucesso uma guia do Teams com a funcionalidade offline.

Tive um problema

Práticas recomendadas para guias no Teams Mobile

Para saber como otimizar o desempenho da guia nos clientes Teams para Android e iOS, consulte as práticas recomendadas para o Teams para dispositivos móveis.

Guias passo a passo

Para saber mais sobre como criar uma guia usando C#, consulte Criar seu primeiro aplicativo de guia usando C sharp.

Exemplo de código

Nome do exemplo Descrição .NET Node.js Manifesto
Guia pessoal Este exemplo mostra o desenvolvimento de uma guia pessoal personalizada para o Microsoft Teams, utilizando o ASP.NET Core MVC para aprimorar a interação do usuário. View View View
Guia pessoal offline Este aplicativo de exemplo demonstra um aplicativo CRUD que funciona offline no Microsoft Teams, permitindo que os usuários gerenciem dados sem uma conexão com a Internet e sincronizem automaticamente com o armazenamento de blobs quando reconectados. NA View View

Próxima etapa

Criar uma guia de canal ou grupo

Confira também

  • Last updated on