Following are seven simple steps to write hello world project using HTML5
- Download and install PhoneGap
- Create a new Android App Project
- Change the project from Java to Javascript
- Prepare the Activity-Class to work with PhoneGap
- Create a simple index.html file to run on the App
- Prepare the Manifest-file before running it
- To run the App
Step 1 : Create Android Project in Eclipse
Step 2 : First create a new folder called www and a new file called index.html. both in the project folder assets
Step 3 : Copy the Cordova.js file[Take from the phoneGap folder which we have installed] in assets folder and Cordova.jar[Take from the phoneGap folder which we have installed] file in the lib folder and xml [Take from the phoneGap folder which we have installed] folder in the values of our android project.
Step 4 : In the eclipse locate the src-folder and open the MainActivity.java class in it and change it that way you'll see bellow:
package com.example.phonegapexample;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends DroidGap {
// @Override
// protected void onCreate(Bundle savedInstanceState) {
// super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
// }
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Step 4 : In the eclipse locate the src-folder and open the MainActivity.java class in it and change it that way you'll see bellow:
package com.example.phonegapexample;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends DroidGap {
// @Override
// protected void onCreate(Bundle savedInstanceState) {
// super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
// }
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Step 5 : Content of Index.html
<!DOCTYPE HTML><html><head><title>First App</title><script src="cordova-2.2.0.js"></script><script>function onLoad(){document.addEventListener("deviceready", onDeviceReady, true);}function onDeviceReady(){ navigator.notification.alert("PhoneGap is working!!");}</script></head><body onload="onLoad();"><h1>Welcome to PhoneGap</h1><h2>Edit assets/www/index.html</h2></body></html>
Step 6 : Prepare the Manifest-File before launching
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
Step 7 : Running the App[Same procedure of how we run usual android App like Rus as Android Application]
