WordPress: Création d’une application mobile avec WordPress REST API et React Native

WordPress: Création d'une application mobile avec WordPress REST API et React Native

Avant de commencer, il est important de noter que j’ai tiré une grande partie de ce message de @jrgould et de son article de 2015 sur le même sujet, mais j’ai mis à jour le code pour se conformer à la syntaxe React Native moderne et édité le projet un peu différemment.

Dans ce qui suit, nous allons créer un site Web avec du contenu que nous utiliserons comme source de données pour notre application mobile React Native. Avec l’avènement de 4.7, nous avons maintenant la possibilité de nous connecter à n’importe quelle installation via une API REST préexistante. Cela nous permet d’utiliser comme backend afin de pouvoir créer des choses comme React Native apps qui tirent du contenu de notre site .

Ce que nous construisons

Nous allons créer une application React Native appelée «Leadership-Quotes» qui extrait des images d’une bibliothèque multimédia via l’API WP REST et afficher une citation de leadership aléatoire à chaque clic sur le bouton.

Commencer

Créons d’abord un site Web . Pour ce faire, vous pouvez installer localement ou créer un site Web avec votre hébergeur. J’ai choisi de créer un site Web avec Pressable et j’ai créé un sous-domaine de base pour ce projet: https://leadershipquotes.mystagingwebsite.com. Si vous visitez ce site, vous remarquerez qu’il n’ya pratiquement aucun contenu. En effet, notre application React Native extraira le contenu directement de la bibliothèque multimédia à la place. Si vous avez besoin de contenu à télécharger dans votre bibliothèque multimédia, téléchargez mon export et importez-le dans votre installation .

Une fois que votre site Web est configuré, vous pouvez vérifier que l’API REST fonctionne en visitant l’URL: [your-domain.com]/wp-json/wp/v2/media. Si vous voulez vous assurer qu’il semble correct, vous pouvez afficher l’API de mon site à l’adresse https://leadershipquotes.mystagingwebsite.com/wp-json/wp/v2/media.

WordPress: Création d'une application mobile avec WordPress REST API et React Native

Si vous voyez quelque chose comme ça et reconnaissez certains des noms de fichiers répertoriés, alors vous êtes prêt à partir. C’est à peu près tout pour le côté .

Configuration d’un projet React Native

L’API WP REST permet tant d’innovation avec . N’importe qui peut créer ce qu’il veut en utilisant le logiciel qu’il veut et utiliser comme backend. Nous allons utiliser React Native. Pour rester bref, perfectionnez vos compétences React Native avec leur guide de démarrage.

En suivant le guide de démarrage, notre projet avec Create React Native App démarre automatiquement. Et si vous avez suivi avec succès leur didacticiel, vous devriez également avoir installé Expo et prêt à démarrer. Sinon, saisissez votre appareil mobile et installez l’application cliente Expo à partir de votre bibliothèque d’applications. Vous utiliserez Expo sur votre appareil mobile pour tester votre application lorsque vous apporterez des modifications.

Dans le Terminal sur Mac, accédez à l’emplacement où vous souhaitez que cette application soit installée pour le développement et exécutez:

create-react-native-app Leadership-Quotes

cd Leadership-Quotes
npm start

Après cela, vous devriez voir un code QR dans votre fenêtre Terminal. Ouvrez maintenant Expo sur votre appareil mobile et cliquez sur l’option « Scanner le code QR », et scannez le code. Votre téléphone doit être actualisé pour afficher quelque chose comme ça.

WordPress: Création d'une application mobile avec WordPress REST API et React Native

Commençons par éditer les fichiers. Ouvrez le App.js fichier dans votre éditeur de texte préféré. Ce fichier a un code par défaut qui affiche l’écran ci-dessus. Jetons-y un œil.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      
        Open up App.js to start working on your app!
        Changes you make will automatically reload.
        Shake your phone to open the developer menu.
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Les deux import les lignes étendent la base de code React et la préparent pour ce dont nous avons besoin. Ajoutons quelques éléments supplémentaires à cette seconde import.

import { Text, View, StyleSheet, Dimensions, TouchableHighlight, Image } from 'react-native';

Supprimons le reste du code par défaut, puis ajoutons le nôtre en dessous de ceux import Mots clés.

// WP REST API 
const REQUEST_URL  = 'https://leadershipquotes.mystagingwebsite.com/wp-json/wp/v2/media';

// Windowsize is referenced in the styles below.
const windowSize = Dimensions.get('window');

