في المقالة التالية ، سنلقي نظرة على Ionic Framework ، وكيف يمكن تثبيته على Ubuntu 20.04. سيسمح إطار العمل هذا للمستخدمين بتنفيذ مشاريع مع أطر أخرى مثل Angular. Ionic عبارة عن حزمة SDK مفتوحة المصدر بالكامل لتطوير تطبيقات الأجهزة المحمولة الهجينة تم إنشاؤها بواسطة Max Lynch و Ben Sperry و Adam Bradley من Drifty Co. في عام 2013. تم إصدار الإصدار الأصلي في عام 2013 وتم بناؤه على AngularJS و Apache Cordova. ومع ذلك ، تمت إعادة بناء أحدث إصدار كمجموعة من مكونات الويب ، والتي يسمح للمستخدم باختيار تنفيذ مشاريع Angular أو React أو Vue.js. كما يسمح باستخدام المكونات الأيونية بدون أي إطار عمل لواجهة المستخدم.
أيوني توفر الأدوات والخدمات لتطوير تطبيقات الويب الهجينة والمتنقلة والتقدمية بناءً على ممارسات وتقنيات تطوير الويب الحديثة. لهذا ، يمكن استخدام تقنيات الويب مثل CSS و HTML5 و Sass. باستخدام هذا الإطار ، يمكننا تطوير تطبيقات بتقنيات الويب المتوافقة مع iOS أو Android أو الويب نفسه. كما أنه يوفر أداة CLI قوية يمكننا بواسطتها إدارة المشاريع وإنشائها.
الخصائص العامة للأيونات
- هذا الإطار مجاني ومفتوح المصدر. يوفر مكتبة من أدوات ومكونات واجهة المستخدم المحسّنة للجوّال ، والتي يمكن من خلالها إنشاء تطبيقات سريعة وتفاعلية للغاية.
- يستخدم الأيوني كوردوفا ، وأحدث المكونات الإضافية للوصول إلى وظائف نظام التشغيل المضيفة مثل GPS والكاميرا والمصباح اليدوي وما إلى ذلك.
- يمكن للمستخدمين إنشاء تطبيقاتهم ثم تخصيصها لنظام Android أو iOS أو Windows أو سطح المكتب (مع Electron) أو المتصفحات الحديثة.
- أيوني يتضمن مكونات متحركة أو أسلوب طباعة أو سمة أساسية قابلة للتوسيع.
- عند استخدام مكونات الويبيوفر Ionic مكونات وطرق مخصصة للتفاعل معها. يسمح أحد هذه المكونات ، وهو التمرير الافتراضي ، للمستخدمين بالتمرير عبر قائمة تضم آلاف العناصر دون أي تأثير على الأداء. مكون آخر ، علامات التبويب ، ينشئ واجهة مبوبة تدعم التنقل على النمط الأصلي وإدارة حالة السجل.
- بالإضافة إلى SDK ، توفر Ionic أيضًا ملفات يمكن لمطوري الخدمات استخدامها لتمكين الميزات، مثل عمليات تنفيذ التعليمات البرمجية أو الإنشاءات الآلية.
- أيضا يوفر IDE الخاص به المعروف باسم Ionic Studio.
- كما يوفر واجهة سطر الأوامر (CLI) لإنشاء المشاريع. يسمح CLI أيضًا للمطورين بإضافة ملحقات وحزم إضافية من كوردوفا ، وتمكين دفع الإشعارات ، وإنشاء رموز التطبيقات ، وشاشات البداية ، وإنشاء ثنائيات أصلية.
قم بتثبيت Ionic على Ubuntu 20.04
تثبيت هذا الإطار بسيط للغاية. للبدء ، نحتاج فقط إلى فتح محطة طرفية (Ctrl + Alt + T) و تحديث حزم نظامنا:
sudo apt update; sudo apt upgrade
ثم سنقوم تثبيت بعض الحزم الضرورية. في نفس المحطة ، سيتعين علينا استخدام الأمر:
sudo apt install curl gnupg2 wget git
ستكون الخطوة التالية تثبيت NodeJS. لقد اختبرت هذا المثال مع الإصدار 14.x. لتثبيت هذا الإصدار ، سنبدأ بإضافة المستودع الضروري:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
إذا نحن نستطيع تثبيت NodeJS تشغيل هذا الأمر الآخر:
sudo apt install nodejs
تتطلب الأيونية Apache Cordova. يجب توضيح أن هذه مجموعة من واجهات برمجة التطبيقات الخاصة بالجهاز والتي تسمح لمطور تطبيقات الهاتف المحمول ، باستخدام JavaScript ، بالوصول إلى الوظائف الأصلية للجهاز ، مثل الكاميرا أو مقياس التسارع.
بعد تثبيت NodeJS ، يمكننا ذلك تثبيت كوردوفا ادارة:
sudo npm install -g cordova
في هذه المرحلة ، يمكننا الانتقال إلى تثبيت أيوني باستخدام npm:
sudo npm i -g @ionic/cli
بعد التثبيت ، نستطيع تحقق من الإصدار المثبت باستخدام الأمر:
ionic -v
تطبيق مثال
لمعرفة ما إذا كان التثبيت قد تم بشكل صحيح ، يمكننا البدء بإنشاء نموذج تطبيق صغير. للقيام بذلك ، سيتعين علينا فقط قم بتشغيل الأمر التالي لإنشاء المثال:
ionic start
عند تشغيل هذا الأمر سيكون عليك تحديد نوع المشروع الذي تريد إنشاءه. في هذا المثال اخترت Angular. بالإضافة إلى ذلك ، سيتعين عليك تسمية مشروعك واختيار النموذج. كل هذا عليك أن تختاره من شاشة مشابهة لما يلي:
بعد الإعداد ، سيتم إنشاء مجلد بالاسم الذي قدمناه للمشروع. قم بالوصول إلى هذا المجلد لرؤية هيكل المشروع.
إلى عرض المشروع، في نفس المحطة سنقوم بتنفيذ هذا الأمر الآخر:
ionic serve --host 0.0.0.0 --port 8000
مع هذا الأمر سنسمح لأي مضيف بالوصول إلى المنفذ 8000.
عندما يتم تحميل كل ما تحتاجه ، افتح متصفح الويب وانتقل إلى http://localhost:8000 o http://IP-de-tu-servidor:8000 وسترى مثال الصفحة التي تم إنشاؤها للتو.
Ionic هو إطار حديث يسمح لنا بتطوير تطبيقات عبر الأنظمة الأساسية بطريقة بسيطة وأنيقة. يمكن الحصول عليها مزيد من المعلومات والوثائق حول تركيبها وتشغيلها في موقع المشروع.