Mobile : vue d'ensemble
L'application mobile permet de pointer depuis son téléphone et de retrouver tout ce que propose le site web, dans une interface pensée pour le pouce : une barre d'onglets en bas, des listes façon réglages iOS, des feuilles qui montent du bas de l'écran.
En bref
| Sujet | Détail |
|---|---|
| Dossier | timemanager-mobile/ |
| Framework | Expo SDK 57, React Native 0.86, React 19 |
| Langage | TypeScript en mode strict |
| Navigation | expo-router (une route par fichier) |
| API utilisée | api.time.jostud.com/api, la même que le site web |
| Plateformes | iOS et Android (une seule base de code) |
| Langues | Anglais et français |
| Maquette | Figma, page « Mockups », cadres « App (iOS) 390 px » |
Ce que contient l'app
Les couches du code
Le code est rangé en couches. Une couche n'utilise que celles placées en dessous d'elle. C'est la règle la plus importante à retenir.
Concrètement : un écran n'appelle jamais fetch lui-même. Il utilise une fonction de src/api (souvent à travers useQuery ou useAction), et cette fonction passe par client.ts. Si demain l'URL de l'API ou la façon de s'authentifier change, on ne touche qu'un seul fichier.
État par rapport au sujet
| Exigence du sujet | État |
|---|---|
| Chaque page web a sa version mobile (hors dashboards) | Fait |
| Authentification | Fait |
| Barre d'onglets à la place du menu burger | Fait |
| Fonctionnalités natives | En partie vibrations, stockage chiffré, partage de fichier, navigateur intégré, langue du téléphone |
| Mode hors ligne avec synchronisation automatique | API prête, mobile à faire voir Mode hors ligne |
| Expliquer le pointage hors ligne | À faire voir Mode hors ligne |
Comment lire cette partie
Si tu n'as jamais fait de React : commence par Les bases à connaître. Sinon :
- Lancer l'app pour la voir tourner sur ton téléphone.
- Organisation des dossiers pour savoir où chercher.
- Démarrage de l'app pour comprendre ce qui se passe à l'ouverture.
- Exemple complet : pointer pour suivre un clic de bout en bout.