Criar seu primeiro aplicativo do Microsoft TeamsBuild your First Microsoft Teams App

Observação

Este tutorial é proveniente do gerador Yeoman para o Teams wikiThis tutorial comes from the yeoman generator for Teams wiki

Neste tutorial, vamos examinar a criação de seu primeiro aplicativo do Microsoft Teams usando o gerador Yeoman do Microsoft Teams.In this tutorial we will walk through creating your very first Microsoft Teams app using the Microsoft Teams Yeoman generator. Ele pressupõe que você habilitou o carregamento lateral de aplicativos do Microsoft Teams.It assumes that you have enabled side-loading of Microsoft Teams apps.

gerador Yeoman git

Configurar e preparar sua máquinaSetup and prepare your machine

Você precisa instalar o seguinte em sua máquina antes de começar a usar o gerador de Teams.You need to install the following on your machine before starting to use the Teams Generator.

Nó de instalaçãoInstall Node

Você precisa ter o NodeJS instalado em sua máquina.You need to have NodeJS installed on your machine. Você deve usar a versão mais recente do LTS.You should use the latest LTS version.

Instalar um editor de códigosInstall a code editor

Você também precisa de um editor de códigos, fique à vontade para usar qualquer editor de texto que preferir.You also need a code editor, feel free to use whatever text editor you prefer. No entanto, a maioria desta documentação e capturas de tela se referem ao uso do Visual Studio Code.However most of this documentation and screenshots refer to using Visual Studio Code.

Instalar a CLI do Yeoman e do GulpInstall Yeoman and Gulp CLI

Para poder estruturarr projetos usando o gerador de equipes, você precisa instalar a ferramenta Yeoman, bem como o Gerenciador de tarefas CLI do Gulp.To be able to scaffold projects using the Teams generator you need to install the Yeoman tool as well as the Gulp CLI task manager.

Abra um prompt de comando e digite o seguinte:Open up a command prompt and type the following:

npm install yo gulp-cli --global

Instalar o gerador de aplicativos do Microsoft Teams-YoInstall the Microsoft Teams Apps generator - Yo Teams

O gerador Yeoman para os aplicativos do Microsoft Teams é instalado com o seguinte comando:The Yeoman generator for Microsoft Teams apps are installed with the following command:

npm install generator-teams --global

Instalar versões préviasInstall preview versions

Se você deseja instalar versões prévias do gerador de Teams com este comando:If you want to install preview versions of the Teams generator with this command:

npm install generator-teams@preview --global

Gerar seu projetoGenerate your project

Abra um prompt de comando e crie um novo diretório no qual você deseja criar seu projeto e, nesse diretório, digite o comando yo teams .Open up a command prompt and create a new directory where you want to create your project and in that directory type the command yo teams. Isso iniciará o gerador de aplicativos do Teams e você será solicitado a fornecer um conjunto de perguntas.This will start the Teams Apps generator and you will be asked a set of questions.

Times Yo

A primeira pergunta é sobre o nome do projeto, você pode deixá-lo como está pressionando ENTER.The first question is about your project name, you can leave it as is by pressing enter. A pergunta seguinte pergunta se você deseja criar um novo diretório ou usar o atual.Next question asks you if you want to create a new directory or use the current one. Como já estamos no diretório desejado, basta pressionar Enter.As we already are in the directory we want, we just press enter.

A etapa a seguir solicita um título do seu projeto, este título será usado no manifesto e na descrição do seu aplicativo.The following step asks for a title of your project, this title will be used in the manifest and description of your app. E, em seguida, você será solicitado a fornecer um nome de empresa, que também será usado no manifesto.And then you will be asked for a company name, which also will be used in the manifest.

A quinta pergunta pergunta sobre qual versão do manifesto você deseja usar.The fifth question asks you about what version of the manifest you want to use. Para este tutorial v1.5 , selecione, que é o esquema geral disponível atual.For this tutorial select v1.5, which is the current general available schema.

