Creazione di app mobili utilizzando React Native e WordPress

Come sviluppatori web, potresti aver pensato che lo sviluppo di app mobili richieda una nuova curva di apprendimento con un altro linguaggio di programmazione. Forse Java e Swift devono essere aggiunti al tuo set di abilità per iniziare a correre sia con iOS che con Android, e questo potrebbe impantanarti.

Ma questo articolo ti riserva una sorpresa! Vedremo la creazione di un'applicazione di e-commerce per iOS e Android utilizzando la piattaforma WooCommerce come backend. Questo sarebbe un punto di partenza ideale per chiunque voglia entrare nello sviluppo nativo multipiattaforma.

Una breve storia di sviluppo multipiattaforma

Siamo nel 2011 e assistiamo all'inizio dello sviluppo di app mobili ibride. Framework come Apache Cordova, PhoneGap e Ionic Framework emergono lentamente. Tutto sembra a posto e gli sviluppatori web codificano con entusiasmo le app mobili con le loro conoscenze esistenti.

Tuttavia, le app mobili sembravano ancora versioni mobili dei siti Web. Nessun design nativo come il design dei materiali di Android o l'aspetto piatto di iOS. La navigazione funzionava in modo simile al Web e le transizioni non erano fluide. Gli utenti non erano soddisfatti delle app create utilizzando l'approccio ibrido e sognavano l'esperienza nativa.

Avanti veloce fino a marzo 2015 e React Native appare sulla scena. Gli sviluppatori sono in grado di creare applicazioni multipiattaforma veramente native utilizzando React, una libreria JavaScript preferita da molti sviluppatori. Ora sono facilmente in grado di apprendere una piccola libreria in aggiunta a ciò che sanno con JavaScript. Con questa conoscenza, gli sviluppatori ora prendono di mira il Web, iOS e Android.

Inoltre, le modifiche apportate al codice durante lo sviluppo vengono caricate sui dispositivi di test quasi istantaneamente! Ciò richiedeva diversi minuti quando avevamo lo sviluppo nativo attraverso altri approcci. Gli sviluppatori possono godere del feedback istantaneo che amavano nello sviluppo web.

Gli sviluppatori di React sono più che felici di poter utilizzare i modelli esistenti che hanno seguito in una nuova piattaforma del tutto. In effetti, stanno prendendo di mira altre due piattaforme con ciò che già conoscono molto bene.

Tutto questo va bene per lo sviluppo front-end. Ma quali scelte abbiamo per la tecnologia back-end? Dobbiamo ancora imparare una nuova lingua o struttura?

L'API REST di WordPress

Alla fine del 2016, WordPress ha rilasciato la tanto attesa API REST al suo interno e ha aperto le porte a soluzioni con backend disaccoppiati.

Quindi, se hai già un sito Web WordPress e WooCommerce e desideri mantenere esattamente le stesse offerte e profili utente sul tuo sito Web e sull'app nativa, questo articolo è per te!

Assunzioni fatte in questo articolo

Ti guiderò attraverso l'utilizzo delle tue abilità WordPress per creare un'app mobile con un negozio WooCommerce usando React Native. L'articolo presuppone:

• Hai familiarità con le diverse API di WordPress, almeno a livello principiante.
• Hai familiarità con le basi di React.
• Hai un server di sviluppo WordPress pronto. Uso Ubuntu con Apache.
• Hai un dispositivo Android o iOS da testare con Expo.

Cosa costruiremo in questo tutorial

Il progetto che creeremo attraverso questo articolo è un'app di un negozio di moda. L'app avrà le seguenti funzionalità:

• Pagina del negozio che elenca tutti i prodotti,
• Singola pagina prodotto con i dettagli dell'articolo selezionato,
• funzione "Aggiungi al carrello",
• Funzione "Mostra articoli nel carrello",
• Funzione "Rimuovi articolo dal carrello".

Questo articolo mira a ispirarti a utilizzare questo progetto come punto di partenza per creare app mobili complesse utilizzando React Native.

Nota : per l'applicazione completa, puoi visitare il mio progetto su Github e clonarlo .

Iniziare con il nostro progetto

Inizieremo a creare l'app secondo la documentazione ufficiale di React Native. Dopo aver installato Node nel tuo ambiente di sviluppo, apri il prompt dei comandi e digita il comando seguente per installare l'app Create React Native a livello globale.

 npm install -g create-react-native-app

