Créer des applications de réunion pour Microsoft Teams avec SPFx

La SharePoint Framework (SPFx) version 1.8 a introduit la possibilité d’utiliser des composants Web SPFx pour implémenter Microsoft Teams onglets. L’SharePoint Framework peut simplifier Microsoft Teams développement d’applications, comme expliqué dans build for Microsoft Teams using SharePoint Framework.

Les développeurs peuvent créer des applications pour Microsoft Teams réunions à l’aide des mêmes techniques que pour créer des onglets personnalisés. Dans ce didacticiel, vous allez apprendre à implémenter une application de réunion Microsoft Teams personnalisée à l’aide d’un SPFx web.

Microsoft Teams applications de réunion doivent prendre en charge les onglets configurables dans l’étendue groupchat. Cela active les conversations préalables et post-réunion. Reportez-vous à la documentation suivante pour obtenir des exigences supplémentaires : Créer des applications pour Teams réunions : conditions préalables et considérations

Important

Ce didacticiel SPFx la v1.11 ou supérieure.

Créer un projet d’onglet Microsoft Teams

  1. Créez un nouveau répertoire de projet à l’emplacement de votre choix :

    md teams-meeting-app
    
  2. Accédez au répertoire du projet :

    cd teams-meeting-app
    
  3. Créez une solution en exécutant le générateur de Yeoman SharePoint Framework :

    yo @microsoft/sharepoint
    
  4. Lorsque vous y êtes invité, entrez les valeurs suivantes (sélectionnez l’option par défaut pour toutes les invites qui ne sont pas mentionnées ci-dessous) :

    • Quel est le nom de votre solution ?: teams-meeting-app
    • Voulez-vous autoriser l’administrateur client à choisir de pouvoir déployer la solution sur tous les sites immédiatement sans exécuter de déploiement de fonctionnalité ni ajouter d’applications sur les sites ? : oui
    • Quel type de composant côté client voulez-vous créer ? : WebPart
    • Quel est le nom de votre partie Web ?: MyFirstTeamsMeetingApp
    • Quelle est la description de votre partie Web ? : Mon premier Microsoft Teams de réunion
    • Quelle infrastructure voulez-vous utiliser ? : Aucune infrastructure web JavaScript

    À ce stade, Yeoman crée les dossiers & fichiers pour le projet, puis installe les dépendances requises.

  5. Ensuite, saisissez les informations suivantes pour ouvrir le projet de composant WebPart dans Visual Studio Code :

    code .
    

Mettre à jour du manifeste du composant WebPart afin de le rendre disponible pour Microsoft Teams

Recherchez le fichier ./src/webparts/ * * /manifest.json pour le partie WebPart que vous utiliserez comme onglet pour la solution d’application de réunion. Recherchez supportedHosts la propriété à inclure "TeamsTab" :

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "..",
  "alias": "MyFirstTeamsMeetingAppWebPart",
  "componentType": "WebPart",
  "version": "*",

  //...

  "supportedHosts": ["SharePointWebPart", "TeamsTab"],

  //...
}

Mettre à jour du code concernant le contexte Microsoft Teams

  1. Ouvrez ./src/webparts/helloWorld/MyFirstTeamsTabWebPart.ts pour apporter les modifications nécessaires de sorte que notre solution soit consciente du contexte Microsoft Teams, si elle est utilisée en tant qu’onglet.

  2. Mettez à jour la méthode render() de la manière suivante.

    La manière dont le contenu est rendu est différente selon si le code est affiché sous la forme d’un onglet dans Microsoft Team ou en tant que composant WebPart dans SharePoint. Nous pouvons détecter si une solution est hébergée par Microsoft Teams en vérifiant la propriété this.context.sdks.microsoftTeams.

    public render(): void {
    
      let title: string = 'ERR: not in Microsoft Teams';
      let subTitle: string = 'ERR: not in Microsoft Teams';
    
      if (this.context.sdks.microsoftTeams) {
        if (this.context.sdks.microsoftTeams.context.meetingId) {
          title = "Welcome to Microsoft Teams!";
          subTitle = "We are in the context of following meeting: " + this.context.sdks.microsoftTeams.context.meetingId;
        } else {
          title = "Welcome to Microsoft Teams!";
          subTitle = "We are in the context of following team: " + this.context.sdks.microsoftTeams.context.teamName;
        }
      }
    
      this.domElement.innerHTML = `
        <div class="${ styles.myFirstTeamsMeetingApp }">
          <div class="${ styles.container }">
            <div class="${ styles.row }">
              <div class="${ styles.column }">
                <span class="${ styles.title }">${title}</span>
                <p class="${ styles.subTitle }">${subTitle}</p>
              </div>
            </div>
          </div>
        </div>`;
    }
    

