Criar uma guia de canal e grupo personalizado com Node.js e o gerador Yeoman para o Microsoft TeamsCreate a custom channel and group tab with Node.js and the Yeoman Generator for Microsoft Teams

Observação

Este QuickStart segue as etapas descritas no Build Your First Microsoft Teams app wiki encontrado no repositório do GitHub do Microsoft OfficeDev.This quickstart follows the steps outlined in the Build Your First Microsoft Teams App Wiki found in the Microsoft OfficeDev GitHub repository.

Neste QuickStart, vamos examinar a criação de uma guia de canal e de grupo personalizada usando o gerador Yeoman do teams.In this quickstart we'll walk-through creating a custom channel and group tab using the Teams Yeoman generator.

Pré-requisitosPrerequisites

  • Para concluir este QuickStart, você precisará de um locatário do Office 365 e de uma equipe configurada para permitir o carregamento de aplicativos personalizados habilitados.To complete this quickstart you will need an Office 365 tenant and a team configured with Allow uploading custom apps enabled. Para saber mais, confira preparar seu locatário do Office 365.To learn more, see Prepare your Office 365 tenant.

    • Se você não tiver uma conta do Office 365, você poderá inscrever-se em uma assinatura gratuita por meio do programa de desenvolvedor do Office 365.If you don't currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. A assinatura permanecerá ativa, contanto que você esteja usando-a para desenvolvimento contínuo.The subscription will remain active as long as you're using it for ongoing development. Confira Bem-vindo ao programa para desenvolvedores do Office 365.See Welcome to the Office 365 Developer Program.

Além disso, este projeto requer que você tenha o seguinte instalado em seu ambiente de desenvolvimento:In addition, this project requires that you have the following installed in your development environment:

  • Qualquer editor de texto ou IDE.Any text editor or IDE. Você pode instalar e usar o Visual Studio Code gratuitamente.You can install and use Visual Studio Code for free.

  • Node. js/NPM.Node.js/npm. Você deve usar a versão mais recente do LTS.You should use the latest LTS version. O Gerenciador de pacotes de nó (NPM) será instalado no seu sistema com a instalação do node. js.The Node Package Manager (npm) will install into your system with the installation of Node.js.

  • Depois de instalar o Node. js com êxito, instale os pacotes do Yeoman e do Gulp-CLI digitando o seguinte no prompt de comando:After you've successfully installed Node.js, install the Yeoman and gulp-cli packages by typing the following in your command prompt:

npm install yo gulp-cli --global
  • Instale o gerador de aplicativos do Microsoft Teams digitando o seguinte no prompt de comando:Install the Microsoft Teams Apps generator by typing the following in your command prompt:
npm install generator-teams --global

Gerar seu projetoGenerate your project

  • Abra um prompt de comando e crie um novo diretório para o projeto de tabulação.Open a command prompt and create a new directory for your tab project.

  • Para iniciar o gerador, navegue até o novo diretório e digite o seguinte comando:To start the generator, navigate to your new directory and type the following command:

yo teams
  • Em seguida, você fornecerá uma série de valores que serão usados no arquivo manifest. JSON do aplicativo:Next, you'll provide a series of values that will be used in your application's manifest.json file:

captura de tela de abertura do gerador

Qual é o nome da sua solução?What is your solution name?

Este é o nome do projeto.This is your project name. Você pode aceitar o nome sugerido pressionando ENTER.You can accept the suggested name by pressing enter.

Onde você deseja colocar os arquivos?Where do you want to place the files?

No momento, você está no diretório do projeto.You're currently in your project directory. Pressione Enter.Press enter.

Título do seu projeto de aplicativo do Microsoft Teams?Title of your Microsoft Teams app project?

Este é o nome do pacote de aplicativos e será usado no manifesto do aplicativo e na descrição.This is your app package name and will be used in the app manifest and description.

Seu nome (empresa)? (máximo de 32 caracteres)Your (company) name? (max 32 characters)

O nome da sua empresa será usado no manifesto do aplicativo.Your company name will be used in the app manifest.


Qual versão do manifesto você gostaria de usar?Which manifest version would you like to use?

Selecione o esquema padrão.Select the default schema.

Insira sua ID de parceiro da Microsoft, se você tiver uma? (Deixe em branco para ignorar)Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)

Este campo não é obrigatório e só deve ser usado se você já faz parte da rede de parceiros da Microsoft.This field isn't required and should only be used if you're already part of the Microsoft Partner Network.

