QuickStart : créer un onglet personnel personnalisé avec Node.js et le générateur Yeoman pour Microsoft teamsQuickstart: Create a custom personal tab with Node.js and the Yeoman Generator for Microsoft Teams

Notes

Ce démarrage rapide suit les étapes décrites dans le wiki de création de votre première application Microsoft teams dans le référentiel GitHub de Microsoft OfficeDev.This quickstart follows the steps outlined in the Build Your First Microsoft Teams App Wiki found in the Microsoft OfficeDev GitHub repository.

Dans ce démarrage rapide, nous allons passer en revue la création d’un onglet personnel personnalisé à l’aide du Générateur Yeoman teams.In this quickstart we'll walk-through creating a custom personal tab using the Teams Yeoman generator. Nous allons également télécharger l’application vers Team.We'll also upload the application to Team.

Conditions préalablesPrerequisites

  • Pour terminer ce démarrage rapide, vous aurez besoin d’un client Office 365 et d’une équipe configurée avec l’option autoriser le téléchargement d’applications personnalisées .To complete this quickstart you will need an Office 365 tenant and a team configured with Allow uploading custom apps enabled. Pour en savoir plus, consultez la rubrique préparer votre client Office 365.To learn more, see Prepare your Office 365 tenant.

    • Si vous ne disposez pas d’un compte Office 365, vous pouvez vous inscrire pour obtenir un abonnement gratuit via le programme de développement 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. L’abonnement reste actif tant que vous l’utilisez pour le développement continu.The subscription will remain active as long as you're using it for ongoing development. Consultez la page Bienvenue dans le programme pour les développeurs Office 365.See Welcome to the Office 365 Developer Program.

De plus, ce projet requiert que les éléments suivants soient installés dans votre environnement de développement :In addition, this project requires that you have the following installed in your development environment:

  • N’importe quel éditeur de texte ou IDE.Any text editor or IDE. Vous pouvez installer et utiliser Visual Studio code gratuitement.You can install and use Visual Studio Code for free.

  • Node. js/NPM.Node.js/npm. Vous devez utiliser la dernière version d’LTS.You should use the latest LTS version. Le gestionnaire de package de nœuds (NPM) s’installe dans votre système avec l’installation de node. js.The Node Package Manager (npm) will install into your system with the installation of Node.js.

  • Une fois que vous avez installé node. js, installez les packages Yeoman et Gulp-CLI en tapant ce qui suit dans votre invite de commandes :After you've successfully installed Node.js, install the Yeoman and gulp-cli packages by typing the following in your command prompt:

npm install yo gulp-cli --global
  • Installez le générateur d’applications Microsoft teams en tapant ce qui suit dans votre invite de commandes :Install the Microsoft Teams Apps generator by typing the following in your command prompt:
npm install generator-teams --global

Générer votre projetGenerate your project

  • Ouvrez une invite de commandes et créez un nouveau répertoire pour votre projet d’onglet.Open a command prompt and create a new directory for your tab project.

  • Pour démarrer le générateur, accédez à votre nouveau répertoire et tapez la commande suivante :To start the generator, navigate to your new directory and type the following command:

yo teams
  • Ensuite, vous devez fournir une série de valeurs qui seront utilisées dans le fichier Manifest. JSON de votre application :Next, you'll provide a series of values that will be used in your application's manifest.json file:

capture d’écran d’ouverture du générateur

Quel est le nom de votre solution ?What is your solution name?

Il s’agit de votre nom de projet.This is your project name. Vous pouvez accepter le nom suggéré en appuyant sur entrée.You can accept the suggested name by pressing enter.

Où souhaitez-vous placer les fichiers ?Where do you want to place the files?

Vous êtes actuellement dans le répertoire de votre projet.You're currently in your project directory. Appuyez sur entrée.Press enter.

Titre de votre projet d’application Microsoft teams ?Title of your Microsoft Teams app project?

Il s’agit du nom de votre package d’application et sera utilisé dans le manifeste de l’application et sa description.This is your app package name and will be used in the app manifest and description.

Votre nom (société) ? (32 caractères max.)Your (company) name? (max 32 characters)

Le nom de votre société sera utilisé dans le manifeste de l’application.Your company name will be used in the app manifest.


Quelle version de manifeste souhaitez-vous utiliser ?Which manifest version would you like to use?

Sélectionnez le schéma par défaut.Select the default schema.

Entrez votre ID partenaire Microsoft, si vous en avez un ? (Laissez le champ vide pour sauter)Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)

Ce champ n’est pas obligatoire et doit être utilisé uniquement si vous faites déjà partie du réseau partenaire de Microsoft.This field isn't required and should only be used if you're already part of the Microsoft Partner Network.

