سيعلمك هذا الدليل كيفية إنشاء تطبيق مختلط باستخدام منصة بناء التطبيقات الشهيرة PhoneGap. ما سنفعله هو تحويل موقع الويب الخاص بك إلى ملف .apk قابل للتثبيت (تطبيق Android) يمكن تثبيته على أي هاتف يعمل بنظام Android. عندما يتم تشغيل التطبيق ، سيفتح ببساطة موقع الويب الخاص بك في متصفح WebView الأصلي لنظام Android ، لكنه سيظهر كتطبيق ملء الشاشة - لا يوجد شريط تنقل URL أو أي دليل آخر على أن موقعك الإلكتروني يتم تقديمه ببساطة في متصفح.
المتطلبات
موقع الويب الخاص بك (لغرض اتباع هذا الدليل ، يمكنك ببساطة بدء مدونة WordPress مجانية)
حساب جيثب
حساب PhoneGap
برنامج Notepad ++ (أو برنامج تحرير نصوص مشابه يمكنه التعرف على الرمز)
برنامج تحرير الصور لإنشاء رموز التطبيق (Photoshop ، GIMP ، إلخ)
قوالب الترميز
هذه قوالب أكواد يمكنك استخدامها لغرض هذا الدليل - إنها من تطبيقي الخاص الذي تم تطويره باستخدام PhoneGap ، لكنني جردتهم من معلوماتي الشخصية. استغرق إعداد هذه الإعدادات من البداية باستخدام جميع المعلمات الصحيحة عدة أيام من استكشاف الأخطاء وإصلاحها ، لذلك أقدمها لراحتك. على الرحب و السعة!
> ملف Config.XML
> الفهرس. HTML
ابدء
قم بإنشاء مجلد على سطح المكتب الخاص بك وقم بتسميته ' www: ' بدون اقتباس. سيكون هذا هو الدليل الرئيسي للمشروع ، حيث يتوقع منشئ PhoneGap العثور على جميع الملفات الخاصة بمشروعك. سنقوم الآن بإنشاء رمز لتطبيقك.
افتح برنامج تحرير الصور الخاص بك وأنشئ صورة جديدة بتنسيق .PNG. يجب أن تبدو إعدادات صورتك كما يلي:
والآن يمكنك رسم الرمز الخاص بك ، على سبيل المثال سأقوم فقط بعمل زر صغير:
يعتمد حجم الصورة على شاشة هاتفك الشخصي ، ولكن إذا كنت تنوي تطوير تطبيق لأجهزة متعددة ، فستقوم بالطبع بعمل أحجام متعددة للرمز نفسه. فيما يلي جدول بأحجام الصور المستخدمة:
36 × 36 (120 نقطة في البوصة / LDPI)
48 × 48 (160 نقطة في البوصة / MDPI)
72 × 72 (240 نقطة في البوصة / HDPI)
96 × 96 (320 نقطة في البوصة / XHDPI)
144 × 144 (480 نقطة في البوصة / XXHDPI)
192 × 192 (640 نقطة في البوصة / XXXHDPI)
لا أريد قضاء وقت طويل في الحديث عن أحجام الشاشة و DPI ، فقط اعلم أن DPI يرتبط إلى حد كبير بدقة الشاشة. الهاتف الذي يستخدم دقة شاشة 1080 × 1920 سيستخدم 480 نقطة في البوصة ، لكن هذا لا يفعل بالضرورة ترتبط تمامًا بحجم الشاشة. يمكن أن يحتوي الهاتف على شاشة مقاس 5.2 بوصة أو شاشة 6 بوصات وبدقة 1080 × 1920. لكن هذا الدليل لا يتعلق بشاشات الهواتف الذكية ، فلننتقل إلى الأمام.
بعد رسم الرمز الخاص بك ، احفظه باسم icon.png وانقله داخل مجلد www:. سيصبح هذا إفتراضي رمز لتطبيقك. إذا كنت تريد إنشاء أيقونات بأحجام مختلفة تتناسب مع دقة شاشة المستخدم ، فيمكنك حفظ الرمز بأحجام وأسماء مختلفة ، على سبيل المثال Icon144.png و Icon192.png و Icon96.png وما إلى ذلك. ثم ستقوم بتحرير ملف ملف Config.xml ملف للإشارة إلى كل رمز على حدة. هيا لنذهب.
والآن بعد أن أصبح لديك رمز لتطبيقك ، فأنت بحاجة إلى صورة البداية. هذه في الأساس شاشة تحميل ، مثل خلفية الشاشة التي يتم عرضها قبل تحميل التطبيق الخاص بك. تعمل أحجام صور Splash على نفس مبدأ الرموز ، لكنها أكبر قليلاً. هنا الجدول:
- LDPI:
- صورة: 200x320 بكسل
- المناظر الطبيعيه: 320 × 200 بكسل
- MDPI:
- صورة: 320x480 بكسل
- المناظر الطبيعيه: 480x320 بكسل
- HDPI:
- صورة: 480x800 بكسل
- المناظر الطبيعيه: 800x480 بكسل
- XHDPI:
- صورة: 720 بكسل 1280 بكسل
- المناظر الطبيعيه: 1280 × 720 بكسل
- XXHDPI:
- صورة: 960 بكسل 1600 بكسل
- المناظر الطبيعيه: 1600x960 بكسل
- XXXHDPI:
- صورة: 1280 بكسل 1920 بكسل
- المناظر الطبيعيه: 1920 × 1280 بكسل
لذلك قم بإنشاء صورة البداية بدقة لجهازك ، واحفظها بتنسيق سبلاش. png ثم انقله داخل مجلد مشروعك. رائع ، لديك الآن رمز تطبيقك وصورة البداية ، دعنا ننتقل إلى إعداد ملفات التكوين والفهرسة.
شرح Index.HTML و Config.XML
ملف config.xml هو ما يحدد بيئة البناء (Android و iPhone و Windows Phone) ، والرموز ومواقع البداية ، ومكونات Apache Cordova الإضافية التي تريد استخدامها في تطبيقك.
افتح القالب الذي قدمته في Notepad ++ وسترى هذه الأسطر بالقرب من الجزء العلوي:
قم بتحديث هذه الحقول بمعلوماتك ، لكن اترك حقول 'التفضيل' وشأنها. يكون باقي ملف التكوين واضحًا بذاته إذا نظرت إلى القيم فقط. اسم التفضيل = 'ملء الشاشة' على سبيل المثال يخبر التطبيق أن يبدأ تشغيل نفسه كتطبيق ملء الشاشة. اترك كل شيء بمفرده ، باستثناء هذه القيمة الأخيرة في أسفل الملف:
قم بتغييره إلى عنوان URL الفعلي لموقع الويب الخاص بك. سيسمح هذا لمستخدم التطبيق بالانتقال بالكامل إلى موقع الويب الخاص بك ، وموقع الويب الخاص بك فقط - لا يمكنهم مغادرة موقع الويب الخاص بك أثناء استخدام التطبيق الخاص بك. بالطبع لن يحتوي التطبيق على شريط تنقل عنوان URL ، وهذا ليس مصدر قلق حقًا ، ولكنه يتأكد أيضًا من أن المستخدم يمكنه الوصول إلى جميع الصفحات على موقع الويب الخاص بك. * بعد عنوان URL للموقع هو ملف البدل ، وهو ما يعني في مصطلحات الترميز أنه سيقبل أي شيء يتم إدخاله بدلاً من علامة *.
بالطبع ، إذا كنت ترغب في قصر المستخدم على صفحات معينة فقط على موقع الويب الخاص بك ، فيمكنك إضافة قيم منفصلة مثل هذا:
دعنا ننتقل إلى Index.html ملف ، هذا هو الخبز والزبدة لجعل التطبيق يعمل بالفعل. افتحه داخل Notepad ++ وقم بتبديل لغة المستند إلى HTML. ما يفعله index.html أساسًا هو إخبار متصفح Android بكيفية عرض موقع الويب الخاص بك - في النموذج الذي قدمته ، هناك علامات لإزالة شريط تنقل URL من المتصفح ، والسماح لزر 'الرجوع' بالهاتف بالخروج من التطبيق ، وبدء التشغيل التطبيق بعد عرض شاشة البداية. السطر الذي تريد تغييره موجود هنا:
var url = 'http://yourwebsite.com'
بناء التطبيق في PhoneGap Build
لذا قم بتسجيل الدخول إلى حساب GitHub الخاص بك ، وانتقل إلى الصفحة الرئيسية لمستودعك. تحت اسم المستودع ، انقر فوق 'تحميل الملفات' ، واسحب مجلد المشروع إلى شاشة شجرة الملفات. اكتب الآن رسالة تنفيذ في الجزء السفلي ، مثل ' محاولتي الأولى للتطبيق ' . أخيرًا ، انقر فوق Commit Changes.
اذهب الآن إلى PhoneGap بناء الصفحة وقم بتسجيل الدخول. الآن انقر فوق الزر 'تطبيق جديد' في صفحة البناء. سيطلب منك هذا إدخال المسار إلى مستودع GitHub الخاص بك ، لذا قم بذلك ، ثم انقر فوق 'سحب من مستودع .git'.
الآن مرة أخرى على صفحة البناء الرئيسية ، انقر فوق 'تحديث الرمز' و 'سحب الأحدث'.
أخيرًا ، انقر فوق 'إنشاء'. سيقوم بتجميع تطبيقك في ملف .apk ، ثم يقدم لك خيار تنزيل ملف apk. يمكنك الآن تنزيل ملف .apk هذا على جهاز الكمبيوتر الخاص بك ونقله إلى هاتفك ، ثم تثبيته من هناك. بدلاً من ذلك ، يمكنك استخدام هاتفك لمسح رمز الاستجابة السريعة على شاشة الكمبيوتر لتثبيت ملف apk تلقائيًا على جهاز Android الخاص بك.
هذا هو! الآن ، لشرح لك بعض الأشياء المهمة:
- كان هذا دليلًا مبسطًا للغاية يرشدك خلال إنشاء أبسط التطبيقات الهجينة. لا يتجول الأشخاص عمومًا في تغليف مواقعهم في متصفح أصلي وتمريرها كتطبيق Android على متجر Google Play. ولكن الآن بعد أن عرفت كيفية القيام بذلك ، يمكنك البدء في قراءة وثائق PhoneGap حول كيفية تخصيص تطبيقك وإضافة الكثير من النكهة إليه ، بحيث يمكنك إنشاء تطبيق مفيد بالفعل.
- ثانيًا ، يحظر Google Play هذا النوع من طريقة إنشاء التطبيقات لإنشاء تطبيقات نظام الارتباط لغرض وحيد هو تحقيق الأرباح. لذلك لا يمكنك إنشاء تطبيق يسمى 'Earn Money Today!' يفتح موقعًا مليئًا تمامًا بالإعلانات ويعتمد على أرباح الإعلانات. سيتم حظرك من متجر Google Play.