Successivamente, possiamo creare il nostro progetto

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

Questo creerà un nuovo progetto React Native che possiamo testare con Expo.

Successivamente, dovremo installare l'app Expo sul nostro dispositivo mobile che vogliamo testare. È disponibile sia per iOS che per Android.

Dopo aver installato l'app Expo, possiamo eseguire npm start sulla nostra macchina di sviluppo.

 cd react-native-woocommerce-store npm start

Successivamente, puoi scansionare il codice QR tramite l'app Expo o inserire l'URL specificato nella barra di ricerca dell'app. Questo eseguirà l'app di base "Hello World" nel dispositivo mobile. Ora possiamo modificare App.js per apportare modifiche istantanee all'app in esecuzione sul telefono.

In alternativa, puoi eseguire l'app su un emulatore. Ma per brevità e precisione, tratteremo l'esecuzione su un dispositivo reale.

Quindi, installiamo tutti i pacchetti richiesti per l'app usando questo comando:

 npm install -s axios react-native-htmlview react-navigation react-redux redux redux-thunk

Configurazione di un sito WordPress

Poiché questo articolo riguarda la creazione di un'app React Native, non entreremo nei dettagli sulla creazione di un sito WordPress. Si prega di fare riferimento a questo articolo su come installare WordPress su Ubuntu. Poiché l'API REST di WooCommerce richiede HTTPS, assicurati che sia configurato utilizzando Let's Encrypt. Si prega di fare riferimento a questo articolo per una guida pratica.

Non stiamo creando un'installazione di WordPress su localhost poiché eseguiremo l'app su un dispositivo mobile e anche poiché è necessario HTTPS.

Una volta che WordPress e HTTPS sono stati impostati correttamente, possiamo installare il plug-in WooCommerce sul sito.

Dopo aver installato e attivato il plugin, continua con la configurazione del negozio WooCommerce seguendo la procedura guidata. Al termine della procedura guidata, fai clic su "Torna al dashboard".

Sarai accolto da un altro messaggio.

Fai clic su "Andiamo" su "Aggiungi prodotti di esempio". Questo ci farà risparmiare tempo per creare i nostri prodotti da visualizzare nell'app.

File delle costanti

Per caricare i prodotti del nostro negozio dall'API REST di WooCommerce, abbiamo bisogno delle chiavi pertinenti all'interno della nostra app. A questo scopo, possiamo avere un file constans.js .

Per prima cosa crea una cartella chiamata 'src' e crea le sottocartelle all'interno come segue:

Ora, generiamo le chiavi per WooCommerce. Nella dashboard di WordPress, vai su WooCommerce → Impostazioni → API → Chiavi/App e fai clic su "Aggiungi chiave".

Quindi crea una chiave di sola lettura con il nome React Native. Copia la chiave del consumatore e il segreto del consumatore nel file constants.js come segue:

 const Constants = { URL: { wc: 'https://woocommerce-store.on-its-way.com/wp-json/wc/v2/' }, Keys: { ConsumerKey: 'CONSUMER_KEY_HERE', ConsumerSecret: 'CONSUMER_SECRET_HERE' } } export default Constants;

A partire da React Navigation

React Navigation è una soluzione comunitaria per la navigazione tra le diverse schermate ed è una libreria autonoma. Consente agli sviluppatori di configurare gli schermi dell'app React Native con poche righe di codice.

Esistono diversi metodi di navigazione all'interno di React Navigation:

• Pila,
• Interruttore,
• schede,
• Cassetto,
• e altro ancora.

Per la nostra applicazione utilizzeremo una combinazione di StackNavigation e DrawerNavigation per navigare tra le diverse schermate. StackNavigation è simile a come funziona la cronologia del browser sul Web. Lo stiamo usando poiché fornisce un'interfaccia per l'intestazione e le icone di navigazione dell'intestazione. Ha push e pop simili agli stack nelle strutture dati. Push significa che aggiungiamo una nuova schermata in cima allo Stack di navigazione. Pop rimuove uno schermo dalla pila.

