Création d'applications mobiles à l'aide de React Native et WordPress

En outre, les modifications apportées au code lors du développement sont chargées sur les périphériques de test presque instantanément! Cela prenait plusieurs minutes quand nous avions un développement natif à travers d'autres approches. Les développeurs sont en mesure de profiter de la rétroaction instantanée qu'ils aimaient avec le développement web.

Les développeurs de React sont plus qu'heureux de pouvoir utiliser les modèles existants qu'ils ont suivis dans une nouvelle plate-forme. En fait, ils ciblent deux autres plateformes avec ce qu'ils savent déjà très bien.

Tout cela est bon pour le développement frontal. Mais quels choix avons-nous pour la technologie back-end? Devons-nous encore apprendre un nouveau langage ou un framework?

L'API WordPress REST

Fin 2016, WordPress publie le très attendu REST L'API est à la base, et a ouvert la voie à des solutions avec des backends découplés.

Donc, si vous avez déjà un site WordPress et WooCommerce et que vous souhaitez conserver exactement les mêmes offres et profils utilisateurs sur votre site

Hypothèses faites dans cet article

Je vais vous guider à travers votre compétence WordPress pour créer une application mobile avec un magasin WooCommerce en utilisant React Native. L'article suppose:

• Vous connaissez les différentes API WordPress au moins au niveau débutant.
• Vous connaissez les bases de React.
• Vous avez un serveur de développement WordPress prêt. J'utilise Ubuntu avec Apache.
• Vous avez un appareil Android ou iOS à tester avec Expo

Ce que nous allons construire dans ce tutoriel

Le projet que nous allons construire à travers cet article est une application de magasin de mode . L'application aura les fonctionnalités suivantes:

• Liste des produits affichant tous les produits,
• Page produit unique avec les détails de l'article sélectionné,
• fonction 'Ajouter au panier',
• 'Afficher les articles dans le panier' ,
• 'Retirer l'article du panier'

Cet article vise à vous inspirer pour utiliser ce projet comme point de départ pour créer des applications mobiles complexes en utilisant React Native.

Note : Pour l'application complète, vous pouvez visiter mon projet sur Github et le cloner .

Premiers pas avec notre projet

Nous allons commencer à construire l'application selon le React officiel Documentation. Après avoir installé Node sur votre environnement de développement, ouvrez l'invite de commande et tapez la commande suivante pour installer globalement l'application native Create React

 npm install -g create-react-native-app 

Ensuite, nous pouvons créer notre projet

 create-react-native-app reac-native-woocommerce-store 

Cela créera un nouveau projet React Native que nous pourrons tester avec Expo

Ensuite, nous aurons besoin d'installer l'application Expo sur notre appareil mobile que nous voulons tester. Il est disponible à la fois pour iOS et Android .

Après avoir installé l'application Expo, nous pouvons lancer npm start sur notre machine de développement

 cd react-native-woocommerce -le magasin

npm start 

Après cela, vous pouvez scanner le code QR via l'application Expo ou entrer l'URL donnée dans la barre de recherche de l'application. Cela va exécuter l'application de base «Hello World» dans le mobile. Nous pouvons maintenant modifier App.js pour apporter des modifications instantanées à l'application qui s'exécute sur le téléphone.

Vous pouvez également exécuter l'application sur un émulateur. Mais pour plus de brièveté et de précision, nous couvrirons l'exécution sur un périphérique réel.

Ensuite, installons tous les paquets requis pour l'application en utilisant cette commande:

 npm install -s axios réagissent-native-htmlview réagissent-navigation reac-redux redux redux-thunk 

Configuration d'un site WordPress

Puisque cet article traite de la création d'une application React Native, nous n'entrerons pas dans les détails concernant la création d'un site WordPress. S'il vous plaît se référer à cet article sur la façon d'installer WordPress sur Ubuntu. Comme l'API REST de WooCommerce nécessite HTTPS, assurez-vous qu'elle est configurée à l'aide de Let's Encrypt. Veuillez vous référer à cet article pour un guide pratique.

