Créer un composant personnalisé
Créez vos propres composants à l'aide de nos librairies PandaBridge (Javascript & React) pour envoyer, remonter des informations et interagir avec les autres composants.
Dans cet article
Principe des composants
Le composant est la pierre angulaire de la création dans PandaSuite Studio. Il existe + de 40 composants natifs dans le studio de création, mais de nombreux composants ont été développés par la communauté en format hybride. Ce sont des composants personnalisés.
En effet, nous mettons à votre disposition des librairies Javascript & React (PandaBridge) pour créer vos propres composants et les faire communiquer avec le reste du contenu créé en PandaSuite en recevant et envoyant des informations.
Tout comme un composant PandaSuite, un composant personnalisé peut :
- Avoir des propriétés
- Définir ses déclencheurs
- Paramétrer des actions
- Créer des marqueurs
- Réagir en fonction des langues
- Recevoir de la donnée dynamique (data provider)
- Synchroniser avec un autre composant PandaSuite
Attention : si vous voulez pas interagir avec d'autres composants PandaSuite (vous voulez par exemple intégrer le login de votre site Wordpress), nul besoin de créer un composant personnalisé : il vous suffit d'utiliser le composant Web en direct avec une ressource.
Décrire mon composant personnalisé
Le fichier pandasuite.json vous permet de décrire le fonctionnement de votre composant personnalisé et définir son interface visuelle. Il permet de personnaliser tous les attributs "classiques" d'un composant. Ils sont rangés par catégorie et peuvent ainsi facilement être réinterprétés dans le studio de création.
Pour comprendre comment décrire votre composant, regardons l'exemple du composant react-media-player (appelé URL Media Player dans le studio). Celui-ci permet d'insérer un contenu audio ou video d'une plateforme en ligne (YouTube etc...) et d'interagir avec.
Ce composant est disponible sur Github :
https://github.com/pandasuite/react-media-player-component/
Propriétés (properties)
Déclencheurs (events)
Actions (actions)
Synchronisation (synchronization)
Il y a pleins d'autres possibilités. N'hésitez pas à parcourir les autres composants disponibles sur Github :
https://github.com/pandasuite?tab=repositories
Envoyez et recevoir des information avec la librairie PandaBridge
PandaBridge vous permet de simplifier la communication entre votre composant personnalisé et votre application, à la fois en termes d'émission et de réception.Nous avons préparé des projets boiler plate qui utilisent ces librairies Javascript & React afin de vous montrer son fonctionnement et mettre en place une base fonctionnelle prête à l'emploi pour une intégration dans PandaSuite.
Javascript
Voici la librairie Javascript permettant la communication avec PandaSuite :
https://github.com/pandasuite/pandasuite-bridge-js
Et l'exemple :
https://github.com/pandasuite/js-boilerplate-component
Voici le détail des méthodes de la classe PandaBridge :
- PandaBridge.init : Elle permet l'initialisation du composant, c'est elle qui va permettre d'exécuter les fonctionnalités de PandaBridge.
- PandaBridge.onLoad : Cette méthode est appelée une seule fois, au chargement visuel du composant. Elle permet de recevoir les propriétés de l'objet et la liste des marqueurs définis dans le pandasuite.json.
- PandaBridge.send : C'est la méthode d'envoi, pour communiquer du composant vers l'application. Elle est utilisée pour faire remonter des événements/déclencheurs.
- PandaBridge.synchronize : Cette méthode s'appuie sur une fonction spécifique dans laquelle les arguments correspondent au pourcentage de synchronisation.
- PandaBridge.listen : Elle permet de recevoir des actions du studio, elle est utilisée pour les actions de composants.
- PandaBridge.isStudio : Elle correspond à l'action d'être dans le studio, par exemple dans le cas de l'appareil photo. Elle est de type booléenne, elle répond à true ou false.
- PandaBridge.getSnapshotData : C'est la méthode pour faire remonter les marqueurs. Elle est de paire avec la méthode setSnapshotData.
- PandaBridge.setSnapshotData : C'est la méthode pour éditer les marqueurs. Elle est de paire avec la méthode getSnapshotData.
React
Voici la librairie React permettant la communication avec PandaSuite :
https://github.com/pandasuite/pandasuite-bridge-react
Et l'exemple :
https://github.com/pandasuite/react-boilerplate-component
Tester & publier mon composant personnalisé
Nous vous recommandons de partir des exemples boilerplate pour créer votre composant. Vous avez plusieurs options pour travailler dessus : utiliser le repository comme template via Github (il faut un compte Github) ou télécharger le Zip pour travailler en local.
Des scripts sont à votre disposition pour tester votre composant simplement dans un environnement local.
Rendez-vous à la racine du composant.
yarn install
Cette commande vous permet d'installer toutes les dépendances du projet pour commencer à travailler dessus.
yarn start
Ajoutez ensuite un composant Web depuis PandaSuite et utilisez l'url locale. Cliquez sur Rafraîchir les metadata.
yarn build
Pour créer le zip du composant ( pandasuite-component.zip) et le mettre dans votre projet PandaSuite.
yarn release
Une fois que votre composant est prêt, cette commande vous permet de le publier sur Github sous la forme d'une release.