O que você deseja adicionar ao seu projeto?What do you want to add to your project?

Selecione ( * ) uma tabulação.Select ( * ) A Tab.

A URL na qual você hospedará esta solução?The URL where you will host this solution?

Por padrão, o gerador sugere uma URL de sites do Azure.By default the generator suggests an Azure Web Sites URL. Você só testará seu aplicativo localmente, portanto, uma URL válida não é necessária para concluir este QuickStart.You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.

Deseja incluir a estrutura de teste e os testes iniciais? (s/N)Would you like to include Test framework and initial tests? (y/N)

Escolha não incluir uma estrutura de teste para este projeto.Choose not to include a test framework for this project. O padrão é sim; Digite n.The default is yes; enter n.

Gostaria de usar o Azure Application insights para telemetria? (s/N)Would you like to use Azure Applications Insights for telemetry? (y/N)

Escolha não incluir o Azure Application insights.Choose not to include Azure Application Insights. O padrão é não; Digite n.The default is no; enter n.

Nome da guia padrão (máximo de 16 caracteres)?Default Tab Name (max 16 characters)?

Nomeie sua guia. Este nome de guia será usado em todo o projeto como um componente de caminho de arquivo/URL.Name your tab. This tab name will be used throughout your project as a file/URL path component.

Você deseja criar uma guia configurável ou estática?Do you want to create a configurable or static tab?

Use as teclas de seta para selecionar a guia configurável.Use the arrow keys to select configurable tab.

Quais escopos você pretende usar para sua guia?What scopes do you intend to use for your Tab?

Você pode selecionar uma equipe e/ou um chat de grupoYou can select a Team and/or a group chat

Deseja que esta guia esteja disponível no SharePoint Online? (S/n)Do you want this tab to be available in SharePoint Online? (Y/n)

Selecione n.Select n.

Importante

O componente de caminho yourDefaultTabNameTab, referenciado neste QuickStart, é o valor que você inseriu no gerador para o nome de guia padrão mais a guiaWord.The path component yourDefaultTabNameTab, referenced in this quickstart, is the value that you entered in the generator for Default Tab Name plus the word Tab.

Por exemplo: DefaultTabName: MyTab => /MyTabTab/For example: DefaultTabName: MyTab => /MyTabTab/

No diretório do projeto, navegue até o seguinte:In your project directory, navigate to the following:

./src/app/scripts/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.tsx

É aí que você encontrará sua lógica de tabulação.That is where you'll find your tab logic. Localize o render() método e adicione a seguinte <div> marca e conteúdo à parte superior do <PanelBody> código do contêiner:Locate the render() method and add the following <div> tag and content to the top of the <PanelBody> container code:

    <PanelBody>
        <div style={styles.section}>
            Hello World! Yo Teams rocks!
        </div>
    </PanelBody>

Certifique-se de salvar o arquivo atualizado.Make sure to save the updated file.

Criar e executar o aplicativoBuild and Run Your Application

Abra um prompt de comando no diretório do projeto para concluir as próximas tarefas.Open a command prompt in your project directory to complete the next tasks.

Criar o pacote de aplicativosCreate the app package

Você precisará de um pacote de aplicativos para testar sua guia no Microsoft Teams.You'll need an app package to test your tab in Teams. É uma pasta zip que contém os seguintes arquivos necessários:It's a zip folder that contains the following required files:

  • Um ícone de cor completa medindo 192 x 192 pixels.A full color icon measuring 192 x 192 pixels.
  • Um ícone de contorno transparente medindo 32 x 32 pixels.A transparent outline icon measuring 32 x 32 pixels.
  • Um arquivo manifest. JSON que especifica os atributos do seu aplicativo.A manifest.json file that specifies the attributes of your app.

O pacote é criado por meio de uma tarefa Gulp que valida o arquivo manifest. JSON e gera a pasta zip no ./package directory.The package is created via a gulp task that validates the manifest.json file and generates the zip folder in the ./package directory. No prompt de comando, digite:In the command prompt enter:

gulp manifest

Criar seu aplicativoBuild your application

O comando Build compila sua solução na pasta . pasta/dist. .The build command transpiles your solution into the ./dist folder. Em seguida, digite:Next,enter:

gulp build

Executar o aplicativo no localhostRun your application in localhost

