Criar uma guia pessoal

Os separadores pessoais, juntamente com bots de âmbito pessoal, fazem parte de aplicações pessoais e estão no âmbito de um único utilizador. Eles podem ser fixados no painel esquerdo para facilitar o acesso.

Importante

• Para saber como criar um separador com o Teams Toolkit, consulte Criar a sua primeira aplicação de separador com JavaScript.
• Introduzimos a extensão Descrição Geral do Teams Toolkit no Visual Studio Code. Esta versão chega-lhe com muitas novas funcionalidades de desenvolvimento de aplicações. Recomendamos que utilize o Teams Toolkit v5 para criar a sua aplicação Teams.

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

Observação

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

Criar uma guia pessoal 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
   

A seguir estão as etapas para criar uma guia pessoal:

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

Gerar seu aplicativo com uma guia pessoal

1. No prompt de comando, crie um novo diretório para sua guia pessoal.

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.

   

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

   • Qual é o nome da solução?

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

   • Onde você deseja colocar os arquivos?

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

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

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

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

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

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

     Selecione o esquema padrão.

   • Andaimes rápidos? (Y/n)

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

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

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

   • Quais recursos você deseja adicionar ao seu projeto?

     Selecione ( * ) Um separador.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   • Que tipo de Guia você gostaria de criar?

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

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

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

   Observação

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

Adicionar uma página de conteúdo à guia pessoal

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

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

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

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

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

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

    ./src/manifest/manifest.json
   

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

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

   Importante

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

   Por exemplo: o DefaultTabName é MyTab depois /MyTabTab/

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

6. Salve o arquivo manifest.json atualizado.

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

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

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

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

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

Criar um pacote do aplicativo

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

Compilar e executar seu aplicativo

Compilar seu aplicativo

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

gulp build

Executar seu aplicativo

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

   gulp serve
   

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

   

3. Navegue por http://localhost:3007/<yourDefaultAppNameTab>/personal.html para exibir sua guia pessoal.

   

Estabelecer um túnel seguro para sua guia

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

gulp ngrok-serve

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

Carregar seu aplicativo no Teams

1. Aceda ao Teams e selecione Aplicaçõ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 e escolha Abrir.

   

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

   

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

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

Criar uma guia pessoal 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
   

A seguir estão as etapas para criar uma guia pessoal:

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

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

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

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

   • <http://localhost:3978/>
   • <http://localhost:3978/personalTab>
   • <http://localhost:3978/privacy>
   • <http://localhost:3978/tou>

Rever o código fonte

Startup.cs

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

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

pasta wwwroot

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

Index.cshtml

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

Pasta AppManifest

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

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

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

.csproj

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

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

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

Atualizar e executar seu aplicativo

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

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

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

3. Selecione Salvar.

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

Estabelecer um túnel seguro para sua guia

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

ngrok http 3978 --host-header=localhost

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

1. Vá para Portal do Desenvolvimento.

2. Abra Aplicativos e selecione Importar aplicativo.

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

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

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

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

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

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

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

10. Selecione Salvar.

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

Visualizar seu aplicativo no Teams

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

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

   

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

Criar uma guia pessoal 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 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
   

A seguir estão as etapas para criar uma guia pessoal:

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

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

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

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

   • <http://localhost:3978>
   • <http://localhost:3978/personalTab>
   • <http://localhost:3978/privacy>
   • <http://localhost:3978/tou>

Rever o código fonte

Startup.cs

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

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

pasta wwwroot

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

Pasta AppManifest

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

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

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

.csproj

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

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

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

Modelos

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

Visualizações

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

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

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

Controladores

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

Atualizar e executar seu aplicativo

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

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

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

3. Selecione Salvar.

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

Estabelecer um túnel seguro para sua guia

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

ngrok http 3978 --host-header=localhost

Atualize seu pacote de aplicativos com o Portal do Desenvolvedor

1. Vá para Portal do Desenvolvimento.

2. Abra Aplicativos e selecione Importar aplicativo.

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

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

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

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

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

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

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

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

10. Selecione Salvar.

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

Visualizar seu aplicativo no Teams

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

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

   

   O seu separador pessoal foi criado e adicionado com êxito no Teams.Também pode reordenar o seu separador pessoal 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.

Observação

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

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

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

Preparar o ambiente de desenvolvimento

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

Instalar o Microsoft Teams Toolkit

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

Versão mais recente do Visual Studio

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

Para instalar a extensão do Microsoft Teams Toolkit:

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

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

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

   

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

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

6. Selecione Instalar.

   

   O Visual Studio é instalado dentro de alguns minutos.

Linha de comando

Para instalar a CLI do TeamsFx, utilize o npm gestor de pacotes:

npm install -g @microsoft/teamsfx-cli

Consoante a configuração, poderá ter de utilizar sudo para instalar a CLI:

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

Esta condição é mais comum em sistemas Linux e macOS.

Certifique-se de que adiciona a cache global do npm ao seu PATH. Normalmente, este passo é feito como parte do instalador do Node.js.

Pode utilizar a CLI com o teamsfx comando . Verifique se o comando está a funcionar ao executar teamsfx -h.

Cuidado

Antes de poder executar o TeamsFx nos terminais do PowerShell, tem de ativar a política de execução assinada remotamente para o PowerShell.

Configurar o seu inquilino de desenvolvimento do Teams

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

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

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

Já tem um inquilino e o acesso de administrador? Vamos verificar se tem mesmo!

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 tabulação.

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.

   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.

   

   Uma recapitulação rápida da criação de uma aplicação de separador do Teams.

   Veja esta breve recapitulação para criar uma aplicação de separador do Teams.

   

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

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

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

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

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

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

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

Para criar e executar a sua aplicação:

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

   

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

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

   

   O Teams é carregado num browser.

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

   

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

   

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

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

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

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

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

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

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

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

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

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

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

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

   

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 do 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. Clique em 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!

   

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

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

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

   

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

Reordenar guias pessoais estáticas

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

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

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

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

Observação

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

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

Para expandir os separadores estáticos para conversas de grupo, canais e reuniões, atualize o manifesto da aplicação com os scopes parâmetros e context na staticTabs propriedade .

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

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

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

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

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

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

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

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

Exemplo de código

Nome do exemplo	Descrição	.NET	Node.js	Manifesto
Separador pessoal	Aplicação de exemplo, que mostra o Separador pessoal personalizado com ASP.NET núcleo para conversas de grupo, canais e reuniões.	View	NA	View

Próxima etapa

Criar uma guia de canal ou grupo

Confira também

• Compilar guias para o Teams
• Criar um separador de canal ou separador de grupo
• Compartilhar com o Teams a partir do aplicativo ou guia pessoal
• Portal do Desenvolvedor do Teams
• Esquema de manifesto do aplicativo para o Teams
• Criar guias com Cartões Adaptáveis
• Guias em dispositivos móveis