Aller au contenu

Front End

3.1 L'app ne se lance pas

À vérifier :

  1. vous avez oublié de faire npm install alors que vous venez de faire un git clone ou que votre camarade vient d'ajouter l'utilisation d'une nouvelle librairie
  2. votre tablette/téléphone n'est pas connecté(e)
  3. votre tablette/téléphone n'est pas capturé(e) correctement (à vérifier avec adb devices)
  4. vous n'êtes pas dans le bon répertoire (front-end, généralement)
  5. vous avez oublié de faire npm start
  6. votre machine est corrompue ou mal/pas installée
  7. changer le type de contrôleur USB de votre VM. VM éteinte : choisir USB 2.0 dans les paramètres de configuration de celle-ci.
  8. vous n'avez pas assez d'espace disque disponible. Dans la VM, à vérifier avec df -h /, mieux vaut avoir au moins 500 Mo disponibles.

Voir aussi le TP de prise en main de la VM et des tablettes ainsi que le premier TP sur react native disponible ici

3.2 L'app se lance mais n'arrive pas à faire des requêtes au serveur

À vérifier :

  1. le serveur n'est pas lancé ou il ne répond pas correctement aux requêtes
  2. vous avez oublié de faire adb reverse tcp:5000 tcp:5000 (à faire à chaque reconnexion de votre appareil mobile)
  3. votre tablette/téléphone n'est pas connecté

3.3 La requête HTTP n'aboutit pas

Voir les messages côté FE (dans la console react native) et surtout côté backend, soit dans le terminal, soit dans le fichier app.log.

3.4 Je veux embarquer une base de données dans mon application

Il peut arriver que vous souhaitiez pouvoir enregistrer des données localement (mise en cache de données structurées, fonctionnement hors-ligne, etc.). Dans ce cas, une option utile peut être d'utiliser une base de données relationnelle (il existe aussi des solutions plus simples, voir section suivante). Les librairies SQLite étant incorporées dans les OS mobiles, c'est le choix naturel.

Dans ce cas, les requêtes SQL seront faites dans le FE, et seront asynchrones, contrairement à ce qui se passe dans le BE. Certains patterns logiciels (par exemple, une première requête renvoie des résultats, on itère dessus, et on exécute une nouvelle requête dans chaque itération), nécessiteront de manipuler explicitement des synchronisations de promises, par exemple Promise.all().

3.5 Bon, en fait je préfèrerais un stockage persistant plus simple

Dans ce cas, utiliser l'API LocalStorage, qui permet de lire et écrire de façon asynchrone des chaîne de caractères. En cas de besoin, on peut utiliser JSON.stringify(), mais ça ne devrait pas être nécessaire pour les cas simples.

3.6 Mon <Button> n'a pas de style, aka les propriétés de style ne sont pas prises en compte

Les boutons sont peu configurables. Pour beaucoup plus de souplesse, utiliser le composant <Pressable> au lieu des <Button>.

3.7 Je veux des images !

Il peut y avoir différentes sources pour vos images : - des images fixes (décor de votre app, des boutons, de fond d'écran), intégrées à votre app - des images servies par le back-end

Voir les détails dans la documentation du composant <Image> de react-native : - les images fixes doivent être inclues avec require(cheminFixe), où cheminFixe est obligatoirement une chaîne de caractère statique pure (qui ne dépend d'aucune variable) et doivent faire partie de l'arborescense du front-end, au même titre que les fichiers .js (mais dans un autre répertoire). Les images fixes sont donc totalement inconnues du back-end. - les images servies par le back-end doivent être incluses à l'aide d'une uri, typiquement {uri: 'http://localhost:5000/static/monImage.jpg'}, à condition que, côté back-end, monImage.jpg soit stockée dans le répertoire static/. Voir la FAQ correspondante

Encore une fois, se référer à la documentation du composant <Image> pour plus de détails.

3.8 Je veux uploader un fichier (côté front-end)

Note : pour la partie back-end, voir la question 2.9.

const formData = new FormData();

formData.append('image', {
  uri:  imageUri,
  type: 'image/jpeg',
  name: 'IMG_0134.JPG',
});

axios.post('http://localhost:5000/upload', formData, {
  headers: {
    Authorize:      `bearer ${authToken}`,
    'Content-Type': 'multipart/form-data'
  },
}).then(...);

3.9 Débogage Axios

TODO