بناء تطبيقات الهاتف باستخدام React Native و WordPress

بصفتك مطوري ويب ، ربما كنت تعتقد أن تطوير تطبيقات الأجهزة المحمولة يستدعي منحنى تعليميًا جديدًا بلغة برمجة أخرى. ربما تحتاج إلى إضافة Java و Swift إلى مجموعة المهارات الخاصة بك لتصل إلى الأرض مع كل من iOS و Android ، وهذا قد يعيقك.

لكن هذا المقال جعلك في مفاجأة! سننظر في إنشاء تطبيق للتجارة الإلكترونية لنظامي iOS و Android باستخدام منصة WooCommerce كخلفية لدينا. ستكون هذه نقطة انطلاق مثالية لأي شخص يرغب في الدخول في تطوير الأنظمة الأساسية المشتركة.

تاريخ موجز للتطوير عبر المنصات

إنه عام 2011 ، ونرى بداية تطوير تطبيقات الأجهزة المحمولة الهجينة. تظهر أطر عمل مثل Apache Cordova و PhoneGap و Ionic Framework ببطء. يبدو كل شيء جيدًا ، ويعمل مطورو الويب بفارغ الصبر على ترميز تطبيقات الأجهزة المحمولة بمعرفتهم الحالية.

ومع ذلك ، لا تزال تطبيقات الأجهزة المحمولة تشبه إصدارات مواقع الويب للجوال. لا توجد تصميمات أصلية مثل تصميم مواد Android أو المظهر المسطح لنظام iOS. كان التنقل مشابهًا للويب ولم تكن التحولات سلسة. لم يكن المستخدمون راضين عن التطبيقات التي تم إنشاؤها باستخدام النهج الهجين وكانوا يحلمون بالتجربة الأصلية.

تقدم سريعًا حتى آذار (مارس) 2015 ، وستظهر React Native على الساحة. يستطيع المطورون إنشاء تطبيقات أصلية عبر الأنظمة الأساسية باستخدام React ، وهي مكتبة JavaScript مفضلة للعديد من المطورين. أصبحوا الآن قادرين بسهولة على تعلم مكتبة صغيرة فوق ما يعرفونه باستخدام JavaScript. مع هذه المعرفة ، يستهدف المطورون الآن الويب و iOS و Android.

علاوة على ذلك ، يتم تحميل التغييرات التي تم إجراؤها على الكود أثناء التطوير على أجهزة الاختبار على الفور تقريبًا! كان هذا يستغرق عدة دقائق عندما كان لدينا تطوير محلي من خلال مناهج أخرى. يمكن للمطورين الاستمتاع بالتعليقات الفورية التي اعتادوا أن يحبوها في تطوير الويب.

يسعد مطورو React أن يكونوا قادرين على استخدام الأنماط الحالية التي اتبعوها في نظام أساسي جديد تمامًا. في الواقع ، إنهم يستهدفون منصتين أخريين بما يعرفونه جيدًا بالفعل.

كل هذا جيد لتطوير الواجهة الأمامية. ولكن ما هي الخيارات المتاحة لدينا للتكنولوجيا الخلفية؟ هل لا يزال يتعين علينا تعلم لغة جديدة أو إطار عمل جديد؟

واجهة برمجة تطبيقات WordPress REST

في أواخر عام 2016 ، أصدر WordPress واجهة برمجة تطبيقات REST التي طال انتظارها في جوهرها ، وفتحت الأبواب أمام الحلول ذات الخلفيات الخلفية المنفصلة.

لذلك ، إذا كان لديك بالفعل موقع ويب WordPress و WooCommerce وترغب في الاحتفاظ بنفس العروض وملفات تعريف المستخدمين عبر موقع الويب والتطبيق الأصلي ، فهذه المقالة مناسبة لك!

الافتراضات الواردة في هذه المادة

سوف أطلعك على استخدام مهارتك في WordPress لإنشاء تطبيق جوال باستخدام متجر WooCommerce باستخدام React Native. يفترض المقال:

• أنت معتاد على واجهات برمجة تطبيقات WordPress المختلفة ، على الأقل على مستوى المبتدئين.
• أنت على دراية بأساسيات React.
• لديك خادم تطوير WordPress جاهز. أنا أستخدم Ubuntu مع Apache.
• لديك جهاز Android أو iOS للاختبار مع Expo.

ما سنقوم ببنائه في هذا البرنامج التعليمي

المشروع الذي سنقوم ببنائه من خلال هذه المقالة هو تطبيق متجر أزياء. سيكون للتطبيق الوظائف التالية:

• صفحة متجر تسرد جميع المنتجات ،
• صفحة منتج واحدة مع تفاصيل العنصر المحدد ،
• ميزة "إضافة إلى عربة التسوق" ،
• ميزة "إظهار العناصر في عربة التسوق" ،
• ميزة "إزالة العنصر من سلة التسوق".

تهدف هذه المقالة إلى إلهامك لاستخدام هذا المشروع كنقطة انطلاق لبناء تطبيقات محمولة معقدة باستخدام React Native.