Que voulez-vous ajouter à votre projet ?What do you want to add to your project?

* Sélectionnez un onglet.Select ( * ) A Tab.

L’URL où vous allez héberger cette solution ?The URL where you will host this solution?

Par défaut, le générateur suggère une URL de sites Web Azure.By default the generator suggests an Azure Web Sites URL. Vous testez uniquement votre application localement, par conséquent, une URL valide n’est pas nécessaire pour effectuer ce démarrage rapide.You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.

Voulez-vous inclure l’infrastructure de test et les tests initiaux ? (o/N)Would you like to include Test framework and initial tests? (y/N)

Choisissez de ne pas inclure d’infrastructure de test pour ce projet.Choose not to include a test framework for this project. La valeur par défaut est oui ; entrez n.The default is yes; enter n.

Voulez-vous utiliser les analyses des applications Azure pour la télémétrie ? (o/N)Would you like to use Azure Applications Insights for telemetry? (y/N)

Choisissez de ne pas inclure les informations d' application Azure.Choose not to include Azure Application Insights. La valeur par défaut est non ; entrez n.The default is no; enter n.

Nom d’onglet par défaut (16 caractères maximum) ?Default Tab Name (max 16 characters)?

Nommez votre onglet. Ce nom d’onglet sera utilisé dans votre projet en tant que composant de chemin d’accès de fichier/URL.Name your tab. This tab name will be used throughout your project as a file/URL path component.

Voulez-vous créer un onglet configurable ou statique ?Do you want to create a configurable or static tab?

Utilisez les touches de direction pour sélectionner l’onglet statique.Use the arrow keys to select static tab.

Important

Le composant de chemin d’accès yourDefaultTabNameTab, référencé dans ce démarrage rapide, est la valeur que vous avez entrée dans le générateur pour le nom de l' onglet par défaut , ainsi que l' ongletmot.The path component yourDefaultTabNameTab, referenced in this quickstart, is the value that you entered in the generator for Default Tab Name plus the word Tab.

Par exemple : DefaultTabName : MyTab => /MyTabTab/For example: DefaultTabName: MyTab => /MyTabTab/

Créer votre onglet personnelCreate your personal tab

Pour ajouter un onglet personnel à cette application, vous allez créer une page de contenu et mettre à jour les fichiers existants :To add a personal tab to this application you'll create a content page and update existing files:

  • Dans votre éditeur de code, créez un nouveau fichier HTML, personal.html et ajoutez le balisage suivant :In your code editor, create a new HTML file, personal.html and add the following markup:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            <!-- Todo: add your a title here -->
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- inject:css -->
        <!-- endinject -->
    </head>
        <body>
            <h1>Personal Tab</h1>
            <p><img src="/assets/icon.png"></p>
            <p>This is your personal tab!</p>
        </body>
</html>
  • Enregistrez personal.html dans le dossier Web de votre application :Save personal.html in your application's web folder:
./src/app/web/<yourDefaultTabNameTab>/personal.html
  • Ouvrez manifest.js dans votre éditeur de code :Open manifest.json in your code editor:
./src/manifest/manifest.json/

Ajoutez ce qui suit dans le staticTabs tableau vide ( staticTabs":[] ) et ajoutez l’objet JSON suivant :Add the following to the empty staticTabs array (staticTabs":[]) and add the following JSON object:

{
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{HOSTNAME}}",
    "scopes": ["personal"]
}

N’oubliez pas de mettre à jour le composant de chemin d’accès « contentURL » yourDefaultTabNameTab avec votre nom d’onglet réel.Remember to update the "contentURL" path component yourDefaultTabNameTab with your actual tab name.

  • Enregistrez lemanifest.jsmis à jour ** sur**.Save the updated manifest.json.

  • Votre page de contenu doit être fournie dans un IFrame.Your content page must be served in an IFrame. Ouvrez Tab. TS dans votre éditeur de code :Open Tab.ts in your code editor:

./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
  • Ajoutez les éléments suivants à la liste des décorateurs IFrame :Add the following to the list of IFrame decorators:
 @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
  • Veillez à enregistrer le fichier Tab. TS mis à jour.Make sure to save the updated Tab.ts file. Votre code d’onglet est complet.Your tab code is complete.

Création et exécution de votre applicationBuild and Run Your Application

Ouvrez une invite de commandes dans le répertoire de votre projet pour effectuer les tâches suivantes.Open a command prompt in your project directory to complete the next tasks.

Créer le package d’applicationCreate the app package