Nous ne créons pas d'installation WordPress sur localhost car nous utiliserons l'application sur un appareil mobile, et aussi parce que le protocole HTTPS est nécessaire. 19659007] Une fois que WordPress et HTTPS sont configurés avec succès, nous pouvons installer le plugin WooCommerce sur le site.

Après avoir installé et activé le plugin, continuez avec la configuration de la boutique WooCommerce en suivant l'assistant. Une fois l'assistant terminé, cliquez sur 'Retour au tableau de bord'

Vous serez accueilli par une autre invite.

Cliquez sur "Allons-y" sur "Ajouter des exemples de produits". Cela nous fera gagner du temps pour créer nos propres produits à afficher dans l'application.

Fichier de constantes

Pour charger les produits de notre magasin à partir de l'API Roo de WooCommerce, nous avons besoin des clés appropriées dans notre application. Pour ce faire, nous pouvons avoir un fichier constans.js .

Commencez par créer un dossier appelé 'src' et créez des sous-dossiers comme suit:

Maintenant, générons les clés pour WooCommerce. Dans le tableau de bord WordPress, accédez à WooCommerce → Paramètres → API → Clés / Applications et cliquez sur «Ajouter une clé».

Ensuite, créez une clé en lecture seule avec le nom React Native. Copiez la clé de consommateur et le secret de consommateur dans le fichier constants.js comme suit:

 const Constantes = {
   URL: {
wc: 'https://woocommerce-store.on-its-way.com/wp-json/wc/v2/'
   },
   Clés: {
ConsumerKey: "CONSUMER_KEY_HERE",
ConsumerSecret: 'CONSUMER_SECRET_HERE'
   }
}
les constantes par défaut d'exportation;

À partir de React Navigation

React Navigation est une solution communautaire pour naviguer entre les différents écrans et est une bibliothèque autonome. Il permet aux développeurs de configurer les écrans de l'application React Native avec juste quelques lignes de code.

Il existe différentes méthodes de navigation dans React Navigation:

• Stack,
• Switch,
• Tabs,
• ] Tiroir,
• et plus

Pour notre application, nous utiliserons une combinaison de StackNavigation et DrawerNavigation pour naviguer entre les différents écrans. StackNavigation est similaire au fonctionnement de l'historique du navigateur sur le Web. Nous l'utilisons car il fournit une interface pour l'en-tête et les icônes de navigation en-tête. Il a push et pop similaire à des piles dans les structures de données. Push signifie que nous ajoutons un nouvel écran en haut de la pile de navigation. Pop supprime un écran de la pile

Le code montre que le StackNavigation en fait, héberge le DrawerNavigation en lui-même. Il prend également des propriétés pour le style d'en-tête et les boutons d'en-tête. Nous plaçons le bouton du tiroir de navigation vers la gauche et le bouton du panier vers la droite. Le bouton du tiroir allume et éteint le tiroir alors que le bouton du chariot amène l'utilisateur à l'écran du panier d'achat.

 const StackNavigation = StackNavigator ({
 DrawerNavigation: {screen: DrawerNavigation}
}, {
   headerMode: 'float',
   navigationOptions: ({navigation, screenProps}) => ({
     headerStyle: {backgroundCouleur: '# 4C3E54'},
     headerTintColor: 'blanc',
     headerLeft: drawerButton (navigation),
     headerRight: cartButton (navigation, screenProps)
   })
 });

const drawerButton = (navigation) => (
  {
     if (navigation.state.index === 0) {
       navigation.navigate ('TiroirOuvre')
     } autre {
       navigation.navigate ('TiroirFermer')
     }
   }
   }>  (
  {navigation.navigate ('CartPage')}}
 >
   
   {screenProps.cartCount}
 
)
 