Depois disso, o gerador solicitará quais itens você deseja adicionar ao seu projeto.After this the generator will ask you for what items you want to add to your project. Você pode selecionar um único ou qualquer combinação de itens.You can select a single one or any combination of items. Por enquanto, basta selecionar uma guia.For now, just select a Tab.

seleção de item

Com base nos itens selecionados, você será solicitado a fornecer um conjunto de perguntas de acompanhamento.Based on what items you select, you will be asked a set of follow-up questions.

Agora você precisa inserir uma URL de onde você hospedará sua solução.Now you need to enter a URL of where you will host your solution. Pode ser qualquer URL, mas, por padrão, o gerador sugere uma URL de sites do Azure.This can be any URL, but by default the generator suggests an Azure Web Sites URL.

O gerador tem vários recursos avançados internos que você pode optar por aceitar ou recusar o.The generator has a lot of built-in advanced features that you can opt-in or opt-out of. Após a pergunta de URL, você será perguntado se deseja incluir testes de unidade para sua solução, o padrão é sim.Following the URL question you will be asked if you want to include unit-testing for your solution, default is yes. Se você escolher este projeto gerado terá uma estrutura de teste de unidade e alguns testes de unidade padrão para os diferentes itens sendo estruturado.If you choose this the generated project will have a unit testing framework and some default unit tests for the different items being scaffolded. Para este tutorial, opte por não incluir uma estrutura de teste.For this tutorial choose not to include a test framework.

Para facilitar o registro em log, você também será perguntado se deseja usar o Azure Application insights para registro em log.In order to make logging easy for you, you will also be asked if you want to use Azure Application Insights for logging. Se você escolher Sim, será necessário fornecer uma chave do Azure Application insights.If you choose Yes, you will need to provide a Azure Application Insights key. Para este tutorial, opte por usar o Application insights.For this tutorial opt-out of using Application Insights.

O próximo conjunto de perguntas será baseado na seleção de itens anteriormente.The next set of questions will be based on your selection of items previously. Para uma guia, você só precisa fornecer um nome e, opcionalmente, escolher se deseja poder usar este aplicativo como uma Web Part do SharePoint Online.For a tab you only need to provide a name and optionally choose if you want to be able to use this app as a SharePoint Online web part. Depois de fornecer esse nome, o gerador gerará o projeto e instalará todas as dependências.Once you have provided this name the generator will generate the project and install all dependencies. Isso levará um minuto ou dois.This will take a minute or two.

Adicionar um código à sua guiaAdd some code to your tab

Depois que o gerador for concluído, você poderá abrir a solução em seu editor de código favorito.Once the generator is done you can open up the solution in your favorite code editor. Reserve um minuto ou dois e familiarize-se com o modo como o código está organizado-você pode ler mais sobre isso na documentação da estrutura do projeto .Take a minute or two and familiarize yourself with how the code is organized - you can read more about that in the Project Structure documentation.

Sua guia estará localizada no ./src/app/scripts/myFirstAppTab/MyFirstAppTab.tsx arquivo.Your Tab will be located in the ./src/app/scripts/myFirstAppTab/MyFirstAppTab.tsx file. Esta é a classe baseada em reagir do TypeScript para sua guia. Localize o render() método e adicione uma linha de código dentro do <PanelBody> controle para que ele tenha a seguinte aparência:This is the TypeScript React based class for your Tab. Locate the render() method and add a line of code inside the <PanelBody> control so it looks like this:

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

Salve o arquivo e retorne ao prompt de comando.Save the file and return to the command prompt.

Criar seu aplicativoBuild your app

Agora você pode criar seu projeto.You can now build your project. Isso é feito em duas etapas (ou uma etapa, veja abaixo).This is done in two steps (or one step, see below).

