# App-to-App

> Découvrez comment utiliser le composant App-to-App pour connecter plusieurs applications PandaSuite, partager des données en temps réel, recevoir les messages UDP d'appareils du réseau local et intégrer le protocole TUIO pour des interfaces interactives innovantes.

https://docs.pandasuite.com/fr/essentials/components/app-to-app/

**Le composant App-to-App vous permet de connecter plusieurs applications PandaSuite pour partager des données en temps réel. Cela ouvre des possibilités innovantes pour des expériences interactives et des projets multi-appareils.**

Dans l'exemple ci-dessous, un smartphone Android contrôle un iPad Pro pour afficher des vignettes vidéos :

[Vidéo : Démonstration App-to-App : un smartphone Android contrôle un iPad Pro pour afficher des vignettes vidéos](https://www.youtube.com/embed/0viFD3c3IKs?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

> **Info**
>
> Il existe plusieurs manières de connecter des appareils entre eux (notamment le [Bluetooth Low Energy](https://docs.pandasuite.com/fr/essentials/components/bluetooth-low-energy/) ou le [webhook PandaSuite](https://docs.pandasuite.com/fr/essentials/integrations/pandasuite-webhook/)). Néanmoins, la méthode la plus réactive et la plus puissante est via le composant **App-to-App** pour envoyer et recevoir des informations entre les appareils.

## Fonctionnement du serveur partagé

PandaSuite héberge par défaut un **serveur distant** qui facilite le partage des schémas entre appareils. Cette solution, idéale pour les scénarios simples, garantit une configuration rapide et sans installation supplémentaire.

Cependant, pour des besoins spécifiques, il est possible de **récupérer et installer ce serveur localement**. Cela permet davantage de flexibilité, notamment pour des usages hors ligne ou des fonctionnalités avancées.

## Installer et configurer le serveur local

### Principaux usages du serveur local

Cette option est particulièrement utile dans les cas suivants :

- **Usage hors connexion :** le serveur local permet d’utiliser **App-to-App sans connexion internet**. Cela est particulièrement utile pour des environnements isolés, comme des musées ou des événements.
- **Support des ports séries :** connectez des appareils comme **Arduino** ou **Raspberry Pi** via les ports séries en activant l’inspection (--serial-inspect).
- **Réception UDP brute :** recevez les messages envoyés par les appareils de votre réseau local, comme des lecteurs RFID, des capteurs ou des contrôleurs de scénographie, en activant l’inspection (--udp-inspect).
- **Intégration TUIO :** le protocole TUIO, pris en charge dans la version locale, est parfait pour des interfaces tangibles ou multitouch.

### Étape 1 : télécharger le serveur local

Récupérez la version adaptée à votre système d’exploitation depuis notre [GitHub Releases](https://github.com/PandaSuite/Shared-Schema/releases) :

- **Linux** : `shared-schema-linux`
- **macOS** : `shared-schema-macos`
- **Windows** : `shared-schema-win.exe` Lancez simplement le fichier téléchargé pour démarrer le serveur local.

[Image : Page GitHub Releases du serveur local, avec les fichiers shared-schema-linux, shared-schema-macos et shared-schema-win.exe]

[Image : Terminal qui lance le serveur local macOS sur le port 8080 : il écoute sur les adresses IP locales et sur shared-schema.panda.st]

### Étape 2 : options disponibles

Voici les options pour configurer le serveur selon vos besoins :

- `-k, --key <file>` : Chemin vers le fichier clé SSL.
- `-c, --cert <file>` : Chemin vers le certificat SSL.
- `-s, --serial-inspect [ports]` : Active l’inspection des ports séries (liste facultative).
- `-d, --delimiter <delimiter>` : Délimiteur pour les données des ports séries (par défaut : `\n`).
- `-u, --udp-inspect <ports>` : Active la réception UDP brute sur une liste de ports (séparés par des virgules).
- `-t, --tuio [port]` : Active un serveur UDP TUIO (par défaut : port `3333`).

### Exemples d’utilisation

Lancer un serveur sur le port `8080` avec inspection des ports séries :

```
PORT=8080 ./shared-schema-macos -s /dev/ttys063
```

Écouter les messages UDP envoyés par un appareil sur le port `8001` :

```
./shared-schema-macos --udp-inspect 8001
```

Configurer TUIO sur un port personnalisé :

```
./shared-schema-linux -t 5000
```

Utiliser des certificats spécifiques :

```
./shared-schema-win.exe -k mykey.pem -c mycert.pem
```

Ces options permettent de personnaliser le serveur selon vos besoins, que ce soit pour des usages simples ou avancés.

### Utilisation des certificats SSL (optionnel)

Pour simplifier la configuration locale, nous incluons un certificat SSL valide pour l’hôte `shared-schema.panda.st`. Voici comment en tirer parti :

1. Modifier votre DNS ou le fichier `/etc/hosts` : Redirigez `shared-schema.panda.st` vers l’adresse IP de votre serveur local.
2. Télécharger les certificats nécessaires:

   - [Clé privée (`privkey.pem`)](https://shared-schema.panda.st/privkey.pem)
   - [Certificat complet (`fullchain.pem`)](https://shared-schema.panda.st/fullchain.pem)

> **Info**
>
> Ces certificats ont une durée de validité limitée (quelques mois). Assurez-vous de les récupérer à jour régulièrement.

Si vous préférez, vous pouvez également utiliser des adresses non-SSL. Toutefois, notez que si votre projet est utilisé dans une web app sur un domaine protégé par SSL, certains navigateurs exigeront le protocole sécurisé WSS pour fonctionner correctement.

## Configurer le composant app-to-app

Pour avoir deux affichages différents entre l'appareil qui contrôle et celui qui affiche, nous vous recommandons de créer 2 projets distincts. Le composant App-to-App sera utilisé dans les deux projets.

### Depuis l'app qui contrôle (controller)

Insérez le composant **App-to-App**.

Dans les propriétés, une URL est automatiquement affichée. Pour configurer le composant:

- Option 1 : vous passez par les serveurs de PandaSuite, ne changez pas l'URL et choisissez un identifiant unique pour la **Room**.
- Option 2 : vous utilisez un serveur local, saisissez l'**URL du serveur**.

[Image : Propriétés du composant App-to-App dans l'app qui contrôle : Room (option 1) et URL du serveur (option 2), près des vignettes]

Ensuite, choisissez l'événement qui va déclencher l'action.

Dans notre exemple, nous souhaitons associer une donnée (de 1 à 6) pour connaître la vidéo sur laquelle l'utilisateur a cliqué. Au clic sur chaque vignette, le numéro de la vidéo est associée à la donnée `video`. Cette donnée sera réutilisée dans l'autre app pour afficher la bonne vidéo.

Choisissez l'action **Interagir sur un composant**, ciblez le composant **App-to-App** et l'action **Modifier la donnée.**

Dans le champ **Cible**, définissez le nom de votre donnée avec la fonction **By key,** par exemple `video`. Choisissez la fonction **Définir** et comme **Valeur** le nombre 1. En effet, il s'agit d'un schéma libre et la donnée se crée dès que vous la définissez.

[Image : Action au clic sur une vignette : Modifier la donnée du composant App-to-App, avec Cible /video, fonction Définir et Valeur 1]

### Depuis l'app qui affiche

Ajoutez un nouveau composant **App-to-App** au niveau du projet.

Pour configurer le composant:

- Option 1 : vous passez par les serveurs de PandaSuite, ne changez pas l'URL et pour **Room**, indiquez le même identifiant que dans l'autre projet.
- Option 2 : vous utilisez un serveur local, saisissez l'**URL du serveur,** déjà utilisée pour l'autre projet.

Ajoutez un composant [Conditions](https://docs.pandasuite.com/fr/essentials/components/condition/) et définissez les conditions associées.

[Image : Fenêtre de condition dans l'app qui affiche : la condition video 2 est vraie si video est égal à 2 (conditions video 0 à 6)]

Ajoutez les actions correspondantes.

[Image : Actions de l'app qui affiche : si la condition video 1 est vraie, aller à l'écran Video 1, et ainsi de suite pour chaque vidéo]

[Modèle : App-to-App Controller](https://pandasuite.com/dashboard/use-template/Ks9KT4YBTs3tesyWF4H2)

[Modèle : App-to-App Display](https://pandasuite.com/dashboard/use-template/Xs9ST4YBTs3tesyWTIhL)

## Recevoir des messages UDP dans PandaSuite

De nombreux appareils d’un réseau local se contentent d’envoyer un court message texte vers une adresse IP et un port fixes : lecteurs RFID ou de codes-barres, capteurs, consoles lumière, contrôleurs de scénographie. Le serveur local peut écouter ces messages UDP bruts et les placer dans les données partagées : votre projet réagit ainsi à un appareil physique sans aucun autre logiciel sur la machine.

### Étape 1 : lancer le serveur sur le port d’écoute

Lancez le serveur local avec l’option `--udp-inspect` et le port vers lequel votre appareil émet :

```
./shared-schema-macos --udp-inspect 8001
```

Pour écouter plusieurs ports, indiquez-les sous la forme d’une seule liste séparée par des virgules :

```
./shared-schema-macos --udp-inspect 8001,8002
```

Le serveur écoute sur toutes les interfaces IPv4 de la machine : configurez votre appareil pour qu’il émette vers l’adresse IP de cette machine. Le port `3333` est réservé à l’écoute TUIO, toujours active.

### Étape 2 : lire les messages dans votre projet

Ajoutez le composant **App-to-App**, connectez-le à votre serveur local et renseignez la **Room**, comme décrit plus haut. Chaque message reçu sur un port est alors disponible dans les données du composant sous `udpData[port]` :

```json
{
  "message": "1,ON",
  "from": "192.168.1.100",
  "seq": 12
}
```

- `message` : le texte envoyé par l’appareil, lu en UTF-8 (les retours à la ligne finaux sont supprimés).
- `from` : l’adresse IP de l’appareil qui a envoyé le message.
- `seq` : le nombre de messages reçus sur ce port depuis le démarrage du serveur.

Entrez dans le contexte du composant dans PandaSuite Studio pour voir ces valeurs évoluer en temps réel, puis liez-les aux éléments de votre projet.

> **Astuce**
>
> Liez l’objet `udpData["8001"]` dans son ensemble, ou sa valeur `seq`, plutôt
> que `message` seul. Une liaison se rafraîchit lorsque la valeur qu’elle cible
> change : si l’appareil envoie deux fois de suite le même texte, seul `seq`
> change, et une liaison sur `message` ignorerait le second message.

Le dernier message reçu reste dans les données partagées : un appareil qui se reconnecte à une room existante le reçoit immédiatement. Une room créée après l’arrivée du message reste vide jusqu’au message suivant.

**Exemple :** un lecteur RFID envoie `1,ON` lorsqu’un tag est posé dessus et `1,OFF` lorsqu’il est retiré. Liez `udpData["8001"]`, extrayez le numéro du tag et l’état depuis `message` avec la [fonction](https://docs.pandasuite.com/fr/essentials/data/functions/) **Split**, puis utilisez un composant [Conditions](https://docs.pandasuite.com/fr/essentials/components/condition/) pour afficher le contenu correspondant.

## Intégrer le TUIO dans PandaSuite

Le protocole **TUIO** est une norme ouverte conçue pour transmettre des données multitouch ou des interactions tangibles en temps réel, ce qui en fait une solution idéale pour des interfaces interactives innovantes ou des installations physiques connectées.

Voici comment l'intégrer via le composant App-to-App :

1. Ajoutez le composant **App-to-App** à votre projet dans PandaSuite Studio.
2. Configurez-le pour qu’il se connecte à l’adresse locale de votre serveur.

[Image : Composant App-to-App au niveau du projet, encadré : Server url wss://shared-schema.panda.st:3443, un identifiant de Room et aucun marqueur par défaut]

3. Assurez-vous que l’hôte `shared-schema.panda.st` pointe bien vers votre machine.

[Image : Terminal : un ping de shared-schema.panda.st répond depuis 192.168.1.71, l'hôte pointe donc vers la machine du serveur local]

Le serveur, lancé avec l’option `-t`, capte les informations TUIO sur le port défini et les transmet au composant App-to-App.

Vous pouvez utiliser un simulateur comme [TUIOSimulator](https://github.com/gregharding/TUIOSimulator) pour tester l’interaction :

- Placez des objets sur la scène du simulateur.

[Image : Fenêtre de TUIOSimulator : objets 0 et 1 placés sur la scène, objets 2 à 7 en attente sur le côté, envoi vers 127.0.0.1:3333]

- Dans PandaSuite Studio, entrez dans le contexte du composant pour voir les données TUIO en temps réel.

[Vidéo : dans la liste des objets, un clic sur la flèche de la ligne App-to-App fait entrer dans le contexte du composant]

- Liez les positions des objets physiques aux éléments de votre application.

[Vidéo : Lier la position d'objets physiques suivis par TUIO aux éléments d'une application PandaSuite](https://www.youtube.com/embed/GP3fOvK2ANg?si=O4TFuLGnCjlQnKhX?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

Et voici le résultat de la simulation :

[Vidéo : Résultat final de l'intégration TUIO : l'application réagit aux objets placés dans TUIOSimulator](https://www.youtube.com/embed/0m6ocRoG7Ls?si=n-NVIOnmv8QoRyVb&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

[Modèle : TUIO](https://pandasuite.com/dashboard/use-template/cTbyQJQBUiPoWQTPrm30)