Erstellen von mobilen Apps mit React Native und WordPress

Als Webentwickler haben Sie vielleicht gedacht, dass die Entwicklung mobiler Apps eine neue Lernkurve mit einer anderen Programmiersprache erfordert. Vielleicht müssen Java und Swift zu Ihren Fähigkeiten hinzugefügt werden, um sowohl mit iOS als auch mit Android einsatzbereit zu sein, und das könnte Sie verlangsamen.

Aber dieser Artikel überrascht Sie! Wir werden uns mit der Entwicklung einer E-Commerce-Anwendung für iOS und Android befassen, die die WooCommerce-Plattform als Backend verwendet. Dies wäre ein idealer Ausgangspunkt für alle, die bereit sind, in die native plattformübergreifende Entwicklung einzusteigen.

Eine kurze Geschichte der plattformübergreifenden Entwicklung

Wir schreiben das Jahr 2011 und wir sehen den Beginn der Entwicklung hybrider mobiler Apps. Frameworks wie Apache Cordova, PhoneGap und Ionic Framework entstehen langsam. Alles sieht gut aus und Webentwickler programmieren eifrig mobile Apps mit ihrem vorhandenen Wissen.

Mobile Apps sahen jedoch immer noch wie mobile Versionen von Websites aus. Keine nativen Designs wie das Materialdesign von Android oder der flache Look von iOS. Die Navigation funktionierte ähnlich wie im Web und die Übergänge waren nicht butterweich. Benutzer waren mit Apps, die mit dem hybriden Ansatz erstellt wurden, nicht zufrieden und träumten von der nativen Erfahrung.

Schneller Vorlauf bis März 2015, und React Native erscheint auf der Bildfläche. Entwickler können mit React, einer beliebten JavaScript-Bibliothek für viele Entwickler, wirklich native plattformübergreifende Anwendungen erstellen. Sie sind jetzt leicht in der Lage, eine kleine Bibliothek zusätzlich zu ihrem JavaScript-Wissen zu lernen. Mit diesem Wissen zielen Entwickler nun auf das Web, iOS und Android ab.

Darüber hinaus werden während der Entwicklung am Code vorgenommene Änderungen fast sofort auf die Testgeräte geladen! Früher dauerte dies mehrere Minuten, als wir eine native Entwicklung durch andere Ansätze hatten. Entwickler können das sofortige Feedback genießen, das sie früher bei der Webentwicklung geliebt haben.

React-Entwickler sind mehr als glücklich, bestehende Muster, denen sie gefolgt sind, in einer neuen Plattform zu verwenden. Tatsächlich zielen sie mit dem, was sie bereits sehr gut kennen, auf zwei weitere Plattformen ab.

Das ist alles gut für die Front-End-Entwicklung. Aber welche Möglichkeiten haben wir für die Back-End-Technologie? Müssen wir noch eine neue Sprache oder einen neuen Rahmen lernen?

Die WordPress-REST-API

Ende 2016 veröffentlichte WordPress die lang erwartete REST-API im Kern und öffnete die Türen für Lösungen mit entkoppelten Backends.

Wenn Sie also bereits eine WordPress- und WooCommerce-Website haben und genau die gleichen Angebote und Benutzerprofile auf Ihrer Website und in Ihrer nativen App beibehalten möchten, ist dieser Artikel genau das Richtige für Sie!

In diesem Artikel getroffene Annahmen

Ich werde Sie durch die Verwendung Ihrer WordPress-Fähigkeiten führen, um eine mobile App mit einem WooCommerce-Shop mit React Native zu erstellen. Der Artikel geht davon aus:

• Sie sind mit den verschiedenen WordPress-APIs zumindest auf Anfängerniveau vertraut.
• Du bist mit den Grundlagen von React vertraut.
• Sie haben einen WordPress-Entwicklungsserver bereit. Ich benutze Ubuntu mit Apache.
• Sie haben ein Android- oder iOS-Gerät zum Testen mit Expo.

Was wir in diesem Tutorial bauen werden

Das Projekt, das wir in diesem Artikel aufbauen werden, ist eine Modegeschäft-App. Die App wird die folgenden Funktionen haben:

• Shop-Seite mit allen Produkten,
• Einzelne Produktseite mit Details zum ausgewählten Artikel,
• 'In den Warenkorb'-Funktion,
• Funktion „Artikel im Warenkorb anzeigen“,
• Funktion „Artikel aus Warenkorb entfernen“.

Dieser Artikel soll Sie dazu inspirieren, dieses Projekt als Ausgangspunkt für die Erstellung komplexer mobiler Apps mit React Native zu verwenden.

Hinweis : Für die vollständige Anwendung können Sie mein Projekt auf Github besuchen und es klonen .

Erste Schritte mit unserem Projekt

