Criar aplicativos com o Microsoft Teams Toolkit e o Visual Studio CodeBuild apps with the Microsoft Teams Toolkit and Visual Studio Code

O Microsoft Teams Toolkit permite que você crie aplicativos personalizados do teams diretamente no ambiente de código do Visual Studio.The Microsoft Teams Toolkit enables you to create custom Teams apps directly within the Visual Studio Code environment. O kit de ferramentas orienta você durante o processo e oferece tudo o que você precisa para criar, depurar e iniciar o aplicativo Teams.The toolkit guides you through the process and provides everything you need to build, debug, and launch your Teams app.

Instalando o Teams ToolkitInstalling the Teams Toolkit

O Microsoft Teams Toolkit para Visual Studio Code está disponível para download no Visual Studio Marketplace ou diretamente como uma extensão dentro do Visual Studio Code.The Microsoft Teams Toolkit for Visual Studio Code is available for download from the Visual Studio Marketplace or directly as an extension within Visual Studio Code.

Dica

Após a instalação, você deve ver o Teams Toolkit na barra de atividade de código do Visual Studio.After installation, you should see the Teams Toolkit in the Visual Studio Code activity bar. Caso contrário, clique com o botão direito do mouse na barra de atividades e selecione Microsoft Teams para fixar o kit de ferramentas para facilitar o acesso.If not, right-click within the activity bar and select Microsoft Teams to pin the toolkit for easy access.

Usando o kit de ferramentasUsing the toolkit

Configurar um novo projeto do teamsSet up a new Teams project

  1. Crie um espaço de trabalho/pasta para o seu projeto no seu ambiente local.Create a workspace/folder for your project in your local environment.
  2. No Visual Studio Code, selecione o ícone TeamsIn Visual Studio Code, select the Teams icon Ícone do Teams na barra de atividades no lado esquerdo da janela.from the activity bar on the left side of the window.
  3. Selecione abrir o Microsoft Teams Toolkit no menu de comando.Select Open the Microsoft Teams Toolkit from the command menu.
  4. Selecione criar um novo aplicativo do teams no menu de comando.Select Create a new Teams app from the command menu.
  5. Quando solicitado, insira o nome do espaço de trabalho.When prompted, enter the name of the workspace . Ele será usado como o nome da pasta onde o seu projeto residirá e o nome padrão do seu aplicativo.This will be used as both the name of the folder where your project will reside, and the default name of your app.
  6. Pressione Enter e você chegará à tela Adicionar recursos para configurar as propriedades do novo aplicativo.Press Enter and you will arrive at the Add capabilities screen configure the properties for your new app.
  7. Selecione o botão concluir para concluir o processo de configuração.Select the Finish button to complete the configuration process.

Importar um projeto de aplicativo do teams existenteImport an existing Teams app project

  1. No Visual Studio Code, selecione o ícone TeamsIn Visual Studio Code, select the Teams icon Ícone do Teams na barra de atividades no lado esquerdo da janela.from the activity bar on the left side of the window.
  2. Selecione Importar pacote de aplicativos no menu de comandos.Select Import app package from the command menu.
  3. Escolha seu arquivo zip do pacote de aplicativos do teams existente.Choose your existing Teams app package zip file.
  4. Escolha o botão selecionar pacote de publicação .Choose the Select publishing package button. A guia de configuração do kit de ferramentas deve agora ser preenchida com os detalhes do seu aplicativo.The configuration tab of the toolkit should now be populated with your app's details.
  5. No Visual Studio Code, selecione arquivo -> Adicionar pasta ao espaço de trabalho para adicionar seu diretório de código-fonte ao espaço de trabalho do código do Visual Studio.In Visual Studio Code, select File -> Add Folder to Workspace to add your source code directory to the Visual Studio Code workspace.

Configurar seu aplicativoConfigure your app

Em seu núcleo, o aplicativo Teams engloba três componentes:At its core, the Teams app embraces three components:

  1. O cliente Microsoft Teams (Web, desktop ou celular) onde os usuários interagem com seu aplicativo.The Microsoft Teams client (web, desktop or mobile) where users interact with your app.
  2. Um servidor que responde às solicitações de conteúdo que será exibido no Microsoft Teams, por exemplo, o conteúdo da guia HTML ou um cartão adaptável de bot.A server that responds to requests for content that will be displayed in Teams, e.g., HTML tab content or a bot adaptive card .
  3. Um pacote de aplicativos do teams que consiste em três arquivos:A Teams app package consisting of three files:
  • O manifest.jsemThe manifest.json
  • Um ícone de cor para seu aplicativo exibir no catálogo de aplicativos públicos ou de organizaçãoA color icon for your app to display in the public or organization app catalog
  • Um ícone de estrutura de tópicos para exibição na barra de atividades do Microsoft Teams.An outline icon for display on the Teams activity bar.

