Crie seu primeiro canal e guia de grupo para o Microsoft TeamsBuild your first channel and group tab for Microsoft Teams

Este tutorial ensina a criar uma guia de canal básico também conhecida como uma guia de grupo , que é uma página de tela inteira para um canal de equipe ou chat.This tutorial teaches you to build a basic channel tab also known as a group tab, which is a full-screen page for a team channel or chat. Você também pode configurar alguns aspectos desse tipo de guia, por exemplo, renomear a guia para que ela seja significativa para seu canal, o que você não pode fazer em uma Guia Pessoal.You can also configure some aspects of this kind of tab, for example, rename the tab so it's meaningful to their channel, which you cannot do in a Personal Tab.

O que você aprenderáWhat you'll learn

  • Crie um projeto de aplicativo usando o Microsoft Teams Toolkit para Visual Studio Code.Create an app project using the Microsoft Teams Toolkit for Visual Studio Code.
  • Entenda as configurações do aplicativo e os scaffolding relevantes para as guias de canal.Understand the app configurations and scaffolding relevant to channel tabs.
  • Criar conteúdo de tabulação e configuração de tabulação.Create tab content and tab configuration.
  • Crie e execute seu aplicativo em equipes para teste.Build and run your app in teams for testing.

Pré-requisitosPrerequisites

Certifique-se de entender como configurar e criar um aplicativo simples do Teams.Make sure that you understand how to set up and build a simple Teams app. Para obter mais informações, consulte criar seu primeiro aplicativo do Microsoft Teams "Hello, World!".For more information, see create your first Microsoft Teams "Hello, World!" app.

1. Crie seu projeto de aplicativo1. Create your app project

O microsoft Teams Toolkit ajuda você a configurar seu aplicativo e configurar o scaffolding relevante para as guias de canal e grupo.The Microsoft Teams Toolkit helps you to configure your app and set up the scaffolding relevant to channel and group tabs. Ele também contém uma página de configuração básica e uma página de conteúdo que exibe um "Hello, World!"It also contains a basic configuration page and content page that displays a "Hello, World!" Mensagem.message.

Para criar seu projeto de aplicativoTo create your app project

  1. Vá para Visual Studio Código e selecione Microsoft Teams na Barra de Atividades à esquerda.

  2. Entre com sua conta de desenvolvimento do Microsoft 365 quando solicitado a fazer isso.Sign in with your Microsoft 365 development account when prompted to do so.

  3. Na tela Selecionar projeto, selecione JS (JavaScript) em Canal e aplicativo de grupo.On the Select project screen, select JS (JavaScript) under Channel and group app.

  4. Insira um nome para seu aplicativo do Teams.Enter a name for your Teams app.

    Observação

    Esse é o nome padrão para seu aplicativo e também o nome do diretório do projeto do aplicativo em sua máquina local.This is the default name for your app and also the name of the app project directory on your local machine.

  5. Selecione Guia Grupo ou Canal do Teams.Select Group or Teams channel tab.

  6. Selecione Concluir na parte inferior da tela para configurar seu projeto e salvar seu projeto em seu computador local.Select Finish at the bottom of the screen to configure your project and save your project on your local machine.

2. Entenda os componentes do projeto do aplicativo2. Understand your app project components

Grande parte das configurações e scaffolding do aplicativo são configuradas automaticamente quando você cria seu projeto com o kit de ferramentas.Much of the app configurations and scaffolding are set up automatically when you create your project with the toolkit. Vamos ver os principais componentes para a criação de uma guia de canal.Let's look at the main components for building a channel tab.

  • Configurações do aplicativo: Abra o App Studio no kit de ferramentas para exibir e atualizar as configurações do aplicativo.App configurations: Open App Studio in the toolkit to view and update your app configurations.
  • Estrutura de aplicativos: o scaffolding do aplicativo fornece os componentes necessários para renderizar sua guia de canal no Teams.App scaffolding: The app scaffolding provides the components needed for rendering your channel tab in Teams. Há muito com o que você pode trabalhar, no entanto, por enquanto, vamos nos concentrar no seguinte:There's a lot you can work with, however, for now let's focus on the following:
    • Os arquivos localizados no src/components diretório do seu projeto:The files located in the src/components directory of your project:
      • Tab.js para renderizar a página de conteúdo da guia.Tab.js for rendering your tab's content page.
      • TabConfig.js para renderizar a página de configuração da guia.TabConfig.js for rendering your tab's configuration page.
    • SDK do cliente JavaScript do Microsoft Teams, que vem pré-carregado nos componentes front-end do seu projeto.Microsoft Teams JavaScript client SDK, which comes pre-loaded in your project's front-end components.

3. Personalizar sua página de conteúdo de tabulação3. Customize your tab content page

  1. Copie e modifique o exemplo de código a seguir com informações relevantes para sua organização.Copy and modify the following code sample with information that's relevant to your organization. Você também pode usar o trecho de código como ele é:You can also use the snippet as it is:
    <div>
      <h1>Important Contacts</h1>
        <ul>
          <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
          <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
          <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
        </ul>
    </div>
    
  2. Vá para o src/components diretório e abra o Tab.js arquivo.Go to the src/components directory and open the Tab.js file. Localize render() a função e colar seu código return() dentro, conforme mostrado no exemplo a seguir:Locate the render() function and paste your code inside return() as shown in the following example:
    render() {
    
        let userName = Object.keys(this.state.context).length > 0 ? this.state.context['upn'] : "";
    
        return (
        <div>
          <h1>Important Contacts</h1>
            <ul>
              <li>Help Desk: <a href="mailto:support@company.com">support@company.com</a></li>
              <li>Human Resources: <a href="mailto:hr@company.com">hr@company.com</a></li>
              <li>Facilities: <a href="mailto:facilities@company.com">facilities@company.com</a></li>
            </ul>
        </div>
        );
    }
    
  3. Vá para o diretório e atualize o arquivo com o seguinte código para tornar os links de email mais fáceis de ler em qualquer src/components App.css tema usado:Go to the src/components directory and update the App.css file with the following code to make the email links easier to read in any theme that is used:
    a {
      color: inherit;
    }
    

