Criar uma guia de canal e grupo personalizado com o ASP.NET CoreCreate a Custom Channel and Group Tab with ASP.NET Core

Neste QuickStart, abordaremos a criação de uma guia de canal/grupo personalizado com a página principal do Razor em C# e ASP.Net.In this quickstart we'll walk-through creating a custom channel/group tab with C# and ASP.Net Core Razor page. Também usaremos o app Studio para o Microsoft Teams para finalizar o manifesto do aplicativo e implantar sua guia no Teams.We'll also use App Studio for Microsoft Teams to finalize your app manifest and deploy your tab to Teams.

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'll 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.
  • Você usará o app Studio para importar o aplicativo para o Microsoft Teams.You'll use App Studio to import your application to Teams. Para instalar o app Studio **** selecionar aplicativo da loja de aplicativos no canto inferior esquerdo do aplicativo Teams e pesquise o app Studio.To install App Studio select Apps Store App at the bottom-left corner of the Teams app, and search for App Studio. Depois de localizar o bloco, selecione-o e escolha instalar na caixa de diálogo janela pop-up.Once you find the tile, select it and choose install in the pop-up window dialog box.

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:

  • A versão atual do Visual Studio IDE com a carga de trabalho de desenvolvimento entre plataformas do .NET Core instalada.The current version the Visual Studio IDE with the .NET CORE cross-platform development workload installed. Se você ainda não tem o Visual Studio, é possível baixar e instalar a versão mais recente da comunidade Microsoft Visual Studio gratuitamente.If you don't already have Visual Studio, you can download and install the latest Microsoft Visual Studio Community version for free.

  • A ferramenta de proxy reverso do ngrok .The ngrok reverse proxy tool. Você usará o ngrok para criar um encapsulamento para os pontos de extremidade HTTPS disponíveis publicamente do servidor Web em execução.You'll use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Você pode baixá-lo aqui.You can download it here.

Obter o código-fonteGet the source code

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. Fornecemos um projeto simples para ajudá-lo a começar.We have provided a simple project to get you started. Para recuperar o código-fonte, você pode baixar a pasta zip e extrair os arquivos ou clonar o repositório de exemplo no novo diretório:To retrieve the source code you can download the zip folder and extract the files or clone the sample repository into your new directory:

git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

Depois de ter o código-fonte, abra o Visual Studio e selecione abrir um projeto ou solução.Once you have the source code, open Visual Studio and select Open a project or solution. Navegue até o diretório do aplicativo guia e abra ChannelGroupTab. sln.Navigate to the tab application directory and open ChannelGroupTab.sln.

Para compilar e executar o aplicativo, pressione F5 ou escolha Iniciar Depuração no menu depurar .To build and run your application press F5 or choose Start Debugging from the Debug menu. Em um navegador, navegue até as URLs abaixo e verifique se o aplicativo foi carregado corretamente:In a browser navigate to the URLs below and verify the application loaded properly:

  • http://localhost:44355
  • http://localhost:44355/privacy
  • http://localhost:44355/tou

Examinar o código-fonteReview the source code

Startup.csStartup.cs

Este projeto foi criado a partir de um modelo vazio do aplicativo Web do ASP.NET Core 2,2 com a caixa de seleção avançado-configurar para https selecionada na instalação.This project was created from an ASP.NET Core 2.2 Web Application empty template with the Advanced - Configure for HTTPS check box selected at setup. Os serviços do MVC são registrados pelo método da estrutura de injeção de dependência ConfigureServices() .The MVC services are registered by the dependency injection framework's ConfigureServices() method. Além disso, o modelo vazio não habilita o fornecimento de conteúdo estático por padrão, portanto, o middleware de arquivos estáticos é adicionado ao Configure() método:Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the Configure() method:

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

pasta wwwrootwwwroot folder

No ASP.NET Core, a pasta raiz da Web é onde o aplicativo procura arquivos estáticos.In ASP.NET Core, the web root folder is where the application looks for static files.

Index. cshtmlIndex.cshtml