Quando um aplicativo é instalado, o cliente do teams analisa o arquivo de manifesto para determinar as informações necessárias, como o nome do seu aplicativo e a URL onde os serviços estão localizados.When an app is installed, the Teams client parses the manifest file to determine needed information like the name of your app and the URL where the services are located.

  1. Para configurar seu aplicativo, navegue até a guia Microsoft Teams Toolkit no Visual Studio Code.To configure your app, navigate to the Microsoft Teams Toolkit tab in Visual Studio Code.
  2. Selecione Editar pacote de aplicativos para exibir a página de detalhes do aplicativo .Select Edit app package to view the App details page.
  3. A edição dos campos na página de detalhes do aplicativo atualiza o conteúdo do manifest.jsem um arquivo que será fornecido como parte do pacote de aplicativos.Editing the fields in the App details page updates the contents of the manifest.json file that will ultimately ship as part of the app package. Saiba MaisLearn more

Empacotar seu aplicativoPackage your app

Modificar você é a página de detalhes do aplicativo ou atualizar o manifesto, ou arquivos . env na pasta do seu aplicativo . publish irá gerar automaticamente seu arquivo de Development.zip .Modifying your the app details page or updating the manifest, or .env files in your app's .publish folder will automatically generate your Development.zip file. Você precisará incluir dois ícones na mesma pasta.You'll need to include two icons in that same folder.

Instalar e executar o aplicativo localmenteInstall and run your app locally

Confira o *Compilar e executar conteúdo em sua página inicial do projeto para obter instruções detalhadas para empacotar e testar seu aplicativo.Refer to the *Build and Run content in your project homepage for detailed instructions for packaging and testing your app. Em geral, você precisa instalar o servidor do aplicativo, fazê-lo em execução e, em seguida, configurar uma solução de encapsulamento para que o Microsoft Teams possa acessar o conteúdo em execução do localhost.In general, you need to install your app's server, get it running, then setup a tunneling solution so that Teams can access content running from localhost.

Adicionar um certificado confiável para localhostAdd a trusted certificate for localhost

Se você quiser depurar seu aplicativo baseado em guia no localhost usando HTTPS, será necessário adicionar um certificado para localhost ao Trusted Root Certification Authorities catálogo.If you wish to debug your tab based app on localhost using https, you will need to add a certificate for localhost to Trusted Root Certification Authorities catalog. Você só precisa concluir esta etapa uma vez por máquina.You only need to complete this step once per machine.

Criar e instalar um certificado confiável:

