En savoir plus - Publicité 2 Publicité 2 En savoir plus - Publicité 2 Publicité 2 En savoir plus - Publicité 2 Publicité 2 En savoir plus - Publicité 2 Publicité 2 Découvrez nos offres pour annonceurs - Publicité 4 Publicité 4 En savoir plus - Publicité 2 Publicité 2 Visitez 3Vision Group - Publicité 3 Publicité 3 banner Publicité 3

Cours: Création d’applications mobiles WordPress à l’aide de React Native



WordPress peut constituer une excellente plate-forme back-end pour votre prochaine application native, en particulier si elle est basée sur le contenu ou sur une boutique en ligne. Dans cet article, vous apprendrez les bases de la création d’applications mobiles avec React Native et WordPress.

En tant que développeurs Web, vous avez peut-être pensé que le développement d’applications mobiles nécessitait une nouvelle courbe d’apprentissage avec un autre langage de programmation. Peut-être Java et Swift doivent-ils être ajoutés à vos compétences pour fonctionner avec iOS et Android, ce qui pourrait vous ralentir.

Mais cet article vous fait une surprise! Nous envisagerons de créer une application de commerce électronique pour iOS et Android en utilisant la plate-forme WooCommerce comme base de travail. Ce serait un point de départ idéal pour quiconque souhaitant se lancer dans le développement multiplate-forme natif.
Une brève histoire du développement multiplate-forme

Nous sommes en 2011 et nous voyons le début du développement d’applications hybrides pour mobiles. Des cadres tels qu’Apache Cordova, PhoneGap et Ionic Framework émergent lentement. Tout semble bon et les développeurs Web codent avec impatience les applications mobiles avec leurs connaissances existantes.

Cependant, les applications mobiles ressemblaient toujours à des versions mobiles de sites Web. Aucune conception native telle que la conception matérielle d’Android ou l’aspect plat d’IOS. La navigation fonctionnait de la même manière que sur le Web et les transitions n’étaient pas faciles. Les utilisateurs n’étaient pas satisfaits des applications construites à l’aide de l’approche hybride et rêvaient de l’expérience native.

Avance rapide jusqu’à mars 2015 et React Native apparaît sur la scène. Les développeurs sont en mesure de créer des applications inter-plates-formes véritablement natives à l’aide de React, une bibliothèque JavaScript préférée de nombreux développeurs. Ils sont maintenant facilement en mesure d’apprendre une petite bibliothèque en plus de ce qu’ils savent avec JavaScript. Fort de cette connaissance, les développeurs ciblent désormais le Web, iOS et Android.

Front-end est compliqué et compliqué de nos jours. C’est pourquoi nous publions des articles, des livres imprimés et des webinaires avec des techniques utiles pour améliorer votre travail. Encore mieux: Smashing Membership avec un choix croissant de goodies front-end et UX. Donc, vous faites votre travail mieux et plus vite.

 

Furthermore, changes to the code during the development of the testing devices almost instantly! This method was used several times when we had native development through other approaches. Developers are able to enjoy the instant feedback they used to love with web development.

React developers are more than happy to use existing patterns. In fact, they are targeting two more platforms with what they already know very well.

This is all good for front-end development. But what choices do we have for back-end technology? Do we still have to learn a new language or framework?
The WordPress REST API

In late 2016, WordPress released the much awaited REST API to its core, and opened the doors for solutions with decoupled backends.

So, if you already have a WordPress and WooCommerce website, and this article is for you!
Assumptions Made In This Article

I will walk you through your WordPress skill to build a mobile app with a WooCommerce store using React Native. The article assumes:

You are familiar with the different WordPress APIs, at least at a beginner level.
You are familiar with the basics of React.
You have a WordPress development server ready. I use Ubuntu with Apache.
You have an Android or iOS device to test with Expo.

What We Will Build In This Tutorial

The project is going to be built through this article is a fashion store app. The app will have the following functionalities:

Shop page listing all products,
Single product page with details of the selected item,
‘Add to cart’ feature,
‘Show items in cart’ feature,
‘Remove item from cart’ feature.

This article aims to inspire you to use this project to build mobile apps using React Native.

Note: For the full application, you can visit my project on Github and clone it.
Getting Started With Our Project

React Native documentation. Having installed Node on your development environment, create the Create React Native App globally.

npm install -g create-react-native-app

 

Next, we can create our project

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

copy

This will create a new React Native project which we can test with Expo.

Next, we will need to install the Expo app on our mobile device which we want to test. It is available for both iOS and Android.

We have installed the Expo app, we can run on our development machine.

cd react-native-woocommerce-store

npm start

 

1 React Native Expo Cmd
Démarrage d’un projet React Native via la ligne de commande via Expo.

Ensuite, vous pouvez numériser le code QR via l’application Expo ou entrer l’URL indiquée dans la barre de recherche de l’application. Ceci lancera l’application de base «Hello World» sur le mobile. Nous pouvons maintenant modifier App.js pour apporter des modifications instantanées à l’application en cours d’exécution sur le téléphone.

