Byg Kraftfulde Mobilapps med React Native & WordPress

Som webudviklere har mange af os sikkert tænkt, at mobilappudvikling kræver en helt ny indlæringskurve med et andet programmeringssprog. Måske skal Java og Swift føjes til dit færdighedssæt for at komme i gang med både iOS og Android, og det kan virke uoverskueligt. Men hvad nu hvis vi fortalte dig, at du kan bygge native mobile apps ved at genbruge dine eksisterende færdigheder inden for WordPress og JavaScript? Denne artikel vil overraske dig og vise vejen til at skabe en fuldt funktionel e-handelsapp til iOS og Android ved at bruge WooCommerce-platformen som dit backend-system. Dette er et ideelt udgangspunkt for alle, der ønsker at kaste sig ud i native cross-platform udvikling.

WordPress som Backend for Mobilapps: En Banebrydende Kombination

WordPress er kendt som verdens mest populære CMS (Content Management System) og driver en enorm del af internettet. Men dets potentiale strækker sig langt ud over traditionelle hjemmesider. Med introduktionen af WordPress REST API'et i slutningen af 2016 åbnede WordPress dørene for løsninger med afkoblede backends. Dette betyder, at du kan bruge WordPress til at håndtere dit indhold, dine produkter og dine brugerdata, mens en separat frontend – i dette tilfælde en mobilapp bygget med React Native – præsenterer disse data for brugeren.

Hvis du allerede har en WordPress- og WooCommerce-hjemmeside og ønsker at bevare præcis de samme tilbud og brugerprofiler på tværs af din hjemmeside og native app, så er denne tilgang perfekt for dig. Det sparer tid og ressourcer, da du ikke skal opbygge en helt ny backend fra bunden. WordPress, især i kombination med WooCommerce, kan fungere som en fremragende backend-platform for din næste native app, især hvis den er indholdsdrevet eller en onlinebutik.

En Kort Historie om Cross-Platform Udvikling

I 2011 så vi begyndelsen på hybrid mobilappudvikling. Frameworks som Apache Cordova, PhoneGap og Ionic Framework dukkede langsomt op. Alt så godt ud, og webudviklere kodede ivrigt mobilapps med deres eksisterende viden. Dog lignede mobilapps stadig mobile versioner af hjemmesider. Der var ingen native designs som Androids Material Design eller iOS's flade look. Navigation fungerede ligesom på nettet, og overgange var ikke smørbløde. Brugere var ikke tilfredse med apps bygget med den hybride tilgang og drømte om den native oplevelse.

Spol frem til marts 2015, og React Native dukker op på scenen. Udviklere er nu i stand til at bygge ægte native cross-platform applikationer ved hjælp af React, et foretrukket JavaScript-bibliotek for mange udviklere. De kan nu nemt lære et lille bibliotek ud over det, de allerede kender med JavaScript. Med denne viden målretter udviklere nu både web, iOS og Android. Desuden indlæses ændringer i koden under udviklingen næsten øjeblikkeligt på testenhederne! Dette plejede at tage flere minutter, når vi havde native udvikling gennem andre tilgange. Udviklere kan nyde den øjeblikkelige feedback, de elskede ved webudvikling.

Hybrid vs. Native vs. React Native: Hvad skal man vælge?

For at give et klarere billede af fordelene ved React Native, lad os sammenligne de forskellige tilgange til mobilappudvikling:

Forudsætninger for at Komme i Gang

For at følge med i denne guide og bygge din egen app, antages det, at du har en grundlæggende forståelse af følgende:

• Du er bekendt med de forskellige WordPress API'er, i det mindste på begynderniveau.
• Du er bekendt med grundlæggende React-koncepter.
• Du har en WordPress udviklingsserver klar. Det er vigtigt, at den understøtter HTTPS, da WooCommerce REST API'et kræver dette. En lokal installation er ikke ideel, da appen skal køre på en mobil enhed.
• Du har en Android- eller iOS-enhed til at teste med Expo.

Hvad Vi Vil Bygge i Denne Guide

Projektet, vi vil bygge gennem denne artikel, er en modebutiksapp. Appen vil have følgende funktionaliteter:

