Criar um separador configurável

Criar um separador configurável 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
   

Gerar a sua aplicação com um separador configurável

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

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:

   

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

   

3. Para exibir a página de configuração da guia, vá para http://localhost:3007/<yourDefaultAppNameTab>/config.html.

   

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

Carregar seu aplicativo no Teams

1. Aceda ao Teams e selecione Aplicações .

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

   

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

   Se Adicionar não for apresentado na caixa de diálogo, remova o seguinte código do manifesto da pasta zip do pacote de aplicação carregado. Zipe novamente a pasta e carregue-a para o Teams.

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

5. Siga as instruções para adicionar um separador. Existe uma caixa de diálogo de configuração personalizada para o separador configurável.

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

   

   O separador configurável foi criado e adicionado com êxito no Teams.

Criar um separador configurável personalizado 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 a sua aplicação com um separador configurável

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

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

<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

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

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,aceda à pasta Páginas Partilhadas>, abra _Layout.cshtml e adicione o seguinte à secção etiquetas:

   <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, aceda sempre à API JavaScript do Microsoft Teams.

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

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

   Em Tab.cshtml, a aplicação apresenta ao utilizador duas opções para apresentar o separador com um ícone vermelho ou cinzento. O botão Selecionar Cinzento ou Selecionar Vermelho é acionado saveGray() ou saveRed() , respetivamente, define pages.config.setValidityState(true)e ativa Guardar na página de configuração. Este código informa o Teams de que a configuração de requisitos está concluída e que pode prosseguir com a instalação. Os parâmetros de pages.config.setConfig são definidos. Por fim, saveEvent.notifySuccess() é chamado para indicar que o URL do conteúdo foi resolvido 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 tiver de reiniciar o serviço ngrok, este devolve um novo URL e terá de atualizar a aplicação com o novo URL.

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

1. Aceda ao 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 Funcionalidades da aplicação, selecione Aplicação de grupo e 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 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 à equipepara configurar a guia em uma equipe. Configure sua guia e selecione Salvar. Sua guia agora está disponível no Teams.

   

   O separador configurável foi criado e adicionado com êxito no Teams.

Criar um separador configurável personalizado 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 a sua aplicação com um separador configurável

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

   • https://localhost:3978/
   • https://localhost:3978/privacy
   • https://localhost:3978/tou

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc(options => options.EnableEndpointRouting = false);
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseMvc();
}

<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

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

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, aceda à pasta Vistas>Partilhadas, abra _Layout.cshtml e adicione o seguinte à secção etiquetas:

   <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, aceda à pasta Tab e abra Tab.cshtml

   Em Tab.cshtml, a aplicação apresenta ao utilizador duas opções para apresentar o separador com um ícone vermelho ou cinzento. O botão Selecionar Cinzento ou Selecionar Vermelho é acionado saveGray() ou saveRed() , respetivamente, define pages.config.setValidityState(true)e ativa Guardar na página de configuração. Este código informa o Teams de que a configuração de requisitos está concluída e que 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 tiver de reiniciar o serviço ngrok, este devolve um novo URL e terá de atualizar a aplicação com o novo URL.

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

1. Aceda ao 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 Funcionalidades da aplicação, selecione Aplicação de grupo e 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 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 à equipepara configurar a guia em uma equipe. Configure sua guia e selecione Salvar. Sua guia agora está disponível no Teams.

   

   O separador configurável foi criado e adicionado com êxito 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.

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

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

npm install -g @microsoft/teamsfx-cli

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

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

   

   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.

   

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

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.

   

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

      

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

      

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

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

   Selecione a funcionalidade da aplicação:

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

   2. Selecione Criar.

   

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

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.

   

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

   

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 a aplicação personalizada (o URL está registado no manifesto da aplicação).

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

   

   O Teams é carregado num browser.

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

   

   Parabéns, 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.

   

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

   

   A fotografia e os detalhes são apresentados no separador do canal.

   

   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 de 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:

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.

   

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.

   

   É apresentado um aviso de aprovisionamento.

3. Selecione Aprovisionar.

   

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

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

   

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

   

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

   É apresentado o seu app-dev-rg.

   

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

   

2. Selecione OK.

   

   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.

   

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

   

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

   

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

   

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

   

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

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

   

Parabéns;

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