بناء تطبيقات الموبايل مع Ionic و React

أضاف Ionic مؤخرًا دعمًا لـ React ؛ حتى الآن ، يمكن لمطوري React الحصول على مزايا Ionic لبناء تطبيقات الهاتف المحمول الهجينة وتطبيقات الويب التقدمية (PWAs). في هذا المنشور ، سنوضح لك كيفية البدء في استخدام Ionic مع React من خلال إنشاء تطبيق تجريبي بسيط من البداية.

المتطلبات الأساسية

من أجل اتباع هذا البرنامج التعليمي بشكل صحيح ، ستحتاج إلى المتطلبات الأساسية التالية:

• الإصدارات الحديثة من Node.js و npm مثبتة على نظامك ،
• معرفة العمل بـ TypeScript و React.

يمكنك التحقق من تثبيت أحدث إصدار من Node.js (v10) عن طريق تشغيل الأمر التالي:

 $ node -v

إدخال React و Ionic

لنبدأ بمقدمة موجزة لكل من React و Ionic.

وبحسب الموقع الرسمي:

"React هي مكتبة JavaScript تعريفية وفعالة ومرنة لبناء واجهات المستخدم. يتيح لك إنشاء واجهات مستخدم معقدة من أجزاء صغيرة ومعزولة من التعليمات البرمجية تسمى "المكونات".

يركز React على بناء واجهات المستخدم ولا يوفر أي أدوات مضمنة للمهام الشائعة المطلوبة في تطوير الويب ، مثل جلب البيانات عن بُعد والتوجيه ، لذلك ستحتاج إلى استخدام بعض مكتبات الجهات الخارجية الحالية لهذه المهام.

وفقًا لموقع Ionic:

"Ionic Framework هي مجموعة أدوات مجانية مفتوحة المصدر لواجهة مستخدم الهاتف المحمول لتطوير تطبيقات عالية الجودة عبر الأنظمة الأساسية لأنظمة التشغيل iOS و Android والويب الأصلية - كل ذلك من قاعدة شفرة واحدة."

في الأساس ، إنها مجموعة من مكونات واجهة المستخدم التي يمكنك استخدامها مع JavaScript عادي أو أي إطار عمل أو مكتبة شائعة للواجهة الأمامية ، مثل Angular أو React أو Vue ، لإنشاء تطبيق هجين للهاتف المحمول و PWA.

في هذا البرنامج التعليمي ، سنرى ونستخدم بعض مكونات Ionic UI مثل ما يلي:

• IonMenu: باستخدام هذا ، سينزلق درج التنقل من جانب العرض الحالي.
• IonToolbar: يتم وضع هذه الأشرطة العلوية أعلى أو أسفل المحتوى.
• IonHeader: يحتوي هذا المكون الأصلي على مكون شريط الأدوات.
• IonContent: يوفر هذا المكون منطقة محتوى ، مع طرق للتحكم في المنطقة القابلة للتمرير وأشياء أخرى. أنت بحاجة إلى مكون محتوى واحد فقط داخل عرض واحد.
• IonList: يحتوي هذا المكون على عناصر ذات محتوى بيانات مماثل ، مثل الصور والنصوص. إنها مكونة من كائنات IonItem.
• IonItem: قد يحتوي هذا المكون على نصوص وأيقونات وصور رمزية وصور ومدخلات وأي عنصر أصلي أو مخصص آخر.
• IonButton: يوفر هذا المكون عنصرًا قابلاً للنقر ، يمكن استخدامه في شكل أو في أي مكان يحتاج إلى وظيفة زر قياسية بسيطة.
  

تثبيت Ionic CLI v5

واجهة سطر أوامر Ionic (CLI) ، الإصدار 5 ، لديها دعم لإنشاء مشاريع Ionic على أساس React. لذا ، لنبدأ بتثبيت الأداة من npm.

افتح CLI ، وقم بتشغيل الأمر التالي:

 $ npm install -g ionic

في وقت كتابة هذا التقرير ، كان CLI v5.2.3 من Ionic هو الأحدث.

ملاحظة : * وفقًا لكيفية تثبيت Node.js في نظامك ، قد تحتاج إلى إضافة sudo قبل الأمر الخاص بك في macOS أو Linux أو تشغيل موجه الأوامر كمسؤول في Windows إذا حصلت على أي أخطاء في الأذونات. يمكنك أيضًا ببساطة إصلاح أذونات npm الخاصة بك أو استخدام أداة مثل nvm. *