export default class LeadershipCards extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
    this.fetchData = this.fetchData.bind(this);
  }

  getInitialState() {
    return {
      // Card is initially set to null so that the loading message shows.
      card: null,
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  // This is where the magic happens! Fetches the data from our API and updates the application state.
  fetchData() {
    this.setState({
      // We'll also set card to null when loading new cards so that the loading message shows.
      card: null,
    });
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        // this.setState() will cause the new data to be applied to the UI that is created by the `render` function below.
        this.setState({
          card: { pic: responseData[0].guid.rendered }
        });
      })
    .done();
  }

  // Instead of immediately rendering the template, we now check if there is data in the 'card' variable
  // and render a loading view if it's empty, or the 'card' template if there is data.
  render() {
    if ( !this.state.card ) {
      return this.renderLoadingView();
    }
    return this.renderCard();
  }

  // The loading view template just shows the message "Wait for it..."
  renderLoadingView() {
    return (
      
        
          Wait for it...
        
      
    );
  }

  // This is the original render function, now renamed to renderCard, which will render our main template. 
  renderCard() {
    let quote = this.state.card.pic;
    return (
      
        
          
        
        
          
            Next quote
          
        
      
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  text: {
    fontSize: 18,
    paddingLeft: 20,
    paddingRight: 20,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  imageContainer: {
    alignItems: 'center',
    flex: 1,
    width: windowSize.width,
    height: windowSize.height,
  },
  buttonContainer: {
    bottom: 0,
    flex: .1,
    width: windowSize.width,
    backgroundColor: '#1488BC',
  },
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 30,
    color: '#FFFFFF',
  },
});

REMARQUE: Le plugin que j’utilise pour affiner le code ne fonctionne pas bien avec le tags and everything in between, so I added a space to the first character so they would appear. Make sure to remove that space in your own code.

After saving this, check your device to see if it looks something like this (your image may be different):

WordPress: Création d'une application mobile avec WordPress REST API et React Native

If everything connected correctly, you should see an image from the media library on the screen with a blue button that says, “Next quote.” If you click the button, the same image loads over and over again. While it’s great that we’re connected, it’s not the ideal outcome. We want the app to display a random image from the media library with each click.

Adding customized endpoints to the WP REST API

In order to get our button to work, we need to gather all the media IDs and randomize them for each click of the button. Unfortunately there’s no API endpoint that allows us to just grab an array of media IDs. No problem, we’ll just write a plugin that will provide those endpoints for us. There’s a lot of great documentation for this. Let’s do that now.

I’ve already created a plugin to do this, https://github.com/mapk/wp-rest-api-v2-media-ids or in the Plugin repository https://.org/plugins/wp-rest-api-media-ids/, but if you’d like to learn how, let’s dig into it.

Create a folder inside your plugin directory on your site and call it something like, media-ids-api-endpoints, puis créez un fichier php à l’intérieur avec le même nom, media-ids-api-endpoints.php.

Nous pouvons maintenant ajouter notre champ de texte en clair dans le point de terminaison post, cette fois en utilisant la fonction register_api_field fournie par WP-API. Les documents WP-API recommandent que de nouveaux champs soient enregistrés lors de l’action rest_api_init. Nous allons donc créer une fonction qui contient notre enregistrement de champ et la transmettre à cette action et à une autre fonction qui retournera en fait le contenu en texte brut.

Nous allons d’abord utiliser le register_rest_route fonction pour enregistrer une nouvelle route à wp-json/media-ids/v1/get-all-media-ids dans notre nouveau fichier php plugin.

add_action( 'rest_api_init', function () {
    register_rest_route( 'media-ids/v1', '/get-all-media-ids', array(
        'methods' => 'GET',
        'callback' => 'dt_get_all_media_ids',
    ) );
} );

Ensuite, nous voulons écrire la fonction qui rassemble ces ID et encapsuler le code avec du texte passe-partout avec les informations du plug-in. Au final, cela devrait ressembler à ceci:

/*
Plugin Name: WP-REST-API V2 Media IDs
Version: 0.1
Description: Adding an endpoint to show all media IDs on WP REST API v2
Author: Mark Uraine
Author URI: http://markuraine.com
*/

/**
 * Get all media IDs
 * @return array List of media IDs
 */

// Return all media IDs
function dt_get_all_media_ids() {
    if ( false === ( $all_media_ids = get_transient( 'dt_all_media_ids' ) ) ) {
        $all_media_ids = get_posts( array(
            'post_type'   => 'attachment',
            'post_mime_type' => 'image',
            'post_status'    => 'inherit', 
            'posts_per_page' => -1,
            'fields'      => 'ids',
        ) );
        // cache for 2 hours
        set_transient( 'dt_all_media_ids', $all_media_ids, 60*60*2 );
    }

    return $all_media_ids;
}

add_action( 'rest_api_init', function () {
    register_rest_route( 'media-ids/v1', '/get-all-media-ids', array(
        'methods' => 'GET',
        'callback' => 'dt_get_all_media_ids',
    ) );
} );

