Créer Agile Poker avec le Kit de développement logiciel (SDK) Live Share - Teams

Le Kit de développement logiciel (SDK) Live Share vous permet de créer des applications collaboratives et de découvrir d’autres façons de collaborer et de se connecter via Teams. Vous pouvez créer des applications pour partager du contenu tel que regarder des films, jouer à des jeux en direct, etc., dans Teams des appels en tête-à-tête, des appels de groupe, planifier des réunions et se réunir maintenant.

Ce guide pas à pas vous aide à créer un exemple d’application Agile Poker à l’aide du Kit de développement logiciel (SDK) Live Share. Vous verrez la sortie suivante :

Configuration requise

5 minutes restantes

Vous installez les outils suivants et configurez votre environnement de développement :

	Installer	Pour l’utilisation...
	Microsoft Teams	Microsoft Teams vous permet de collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour la conversation, les réunions et les appels au même endroit.
	Visual Studio 2022	Vous pouvez installer la version entreprise dans Visual Studio 2022 et installer les charges de travail de développement ASP.NET et web. Utilisez la dernière version.
	Node.js et NPM	Environnement runtime JavaScript principal. Pour plus d’informations, consultez Node.js table de compatibilité des versions pour le type de projet.
	Tunnel de développement	Les fonctionnalités de l’application Teams (bots conversationnels, extensions de message et webhooks entrants) ont besoin de connexions entrantes. Un tunnel connecte votre système de développement à Teams. Le tunnel de développement est un outil puissant pour ouvrir en toute sécurité votre localhost sur Internet et contrôler qui a accès. Le tunnel de développement est disponible dans Visual Studio 2022 version 17.7.0 ou ultérieure. ou Vous pouvez également utiliser ngrok comme tunnel pour connecter votre système de développement à Teams. Elle n’est pas obligatoire pour les applications qui incluent uniquement des onglets. Ce package est installé dans le répertoire du projet (à l’aide de npm `devDependencies`).

Remarque

Après avoir téléchargé ngrok, inscrivez-vous et installez authtoken.

Créer et exécuter l’exemple d’application Agile Poker

4 minutes restantes

Accédez à l’exemple d’application Agile Poker .
Clonez le référentiel Kit de développement logiciel (SDK) Live Share pour tester l’exemple d’application :
```
  git clone https://github.com/microsoft/live-share-sdk.git
```
Ouvrez une fenêtre de terminal.
Exécutez la commande suivante pour accéder au dossier de l’exemple d’application Agile Poker :
```
cd live-share-sdk\samples\javascript\22.react-agile-poker
```
Exécutez la commande suivante pour installer le package de dépendance :
```
npm install
```
Exécutez la commande suivante pour démarrer le serveur web local et le client :
```
npm run start
```
Un nouvel onglet de navigateur ouvre une http://localhost:3000 fenêtre et le jeu Agile Poker s’affiche.
Ouvrez une nouvelle fenêtre de terminal ngrok pour créer un tunnel et déployer votre application localement.
Exécutez la commande suivante pour créer un tunnel. L’exemple d’application utilise le port 3000 :
```
ngrok http 3000--host-header=localhost
```
le tunnel ngrok est créé.

Configurer le fichier manifeste et charger votre application

3 minutes restantes

Vous devez configurer le fichier manifeste et charger le package manifest.zip dans Teams.

Ouvrez le fichier manifest.json et mettez à jour les informations suivantes.
- Définissez sur "ID"ID d’application Microsoft.
- Remplacez toutes les occurrences de par votre nom de <<BASE_URI_DOMAIN>> domaine ngrok ou devtunnel complet.
Créez un fichier .zip avec les fichiers suivants présents dans le dossier Manifeste :
- manifest.json
- outline.png
- color.png
Créez une réunion dans Teams avec quelques présentateurs et participants.
Rejoindre la réunion.
Une fois la réunion démarrée, sélectionnez Applications.
Dans la fenêtre contextuelle, sélectionnez Gérer les applications.
Sélectionnez Charger une application.
Sélectionnez le fichier .zip que vous avez créé dans le dossier Manifeste , puis sélectionnez Ouvrir.
Sélectionnez Ajouter.
Revenez à la page des détails de la réunion, puis sélectionnez ApplicationAgile Pokerapplications>.
Sélectionnez Enregistrer.

L’application Agile Poker est ajoutée au panneau latéral de la réunion Teams.

Tester votre application

2 minutes restantes

Sélectionnez un récit utilisateur à partir des récits utilisateur dans le panneau latéral de la réunion, puis sélectionnez Planifier ensemble.

Teams démarre une synchronisation en direct avec les utilisateurs de la réunion.

Relever le défi

1 minutes restantes

Tu as trouvé quelque chose comme ça ?

Félicitations !

Tout est terminé !

Vous avez terminé le tutoriel pour créer des applications collaboratives pour Microsoft Teams à l’aide du Kit de développement logiciel (SDK) Live Share.

Partager via