شرح الطريقة الصحيحة لإنشاء تطبيق اندرويد Android من البداية ورفعه على متجر جوجل بلاي Google Play

شرح الطريقة الصحيحة لإنشاء تطبيق اندرويد Android من البداية ورفعه على متجر جوجل بلاي Google Play

أصبح إنشاء تطبيق Android أمرًا سهلاً بفضل الأنظمة الأساسية التي توفر القدرة على استخدام تقنيات الويب لتصميمه ، وهو أسهل بكثير من لغات البرمجة مثل Java و Swift.

تقنيات الويب تعني:

لغة البرمجة

CSS

جافا سكريبت

و اخرين ...

النظام الأساسي الذي سنستخدمه لإنشاء تطبيق Android هو كوردوفا ، وهو أحد الأنظمة الأساسية الأكثر استخدامًا لتصميم التطبيقات الهجينة التي تعمل في جميع الأنظمة مثل Android و iOS.

تعمل تطبيقات Android

أدوات العمل

ستحتاج إلى مجموعة من الأدوات لإنشاء تطبيق Android جديد ، وهي:

1. Node.js

2. git.client

3. Android Studio

4. قرطبة

بالنسبة لـ Cordova ، إذا قمت بتثبيته مسبقًا على جهاز الكمبيوتر الخاص بك ، فأنت بحاجة إلى تحديثه. افتح أداة Awar على جهاز الكمبيوتر الخاص بك (اكتب cmd في مربع البحث) ، وأدخل الأوامر التالية:

أولا لحذف النسخة القديمة:

npm إلغاء التثبيت -g cordova

ثانيًا: لتثبيت الإصدار الجديد:

تثبيت npm -g cordova@9.0.0

إذا كنت ترغب في تثبيته لأول مرة ، فقط أدخل الأمر الثاني.

قم بإنشاء التطبيق

أوامر إنشاء التطبيق:

يجب إدخال الطلبات الخمسة واحدة تلو الأخرى على التوالي.

1. أولاً:

كوردوفا إنشاء appname com.yourname.appname appname



املأ اسم التطبيق بالاسم الذي تريد اختياره للتطبيق.

يهدف هذا الأمر إلى إنشاء مجلد للتطبيق يحتوي على مجلد باسم WWW ، وداخل www يمكنك إضافة ملفاتك الخاصة من html و css والبرامج النصية والصور ...

ستلاحظ أن كوردوفا قد أنشأت مجلدًا جديدًا باسم التطبيق ، يجب عليك إضافة ملفات التطبيق في مجلد www قبل إدخال الأمر الثاني. يجب أن يكون هناك ملف index.html لأنه الصفحة الرئيسية للتطبيق.

ملفات تطبيقات Android

2 ثانية:

اسم التطبيق cd

3. ثالثا:

منصة كوردوفا تضيف أندرويد

يضيف هذا نظامًا أساسيًا لنظام Android إلى التطبيق ، ويحتوي على ملفات تساعد التطبيق على العمل على جهاز Android.

رابعا:

إضافة cordova-plugin-admob-free --save --variable ADMOB_APP_ID = "ضع معرف التطبيق هنا"

قم بتسجيل الدخول إلى Admob لإنشاء حساب والتقدم بطلب للحصول على المعرف.

5- خامساً:

كوردوفا إعداد الروبوت

يقوم هذا الأمر بإعداد المشروع للفتح في Android Studio.

يمكنك الآن إغلاق أداة أو نافذة أوامر.

تحرير الرموز

مسار المجلد الذي يحتوي على الرموز:

appname \ منصات \ android \ app \ src \ main \ res

في هذا المجلد ، يجب تغيير الرموز ، ولكن قبل ذلك تحتاج إلى عمل صورة 1536 على 1536 بتنسيق PNG ثم الانتقال إلى makeappicon.com للحصول على الرموز.