ASP.NET Core trata os arquivos denominados index como o padrão/home page do site.ASP.NET Core treats files called Index as the default/home page for the site. Quando a URL do navegador apontar para a raiz do site, index. cshtml será exibido como a home page do seu aplicativo.When your browser URL points to the root of the site, Index.cshtml will be displayed as the home page for your application.

Tab.csTab.cs

Este arquivo C# contém um método que será chamado a partir de Tab. cshtml durante a configuração.This C# file contains a method that will be called from Tab.cshtml during configuration.

Pasta arquivo AppManifestAppManifest folder

Esta pasta contém os seguintes arquivos de pacote de aplicativos necessários:This folder contains the following required app package 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 manifest.jsno arquivo que especifica os atributos do seu aplicativo.A manifest.json file that specifies the attributes of your app.

Esses arquivos precisam ser zipados em um pacote de aplicativos para uso no carregamento de sua guia para o Microsoft Teams.These files need to be zipped in an app package for use in uploading your tab to Teams. Quando um usuário optar por adicionar ou atualizar sua guia, o Microsoft Teams carregará o configurationUrl especificado no manifesto, o incorporará em um iframe e o renderizará na sua guia.When a user chooses to add or update your tab, Microsoft Teams will load the configurationUrl specified in your manifest, embed it in an IFrame, and render it in your tab.

. csproj.csproj

Na janela do Visual Studio Solution Explorer, clique com o botão direito do mouse no projeto e selecione Editar arquivo de projeto.In the Visual Studio Solution Explorer window right-click on the project and select Edit Project File. Na parte inferior do arquivo, você verá o código que cria e atualiza sua pasta zip quando o aplicativo é criado:At the bottom of the file you'll see the code that creates and updates your zip folder when the application builds:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

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.Teams doesn't allow local hosting. Você precisará publicar sua guia em uma URL pública ou usar um proxy que exporá sua porta local para uma URL voltada para a Internet.You'll 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 guia, você usará o ngrok.To test your tab you'll use ngrok. Os pontos de extremidade da Web do seu servidor estarão disponíveis enquanto o ngrok estiver em execução no computador local.Your server's web endpoints will be available while ngrok is running on your local machine. Se você fechar ngrok, as URLs serão diferentes na próxima vez que você iniciá-la.If you close ngrok, the URLs will be different the next time you start it.

  • Abra um prompt de comando na raiz do diretório do projeto e execute o seguinte comando:Open a command prompt in the root of your project directory and run the following command:
ngrok http https://localhost:44355 -host-header="localhost:44355"
  • O Ngrok ouvirá as solicitações da Internet e as roteará para seu aplicativo quando estiver em execução na porta 44355.Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44355. Deve ser parecido https://y8rCgT2b.ngrok.io/ com o local em que o y8rCgT2b é substituído pela URL https do ngrok alfanumérico.It should resemble https://y8rCgT2b.ngrok.io/ where y8rCgT2b is replaced by your ngrok alpha-numeric HTTPS URL.

  • Certifique-se de manter o prompt de comando com o ngrok em execução e tome nota da URL — você precisará dela mais tarde.Be sure to keep the command prompt with ngrok running and to make note of the URL — you'll need it later.

Atualizar seu aplicativoUpdate your application

Na guia. cshtml o aplicativo apresenta ao usuário dois botões de opção para exibir a guia com um ícone vermelho ou cinza.Within Tab.cshtml the application presents the user with two option buttons for displaying the tab with either a red or gray icon. A seleção do botão selecionar cinza ou selecionar vermelho dispara saveGray() ou saveRed() , respectivamente, define settings.setValidityState(true) e habilita o botão salvar na página de configuração.Choosing the Select Gray or Select Red button fires saveGray() or saveRed(), respectively, sets settings.setValidityState(true), and enables the Save button on the configuration page. Esse código permite que as equipes saibam que você atende aos requisitos de configuração e a instalação pode continuar.This code lets Teams know that you have satisfied the configuration requirements and the installation can proceed. Ao salvar, os parâmetros de settings.setSettings são definidos.On save, the parameters of settings.setSettings are set. Por fim, saveEvent.notifySuccess() é chamado para indicar que a URL de conteúdo foi resolvida com êxito.Finally, saveEvent.notifySuccess() is called to indicate that the content URL has successfully resolved.

