الرئيسية الربح من الانترنت شرح انشاء تطبيق أندرويد من الصفر ورفعه على متجر جوجل بلاي

شرح انشاء تطبيق أندرويد من الصفر ورفعه على متجر جوجل بلاي

شرح انشاء تطبيق أندرويد من الصفر ورفعه على متجر جوجل بلاي

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



تقنيات الويب يقصد بها:
  • HTML
  • CSS
  • JavaScript
  • وغيرها...

المنصة التي سنستخدمها لعمل تطبيق أندرويد هي Cordova، وهي من المنصات الأكثر  استخداما لتصميم التطبيقات الهجينة Hybrid Applications والتي تعمل في جميع الأنظمة مثل Android و iOS.

عمل تطبيقات أندرويد

أدوات العمل

ستحتاج مجموعة من الأدوات لانشاء تطبيق أندرويد جديد، وهي:
1. Node.js
2. git.client
3. Android Studio
4. Cordova

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

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

npm uninstall -g cordova

وثانيا، لتثبيت النسخة الجديدة:

npm install -g cordova@9.0.0

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

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


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


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

1. أولا:

cordova create appname com.yourname.appname appname

عوض appname بالإسم الذي تريد اختياره للتطبيق.


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

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

ملفات تطبيق اندرويد

2. ثانيا:

cd appname

3. ثالثا:


cordova platform add android

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

4. رابعا:

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ضع الأي دي الخاص بالتطبيق هنا"
قم بالدخول ل Admob لانشاء حساب وعمل تطبيق للحصول على ال ID.

5. خامسا:

cordova prepare android

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

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

تعديل الأيقونات icons


مسار المجلد الذي يحتوي على الأيقونات:
appname\platforms\android\app\src\main\res

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

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


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



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

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

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

يمكن الآن فتح المشروع في برنامج أندرويد استوديو عبر استيراده من المجلد الذي تم إنشاءه.

إضافة إعلانات أدموب

داخل مجلد js ستنشئ ملف جديد بصيغة .js وسميه كما شئت مثلا admob.js وستضيف هذا الكود داخله:

<div class="codeview">
var admobid = {}
if (/(android)/i.test(navigator.userAgent)) { // for android & amazon-fireos
admobid = {
banner: 'ca-app-pub-3940256099942544/6300978111',
interstitial: 'ca-app-pub-3940256099942544/1033173712',
}
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
admobid = {
banner: 'ca-app-pub-3940256099942544/2934735716',
interstitial: 'ca-app-pub-3940256099942544/4411468910',
}
}

document.addEventListener('deviceready', function() {
admob.banner.config({
id: admobid.banner,
isTesting: true,
autoShow: true,
})
admob.banner.prepare()

admob.interstitial.config({
id: admobid.interstitial,
isTesting: true,
autoShow: false,
})
admob.interstitial.prepare()

document.getElementById('showAd').disabled = true
document.getElementById('showAd').onclick = function() {
admob.interstitial.show()
}

}, false)

document.addEventListener('admob.banner.events.LOAD_FAIL', function(event) {
console.log(event)
})

document.addEventListener('admob.interstitial.events.LOAD_FAIL', function(event) {
console.log(event)
})

document.addEventListener('admob.interstitial.events.LOAD', function(event) {
console.log(event)
document.getElementById('showAd').disabled = false
})

document.addEventListener('admob.interstitial.events.CLOSE', function(event) {
console.log(event)

admob.interstitial.prepare()
})
:قم بالتعديلات التالية على الكود

  • عوض أكواد الوحدات الإعلانية بإضافة الأكواد الخاصة بك: ca-app-pub-3940256099942544/6300978111
  • عوض true ب false في isTesting عندما تنتهي من التجارب.
  • ثم بالنسبة للأعلانات البينية عوض false ب true في autoShow لإظهارها بشكل اتوماتيكي.

نشر ورفع التطبيق على جوجل بلاي

لنشر التطبيق، قم بإنشاء حساب في Google Play Console والذي يكلف 20  دولارا تدفع مرة واحدة بعدها يمكن نشر ما لا نهاية من التطبيقات.

تحديث التطبيق ورفعه مرة أخرى

لتحديث تطبيق أندرويد، ستحتاج لاستعمال نفس المفتاح الذي استخدمته لتوقيع النسخة الأولى. وإلا، فإن المتجر لن يقبل ملف apk إذا كان بمفتاح آخر.





مواضيع مشابهة
On.