Criar uma guia de canal ou guia de grupo

  • Artigo

As guias de canal ou grupo fornecem conteúdo para canais e chats em grupo, o que ajuda a criar espaços colaborativos em torno de conteúdo dedicado baseado na Web.

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

Observação

Este tópico reflete a versão 2.0.x da biblioteca de clientes 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 um canal personalizado ou guia de grupo 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. No prompt de comando, instale o gerador de aplicativos do Microsoft Teams inserindo o seguinte comando:

    npm install generator-teams --global

Gerar seu aplicativo com uma guia de canal ou grupo

  1. No prompt de comando, crie um novo diretório para seu canal ou guia de grupo.

  2. Insira o seguinte comando em seu novo diretório para iniciar o gerador de aplicativos do Microsoft Teams:

    yo teams

  3. Forneça seus valores a uma série de perguntas solicitadas pelo gerador de aplicativos do Microsoft Teams para atualizar seu manifest.json arquivo:

    Captura de tela que mostra um gerador para atualizar arquivos manifest.json.

Série de perguntas para atualizar seu arquivo 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?

    No momento, você 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 pode ser usado no manifesto do aplicativo. 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.

  • Scaffolding rápido? (Y/n)

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

  • Insira sua ID do Microsoft Partner, se você tiver uma? (Deixe em branco para ignorar)

    Este campo não é obrigatório e deve ser usado somente se você já faz parte do Microsoft Partner Network.

  • Quais recursos você deseja adicionar ao seu projeto?

    Selecione ( * ) Uma guia.

  • A URL para hospedar essa solução?

    Por padrão, o gerador sugere uma 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.

  • Deseja incluir a estrutura 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.

  • Deseja incluir o suporte ao ESLint? (y/N)

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

  • Deseja usar 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 a guia Configurável.

  • Quais escopos você pretende usar na sua guia?

    Você pode selecionar uma equipe ou um chat em grupo.

  • Deseja exigir o suporte ao logon único do Microsoft Azure Active Directory (Azure AD) para a guia?

    Escolha não para incluir o suporte de logon único do Microsoft Azure Active Directory (Azure AD) à guia. O padrão é sim, insira n.

  • Deseja que essa guia esteja disponível no SharePoint Online? (Y/n)

    Insira n.

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, DefaultTabName é myTab depois /MyTabTab/

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, digite o seguinte 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, insira 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. Para exibir a página de configuração da guia, vá para http://localhost:3007/<yourDefaultAppNameTab>/config.html.

    Página de configuração da guia

Estabelecer um túnel seguro para sua guia

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

gulp ngrok-serve

Importante

Depois que sua guia for carregada para o Microsoft Teams por meio do ngroke salva com êxito, você poderá exibi-la no Teams até que a sessão de túnel termine. Se você reiniciar sua sessão ngrok, deverá atualizar seu aplicativo com a nova URL.

Carregar seu aplicativo no Teams

  1. Acesse 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 do pacote de aplicativo e escolha Abrir.

    Guia de canal carregada

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

    Se Add não for exibido na caixa de diálogo, remova o código a seguir do manifesto da pasta zip do pacote de aplicativo carregado. Feche a pasta novamente e carregue-a no Teams.

    "staticTabs": [],
"bots": [],
"connectors": [],
"composeExtensions": [],

  5. Siga as instruções para adicionar uma guia. Há uma caixa de diálogo de configuração personalizada para a guia canal ou grupo.

  6. Selecione Salvar e sua guia será adicionada à barra de guias do canal.

    Guia de canal carregada

    Agora você criou com êxito e adicionou sua guia de canal ou grupo no Teams.

Criar um canal personalizado ou uma guia de grupo 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

Gerar seu aplicativo com uma guia de canal ou grupo

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

  2. Vá para a pasta Microsoft-Teams-Samples> samples> tab-channel-group> razor-csharp e abra channelGroupTab.sln.

  3. No Visual Studio, selecione F5 ou escolha Iniciar Depuração no menu deDepuração do aplicativo para verificar se o aplicativo foi carregado corretamente. Em um navegador, vá para as seguintes URLs:

    • https://localhost:3978/
    • https://localhost:3978/privacy
    • https://localhost:3978/tou
