√ انشاء تطبيقات اندرويد Android Apps والربح منها باستعمال تقنيات الويب

انشاء تطبيقات اندرويد Android Apps والربح منها باستعمال تقنيات الويب

7/10/2018

انشاء تطبيقات اندرويد Android apps باستعمال تقنيات الويب لا يتطلب الكثير من الوقت للتعلم. فشخصيا تعلمت كيف أنشر تطبيقي الأول على متجر جوجلا بلاي Google Play في أقل من اسبوع

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

Html
Css
Javascript
Jquery

يمكنك البدء الآن بتعلم دروس تصميم المواقع html وcss والتي قمنا مسبقا بنشرها على هذه المدونة.

لست مبرمجا

هناك أمر مهم وجب توضيحه، أنا لست مبرمج ولا اقوم بهذا كمهنة. ما حدث أنه كانت عندي بضعة أفكار وأردت إنشاء تطبيقات ولما طلبت من بعض المبرمجين اشترطوا أثمنة خيالية. حتى أن مبرمج للقيام بتصميم بسيط لا يتطلب أكثر من 10 دقائق طلب مني 300 دولار. المهم قررت أن أتعلم بنفسي وبدأت بالبحث حتى وجدت أنه يمكن عمل التطبيقات باستعمال تقنيات الويب. وتقنيات الويب أسهل بكثير من اللغات الأصلية (Native Lnaguages).

نوع التطبيقات التي أقوم بإنشاءها هي لمشاركة المحتوى فقط أي انها غير تفاعلية. عندما يتم تثبيتها فهي تقوم بعرض المحتوى بحيث لا يمكن للزائر انشاء حساب، أو التعليق أو إرسال الرسائل... مع ذلك، هذا لا يعني أن تقنيات الويب لا يمكنها تصميم تطبيقات تفاعلية، بل يمكنها ذلك.

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

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

شاهد مثال لتطبيق قمت بتصميمه والذي تجاوز الخمسين الف عملية تحميل.

ما الذي ستتعلمه

إنشاء تطبيق أندرويد تى لو لم تكن مبرمجا.
ربط التطبيق بمنصة الربح أدموب Admob.
توقيعه وتحويله لصيغة Apk
نشره على متجر جوجل بلاي.
تقنيات جعل التطبيق يحتل المراتب الأولى في عمليات البحث لزيادة عدد التحميلات.

أول خطوة هي تثبيت الأدوات التي ستحتاجها للقيام بالخطوات أعلاه.

الأدوات

قبل انشاء أول تطبيق، أنت بحاجة لتثبيت مجموعة من الأدوات:

1. أول شيء يجب تثبيته هو Node.js
2. قم بتبيت git.client.
3. برنامج أندرويد ستوديو Android Studio

بعد تثبيت الأدوات أعلاه، حان الوقت لتثبيت منصة كوردوفا Cordova

4. قم بفتح أدوات الأوامر على وندوز كمدير ثم أدخل الأمر التالي (أكتب في مربع البحث على وندوز cmd وستظهر الأداة):

npm install -g cordova

انقر على دخول من لوجة المفاتيح وسيتم البدء بتثبيتها. مدة التثبيت تعتمد على سرعة الإنترنت.

عمل أول تطبيق

لإنشاء تطبيق جديد اتبع الخطوات التالية (شاهد الفيديو):

أولا، قم بفتح أداة الأوامر.
ثانيا، أدخل الأوامر التالية بالتتابع:

cordova create marhaba com.folfoly.marhaba Marhaba
cd marhaba
cordova platform add android
cordova prepare android

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

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

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

cordova create marhaba com.folfoly.marhaba Marhaba
cd marhaba
cordova platform add android
cordova plugin add cordova-plugin-admob-simple
cordova prepare android

إذا لم يتم تثبيت أداة أدموب في الأمر رقم 4، استعمل الانترنت مع هذا الأمر:

cordova plugin add https://github.com/sunnycupertino/cordova-plugin-admob-simple

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

1. من أين تحصل على التصميم والمحتوى؟

أشرت أنني لست مبرمجا، وربما تتساءل كيف يمكن الحصول على التصميمات والمحتوى. شاهد لمعرفة السر:

2. تعديل محتوى التطبيق:

شاهد الشرح بالفيديو في الأسفل.

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

ما يهمنا هو مجلد www والذي يحتوي على ثثلاثة مجلدات أخرى:

css: يحتوي على ملفات css
img: يحتوي على الصور.
js: يحتوي على ملفات javascript
وملف واحد باسم index وهي الصفحة الرئيسية للتطبي والتي تظهر مباشرة عند فتح التطبيق على الهاتف.

الآن كيف تتم عملية التعديل؟

يجب أن تقوم بنقل ملفات تصميم التطبيق الى المجلدات المناسبة. مثلا لديك ملف css يجب نقله لمجلد css، لكن إذا كان الملف يحمل نفس الاسم لملف موجود مسبقا فيجب عليك تعديل الإسم وتغييره ثم ربطه داخل ملف html.
ثم يجب تعديل ملف html والذي يحمل اسم index إلى جانب ملف index.js الموجود في مجلد js. على اي الملفين يبدوان بهذا الشكل مع شرح ما يجب تعديله كما في الفيديو:

