إنشاء تطبيق iOS أو Android من PhoneGap بلغات الويب (1)
إنشاء تطبيق iOS أو Android من PhoneGap بلغات الويب (1)
مقدمة :
مطور مواقع؟ ودك تعمل تطبيقات Android و iOS باحترافية! يمكنك استخدام إطار عمل PhoneGap لتنطلق من خلاله, وسنتطرق في هذه الصفحة طريق الإنطلاقة لهذا العالم الرائع, وسيتم طرح أكثر من مقالة متسلسلة منه بإذن الله تعالى.إيش القصة ؟
يمكنك كمطور مواقع أن تقوم بعمل تطبيقات احترافية على أجهزة الجوالات الذكية والأجهزة اللوحية وهناك عدة طرق ولكن ما أجده مناسب وسهل وقوي في نفس الوقت هو عن طريق PhoneGap لشركة أدوبي فما هو ؟هو باختصار إطار عمل يساعد مطورين المواقع بعمل تطبيقات احترافية من خلال التقنيات التي يتقنونها ( HTML , CSS , JavaScript ) وبالإمكان استخدام PHP أو أي لغة برمجة سيرفر سايد للاتصال بقواعد البيانات من خلال الأجاكس …
وليس هذا فقط بل يساعدك الفون قاب باستخدام مصادر الجهاز من خلال API Plugins وهي كثيرة ومهمة لعمل التطبيقات مثل ( الكاميرا, معرض الصور, ملفات النظام , تخزين الملفات والبيانات , دليل الهاتف , الرسائل القصيرة , الجي بي إس , … )
وهو Cross Platform أي يدعم مجموعة أجهزة وهي ( Android, iOS, Windows Phone, BlackBerry, WebOS, Symbian, Bada )
لكن وش سووا ؟
التطبيقات التي تم تنفيذها بالفون قاب كثيرة وقوية مثل هذه التطبيقات :
كذلك يمكن تنفيذ ألعاب احترافية بالفون قاب وهنا أمثلة للألعاب :
ويمكنك مشاهدة صفحة التطبيقات كاملة هنا ( 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>
ثم توجه إلى 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 ولكنه يظهر كتطبيق عادي ويمكنك تصميمه باحترافية وبرمجته كذلك باحترافية.
وسنتطرق للشرح التالي إلى ملف Config.xml وتقسيم الشاشات
وأخيراً سنتطرق في شرح ثالث إلى Plugins للوصول إلى مصادر الجهاز مثل التصوير بالكامير وفتح معرض الصور … الخ
وكذلك في شرح رابع الإتصال بقواعد البيانات وعمل إضافة للبيانات وعرضها وحذفها … من خلال الـ jQuery Ajax
وهناك العديد من المواضيع التي سنطرحها كالمزامنة وغيرها … بإذن الله تعالى
نرجوا ان يكون المقال مفيد للبعض والقادم كذلك …
ملاحظة : التعليق والمشاركة في الصفحة يساهم في تحفيزنا ^_^ …
%2B(500%2Bx%2B200).jpg)
Comments
Post a Comment