Examinar 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(options => options.EnableEndpointRouting = false);
}

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.

Tab.cs

Esse arquivo C# contém um método que é chamado de Tab.cshtml durante a configuração.

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 precisam ser compactados em um pacote de aplicativos para uso no carregamento de sua guia para o Teams. Quando um usuário opta por adicionar ou atualizar sua guia, o Teams carrega o especificado em seu manifesto, insere-o configurationUrl em um IFrame e o renderiza em sua guia.

.csproj

Na janela do 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>

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 na guia:

ngrok http 3978 --host-header=localhost

Certifique-se de manter o prompt de comando com ngrok em execução e anote a URL.

Atualizar seu aplicativo

  1. Abra o Visual Studio Gerenciador de Soluções e vá para a pasta Páginas Compartilhadas> e abra _Layout.cshtml e adicione o seguinte à seção 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.2.0/js/MicrosoftTeams.min.js" 
  integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
  crossorigin="anonymous" >
</script>

    Importante

    Não copie e cole as URLs <script src="..."> desta página, pois elas não representam a versão mais recente. Para obter a versão mais recente do TeamsJS, acesse sempre a API JavaScript do Microsoft Teams.

  2. Insira uma chamada para microsoftTeams.app.initialize(); na marca script.

  3. No Visual Studio Gerenciador de Soluções, acesse a pasta Páginas e abra Tab.cshtml

    Em Tab.cshtml, o aplicativo apresenta ao usuário duas opções para exibir a guia com um ícone vermelho ou cinza. O botão Selecionar Cinza ou Selecionar Vermelho dispara saveGray() ou saveRed() , respectivamente, define pages.config.setValidityState(true)e habilita Salvar na página de configuração. Esse código permite que o Teams saiba que você concluiu a configuração de requisitos e pode prosseguir com a instalação. Os parâmetros de pages.config.setConfig são definidos. Por fim, saveEvent.notifySuccess() é chamado para indicar que a URL de conteúdo foi resolvida com êxito.

  4. Atualize os valores websiteUrl e contentUrl em cada função com a URL HTTPS do ngrok para sua guia.

    Seu código agora deve incluir o seguinte com y8rCgT2b substituído pela URL do ngrok:

    
    let saveGray = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl: ""
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl: ""
            });
            saveEvent.notifySuccess();
        });
    }

  5. Salve o arquivo Tab.cshtml.

Compilar e executar seu aplicativo

  1. No Visual Studio, selecione F5 ou escolha Iniciar Depuração no menu Depuração.

  2. Verifique se ngrok está em execução e funcionando corretamente abrindo o navegador e acessando sua página de conteúdo por meio da URL HTTPS do ngrok que foi fornecida na janela do prompt de comando.

    Dica

    Você precisa ter seu aplicativo no Visual Studio e ngrok em execução para concluir as etapas fornecidas neste artigo. Se você precisar parar de executar seu aplicativo no Visual Studio para trabalhar nele, mantenha o ngrok em execução. Ele escuta e retoma o roteamento da solicitação do aplicativo quando ele é reiniciado no Visual Studio. Se você precisar reiniciar o serviço ngrok, ele retornará uma nova URL e você precisará atualizar seu aplicativo com a nova URL.

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

  1. Vá para o Teams. Se você usar versão baseada na Web, poderá inspecionar seu código front-end usando as ferramentas de desenvolvedor do navegador.

  2. Vá para Portal do Desenvolvimento.

  3. Abra Aplicativos e selecione Importar aplicativo.

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

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

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

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

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

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

  9. Em urls de aplicativo, atualize a política de privacidade para https://<yourngrokurl>/privacy e Termos de uso para https://<yourngrokurl>/tou e salvar.

  10. Em Recursos de aplicativo, selecione Grupo e aplicativo de canal. Atualize a URL de configuração com https://<yourngrokurl>/tab e selecione sua guia Escopo.

  11. Selecione Salvar.

  12. 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 Visualização no Teams na barra de ferramentas Portal do Desenvolvedor, Portal do Desenvolvedor informa que seu aplicativo foi carregado com êxito. A página Adicionar é exibida para seu aplicativo no Teams.

  2. Selecione Adicionar à equipepara configurar a guia em uma equipe. Configure sua guia e selecione Salvar. Sua guia agora está disponível no Teams.

    guia Cana dal ASPNET carregada

    Agora você criou com êxito e adicionou sua guia de canal ou grupo no Teams.