ملاحظة : للحصول على التطبيق الكامل ، يمكنك زيارة مشروعي على Github واستنساخه .

البدء بمشروعنا

سنبدأ في بناء التطبيق وفقًا لوثائق React Native الرسمية. بعد تثبيت Node على بيئة التطوير الخاصة بك ، افتح موجه الأوامر واكتب الأمر التالي لتثبيت تطبيق Create React Native بشكل عام.

 npm install -g create-react-native-app

بعد ذلك ، يمكننا إنشاء مشروعنا

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

سيؤدي هذا إلى إنشاء مشروع React Native جديد يمكننا اختباره مع Expo.

بعد ذلك ، سنحتاج إلى تثبيت تطبيق Expo على أجهزتنا المحمولة التي نريد اختبارها. إنه متاح لكل من iOS و Android.

عند تثبيت تطبيق Expo ، يمكننا تشغيل npm start على جهاز التطوير الخاص بنا.

 cd react-native-woocommerce-store npm start

بعد ذلك ، يمكنك مسح رمز الاستجابة السريعة ضوئيًا من خلال تطبيق Expo أو إدخال عنوان URL المحدد في شريط بحث التطبيق. سيؤدي هذا إلى تشغيل تطبيق "Hello World" الأساسي في الهاتف المحمول. يمكننا الآن تعديل App.js لإجراء تغييرات فورية على التطبيق الذي يعمل على الهاتف.

بدلاً من ذلك ، يمكنك تشغيل التطبيق على محاكي. ولكن للإيجاز والدقة ، سنغطي تشغيله على جهاز حقيقي.

بعد ذلك ، دعنا نثبت جميع الحزم المطلوبة للتطبيق باستخدام هذا الأمر:

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

إنشاء موقع WordPress

نظرًا لأن هذه المقالة تتعلق بإنشاء تطبيق React Native ، فلن ندخل في تفاصيل حول إنشاء موقع WordPress. يرجى الرجوع إلى هذه المقالة حول كيفية تثبيت WordPress على Ubuntu. نظرًا لأن WooCommerce REST API يتطلب HTTPS ، يرجى التأكد من إعداده باستخدام Let's Encrypt. يرجى الرجوع إلى هذه المقالة للحصول على دليل إرشادي.

نحن لا ننشئ تثبيت WordPress على مضيف محلي لأننا سنقوم بتشغيل التطبيق على جهاز محمول ، وأيضًا نظرًا لأن HTTPS مطلوب.

بمجرد إعداد WordPress و HTTPS بنجاح ، يمكننا تثبيت المكون الإضافي WooCommerce على الموقع.

بعد تثبيت البرنامج المساعد وتنشيطه ، تابع إعداد متجر WooCommerce باتباع المعالج. بعد اكتمال المعالج ، انقر فوق "الرجوع إلى لوحة القيادة".

سيتم الترحيب بك من قبل موجه آخر.

انقر فوق "دعنا نذهب" إلى "إضافة أمثلة على المنتجات". سيوفر لنا هذا الوقت لإنشاء منتجاتنا الخاصة لعرضها في التطبيق.

ملف الثوابت

لتحميل منتجات متجرنا من WooCommerce REST API ، نحتاج إلى المفاتيح ذات الصلة الموجودة داخل تطبيقنا. لهذا الغرض ، يمكننا الحصول على ملف constans.js .

أنشئ أولاً مجلدًا باسم "src" وأنشئ مجلدات فرعية بالداخل على النحو التالي:

الآن ، دعنا ننشئ مفاتيح WooCommerce. في لوحة معلومات WordPress ، انتقل إلى WooCommerce → Settings → API → Keys / Apps وانقر فوق "Add Key".

بعد ذلك ، قم بإنشاء مفتاح للقراءة فقط بالاسم React Native. انسخ مفتاح المستهلك وسر المستهلك إلى ملف 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;

بدءًا من React Navigation

React Navigation هو حل مجتمعي للتنقل بين الشاشات المختلفة وهو مكتبة قائمة بذاتها. يسمح للمطورين بإعداد شاشات تطبيق React Native ببضعة سطور من التعليمات البرمجية.

توجد طرق تنقل مختلفة في React Navigation:

• كومة،
• مفتاح كهربائي،
• نوافذ التبويب،
• الدرج،
• و اكثر.

بالنسبة لتطبيقنا ، سنستخدم مزيجًا من StackNavigation و DrawerNavigation للتنقل بين الشاشات المختلفة. StackNavigation مشابه لكيفية عمل سجل المتصفح على الويب. نحن نستخدم هذا لأنه يوفر واجهة للرأس وأيقونات التنقل في الرأس. لديها دفع وانبثاق مشابه للمكدسات في هياكل البيانات. يعني الدفع أننا نضيف شاشة جديدة إلى الجزء العلوي من Navigation Stack. يزيل Pop شاشة من المكدس.