Inicie um servidor Web local, inserindo o seguinte:Start a local web server by entering the following:

gulp serve

Insira http://localhost:3007/<yourDefaultAppNameTab>/ no navegador e exiba a página inicial do aplicativo:Enter http://localhost:3007/<yourDefaultAppNameTab>/ in your browser and view your application's home page:

captura de tela da Home Page

Para exibir a página de configuração de guia, vá para https://localhost:3007/<yourDefaultAppNameTab>/config.html .To view your tab configuration page go to https://localhost:3007/<yourDefaultAppNameTab>/config.html. Você verá o seguinte:You should see the following:

captura de tela da página de configuração

Estabelecer um túnel seguro para sua guiaEstablish a secure tunnel to your tab

O Microsoft Teams é um produto totalmente baseado em nuvem e exige que o conteúdo da guia esteja disponível na nuvem usando pontos de extremidade HTTPS.Microsoft Teams is an entirely cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. O Microsoft Teams não permite hospedagem local, portanto, você precisa publicar sua guia em uma URL pública ou usar um proxy que exporá sua porta local para uma URL voltada para a Internet.Teams doesn't allow local hosting, therefore, you need to either publish your tab to a public URL or use a proxy that will expose your local port to an internet-facing URL.

Para testar sua extensão de guia, você usará o ngrok, que é integrado a esse aplicativo.To test your tab extension, you'll use ngrok, which is built into this application. O Ngrok é uma ferramenta de software de proxy reverso que criará um túnel para os pontos de extremidade HTTPS publicamente disponíveis do servidor Web em execução localmente.Ngrok is a reverse proxy software tool that will create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Os pontos de extremidade da Web do seu servidor estarão disponíveis durante a sessão atual em sua máquina local.Your server's web endpoints will be available during the current session on your local machine. Quando o computador é desligado ou vai para a suspensão, o serviço não estará mais disponível.When the machine is shut down or goes to sleep the service will no longer be available.

No prompt de comando, saia do localhost e digite o seguinte:In your command prompt, exit localhost and enter the following:

gulp ngrok-serve

Importante

Depois que a guia tiver sido carregada no Microsoft Teams e salva com êxito, você poderá exibi-la na Galeria de guias, adicioná-la à barra de guias e interagir com ela até que a sessão de túnel do ngrok seja encerrada.After your tab has been uploaded to Microsoft teams and successfully saved, you can view it in the tabs gallery, add it to the tabs bar, and interact with it until your ngrok tunnel session ends. Se você reiniciar sua sessão do ngrok, será necessário atualizar seu aplicativo com a nova URL.If you restart your ngrok session, you'll need to update your app with the new URL.

Carregar seu aplicativo para o Microsoft TeamsUpload your application to Teams

  • Abra o cliente do Microsoft Teams.Open the Microsoft Teams client. Se você usar a versão baseada na Web , poderá inspecionar seu código de front-end usando as ferramentas de desenvolvedordo navegador.If you use the web based version you can inspect your front-end code using your browser's developer tools.
  • No painel YourTeams à esquerda, selecione o ... menu ao lado da equipe que você está usando para testar sua guia e escolha Gerenciar equipe.In the YourTeams panel on the left, select the ... menu next to the team that you're using to test your tab and choose Manage team.
  • No painel principal, selecione aplicativos na barra de guias e escolha carregar um aplicativo personalizado localizado no canto inferior direito da página.In the main panel select Apps from the tab bar and choose Upload a custom app located in the lower right-hand corner of the page.
  • Abra o diretório do projeto, navegue até a pasta ./Package , selecione a pasta zip do pacote de aplicativos e escolha abrir.Open your project directory, browse to the ./package folder, select the app package zip folder and choose Open. Sua guia será carregada no Microsoft Teams.Your tab will upload into Teams.
  • Retorne à sua equipe, escolha o canal onde você deseja exibir a guia, selecione ➕ na barra de guias e escolha sua guia na galeria.Return to your team, choose the channel where you would like to display the tab, select ➕ from the tab bar, and choose your tab from the gallery.
  • Siga as instruções para adicionar uma guia. Observe que há uma caixa de diálogo de configuração personalizada para a guia canal/grupo.Follow the directions for adding a tab. Note that there's a custom configuration dialog for your channel/group tab.
  • Selecione salvar e sua guia será adicionada à barra de guias do canal.Select Save and your tab will be added to the channel's tab bar.