بعد تنزيله ، ستضغط على إدخال المجلد أعلاه ونسخه ، وإذا سئلت عما إذا كنت تريد استبداله ، فوافق. كن حذرًا الآن ، حيث يحتوي مجلد الأيقونات على نوعين من المجلدات:

قابل للرسم: يحتوي على صور SplashScreen التي تظهر وتملأ الشاشة بالكامل عند فتح التطبيق. (أنا شخصياً أحذفه لأنه يزيد من حجم التطبيق).

mipimap: هذا ما يهمنا ، لأنه يحتوي على الرموز التي تظهر على الهواتف عند تنزيل التطبيق عليها.

بعد إضافة الرموز ، لاحظ أن هناك مجلدات في الإصدار 26 لا تزال تحتوي على أيقونات كوردوفا ، وإليك طريقة استبدالها:

كل مجلد في v26 يوجد مجلد أعلاه يحتوي على أيقونة بنفس الحجم. يجب نسخه من الحجم الأعلى ثم إضافته إلى المجلد أدناه حيث يوجد v26.

بعد ذلك ، ما عليك سوى نسخ الاسم من الصورة التي تجدها في المجلد v26 وحذفه. قم بتغيير اسم صورة الرمز التي أضفتها بالاسم الذي نسخته من الصورة المحذوفة.

افعل ذلك لجميع المجلدات حتى تنتهي منها.

افتح المشروع على Android Studio

يمكن الآن فتح المشروع في Android Studio عن طريق استيراده من المجلد الذي تم إنشاؤه.

أضف إعلانات Adobe

داخل دليل js ، ستقوم بإنشاء ملف جديد بتنسيق .js وتسميته كما تريد ، على سبيل المثال admob.js ، وستضيف هذا الرمز بداخله:

<div class = "codeview">

var admobid = {}

if (/(android)/i.test(navigator.userAgent)) {// for android & amazon-fireos

admobid = {

بانر: "ca-app-pub-3940256099942544/6300978111" ،

إعلان بيني: "ca-app-pub-3940256099942544/1033173712" ،

}

} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {// لـ ios

admobid = {

بانر: "ca-app-pub-3940256099942544/2934735716" ،

إعلان بيني: "ca-app-pub-3940256099942544/4411468910" ،

}

}

document.addEventListener ('deviceready'، function () {

admob.banner.config ({

المعرّف: admobid.banner ،

هو الاختبار: صحيح ،

عرض تلقائي: صحيح ،

})

admob.banner.prepare ()


admob.interstitial.config ({

المعرّف: admobid.interstitial ،

هو الاختبار: صحيح ،

عرض تلقائي: خطأ ،

})

admob.interstitial.prepare ()


document.getElementById ('showAd'). معطل = صحيح

document.getElementById ('showAd'). onclick = الوظيفة () {

admob.interstitial.show ()

}

}، خاطئة)

document.addEventListener ('admob.banner.events.LOAD_FAIL' ، الوظيفة (الحدث) {

console.log (حدث)

})

document.addEventListener ('admob.interstitial.events.LOAD_FAIL' ، الوظيفة (الحدث) {

console.log (حدث)

})

document.addEventListener ('admob.interstitial.events.LOAD' ، الوظيفة (الحدث) {

console.log (حدث)

document.getElementById ('showAd'). معطل = خطأ

})

document.addEventListener ('admob.interstitial.events.CLOSE' ، الوظيفة (الحدث) {

console.log (حدث)

admob.interstitial.prepare ()

})

قم بإجراء التعديلات التالية على الكود

استبدل رموز الوحدات الإعلانية بإضافة الأكواد الخاصة بك: ca-app-pub-3940256099942544/6300978111

استبدل الصواب بالخطأ في isTesting عند الانتهاء من التجارب.

بعد ذلك ، بالنسبة للإعلانات البينية ، استبدل false بـ true في autoShow لإظهارها تلقائيًا.

قم بنشر وتحميل التطبيق على Google Play



***********************


***********************

لديك سؤال؟ دعنا نساعدك بالاتصال بنا عبر صفحة اتصل بنا