Alternativement, vous pouvez exécuter l’application sur un émulateur. Mais pour des raisons de brièveté et de précision, nous allons couvrir son exécution sur un périphérique réel.

Ensuite, installons tous les packages requis pour l’application en utilisant cette commande:

npm installer -s axios réagissent-natif-htmlview réagissent-réagissent-redux redux redux-thunk

Copie
Mise en place d’un site WordPress

Étant donné que cet article concerne la création d’une application native React, nous n’entrerons pas dans les détails concernant la création d’un site WordPress. Veuillez vous référer à cet article pour savoir comment installer WordPress sur Ubuntu. L’API REST WooCommerce nécessitant 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 allons exécuter l’application sur un appareil mobile, et également depuis que HTTPS est nécessaire.

Une fois que WordPress et HTTPS sont correctement configurés, nous pouvons installer le plug-in WooCommerce sur le site.

2 Woocommerce Plugin
3 Woocommerce Sample
Installation du plugin WooCommerce sur notre installation WordPress. (Grand aperçu)

Lundi
Suivi de projet, travail d’équipe et reporting client comme vous ne l’avez jamais vu auparavant. Commencez votre essai gratuit maintenant.
Commencer l’essai gratuit

Après avoir installé et activé le plug-in, poursuivez l’installation 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.*
Adding example products to WooCommerce.

Cliquez sur « Allons-y » pour « 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 REST WooCommerce, nous avons besoin des clés appropriées en place dans notre application. Pour cela, nous pouvons avoir un fichier constans.js.

Commencez par créer un dossier appelé «src» et créez-en un sous-dossier comme suit:

 

4 Folder Structure Wide
Créez le fichier ‘Constants.js’ dans le dossier Constans. (Grand aperçu)

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

Créez ensuite 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:

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

Copie
À partir de React Navigation

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

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

Empiler,
Commutateur,
Onglets,
Tiroir,
et plus.

Pour notre application, nous utiliserons une combinaison de StackNavigation et DrawerNavigation pour naviguer entre les différents écrans. StackNavigation est similaire à la façon dont l’historique de navigateur fonctionne sur le Web. Nous l’utilisons car il fournit une interface pour l’en-tête et les icônes de navigation d’en-tête. Il a push et pop similaire aux 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 StackNavigation abrite en fait DrawerNavigation. 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 à gauche et le bouton du panier d’achat à droite. Le bouton du tiroir allume et éteint le tiroir, tandis que le bouton du panier amène l’utilisateur à l’écran du panier.

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

const drawerButton = (navigation) => (
 <Text
   style={{ padding: 15, color: 'white' }}
   onPress={() => {
     if (navigation.state.index === 0) {
       navigation.navigate('DrawerOpen')
     } else {
       navigation.navigate('DrawerClose')
     }
   }
   }> (
 <Text style={{ padding: 15, color: 'white' }}
   onPress={() => { navigation.navigate('CartPage') }}
 >
   <EvilIcons name="cart" size={30} />
   {screenProps.cartCount}
 </Text>
);

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

 

const DrawerNavigation = DrawerNavigator({
 Home: {
   screen: HomePage,
   navigationOptions: {
     title: "RN WC Store"
   }
 },
 Products: {
   screen: Products,
   navigationOptions: {
     title: "Shop"
   }
 },
 Product: {
   screen: Product,
   navigationOptions: ({ navigation }) => ({
     title: navigation.state.params.product.name
   }),
 },
 CartPage: {
   screen: CartPage,
   navigationOptions: {
     title: "Cart"
   }
 }
}, {
   contentComponent: DrawerContainer
 });
# 
Gauche: la page d’accueil (homepage.js). Droite: le tiroir ouvert (DrawerContainer.js).
Injecter le Redux Store sur App.js

Depuis que nous utilisons Redux dans cette application, nous devons injecter le magasin dans notre application. Nous faisons cela avec l’aide du composant Fournisseur.

const store = configureStore();

class App extends React.Component {
 render() {
   return (
     <Provider store={store}>    
       <ConnectedApp />    
     </Provider>    
   )
 }
}

We will then have a ConnectedApp component so that we can have the cart count in the header.

class CA extends React.Component {
 render() {
   const cart = {
     cartCount: this.props.cart.length
   }
   return (
     <StackNavigation screenProps={cart} />
   );
 }
}

function mapStateToProps(state) {
 return {
   cart: state.cart
 };
}

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

Magasin Redux, Actions Et Réducteurs

Dans Redux, nous avons trois parties différentes:

le magasin
Détient tout l’état de votre application. La seule façon de changer d’état est de lui envoyer une action.
actes
Un objet simple qui représente une intention de changer d’état.
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];

export default function configureStore() {
    return createStore(
        RootReducer,
        applyMiddleware(...middleware)
    );
}

Ensuite, l’action produits est chargée de récupérer les produits sur le site Web distant.

export function getProducts() {
   return (dispatch) => {
       const url = `${Constants.URL.wc}products?per_page=100&consumer_key=${Constants.Keys.ConsumerKey}&consumer_secret=${Constants.Keys.ConsumerSecret}`

       return axios.get(url).then(response => {
           dispatch({
               type: types.GET_PRODUCTS_SUCCESS,
               products: response.data
           }
       )}).catch(err => {
           console.log(err.error);
       })
   };
}

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

