Create Cordova Mobile Application For Cross platforms Android & IOS.

Hybrid Mobile Application are most easy to develop there are so many frameworks out there for creating mobile application :- i.e PhoneGap , Ionic  , Sencha Touch and many more

 

What is Cordova ?

“Apache Cordova is an open source mobile development Plugin which interact with direct OS by using Custom or Standard API’s so it makes so easy to make android or IOS application with website code HTML , JS , CSS etc. “

 

Understand the Architecture of Hybrid Mobile Application.

..cordova

Dependencies

1. Need SDK installed.

2. Java 1.8 version or Greater.

3.Node JS installed.

Most Common errors while Configuring setup…

  • Environment variable for JAVA_HOME , ANDROID_HOME (Which is SDK path)
  • if you have version 1.7 JDK then update first before installing Cordova on your machine.
  • if your familiar with Bash commands then you can install Git.

STEP 1:

install node JS in your machine and check by typing command “npm” in cmd.

npm-cmd

If it works as same in above picture than your good go.

STEP 2:

Check Environment Variables

1.JAVA_HOME

2.ANDROID_HOME

veriable

STEP 3:

To Install Cordova You need to type following command

Windows cmd :- “npm install –g cordova –save”

Hit Enter after that…

image

 

STEP 3:

the command to create Project Structure

“cordova create hello com.example.hello HelloWorld”

createCordova

STEP 4:

the command will create Project Structure like this

Cordova Structure

  • Hooks

Hooks is Allow you to perform special activities with Cordova commands like

Before or after when you every time build application

http://cordova.apache.org/docs/en/6.x/guide/appdev/hooks/index.html#page-toc-source

 

  • Platforms

In this cordova will create platforms for mobile application like android and IOS.

  • www

this Directory is used to store all application View content which is nothing but your HTML , JS , CSS.

command will create Project Structure like this

  • Config.xml

<?xml version=’1.0′ encoding=’utf-8′?>
<widget id=”com.example.hello” version=”1.0.0″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″> //package name and version
<name>HelloWorld</name>//Display app name
    <description>
A sample Apache Cordova application that responds to the device ready event.
</description>// any description you want to give.
<author email=tejas@techdrop.in href=http://techdrop.in>//Email Id and Web address.
        Apache Cordova Team
</author>
<content src=”index.html” />//first page to load
<plugin name=”cordova-plugin-whitelist” spec=”1″ />
<access origin=”*” />
<allow-intent href=”http://*/*” />
<allow-intent href=”https://*/*” />
<allow-intent href=”tel:*” />
<allow-intent href=”sms:*” />
<allow-intent href=”mailto:*” />
<allow-intent href=”geo:*” />
<platform name=”android”>
<allow-intent href=”market:*” />
</platform>
<platform name=”ios”>
<allow-intent href=”itms:*” />
<allow-intent href=”itms-apps:*” />
</platform>
</widget>

 

STEP 5:

Cd AppName

Where AppName in above example is Hello

Type following command to create platform for android and IOS

  • Android :- “cordova platform add android –-save”
  • IOS :- “cordova platform add ios–-save”

For remove platform just replace add with Remove.

addpltform

STEP 6:

To Build the Project Run Following command

Build Android :- “cordova build android”

Build Ios :- “cordova build ios”

build

STEP 7:

Run the application

cmd : – “ cordova emulate android ”

run

Starting Emulator….

run2

Successfully Run The Application…

techdrop

How to Integrate Admob(Bottom and Fullscreen advertise) with Andoid Example with code.


PYes…. Now You can earn more Money with help of Google adMob its will show advertisement on your application which will get you paid. In this blog will Create Sample android application full code.

  1. First You Need Ad Mob account.
  2. Generate Code for advertisement.
  3. Generate AdUnitID use it in code.
  4. Create Android Application.

Follow The Steps to Create Bottom and FullScreen advertisement in android.

Step 1: Create android project and Use following code for MainActivity.java

package com.example.tejas.adbannerbottom;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.InterstitialAd;


public class MainActivity extends AppCompatActivity {

    private InterstitialAd mIntertitial;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        AdView adView = (AdView) findViewById(R.id.ad_view); //add the cast
        AdRequest adRequest = new AdRequest.Builder()
                .addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
                .build();
        adView.loadAd(adRequest);


        mIntertitial=new InterstitialAd(this);
        mIntertitial.setAdUnitId("ca-app-pub-6619327831342547/5690314114");
        AdRequest request=new AdRequest.Builder()
                .addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
                .build();
        mIntertitial.loadAd(request);


        Button showAdButton=(Button)findViewById(R.id.retry_button);
        showAdButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mIntertitial.isLoaded())
                {
                    mIntertitial.show();
                }
            }
        });
    }
}

Step 2: Use Xml layout code for activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MergeRootFrame">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Tejas Gawali"
    android:id="@+id/textView" />

<com.google.android.gms.ads.AdView
    android:id="@+id/ad_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    ads:adSize="BANNER"
    ads:adUnitId="@string/banner_ad_unit_id"/>

<TextView
    android:id="@+id/game_title"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="50dp"
    android:text="Click Ad"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
    android:id="@+id/timer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/game_title"
    android:layout_centerHorizontal="true"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<Button
    android:id="@+id/retry_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="Click here" />

</RelativeLayout>

Step 3: You need to change Manifest.xml for getting some permissions.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tejas.adbannerbottom">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <application
        android:allowBackup="true"
        android:icon="@drawable/logo"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!--This meta-data tag is required to use Google Play services.-->
        <meta-data android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!--Include the AdActivity configChanges and theme. -->
        <activity android:name="com.google.android.gms.ads.AdActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
            android:theme="@android:style/Theme.Translucent" />

    </application>

</manifest>

Step 4: Run the Code...

Most Common Mistakes

1: Do edit Manifest.xml
2: while creating app or after creation of application click checkbox for admob integration.

  Go to Project Structure and Click Ads and Check the Checkbox of AdMob as it is given in the Below image.

admobcheckbox



Please Post Comments if you want any other problems.