Criar um canal personalizado ou guia de grupo 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

Gerar seu aplicativo com uma guia de canal ou grupo

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

  2. Vá para a pasta Microsoft-Teams-Samples> samples> tab-channel-group> mvc-csharp e abra ChannelGroupTabMVC.sln.

  3. No Visual Studio, selecione F5 ou escolha Iniciar Depuração no menu deDepuração do aplicativo para verificar se o aplicativo foi carregado corretamente. Em um navegador, vá para as seguintes URLs:

    • https://localhost:3978/
    • https://localhost:3978/privacy
    • https://localhost:3978/tou
Examinar 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(options => options.EnableEndpointRouting = false);
}

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 precisam ser compactados em um pacote de aplicativos para uso no carregamento de sua guia para o Teams.

.csproj

Na janela do 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, confira o seguinte código que cria e atualiza sua pasta zip quando o aplicativo cria:

<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

ChannelGroup.cs apresenta um objeto de mensagem e métodos que podem ser chamados dos controladores durante a configuração.

Visualizações

Estas são as diferentes exibições no 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 pode ser exibida como a home page do seu aplicativo.

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

Controladores

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

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 na guia:

ngrok http 3978 --host-header=localhost

Certifique-se de manter o prompt de comando com ngrok em execução e anote a URL.

Atualizar seu aplicativo

  1. Abra o Visual Studio Gerenciador de Soluções e acesse a pasta Views>Shared e abra _Layout.cshtml e adicione o seguinte à seção 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.2.0/js/MicrosoftTeams.min.js" 
  integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
  crossorigin="anonymous" >
</script>

    Importante

    Não copie e cole as URLs <script src="..."> desta página, pois elas não representam a versão mais recente. Para obter a versão mais recente do SDK, acesse sempre aAPI JavaScript do Microsoft Teams.

  2. Insira uma chamada para microsoftTeams.app.initialize(); na marca script.

  3. No Visual Studio Gerenciador de Soluções, acesse a pasta Tab e abra Tab.cshtml

    Em Tab.cshtml, o aplicativo apresenta ao usuário duas opções para exibir a guia com um ícone vermelho ou cinza. O botão Selecionar Cinza ou Selecionar Vermelho dispara saveGray() ou saveRed() , respectivamente, define pages.config.setValidityState(true)e habilita Salvar na página de configuração. Esse código permite que o Teams saiba que você concluiu a configuração de requisitos e pode prosseguir com a instalação. Os parâmetros de pages.config.setConfig são definidos. Por fim, saveEvent.notifySuccess() é chamado para indicar que a URL de conteúdo foi resolvida com êxito.

  4. Atualize os valores websiteUrl e contentUrl em cada função com a URL HTTPS do ngrok para sua guia.

    Seu código agora deve incluir o seguinte com y8rCgT2b substituído pela URL do ngrok:

    
    let saveGray = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl:""
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl:""
            });
            saveEvent.notifySuccess();
        });
    }

  5. Certifique-se de salvar o Tab.cshtml atualizado.

