Composants

Les composants sont la pierre angulaire de la création dans PandaSuite Studio, c'est ce qui vous offre la plus grande liberté de création. Ils sont flexibles, puissants et synchronisables les uns avec les autres. Découvrez la liste des composants, leur rôle et comment les éditer.

Qu'est-ce qu'un composant ?

🤷 Un composant est un module prêt-à-l'emploi qui vous permet de rajouter des effets interactifs (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 : 

Les différents types de composants

Cliquez sur l’icône  Composants pour accéder à la liste des composants. 

Il existe 4 types de composants : les composants graphiques, les composants de mise en page, les composants système et les composants données.

Les composants graphiques

Ils permettent de créer des effets visuels dans votre écran. Insérez votre contenu à l'intérieur de ces composants et personnalisez les propriétés.

  • 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
  • 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 : 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.

Editer un composant

Pour ajouter un composant, cliquez sur l'icône  Composants.

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

Il est possible de rentrer à l'intérieur d'un composant graphique ou de mise en page pour éditer son contenu. Double-cliquez sur le composant ou cliquez sur le bouton  ÉDITER de la fenêtre Propriétés. Le fil d’Ariane permet de bien vous repérer.

Créer un marqueur sur un composant

🤷 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.

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

marqueur_zone_de_de_filement.png

Déclencher une action depuis un composant

Chaque composant a sa propre liste de déclencheurs

Cliquez sur Actions dans la fenêtre de droite. 

Si vous avez créé des marqueurs, ils apparaissent dans la liste des déclencheurs. 

Agir sur un composant

Il est possible d'interagir avec tous les composants. 

Sélectionnez un déclencheur et choisissez l'action Agir sur un composant

Dans le menu orange, sélectionnez le composant. Vous pouvez sélectionner n'importe quel composant de votre projet. 

agir_sur_un_composant.png

Exposer la valeur d’un composant (bind)

Chaque composant expose de la donnée. Par exemple, si un utilisateur utilise le composant Saisie de Texte pour taper un texte ou le composant Galerie pour sélectionner un visuel, ces valeurs texte et page peuvent se retrouver dans l'application et faire l'objet d'action.

Créer un composant personnalisé

Vous pouvez également créer vos propres composants à l'aide de nos librairies PandaBridge (Javascript & React) pour envoyer, remonter des informations et interagir avec les autres composants.

Pour en savoir plus : Composant personnalisé

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