Tester sur un téléphone

Cette page explique comment faire tourner l'application mobile sur un vrai téléphone ou un émulateur, contre un backend lancé sur la machine de développement. La difficulté principale est réseau : le téléphone doit joindre l'API et le serveur Socket.IO de l'ordinateur. Le lancement général des applications est décrit dans Lancer les applications.

#Prérequis

#Principe

flowchart LR
  T["Téléphone : Expo Go"] -->|"bundle JavaScript"| M["Metro sur l'ordinateur"]
  T -->|"HTTP EXPO_PUBLIC_API_URL"| B["Backend : port 2053"]
  T -->|"WebSocket EXPO_PUBLIC_WS_URL"| B
  B --> DB["PostgreSQL, Redis, blockchain locale"]
  B --> MP["Mailpit : codes de vérification"]

Le téléphone télécharge le code JavaScript depuis Metro, puis appelle directement le backend. Dans .env.example, l'API est http://localhost:2053/api : sur un téléphone, localhost désigne le téléphone lui-même, et toutes les requêtes échouent. Il faut remplacer localhost par l'adresse de l'ordinateur sur le réseau local.

#Étape 1 : trouver l'adresse de l'ordinateur

Sous Windows :

ipconfig

Relever l'« Adresse IPv4 » de la carte Wi-Fi, par exemple 192.168.1.42.

Sous Linux :

ip -4 addr

Sous macOS, pour la carte Wi-Fi habituelle :

ipconfig getifaddr en0

L'adresse change d'un réseau à l'autre : à refaire après chaque changement de Wi-Fi.

#Étape 2 : configurer l'application

Créer mobile-app/.env à partir de .env.example :

EXPO_PUBLIC_API_URL=http://192.168.1.42:2053/api
EXPO_PUBLIC_WS_URL=http://192.168.1.42:2053
EXPO_PUBLIC_SENTRY_DSN=
EXPO_PUBLIC_WEB3AUTH_CLIENT_ID=blocklucky-etherbay-client

Seules les deux premières lignes comptent (voir Stack et structure). Pour tester la connexion Google, renseigner EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID ou EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID, vides dans .env.example. Le fichier .env est ignoré par Git.

Les variables EXPO_PUBLIC_* sont lues au démarrage de Metro. Après une modification de .env, relancer Metro en vidant son cache :

npx expo start -c

#Étape 3 : rendre le backend joignable

Le serveur Express écoute sur toutes les interfaces (httpServer.listen(env.PORT) sans adresse, dans backend/src/server.ts). Dans docker-compose.yml, le service backend publie aussi 2053:2053 sur toutes les interfaces. Il reste deux obstacles possibles :

• Pare-feu. Le pare-feu de l'ordinateur doit accepter les connexions entrantes sur le port 2053 depuis le réseau local. Sous Windows, la première exécution de Node.js propose généralement d'autoriser l'accès aux réseaux privés.
• Isolation du Wi-Fi. Les réseaux publics ou d'entreprise empêchent souvent deux appareils de se voir. Utiliser un réseau domestique ou le partage de connexion du téléphone.

Vérification depuis le navigateur du téléphone : ouvrir http://192.168.1.42:2053/health/live. Une réponse JSON confirme que le réseau est bon.

La configuration CORS du backend (CORS_ORIGINS) ne concerne pas l'application : les requêtes d'une application native n'envoient pas d'en-tête Origin de navigateur.

#Étape 4 : lancer l'application

cd mobile-app
npm start

Metro affiche un QR code. Le scanner avec l'appareil photo (iOS) ou depuis Expo Go (Android). Pour un émulateur ou un simulateur déjà ouvert, utiliser npm run android ou npm run ios.

#Étape 5 : se connecter

Les trois comptes du seed (citoyen@etherbay.fr, boulangerie@etherbay.fr, maire@etherbay.fr) ont le mot de passe de démonstration EtherBay2026demo et un âge déjà vérifié : l'écran « Connexion » ouvre directement les onglets, sans passer par la vérification d'âge. Les comptes sont décrits dans Comptes de démonstration et connexion.

Pour un nouveau compte créé depuis « Inscription », le code de vérification arrive dans Mailpit, publié sur http://127.0.0.1:8025 de l'ordinateur uniquement. En développement, l'écran de saisie propose aussi le code renvoyé par le backend (devOtpPreview). Le nouveau compte doit ensuite envoyer sa pièce d'identité et être validé dans l'espace Mairie du web avant de pouvoir acheter un ticket.

La connexion Google n'est disponible que si EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID ou EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID est défini dans mobile-app/.env et que GOOGLE_CLIENT_IDS est renseigné côté backend. Sans ces réglages, le bouton reste affiché mais désactivé. La connexion Apple n'existe plus.

Les sons de la roue et du compte à rebours passent par le haut-parleur du téléphone ; ils se coupent dans Paramètres, puis Affichage, interrupteur « Sons ».

La photo de la pièce d'identité fonctionne sur un téléphone physique avec l'appareil photo ou la galerie ; sur un émulateur ou un simulateur, choisir une image de la galerie.

La session n'est pas conservée : après avoir fermé complètement l'application, il faut se reconnecter.

#Ce qui diffère d'un environnement réel

#Dépannage

Les autres problèmes d'environnement sont traités dans Dépannage.