Pokedex

Présentation

Pour ce projet, j’ai conçu une application mobile de Pokedex en utilisant le framework React Native. Un Pokedex est une encyclopédie que l’on doit compléter dans les célèbres jeux de la franchise Pokemon. Il recense toutes les informations sur l’univers de ces petits monstres, leurs espèces, leurs évolutions, leurs attaques etc...

L’objectif de l’application est de pouvoir accéder aux informations de chaque Pokemon, faire des recherches et concevoir sa propre équipe en ajoutant des favoris. Tout ça à partir de l’API gratuite PokeAPI.

Afin de tester mon application et la débugger au cours de son développement, j’ai utilisé Expo Go qui permet de pouvoir rapidement expérimenter ses propres applications mobiles.

Conception

Pour commencer, j’ai réalisé une maquette Figma au préalable afin de savoir exactement ce que je voulais faire.

L’application est composée de 4 onglets :

• Home : page principale où sont affichés tous les Pokemon. Lorsque l’on clique sur une carte, on peut accéder aux informations détaillées du Pokemon, comme ses statistiques de bases ou ses évolutions. Il est possible de le capturer pour l’ajouter à son équipe.
• Search : page de recherche qui permet de directement trouver et d’accéder au Pokemon voulu.
• Team : page de l’équipe que l’on peut constituer. Le maximum autorisé est 6 Pokemon. Il est aussi possible de la vider intégralement.
• Settings : page d’options qui permet à l’utilisateur de définir une photo de profil en la prenant directement depuis l’application. Permet aussi de changer l’orientation de l’écran sur l’application.

Toutes les informations proviennent de PokeAPI. J’ai réalisé mes requêtes à l’aide d’Axios, un client HTTP compatible avec node.js.

En ce concerne la gestion des menus, j’ai utilisé les librairies React native-stack, pour créer des “empilements” de page, et bottom-tabs, pour créer le menu en bas de l’écran.

De plus, afin de stocker certaines informations dans l’appareil comme les favoris ou la photo de profile, j’ai utilisé la librairie async-storage. Et enfin, pour les options, j’ai fais appel aux librairies expo-camera pour accéder à la caméra de l’appareil et expo-screen-orientation pour gérer l’orientation de l’écran, que l’on peut retrouver dans la documentation officielle d’Expo.

Défis

Le principal défis a été d’apprendre à maîtriser les bases de React Native pour l’application. Bien qu’il y ait beaucoup de ressemblances avec le balisage de l’HTML et du CSS, la façon de développer l’interface est assez différente. Malgré les outils mis en place par Expo, le débogage est plus complexe.

Cependant, ce projet a été mon premier pas dans le monde de React, et m’a permis de comprendre les bases de ce framework que j’utilise aujourd’hui quotidiennement.