Créer une application mobile avec WordPress et React Native

Dans ce tutoriel nous allons voir ensemble comment créer une application mobile avec wordpress et React Native.

Avant de commencer

Comme annoncer dans le titre de l’article, nous allons créer une application mobile avec WordPress et React Native, mais avant de commencer, il faudrait noter qu’il s’agit d’une petite application mobile pour récupérer et afficher des articles publiés sur un blog WordPress.

LIRE AUSSI: Comment installer React Native sur Ubuntu

Donc cela sous-entend qu’il faut déjà un blog WordPress operationnel.

Comme la plupart d’entre vous le savent déjà, WordPress est livré avec une API REST prête à l’emploi.

Si vous ne me croyez pas, consultez simplement ce lien https://tutsforge.com/wp-json/wp/v2/posts.

Il renvoie une réponse JSON paginée avec tous les articles de notre blog.

Essayez exactement la même URL, mais pour votre blog, et vous serez époustouflé.

Maintenant, ce que notre application React Native doit faire pour afficher ces articles est de les récupérer via une requête HTTP.

Heureusement, c’est une tâche simple dans React Native et même les débutants auraient dû le faire au moins une fois.

Récupérer les données de WordPress

Récupérer des données dans React Native à partir d’une API WordPress est aussi simple que:

getPosts() {

   return fetch(


      "https://instamobile.io/wp-json/wp/v2/posts?page=" + this.state.page

  )
.then(response => response.json())
.then(responseJson => {
this.setState(prevState => ({
posts: [...prevState.posts, ...responseJson],
isLoading: false
}));
})
.catch(error => {
console.error(error);
});
}

La méthode «fetch» fait une requête réseau (GET) à une URL donnée.

Dans notre cas, nous fournissons l’URL de l’API REST de notre blog WordPress (notez l’URL instamobile.io à partir de la 3ème ligne).

Affichages des données dans l’application mobile

Une fois que les données récupérer, nous l’analysons en tant que JSON, puis ajoutons les articles à la fin des articles existants (déjà affichés).

En pratique, il s’agit essentiellement de mettre à jour l’état du composant React.

Notez le fait que l’API REST WordPress est paginée, donc pour récupérer une page spécifique, vous devez fournir un paramètre supplémentaire dans la requête GET, nommé «page».

LIRE AUSSI: Comment générer un APK d’une application React Native ?

Nous stockons la page actuelle dans l’objet d’état, afin de toujours récupérer une nouvelle page, lorsque l’utilisateur fait défiler la liste des articles de blog.

De plus, dans l’objet d’état, nous stockons également une variable booléenne «isLoading», pour informer le composant rendu s’il y a une demande de récupération en cours.

Dans notre application WordPress et React Native, nous affichons un spinner en bas de l’écran pour informer les utilisateurs que quelque chose se passe et qu’ils doivent attendre les articles nouvellement récupérés.

Sans plus tarder, voici comment afficher les articles WordPress récupérés dans React Native:

return (

<FlatList

data={this.state.posts}

renderItem={({ item }) => (

<News

navigation={this.props.navigation}

title={item.title.rendered}

image={item.acf.author_photo}

day={item.date}

data={item}

/>

)}

keyExtractor={item => item.id.toString()}

onEndReached={this.handleLoadMore}

onEndReachedThreshold={1}

/>

);

Nous utilisons simplement une ancienne FlatList pour afficher la liste des articles.

Notez que pour chaque élément, nous affichons un composant personnalisé nommé «News» qui prend un tas de propriétés et les rend.

Conclusion

Dans ce tutoriel nous avons vu comment créer une application mobile avec wordpress et React Native, j’espère que ce tutoriel a été utile.

Si vous avez des questions, faites-le moi savoir dans les commentaires.