Le blog de l’agence.

Relier une appli mobile à un back-end WordPress.

Dans cette série de tutoriels, nous allons construire une application mobile avec React Native et la relier à un back-office WordPress pour l’authentification utilisateur et la sauvegarde des données. Au boulot !

Qu’allons-nous créer ?

Relier une appli mobile à un back-end WordPress 1

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

Nous allons travailler deux aspects dans ce projet :

  1. d’une part, le « front » (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-office WordPress afin d’authentifier les utilisateurs, et de recevoir et envoyer les données d’un utilisateur.

Démo

Tour d’horizon de ce qui sera créé dans cette série de tutoriels

Préparons tout ça…

Relier une appli mobile à un back-end WordPress 2

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.

Information

Je n’ai pas cherché à optimiser ni tester l’application sous iOS. Les liens des librairies n’étant faits qu’avec la partie Java d’Android, il faudra revoir l’installation de ces dernières et appliquer les liens pour iOS (React Native 0.60).

Comment allons-nous construire notre appli ?

Déroulé des articles

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

Branche correspondante →

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.

Consulter l’article

2. Création du store Redux et des actions

Branche correspondante →

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.

Consulter l’article

3. Gestion des formulaires avec redux-form

Branche correspondante →

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.

Consulter l’article

4. Validation et améliorations diverses des formulaires

Branche correspondante →

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.

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

Branche correspondante →

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.

6. Authentification utilisateur WordPress avec JWT

Branche correspondante →

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, nous devrons stocker un token JSON (JWT) pour identifier les futures requêtes de l’appli.

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

Branche correspondante →

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.

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.

Soyez le premier à publier un commentaire.

Laisser un commentaire