_Layout. cshtml_Layout.cshtml

Para que sua guia seja exibida no Teams, você deve incluir o SDK do cliente JavaScript do Microsoft Teams e incluir uma chamada para depois que microsoftTeams.initialize() a página for carregada.For your tab to display in Teams, you must include the Microsoft Teams JavaScript client SDK and include a call to microsoftTeams.initialize() after your page loads. Esta é a maneira como sua guia e o cliente do teams se comunicam:This is how your tab and the Teams client communicate:

  • Navegue até a pasta compartilhada , abra _Layout. cshtmle adicione o seguinte à <head> marca:Navigate to the Shared folder, open _Layout.cshtml, and add the following to the <head> tag:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>

Importante

Não copie/cole as <script src="..."> URLs desta página, pois elas podem não representar a versão mais recente.Don't copy/paste the <script src="..."> URLs from this page, as they may not represent the latest version. Para obter a versão mais recente do SDK, sempre vá para: API JavaScript do Microsoft Teams.To get the latest version of the SDK, always go to: Microsoft Teams JavaScript API.

Tab. cshtmlTab.cshtml

Abra Tab. cshtml e atualize o incorporado <script> da seguinte maneira:Open Tab.cshtml and update the embedded <script> as follows:

  • Na parte superior do script, ligue microsoftTeams.initialize()para.At the top of the script, call microsoftTeams.initialize().

  • Atualize os websiteUrl valores contentUrl e em cada função com a URL https ngrok para sua guia.Update the websiteUrl and contentUrl values in each function with the HTTPS ngrok URL to your tab.

Agora, o código deve se parecer com o seguinte com o y8rCgT2b substituído pela URL do ngrok:Your code should now look like the following with y8rCgT2b replaced with your ngrok URL:

    microsoftTeams.initialize();

    let saveGray = () => {
        microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
            microsoftTeams.settings.setSettings({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab"
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
            microsoftTeams.settings.setSettings({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab"
            });
            saveEvent.notifySuccess();
        });
    }

Certifique-se de salvar a guia atualizada. cshtml.Make sure to save the updated Tab.cshtml.

Criar e executar o aplicativoBuild and run your application

  • No Visual Studio, pressione F5ou escolha Iniciar Depuração no menu depurar .In Visual Studio press F5, or choose Start Debugging from the Debug menu. Verifique se o ngrok está em execução e funcionando corretamente abrindo o navegador e acessando a página de conteúdo por meio da URL https do ngrok que foi fornecida na janela de prompt de comando.Verify that ngrok is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.

Dica

Você precisa ter o aplicativo no Visual Studio e o ngrok em execução para concluir este QuickStart.You need to have both your application in Visual Studio and ngrok running to complete this quickstart. Se você precisar parar a execução do aplicativo no Visual Studio para trabalhar nele, Mantenha o ngrok em execução.If you need to stop running your application in Visual Studio to work on it keep ngrok running. Ele continuará a escutar e retomará o roteamento da solicitação do aplicativo quando ele for reiniciado no Visual Studio.It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. Se for necessário reiniciar o serviço ngrok, ele retornará uma nova URL e você terá que atualizar seu aplicativo com a nova URL.If you have to restart the ngrok service it will return a new URL and you'll have to update your application with the new URL.

Carregar sua guia para o Teams com o app StudioUpload your tab to Teams with App Studio

Observação

Usamos o app Studio para editar o arquivo manifest. JSON e carregar o pacote concluído para o Microsoft Teams.We use App Studio to edit your manifest.json file and upload the completed package to Teams. Você também pode editar manualmente o arquivo manifest. JSON , se preferir.You can also manually edit the manifest.json file if you prefer. Se você fizer isso, certifique-se de compilar a solução novamente para criar o arquivo Tab. zip para carregar.If you do, be sure to build the solution again to create the tab.zip file to upload.

  • 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.

  • Abra o app Studio e selecione a guia Editor do manifesto .Open App studio and select the Manifest editor tab.

  • Selecione o bloco importar um aplicativo existente no editor de manifesto para começar a atualizar o pacote de aplicativos para sua guia. O código-fonte vem com seu próprio manifesto parcialmente concluído.Select the Import an existing app tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. O nome do seu pacote de aplicativos é Tab. zip.The name of your app package is tab.zip. Ele deve ser encontrado aqui:It should be found here:

/bin/Debug/netcoreapp2.2/tab.zip
  • Carregar Tab. zip para o app Studio.Upload tab.zip to App Studio.

Atualizar seu pacote de aplicativos com o editor de manifestoUpdate your app package with Manifest editor

Depois de carregar seu pacote de aplicativos no app Studio, você precisará concluir a configuração.Once you've uploaded your app package into App Studio, you'll need to finish configuring it.

  • Selecione o bloco para a guia recentemente importada no painel direito da página de boas-vindas do editor de manifesto.Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

Há uma lista de etapas no lado esquerdo do editor de manifestos e, à direita, uma lista de propriedades que precisam ter valores para cada uma dessas etapas.There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that need to have values for each of those steps. Muitas das informações foram fornecidas pelo manifesto. JSON , mas há alguns campos que você precisará atualizar:Much of the information has been provided by your manifest.json but there are a few fields that you'll need to update:

Detalhes: detalhes do aplicativoDetails: App details

  • Em identificação selecione gerar para substituir a ID do espaço reservado pelo GUID necessário da guia.Under Identification select Generate to replace the placeholder id with the required GUID for your tab.

  • Em informações do desenvolvedor , atualize o campo URL do site com sua URL https do ngrok .Under Developer information update the Website URL field with your ngrok HTTPS URL.

  • Em URLs de aplicativo , atualize a declaração de privacidade e termos de uso de campos de URL com sua URL https do ngrok .Under App URLs update the Privacy statement and Terms of use URL fields with your ngrok HTTPS URL. Lembre-se de incluir os caminhos /Privacy e /tou no final das URLs.Remember to include the /privacy and /tou paths at the end of the URLs.

Recursos: guiasCapabilities: Tabs

Na seção guias :In the Tabs section:

  • Na guia equipe selecione Adicionar.Under Team Tab select Add.

  • Na janela pop-up da guia equipe atualizar a URL de configuração https://<yourngrokurl>/tabpara.In the Team tab pop-up window update the Configuration URL to https://<yourngrokurl>/tab.

  • Por fim, certifique-se de que a configuração pode atualizar? Equipee caixas de chat de grupo são verificados e selecione salvar.Finally, make sure the can update configuration? Team, and Group chat boxes are checked and select Save.

Concluir: domínios e permissõesFinish: Domains and permissions

Na seção domínios e permissões , os domínios do campo Tabs devem conter a URL do NGROK sem o prefixo HTTPS- <yourngrokurl>.ngrok.io/.In the Domains and permissions section, the Domains from your tabs field should contain your ngrok URL without the HTTPS prefix - <yourngrokurl>.ngrok.io/.

Testar e distribuir: testar e distribuirTest and distribute: Test and distribute

Importante

No campo Descrição à direita, você verá o seguinte aviso:In the Description field on the right you'll see the following warning:

⚠ "a matriz ' validDomains ' não pode conter um site de tunelamento..."⚠ "The 'validDomains' array cannot contain a tunneling site..."

Este aviso pode ser ignorado durante o teste da guia.This warning can be ignored while testing your tab.

Na seção testar e distribuir :In the Test and distribute section:

  • Selecionar Instalar.Select Install.

  • Na janela pop-up Adicionar a um campo de equipe ou chat , insira sua equipe e selecione instalar.In the pop-up window's Add to a team or chat field enter your team and select Install.

  • Na próxima janela pop-up, escolha o canal de equipe onde você deseja exibir a guia e selecione Configurar.In the next pop-up window choose the team channel where you would like the tab displayed and select Set up.

  • Na janela pop-up final, selecione um valor para a página da guia (um ícone vermelho ou cinza) e selecione salvar.In the final pop-up window select a value for the tab page (either a red or gray icon) and select Save.

Para exibir sua guia, navegue até a equipe na qual você a instalou e selecione-a na barra de guias.To view your tab, navigate to the team you installed it on, and select it from the tab bar. A página que você escolheu durante a configuração deve ser exibida.The page that you chose during configuration should be displayed.