**Create and install a trusted certificate:**
Expanda aquiExpand here
  • Criar e executar o aplicativoBuild and run your app

    • Siga o instuctions na seção criar e executar do Leiame do projeto para que ele seja atendido https://localhost:3000/tab . Geralmente, isso envolverá a npm install execução npm startFollow the instuctions in the Build and Run section of your project Readme so that it's being served from https://localhost:3000/tab. Generally, this will involve executing npm install then npm start
    • Navegue até https://localhost:3000/tab no Google Chrome ou borda Chromium.Navigate to https://localhost:3000/tab from Google Chrome or Edge Chromium.
  • Adquirir o certificado SSL:Acquire the SSL certificate:

    • Abra a janela do Chrome Developer Tools ( ctrl + shift + i / cmd + option + i ).Open the Chrome Developer Tools window (ctrl + shift + i / cmd + option + i).
    • Clique na Security guiaClick on the Security tab
    • Clique em View certificate e você terá a opção de baixar o certificado, arrastando-o para sua área de trabalho no os X, ou clicando na Details guia no Windows e clicando em Copy to File…Click on View certificate and you’ll have the option to download the certificate — either by dragging it to your desktop in OS X, or by clicking on the Details tab in Windows and clicking Copy to File…
    • Nomeie o arquivo <tudo>. cer e salve-o em uma pasta que não exija consentimento do administrador para executar uma ação de gravação.Name the file <anything>.cer and save it to a folder that doesn't require admin consent to perform a write action.
  • Instalar o certificado no WindowsInstall the certificate on Windows

    • Escolha a DER encoded binary X.509 (.CER) opção (a primeira) e salve-a.Choose the DER encoded binary X.509 (.CER) option (the first one) and save it.
    • Clique duas vezes no certificado e instale-o.Double click on the certificate and install it.
    • Escolha Local MachineChoose Local Machine
    • Seleção Place all certificates in the following storeSelect Place all certificates in the following store
    • Escolha Trusted Root Certification AuthoritiesChoose Trusted Root Certification Authorities
    • Confirmar sua instalaçãoConfirm your installation
  • Instalar o certificado Mac os XInstall the certificate Mac OS X

    • No OS X, abra o utilitário de acesso de chaves e selecione System no menu à esquerda.On OS X, open the Keychain Access utility and select System from the menu on the left. Clique no ícone de cadeado para habilitar as alterações.Click the lock icon to enable changes.
    • Clique no botão de adição próximo à parte inferior para adicionar um novo certificado e selecione o localhost.cer arquivo que você arrastou para a área de trabalho.Click the plus button near the bottom to add a new certificate, and select the localhost.cer file you dragged to the desktop. Clique Always Trust na caixa de diálogo exibida.Click Always Trust in the dialog that appears.
    • Após adicionar o certificado ao chaveiro do sistema, clique duas vezes no certificado e expanda a Trust seção dos detalhes do certificado.After adding the certificate to the system keychain, double-click the certificate and expand the Trust section of the certificate details. Selecione Always Trust para cada opção.Select Always Trust for every option.

Importante

Se você receber um aviso de certificado de segurança, navegue até https://localhost:3000/tab . Se o site ainda não for confiável, reinicie seu computador e localhost deverá ser aceito como confiável.If you receive a security certificate warning, navigate to https://localhost:3000/tab. If the site is still not trusted, reboot your machine and localhost should be accepted as trusted.

Executar o aplicativo no Microsoft TeamsRun your app in Teams

  1. Navegue até a barra de atividade no lado esquerdo da janela de código do Visual Studio.Navigate to the activity bar on the left side of the Visual Studio Code window.
  2. Selecione o ícone executar para exibir o modo de exibição executar e depurar .Select the Run icon to display the Run and Debug view.
  3. Você também pode usar o atalho de teclado Ctrl+Shift+D .You can also use the keyboard shortcut Ctrl+Shift+D.

Validar seu aplicativoValidate your app

A página validar permite verificar o pacote do aplicativo antes de enviar o aplicativo para o AppSource.The Validate page allows you to check your app package before submitting your app to AppSource. Basta carregar o pacote de manifesto e a ferramenta de validação verificará seu aplicativo em todos os casos de teste relacionados ao manifesto.Simply upload the manifest package and the validation tool will check your app against all manifest related test cases. Para cada teste com falha, a descrição fornece um link de documentação para ajudá-lo a corrigir o erro.For each failed tests, the description provides a documentation link to help you fix the error. Para os testes difíceis de automatizar, a lista de verificação preliminar detalha 7 dos casos de teste com falha mais comuns, bem como vincular a uma lista de verificação de envio completa.For the tests that are hard to automate, the Preliminary checklist details 7 of the most common failed test cases as well as link to a complete submission checklist.

Publicar seu aplicativo no TeamsPublish your app to Teams

Na home page do seu projeto, você pode carregar seu aplicativo para uma equipe, enviar seu aplicativo para o repositório de aplicativos personalizado da empresa para usuários em sua organização ou enviar seu aplicativo para a origem do aplicativo para todos os usuários do teams.On your project home page, you can upload your app to a team, submit your app to your company custom app store for users in your organization, or submit your app to App Source for all Teams users. Seu administrador de ti revisará esses envios.Your IT admin will review these submissions. Você pode retornar à página publicar para verificar seu status de envio e saber se seu aplicativo foi aprovado ou rejeitado pelo seu administrador de ti. Este também é o local em que você vai enviar atualizações para seu aplicativo ou cancelar qualquer envio ativo no momento.You can return to the Publish page to check on your submission status and learn if your app was approved or rejected by your IT admin. This is also where you'll come to submit updates to your app or cancel any currently active submissions.