Développer une application mobile React Native reliée à un back-end WordPress

Dans cette série de tutoriels, nous allons découvrir toutes les étapes qui permettent de créer une application mobile avec React Native et de la relier à un back-office WordPress pour authentifier les utilisateurs et sauvegarder leurs données.

Si ce challenge front-end et back-end vous intéresse, alors au boulot !

Quelle appli allons-nous créer ?

Nous allons développer l’application BeerKip qui permet à un utilisateur — amateur de houblon — de créer sa propre bibliothèque personnelle de bières, de les décrire et de les noter.

Nous allons travailler deux aspects dans ce projet :

1. d’une part, le développement du front-end (côté application mobile) sera propulsé par React Native, nous permettant ainsi de créer une app en écrivant du JavaScript uniquement.
2. cette application communiquera avec un back-end créé avec WordPress afin d’authentifier les utilisateurs, et de recevoir et envoyer les données d’un utilisateur.

Démonstration en vidéo

Préparation

Les liens utiles

• l’application Android est téléchargeable ici et installable sur votre smartphone Android. Vous pouvez l’utiliser librement en vous identifiant avec le compte beerkip et le mot de passe beerkip.
• un repo GitHub librement clonable contient tout le code React Native permettant de tester/installer l’application localement. Chaque branche de ce repo correspond à un article de tutoriel, la branche master contenant toujours le résultat à jour (qui risque d’évoluer au fil du temps). Vous pouvez donc checkout une branche spécifique pour tester l’état de l’application durant un article précis.
• un second repo GitHub contient l’extension WordPress en charge de communiquer avec l’application.
• enfin, nous utiliserons l’extension JWT Authentication for WP REST API pour l’authentification dans l’app via des comptes-utilisateurs WordPress. Ce plugin nous aidera à gérer et valider les tokens d’authentification dans l’application React Native.

Comment allons-nous construire notre application React Native ?

Le code lié au développement de cette app est réparti en sept tutoriels et sept branches du répertoire Git. Chaque tutoriel et sa branche correspondante abordera un sujet précis et vous permettra de découvrir plus en détails les points techniques importants à retenir.

Déroulé des articles

1. Mise en place des écrans et de la navigation globale

Cette première étape nous permettra de créer les 4 écrans principaux de l’appli. Nous créerons également une top bar permettant de naviguer entre tous ces écrans.

Branche correspondante →

---

2. Création du store Redux et des actions

Une fois les écrans en place, nous nous attarderons sur le store Redux qui conservera les données de l’application. Nous verrons comment sauvegarder de manière persistante ces données dans la mémoire du smartphone avec redux-persist.

Branche correspondante →

---

3. Gestion des formulaires avec redux-form

Une fois la structure de nos données prête, nous découvrirons redux-form et créerons nos 2 formulaires (login & ajout d’une bière) dans notre appli React Native.

Branche correspondante →

---

4. Validation et améliorations diverses des formulaires

Nous améliorerons ensuite ces formulaires en ajoutant des validations et warning sur certains champs pour n’accepter que des données valides. Nous verrons aussi la normalization offerte par redux-form pour formater nos données proprement.

Branche correspondante →

---

5. Création d’un champ multiple avec redux-form

Dernière évolution de formulaire : l’ajout d’un « champ répéteur » afin de pouvoir indiquer un ou plusieurs arômes lors de la création d’une bière. Nous verrons comment utiliser <FieldArray> de redux-form.

Branche correspondante →

---

6. Authentification AJAX des utilisateurs WordPress avec jetons JWT

Cette sixième partie nous laissera enfin communiquer avec WordPress, en reliant le formulaire de login avec notre back-office WP. Après l’authentification utilisateur via API REST, nous devrons stocker un token JSON (JWT) pour identifier les futures requêtes de l’appli.

Branche correspondante →

---

7. Envoi et réception des données entre l’appli React Native et WordPress

Nous verrons comment gérer l’envoi au serveur des données créées dans l’appli et leur traitement côté WordPress, via une route de Rest API spécialement créée pour l’occasion.

Nous terminerons cette partie avec une action Redux permettant de récupérer les données d’un utilisateur spécifique. On pourra ainsi pré-peupler l’application avec les données de l’utilisateur qui vient de s’identifier.

Branche correspondante →

---

Quelles librairies seront utilisées ?

Côté React Native, nous profiterons de nombreuses librairies afin d’optimiser notre développement mobile.

Native Base pour créer un prototype rapide et design

J’ai utilisé pour la première fois NativeBase pour ce projet et je ne peux que le recommander ! Il nous permettra de mettre en place les éléments visuels rapidement, sans avoir à écrire des tonnes de CSS-in-JS pour obtenir une interface potable.

react-navigation pour naviguer entre les écrans

Nous utiliserons React Navigation pour le routing et la navigation inter-écrans de l’app.

redux-form pour manipuler des formulaires efficacement

Nous découvrirons aussi Redux Form pour agiliser le développement de nos formulaires React Native. Il nous fera aussi profiter rapidement de logiques de validation, d’affichage de recommandations ou de formatage des données des champs.

Redux, redux-persist et redux-persist-filesystem-storage pour conserver les données localement

Notre datastore sera géré par le fameux Redux. La persistance des données dans l’application mobile se fera grâce à redux-persist et redux-persist-filesystem-storage.

axios pour gérer les appels AJAX avec WordPress

La librairie axios nous sera très utile pour communiquer avec le serveur WordPress et lancer des requêtes AJAX.

react-native-community/netinfo pour vérifier la connectivité à Internet

NetInfo nous permettra de vérifier la connectivité du smartphone à Internet, pour décider si la synchronisation des données est possible.

react-native-uuid-generator pour la génération d’UUID

Enfin, les objets (bières, photos, etc.) créés dans l’application devrons posséder un identifiant unique qui sera généré par react-native-uuid-generator.