4. Personalizar sua página de configuração de tabulação4. Customize your tab configuration page

Cada guia em um canal ou chat tem uma página de configuração, um modal com pelo menos uma opção de configuração que é exibida quando os usuários adicionam seu aplicativo.Every tab in a channel or chat has a configuration page, a modal with at least one setup option that displays when users add your app. A página de configuração por padrão pergunta aos usuários se eles querem notificar o canal ou o chat quando a guia estiver instalada.The configuration page by default asks users if they want to notify the channel or chat when the tab is installed. Você pode personalizar a página de configuração adicionando conteúdo personalizado.You can customize the configuration page by adding custom content.

Para adicionar conteúdo personalizado, abra o arquivo do diretório e atualize o conteúdo de espaço reservado dentro, conforme TabConfig.js mostrado no exemplo a src/components return() seguir:To add custom content, open TabConfig.js file from the src/components directory and update the placeholder content inside return() as shown in the following example:

return (
    <div>
      <h1>Add My Contoso Contacts</h1>
      <div>
        Select <b>Save</b> to add our organization's important contacts to this workspace.
      </div>
    </div>
);

Dica

Dê uma breve informação sobre seu aplicativo nesta página, pois essa seria a primeira vez que os usuários estão lendo sobre ele.Give a brief information about your app on this page since this would be the first time users are reading about it. Você também pode incluir opções de configuração personalizadas ou um fluxode trabalho de autenticação , o que é comum nas páginas de configuração de tabulação.You can also include custom configuration options or an authentication workflow, which is common on tab configuration pages.

5. Personalizar o nome da guia5. Customize your tab name

Quando você adiciona uma guia de canal, o nome do aplicativo é exibido por padrão, por exemplo, o primeiro aplicativo.When you add a channel tab, the app name displays by default, for example, first-app. Você também pode fornecer um nome que faça mais sentido no contexto da colaboração em grupo, por exemplo, Contatos de Equipe:You can also provide a name that makes more sense in the context of group collaboration, for example, Team Contacts:

  1. Vá para o src/components diretório e abra o TabConfig.js arquivo.Go to the src/components directory and open the TabConfig.js file.
  2. Adicione a suggestedDisplayName propriedade com o nome da guia que você deseja exibir por padrão, conforme mostrado no exemplo a microsoftTeams.settings.setSettings seguir:Add the suggestedDisplayName property with the tab name you want to display by default under microsoftTeams.settings.setSettings as shown in the following example:
  microsoftTeams.settings.setSettings({
  "contentUrl": "https://localhost:3000/tab",
  "suggestedDisplayName": "Team Contacts"
});

6. Crie e execute seu aplicativo6. Build and run your app

Este tutorial ensina você a criar e executar seu aplicativo localmente.This tutorial teaches you to build and run your app locally.

  1. Vá para o diretório raiz do seu projeto de aplicativo no Terminal.Go to the root directory of your app project in Terminal.
  2. Executar npm install .Run npm install.
  3. Executar npm start .Run npm start.

Essas informações também estão presentes na README seção do kit de ferramentas.This information is also present in the README section of the toolkit. Seu aplicativo está sendo executado https://localhost:3000 após a compilação com êxito!Your app is running on https://localhost:3000 after the Compiled successfully! aparece no terminal.message appears in the terminal.

7. Fazer sideload do aplicativo no Teams7. Sideload your app in Teams

Seu aplicativo está pronto para teste no Teams.Your app is ready to test in Teams. Para fazer isso, você deve ter uma conta que permita o sideload de aplicativos.To do this, you must have an account that allows app sideloading.

  1. Abra um cliente Web do Teams Visual Studio Código com a tecla F5.Open a Teams web client in Visual Studio Code with the F5 key.

  2. Adicione ( ) como confiável seguindo estas etapas localhost para habilitar o conteúdo do aplicativo a ser exibido no Teams:Add (localhost) as trustworthy by following these steps to enable your app content to display in Teams:

    1. Abra uma nova guia na mesma janela do navegador (Google Chrome por padrão) que foi aberta com a tecla F5.Open a new tab in the same browser window (Google Chrome by default) which opened with the F5 key.
    2. Abra https://localhost:3000/tab e prossiga para a página.Open https://localhost:3000/tab and proceed to the page.
  3. Selecione Adicionar a uma equipe ou Adicionar a um chat e localize um canal ou chat que você pode usar para testes no modal no Teams.Select Add to a team or Add to a chat and locate a channel or chat you can use for testing from the modal in Teams.

  4. Selecione Configurar uma guia. A página de configuração é exibida em um modal.Select Set up a tab. The configuration page displays in a modal.

    Captura de tela de uma página de configuração de guia de canal.

  5. Selecione Salvar para configurar a guia. A página de conteúdo a seguir é exibida:Select Save to configure the tab. The following content page appears:

    Captura de tela de uma guia de canal com exibição de conteúdo estático.

Confira tambémSee also

Próxima etapaNext step