تنزيل تطبيق سعراتيإنشاء تطبيق iOS أو Android من PhoneGap بلغات الويب
أولاً لمن يريد عمل تطبيقات بشكل احترافي لديه عدة خيارات أخرى
- العمل على Swift للتطبيقات iOS الخاص بـ iPhone و iPad
- العمل على Java باستخدام Android SKD و Android Studio لتطبيقات Android
- العمل على React Native بلغة JavaScript من Facebook
- العمل على Xaramin بلغة C# من Microsoft
- العمل على Ionic بلغة JavaScript
- ….
أما 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.
وهناك العديد من الأمور التي يمكن عملها كالمزامنة وغيرها …
نرجوا ان يكون المقال مفيد للبعض والقادم كذلك …
ملاحظة : التعليق والمشاركة في الصفحة يساهم في تحفيزنا ^_^ …
ما شاء الله شرح مميز بارك الله فيك
ولا تطول علينا بالبقيه
السلام عليكم
برنامج رائع وطرح أروع ، أنا متحمس للتعامل مع قون قاب ، بإنتظار بقية دروسك على فارغ الصبر
عبدالمجيد المخلفي
طرح جميل … بانتظار القادم
شرح جميل ومتعوب علية يا صديقي ومبدع كما عرفتك دائما اتمنى لك التوفيق
تسلم صديقي بدر بعض مما عندك يا رائع وأتمنى لك كل التوفيق
بانتظار الجزء الثاني على احر من الجمر
السلام عليكم اخوي عبدالملك
اتمنى منك شرح عملية تثبيت هذه المنصه
لأنها للأسف غير واضحه في شرحك
السلام عليكم
للعلم اخوي عبدالملك انا اقصد طريقة تحميل المنصه او البرنامج للبرمجه عليه
لكن اتوقع انها طريقه صعبه اشوي ولا تفرق عن الطريقة الثانيه الي انت شرحتها وهي افضل واسهل
على العموم بإنتظار دروسك المتبقيه
ويليت تشرح عن طريق فيديو يكون افضل واسهل لنا
شكراً لك وبإنتظار باقي الدروس
أخوكم المختار مهندس حاسوب من الجزائر ،شكرا لما تبذولوه من جهد و برك الله فيكم ،أنا مطور نظم بي لغة php , javascript.html5 css3 أرجو التعاون معكم في مشاريع مستقبلية وشكرا و هاتفي +
213.772.785.665
ممكن تساعدني اصمم برنامج خطوة بخطوه لان بعض الموز اللي فوق مافهمها
السلام عليكم اخي الله يعطيك العافية والله بصراحة شي جميل لكن انا ماعندي اي خلفية غير اني مصمم جرافيك وحبيت الفكرة ياريت لو عندك اي فيديوهات تشرحلنا الطريقة وايش لازم يكون عندنا خلفية عن روابط المواضيع المتعلقة بالبرنامج و تصميمه ولك مني كل الشكر
بيض الله وجهك وتكفى يالغالي نرجو التفصيل اكثر بالذات لقواعد البيانات
والله يجعلها صدقة جارية لك
استمر جزاك الله خير
السلام عليكم
اخي الله يعطيك العافية
السلام عليكم
اخوي في إنتظار الدرس القادم اخوي ويليت تعجل علينا فيه لاهنت
واتمنى ان يكون الدرس كامل
بانتظار تتمة الدروس
درس سهل وواضح مشكووور جدا
الف شكر شرح واضح , الله يديك العافية .
وفي انتظار دروسك القادمة
شكراً جزيلاً المقالة مفيدة, الرجاء متابعة بقية المقالات مع التطرق للcli
السلام عليكم
بصراحة شي جميل
الف شكر على هذه المقالة الرائعة
واننا ننتظر دروسك القادمة..
السلام عليكم
هل يمكن ان احصل على تكملة باقي المقالات ؟
شكراً لك
الله يعطيك العافية مبدع
سؤال لوسمحت لي
في حال عندي سكربت جاهز او موقع جاهز هل ينفع ضغط جميع الملفات ورفعها على الموقع ليصدر بمكانها برنامج ?
ماني متخيل انها تجي لكن قلت خلني اسال ?
ولي اتصال معك قريب لعمل برمجة خاصة جدا ذات فكرة كبيرة
شكرا لك
عذراً أخي سالم على اللقافة
بس على حد علمي نعم تقدر تضغط ملفات موقعك وترفعه على خدمة الـ PhoneGap Build للحصول على ملفات الـ apk و الـ ipa وغيرهم …
بس شرط يكون اللغات المستخدمة في موقعك عبارة عن فقط Html , Css & javascript (يعني مايحتوي على php مثلاً)
شي ثاني يجب أن يكون موقعك متجاوب + يفضل انو يكون أقرب كتطبيق بحيث تستعمل على الأقل احد الـ Plugins المتوفرة للفون قاب تجنباً لرفض تطبيقك من قبل أبل (يعني لو كنت بتستهدف أجهزة الـiOS ) بسبب بسيط وهو انه مايفرق تطبيقك عن المواقع اللي يمكن أن يتم تصفحها عبر المتصفحات.
شي أخير تنتبه لحجم تطبيقك بحيث مايتجاوز الـ 50mb لو كنت تستخدم الخطة المجانية من خدمة الفون قاب بيلد.
بس حبيت أشارك معلومة (قد تتحمل الخطأ بالتأكيد) وأعتذر مجدداً على المداخلة
وشكراً…
كلمة واحدة: ” إبداع ”
أجمل و أدق شرح, جزاك الله خيراً 🙂
روح الله يوفقك…الدروس القادمة اللي وعدتنا فيها جدا مهمة “ننتظرك على أحر من الجمر”.شكراً لك.
روح الله يوفقك…الدروس القادمة اللي وعدتنا فيها جدا مهمة “ننتظرك على أحر من الجمر”.شكراً لك.
انا أنشأت تطبيق، هذا التطبيق يستخدم ملفات JSON
على الحاسوب يعمل التطبيق بشكل سليم كما يلزم لكن
بعد تحويله بالفاون قاب لايستطيع التطبيق قراءة كا في الملفات JSON
هل هذا يعني أنه تم تجاهلها ولم تجمع مع التطبيق ؟
انا أنشأت تطبيق، هذا التطبيق يستخدم ملفات JSON
على الحاسوب يعمل التطبيق بشكل سليم كما يلزم لكن
بعد تحويله بالفاون قاب لايستطيع التطبيق قراءة كا في الملفات JSON
هل هذا يعني أنه تم تجاهلها ولم تجمع مع التطبيق ؟
السلام عليكم
بالنسبه لمفتاح الشهاده للايفون كيف اعمله ياليت تفدينا بروابط اوو الطريقه لو تكرمت وجزاك الله كل خير
السلام عليكم
ارجو التطرق لموضوع المفتاح الخاص بـ IOS بحاجة له ضروري والله يجزيك كل خير
واذا امكن رابط او اي نقطة حتى احصل هذا المفتاح والف شكر وبانتظار باقي شروحاتك ودروسك