May 15, 2014

PhoneGap - building native mobile applications using HTML, CSS and JavaScript

PhoneGap is an HTML5 application framework to develop native applications for mobile devices through integrations of web technologies, HTML5, CSS (CSS3), and JavaScript
The software underlying PhoneGap is Apache Cordova. The software was previously called just "PhoneGap", then "Apache Callback". Apache Cordova is open source software. ... http://en.wikipedia.org/wiki/PhoneGap
Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.


Prerequisites: Using PhoneGap to develop native Apps for smartphones or tablets has to 
Install SDKs for each platform you wish to target. For example, developing Android Apps on Windows platform needs to install ADT (Android Developer Tools: http://developer.android.com/sdk/index.html, download ADT for Windows). Therefore, PhoneGap SDK builds Android Apps based on the ADT installed in your platform with PhoneGap.

To add support or rebuild a project for any platform, you need to run the command-line interface (CLI) from the same machine that supports the platform's SDK. The CLI supports the following combinations:

  • iOS (Mac)
  • Amazon Fire OS (Mac, Linux, Windows)
  • Android (Mac, Linux, Windows)
  • BlackBerry 10 (Mac, Linux, Windows)
  • Windows Phone 7 (Windows)
  • Windows Phone 8 (Windows)
  • Windows 8 (Windows)
  • Firefox OS (Mac, Linux, Windows)

Install PhoneGap

The document of PhoneGap install is not clear. If you follow the steps and instructions you'll be frustrated. Following steps show the process of building PhoneGap environment for developing Android Apps on Windows 8 platform. 

1. Install NodeJS
Click INSTALL to download setup app
After install NodeJS in your Windows, you'll see all program shortcut icons appearing in Applications of Win8 Metro UI. Right click the icon and put them in the Metro HOME or the Task Bar of traditional desktop.
Check NodeJS program & document links shown in Applications of Windows 8 Metro UI
2. Install PhoneGap through "Node.js command prompt"
All necessary environment settings are integrated in the command line tool.
C:\> npm install -g phonegap
npm is the official package manager for Node.js (Node Package Manager) that runs through the command line and manages dependencies for an application. npm is written entirely in JavaScript, and runs on the Node.js platform. ... http://en.wikipedia.org/wiki/Npm_(software)
3. Download ADT (Android Developer Tool): http://developer.android.com/sdk/index.html
Extract the zip file and copy the whole directory to disk: C: in this example.
I renamed "C:\adt-bundle-windows-x86_64-20140321" to "C:\ADT"

4. Set environment variables

Right-click on Computer / Properties / Advanced System Settings / Environment Variables / select PATH variable / press Edit. Then, append Android development paths to the PATH as the example that I put in "C:\ADT\..."
;C:\ADT\sdk\platform-tools;C:\ADT\sdk\tools
Now, you can try to execute following commands to build PhoneGap App for testing.
$ phonegap create my-app
$ cd my-app
$ phonegap run android
        
Create PhoneGap App: my-app
Create PhoneGap App project: phonegap create my-app
While execute command "phonegap run android", you might get the following error message, then copy and paste to do Google search.
Error: ERROR : executing command 'ant', make sure you have ant installed and added to your path.
You'll get the following link information: http://cleancodedevelopment-qualityseal.blogspot.nl/2012/11/how-to-install-phonegap-for-android.html. Following the instruction to install Apache Ant (apache-ant-1.9.4-bin.zip).
Apache Ant is a software tool for automating software build processes. It is similar to Make but is implemented using the Java language, requires the Java platform, and is best suited to building Java projects (e.g. Android App). ... http://en.wikipedia.org/wiki/Apache_Ant 
Start > System Setting > System and Maintenance > System > Advanced System Settings > Environment variable > by System variable click the button new > and then type in: ANT_HOME and C:\Program Files\apache-ant-1.9.4 into the fields. To check the setting, execute "echo %ANT_HOME%" in the command line.
Set environment variable: ANT_HOME
Again, add ";%ANT_HOME%\bin" to the end of system variable Path. Then, try again! Unfortunately, you must set environment for JDK.
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Click "Accept the License" and download jdk for your platform
After download jdk and install it, you have to set the environment for JAVA_HOME to C:\Program Files\Java\jdk1.8.0_05, for example. The jdk path depends on the version of your installation. The same process for setting the variable: Start > System Setting > System and Maintenance > System > Advanced System Settings > Environment variable > by System variable click the button new > and then type in: JAVA_HOME and C:\Program Files\Java\jdk1.8.0_05 into the fields. To check the setting, execute "echo %JAVA_HOME%" in the command line.

Again, add ";%JAVA_HOME%\bin" to the end of system variable Path. Then, try again! 

Command successfully executed
The Android Emulator was opened to install the PhoneGap Android App.
You might wait for several minutes, it depends on your HW, 8GB RAM is suggested.


The first PhoneGap App "HelloWorld" was installed in the emulator.
You might get following message due to no emulator image was installed.
ERROR : No emulator images (avds) found, if you would like to create an avd follow the instructions provided here: http://developer.android.com/tools/devices/index.html
You must build at least one AVD (Android Virtual Device) as an emulator, in which the PhoneGap Android App can run on the device. As my ADT put in C:\ADT, execute "C:\ADT\eclipse\eclipse.exe" to open Java - ADT IDE (Integrated Development Environment).
Click Window & select Android Virtual Device Manager

Select one Device you like to create AVD
In this way, "phonegap run android" will successfully open the emulator to run your PhoneGap Android App.

No comments :

Post a Comment