export default function (state = InitialState.products, action) {
    switch (action.type) {
        case types.GET_PRODUCTS_SUCCESS:
            return action.products;
        default:
            return state;
    }
}

Affichage de la boutique WooCommerce

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

 

class ProductsList extends Component {

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

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

 render() {
   const { navigate } = this.props.navigation;
   const Items = (
     <FlatList contentContainerStyle={styles.list} numColumns={2}
       data={this.props.products || []} 
       keyExtractor={this._keyExtractor}
       renderItem={
         ({ item }) => (
           <TouchableHighlight style={{ width: '50%' }} onPress={() => navigate("Product", { product: item })} underlayColor="white">
             <View style={styles.view} >
               <Image style={styles.image} source={{ uri: item.images[0].src }} />
               <Text style={styles.text}>{item.name}</Text>
             </View>
           </TouchableHighlight>
         )
       }
     />
   );
   return (
     <ScrollView>
       {this.props.products.length ? Items :
         <View style={{ alignItems: 'center', justifyContent: 'center' }}>
           <Image style={styles.loader} source={LoadingAnimation} />
         </View>
       }
     </ScrollView>
   );
 }
}

this.props.ProductAction.getProducts() and this.props.products are possible because of mapStateToProps and mapDispatchToProps.

7 Products List Wide

mapStateToProps and mapDispatchToProps

State is the Redux store and Dispatch is the actions we fire. Both of these will be exposed as props in the component.

function mapStateToProps(state) {
 return {
   products: state.products
 };
}
function mapDispatchToProps(dispatch) {
 return {
   ProductAction: bindActionCreators(ProductAction, dispatch)
 };
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);

Styles

In React, Native styles are generally defined on the same page. It’s similar to CSS, but we use camelCase properties instead of hyphenated properties.

const styles = StyleSheet.create({
 list: {
   flexDirection: 'column'
 },
 view: {
   padding: 10
 },
 loader: {
   width: 200,
   height: 200,
   alignItems: 'center',
   justifyContent: 'center',
 },
 image: {
   width: 150,
   height: 150
 },
 text: {
   textAlign: 'center',
   fontSize: 20,
   padding: 5
 }
});

Single Product Page

This page contains details of a selected product. It shows the user the name, price, and description of the product. It also has the ‘Add to cart’ function.

8 Single Product Wide
Single product page. (Large preview)

Cart Page

This screen shows the list of items in the cart. The action has the functions getCart, addToCart, and removeFromCart. The reducer handles the actions likewise. Identification of actions is done through actionTypes — constants which describe the action that are stored in a separate file.

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';

This is the code for the CartPage component:

class CartPage extends React.Component {

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

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

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

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

   if (cart && cart.length > 0) {
     const Items = <FlatList contentContainerStyle={styles.list}
       data={cart}
       keyExtractor={this._keyExtractor}
       renderItem={({ item }) =>
         <View style={styles.lineItem} >
           <Image style={styles.image} source={{ uri: item.image }} />
           <Text style={styles.text}>{item.name}</Text>
           <Text style={styles.text}>{item.quantity}</Text>
           <TouchableOpacity style={{ marginLeft: 'auto' }} onPress={() => this.removeItem(item)}><Entypo name="cross" size={30} /></TouchableOpacity>
         </View>
       }
     />;
     return (
       <View style={styles.container}>
         {Items}
       </View>
     )
   } else {
     return (
       <View style={styles.container}>
         <Text>Cart is empty!</Text>
       </View>
     )
   }
 }
}

As you can see, we are using a FlatList to iterate through the cart items. It takes in an array and creates a list of items to be displayed on the screen.

# 
Gauche: page du panier contenant des articles. Droite: La page du panier quand il est vide.
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écente avec React Native;
Expo peut être utilisé pour exécuter le projet sur un smartphone.
Les technologies existantes telles que WordPress peuvent être utilisées;
Redux peut être utilisé pour gérer l’état de toute l’application.
Les développeurs Web, en particulier les développeurs de React, peuvent exploiter ces connaissances pour créer de plus grandes applications.

Pour l’application complète, vous pouvez visiter mon projet sur Github et le cloner. N’hésitez pas à le fourchir et à l’améliorer davantage. À titre d’exercice, vous pouvez continuer à intégrer davantage d’éléments au projet, tels que:

Page de paiement,
Authentification,
     Stocker les données du panier dans AsyncStorage afin que la fermeture de l’application n’efface pas le panier.

 

Lancez-vous dans une nouvelle aventure avec DoingBuzz

Que vous cherchiez à avancer dans votre carrière ou à élargir vos horizons académiques, DoingBuzz est là pour vous. Découvrez une multitude d'offres d'emploi et de bourses d'études adaptées à votre parcours.

doingbuzz DIRECT

Cet article est réservé aux abonnés. Déjà abonné ?

Enquêtes, interviews, analyses…

Abonnez-vous et accédez à tous nos articles en illimité !