Framework Fluid dans les applications sharePoint incorporées

Intégrez Fluid Framework et SharePoint Embedded pour incorporer de manière transparente et efficace la collaboration de documents dans vos applications.

Arrière-plan

Fluid Framework est une collection de bibliothèques clientes permettant de distribuer, de synchroniser et d’enregistrer des données partagées. Ces bibliothèques permettent à plusieurs clients de créer et d’utiliser simultanément des structures de données partagées en temps réel. Fluid Framework permet aux développeurs d’utiliser les mêmes pratiques avec des données partagées qu’avec des données locales. Par exemple, un objet Fluid fonctionne de la même façon qu’un objet TypeScript local.

Démarrage rapide

Commencez à générer dans le répertoire d’exemples d’applications Fluid. Vous devez d’abord créer une application SharePoint Embedded.

Prise en main de SharePoint Embedded

Essayez SharePoint Embedded gratuitement en créant un type de conteneur à des fins d’évaluation.

1. Configurez un client d’essai gratuit Microsoft 365. Vous pouvez également utiliser un locataire existant si vous avez des informations d’identification d’administrateur.
2. Connectez-vous à l’extension SharePoint Embedded Visual Studio Code et suivez les étapes pour créer une application et un type de conteneur à des fins d’évaluation.

Configuration requise

Pour commencer à créer avec Fluid Framework, vous avez besoin des éléments suivants :

1. informations d’identification Administration : vous avez besoin d’informations d’identification d’administration pour un locataire Microsoft 365.
2. Application SharePoint Embedded : veillez à inscrire votre application dans Microsoft Entra ID. Si vous n’avez pas d’application SharePoint Embedded, reportez-vous à la section précédente.
3. ID d’application (client) : obtenez le ClientID pour votre application SharePoint Embedded.
4. Informations sur le type de conteneur :
   • Identifiez le ContainerTypeId associé au type de conteneur de votre application.
5. Conteneurs :
   • Vérifiez qu’au moins un conteneur créé du même type de conteneur est lié à votre application SharePoint Embedded.

Prise en main de Fluid

Accéder aux informations de l’application

Vous avez besoin du ClientID à partir de votre application et du ContainerTypeId associé aux conteneurs créés sur cette application.

Le ClientID est essentiel pour acquérir les jetons d’accès corrects lors de l’utilisation de l’infrastructure Et des documents Fluid. est ContainerTypeId nécessaire pour accéder aux conteneurs associés à votre application SharePoint Embedded.

Si vous avez utilisé l’extension Visual Studio Code, vous pouvez exporter votre environnement Postman pour afficher facilement vos ContainerTypeId et ClientID.

Sinon, vous pouvez accéder à votre ContainerTypeId à l’aide de l’applet de Get-SPOContainerType commande PowerShell. Votre ClientID est disponible dans Microsoft Entra ID en accédant à Identity>App Registrations>Applications>Toutes les applications pour afficher la vue d’ensemble de votre application.

Exécuter l’exemple d’application Fluid : Compteur d’éléments

À présent, vous pouvez tester et commencer à créer avec le compteur d’éléments d’exemple d’application Fluid .

Escalier:

1. Collecter vos ClientID informations d’identification d’administrateur ContainerTypeId client et d’application SharePoint Embedded

2. Accédez au répertoire dans lequel vous souhaitez cloner le référentiel Exemples Fluid

3. Clonez le référentiel en exécutant la commande : git clone https://github.com/microsoft/FluidExamples.git

4. Accédez au répertoire Compteur d’élémentscd .\FluidExamples\item-counter-spe\

5. Créez un fichier .env vide et entrez votre ClientID et ContainerTypeId sans espace comme suit :

   SPE_CLIENT_ID=YOUR_CLIENTID
   
   SPE_CONTAINER_TYPE_ID=YOUR_CONTAINERTYPE_ID
   

6. npm install

7. npm run dev

8. Une fois Webpack terminé, accédez à https://localhost:8080

9. Connectez-vous avec les informations d’identification Administration de votre locataire

10. Accorder le consentement de l’administrateur pour votre application dans la fenêtre contextuelle

11. Copiez l’URL complète dans un autre onglet de navigateur ou envoyez-la à une personne disposant d’informations d’identification au même locataire. Il peut s’agir d’informations d’identification utilisateur tant qu’ils se trouvent sur le même locataire. Les modifications en direct apportées au compteur d’éléments sur les deux navigateurs indiquent que les données sont synchronisées entre les clients.

12. Félicitations pour l’exécution de votre première application Fluid ! Pour plus d’informations, consultez le fichier LISEZ-moi du compteur d’éléments.