Primeiro, você precisa criar o arquivo de manifesto do aplicativo Teams, que você carrega/Sideload no Microsoft Teams.First you need to create the Teams App manifest file, that you upload/sideload into Microsoft Teams. Isso é feito pela tarefa Gulp gulp manifest .This is done by the Gulp task gulp manifest. Isso validará o manifesto e criará um arquivo zip no ./package diretório.This will validate the manifest and create a zip file in the ./package directory.

Para compilar a solução, use o gulp build comando.To build your solution you use the gulp build command. Isso irá transcompilar sua solução na ./dist pasta.This will transpile your solution into the ./dist folder.

Executar o aplicativoRun your app

Para executar o aplicativo, use o gulp serve comando.To run your app you use the gulp serve command. Isso criará e iniciará um servidor Web local para testar seu aplicativo.This will build and start a local web server for you to test your app. O comando também recriará o aplicativo sempre que você salvar um arquivo em seu projeto.The command will also rebuild the application whenever you save a file in your project.

Agora você poderá navegar até http://localhost:3007/myFirstAppTab/ para garantir que sua guia está sendo renderizada.You should now be able to browse to http://localhost:3007/myFirstAppTab/ to ensure that your tab is rendering. No entanto, ainda não no Microsoft Teams.However, not in Microsoft Teams yet.

exibir seu site em um navegador

Executar o aplicativo no Microsoft TeamsRun your app in Microsoft Teams

O Microsoft Teams não permite que seu aplicativo hospedado no localhost, portanto, você precisa publicá-lo em uma URL pública ou usar um proxy, como ngrok.Microsoft Teams does not allow you to have your app hosted on localhost, so you need to either publish it to a public URL or use a proxy such as ngrok.

Boa notícia é que o projeto estruturado tem esse interno.Good news is that the scaffolded project has this built-in. Quando você executar gulp ngrok-serve o serviço ngrok será iniciado em segundo plano, com uma entrada DNS exclusiva e pública e também empacotará o manifesto com essa URL exclusiva e, em seguida, fará exatamente a mesma coisa que gulp serve .When you run gulp ngrok-serve the ngrok service will be started in the background, with a unique and public DNS entry and it will also package the manifest with that unique URL and then do the exact same thing as gulp serve.

Depois de executar gulp ngrok-serve o, criar uma nova equipe do Microsoft Teams e quando ela for criada clique no nome da equipe, vá para as configurações do Teams e selecione aplicativos.After running gulp ngrok-serve, create a new Microsoft Teams team and when it is created click on the Team name, to go to the teams settings and then select Apps. No canto inferior direito, você verá um link carregar um aplicativo personalizado, selecione-o e navegue até a pasta do projeto e a subpasta chamada package .In the lower right corner you should see a link Upload a custom app, select it and then browse to your project folder and the subfolder called package. Selecione o arquivo zip nessa pasta e escolha abrir.Select the zip file in that folder and choose open. Seu aplicativo agora está suplementos foi feito no Microsoft Teams.Your App is now sideloaded into Microsoft Teams.

aplicativo Suplementos foi feito

Volte para o canal geral e selecione + para adicionar uma nova guia. Você deve ver sua guia na lista de guias.Go back to the General channel and select + to add a new Tab. You should see your tab in the list of tabs.

guia Configurar

Escolha sua guia e siga as instruções para adicioná-la.Choose your tab and follow the instructions to add it. Observe que você tem uma caixa de diálogo de configuração personalizada, para a qual é possível editar a fonte.Notice that you have a custom configuration dialog, for which you can edit the source. Selecione salvar para adicionar sua guia ao canal.Select Save to add your tab to the channel. Após a conclusão, a guia deve ser carregada no Microsoft Teams!Once done your tab should be loaded inside Microsoft Teams!

guia executando no Teams

Parabéns! Você criou e implantou seu primeiro aplicativo do Microsoft TeamsCongrats! You built and deployed your first Microsoft Teams App