الكود بالأحمر هو ما يجب حذفه وتعويضه بالكود الخاص بك داخل وسم <body><body>
الكود باللون الازرق هو لربط ملف html بملف css. يمكنك اضافة ملفات css اخرى بشرط أن تكون مختلفة الاسم.
الكود بالأخضر هو لربط ملفات javascript ويمكنك كذلك اضافة ملفات اخرى.

تعديل ملف index:

قم بحذف الجزء المحدد بالأحمر وضع مكانه محتوى تطبيقك.

<!DOCTYPE html>

<html>
    <head>
        
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

الكود الخاص بملف index بالتطبيق الذي قمنا بانشاءه أصبح لهذا الشكل بعد تعديله:

تم اضافة ملف css اخر.
تم اضافة المحتوى.
وتم اضافة ملفات جافافسكريبت كذلك.

<!DOCTYPE html>

<html>
    <head>
        
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" href="css/styley.css">
      <link rel="stylesheet" href="css/stylex.css">
        <title>فكر مرتين</title>
    </head>
    <body>

هنا تم وضع محتوى التطبيق على شكل نصوص

  <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
<script  src="js/jquery.min.js"></script>
    <script  src="js/indexx.js"></script>
    </body>
</html>

تعديل ملف index.js الموجود في مجلد js:

قم بحذف الجزء المحدد بالأحمر.

سنعود لتعديل الملف عند اضافة الاكواد الخاصة باعلانات أدموب.

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

شاهد الفيديو:

تعديل الصور والأيقونات مع اضافة منصة أندرويد

سنعود لأداة الأوامر بعد تعديل الصور والأيقونات على برنامج فوتوشوب.

فتح التطبيق على برنامج أندرويد استوديو Android Studio

سيتم توقيع التطبيق وتثبيته على هاتف جوال اندرويد:

ربط التطبيق بمنصة الإعلانات أدموب Admob للربح منها

للقيام بذلك سنحتاج لتعديل ملف index.js الموجود في مجلد js. وسنحتاج لاضافة الكودين التاليين:

الكود الأول: الحزء المحدد بالأحمر هو مكان وضع شفرة أو كود الاعلان والذي تحصل عليه من حساب أدموب.

//initialize the goodies
function initAd(){
        if ( window.plugins && window.plugins.AdMob ) {
            var ad_units = {
                ios : {
                    banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx', //PUT ADMOB ADCODE HERE
                    interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx' //PUT ADMOB ADCODE HERE
                },
                android : {
                    banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx', //PUT ADMOB ADCODE HERE
                    interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx' //PUT ADMOB ADCODE HERE
                }
            };
            var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;

            window.plugins.AdMob.setOptions( {
                publisherId: admobid.banner,
                interstitialAdId: admobid.interstitial,
                adSize: window.plugins.AdMob.AD_SIZE.SMART_BANNER, //use SMART_BANNER, BANNER, LARGE_BANNER, IAB_MRECT, IAB_BANNER, IAB_LEADERBOARD
                bannerAtTop: false, // set to true, to put banner at top
                overlap: true, // banner will overlap webview
                offsetTopBar: false, // set to true to avoid ios7 status bar overlap
                isTesting: false, // receiving test ad
                autoShow: true // auto show interstitial ad when loaded
            });

            registerAdEvents();
        } else {
            //alert( 'admob plugin not ready' );
        }
}
//functions to allow you to know when ads are shown, etc.
function registerAdEvents() {
        document.addEventListener('onReceiveAd', function(){});
        document.addEventListener('onFailedToReceiveAd', function(data){});
        document.addEventListener('onPresentAd', function(){});
        document.addEventListener('onDismissAd', function(){ });
        document.addEventListener('onLeaveToAd', function(){ });
        document.addEventListener('onReceiveInterstitialAd', function(){ });
        document.addEventListener('onPresentInterstitialAd', function(){ });
        document.addEventListener('onDismissInterstitialAd', function(){ });
    }
//display the banner
function showBannerFunc(){
window.plugins.AdMob.createBannerView();
}
//display the interstitial
function showInterstitialFunc(){
window.plugins.AdMob.createInterstitialView(); //get the interstitials ready to be shown and show when it's loaded.
window.plugins.AdMob.requestInterstitialAd();
}

الكود الثاني:

initAd();
showBannerFunc();
showInterstitialFunc();

قم بانشاء حساب على أدموب Admob (يمكنك تسجيل الدخول باستعمال حساب Gmail) ثم شاهد كيف يتم ذلك في الفيديو التالي:

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

حانت لحظة اتاحة التطبيق الجديد للتحميل وذلك بنشره على متجر جوجل بلاي. أول شيء أنت بحاجة للحصول على حساب مع أداء عشرين دولار.

إذا كنت لا تستطيع شراء الحساب، يمكنك نشر التطبيق على المنتديات ومواقع تحميل ملفات APK.

لا تنسى متابعة قناتنا على يوتيوب حيث سيتم نشر الدروس بالفيديو ثم صفحتنا على فيس بوك.

انشاء تطبيقات اندرويد

ابراهيم زكاغ 7/10/2018