Préparer l’Microsoft Teams pour le déploiement

Lorsqu’une solution SPFx est utilisée dans une application Microsoft Teams, elle doit être déployée à la fois sur SharePoint Online et Microsoft Teams. Reportez-vous aux options de déploiement SharePoint Framework solutions pour Microsoft Teams pour plus d’informations sur les options de déploiement.

Les applications de réunion nécessitent des détails dans le Microsoft Teams manifeste de l’application qui ne sont pas créés automatiquement par SharePoint Online. Par conséquent, vous devez utiliser l’option de Microsoft Teams de manifeste d’application fournie & développeur.

Cela signifie que vous devez créer le fichier manifeste de l’application et le fichier de package d’application.

Créer le manifeste Microsoft Teams’application

Créez un fichier ./teams/manifest.json.

Ajoutez le JSON suivant au fichier :

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
  "manifestVersion": "1.8",
  "packageName": "{{SPFX_PACKAGE_NAME}}",
  "id": "{{SPFX_COMPONENT_ID}}",
  "version": "1.0",
  "developer": { .. },
  "name": {
    "short": "{{SPFX_COMPONENT_NAME}}"
  },
  "description": {
    "short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
    "full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
  },
  "icons": {
    "outline": "{{SPFX_COMPONENT_ID}}_outline.png",
    "color": "{{SPFX_COMPONENT_ID}}_color.png"
  },
  "accentColor": "#004578",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}",
      "canUpdateConfiguration": false,
      "scopes": [
        "team",
        "groupchat"
      ],
      "context": [
        "channelTab",
        "privateChatTab",
        "meetingSidePanel",
        "meetingDetailsTab",
        "meetingChatTab"
      ]
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "resourceseng.blob.core.windows.net"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

Une fois le manifeste Teams d’application de base créé, vous devez y apporter les modifications suivantes :

  • Recherchez les {{SPFX_COMPONENT_*}} valeurs dans le JSON... ces valeurs doivent être mises à jour. Définissez les instances multiples {{SPFX_COMPONENT_ID}} sur l’ID du composant. Cela se trouve dans la id propriété dans le fichier ./src/webparts/ * * /manifest.json.
  • Remplacez packageName la propriété par le nom de votre Teams application.
  • Remplacez l’objet par le même objet et les mêmes valeurs que ceux qui sont définies dans votre fichier developer ./config/package-solution.json.
  • Remplacer les name & description objets par des valeurs réelles indique le nom et la description de l’application.

Notes

Pour plus d’informations sur les propriétés du manifeste Microsoft Teams’application, voir schéma de manifeste pour Microsoft Teams.

Important

Ne remplacez pas la {teamSiteDomain} chaîne dans le fichier manifeste de l’application. Cet espace réservé est remplacé par l’URL SharePoint Online du client au moment de l’Microsoft Teams.

Créer le package Microsoft Teams’application