بعد ذلك ، قم بتثبيت Cordova Resources (التي تُستخدم لإنشاء موارد كوردوفا محليًا) والتشغيل Native Run (تُستخدم لنشر ثنائيات التطبيق على الأجهزة):

 $ npm install -g cordova-res native-run

هذه مطلوبة فقط إذا كنت ترغب في اختبار التطبيق الخاص بك على جهاز محمول حقيقي أو محاكي.

إنشاء مشروع أيوني ومتفاعل

الآن ، لنقم بإنشاء مشروع يعتمد على React. ارجع إلى الجهاز الطرفي الخاص بك ، وتأكد من أنك في دليل العمل الخاص بك ، وقم بتشغيل الأمر التالي:

 $ ionic start myApp --type=react

نستخدم --type=react لإنشاء مشروع يعتمد على React. ستحتاج بعد ذلك إلى اختيار قالب بداية من النماذج المتاحة. دعنا نختار sidemenu لقالب بداية مع قائمة جانبية والتنقل.

بعد إنشاء المشروع وتثبيت التبعيات ، يمكنك خدمة تطبيقك محليًا باستخدام الأوامر التالية:

 $ cd ./myApp $ ionic serve

سيكون تطبيقك متاحًا من عنوان https: // localhost: 8100 ، ويمكنك بالفعل استخدام متصفح الويب الخاص بك لبدء اللعب به.

يُطلق على Ionic إطار عمل هجين للهاتف المحمول لأنه يستخدم تقنيات الويب التي تم تصميمها في الأصل لإنشاء تطبيقات ويب ، جنبًا إلى جنب مع حاوية أصلية (كوردوفا أو مكثف) ، لإنشاء تطبيقات الأجهزة المحمولة دون استخدام التقنيات الأصلية للأنظمة الأساسية المستهدفة ، مثل Java أو Kotlin لنظام Android أو Swift لنظام iOS.

نظرًا لأن تطبيق الهاتف المحمول الخاص بك هو في الواقع تطبيق ويب ، يمكنك إجراء معظم التطوير عن طريق الاختبار في مستعرض ويب دون استخدام محاكي أو جهاز محمول حقيقي ، باستثناء اختبار ميزات الجهاز الأصلية مثل الكاميرا أو وحدة تخزين SQLite ، في حال كنت ' لقد استخدمتها في تطبيقك. في الواقع ، من الممكن أيضًا استخدام تقنيات معينة لتقليد المكونات الإضافية التي توفر الميزات الأصلية وإجراء الاختبار الكامل أثناء التطوير في متصفح الويب الخاص بك.

تنظيف مشروعنا

لدينا الهيكل الأساسي للتطبيق ، مع صفحتين (الصفحة الرئيسية والقائمة) وقائمة. دعنا نزيل صفحة القائمة لأنها مجرد كود معياري.

أولاً ، قم بإزالة ملف src/pages/List.tsx ، ثم افتح ملف src/App.tsx ، وقم بإزالة الإدخال الخاص بصفحة القائمة من مصفوفة appPages :

 const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];

قم أيضًا بإزالة استيراد صفحة القائمة من الملف:

 import List from './pages/List';

بعد ذلك ، قم بإزالة <Route path="/:tab(home)/list" component={List} exact={true} /> من مكون App :

 const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane content> <Menu appPages={appPages} /> <IonPage> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App;

مكون App هو مكون الجذر الذي يتم تقديمه بواسطة تطبيقنا. إذا فتحت ملف src/index.tsx ، فستجد الكود التالي:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

تُستخدم طريقة العرض () لتقديم عنصر React إلى DOM في عنصر root المُزوَّد.

Theming التطبيق

بعد إنشاء مشروعنا الأيوني وتقديمه وتنظيفه ، لنرى الآن كيف يمكننا تغيير ألوان واجهة المستخدم بحيث تبدو أكثر احترافية.

لنبدأ بالقائمة الجانبية. افتح ملف src/components/Menu.tsx ، وأضف سمة color بقيمة primary إلى IonToolbar و IonContent و IonList و IonItem UI:

 const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> ); const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );

يوفر Ionic بعض الألوان الافتراضية (الأولية والثانوية والثالثية والنجاح والتحذير والخطر والضوء والمتوسط ​​والداكن) التي يمكن استخدامها لتغيير لون مكونات واجهة المستخدم. يمكن تطبيق لون على مكون أيوني لتغيير الألوان الافتراضية باستخدام سمة color . راجع "الألوان" لمزيد من المعلومات.

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

هذه لقطة شاشة لقائمتنا:

بعد ذلك ، دعنا نغير لون الصفحة الرئيسية. افتح ملف src/pages/Home.tsx ، وقم بتعيين سمة color IonToolbar و IonContent إلى primary :

 const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };

هذه لقطة شاشة للصفحة:

تثبيت أكسيوس واستهلاك واجهة برمجة تطبيقات REST

سنرى كيفية تثبيت Axios واستهلاك واجهة برمجة تطبيقات RESTful لجهة خارجية في تطبيقنا ، وسنرى أيضًا كيفية عرض البيانات التي تم جلبها باستخدام بطاقة Ionic ومكونات القائمة.

بعد أن تم تصميم تطبيقنا ، دعنا نرى الآن كيفية إحضار البيانات باستخدام Axios. سنستخدم واجهة برمجة تطبيقات الجهة الخارجية المتوفرة من NewsAPI.org.

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

عد إلى الجهاز الطرفي الخاص بك ، وقم بتشغيل الأمر التالي لتثبيت Axios:

 $ npm install axios --save

بعد ذلك ، افتح ملف src/pages/Home.tsx ، وابدأ باستيراد Axios و IonButton :

 import { IonButton } from '@ionic/react'; import axios from 'axios';

بعد ذلك ، حدد API_KEY URL الثابتة:

 const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

في متغير عنوان URL ، سنضيف نقطة نهاية للحصول على العناوين الرئيسية من مصدرنا ، TechCrunch. يمكنك استخدام أي مصدر تريده من المصادر المتاحة.

ملاحظة : تأكد من وضع مفتاح API الخاص بك في متغير API_KEY .

بعد ذلك ، حدد طريقة fetchArticles() على النحو التالي:

 const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) };

نحن ببساطة نسمي طريقة axios() لإرسال طلب GET إلى نقطة نهاية الأخبار ، والنتيجة من الطريقة هي وعد يجب حله من أجل الحصول على بيانات الأخبار.

بعد ذلك ، قم بتحديث مكون الصفحة الرئيسية على النحو التالي لاستدعاء طريقة HomePage fetchArticles() وحل الوعد الذي تم إرجاعه:

 const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); };

في مكون وظيفتنا ، نقوم أولاً باستدعاء الخطاف useState() الخاص بـ React لإنشاء متغير حالة articles ، والذي سيحتفظ بالمقالات الإخبارية بعد أن نحضرها من واجهة برمجة التطبيقات.

useState() متغير الحالة ، الذي يحتوي على المصفوفة الفارغة كقيمة أولية ودالة يمكننا استخدامها لتغيير قيمة المتغير. نستخدم مهمة التدمير لفك حزم القيم من الزوج المُعاد إلى متغيرات مميزة (مثل articles و setArticles() ).

بعد ذلك ، نسمي الخطاف useEffect() لإجراء تأثير جانبي في المكون الخاص بنا. في حالتنا ، يتمثل الأثر الجانبي في جلب البيانات من واجهة برمجة التطبيقات للأخبار باستخدام طريقة fetchArticles() ، والتي تُعيد الوعد. بمجرد حل الوعد ، نسمي طريقة setArticles() لتعيين بيانات الأخبار إلى متغير articles .

يعتبر كل من useState() و useEffect() في React hooks تم تقديمهما في React 16.8 ؛ إنها تتيح لك ببساطة استخدام ميزات الحالة وميزات React الأخرى دون الحاجة إلى كتابة فصل دراسي. يعد الخطاف useEffect() مكافئًا لاستدعاء طرق دورة حياة componentDidMount و componentDidUpdate و componentWillUnmount معًا في مكوّنات تعتمد على الفئات.

أخيرًا ، في قالب العرض ، نقوم بالتكرار عبر مصفوفة articles باستخدام طريقة map() ، ونعرض عنوان كل مقالة إخبارية داخل عنصر IonItem لمكون IonList ، وأيضًا الزر الذي يأخذنا إلى صفحة المادة كاملة.

هذه لقطة شاشة للصفحة:

يمكنك العثور على الكود المصدري في مستودع GitHub هذا.

خاتمة

في هذا البرنامج التعليمي ، بدأنا في استخدام كل من Ionic و React واستخدمناهما لبناء تطبيق محمول بسيط يجلب ويعرض بيانات الأخبار من واجهة برمجة تطبيقات تابعة لجهة خارجية باستخدام عميل Axios. لقد رأينا أيضًا كيفية استخدام الخطافات في React - أي useState() و useEffect() - لإنشاء الحالة وتنفيذ الآثار الجانبية داخل مكونات دالة React. مع Ionic ، رأينا مدى سهولة إنشاء مشروع بناءً على React وكيف يمكننا تصميم التطبيق باستخدام سمات ألوان المكونات.