Desenvolver aplicativos rapidamente com o app Studio para o Microsoft TeamsQuickly develop apps with App Studio for Microsoft Teams

O app Studio facilita o início da criação ou integração de seus próprios aplicativos do Microsoft Teams, independentemente de você desenvolver aplicativos personalizados para aplicativos de sua empresa ou SaaS para equipes em todo o mundo, simplificando a criação do manifesto e pacote para o seu aplicativo e fornecendo ferramentas úteis como o editor de cartão e uma biblioteca de controle de reagir.App Studio makes it easy to start creating or integrating your own Microsoft Teams apps, whether you develop custom apps for your enterprise or SaaS applications for teams around the world by streamlining the creation of the manifest and package for your app and providing useful tools like the Card Editor and a React control library.

Instalando o app StudioInstalling App Studio

O app Studio é um aplicativo do teams que pode ser encontrado no repositório do teams.App Studio is a Teams app which can be found in the Teams store. Siga este link para download direto: app Studio (você também pode encontrar o aplicativo na loja de aplicativos).Follow this link for direct download: App Studio (you can also find the app in the app store).

Na loja, procure por app Studio.In the store, search for App Studio.

Entrada de repositório para o app Studio

Selecione o bloco do App Studio para abrir a página de instalação do aplicativo:Select the App Studio tile to open the app install page:

Configurar o app Studio

Selecione instalar.Select install.

App Studio

Quando estiver no app Studio, clique na guia Editor de manifesto , onde você pode importar um aplicativo existente ou criar um novo aplicativo.Once you are in App Studio, click on the Manifest editor tab where you can either import an existing app or create a new app.

Recursos do App StudioApp Studio Features

ConversaConversation

É aqui que você pode ver quais cartões você cria no app Studio são parecidos no Teams ao testá-los, enviando-os para você mesmo.This is where you can see what cards you create in App Studio look like in Teams when you test them by sending them to yourself.

Editor de manifestoManifest Editor

Como mencionado anteriormente, a parte mais significativa de um pacote de aplicativos do Microsoft Teams é sua manifest.jsno arquivo.As mentioned earlier, the most significant part of a Microsoft Teams app package is its manifest.json file. Este arquivo, que deve estar em conformidade com o esquema de aplicativos do Microsoft Teams, contém metadados que permitem que o Microsoft Teams apresente corretamente o aplicativo aos usuários.This file, which must conform to the Teams App schema, contains metadata which allows Teams to correctly present your app to users.

A guia Editor de manifesto no app Studio simplifica a criação do manifesto, permitindo que você descreva o aplicativo, carregue seus ícones, adicione recursos de aplicativo e produza um arquivo. zip que pode ser carregado facilmente no Teams para teste ou distribuído para outros usuários.The Manifest Editor tab in App Studio simplifies creating the manifest, allowing you to describe the app, upload your icons, add app capabilities, and produce a .zip file which can easily be uploaded into Teams for testing or distributed for others to use. Observe que o app Studio não produz código funcional para seu aplicativo ou hospeda seu aplicativo.Note that App Studio does not produce functional code for your app, or host your app. Seu aplicativo já deve estar hospedado e em execução na URL listada no manifesto para o processo de carregamento do aplicativo resultar em um aplicativo em funcionamento.Your app must already be hosted and running at the URL listed in the manifest for the app upload process to result in a working app.

DetalhesDetails

A seção detalhes do editor de manifesto define a descrição de alto nível do aplicativo que você está fazendo.The details section of the Manifest Editor defines the high-level description of the app you are making. Isso inclui itens como o nome do aplicativo, a descrição e a marca visual.This includes things such as the app’s name, description, and visual branding. Você pode gerar automaticamente um GUID para seu aplicativo e fornecer URLs para sua declaração de privacidade e termos de uso.You can automatically generate a GUID for your app and provide URLs for your privacy statement and terms of use.

RecursosCapabilities

A seção Capabilities do editor de manifesto é onde os recursos do aplicativo são definidos e onde os detalhes de cada uma dessas funcionalidades são listados.The capabilities section of the Manifest Editor is where the app's capabilities are defined and where details of each of those capabilities are listed.