Compilar e executar seu aplicativo

  1. No Visual Studio, selecione F5 ou escolha Iniciar Depuração no menu Depuração.

  2. Verifique se ngrok está em execução e funcionando corretamente abrindo o navegador e acessando sua página de conteúdo por meio da URL HTTPS do ngrok que foi fornecida na janela do prompt de comando.

    Dica

    Você precisa ter seu aplicativo no Visual Studio e ngrok em execução para concluir as etapas fornecidas neste artigo. Se você precisar parar de executar seu aplicativo no Visual Studio para trabalhar nele, mantenha o ngrok em execução. Ele escuta e retoma o roteamento da solicitação do aplicativo quando ele é reiniciado no Visual Studio. Se você precisar reiniciar o serviço ngrok, ele retornará uma nova URL e você precisará atualizar seu aplicativo com a nova URL.

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

  1. Vá para o Teams. Se você usar versão baseada na Web, poderá inspecionar seu código front-end usando as ferramentas de desenvolvedor do navegador.

  2. Vá para Portal do Desenvolvimento.

  3. Abra Aplicativos e selecione Importar aplicativo.

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

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

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

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

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

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

  9. Em urls de aplicativo, atualize a política de privacidade para https://<yourngrokurl>/privacy e Termos de uso para https://<yourngrokurl>/tou e salvar.

  10. Em Recursos de aplicativo, selecione Grupo e aplicativo de canal. Atualize a URL de configuração com https://<yourngrokurl>/tab e selecione sua guia Escopo.

  11. Selecione Salvar.

  12. 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 Visualização no Teams na barra de ferramentas Portal do Desenvolvedor, Portal do Desenvolvedor informa que seu aplicativo foi carregado com êxito. A página Adicionar é exibida para seu aplicativo no Teams.

  2. Selecione Adicionar à equipepara configurar a guia em uma equipe. Configure sua guia e selecione Salvar. Sua guia agora está disponível no Teams.

    Guia de canal do ASPNET MVC carregado

    Agora você criou com êxito e adicionou sua guia de canal ou grupo no Teams.

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

Captura de tela do aplicativo blazor que exibe a guia, o Bot e a saída da Extensão de Mensagem depois de concluir com êxito o guia blazor passo a passo.

Observação

