Composants

Les composants sont la pierre angulaire de la création dans PandaSuite Studio : ils vous permettent de rajouter des fonctionnalités. Ils sont flexibles, puissants et synchronisables les uns avec les autres. Découvrez la liste des composants, leur rôle et comment les éditer.

Dans cet article

Qu'est-ce qu'un composant ?

Un composant est un module prêt-à-l'emploi qui permet de rajouter des effets (défilement, pop-up,..) et d'ajouter des fonctionnalités (achat intégré, authentification...) à votre application. Vous pouvez le personnaliser avec votre contenu.

Voici les caractéristiques d'un composant : 


Editer un composant

Cliquez sur Composants pour accéder à la liste des composants. 

Rendez-vous dans la fenêtre Propriétés pour éditer ses propriétés. 

Pour éditer le contenu d'un composant, il faut rentrer à l'intérieur. Cliquez dessus dans la liste des Objets. 

Pour créer une action sur un composant, sélectionnez un événement déclencheur et choisissez l'action Agir sur un composant, puis sélectionnez le composant avec la sélection interactive. 

Pour créer un marqueur, rentrez dans l’édition de votre composant et rendez-vous dans la fenêtre Edition sur la gauche. 

🤷 Un marqueur est un comportement spécifique de votre composant : par exemple, le temps d'une vidéo, la position d'un défilement, un degré d'inclinaison de l'appareil... Un marqueur vous permet de définir un comportement par défaut pour ce composant, déclencher une action et d'être la cible d'une action.


Liste des composants

Les composants graphiques

  • Zone interactive : une zone transparente à placer où vous voulez pour déclencher une action. 
  • Galerie : une sorte de carrousel ou diaporama qui défile horizontalement ou verticalement. Il est composé de pages dans lesquelles vous pouvez insérer tout type de contenus. 
  • Multi-état : ce composant vous permet de créer plusieurs états d'un objet ou d'une section de votre écran pour l'animer.
  • Pop-up : appelée également modal, elle s'affiche au-dessus de votre écran et doit être fermée pour continuer la navigation. 
  • Glisser-déposer (drag & drop) : il permet de glisser (avec le doigt ou la souris) un objet glissable vers un conteneur en le maintenant sélectionné.
  • Lecteur vidéo : affiche la vidéo au sein de votre écran. Vous pouvez afficher ou non les contrôles du lecteur vidéo. 
  • Séquence d'images : pour insérer un GIF, une séquence d'images ou transformer une vidéo automatiquement en séquence d'images. 
  • Image HD : à utiliser uniquement avec des images de très haute qualité (HD). Il permet de zoomer dans cette image pour en afficher les moindres détails.
  • Web : pour afficher un contenu web dans votre application via une webview/iframe et créer des actions sur le contenu web. Il permet également d'insérer des composants personnalisés.
  • Caméra : il vous donne accès à l'appareil photo depuis l'application : il permet de déclencher une prise de photo sans sortir de l'application et d'afficher cette photo dans votre application.
  • After Effects : exportez vos animations en format JSON depuis After Effects avec le plug-in Bodymovin, optimisez le poids et améliorez la qualité de vos animations. Créez de nombreuses interactions entre vos animations et les autres composants. 
  • 3D/Réalité Augmentée (AR) : pour insérer un objet 3D, créer des interactions et le visualiser dans un environnement réel grâce à la réalité augmentée.
  • URL Media Player : pour insérer le contenu audio ou video d'une plateforme en ligne (YouTube, Facebook, Soundcloud, Vimeo, Twitch...). Une connexion Internet est requise pour afficher le contenu.
  • 360° : pour afficher une image ou vidéo 360° et créer des interactions spécifiques. 
  • Carte : pour afficher une carte dans votre application, d'y créer des marqueurs (points d'intérêt, zones) ou d'afficher un itinéraire

Les composants de mise en page

Ces composants facilitent la mise en page de vos écrans.

  • Groupe : pour regrouper vos objets. Cela est notamment utile pour représenter un élément dans une collection, pour associer une même interactivité à plusieurs objets, créer une animation ou faciliter la gestion responsive de vos écrans. 
  • Zone de défilement : vous permet de créer une liste défilante, une page défilante, une image défilante... transformez votre contenu en objet défilant selon un axe horizontal, vertical ou les deux.
  • Flexbox : pour disposer selon un axe principal, des objets en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l’espace disponible.

Les composants système

Ces composants exposent des fonctionnalités natives des appareils. Attention : certains ne sont pas compatibles avec la web app/PWA car les navigateurs limitent l'accès à ces fonctionnalités système. 

  • Capteur Mouvement : pour créer des effets liés au mouvement et à l'inclinaison de votre appareil iOS ou Android grâce à l'utilisation de l'accéléromètre et du gyroscope. 
  • Capteur Souffle : à l'aide de la saturation du micro, créez une action liée au souffle sur un appareil iOS & Android.
  • Capteur Boussole
  • Capteur Secousse
  • Capteur Beacon : les capteurs beacon sont des petits boîtiers fonctionnant sous la norme Bluetooth Low Energy (BLE). Ils émettent un signal qui peut déclencher des actions sur un appareil iOS ou Android quand celui-ci se trouve à côté, proche ou loin de ce capteur. 
  • Vidéo (plein écran) : pour afficher une vidéo en plein écran 
  • Audio : pour insérer un fichier audio et y associer des actions (lecture, pause, création de marqueurs, synchronisation...)
  • Minuteur : pour gérer la notion de temps, par exemple pour créer un compteur. Il se synchronise à tous les autres composants. 
  • Bluetooth BLE : il permet de communiquer entre appareils via la connexion Bluetooth Low Energy(BLE). Concrètement cette liaison se fait via l'émission et la réception de caractéristiques au sein d'une application (ou même plusieurs).
  • Reconnaissance d'images : scannez une image grâce à l'appareil photo et déclencher l'action de votre choix. Idéal pour les visites guidées et les chasses au trésor. 
  • Téléchargement : par défaut l'intégralité de votre app est téléchargée par les utilisateurs. Ce composant vous permet de gérer des téléchargements partiels de certaines parties de votre application. 
  • GPS : pour définir des zones autour de coordonnées GPS auxquelles vous pouvez associer des actions lorsque l'utilisateur entre ou sort de la zone. 
  • Synchronisation : c'est un composant un peu spécial : il permet de synchroniser plusieurs composants entre eux pour réaliser une palette d'effets. 

Les composants données

Ces composants permettent d'interagir avec des données et des services externes à PandaSuite

  • Authentification : pour insérer un formulaire d'authentification, gérer une base de données utilisateurs et d'associer des données à vos utilisateurs (score, progression, type de compte...). 
  • Collection / Liste : ce composant gère une collection ordonnée de données et les présente sous la forme d'une liste d'éléments selon une orientation horizontale ou verticale. 
  • Recherche : effectuez une recherche sur une source de données ou sur l'intégralité des textes de votre application.
  • Saisie de texte : pour insérer un champ de saisie. 
  • Clavier virtuel 
  • HTTP : pour connecter votre app à d'autres apps ou services en utilisant des APIs.
  • Formulaire (Tripetto) : intégrez un formulaire créé depuis le service en ligne Tripetto, de le visualiser en hors ligne et d'y associer des événements et des actions. 
  • QR Reader :
  • Achat intégré : pour mettre en place des paiements intégrés dans votre application (in-app) à l'aide du système de paiement de l'App Store d'Apple et du Play Store de Google.


Créer un composant sur-mesure

Si vous avez des connaissances en HTML/Javascript, vous pouvez également créer vos propres composants pour ajouter de nouvelles fonctionnalités. À l'aide de nos librairies PandaBridge (Javascript & React), vous pouvez envoyer, remonter des informations et interagir avec les autres composants. En savoir plus: Composant personnalisé

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous