الرئيسية      عني      أعمالي      السيرة      صوري      اتصل بي

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

مقدمة :

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

إيش القصة ؟

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

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

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

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

لكن وش سووا ؟

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

bbc

healthtap

nus-extra

untapped2

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

browserquest

what_the_photo

browserquest-copy

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

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

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

soraate_screens

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

android-app   ios-app

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

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

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

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 ولكنه يظهر كتطبيق عادي ويمكنك تصميمه باحترافية وبرمجته كذلك باحترافية.

وسنتطرق للشرح التالي إلى ملف Config.xml وتقسيم الشاشات

وأخيراً سنتطرق في شرح ثالث إلى Plugins للوصول إلى مصادر الجهاز مثل التصوير بالكامير وفتح معرض الصور … الخ

وكذلك في شرح رابع الإتصال بقواعد البيانات وعمل إضافة للبيانات وعرضها وحذفها … من خلال الـ jQuery Ajax

وهناك العديد من المواضيع التي سنطرحها كالمزامنة وغيرها … بإذن الله تعالى

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

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

  تاريخ النشر   09/08/2015    
  مرات المشاهدة   11٬579
  1. يقول يوسف المطيري:

    ما شاء الله شرح مميز بارك الله فيك
    ولا تطول علينا بالبقيه

  2. السلام عليكم

    برنامج رائع وطرح أروع ، أنا متحمس للتعامل مع قون قاب ، بإنتظار بقية دروسك على فارغ الصبر

    عبدالمجيد المخلفي

  3. يقول خليوي:

    طرح جميل … بانتظار القادم

  4. يقول بدر عبدالله:

    شرح جميل ومتعوب علية يا صديقي ومبدع كما عرفتك دائما اتمنى لك التوفيق

    1. تسلم صديقي بدر بعض مما عندك يا رائع وأتمنى لك كل التوفيق

  5. يقول مدير المدير:

    بانتظار الجزء الثاني على احر من الجمر

  6. يقول سعدي الدمجاني:

    السلام عليكم اخوي عبدالملك

    اتمنى منك شرح عملية تثبيت هذه المنصه

    لأنها للأسف غير واضحه في شرحك

  7. يقول سعدي الدمجاني:

    السلام عليكم

    للعلم اخوي عبدالملك انا اقصد طريقة تحميل المنصه او البرنامج للبرمجه عليه

    لكن اتوقع انها طريقه صعبه اشوي ولا تفرق عن الطريقة الثانيه الي انت شرحتها وهي افضل واسهل

    على العموم بإنتظار دروسك المتبقيه

    ويليت تشرح عن طريق فيديو يكون افضل واسهل لنا

    شكراً لك وبإنتظار باقي الدروس

  8. أخوكم المختار مهندس حاسوب من الجزائر ،شكرا لما تبذولوه من جهد و برك الله فيكم ،أنا مطور نظم بي لغة php , javascript.html5 css3 أرجو التعاون معكم في مشاريع مستقبلية وشكرا و هاتفي +
    213.772.785.665

  9. يقول سعيد الغافري:

    ممكن تساعدني اصمم برنامج خطوة بخطوه لان بعض الموز اللي فوق مافهمها

  10. يقول عبدالرزاق:

    السلام عليكم اخي الله يعطيك العافية والله بصراحة شي جميل لكن انا ماعندي اي خلفية غير اني مصمم جرافيك وحبيت الفكرة ياريت لو عندك اي فيديوهات تشرحلنا الطريقة وايش لازم يكون عندنا خلفية عن روابط المواضيع المتعلقة بالبرنامج و تصميمه ولك مني كل الشكر

  11. يقول ابو يوسف الحربي:

    بيض الله وجهك وتكفى يالغالي نرجو التفصيل اكثر بالذات لقواعد البيانات
    والله يجعلها صدقة جارية لك

  12. يقول Asaad Qassim:

    استمر جزاك الله خير

  13. يقول adem outlaw:

    السلام عليكم
    اخي الله يعطيك العافية

  14. يقول الدمجاني:

    السلام عليكم

    اخوي في إنتظار الدرس القادم اخوي ويليت تعجل علينا فيه لاهنت

    واتمنى ان يكون الدرس كامل

  15. يقول احمد:

    بانتظار تتمة الدروس

  16. يقول Dubai Property:

    درس سهل وواضح مشكووور جدا

  17. يقول غرام:

    الف شكر شرح واضح , الله يديك العافية .
    وفي انتظار دروسك القادمة

  18. يقول technomacx:

    شكراً جزيلاً المقالة مفيدة, الرجاء متابعة بقية المقالات مع التطرق للcli

  19. يقول طالب:

    السلام عليكم
    بصراحة شي جميل
    الف شكر على هذه المقالة الرائعة
    واننا ننتظر دروسك القادمة..

  20. يقول سالم:

    السلام عليكم

    هل يمكن ان احصل على تكملة باقي المقالات ؟

    شكراً لك

  21. الله يعطيك العافية مبدع

    سؤال لوسمحت لي

    في حال عندي سكربت جاهز او موقع جاهز هل ينفع ضغط جميع الملفات ورفعها على الموقع ليصدر بمكانها برنامج ?

    ماني متخيل انها تجي لكن قلت خلني اسال ?

    ولي اتصال معك قريب لعمل برمجة خاصة جدا ذات فكرة كبيرة

    شكرا لك

    1. يقول فاطمة:

      عذراً أخي سالم على اللقافة
      بس على حد علمي نعم تقدر تضغط ملفات موقعك وترفعه على خدمة الـ PhoneGap Build للحصول على ملفات الـ apk و الـ ipa وغيرهم …

      بس شرط يكون اللغات المستخدمة في موقعك عبارة عن فقط Html , Css & javascript (يعني مايحتوي على php مثلاً)

      شي ثاني يجب أن يكون موقعك متجاوب + يفضل انو يكون أقرب كتطبيق بحيث تستعمل على الأقل احد الـ Plugins المتوفرة للفون قاب تجنباً لرفض تطبيقك من قبل أبل (يعني لو كنت بتستهدف أجهزة الـiOS ) بسبب بسيط وهو انه مايفرق تطبيقك عن المواقع اللي يمكن أن يتم تصفحها عبر المتصفحات.

      شي أخير تنتبه لحجم تطبيقك بحيث مايتجاوز الـ 50mb لو كنت تستخدم الخطة المجانية من خدمة الفون قاب بيلد.

      بس حبيت أشارك معلومة (قد تتحمل الخطأ بالتأكيد) وأعتذر مجدداً على المداخلة
      وشكراً…

  22. يقول Mhamad:

    كلمة واحدة: ” إبداع ”

    أجمل و أدق شرح, جزاك الله خيراً 🙂

  23. يقول أبو خليل:

    روح الله يوفقك…الدروس القادمة اللي وعدتنا فيها جدا مهمة “ننتظرك على أحر من الجمر”.شكراً لك.

  24. يقول hakeen:

    روح الله يوفقك…الدروس القادمة اللي وعدتنا فيها جدا مهمة “ننتظرك على أحر من الجمر”.شكراً لك.

  25. يقول محمد:

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

  26. يقول محمد خلاف:

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

  27. يقول عبدالعزيز:

    السلام عليكم

    بالنسبه لمفتاح الشهاده للايفون كيف اعمله ياليت تفدينا بروابط اوو الطريقه لو تكرمت وجزاك الله كل خير

  28. يقول محمد الشايب:

    السلام عليكم
    ارجو التطرق لموضوع المفتاح الخاص بـ IOS بحاجة له ضروري والله يجزيك كل خير
    واذا امكن رابط او اي نقطة حتى احصل هذا المفتاح والف شكر وبانتظار باقي شروحاتك ودروسك

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *