22 mai 2026

4. Architecture de l'application TypeScript

Explication accessible de l'architecture mobile : composants React Native, etats, vues, Bluetooth Classic, profils et stockage local.

TypeScriptReact NativeBluetoothAsyncStorage

4. Architecture de l'application TypeScript

L'application mobile AppBanquette est construite avec React Native et TypeScript. Le fichier central est App.tsx. Il contient pour l'instant toute l'interface et toute la logique applicative : connexion Bluetooth, commandes moteur, navigation entre les vues et gestion des profils.

Les briques utilisees

Les principaux composants React Native sont :

  • SafeAreaView, pour afficher l'application dans une zone compatible avec l'ecran du telephone ;
  • View, pour organiser les blocs ;
  • Text, pour les textes ;
  • TouchableOpacity, pour les boutons ;
  • FlatList, pour afficher les appareils Bluetooth et les profils ;
  • Modal, pour la creation d'un profil ;
  • TextInput, pour saisir prenom et nom ;
  • Image, pour afficher la photo d'un profil.

Les bibliotheques importantes sont :

  • react-native-bluetooth-classic, qui permet de parler au module HC-05 ;
  • AsyncStorage, qui sauvegarde les profils dans la memoire du telephone ;
  • react-native-image-picker, qui sert a choisir une photo depuis la galerie.

Les etats de l'application

React Native fonctionne ici avec des etats. Quand un etat change, l'interface se met a jour.

Les etats principaux sont :

  • l'appareil Bluetooth connecte ;
  • la liste des appareils appaires ;
  • l'etat connecte ou non ;
  • la vue active, accueil ou profils ;
  • la liste des profils ;
  • les champs du formulaire de creation ;
  • l'intervalle actif pour repeter une commande moteur.

Le typage TypeScript rend ces donnees plus claires. Par exemple, un profil est decrit par une structure avec un identifiant, un prenom, un nom et eventuellement une image.

Connexion Bluetooth

L'application ne fait pas l'appairage Bluetooth elle-meme. Elle lit les appareils deja appaires avec Android grace a :

RNBluetoothClassic.getBondedDevices()

Ensuite, quand l'utilisateur selectionne le HC-05, l'application tente de se connecter. Si la connexion reussit, elle stocke l'appareil et affiche les controles moteur.

Cette logique est volontairement directe : tant que l'application n'est pas connectee, elle n'affiche pas les commandes de la banquette.

Profils utilisateur

Un profil mobile contient :

  • un numero de profil entre 1 et 10 ;
  • un prenom ;
  • un nom ;
  • une photo optionnelle.

La limite de dix profils vient du firmware. Les positions physiques sont stockees dans l'EEPROM de l'ATmega. Le telephone, lui, stocke seulement les informations humaines du profil avec AsyncStorage.

Quand on cree un profil, l'application envoie par exemple S4 au firmware pour dire : "sauvegarde la position actuelle dans l'emplacement 4". Ensuite, elle garde le nom, le prenom et la photo dans le telephone.

Vues de l'application

L'application a deux vues principales apres connexion :

  • HOME, pour monter, descendre, se deconnecter et enregistrer une position ;
  • PROFILES, pour charger ou supprimer des profils.

Un appui court sur un profil envoie une commande de chargement, par exemple P4. Un appui long supprime le profil du telephone. La suppression ne nettoie pas encore explicitement l'EEPROM, ce qui peut etre une evolution future.

Limite actuelle et evolution possible

Tout est encore dans App.tsx. C'est acceptable pour un projet compact, mais si le projet continue, il serait propre de separer :

  • les composants d'interface ;
  • le service Bluetooth ;
  • le stockage des profils ;
  • les types TypeScript partages.

Cette separation rendrait le code plus facile a maintenir, mais elle ne doit pas masquer l'essentiel : l'application fonctionne deja autour d'une chaine simple, lisible et testable.