Rise Company
22-07-2017, 17:33
شرح وافى لرفع و تركيب و بناء تطبيق على الفون جاب Phone Gap
شرح الفون جاب Phone gap
https://www.rise.company/forum/images/imported/2017/07/54.png
اول خطوة هى ان تقوم بتثبيت برنامج Node.js (https://nodejs.org/en/download/) حيث جميع الاوامر التى ستنفذ ستكون من خلاله و بعد تثبيت البرنامج قم بفتح Node.js command prompt ثم ستبدا مرحلة كتابة الاوامر و التى كل منها لها مسار محدد يمكنك تغييره من خلال امر cd وهو امر change directory و الذى ساقوم بتغييره للوصول الى الجذر c ثم الدخول على المجلدات من نفس الامر. و ثانى خطوة هى تثبيتJava (http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html#javasejdk) و التى تحتوى بداخله على JDK و ثالث خطوة هى تثبيت Android Studio (https://developer.android.com/studio/index.html) نسخة الكاملة حيث تحتوى بداخله على SDK و Emulator .
--------------------------------------------------------------
1- تثبيت Phone Gap
--------------------------------------------------------------
اكتب الامر التالى فى اى مسار
npm install -g phonegap
بعد التثبيت ستجده داخل C:\Users\rise\AppData\Roaming\npm\phonegap
https://www.rise.company/forum/images/imported/2017/07/77.png
هام : نفس الاوامر فى تلك الصورة كما هى بالضبط تعمل ولكن بدلا من كلمة cordova ضع مكانها phonegap
للتنظيم: تم عمل فولدر داخل c باسم riseapp ثم بداخله تم عمل فولدر risephonegap
ومن خلال الاوامر فى الاعلى سيتم انشاء فولدر داخل app1 وبداخله ملفات التطبيق الخاص
الامر الاخير فى الصورة يكتب كالاتى :
phonegap create hello com.example.hello HelloWorld
1. hello = اسم المجلد الذي سوف يحتوى على المشروع " تم وضع مكانه app1 "
2. com.example.hello = معرف المشروع ويجب اختيار معرف فريد لكل تطبيق " تم وضع مكانه رابط التطبيق من مقطعين فقط "
3. HelloWorld = اسم المشروع ويفضل تحديد الاسم من هنا " تم وضع مكانه اسم التطبيق بدون مسافة "
بعد تنفيذ الامر السابق سوف يظهر 4 مجلدات داخل app1
1. hooks
2. platforms = هو الملف الذي يحتوى على منصات العمل وهو الذى يخرج في المشروع بعد الانتهاء
3. plugins = مجلد الاضافات وهو يحتوى على جميع الاضافات التى تقوم بتثبيتها
4. www = هو مجلد التطبيق الذي انت تقوم بانشائه
برنامج الفون جاب لانشاء التطبيقات PhoneGap Desktop application
قدمت شركة فون جاب برنامج يقوم بانشاء تطبيق دون الحاجة الى كتابة اكواد يمكنك تحميله من هنا
https://phonegap.com/getstarted/
https://www.rise.company/forum/images/imported/2017/07/81.png
هذا البرنامج ينزل على الكمبيوتر لانشاء تطبيق و هناك برنامج اخر ينزل على الموبايل للعرض عليه
https://www.rise.company/forum/images/imported/2017/07/82.png
كما يمكنك الاطلاع عليه من خلال المتصفح بكتابة localhost الخاص بك
https://www.rise.company/forum/images/imported/2017/07/83.png
خطوات تسطيب البرنامج من هنا
http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/
صور للبرنامج :
https://www.rise.company/forum/images/imported/2017/07/84.png
https://www.rise.company/forum/images/imported/2017/07/85.png
https://www.rise.company/forum/images/imported/2017/07/86.png
https://www.rise.company/forum/images/imported/2017/07/87.png
https://www.rise.company/forum/images/imported/2017/07/88.png
https://www.rise.company/forum/images/imported/2017/07/89.png
https://www.youtube.com/watch?v=pggw-9b8RVY
--------------------------------------------------------------
2- تثبيت منصه (platform)
--------------------------------------------------------------
اكتب الامر التالى فى مسار app1
phonegap platform add android
او
phonegap platform add ios
بعد التثبيت ستجده داخل مجلد platforms فى app1
https://www.rise.company/forum/images/imported/2017/07/78.png
هام : نفس الاوامر فى تلك الصورة كما هى بالضبط تعمل ولكن بدلا من كلمة cordova ضع مكانها phonegap
انواع المنصات (platforms type)
يوجد العديد من المنصات التي يمكنك العمل عليها من نفس الكود الخاص بك ومن خلال امر واحد فقط
1. android وهو الاشهر في العالم العربي والعديد من شركات الهواتف الذكيه تستخدم هذا النظام وهذا النظام من قبل شركه جوجل متطلباتها : JDK + apache ant + Eclipse
2. ios هو من شركه ابل العالميه وهو نظام تشغيل الهواتف الذكيه لهذه الشركه متطلباتها : mac + xcode
--------------------------------------------------------------
3- بناء التطبيق APK
--------------------------------------------------------------
هناك طريقتين الاولى من خلال كود و الاخرى من خلال برنامج يوفر عليك تلك الخطوات
اكتب الامر التالى فى مسار app1
phonegap build
بعد البناء ستجده فى المسار C:\riseapp\risephonegap\app1\platforms\android\bui l d\outputs\apk
هام فى الرابط التالتى حل مشكلة قد تواجهك
حل مشكلة cannot find gradle wrapper within android sdk (https://www.rise.company/forum/threads/25909-%D8%AD%D9%84-%D9%85%D8%B4%D9%83%D9%84%D8%A9-cannot-find-gradle-wrapper-within-android-sdk)
هناك طريقة اخرى لبناء التطبيق من خلال موقع سحابى لفون جاب يحول اى ملف يرفع له مضغوط بصيغة zip الى ملف apk
الشروحات:
شرح الفون جاب بيلد Phone Gap Build رفع و تركيب و بناء و تثبيت التطبيق (https://www.rise.company/forum/threads/25868-%D8%B4%D8%B1%D8%AD-%D8%A7%D9%84%D9%81%D9%88%D9%86-%D8%AC%D8%A7%D8%A8-%D8%A8%D9%8A%D9%84%D8%AF-Phone-Gap-Build-%D8%B1%D9%81%D8%B9-%D9%88-%D8%AA%D8%B1%D9%83%D9%8A%D8%A8-%D9%88-%D8%A8%D9%86%D8%A7%D8%A1-%D9%88-%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA-%D8%A7%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82)
بناء تطبيق بالفون جاب بيلد Phone Gap build و اضافة Plugins (https://www.rise.company/forum/threads/25874-%D8%A8%D9%86%D8%A7%D8%A1-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-%D8%A8%D8%A7%D9%84%D9%81%D9%88%D9%86-%D8%AC%D8%A7%D8%A8-%D8%A8%D9%8A%D9%84%D8%AF-Phone-Gap-build-%D9%88-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-Plugins)
--------------------------------------------------------------
4- تشغيل المنصة / التطبيق
--------------------------------------------------------------
اكتب الامر التالى فى مسار app1
phonegap run android
او
phonegap run ios
بعدها سيظهر لنا محاكي للمحمول حيت سنشاهد ونجرب تطبيقاتنا على الشكل التالي :
https://www.rise.company/forum/images/imported/2017/07/79.png
هام : نفس الاوامر فى تلك الصورة كما هى بالضبط تعمل ولكن بدلا من كلمة cordova ضع مكانها phonegap
سيتطلب العمل وجود ايميلتور AVD وهو Android Virtual Device يتم تفعيله من خلال برنامج Android Studio
--------------------------------------------------------------
5- التحقق من المتطلبات Requisites
--------------------------------------------------------------
اكتب الامر التالى فى اى مسار
phonegap requirements
للتحقق من الربط الصحيح بـ SDK و JDK و Gradle
--------------------------------------------------------------
6- المرجع :
--------------------------------------------------------------
https://phonegap.com/getstarted/
http://docs.phonegap.com/
جميع الاكواد فى المرفقات
شرح الفون جاب Phone gap
https://www.rise.company/forum/images/imported/2017/07/54.png
اول خطوة هى ان تقوم بتثبيت برنامج Node.js (https://nodejs.org/en/download/) حيث جميع الاوامر التى ستنفذ ستكون من خلاله و بعد تثبيت البرنامج قم بفتح Node.js command prompt ثم ستبدا مرحلة كتابة الاوامر و التى كل منها لها مسار محدد يمكنك تغييره من خلال امر cd وهو امر change directory و الذى ساقوم بتغييره للوصول الى الجذر c ثم الدخول على المجلدات من نفس الامر. و ثانى خطوة هى تثبيتJava (http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html#javasejdk) و التى تحتوى بداخله على JDK و ثالث خطوة هى تثبيت Android Studio (https://developer.android.com/studio/index.html) نسخة الكاملة حيث تحتوى بداخله على SDK و Emulator .
--------------------------------------------------------------
1- تثبيت Phone Gap
--------------------------------------------------------------
اكتب الامر التالى فى اى مسار
npm install -g phonegap
بعد التثبيت ستجده داخل C:\Users\rise\AppData\Roaming\npm\phonegap
https://www.rise.company/forum/images/imported/2017/07/77.png
هام : نفس الاوامر فى تلك الصورة كما هى بالضبط تعمل ولكن بدلا من كلمة cordova ضع مكانها phonegap
للتنظيم: تم عمل فولدر داخل c باسم riseapp ثم بداخله تم عمل فولدر risephonegap
ومن خلال الاوامر فى الاعلى سيتم انشاء فولدر داخل app1 وبداخله ملفات التطبيق الخاص
الامر الاخير فى الصورة يكتب كالاتى :
phonegap create hello com.example.hello HelloWorld
1. hello = اسم المجلد الذي سوف يحتوى على المشروع " تم وضع مكانه app1 "
2. com.example.hello = معرف المشروع ويجب اختيار معرف فريد لكل تطبيق " تم وضع مكانه رابط التطبيق من مقطعين فقط "
3. HelloWorld = اسم المشروع ويفضل تحديد الاسم من هنا " تم وضع مكانه اسم التطبيق بدون مسافة "
بعد تنفيذ الامر السابق سوف يظهر 4 مجلدات داخل app1
1. hooks
2. platforms = هو الملف الذي يحتوى على منصات العمل وهو الذى يخرج في المشروع بعد الانتهاء
3. plugins = مجلد الاضافات وهو يحتوى على جميع الاضافات التى تقوم بتثبيتها
4. www = هو مجلد التطبيق الذي انت تقوم بانشائه
برنامج الفون جاب لانشاء التطبيقات PhoneGap Desktop application
قدمت شركة فون جاب برنامج يقوم بانشاء تطبيق دون الحاجة الى كتابة اكواد يمكنك تحميله من هنا
https://phonegap.com/getstarted/
https://www.rise.company/forum/images/imported/2017/07/81.png
هذا البرنامج ينزل على الكمبيوتر لانشاء تطبيق و هناك برنامج اخر ينزل على الموبايل للعرض عليه
https://www.rise.company/forum/images/imported/2017/07/82.png
كما يمكنك الاطلاع عليه من خلال المتصفح بكتابة localhost الخاص بك
https://www.rise.company/forum/images/imported/2017/07/83.png
خطوات تسطيب البرنامج من هنا
http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/
صور للبرنامج :
https://www.rise.company/forum/images/imported/2017/07/84.png
https://www.rise.company/forum/images/imported/2017/07/85.png
https://www.rise.company/forum/images/imported/2017/07/86.png
https://www.rise.company/forum/images/imported/2017/07/87.png
https://www.rise.company/forum/images/imported/2017/07/88.png
https://www.rise.company/forum/images/imported/2017/07/89.png
https://www.youtube.com/watch?v=pggw-9b8RVY
--------------------------------------------------------------
2- تثبيت منصه (platform)
--------------------------------------------------------------
اكتب الامر التالى فى مسار app1
phonegap platform add android
او
phonegap platform add ios
بعد التثبيت ستجده داخل مجلد platforms فى app1
https://www.rise.company/forum/images/imported/2017/07/78.png
هام : نفس الاوامر فى تلك الصورة كما هى بالضبط تعمل ولكن بدلا من كلمة cordova ضع مكانها phonegap
انواع المنصات (platforms type)
يوجد العديد من المنصات التي يمكنك العمل عليها من نفس الكود الخاص بك ومن خلال امر واحد فقط
1. android وهو الاشهر في العالم العربي والعديد من شركات الهواتف الذكيه تستخدم هذا النظام وهذا النظام من قبل شركه جوجل متطلباتها : JDK + apache ant + Eclipse
2. ios هو من شركه ابل العالميه وهو نظام تشغيل الهواتف الذكيه لهذه الشركه متطلباتها : mac + xcode
--------------------------------------------------------------
3- بناء التطبيق APK
--------------------------------------------------------------
هناك طريقتين الاولى من خلال كود و الاخرى من خلال برنامج يوفر عليك تلك الخطوات
اكتب الامر التالى فى مسار app1
phonegap build
بعد البناء ستجده فى المسار C:\riseapp\risephonegap\app1\platforms\android\bui l d\outputs\apk
هام فى الرابط التالتى حل مشكلة قد تواجهك
حل مشكلة cannot find gradle wrapper within android sdk (https://www.rise.company/forum/threads/25909-%D8%AD%D9%84-%D9%85%D8%B4%D9%83%D9%84%D8%A9-cannot-find-gradle-wrapper-within-android-sdk)
هناك طريقة اخرى لبناء التطبيق من خلال موقع سحابى لفون جاب يحول اى ملف يرفع له مضغوط بصيغة zip الى ملف apk
الشروحات:
شرح الفون جاب بيلد Phone Gap Build رفع و تركيب و بناء و تثبيت التطبيق (https://www.rise.company/forum/threads/25868-%D8%B4%D8%B1%D8%AD-%D8%A7%D9%84%D9%81%D9%88%D9%86-%D8%AC%D8%A7%D8%A8-%D8%A8%D9%8A%D9%84%D8%AF-Phone-Gap-Build-%D8%B1%D9%81%D8%B9-%D9%88-%D8%AA%D8%B1%D9%83%D9%8A%D8%A8-%D9%88-%D8%A8%D9%86%D8%A7%D8%A1-%D9%88-%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA-%D8%A7%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82)
بناء تطبيق بالفون جاب بيلد Phone Gap build و اضافة Plugins (https://www.rise.company/forum/threads/25874-%D8%A8%D9%86%D8%A7%D8%A1-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-%D8%A8%D8%A7%D9%84%D9%81%D9%88%D9%86-%D8%AC%D8%A7%D8%A8-%D8%A8%D9%8A%D9%84%D8%AF-Phone-Gap-build-%D9%88-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-Plugins)
--------------------------------------------------------------
4- تشغيل المنصة / التطبيق
--------------------------------------------------------------
اكتب الامر التالى فى مسار app1
phonegap run android
او
phonegap run ios
بعدها سيظهر لنا محاكي للمحمول حيت سنشاهد ونجرب تطبيقاتنا على الشكل التالي :
https://www.rise.company/forum/images/imported/2017/07/79.png
هام : نفس الاوامر فى تلك الصورة كما هى بالضبط تعمل ولكن بدلا من كلمة cordova ضع مكانها phonegap
سيتطلب العمل وجود ايميلتور AVD وهو Android Virtual Device يتم تفعيله من خلال برنامج Android Studio
--------------------------------------------------------------
5- التحقق من المتطلبات Requisites
--------------------------------------------------------------
اكتب الامر التالى فى اى مسار
phonegap requirements
للتحقق من الربط الصحيح بـ SDK و JDK و Gradle
--------------------------------------------------------------
6- المرجع :
--------------------------------------------------------------
https://phonegap.com/getstarted/
http://docs.phonegap.com/
جميع الاكواد فى المرفقات