GuiasTabs
  • Guias de equipe.Team Tabs. Uma guia de equipe se torna parte de um canal e fornece acesso rápido a informações e recursos da equipe.A team tab becomes part of a channel and provides quick access to team information and resources. Por exemplo, a guia planejador de um canal contém um único plano; a guia Power BI é mapeada para um relatório específico.For example, the Planner tab for a channel contains a single plan; the Power BI tab maps to a specific report. Os usuários podem se aprofundar no contexto relevante, mas não devem ser capazes de navegar fora da guia. A guia Power BI, por exemplo, não permite a navegação para outros relatórios do Power BI, mas habilita o botão ir para o site que inicia o relatório no site principal do Power bi.Users can drill down to the relevant context, but they should not be able to navigate outside the tab. The Power BI tab, for instance, doesn't enable navigation to other Power BI reports, but it does enable the Go to website button that launches the report in the main Power BI website.

    Para guias de equipe, você deve fornecer uma URL de configuração para apresentar opções e coletar informações para que os usuários possam personalizar o conteúdo e a experiência da sua guia. Esta página HTML por iframe é exibida quando um usuário adiciona a guia a um canal pela primeira vez.For team tabs, you must provide a Configuration URL to present options and gather information so users can customize the content and experience of your tab. This iframed HTML page is displayed when a user first adds the tab to a channel.

    Você também deve fornecer todos os domínios adicionais para os quais a guia espera carregar ou vincular.You must also provide any additional domains that the tab expects to load from or link to.

  • Guias pessoais.Personal Tabs. Esta seção permite que você defina um conjunto de guias que são apresentadas por padrão na experiência do aplicativo pessoal (ou seja, a experiência de um usuário com seu aplicativo fora do contexto de uma equipe ou canal).This section lets you define a set of tabs that are presented by default in the personal app experience (i.e. the experience a user has with your app outside the context of a team or channel). Nesta seção, forneça o nome da guia, um identificador exclusivo, a URL que aponta para a interface do usuário a ser exibida no Microsoft Teams e, opcionalmente, a URL a ser usada se um usuário optar por exibir a guia em um navegador.In this section, provide the tab name, a unique identifier, the URL that points to the UI to be displayed in Teams, and optionally, the URL to use if a user opts to view the tab in a browser. Como nas guias do Microsoft Teams, forneça todos os domínios adicionais dos quais a guia espera carregar ou vincular.As with Teams tabs, provide any additional domains from which the tab expects to load from or link to.

BotsBots

Esta seção permite que você adicione um bot de conversação ao seu aplicativo.This section allows you to add a conversational bot to your app. Se você já tem um bot registrado na estrutura de bot, é possível adicionar esse bot clicando em Configurar e fornecendo o nome do bot, a ID da estrutura do bot e definindo os escopos nos quais o bot funcionará.If you already have a bot registered with Bot Framework, you can add that bot by clicking Set Up and supplying the bot's name, Bot Framework ID, and defining the scopes in which the bot will work.

Se você ainda não tiver registrado um bot com a estrutura do bot, clique em registrar para criar um novo.If you have not yet registered a bot with the Bot Framework, click Register to create a new one. Após concluir o registro do bot, volte para esta seção do editor de manifesto para inserir seu nome e ID da estrutura de bot.Once you’re done registering your bot, come back to this section of the Manifest Editor to enter its name and Bot Framework ID.

Depois de fornecer as informações do seu bot, você pode, agora, definir uma lista de comandos que o seu bot pode sugerir aos usuários.Once you have supplied your bot's information, you can now optionally define a list of commands that your bot can suggest to users. Adicione o nome do comando, uma descrição do comando que indica a sintaxe e os argumentos e os escopos aos quais este comando deve ser aplicado.Add the name of the command, a description of the command which indicates its syntax and arguments, and the scope(s) to which this command should apply.

Observe que, se você tiver definido seu bot para suportar apenas um escopo, os comandos especificados para o escopo sem suporte serão ignorados.Note that if you have defined your bot to only support one scope, commands specified for the unsupported scope will be ignored. Você pode editar os escopos com suporte no bot a qualquer momento.You can edit the scopes your bot supports at any time.

ConectoresConnectors

Esta seção permite que você adicione um conector ao seu aplicativo.This section allows you to add a connector to your app. Se você já tiver registrado um conector do Office 365, escolha Configurar e insira o nome e a ID do conector.If you already have registered an Office 365 connector, choose Set up and enter the name and ID of the connector. Se quiser um novo conector, clique em registrar para ser levado para o painel do desenvolvedor do conector no navegador.If you want a new connector click Register to be taken to the Connector Developer Dashboard in your browser.

Extensões de MensagensMessaging Extensions

As extensões de mensagens são uma maneira poderosa para os usuários entrarem com seu aplicativo no Microsoft Teams.Messaging extensions are a powerful way for users to engage with your app within Microsoft Teams. Os usuários podem consultar informações do seu serviço e postá-las na forma de cartões, diretamente no canal ou na conversa de chat.Users can query for information from your service and post that information in the form of cards, right into the channel or chat conversation.