Wir werden mit dem Erstellen der App gemäß der offiziellen React Native-Dokumentation beginnen. Nachdem Sie Node in Ihrer Entwicklungsumgebung installiert haben, öffnen Sie die Eingabeaufforderung und geben Sie den folgenden Befehl ein, um die Create React Native App global zu installieren.

 npm install -g create-react-native-app

Als nächstes können wir unser Projekt erstellen

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

Dadurch wird ein neues React Native-Projekt erstellt, das wir mit Expo testen können.

Als nächstes müssen wir die Expo-App auf unserem mobilen Gerät installieren, das wir testen möchten. Es ist sowohl für iOS als auch für Android verfügbar.

Nachdem wir die Expo-App installiert haben, können wir npm start auf unserem Entwicklungscomputer ausführen.

 cd react-native-woocommerce-store npm start

Danach können Sie den QR-Code über die Expo-App scannen oder die angegebene URL in die Suchleiste der App eingeben. Dadurch wird die grundlegende „Hello World“-App auf dem Handy ausgeführt. Wir können jetzt App.js bearbeiten, um sofortige Änderungen an der auf dem Telefon ausgeführten App vorzunehmen.

Alternativ können Sie die App auf einem Emulator ausführen. Aber der Kürze und Genauigkeit halber behandeln wir die Ausführung auf einem tatsächlichen Gerät.

Als Nächstes installieren wir alle erforderlichen Pakete für die App mit diesem Befehl:

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

Einrichten einer WordPress-Site

Da es in diesem Artikel um die Erstellung einer React Native-App geht, gehen wir nicht näher auf die Erstellung einer WordPress-Site ein. Bitte lesen Sie diesen Artikel zur Installation von WordPress auf Ubuntu. Da die WooCommerce-REST-API HTTPS erfordert, stellen Sie bitte sicher, dass sie mit Let’s Encrypt eingerichtet ist. Bitte lesen Sie diesen Artikel für eine Anleitung.

Wir erstellen keine WordPress-Installation auf localhost, da wir die App auf einem mobilen Gerät ausführen und auch HTTPS benötigt wird.

Sobald WordPress und HTTPS erfolgreich eingerichtet sind, können wir das WooCommerce-Plugin auf der Website installieren.

Fahren Sie nach der Installation und Aktivierung des Plugins mit der Einrichtung des WooCommerce-Shops fort, indem Sie dem Assistenten folgen. Klicken Sie nach Abschluss des Assistenten auf „Zurück zum Dashboard“.

Sie werden von einer weiteren Eingabeaufforderung begrüßt.

Klicken Sie auf 'Los geht's' zu 'Beispielprodukte hinzufügen'. Dies erspart uns die Zeit, unsere eigenen Produkte zu erstellen, die in der App angezeigt werden.

Konstantendatei

Um die Produkte unseres Shops aus der WooCommerce-REST-API zu laden, benötigen wir die entsprechenden Schlüssel in unserer App. Zu diesem Zweck können wir eine constans.js -Datei haben.

Erstellen Sie zuerst einen Ordner namens ‚src‘ und erstellen Sie darin Unterordner wie folgt:

Lassen Sie uns nun die Schlüssel für WooCommerce generieren. Navigieren Sie im WordPress-Dashboard zu WooCommerce → Einstellungen → API → Schlüssel/Apps und klicken Sie auf „Schlüssel hinzufügen“.

Erstellen Sie als Nächstes einen schreibgeschützten Schlüssel mit dem Namen React Native. Kopieren Sie den Verbraucherschlüssel und das Verbrauchergeheimnis wie folgt in die Datei constants.js :

 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;

Beginnend mit der React-Navigation

React Navigation ist eine Community-Lösung zum Navigieren zwischen den verschiedenen Bildschirmen und eine eigenständige Bibliothek. Es ermöglicht Entwicklern, die Bildschirme der React Native-App mit nur wenigen Codezeilen einzurichten.

Innerhalb von React Navigation gibt es verschiedene Navigationsmethoden:

• Stapel,
• Schalten,
• Registerkarten,
• Schublade,
• und mehr.

Für unsere Anwendung verwenden wir eine Kombination aus StackNavigation und DrawerNavigation , um zwischen den verschiedenen Bildschirmen zu navigieren. StackNavigation ähnelt der Funktionsweise des Browserverlaufs im Web. Wir verwenden dies, da es eine Schnittstelle für den Header und die Header-Navigationssymbole bietet. Es hat Push und Pop, ähnlich wie Stacks in Datenstrukturen. Push bedeutet, dass wir oben im Navigationsstapel einen neuen Bildschirm hinzufügen. Pop entfernt einen Bildschirm aus dem Stapel.