Vous aurez besoin d’un package d’application pour tester votre onglet dans Teams.You'll need an app package to test your tab in Teams. Il s’agit d’un dossier zip contenant les fichiers requis suivants :It's a zip folder that contains the following required files:

  • Une icône de couleur complète mesurant 192 x 192 pixels.A full color icon measuring 192 x 192 pixels.
  • Icône de contour transparent mesurant 32 x 32 pixels.A transparent outline icon measuring 32 x 32 pixels.
  • Un fichier Manifest. JSON qui spécifie les attributs de votre application.A manifest.json file that specifies the attributes of your app.

Le package est créé via une tâche Gulp qui valide le fichier manifest. JSON et génère le dossier zip dans le ./package directory.The package is created via a gulp task that validates the manifest.json file and generates the zip folder in the ./package directory. Dans l’invite de commandes, entrez :In the command prompt enter:

gulp manifest

Créer votre applicationBuild your application

La commande de génération compile votre solution dans le dossier . dossier/dist. .The build command transpiles your solution into the ./dist folder. Ensuite, entrez :Next,enter:

gulp build

Exécuter votre application dans localhostRun your application in localhost

Démarrez un serveur Web local en entrant la commande suivante :Start a local web server by entering the following:

gulp serve

Entrez http://localhost:3007/<yourDefaultAppNameTab>/ dans votre navigateur et affichez la page d’accueil de votre application :Enter http://localhost:3007/<yourDefaultAppNameTab>/ in your browser and view your application's home page:

capture d’écran de la page d’accueil

Pour afficher votre onglet personnel, accédez à http://localhost:3007/<yourDefaultAppNameTab>/personal.htmlTo view your personal tab, go to http://localhost:3007/<yourDefaultAppNameTab>/personal.html

capture d’écran de l’onglet personnel

Établir un tunnel sécurisé vers votre ongletEstablish a secure tunnel to your tab

Microsoft teams est un produit entièrement basé sur le Cloud et nécessite que le contenu de votre onglet soit disponible dans le nuage à l’aide de points de terminaison HTTPs.Microsoft Teams is an entirely cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams n’autorise pas l’hébergement local ; par conséquent, vous devez publier votre onglet sur une URL publique ou utiliser un proxy qui exposera votre port local à une URL accessible sur Internet.Teams doesn't allow local hosting, therefore, you 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.

Pour tester votre extension d’onglet, vous utiliserez ngrok, qui est intégré à cette application.To test your tab extension, you'll use ngrok, which is built into this application. Ngrok est un outil logiciel de proxy inverse qui crée un tunnel vers vos points de terminaison HTTPs de serveur Web en cours d’exécution locaux.Ngrok is a reverse proxy software tool that will create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Les points de terminaison Web de votre serveur seront disponibles pendant la session en cours sur votre ordinateur local.Your server's web endpoints will be available during the current session on your local machine. Lorsque l’ordinateur est arrêté ou passe en mode veille, le service n’est plus disponible.When the machine is shut down or goes to sleep the service will no longer be available.

À l’invite de commandes, quittez localhost et entrez ce qui suit :In your command prompt, exit localhost and enter the following:

gulp ngrok-serve

Important

Une fois que votre onglet a été téléchargé dans Microsoft Teams, via ngrok, et enregistré correctement, vous pouvez l’afficher dans teams jusqu’à ce que la session de tunnel se termine.After your tab has been uploaded to Microsoft teams, via ngrok, and successfully saved, you can view it in Teams until your tunnel session ends.

Chargement de votre application dans teamsUpload your application to Teams

  • Ouvrez le client Microsoft Teams.Open the Microsoft Teams client. Si vous utilisez la version basée sur le Web , vous pouvez inspecter votre code frontal à l’aide des outils de développementde votre navigateur.If you use the web based version you can inspect your front-end code using your browser's developer tools.
  • Dans le volet YourTeams à gauche, sélectionnez le ... menu en regard de l’équipe que vous utilisez pour tester votre onglet, puis sélectionnez gérer l’équipe.In the YourTeams panel on the left, select the ... menu next to the team that you're using to test your tab and choose Manage team.
  • Dans le panneau principal, sélectionnez applications dans la barre d’onglets et choisissez Télécharger une application personnalisée située dans l’angle inférieur droit de la page.In the main panel select Apps from the tab bar and choose Upload a custom app located in the lower right-hand corner of the page.
  • Ouvrez le répertoire de votre projet, accédez au dossier ./Package , sélectionnez le dossier zip, cliquez avec le bouton droit, puis choisissez ouvrir.Open your project directory, browse to the ./package folder, select the zip folder, right-click, and choose Open. Votre onglet est chargé dans Teams.Your tab will upload into Teams.

Afficher vos onglets personnelsView your personal tabs

Dans la barre de navigation située à l’extrême gauche du client Teams, sélectionnez le ... menu et choisissez votre application dans la liste.In the navbar located at the far-left of the Teams client, select the ... menu and choose your app from the list.