DrawerNavigation d'autre part fournit le tiroir latéral qui nous permettra de naviguer entre Home, Shop et Cart. Le DrawerNavigator répertorie les différents écrans que l'utilisateur peut visiter, à savoir la page d'accueil, la page des produits, la page du produit et la page du panier. Il possède également une propriété qui prendra le conteneur Tiroir: le menu coulissant qui s'ouvre lorsque vous cliquez sur le menu hamburger.

 const DrawerNavigation = DrawerNavigator ({
 Accueil: {
   écran: HomePage,
   navigationOptions: {
     titre: "RN WC Store"
   }
 },
 Des produits: {
   écran: Produits,
   navigationOptions: {
     titre: "Boutique"
   }
 },
 Produit: {
   écran: Produit,
   navigationOptions: ({navigation}) => ({
     titre: navigation.state.params.product.name
   }),
 },
 CartPage: {
   écran: CartPage,
   navigationOptions: {
     titre: "Panier"
   }
 }
}, {
   contentComponent: DrawerContainer
 });

Injecter le magasin Redux à App.js

Puisque nous utilisons Redux dans cette application, nous devons injecter le magasin dans notre application. Nous faisons cela avec l'aide du composant Provider .

 const store = configureStore ();

La classe App étend React.Component {
 render () {
   revenir (
         
           
         
   )
 }
}

Nous aurons alors un composant ConnectedApp afin que nous puissions avoir le nombre de charrettes dans l'en-tête.

 la classe CA étend React.Component {
 render () {
   const cart = {
     cartCount: this.props.cart.length
   }
   revenir (
     
   )
 }
}

function mapStateToProps (état) {
 revenir {
   panier: state.cart
 }
}

const ConnectedApp = connect (mapStateToProps, null) (CA);

Stockage, Actions et Réducteurs Redux

Dans Redux, nous avons trois parties différentes :

1. Store
   Contient l'ensemble de l'état de votre application entière. La seule façon de changer d'état est de lui envoyer une action
2. Actions
   Un objet simple qui représente une intention de changer l'état
3. Réducteurs
   Une fonction qui accepte un état et un type d'action et renvoie un nouvel état.

Ces trois composants de Redux nous aident à atteindre un état prévisible pour l'ensemble de l'application. Pour plus de simplicité, nous verrons comment les produits sont récupérés et enregistrés dans le magasin Redux.

Tout d'abord, regardons le code de création du magasin:

 let middleware = [thunk];

exporter la fonction par défaut configureStore () {
    return createStore (
        RootReducer,
        applyMiddleware (... middleware)
    )
}