Der Code zeigt, dass die StackNavigation tatsächlich die DrawerNavigation in sich selbst enthält. Es nimmt auch Eigenschaften für den Kopfzeilenstil und die Kopfzeilenschaltflächen an. Wir platzieren den Navigationsschubladen-Button links und den Warenkorb-Button rechts. Die Schubladentaste schaltet die Schublade ein und aus, während die Warenkorbtaste den Benutzer zum Einkaufswagenbildschirm führt.

 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 stellt die seitliche Schublade bereit, mit der wir zwischen Home, Shop und Cart navigieren können. Der DrawerNavigator listet die verschiedenen Bildschirme auf, die der Benutzer besuchen kann, nämlich Homepage, Produktseite, Produktseite und Warenkorbseite. Es hat auch eine Eigenschaft, die den Drawer-Container übernimmt: das Schiebemenü, das sich öffnet, wenn man auf das Hamburger-Menü klickt.

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

Injizieren des Redux Store in App.js

Da wir in dieser App Redux verwenden, müssen wir den Store in unsere App einfügen. Wir tun dies mit Hilfe der Provider Komponente.

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

Wir haben dann eine ConnectedApp Komponente, damit wir die Anzahl der Einkaufswagen in der Kopfzeile haben können.

 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, Aktionen und Reducer

In Redux haben wir drei verschiedene Teile:

1. Speichern
   Enthält den gesamten Status Ihrer gesamten Anwendung. Die einzige Möglichkeit, den Status zu ändern, besteht darin, eine Aktion an ihn zu senden.
2. Aktionen
   Ein einfaches Objekt, das die Absicht darstellt, den Zustand zu ändern.
3. Reduzierer
   Eine Funktion, die einen Status und einen Aktionstyp akzeptiert und einen neuen Status zurückgibt.

Diese drei Komponenten von Redux helfen uns, einen vorhersagbaren Zustand für die gesamte App zu erreichen. Der Einfachheit halber schauen wir uns an, wie die Produkte im Redux Store abgerufen und gespeichert werden.

Schauen wir uns zunächst den Code zum Erstellen des Shops an:

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

Als nächstes ist die Produktaktion dafür verantwortlich, die Produkte von der Remote-Website abzurufen.

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

Der Produktreduzierer ist dafür verantwortlich, die Nutzlast von Daten zurückzugeben und festzustellen, ob sie geändert werden müssen.

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

Anzeigen des WooCommerce-Shops

Die Datei products.js ist unsere Shop-Seite. Es zeigt im Wesentlichen die Liste der Produkte von WooCommerce an.

 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() und this.props.products sind wegen mapStateToProps und mapDispatchToProps möglich.

mapStateToProps und mapDispatchToProps

State ist der Redux Store und Dispatch sind die Aktionen, die wir auslösen. Beide werden als Requisiten in der Komponente verfügbar gemacht.

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

Stile

In React werden native Stile im Allgemeinen auf derselben Seite definiert. Es ähnelt CSS, aber wir verwenden camelCase Eigenschaften anstelle von Eigenschaften mit Bindestrich.

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

Einzelne Produktseite

Diese Seite enthält Details zu einem ausgewählten Produkt. Es zeigt dem Benutzer den Namen, den Preis und die Beschreibung des Produkts. Es hat auch die Funktion "In den Warenkorb".

Warenkorb-Seite

Dieser Bildschirm zeigt die Liste der Artikel im Warenkorb. Die Aktion hat die Funktionen getCart , addToCart und removeFromCart . Der Reduzierer handhabt die Aktionen gleichermaßen. Die Identifizierung von Aktionen erfolgt über actionTypes – Konstanten, die die Aktion beschreiben und in einer separaten Datei gespeichert sind.

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

Dies ist der Code für die CartPage Komponente:

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

Wie Sie sehen können, verwenden wir eine FlatList , um die Einkaufswagenartikel zu durchlaufen. Es nimmt ein Array auf und erstellt eine Liste von Elementen, die auf dem Bildschirm angezeigt werden sollen.

Fazit

Sie können Informationen über die App wie Name und Symbol in der Datei app.json . Die App kann veröffentlicht werden, nachdem npm exp installiert hat.

Um zusammenzufassen:

• Mit React Native haben wir jetzt eine anständige E-Commerce-Anwendung;
• Expo kann verwendet werden, um das Projekt auf einem Smartphone auszuführen;
• Vorhandene Backend-Technologien wie WordPress können verwendet werden;
• Redux kann zum Verwalten des Zustands der gesamten App verwendet werden;
• Webentwickler, insbesondere React-Entwickler, können dieses Wissen nutzen, um größere Apps zu erstellen.

Für die vollständige Anwendung können Sie mein Projekt auf Github besuchen und es klonen. Fühlen Sie sich frei, es zu forken und weiter zu verbessern. Als Übung können Sie weitere Funktionen in das Projekt einbauen, wie zum Beispiel:

• Checkout-Seite,
• Authentifizierung,
• Speichern der Einkaufswagendaten in AsyncStorage, damit das Schließen der App den Einkaufswagen nicht löscht.