As extensões de mensagens são ativadas pelos bots da estrutura do bot, portanto, elas exigem que um bot configurado opere.Messaging extensions are powered by Bot Framework bots, so they require a configured bot to operate. Se você tiver o nome e a ID da estrutura de bot do bot que gostaria de poder alimentar a extensão de mensagens, digite-a.If you have the name and Bot Framework ID of the bot you would like to power the messaging extension, enter it. Caso contrário, clique em registrar para criar uma e insira as informações posteriormente.Otherwise, click Register to create one and enter the information afterward. Selecione se a configuração de uma extensão de mensagens pode ser atualizada pelo usuário.Select whether the configuration of a messaging extension can be updated by the user.

Após a configuração do bot subjacente, defina os comandos e parâmetros que a extensão de mensagens pode aceitar.Once you have the underlying bot configured, define the commands and parameters which the messaging extension can accept.

Cada comando requer um título e uma ID.Each command requires a title and an ID. Opcionalmente, o comando pode conter uma descrição para o usuário.The command can optionally contain a description for the user. Cada comando pode suportar até cinco parâmetros, cada um deles requer:Each command can support up to five parameters, each of which requires:

  • O nome do parâmetro como ele aparece no cliente Teams e está incluído na solicitação do usuárioThe name of the parameter as it appears in the Teams client and is included in the user request
  • Um título amigávelA user-friendly title
  • Uma descrição opcionalAn optional description

Testar e distribuirTest and Distribute

Depois de concluir a definição do aplicativo, a seção de teste e distribuição permite exportar a definição do aplicativo como um arquivo zip, que pode ser compartilhado e carregado no cliente do teams para teste.Once you have finished defining your application, the Test and Distribute section allows you export your app’s definition as a zip file which then can be shared and uploaded into the Teams client for testing. Clique em exportar para baixar o arquivo zip como appname.zip no diretório de download padrão.Clicking export downloads the zip file as appname.zip in your default download directory.

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.

Editor de cartãoCard Editor

Um cartão é um contêiner para partes de informação curtas ou relacionadas.A card is a container for short or related pieces of information. O Microsoft Teams suporta cartões, que podem ter várias propriedades e anexos.Microsoft Teams supports cards, which can have multiple properties and attachments. Os cartões são uma forma importante para que os bots e conectores transmitam informações acionáveis aos usuários.Cards are a key way that bots and connectors relay actionable information to users.

Para tornar esse processo mais fácil e menos propenso a erros, a guia Editor de cartões permite criar cartões herói ou cartões de miniatura usando um formulário e verificar e testar o cartão resultante (exatamente como o usuário veria) por meio de um bot.To make this process easier and less error-prone, the Card Editor tab lets you build Hero Cards or Thumbnail Cards using a form and verify and test the resulting card (exactly as a user would see it) via a bot. Ele também fornece o código JSON, C# ou Node.js correspondente para o cartão que você pode copiar/colar no código-fonte do aplicativo.It also provides the corresponding JSON, C#, or Node.js code for the card that you can copy/paste into your app's source code.

Se você já tem um cartão que gostaria de verificar dentro do Teams, você pode colar o JSON para aquele cartão na guia JSON em adicionar informações sobre o cartão e enviá-lo para si mesmo para ver a sua aparência em um chat.If you already have a card that you would like to verify inside Teams, you can paste the JSON for that card into the JSON tab under Add card info and send it to yourself to see what it looks like in a chat.

Biblioteca de controle de reagirReact Control Library

Observação

Esta biblioteca de controle de reagir será preterida no futuro.This React control library will be deprecated in the future. Considere usar os controles de reagir de interface do usuário fluente como uma alternativa (anteriormente Stardust UI).Consider using the Fluent-UI react controls as an alternative (formerly Stardust UI).

A criação de um aplicativo que segue as práticas recomendadas do Microsoft Teams é uma ótima maneira de dar uma aparência ao aplicativo que se ajuste perfeitamente com a experiência do cliente do Microsoft Teams.Creating an app that follows the Teams best practices is a great way to give your app a look and feel that fits seamlessly with the Teams client experience. Os controles de interface do usuário que você usa são fundamentais para atingir essa extremidade.The UI controls that you use are critical to achieving that end. Para facilitar a criação de uma interface do usuário consistente, o app Studio oferece várias categorias de controles da interface do usuário que seguem os princípios de design da equipe.To make it easier to create a consistent UI, App Studio provides several categories of UI controls which follow Teams design principles.

Exemplos de controles e componentes de reagir correspondentes são fornecidos e prontos para uso na criação do aplicativo.Examples of the controls and corresponding React components are provided and ready to use in building your app.

ControlesControls

Os controles incluem:Controls include:

  • BotõesButtons
  • Menus suspensosDropdowns
  • CaixasCheckboxes
  • Botões de opçãoRadio Buttons
  • AlternaToggles
  • Áreas de textoText Areas
  • LinksLinks
  • GuiasTabs
  • TabelasTables
  • ÍconesIcons