Início rápido: crie uma guia pessoal personalizada com Node.js e o Gerador Yeoman para o Microsoft TeamsQuickstart: Create a custom personal tab with Node.js and the Yeoman Generator for Microsoft Teams

Observação

Esse início rápido 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 início rápido, vamos passo a passo criando uma guia pessoal personalizada usando o gerador Yeoman do Teams.In this quickstart we'll walk-through creating a custom personal tab using the Teams Yeoman generator. Também carregaremos o aplicativo para a Equipe.We'll also upload the application to Team.

Pré-requisitosPrerequisites

  • Para concluir esse início rápido, você precisará de um locatário do Office 365 e uma equipe configurada com 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 no momento, poderá se inscrever para uma assinatura gratuita por meio do Programa de Desenvolvedores 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 enquanto você a estiver usando para desenvolvimento contínuo.The subscription will remain active as long as you're using it for ongoing development. Confira Bem-vindo ao Programa de Desenvolvedores do Office 365.See Welcome to the Office 365 Developer Program.

Além disso, este projeto exige 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 Visual Studio Código gratuitamente.You can install and use Visual Studio Code for free.

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

  • Depois de instalar o Node.js, instale os pacotes Yeoman e 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 do Microsoft Teams Apps 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 seu projeto de guia.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 arquivomanifest.js no 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 solução?What is your solution name?

Esse é o nome do seu 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?

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

Seu nome (empresa) ? (máx. 32 caracteres)Your (company) name? (max 32 characters)

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


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

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

Scaffolding rápido? (Y/n)Quick scaffolding? (Y/n)

O padrão é sim; insira n para inserir sua ID do Microsoft Partner.The default is yes; enter n to enter your Microsoft Partner Id.

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

Esse 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 guia.Select ( * ) A Tab.

A URL onde você hospedará essa 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ó estará testando seu aplicativo localmente, portanto, uma URL válida não é necessária para concluir esse início rápido.You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.

Você gostaria de incluir a estrutura de teste e testes iniciais? (y/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; enter n.The default is yes; enter n.

Você gostaria de usar o Azure Applications Insights para telemetria? (y/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; enter n.The default is no; enter n.

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

Nomeia sua guia. Esse nome de guia será usado em todo o seu 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 estática.Use the arrow keys to select static tab.

Importante

O componente de caminho que seuDefaultTabNameTab, referenciado neste início rápido, é o valor que você inscrevia no gerador para Nome da Guia Padrão mais a palavra Tab.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/

Criar sua guia pessoalCreate your personal tab

Para adicionar uma guia pessoal a esse aplicativo, você criará uma página de conteúdo e atualizará arquivos existentes:To add a personal tab to this application you'll create a content page and update existing files:

  • No editor de código, crie um novo arquivo HTML, personal.html e adicione a seguinte marcação:In your code editor, create a new HTML file, personal.html and add the following markup:
<!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>
  • Salve personal.html na pasta web do aplicativo:Save personal.html in your application's web folder:
./src/app/web/<yourDefaultTabNameTab>/personal.html
  • Abra manifest.jsno editor de código:Open manifest.json in your code editor:
./src/manifest/manifest.json/

Adicione o seguinte à matriz staticTabs vazia ( ) e adicione o seguinte objeto staticTabs":[] JSON:Add the following to the empty staticTabs array (staticTabs":[]) and add the following JSON object:

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

Lembre-se de atualizar o componente de caminho "contentURL" yourDefaultTabNameTab com o nome da guia real.Remember to update the "contentURL" path component yourDefaultTabNameTab with your actual tab name.

  • Salve omanifest.js atualizado em.Save the updated manifest.json.

  • Sua página de conteúdo deve ser atendida em um IFrame.Your content page must be served in an IFrame. Abra Tab.ts no editor de código:Open Tab.ts in your code editor:

./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
  • Adicione o seguinte à lista de decoradores IFrame:Add the following to the list of IFrame decorators:
 @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
  • Salve o arquivo Tab.ts atualizado.Make sure to save the updated Tab.ts file. Seu código de tabulação está completo.Your tab code is complete.

Criar e executar seu 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 sua guia pessoal, vá para http://localhost:3007/<yourDefaultAppNameTab>/personal.htmlTo view your personal tab, go to http://localhost:3007/<yourDefaultAppNameTab>/personal.html

captura de tela de guia pessoal

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 seja disponibilizado 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 Teams não permite a hospedagem local, portanto, você precisa publicar sua guia em uma URL pública ou usar um proxy que exponha sua porta local a 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 tabulação, você usará 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 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 no computador local.Your server's web endpoints will be available during the current session on your local machine. Quando o computador é desligado ou vai para o sono, 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 insira o seguinte:In your command prompt, exit localhost and enter the following:

gulp ngrok-serve

Importante

Depois que sua guia for carregada para o Microsoft Teams, por meio do ngrok e salva com êxito, você poderá exibi-la no Teams até que a sessão de túnel termine.After your tab has been uploaded to Microsoft teams, via ngrok, and successfully saved, you can view it in Teams until your tunnel session ends.

Carregar seu aplicativo no 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 front-end usando as ferramentas de desenvolvedor do 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, clique com o botão direito do mouse e escolha Abrir.Open your project directory, browse to the ./package folder, select the zip folder, right-click, and choose Open. Sua guia será carregada no Teams.Your tab will upload into Teams.

Exibir suas guias pessoaisView your personal tabs

Na barra de entrada localizada à extrema esquerda do cliente do Teams, selecione o menu e ... escolha seu aplicativo na lista.In the navbar located at the far-left of the Teams client, select the ... menu and choose your app from the list.