Il codice mostra che StackNavigation , infatti, ospita DrawerNavigation al suo interno. Prende anche le proprietà per lo stile dell'intestazione e i pulsanti dell'intestazione. Stiamo posizionando il pulsante del cassetto di navigazione a sinistra e il pulsante del carrello a destra. Il pulsante del cassetto accende e spegne il cassetto mentre il pulsante del carrello porta l'utente alla schermata del carrello.

 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> );  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 prevede il cassetto laterale che ci permetterà di navigare tra Home, Shop e Cart. Il DrawerNavigator elenca le diverse schermate che l'utente può visitare, ovvero Home page, Pagina Prodotti, Pagina Prodotto e Pagina Carrello. Ha anche una proprietà che prenderà il contenitore del cassetto: il menu a scorrimento che si apre quando si fa clic sul menu dell'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 }); 

Iniezione di Redux Store su App.js

Dal momento che stiamo usando Redux in questa app, dobbiamo iniettare lo store nella nostra app. Lo facciamo con l'aiuto del componente Provider .

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

Avremo quindi un componente ConnectedApp in modo da poter avere il conteggio del carrello nell'intestazione.

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

Redux Store, azioni e riduttori

In Redux abbiamo tre parti diverse:

1. Negozio
   Mantiene l'intero stato dell'intera applicazione. L'unico modo per cambiare stato è inviargli un'azione.
2. Azioni
   Un semplice oggetto che rappresenta l'intenzione di cambiare lo stato.
3. Riduttori
   Una funzione che accetta uno stato e un tipo di azione e restituisce un nuovo stato.

Questi tre componenti di Redux ci aiutano a raggiungere uno stato prevedibile per l'intera app. Per semplicità, esamineremo come i prodotti vengono recuperati e salvati nel negozio Redux.

Prima di tutto, diamo un'occhiata al codice per la creazione del negozio:

 let middleware = [thunk]; export default function configureStore() { return createStore( RootReducer, applyMiddleware(...middleware) ); }

Successivamente, l'azione sui prodotti è responsabile del recupero dei prodotti dal sito Web remoto.

 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); }) }; }

Il riduttore di prodotti è responsabile della restituzione del carico utile dei dati e della necessità di modificarlo.

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

Visualizzazione del negozio WooCommerce

Il file products.js è la nostra pagina Shop. Fondamentalmente mostra l'elenco dei prodotti di 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() e this.props.products sono possibili grazie a mapStateToProps e mapDispatchToProps .

mapStateToProps e mapDispatchToProps

Lo stato è il negozio Redux e Dispatch sono le azioni che attiviamo. Entrambi saranno esposti come oggetti di scena nel componente.

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

Stili

In React, gli stili nativi sono generalmente definiti sulla stessa pagina. È simile a CSS, ma usiamo le proprietà camelCase invece delle proprietà con trattino.

 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 } });

Pagina del singolo prodotto

Questa pagina contiene i dettagli di un prodotto selezionato. Mostra all'utente il nome, il prezzo e la descrizione del prodotto. Ha anche la funzione "Aggiungi al carrello".

Pagina del carrello

Questa schermata mostra l'elenco degli articoli nel carrello. L'azione ha le funzioni getCart , addToCart e removeFromCart . Il riduttore gestisce le azioni allo stesso modo. L'identificazione delle azioni avviene tramite actionTypes — costanti che descrivono l'azione memorizzata in un file separato.

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

Questo è il codice per il componente CartPage :

 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> ) } } }

Come puoi vedere, stiamo usando una FlatList per scorrere gli articoli del carrello. Accetta un array e crea un elenco di elementi da visualizzare sullo schermo.

Conclusione

Puoi configurare informazioni sull'app come nome e icona nel file app.json . L'app può essere pubblicata dopo l'installazione di npm exp.

Per riassumere:

• Ora abbiamo un'applicazione di e-commerce decente con React Native;
• Expo può essere utilizzato per eseguire il progetto su uno smartphone;
• È possibile utilizzare le tecnologie di back-end esistenti come WordPress;
• Redux può essere utilizzato per gestire lo stato dell'intera app;
• Gli sviluppatori Web, in particolare gli sviluppatori React, possono sfruttare questa conoscenza per creare app più grandi.

Per l'applicazione completa, puoi visitare il mio progetto su Github e clonarlo. Sentiti libero di biforcarlo e migliorarlo ulteriormente. Come esercizio, puoi continuare a creare più funzionalità nel progetto come:

• Pagina di pagamento,
• Autenticazione,
• Memorizzazione dei dati del carrello in AsyncStorage in modo che la chiusura dell'app non cancelli il carrello.