• Butiksside med en liste over alle produkter.
• Enkelt produktside med detaljer om det valgte element.
• 'Tilføj til kurv'-funktion.
• 'Vis varer i kurv'-funktion.
• 'Fjern vare fra kurv'-funktion.

Denne artikel har til formål at inspirere dig til at bruge dette projekt som et udgangspunkt for at bygge komplekse mobilapps ved hjælp af React Native.

Kom i Gang med Vores Projekt

Vi starter med at bygge appen i henhold til den officielle React Native-dokumentation. Efter at have installeret Node på dit udviklingsmiljø, åbner du kommandoprompten og skriver følgende kommando for at installere Create React Native App globalt:

npm install -g create-react-native-app

Dernæst kan vi oprette vores projekt:

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

Dette vil oprette et nyt React Native-projekt, som vi kan teste med Expo. Derefter skal vi installere Expo-appen på vores mobile enhed, som vi ønsker at teste. Den er tilgængelig for både iOS og Android.

Når Expo-appen er installeret, kan vi køre npm start på vores udviklingsmaskine:

cd react-native-woocommerce-store npm start

Efter dette kan du scanne QR-koden via Expo-appen eller indtaste den angivne URL i appens søgefelt. Dette vil køre den grundlæggende 'Hello World'-app på mobilen. Vi kan nu redigere App.js for at foretage øjeblikkelige ændringer i appen, der kører på telefonen. Alternativt kan du køre appen på en emulator, men for kortheds skyld og nøjagtighed vil vi dække kørsel på en faktisk enhed.

Dernæst skal vi installere alle de nødvendige pakker til appen ved hjælp af denne kommando:

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

Opsætning af en WordPress-side

Da denne artikel handler om at skabe en React Native-app, går vi ikke i detaljer om at oprette en WordPress-side. Det er dog afgørende, at din WordPress-installation er sat op med HTTPS, da WooCommerce REST API'et kræver dette. En standard lokalhost-installation er ikke tilstrækkelig, da appen kører på en mobil enhed.

Når WordPress og HTTPS er succesfuldt sat op, kan vi installere WooCommerce-plugin'et på siden. Efter installation og aktivering af plugin'et skal du fortsætte med WooCommerce-butiksopsætningen ved at følge guiden. Når guiden er afsluttet, klikker du på 'Vend tilbage til dashboard'. Du vil blive mødt af en anden prompt, hvor du kan tilføje eksempelprodukter. Klik på 'Lad os komme i gang' for at 'Tilføje eksempelprodukter'. Dette vil spare os tid med at oprette vores egne produkter til visning i appen.

Konstantfilen

For at indlæse vores butiks produkter fra WooCommerce REST API'et, skal vi have de relevante nøgler på plads i vores app. Til dette formål kan vi have en constants.js-fil. Først opretter du en mappe kaldet 'src' og opretter undermapper indenfor som følger:

src/ ├── components/ ├── constants/ │ └── Constants.js ├── redux/ │ ├── actions/ │ ├── reducers/ │ └── store/ └── screens/

Nu skal vi generere nøglerne til WooCommerce. I WordPress-dashboardet navigerer du til WooCommerce → Indstillinger → API → Nøgler/Apps og klikker på 'Tilføj nøgle'. Dernæst opretter du en 'Læse-kun'-nøgle (Read Only) med navnet 'React Native'. Kopiér 'Consumer Key' og 'Consumer Secret' til constants.js-filen som følger:

const Constants = { URL: { wc: 'https://din-woocommerce-butik.com/wp-json/wc/v2/' }, Keys: { ConsumerKey: 'DIN_CONSUMER_KEY_HER', ConsumerSecret: 'DIN_CONSUMER_SECRET_HER' } } export default Constants;

Husk at erstatte 'https://din-woocommerce-butik.com/' med din faktiske butiks URL og 'DIN_CONSUMER_KEY_HER' og 'DIN_CONSUMER_SECRET_HER' med de nøgler, du har genereret.

Introduktion til React Navigation

React Navigation er en fællesskabsløsning til navigation mellem de forskellige skærme i en React Native-app og er et selvstændigt bibliotek. Det giver udviklere mulighed for at opsætte appens skærme med blot få linjer kode. Der er forskellige navigationsmetoder inden for React Navigation, herunder Stack, Switch, Tabs, Drawer og mere.

