إنشاء تطبيق iOS أو Android من PhoneGap بلغات الويب

أولاً لمن يريد عمل تطبيقات بشكل احترافي لديه عدة خيارات أخرى

أما PhoneGap فهو خيار قديم وبسيط والأفضل الاتجاه للخيارات السابقة ، لكن المقالة محفوظة للأرشفة.

مقدمة :

مطور مواقع؟ ودك تعمل تطبيقات Android و iOS باحترافية! يمكنك استخدام إطار عمل PhoneGap لتنطلق من خلاله, وسنتطرق في هذه الصفحة طريق الإنطلاقة لهذا العالم الرائع, وسيتم طرح أكثر من مقالة متسلسلة منه بإذن الله تعالى.

إيش القصة ؟

يمكنك كمطور مواقع أن تقوم بعمل تطبيقات احترافية على أجهزة الجوالات الذكية والأجهزة اللوحية وهناك عدة طرق ولكن ما أجده مناسب وسهل وقوي في نفس الوقت هو عن طريق PhoneGap لشركة أدوبي فما هو ؟

هو باختصار إطار عمل يساعد مطورين المواقع بعمل تطبيقات احترافية من خلال التقنيات التي يتقنونها ( HTML , CSS , JavaScript ) وبالإمكان استخدام PHP أو أي لغة برمجة سيرفر سايد للاتصال بقواعد البيانات من خلال الأجاكس …

وليس هذا فقط بل يساعدك الفون قاب باستخدام مصادر الجهاز من خلال API Plugins وهي كثيرة ومهمة لعمل التطبيقات مثل ( الكاميرا, معرض الصور, ملفات النظام , تخزين الملفات والبيانات , دليل الهاتف , الرسائل القصيرة , الجي بي إس , … )

وهو Cross Platform أي يدعم مجموعة أجهزة وهي ( Android, iOS, Windows Phone, BlackBerry, WebOS, Symbian, Bada )

ما هي الأعمال المنفذة باستخدام PhoneGap

التطبيقات التي تم تنفيذها بالفون قاب كثيرة وقوية مثل هذه التطبيقات :

كذلك يمكن تنفيذ ألعاب احترافية بالفون قاب وهنا أمثلة للألعاب :

ويمكنك مشاهدة صفحة التطبيقات كاملة هنا ( Apps Created with PhoneGap )

طيب أنت وش سويت ؟

عن نفسي عملت تطبيق على Android و iOS وأفتخر بنتيجته والحمدلله كانت مرضيه جداً واسم التطبيق هو “سعراتي” تجده هنا :

هذه صور النسخة الأولى منه وتم تطويرها أيضاً لنسخة أفضل بمزايا أكثر ما بعد صورت شاشاتها لكن تقدر تنزله وتشوفه على الطبيعة من هنا :

طيب كيف الطريقة ؟

الأن ننطلق في شرح استخدام الفون قاب :-

أول شي الفون قاب له عدة طرق عشان تبدأ فيه :

1. يمكنك تنزيله في جهازك من خلال تركيب Node.js من ثم تركيبه من phonegap.com من خلال أمر npm ثم التعامل معه من خلال أوامر أخرى …

2. يمكنك استخدام مباشرة build.phonegap.com وهي خدمة تساعدك من خلال رفع ملفات التطبيق من html و js وصور (بملف مضغوط zip) وهو يعمل Complie عبر السحابة ويعطيك روابط لملفات التشغيل ويغنيك عناء تركيب الفون قاب وتحديثه … الطريقة السابقة أفضل بحيث توفر عليك وقت رفع التطبيق وتنزيله عند عمل Tests للتطبيق , ولكن هذه الطريقة تريك النتائج بسرعة من أجل اختبار رغبتك في التطوير بهذا الإطار.

3. أخيراً تم تنزيل برنامج سطح مكتب يساعدك لإنشاء التطبيقات للفون قاب بسهولة وعرضها من جوالك مباشرة وذلك من خلال تركيب البرنامج على الكمبيوتر وتركيب تطبيق على الجوال وينشأ لك الملفات اللازمة وتكون ملفات التطبيق في مجلد www ويعطيك آي بي تقدر تدخل من خلاله بجوال , بحيث أي تعديلات تسويها راح تشوفها فيه من خلال الشبكة …

انا حبيت أوضح الطرق بشكل عام وراح أفصل في الطريقة بأحد الأنواع في هذه التدوينة , وراح تكون من خلال ما استخدمته وأعجبني وهو build.phonegap.com :

وشلون أستخدم PhoneGap Build ؟

راح نعمل تنفيذ سهل جداً لتجربته بشكل سريع , أول شي أنشأ مجلد اسمه MyFirstApp وأنشأ ملف index.html عادي واكتب فيه Hello PhoneGap! :

<!doctype html>
<html dir="rtl">

<head>
<meta charset="utf-8" />
</head>

<body>
<p>Hello PhoneGap!</p>
</body>

</html>

بعدها احفظه واضغط الملف وليس المجلد , بمعنى افتح مجلد MyFirstApp وحدد على index.html ثم اضغط الملف من نوع zip وليس rar

ثم توجه إلى build.phonegap.com

وسجل دخولك راح تظهر لك هذي الصفحة :

ثم اضغط على Upload a .zip file واختر الملف الذي ضغطته وسيقوم برفعه ثم تظهر لك هذه الصفحة :

اضغط على Ready to build ثم بعدها سيبدأ بعمل Build للتطبيق انتظره حتى ينتهي لتظهر لك هذه الصفحة :

كل شي بالسليم Android و Windows Phone يظهران باللون الأزرق أي انه تم عمل لهما Build بنجاح ولكن iOS باللون الأحمر أي أنه لم يتم عمل له Build بنجاح وذلك بسبب أن iOS يتطلب مفتاح شهادة يجب انشائه اولاً سيتم التطرق له لاحقاً.

سنقوم بعمل اختبار من خلال Android , افتح جوالك بنظام Android على نفس الموقع build.phonegap.com وسجل دخولك ثم اضغط على اسم التطبيق PG Build App ثم اضغط Install :

سيظهر لك تأكيد لتنزيل ملف التشغيل للتطبيق وهو للـ Android بصيغة apk اضغط موافق :

بعد ما ينتهي من التنزيل اضغط على الملف لتشغيله :

سيمنعك إذا لم تفعل خاصية ( التنزيل من مصادر غير معروفة ) ولتفعيلها اضغط على الضبط :

ضع صح على مصادر غير معروفة :

سينبهك بأن التطبيق يجب عليك ان تتأكد من موثوقيته وثم يسألك إذا كنت تريد السماح بهذا التثبيت فقط ويسألك كل مره أو لتقوم بتفعيله بشكل مستمر أزل الصح ثم اضغط موافق :

سيبدأ خطوات التثبيت وهنا يريك الصلاحيات التي يمكن للتطبيق الوصول لها ويمكنك تحديد الصلاحيات المناسبة للتطبيق وذلك من خلال شرح ملف config.xml القادم بعد هذه التجربة المبدئية :

بعد الانتهاء من تثبيت التطبيق يمكنك الضغط على فتح لفتح التطبيق او الضغط على تمت لإغلاق نافذة التثبيت فلتضغط على تمت لكي أريك أن التطبيق سيظهر في قائمة التطبيقات :

كما تشاهد هنا يظهر التطبيق في قائمة التطبيقات باسم ( PG Build App ) ويظهر صورة أيقونة شعار Cordova Apache وهو المنصة التي يتعامل معها الـ PhoneGap وسنتطرق إلى طريقة كتابة اسم التطبيق وإضافة صورة الأيقونة للتطبيق لاحقاً , افتح التطبيق الأن :

مرحباً بتطبيقك الأولي !! شعور رائع 🙂 …

هذا تطبيقك بصفحة HTML ولكنه يظهر كتطبيق عادي ويمكنك تصميمه باحترافية وبرمجته كذلك باحترافية.

يجب الاخذ بالاعتبار في PhoneGap ملف Config.xml للاعدادات الخاصة بالتطبيق

و Plugins للوصول إلى مصادر الجهاز مثل التصوير بالكامير وفتح معرض الصور … الخ

وكذلك الإتصال بقواعد البيانات وعمل إضافة للبيانات وعرضها وحذفها … من خلال الـ jQuery Ajax بالاتصال بواجهة برمجية APIs أشهرها REST API باستخدام JSON.

وهناك العديد من الأمور التي يمكن عملها كالمزامنة وغيرها …

نرجوا ان يكون المقال مفيد للبعض والقادم كذلك …

ملاحظة : التعليق والمشاركة في الصفحة يساهم في تحفيزنا ^_^ …