Ensuite, l'action produits est chargée de récupérer les produits depuis le site distant

 export function getProducts () {
   retour (envoi) => {
       const url = produits $ {Constants.URL.wc}? per_page = 100 & consumer_key = $ {Constants.Keys.ConsumerKey} & consumer_secret = $ {Constants.Keys.ConsumerSecret} `
      
       return axios.get (url) .then (réponse => {
           envoi({
               type: types.GET_PRODUCTS_SUCCESS,
               produits: response.data
           }
       )}). catch (err => {
           console.log (err.error);
       })
   }
}

Le réducteur de produits est chargé de renvoyer la charge utile de données et si elle doit être modifiée.

 exporter la fonction par défaut (state = InitialState.products, action) {
    switch (action.type) {
        types de cas.GET_PRODUCTS_SUCCESS:
            return action.products;
        défaut:
            état de retour;
    }
}

Afficher la boutique WooCommerce

Le fichier products.js est notre page boutique. Il affiche essentiellement la liste des produits de WooCommerce.

 class ProductsList extends Component {

 componentDidMount () {
   this.props.ProductAction.getProducts ();
 }

 _keyExtractor = (item, index) => item.id;

 render () {
   const {navigate} = this.props.navigation;
   const Items = (
      (
            navigate ("Produit", {produit: élément})} underlayColor = "white">
             
               
                {item.name} 
             
           
         )
       }
     />
   )
   revenir (
     
       {this.props.products.length? Articles :
         
           
         
       }
     
   )
 }
}

this.props.ProductAction.getProducts () et this.props.products sont possibles en raison de mapStateToProps et mapDispatchToProps .

mapStateToProps et mapDispatchToProps

L'état est le magasin Redux et Dispatch est les actions que nous faisons. Ces deux éléments seront exposés comme des accessoires dans le composant.

 function mapStateToProps (state) {
 revenir {
   produits: state.products
 }
}
function mapDispatchToProps (dispatch) {
 revenir {
   ProductAction: bindActionCreators (ProductAction, envoi)
 }
}
export par défaut connect (mapStateToProps, mapDispatchToProps) (ProductsList);

Styles

Dans React, les styles natifs sont généralement définis sur la même page. Il est similaire à CSS, mais nous utilisons les propriétés camelCase à la place des propriétés de trait d'union.

 const styles = StyleSheet.create ({
 liste: {
   flexDirection: 'colonne'
 },
 vue: {
   rembourrage: 10
 },
 loader: {
   largeur: 200,
   hauteur: 200,
   alignItems: 'centre',
   justifyContent: 'centre',
 },
 image: {
   largeur: 150,
   hauteur: 150
 },
 texte: {
   textAlign: 'centre',
   policeSize: 20,
   rembourrage: 5
 }
});

Page produit unique

Cette page contient les détails d'un produit sélectionné. Il montre à l'utilisateur le nom, le prix et la description du produit. Il a aussi la fonction 'Ajouter au panier'

Page du panier

Cet écran affiche la liste des articles dans le panier. L'action a les fonctions getCart addToCart et removeFromCart . Le réducteur gère les actions de la même manière. L'identification des actions se fait à travers les constantes d'action – les constantes qui décrivent l'action qui sont stockées dans un fichier séparé.

 export const GET_PRODUCTS_SUCCESS = 'GET_PRODUCTS_SUCCESS'
export const GET_PRODUCTS_FAILED = 'GET_PRODUCTS_FAILED';

export const GET_CART_SUCCESS = 'GET_CART_SUCCESS';
export const ADD_TO_CART_SUCCESS = 'ADD_TO_CART_SUCCESS';
export const REMOVE_FROM_CART_SUCCESS = 'REMOVE_FROM_CART_SUCCESS';

Ceci est le code du composant CartPage :

 class CartPage extends React.Component {

 componentDidMount () {
   this.props.CartAction.getCart ();
 }

 _keyExtractor = (item, index) => item.id;

 removeItem (item) {
   this.props.CartAction.removeFromCart (élément);
 }

 render () {
   const {cart} = this.props;
   console.log ('panier de rendu', panier)

   if (panier && cart.length> 0) {
     const Items = 
         
           
            {item.name} 
            {item.quantité} 
             this.removeItem (item)}> 
         
       }
     />;
     revenir (
       
         {Articles}
       
     )
   } autre {
     revenir (
       
          Le panier est vide! 
       
     )
   }
 }
}

Comme vous pouvez le voir, nous utilisons une FlatList pour parcourir les éléments du panier. Il prend un tableau et crée une liste d'éléments à afficher à l'écran.

Conclusion

Vous pouvez configurer des informations sur l'application telles que le nom et l'icône dans le fichier app.json . L'application peut être publiée après l'installation de npm exp

Pour résumer:

• Nous avons maintenant une application de commerce électronique décent avec React Native
• Expo peut être utilisé pour exécuter le projet sur un smartphone;
• ] Des technologies backend existantes telles que WordPress peuvent être utilisées;
• Redux peut être utilisé pour gérer l'état de l'application entière;
• Les développeurs Web, en particulier les développeurs React, peuvent tirer parti de ces connaissances pour créer des applications plus volumineuses. application complète, vous pouvez visiter mon projet sur Github et le cloner. N'hésitez pas à le fourrer et à l'améliorer davantage. Comme exercice, vous pouvez continuer à construire plus de fonctionnalités dans le projet comme:
  • page de paiement,
  • Authentification,
  • Stocker les données du panier dans AsyncStorage afin que la fermeture de l'application n'efface pas le chariot.
  (da, lf, ra, yk, il)