For vores applikation vil vi bruge en kombination af StackNavigator og DrawerNavigator til at navigere mellem de forskellige skærme. StackNavigator ligner den måde, browserhistorik fungerer på på nettet. Vi bruger dette, da det giver en grænseflade til headeren og headerens navigationsikoner. Den har push og pop ligesom stakke i datastrukturer. Push betyder, at vi tilføjer en ny skærm øverst i navigationsstakken. Pop fjerner en skærm fra stakken.

Koden viser, at StackNavigator faktisk rummer DrawerNavigator inden i sig selv. Den tager også egenskaber for header-stilen og header-knapperne. Vi placerer navigationsskuffeknappen til venstre og indkøbskurvsknappen til højre. Skuffeknappen tænder og slukker for skuffen, mens kurvknappen fører brugeren til indkøbskurvskærmen.

DrawerNavigator giver derimod den sidedrager, som giver os mulighed for at navigere mellem Hjem, Butik og Kurv. DrawerNavigator lister de forskellige skærme, som brugeren kan besøge, nemlig Hjemmeside, Produkter side, Produkt side og Kurv side. Den har også en egenskab, som vil tage Drawer-containeren: den glidende menu, der åbner, når man klikker på hamburgermenuen.

Injektion af Redux Store i App.js

Da vi bruger Redux i denne app, skal vi injicere 'store' (lageret) i vores app. Dette gør vi ved hjælp af Provider-komponenten. Redux er et populært state management-bibliotek, der hjælper med at håndtere applikationens tilstand på en forudsigelig måde, især nyttigt i større applikationer.

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

Vi vil derefter have en ConnectedApp-komponent, så vi kan have kurvantallet i headeren:

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, Actions og Reducers

I Redux har vi tre forskellige dele, der arbejder sammen for at opnå en forudsigelig tilstand for hele appen:

1. Store: Indeholder hele tilstanden for din applikation. Den eneste måde at ændre tilstand på er at 'dispatch' en handling til den.
2. Actions: Et simpelt objekt, der repræsenterer en intention om at ændre tilstanden.
3. Reducers: En funktion, der accepterer en tilstand og en handlingstype og returnerer en ny tilstand.

For enkelhedens skyld vil vi se på, hvordan produkterne hentes og gemmes i Redux-lageret. Først og fremmest, lad os se på koden til oprettelse af lageret:

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

Dernæst er produktionshandlingen ansvarlig for at hente produkterne fra fjernwebstedet:

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

Produkt-reduceren er ansvarlig for at returnere datamængden, og om den skal modificeres:

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

Visning af WooCommerce-butikken

Filen products.js er vores butiksside. Den viser grundlæggende listen over produkter fra WooCommerce. Vi bruger en FlatList til at vise produkterne effektivt, især når der er mange af dem. Hvert produkt er en TouchableHighlight, der gør det muligt at navigere til en enkelt produktside, når der klikkes på det.

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() og this.props.products er mulige på grund af mapStateToProps og mapDispatchToProps.

mapStateToProps og mapDispatchToProps

State er Redux-lageret, og Dispatch er de handlinger, vi udløser. Begge vil blive eksponeret som props i komponenten. Dette mønster er centralt for at forbinde React-komponenter med Redux-lageret og sikre, at komponenterne har adgang til de nødvendige data og kan udløse ændringer i tilstanden.

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

Stilarter i React Native

I React Native defineres stilarter generelt på samme side. Det ligner CSS, men vi bruger camelCase-egenskaber i stedet for bindestregede egenskaber. Dette sikrer, at stilarterne er isolerede til komponenten og let kan administreres. For eksempel:

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

Enkelt Produktside

Denne side indeholder detaljer om et valgt produkt. Den viser brugeren produktets navn, pris og beskrivelse. Den har også funktionen 'Tilføj til kurv', som udløser en Redux-handling for at opdatere kurvens tilstand.

Kurvside

Denne skærm viser listen over varer i kurven. Handlingen har funktionerne getCart, addToCart og removeFromCart. Reducer'en håndterer handlingerne tilsvarende. Identifikation af handlinger sker gennem actionTypes – konstanter, der beskriver handlingen, som er gemt i en separat fil. Eksempelvis:

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

