Talvez você esteja usando o Microsoft Teams no trabalho e deseja criar um aplicativo que seja executado dentro do Teams. Ou talvez você já tenha publicado um aplicativo em outra plataforma e queira ganhar mais usuários no Teams. Neste artigo, veremos como construir um novo aplicativo da web no Teams e como integrar um existente-com apenas algumas linhas de código.
Você não precisa de nenhuma experiência anterior para começar. Usaremos o código HTML mínimo e conjuntos de ferramentas para criar uma guia Teams (a versão mais simples de um aplicativo no Teams). Enquanto você percorre este tutorial, se quiser se aprofundar, confira os vídeos sob demanda de Aprenda Juntos: Desenvolvendo Apps para Equipes . Acontece que tornar seu aplicativo da web acessível onde seus usuários já estão trabalhando tem alguns benefícios, incluindo um alcance de mais de 115 milhões de usuários ativos diariamente. Vamos mergulhar!
Microsoft Teams como plataforma
Você pode estar familiarizado com o Teams como uma ferramenta de comunicação colaborativa, mas, como desenvolvedor, também pode vê-lo como uma plataforma de desenvolvimento . Na verdade, o Teams fornece uma maneira alternativa de interagir e distribuir seus aplicativos da web existentes. Isso ocorre principalmente porque a ferramenta sempre foi projetada com a web em mente. Um dos os principais benefícios da integração de aplicativos da web no Teams está fornecendo uma maneira mais produtiva para os usuários-seus colegas e usuários do Teams em todo o mundo-trabalharem feito.
Integração por meio de guias, aplicativos da web incorporados
Embora existam muitos caminhos diferentes para construir e implantar aplicativos Teams, um dos mais fáceis é integrar seus aplicativos da web existentes ao Teams por meio do que chamamos de “guias”. As guias são basicamente aplicativos da web incorporados criados usando HTML, TypeScript (ou JavaScript), estruturas do lado do cliente, como React, ou qualquer estrutura do lado do servidor, como.NET.
As guias permitem que você exponha o conteúdo em seu aplicativo , essencialmente incorporando uma página da web no Teams usando
Um recurso útil sobre a integração de seus aplicativos da web com o Teams é que você pode usar as ferramentas de desenvolvedor com as quais provavelmente já está familiarizado: Git, Node.js, npm e Visual Studio Code. Para expandir seus aplicativos com recursos adicionais, você pode usar ferramentas especializadas, como a ferramenta de linha de comando do gerador Teams Yeoman ou extensão Teams Toolkit Visual Studio Code e SDK do cliente JavaScript do Microsoft Teams . Eles permitem que você recupere informações adicionais e aprimore o conteúdo exibido na guia Equipes.
Crie uma guia com um exemplo de código existente
Vamos começar com o básico. (Se quiser dar um passo adiante para realmente implantar seu aplicativo, você pode pular para o vídeos Aprenda juntos ) para saber mais.
Para simplificar as etapas, vamos dar uma olhada em um exemplo de código, então, em vez das ferramentas descritas acima, você só precisará:
- Permissão para desenvolver em equipes ou locatário de desenvolvedor, que você pode obter gratuitamente por meio do Programa de desenvolvedor M365 ,
- App Studio: instale o aplicativo App Studio em seu cliente Teams
- Habilidades básicas de desenvolvimento web
Neste artigo, vamos usar um IDE baseado na web chamado Glitch , que permite hospedar e executar este projeto rapidamente no navegador, para que você não precise se preocupar com o tunelamento ou implantação neste momento. Para obter uma abordagem em grande escala do início ao fim, você pode verificar um tutorial abrangente sobre Microsoft Docs , que inclui exemplos de um extensão de mensagens ou uma bot .
Embora o Glitch seja uma ótima ferramenta para fins de tutorial, este não é um ambiente escalável, então, na realidade, você também precisará de uma maneira de implantar e hospedar seus serviços da web. Em suma, enquanto você está desenvolvendo, você precisa configurar um desenvolvimento local com um túnel de host local, como a ferramenta de terceiros ngrok e para produção, você precisará implantar seu aplicativo em um provedor de serviços em nuvem, por exemplo, Microsoft Azure Web Services .
Além disso, você pode usar a infraestrutura local para hospedar seus serviços da web, mas eles devem ser acessíveis ao público (não protegidos por firewall). Neste artigo, vamos nos concentrar em como disponibilizar seu aplicativo da web no Teams, então vamos voltar ao Glitch por enquanto!
Primeiro, vamos para a página de código de amostra e remixar o projeto . Remixar é como bifurcar um repositório no GitHub, então ele gera uma cópia do projeto para você, permitindo que você modifique o código da maneira que quiser, sem mexer com o original.
Depois de ter seu próprio repositório de projeto, você também obterá automaticamente seu próprio URL de servidor da web. Por exemplo, se o nome do projeto gerado for alcançado-diligent-bell , o URL do seu servidor da web seria https://achieved-diligent-bell.glitch.me . Claro, você pode personalizar o nome se quiser.
Serviços da web funcionando, você precisará criar um pacote de aplicativo que pode ser distribuído e instalado no Teams. O pacote do aplicativo a ser instalado no cliente Teams contém dois ícones e um arquivo de manifesto JSON descreve os metadados do seu aplicativo, os pontos de extensão que seu aplicativo está usando e indicadores para os serviços que alimentam esses pontos de extensão.
Crie um pacote de aplicativo
Agora, você precisará criar um pacote de aplicativo para disponibilizar seu aplicativo da web no Teams. O pacote inclui:
📁 pacote do seu aplicativo └── 📄 manifest.json └── 🖼 color.png (192x192) └── 🖼 outline.png (32x32)
Ao criar seu pacote de aplicativo, você pode optar por criá-lo manualmente ou usar App Studio , que é um aplicativo útil dentro do Teams que ajuda os desenvolvedores a criar aplicativos Teams (sim, meta, na verdade). O App Studio o guiará pela configuração do aplicativo e criará o manifesto do aplicativo automaticamente.
Depois de instalar o aplicativo App Studio em seu cliente Teams, abra o aplicativo. Você pode iniciá-lo clicando nos três pontos na barra de menu à esquerda.
Em seguida, clique na guia Editor de manifesto na parte superior e selecione Criar um novo aplicativo .
Você precisará preencher todos os campos obrigatórios, incluindo os nomes dos aplicativos, descrições etc.
Na seção URLs do aplicativo, preencha suas páginas de privacidade e TOU da web. Neste exemplo, estamos usando apenas o URL do marcador, https://example.com .
Configure sua guia pessoal selecionando Recursos> Guias no menu à esquerda.
Clique no botão Adicionar em Adicionar uma guia pessoal e insira as informações. Em URL do conteúdo, insira o URL da sua página da web (neste caso, deve ser https://[nome-do-seu-projeto].glitch.me/index.html ).
No arquivo index.html há algumas linhas de código HTML estático:
Olá, mundo!
Esta é a configuração mínima para guias do MS Teams.
Sinta-se à vontade para ajustar o conteúdo do index.html como desejar. Este é o conteúdo a ser exibido em seu cliente Teams. Por fim, vá para Concluir> Testar e distribuir .
Se você receber algum erro, terá que voltar e corrigi-lo. Caso contrário, você pode prosseguir clicando em “Instalar”. E voilà, agora você tem sua própria guia pessoal!
Recursos adicionais com Teams SDK
Este exemplo de código contém apenas o exemplo de código HTML mínimo para mostrar apenas como configurar o Teams para exibir seu aplicativo da web em guias. Mas é claro, seus aplicativos da web não precisam ser estáticos e você pode usar estruturas da web como React se desejar! (Existem exemplos mais aprofundados usando Reaja a que você também pode mergulhar.)
As equipes têm seu próprio JavaScript SDK para fornecer funcionalidade adicional também, como carregar um pop-up de configuração para equipes, obter informações de localidade do usuário etc.
Um exemplo útil é detectar o “tema” de um cliente Teams-o Teams tem três temas, claro (padrão), escuro e modo de alto contraste. Você pensaria que o CSS deveria lidar com o tema, mas lembre-se, seu aplicativo da web é exibido dentro do iframe das equipes, então você precisaria usar o SDK para lidar com a mudança de cor.
Você pode incluir o JavaScript em npm :
npm install--save @ microsoft/teams-js
Ou inclua no seu HTML:
Agora você pode detectar o tema atual com o método getContext . E é assim que você pode determinar a cor do corpo do texto:
microsoftTeams.initialize (); microsoftTeams.getContext ((contexto)=> { if (context.theme!=='default') { document.body.style.color='#fff'; }
});
O tema pode ser alterado por um usuário após o carregamento, portanto, para detectar o evento de alteração do tema, adicione o seguinte snippet de código:
microsoftTeams.registerOnThemeChangeHandler ((theme)=> { if (theme!=='default') { document.body.style.color='#fff'; document.body.style.color='herdar';
}
});
Esperançosamente, este tutorial simples ajudou você a começar com os primeiros passos. Se quiser continuar desenvolvendo para Teams, você pode adicionar mais recursos, como adicionar componentes de IU nativos do Teams, recursos de pesquisa, extensões de mensagens e bots de conversação, para construir aplicativos mais interativos.
Para obter um guia abrangente usando os conjuntos de ferramentas recomendados (Visual Studio Code, Yeoman Generator, etc.), verifique Documentos do desenvolvedor do Teams , onde você pode aprender mais sobre guias, extensões de mensagens, bots, webhooks e outros recursos que a plataforma do desenvolvedor do Teams oferece.
Próximas etapas
Com apenas alguns cliques, você pode integrar seus aplicativos ao Teams e criar novas experiências para seus usuários. E depois de desenvolver aplicativos e implantá-los no Teams, você terá o potencial de alcançar um amplo público de usuários que usam o Teams diariamente.
Você pode começar a construir hoje ou aprenda mais em Aprenda juntos: desenvolvendo aplicativos para equipes com vídeos sob demanda e demonstrações sobre a criação de aplicativos para equipes.