O Teams Toolkit não dá suporte à funcionalidade 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 versão prévia de 2022 (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 - tudo 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 o Kit de Ferramentas do Microsoft Teams

O Kit de Ferramentas do Teams 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 kit de ferramentas com o Visual Studio ou como uma Interface de Linha de Comando (chamada teamsfx).

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 do Kit de Ferramentas do Microsoft Teams:

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

  2. Abra vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe na pasta de download.

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

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

  4. Selecione ASP.NET e desenvolvimento da Web emCargas de Trabalho.

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

  6. Selecione Instalar.

    Captura de tela do Visual Studio Enterprise Preview com a opção Asp.NET, desenvolvimento da Web e ferramentas de desenvolvimento do Microsoft Teams em detalhes de instalação e instalação realçada em vermelho.

Seu Visual Studio é instalado em alguns minutos.

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 executa reuniões. Esse espaço também é onde você carrega lateralmente e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.

Habilitar a opção sideload

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

Você já tem um locatário e tem acesso ao administrador? Vamos marcar se você realmente fizer isso!

Verifique se você pode carregar aplicativos de sideload no Teams:

  1. No cliente do Teams, selecione Aplicativos.

  2. Selecione Gerenciar seus aplicativos.

  3. Selecione Fazer o upload de um aplicativo personalizado. Se você vir Carregar uma opção de aplicativo personalizado, os aplicativos de sideload estarão habilitados.

    Captura de tela de Gerenciar seus aplicativos no Teams com a caixa de diálogo Carregar um aplicativo aberta. Ícone de aplicativos, Gerenciar seus aplicativos, Carregar um aplicativo e Carregar uma opção de aplicativo personalizado realçada em vermelho.

    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 gratuito do Teams (opcional)

Se você não tiver uma conta de desenvolvedor do Teams, poderá obtê-la gratuitamente. Ingresse no programa de desenvolvedor 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 do E5.

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

    Captura de tela do Microsoft 365 Developer Program 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, deverá 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 workspace 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 tab depois de concluir com êxito o guia passo a passo.

Este tutorial orienta você nas etapas para criar, executar e implantar seu primeiro aplicativo do Teams usando o .NET/Blazor.

Nesta página, você aprenderá:

  1. Como configurar um novo projeto de guia com o Teams Toolkit
  2. Sobre a estrutura de diretório do seu aplicativo

Criar seu projeto de guia

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

  1. Criar uma nova página de projeto : você pode selecionar o tipo de projeto.
  2. Configure sua nova página de projeto : você pode inserir os detalhes do projeto.
  3. Criar uma nova página de aplicativo do Teams : você pode selecionar os recursos do aplicativo Teams.

Para criar seu workspace 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 os detalhes do projeto.

    Selecione o tipo de projeto:

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

    2. Selecione Aplicativo do Microsoft Teams como o modelo.

    3. Selecione Avançar.

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

      A página Configurar seu novo projeto é exibida.

  4. Configure os novos detalhes do projeto.

    Selecione a seguinte configuração de projeto:

    1. Insira um nome adequado para seu projeto.

      Observação

      Você pode observar que o nome do projeto inserido é preenchido automaticamente como o nome da solução também. Se desejar, você pode alterar o nome da solução sem afetar o nome do projeto.

    2. Selecione o caminho da pasta em que você deseja criar o workspace do projeto.

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

    4. Verifique 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 tela1 de Configurar seu novo projeto com a opção Criar realçada em vermelho.

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

  5. Selecione Recurso de aplicativo do Teams.

    Selecionar recurso de aplicativo:

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

    2. Selecione Criar.

    Captura de tela2 de Criar um novo aplicativo do Teams com opções Tab e Create realçadas em vermelho.

Seu aplicativo de guia teams é criado em poucos segundos.

Captura de tela3 do Visual Studio exibindo dicas para começar a criar seu aplicativo.

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

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

Faça um tour pelo código-fonte do aplicativo de guia teams

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

Captura de tela4 do Gerenciador de Soluções que exibe os componentes para criar um aplicativo pessoal básico.

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

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

Criar e executar seu primeiro aplicativo de guia do Teams

Depois de configurar o workspace do projeto com o Teams Toolkit, crie seu projeto de guia.

Para criar e executar seu aplicativo:

  1. Selecione Kitde Ferramentas> do Project> TeamsPreparar Dependências de Aplicativo do Teams.

    Captura de tela5 do Visual Studio com opções Project, Teams Toolkit e Prepare Teams App Dependencies são realçadas em vermelho.

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

    Captura de tela6 da conta do Microsoft 365 com a opção Continuar realçada em vermelho.

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

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

    Ao selecionar F5, o Teams Toolkit:

    1. Registra seu aplicativo no Azure Active Directory.
    2. Registra seu aplicativo para sideload no Teams.
    3. Inicia o back-end do aplicativo em execução 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 o aplicativo de lado (a URL está registrada dentro do manifesto do aplicativo).

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

    Captura de tela7 da opção Aviso de Segurança com Sim realçada em vermelho.

    O Teams é carregado em um navegador da Web.

  5. Selecione Adicionar a uma equipe quando solicitado a instalar o aplicativo no Teams.

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

    Parabéns, seu primeiro aplicativo de guias está em execução em seu ambiente local!

    Captura de tela9 do Microsoft Teams com seu aplicativo está em execução em seu ambiente local realçado em vermelho.

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

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

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

    Captura de tela10 da opção Microsoft Teams com Autorizar realçada em vermelho.

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

    Captura de tela11 das permissões solicitadas que exibem as informações do aplicativo.

    Sua fotografia e detalhes aparecem na guia do canal.

    Captura de tela12 da Guia do canal exibindo informações básicas

    Você pode fazer atividades normais de depuração, como definir pontos de interrupção, como se fosse qualquer outro aplicativo 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 sideload do aplicativo. Você pode saber mais sobre isso na seção Pré-requisitos.

  9. Pare de depurar no Visual Studio.

Visualizar seu primeiro aplicativo de guia do Teams

Você aprendeu a criar, compilar e executar o aplicativo teams com a funcionalidade de guia. As seguintes etapas finais são implantar seu aplicativo no Azure e visualizar no Teams:

  1. Provisionar seu aplicativo de guias na nuvem: você pode provisionar seu aplicativo de guias na nuvem.

  2. Implantar seu aplicativo de guia na nuvem: você pode implantar seu aplicativo de guias na nuvem.

  3. Visualizar seu aplicativo de guia no Teams: você pode visualizar seu aplicativo de guias no Teams.

    Vamos implantar o primeiro aplicativo com recursos de guia no Azure usando o Teams Toolkit.

Para provisionar seu aplicativo de guias na nuvem

  1. Selecione ProvisionamentodeKit de> Ferramentas do Project > Teamsna Nuvem.

    Captura de tela13 do Visual Studio com o Project, o Teams Toolkit e o Provisionamento nas opções nuvem são realçados 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 Grupo de recursos ou selecione Novo para adicionar o grupo de recursos gerado para seu aplicativo.
    3. Selecione sua Região, se o novo grupo de recursos for criado.
    4. Selecione Provisionar.

    Captura de tela14 de Provisionamento com Novo e Provisionamento realçado em vermelho.

    O aviso de provisionamento é exibido.

  3. Selecione Provisionar.

    Captura de tela15 do Kit de Ferramentas do Teams com Provisionamento realçado em vermelho.

    Leva alguns minutos para o grupo de recursos provisionar na nuvem.

  4. Depois que a provisão for concluída, selecione OK.

    Captura de tela16 do Kit de Ferramentas do Teams com a opção OK realçada em vermelho.

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

    Captura de tela17 do Kit de Ferramentas do Teams com Exibir Recursos Provisionados realçados em vermelho.

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

    Seu aplicativo-dev-rg é exibido.

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

    Seus recursos estão provisionados no portal do Azure!

Para implantar seu aplicativo de guia na nuvem

  1. Selecione Implantarkit >de ferramentasdo Project > Teamsna nuvem.

    Captura de tela19 do Visual Studio com As opções Project, Teams Toolkit e Deploy to the Cloud realçadas em vermelho.

  2. Clique em OK.

    Captura de tela20 do Kit de Ferramentas do Teams com a opção OK realçada em vermelho.

    Seu aplicativo de guias é implantado com êxito na nuvem!

Para visualizar seu aplicativo de guia no Teams

  1. Selecione Visualização do Kitde Ferramentas> do Project > Teamsno Teams.

    Captura de tela21 do Visual Studio com as opções Project, Teams Toolkit e Preview no Teams são realçadas em vermelho.

  2. Selecione Adicionar quando solicitado para instalar o aplicativo no Teams.

    Captura de tela22 do Teams exibindo a opção Adicionar para adicionar o aplicativo Blazor. A opção Adicionar realçada em vermelho.

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

    Captura de tela23 do Microsoft Teams com Seu aplicativo está em execução em seu ambiente do Azure realçado em vermelho.

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

    Captura de tela24 da opção Microsoft Teams com Autorizar em Guia Pessoal realçada em vermelho.

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

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

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

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

    Sua fotografia e detalhes aparecem em sua Guia Pessoal.

    Captura de tela26 da Guia Pessoal exibindo informações básicas.

Parabéns

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

Migrar sua guia configurável para a guia estática

Observação

  • A migração da guia configurável para a guia estática só está disponível na versão prévia do desenvolvedor público.
  • Para migrar sua guia configurável para a guia estática, use o manifesto do aplicativo v1.16 ou posterior.

A funcionalidade de guia estática é estendida para dar suporte a chats e reuniões de grupo. Você pode atualizar sua guia configurável existente para a guia estática e adicionar escopos diferentes à guia estática.

Para alterar sua guia configurável para a guia estática:

  1. Mova sua lógica de configuração do espaço de configurationUrl código para o contentUrl espaço de código.

  2. Adicione a staticTabs propriedade ao manifesto do aplicativo com scopes e context parâmetros. A seguir está um exemplo de manifesto de 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", 
    "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)" 
  }
],

    Para obter mais informações, consulte página de configuração e guia estática.

Se o aplicativo der suporte à guia configurável, você deverá continuar a manter a propriedade no manifesto do configurableTab aplicativo para garantir a compatibilidade com a compatibilidade com as guias fixadas anteriormente. Como você só pode fixar guias estáticas a partir de agora, é importante que as guias configuráveis anteriores continuem com suporte.

Próxima etapa

Criar uma página de conteúdo

Confira também