Create android application by using standard web technologies such as HTML5, CSS3, and JavaScript

The goal is to build applications for mobile devices using well known standard web technologies like JavaScript, HTML5, and CSS3, instead of device-specific languages such as Java or Objective-C.
1 answer

Create android application with phonegap using HTML5, CSS3, JavaScript

PhoneGap allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's sensors, data, and network status.
Since the front end of the application is built using web technologies, a PhoneGap application with the exact same source code can be deployed across different platforms. It should be considered that phonegap has also some limitations as the front end of the application is built in JavaScript. A large number of applications rely on background threads to provide a smooth user experience, but as PhoneGap APIs are built using JavaScript which is not multi-threaded background processing is not supported. In addition a number of native APIs are not yet supported by PhoneGap’s APIs

A "Hello World" application can be created as follows:

1. Install SDK + Cordova

Download and install Eclipse Classic (Eclipse 3.4+) from http://www.eclipse.org/downloads/
Download and install Android SDK from http://developer.android.com/sdk/index.html
Download and install ADT Plugin http://developer.android.com/sdk/eclipse-adt.html#installing
Download the latest copy of PhoneGap from "http://phonegap.com/download" and extract its contents. We will be working with the Android directory.

2A. Setup your PATH environment variable on Mac OS

Open the Terminal program (this is in your Applications/Utilites folder by default).
Run the following command

touch ~/.bash_profile; open ~/.bash_profile

This will open the file in the your default text editor.
You need to add the path to your Android SDK platform-tools and tools directory. In my example I will use "/Development/android-sdk-macosx" as the directory the SDK is installed in. Add the following line:

export PATH=${PATH}:/Development/android-sdk-macosx/platform-tools:/Development/android-sdk-macosx/tools

Save the file and quit the text editor.
Execute your .bash_profile to update your PATH.

source ~/.bash_profile

Now everytime you open the Terminal program you PATH will included the Android SDK.

2B. Setup your PATH environment variable on Windows

From the Desktop, right-click My Computer and click Properties.
Click Advanced System Settings link in the left column.
In the System Properties window click the Environment Variables button.
Select the PATH variable from the System variables section.
Select the Edit button.
You need to add the path to your Android SDK platform-tools and tools directory. In my example I will use "C:\Development\android-sdk-windows" as the directory the SDK is installed in. Append the following text into the text box:

;C:\Development\android-sdk-windows\platform-tools;C:\Development\android-sdk-windows\tools

Save your edit. Close the Environment Variables dialog.
Additionally, you may need to include %JAVA_HOME%\bin to your PATH as well. To check to see if this is required, run a command prompt and type java. If the program can not be found add %JAVA_HOME%\bin to the PATH. You may need to specify the full path instead of using the %JAVA_HOME% environment variable.
Finally, you may need to include %ANT_HOME%\bin to your PATH as well. To check to see if this is required, run a command prompt and type ant. If the program can not be found add %ANT_HOME%\bin to the PATH. You may need to specify the full path instead of using the %ANT_HOME% environment variable.

3. Setup New Project

In a terminal window, navigate to the bin directory within the android subfolder of the Cordova distribution.

Type in ./create then press "Enter"

is the path to your new Cordova Android project
is the package name, e.g. com.YourCompany.YourAppName
is the project name, e.g. YourApp (Must not contain spaces)

Launch Eclipse, and select menu item New Project
Select the directory you used for
Click Finish.

4. Hello World

Create and open a new file named index.html in the assets/www directory. Paste the following code:

Cordova

Hello World

5. Deploy to Emulator

Right click the project and go to Run As > Android Application
Eclipse will ask you to select an appropriate AVD. If there isn't one, then you can create one as follows from the Android Virtual Device Manager:
- click "New" button from the Android Virtual Device Manager
- fill up the required information and click OK

6. Deploy to Device

Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications > Development)
Right click the project and go to Run As > Android Application

The instalation tutorial can be found also under:
http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md...

Taggings: