À propos des auteurs

Tomomi Imura ( @girlie_mac ) est un fervent défenseur de la technologie Web ouverte et un ingénieur full-stack, qui travaille actuellement en tant que Cloud Avocat chez Microsoft à San…
En savoir plus sur
Tomomi et Daisy
↬

Vous utilisez peut-être Microsoft Teams au travail et souhaitez créer une application qui s'exécute dans Teams. Ou peut-être avez-vous déjà publié une application sur une autre plate-forme et souhaitez gagner plus d'utilisateurs dans Teams. Dans cet article, nous allons voir comment créer une nouvelle application Web dans Teams et comment intégrer une application existante, avec seulement quelques lignes de code.

Vous n'avez pas besoin d'expérience préalable pour commencer. Nous utiliserons du code HTML et des ensembles d'outils pour créer un onglet Teams (la version la plus simple d'une application dans Teams). Pendant que vous parcourez ce didacticiel, si vous souhaitez approfondir, regardez les vidéos à la demande de Learn Together: Developing Apps for Teams . Il s'avère que rendre votre application Web accessible là où vos utilisateurs travaillent déjà présente certains avantages, notamment une portée de plus de 115 millions d'utilisateurs actifs quotidiens.

Microsoft Teams en tant que plate-forme

Vous connaissez peut-être Teams en tant qu'outil de communication collaboratif, mais en tant que développeur, vous pouvez également le considérer comme une plate-forme de développement . En fait, Teams offre un autre moyen d'interagir avec et de distribuer vos applications Web existantes. C'est principalement parce que l'outil a toujours été conçu avec le Web à l'esprit. L'un des principaux avantages de l'intégration des applications Web dans Teams est de fournir un moyen plus productif pour les utilisateurs – vos collègues et utilisateurs Teams du monde entier – d'accomplir le travail.

Intégration via des onglets, le Web intégré apps

Bien qu'il existe de nombreux chemins différents pour créer et déployer des applications Teams, l'un des plus simples consiste à intégrer vos applications Web existantes avec Teams via ce que l'on appelle des «onglets». Les onglets sont essentiellement des applications Web intégrées créées à l'aide de HTML, TypeScript (ou JavaScript), de frameworks côté client tels que React ou de tout autre framework côté serveur tel que .NET.

Les onglets vous permettent de afficher le contenu dans votre application en intégrant essentiellement une page Web dans Teams en utilisant . L'application a été spécialement conçue avec cette fonctionnalité à l'esprit. Vous pouvez donc intégrer des applications Web existantes pour créer des expériences personnalisées pour vous-même, votre équipe et les utilisateurs de vos applications.

Une fonctionnalité utile concernant l'intégration de vos applications Web avec Teams est que vous pouvez utilisez à peu près les outils de développement que vous connaissez probablement déjà: Git, Node.js, npm et Visual Studio Code. Pour étendre vos applications avec des fonctionnalités supplémentaires, vous pouvez utiliser des outils spécialisés tels que l'outil de ligne de commande Teams Yeoman Generator ou Teams Toolkit Visual Studio Code extension et le client JavaScript Microsoft Teams SDK . Ils vous permettent de récupérer des informations supplémentaires et d'améliorer le contenu que vous affichez dans l'onglet Équipes.

Créer un onglet avec un exemple de code existant

Commençons par les bases. (Si vous voulez aller plus loin pour déployer réellement votre application, vous pouvez accéder aux Vidéos Learn Together ) pour en savoir plus.

Pour simplifier les étapes, jetons un œil à un code exemple, donc au lieu des outils décrits ci-dessus, les seules choses dont vous aurez besoin sont:

Dans cet article, nous allons utiliser un IDE basé sur le Web appelé Glitch qui vous permet de hébergez et exécutez ce projet rapidement dans le navigateur, afin que vous n'ayez pas à vous soucier du tunneling ou du déploiement pour le moment. Pour une approche à grande échelle du début à la fin, vous pouvez consulter un didacticiel complet sur Microsoft Docs qui comprend des exemples d'une extension de messagerie légèrement plus avancée ou d'un bot .

Bien que Glitch soit un excellent outil à des fins de didacticiel, ce n'est pas un environnement évolutif donc, en réalité, vous aurez également besoin d'un moyen de déployer et d'héberger vos services Web. En un mot, pendant que vous développez, vous devez configurer un développement local avec un tunnel d'hôte local, tel que l'outil tiers ngrok et pour la production, vous devrez déployer votre application sur un fournisseur de services cloud, par exemple, Microsoft Azure Web Services .

Vous pouvez également utiliser une infrastructure sur site pour héberger vos services Web, mais ils doivent être accessibles au public (et non derrière un pare-feu). Pour cet article, nous allons nous concentrer sur la façon de rendre votre application Web disponible sur Teams, alors revenons à Glitch pour le moment!

Tout d'abord, passons à l'exemple de page de code et remix le projet . Remixer, c'est comme forger un dépôt sur GitHub, il génère donc une copie du projet pour vous, vous permettant de modifier le code comme vous le souhaitez sans jouer avec l'original.

Une fois que vous avez votre propre dépôt de projets, vous obtiendrez également automatiquement votre propre URL de serveur Web. Par exemple, si le nom de votre projet généré est completed-diligent-bell l'URL de votre serveur Web sera https://achieved-diligent-bell.glitch.me . Bien sûr, vous pouvez personnaliser le nom si vous le souhaitez.

Services Web opérationnels, vous devrez créer un package d'application pouvant être distribué et installé dans Teams. Le package d'application à installer sur le client Teams contient deux icônes et un fichier manifeste JSON décrivant les métadonnées de votre application, les points d'extension que votre application utilise et des pointeurs vers les services alimentant ces points d'extension.

Créer un package d'application

Vous devrez maintenant créer un package d'application pour rendre votre application Web disponible dans Teams. Le package comprend:

 📁 votre-package-app
 └── 📄 manifest.json
 └── 🖼 color.png (192x192)
 └── 🖼 contour.png (32x32)

Lors de la création de votre package d'application, vous pouvez choisir de le créer manuellement ou utiliser App Studio qui est une application utile dans Teams qui aide les développeurs à créer des applications Teams (oui, méta en effet). App Studio vous guidera tout au long de la configuration de l'application et créera automatiquement votre manifeste d'application.

Une fois que vous avez installé l'application App Studio dans votre client Teams, ouvrez l'application. Vous pouvez le lancer en cliquant sur les trois points dans la barre de menu de gauche.

Ensuite, cliquez sur l'onglet Editeur de manifeste en haut et sélectionnez Créer une nouvelle application .

Vous allez devoir remplir tous les champs obligatoires, y compris les noms des applications, les descriptions, etc.

Dans la section URL des applications, remplissez vos pages Web de confidentialité et de confidentialité. Dans cet exemple, nous utilisons juste l'URL d'espace réservé, https://example.com .

Configurez votre onglet personnel en sélectionnant Capabilities> Tabs dans le menu de gauche. [19659039] Maintenant, vous pouvez configurer les capacités de l'onglet. ( Grand aperçu )

Cliquez sur le bouton Ajouter sous Ajouter un onglet personnel et entrez les informations. Sous URL de contenu, entrez l'URL de votre page Web (dans ce cas, il doit s'agir de https: // [your-project-name] .glitch.me / index.html ).

Le fichier index.html contient quelques lignes de code HTML statique:

 Bonjour tout le monde! 
 Il s'agit du paramètre minimal pour les onglets MS Teams. 

N'hésitez pas à modifier le contenu de l'index.html comme vous le souhaitez. Il s'agit du contenu à afficher dans votre client Teams. Enfin, allez dans Terminer> Tester et distribuer .

Si vous rencontrez des erreurs, vous devrez revenir en arrière et les corriger. Sinon, vous pouvez continuer en cliquant sur «Installer». Et voilà, maintenant vous avez votre propre onglet personnel!

Fonctionnalités supplémentaires avec le SDK Teams

Cet exemple de code ne contient que l'exemple de code HTML minimal pour vous montrer comment configurer Teams pour afficher votre application Web dans les onglets. Mais bien sûr, vos applications Web n'ont pas besoin d'être statiques et vous pouvez utiliser des frameworks Web tels que React si vous le souhaitez! (Il existe des exemples plus détaillés utilisant React dans lesquels vous pouvez également vous plonger.)

Teams possède son propre SDK JavaScript pour fournir des fonctionnalités supplémentaires, comme le chargement d'un fenêtre contextuelle de configuration pour les équipes, obtenir les informations locales de l'utilisateur, etc.

Un exemple utile est la détection du «thème» d'un client Teams – Teams a trois thèmes, clair (par défaut), sombre et mode à contraste élevé. Vous pourriez penser que CSS devrait gérer le thème, mais rappelez-vous que votre application Web est affichée dans l'iframe de Teams, vous devrez donc utiliser le SDK pour gérer le changement de couleur.

Vous pouvez inclure le JavaScript soit de npm :

 npm install --save @ microsoft / teams-js

Ou inclure dans votre code HTML:

Vous pouvez maintenant détecter le thème actuel avec la méthode getContext . Et voici comment vous pouvez déterminer la couleur du corps du texte:

 microsoftTeams.initialize ();

microsoftTeams.getContext ((contexte) => {
  if (context.theme! == 'default') {
    document.body.style.color = '#fff'; }
});

Le thème peut être modifié par un utilisateur après le chargement, donc pour détecter l'événement de changement de thème, ajoutez l'extrait de code suivant:

 microsoftTeams.registerOnThemeChangeHandler ((theme) => {
  if (theme! == 'default') {
    document.body.style.color = '#fff';
    document.body.style.color = 'hériter';
}
});

Avec un peu de chance, ce tutoriel simple vous a aidé à démarrer avec les premières étapes. Si vous souhaitez continuer à développer pour Teams, vous pouvez ajouter d'autres fonctionnalités telles que l'ajout de composants d'interface utilisateur natifs Teams, de fonctionnalités de recherche, d'extensions de messagerie et de bots conversationnels, pour créer des applications plus interactives.

Pour un guide complet utilisant les ensembles d'outils recommandés (Visual Studio Code, Yeoman Generator, etc.), consultez Teams Developer Docs où vous pouvez en savoir plus sur les onglets, les extensions de messagerie, les bots, les webhooks et les autres fonctionnalités. que la plate-forme de développement Teams fournit.

Étapes suivantes

En quelques clics, vous pouvez intégrer vos applications dans Teams et créer de nouvelles expériences pour vos utilisateurs. Et une fois que vous avez développé des applications et les avez déployées dans Teams, vous aurez le potentiel d'atteindre un large public d'utilisateurs qui utilisent Teams quotidiennement.

Vous pouvez commencer à créer dès aujourd'hui ou Pour en savoir plus, consultez Learn Together: Developing Apps for Teams avec des vidéos et des démos à la demande pour créer des applications pour Teams.

(vf, il)