REMARQUE: Assurez-vous d’ajouter un without the spacing to the beginning of the code as well (on top of the comments). Again, the code prettifier didn't recognize this tag.

Une fois que tout est installé, vous devriez pouvoir visiter: [your-domain.com]/wp-json/media-ids/v1/get-all-media-ids pour voir le résultat de l’API. Vous pouvez voir le mien ici: http://leadershipquotes.mystagingwebsite.com/wp-json/media-ids/v1/get-all-media-ids. Ça devrait ressembler a quelque chose comme ca; un tableau de nombres:

WordPress: Création d'une application mobile avec WordPress REST API et React Native

Mise à jour de l’application pour utiliser des points de terminaison personnalisés

Il ne nous reste plus qu’à mettre à jour notre application native React pour utiliser ce nouveau point de terminaison et effectuer des demandes pouvant être mises en cache. Nous allons d’abord remplacer le REQUEST_URL variable avec REQUEST_URL_BASE et ajoutez deux autres variables pour les différents points de terminaison auxquels nous accéderons:

const REQUEST_URL_BASE  = 'https://leadershipquotes.mystagingwebsite.com/wp-json/';
const POSTS_URL_PATH    = 'wp/v2/media/';
const GET_MEDIA_IDS_PATH = 'media-ids/v1/get-all-media-ids';

Ensuite, nous devrons ajouter deux nouvelles propriétés à l’état initial de l’application: cardIDs et currentID:

getInitialState() {
    return {
      // Card is initially set to null so that the loading message shows.
      card: null,
      cardIDs: null,
      currentID: null
    };
  }

Ensuite, nous allons ajouter des fonctions pour remplir ces propriétés dans le même App.js fichier:

getAllIDs() {
  fetch(REQUEST_URL_BASE + GET_MEDIA_IDS_PATH)
  .then((response) => response.json())
  .then((responseData) => {
    this.setState( {
      cardIDs: responseData
    } );
  })
  .then(this.fetchData)
  .done();
}

getRandID() {
  let currentID = this.state.cardIDs[Math.floor(Math.random()*this.state.cardIDs.length)];
  if ( this.state.currentID == currentID ) {
    currentID = this.getRandID();
  } else {
    this.setState( {
      currentID: currentID
    });
  }
  return currentID;
}

Vous remarquerez que la dernière chose getAllIDs() fait après avoir récupéré la liste des identifiants et les a ajoutés à l’état est qu’il appelle this.fetchData() – Ceci est dû au fait fetchData() aura besoin du cardIDs être déjà disponible dans l’état avant de pouvoir s’exécuter. Nous devons remplacer fetchData() avec getAllIDs() dans le componentDidMount() méthode pour vous assurer que getAllIDs() s’exécute en premier:

componentDidMount() {
  this.getAllIDs();
}

Et puis nous devrons mettre à jour fetchData() courir getRandID() puis utilisez l’ID aléatoire pour récupérer cet élément multimédia:

fetchData() {
  let currentID = this.getRandID();
  this.setState({
    // We'll also set card to null when loading new cards so that the loading message shows.
    card: null,
  });
  fetch(REQUEST_URL_BASE + POSTS_URL_PATH + currentID)
    .then((response) => response.json())
    .then((responseData) => {
      // this.setState() will cause the new data to be applied to the UI that is created by the `render` function below.
      this.setState({
        card: { pic: responseData.guid.rendered }
      });
    })
  .done();
}

Peu de choses ont changé en fetchData(), nous avons ajouté l’appel à getRandID() au début, puis nous utilisons la sortie de cela avec REQUEST_URL_BASE et POSTS_URL_PATH pour accéder à une publication spécifique via l’API avec une URL qui peut être facilement mise en cache par un système de mise en cache côté serveur tel que WP Super Cache ou Varnish. Notez que nous avons également supprimé le numéro de tableau de responseData.guid.rendered.

Enregistrez tout cela et votre application devrait être actualisée dans Expo sur votre appareil. Commencez à cliquer sur le bouton et regardez chaque nouvelle image s’afficher à l’écran dans un ordre aléatoire. Tu l’as fait!

WordPress: Création d'une application mobile avec WordPress REST API et React Native

Pour une vue complète de l’application React Native et du plugin , reportez-vous aux sources ci-dessous.

React Native app
https://github.com/mapk/Leadership-Quotes

Plugin
https://github.com/mapk/wp-rest-api-v2-media-ids



All the CMS Templates You Could Ask For.

WordPress: Création d'une application mobile avec WordPress REST API et React Native

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.



WordPress: Création d'une application mobile avec WordPress REST API et React Native

#Création #dune #application #mobile #avec # #REST #API #React #Native