يوضح الكود أن StackNavigation ، في الواقع ، يضم DrawerNavigation داخل نفسه. يأخذ أيضًا خصائص نمط الرأس وأزرار الرأس. نحن نضع زر درج التنقل على اليسار وزر عربة التسوق على اليمين. يقوم زر الدرج بتشغيل وإيقاف الدرج بينما ينقل زر عربة التسوق المستخدم إلى شاشة عربة التسوق.

 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 على الأيدي الأخرى الدرج الجانبي الذي سيسمح لنا بالتنقل بين المنزل والمتجر والعربة. يسرد DrawerNavigator الشاشات المختلفة التي يمكن للمستخدم زيارتها ، وهي الصفحة الرئيسية وصفحة المنتجات وصفحة المنتج وصفحة عربة التسوق. كما أن لديها خاصية تأخذ حاوية الدرج: القائمة المنزلقة التي تفتح عند النقر فوق قائمة الهامبرغر.

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

حقن متجر Redux في App.js

نظرًا لأننا نستخدم Redux في هذا التطبيق ، يتعين علينا حقن المتجر في تطبيقنا. نقوم بذلك بمساعدة مكون Provider .

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

سيكون لدينا بعد ذلك مكون ConnectedApp حتى نتمكن من الحصول على عدد سلة التسوق في العنوان.

 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 ، لدينا ثلاثة أجزاء مختلفة:

1. متجر
   يحمل الحالة الكاملة لتطبيقك بالكامل. الطريقة الوحيدة لتغيير الحالة هي إرسال إجراء إليها.
2. أجراءات
   كائن عادي يمثل نية لتغيير الحالة.
3. مخفضات
   دالة تقبل حالة ونوع إجراء وتعيد حالة جديدة.

تساعدنا هذه المكونات الثلاثة لـ Redux في تحقيق حالة يمكن التنبؤ بها للتطبيق بأكمله. للتبسيط ، سننظر في كيفية جلب المنتجات وحفظها في متجر Redux.

بادئ ذي بدء ، دعنا نلقي نظرة على الكود الخاص بإنشاء المتجر:

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

بعد ذلك ، يكون إجراء المنتجات مسؤولاً عن جلب المنتجات من موقع الويب البعيد.

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

مخفض المنتجات مسؤول عن إعادة الحمولة الصافية للبيانات وما إذا كانت بحاجة إلى التعديل.

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

عرض متجر WooCommerce

ملف products.js هو صفحة المتجر الخاصة بنا. يعرض بشكل أساسي قائمة المنتجات من 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() و this.props.products ممكنة بسبب mapStateToProps و mapDispatchToProps .

mapStateToProps و mapDispatchToProps

State هو متجر Redux و Dispatch هي الإجراءات التي نطلقها. سيتم عرض كلاهما كدعامات في المكون.

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

الأنماط

في React ، يتم تحديد الأنماط الأصلية بشكل عام في نفس الصفحة. إنه مشابه لـ CSS ، لكننا نستخدم خصائص camelCase بدلاً من الخصائص الواصلة.

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

صفحة منتج واحد

تحتوي هذه الصفحة على تفاصيل المنتج المحدد. يعرض للمستخدم اسم المنتج وسعره ووصفه. كما أن لديها وظيفة "إضافة إلى عربة التسوق".

صفحة عربة التسوق

تعرض هذه الشاشة قائمة العناصر الموجودة في سلة التسوق. يحتوي هذا الإجراء على الوظائف getCart و addToCart و removeFromCart . المخفض يتعامل مع الإجراءات بالمثل. يتم تحديد الإجراءات من خلال actionTypes - الثوابت التي تصف الإجراء المخزن في ملف منفصل.

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

هذا هو رمز مكون 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> ) } } }

كما ترى ، نحن نستخدم FlatList للتكرار خلال عناصر سلة التسوق. يأخذ مصفوفة ويقوم بإنشاء قائمة بالعناصر التي سيتم عرضها على الشاشة.

خاتمة

يمكنك تكوين معلومات حول التطبيق مثل الاسم والرمز في ملف app.json . يمكن نشر التطبيق بعد تثبيت npm exp.

لنلخص:

• لدينا الآن تطبيق تجارة إلكترونية لائق مع React Native ؛
• يمكن استخدام Expo لتشغيل المشروع على هاتف ذكي ؛
• يمكن استخدام تقنيات الخلفية الحالية مثل WordPress ؛
• يمكن استخدام Redux لإدارة حالة التطبيق بالكامل ؛
• يمكن لمطوري الويب ، وخاصة مطوري React ، الاستفادة من هذه المعرفة لبناء تطبيقات أكبر.

للحصول على التطبيق الكامل ، يمكنك زيارة مشروعي على Github واستنساخه. لا تتردد في تفرعها وتحسينها بشكل أكبر. كتمرين ، يمكنك الاستمرار في بناء المزيد من الميزات في المشروع مثل:

• صفحة التفقد،
• المصادقة،
• تخزين بيانات سلة التسوق في AsyncStorage بحيث لا يؤدي إغلاق التطبيق إلى مسح سلة التسوق.