Dette er koden for CartPage-komponenten:

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>Kurven er tom!</Text> </View> ) } } } 

Som du kan se, bruger vi en FlatList til at iterere gennem kurvens varer. Den tager en array og opretter en liste over varer, der skal vises på skærmen.

Ofte Stillede Spørgsmål (FAQ)

Er WordPress en god backend-platform for mobilapps?

Ja, absolut! WordPress, især i kombination med WooCommerce og dets REST API, er en fremragende backend for indholdsdrevne apps, e-handelsapps og apps, der kræver brugermanagement. Det giver dig mulighed for at genbruge eksisterende data og færdigheder.

Hvordan administrerer jeg mobilapps i WordPress?

Du kan administrere mange aspekter af dine apps direkte gennem WordPress. Med de rette plugins kan du sende push-notifikationer og styre appens konfiguration fra et simpelt dashboard i dit WordPress admin-område. Dette centraliserede kontrolpanel gør det nemt at opdatere indhold og funktioner uden at skulle redeploye appen hver gang.

Hvorfor skal jeg vælge React Native frem for andre cross-platform frameworks?

React Native tilbyder en fremragende balance mellem udviklingshastighed og native ydeevne og udseende. Det bruger ægte native UI-komponenter, hvilket giver en bedre brugeroplevelse sammenlignet med ældre hybrid-frameworks. Desuden kan webudviklere med React-erfaring hurtigt komme i gang.

Hvilke sikkerhedsforanstaltninger skal jeg tage, når jeg bruger WordPress som backend for en mobilapp?

Det er afgørende at sikre din WordPress-installation. Brug altid HTTPS, stærke adgangskoder, regelmæssige opdateringer, og begræns API-nøgler til kun de nødvendige tilladelser (f.eks. 'Læse-kun' for produktvisning). Overvej at bruge OAuth til mere robust godkendelse, hvis din app kræver brugerlogin og følsomme handlinger.

Kan jeg bruge andre WordPress-plugins med min React Native app?

Det afhænger af plugin'et. Hvis et plugin udstiller sine data via WordPress REST API'et, kan du sandsynligvis interagere med det. Mange populære plugins har REST API-endpoints, men for specialiserede funktioner skal du muligvis skrive brugerdefineret kode for at hente og vise dataene i din app.

Konklusion

Vi har nu en anstændig e-handelsapplikation bygget med React Native, der udnytter styrken fra WordPress og WooCommerce som backend. Denne tilgang giver webudviklere, især dem med React-erfaring, en fantastisk mulighed for at træde ind i mobiludviklingens verden uden at skulle starte helt forfra. Expo kan bruges til at køre projektet på en smartphone, hvilket strømliner testprocessen betydeligt.

For at opsummere:

• Vi har demonstreret, hvordan man bygger en funktionel e-handelsapp med React Native.
• Expo kan bruges til at køre projektet på en smartphone for hurtig test og iteration.
• Eksisterende backend-teknologier som WordPress kan bruges effektivt.
• Redux kan bruges til at administrere tilstanden for hele appen på en forudsigelig måde.
• Webudviklere, især React-udviklere, kan udnytte denne viden til at bygge større og mere komplekse apps.

For den fulde applikation kan du besøge projektet på Github og klone det. Du er velkommen til at forgrene det og forbedre det yderligere. Som en øvelse kan du fortsætte med at bygge flere funktioner ind i projektet, såsom:

• En kasse-side (checkout page).
• Autentificering for brugere.
• Lagring af kurvdata i AsyncStorage, så lukning af appen ikke rydder kurven.
• Implementering af push-notifikationer for ordrestatus eller nye tilbud.
• Tilføjelse af søgefunktionalitet for produkter.

Dette er blot begyndelsen på, hvad der er muligt, når du kombinerer den fleksible backend fra WordPress med den kraftfulde frontend fra React Native. God fornøjelse med udviklingen!

Hvis du vil læse andre artikler, der ligner Byg Kraftfulde Mobilapps med React Native & WordPress, kan du besøge kategorien Mobiludvikling.