Pour rendre votre solution SPFx disponible pour une utilisation dans Microsoft Teams, elle doit être empaqueté & déployée sur SharePoint Online.

  1. Créez le paquet d'applications Microsoft Teams nommé TeamsSPFxApp.zip en compressant le contenu du dossier ./teams.

    Important

    Ne compressez pas le dossier, mais le contenu du dossier. Si vous compressez le dossier, il crée un sous-dossier de niveau supérieur dans le fichier ZIP qui en résulte et qui n’est pas un package d’application valide pour Microsoft Teams.

  2. Enregistrez le fichier TeamsSPFxApp.zip dans le dossier ./src/teams de la solution SPFx.

Package et déploiement sur SharePoint Online

  1. Exécutez ces commandes pour créer votre package de solutions. Cette opération exécute une version de votre projet à l’aide d’une étiquette dynamique comme l’URL hôte pour vos ressources.

    gulp bundle --ship
    
  2. Exécutez la tâche suivante pour créer un package pour votre solution. Cela crée un package ./sharepoint/solution/.sppkg * mis à jour.

    gulp package-solution --ship
    
  3. Ensuite, déployez le package qui a été généré dans le catalogue d’applications client.

    Accédez au catalogue de l’application SharePoint de votre client.

  4. Télécharger ou faites glisser et déposez le ./sharepoint/solution/ * .sppkg dans le catalogue d’applications du client.

    Charger la solution dans le catalogue d’applications

    Cette action déploie le package de la solution côté client.

    Assurez-vous que l’option Rendre cette solution disponible pour tous les sites de l’organisation est sélectionnée, afin que le Microsoft Teams.

    Approuver la solution côté client à déployer

  5. Sélectionnez Déployer.

À ce stade, la solution est déployée sur SharePoint Online et est disponible pour tous les sites SharePoint Online.

Publier l’application de réunion dans le Microsoft Teams’application

Pour rendre votre application de réunion disponible dans Microsoft Teams, vous devez synchroniser votre solution avec teams.

Notes

Pendant la phase de test, vous pouvez recharger une version test de votre application de réunion Microsoft Teams au lieu de la déployer dans le magasin d’applications de votre organisation. Pour ce faire, vous pouvez ignorer cette section et passer à la section Tester l’application de réunion.

  1. Sélectionnez le package dans SharePoint catalogue d’applications client et sélectionnez le bouton Synchroniser Teams dans le ruban de l’onglet Fichiers.

    Bouton synchroniser avec Teams du ruban

    SharePoint Online détecte le fichier TeamsSPFxApp.zip dans le package * .sppkg et le déploie dans le magasin d’applications Microsoft Teams au lieu de créer automatiquement le manifeste de l’application et le package d’application.

  2. Vérifiez que vous pouvez voir le message d’État dans le coin supérieur droit.

    Synchroniser avec le Teams dans le message d’état du ruban

Tester l’application de réunion

La dernière étape consiste à tester l’application de réunion dans Microsoft Teams. Pour ce faire, vous allez créer une réunion qui n’est pas une réunion de canal et qui a au moins une personne invitée :

  1. Ouvrez le Microsoft Teams client de bureau.

  2. Créez une réunion à l’aide de l’application Calendrier dans la barre d’application de gauche.

  3. Inviter une personne à la réunion.

  4. Enregistrez la réunion.

  5. À partir de l’application Calendrier, ouvrez la réunion de test que vous avez créée.

  6. Sélectionnez + le bouton (plus) à droite des onglets existants.

    Ajouter l’onglet réunion

  7. Sélectionner votre application de réunion personnalisée

Une fois que l’application a été installée dans la réunion, lorsque vous revenirz à la page de détails de la réunion, vous voyez l’application sous la forme d’un nouvel onglet. L’onglet se charge dans l’expérience de réunion avant/après, comme illustré dans la capture d’écran suivante :

Sélectionner une application de réunion

Important

À l’heure actuelle, l’expérience en réunion pour SPFx une application Teams réunion ne fonctionne pas. Au cours d’une réunion, si vous sélectionnez l’application, l’application de réunion se charge dans un onglet, mais restituera une page d’erreur SharePoint Online.

Cela est dû à une limitation dans Microsoft Teams qui sera résolue dans le premier semestre de 2021.

Voir aussi