Friday, 13 September 2013

Hybrid mobile application native packaging using PhoneGap in Android

Comrades,

In my previous blog, I have described how PhoneGap works in general and what are the system requirements that you need. Before further reading I recommend to read that first.  Lets reiterate those for Android here.

Android platform can be set up in Windows, Mac or Linux systems. Make sure you have following items ready in your system.

  • Eclipse + ADT plugin
  • Android SDK Tools
  • Android Platform-tools
  • The latest Android platform
  • The latest Android system image for the emulator
  • Java 1.6 +

Lets begin with the first Android project





PhoneGap latest releases are coming up with CLI (command line tools) whereby we can easily create an application project in any platform. Once created it becomes PhoneGap integrated application project. But you can also create your native application project and convert that into a PhoneGap integrated project. I will be explaining both of them here.

Use CLI


Open console/command prompt and navigate to the lib/android/bin of the PhoneGap installation location and create a project as follows.

 create PathTONewProject [ PackageName AppName ]  
   PathTONewProject : The path to where you wish to create the project  
   PackageName   : The package for the project
   AppName     : The name of the application/activity
 
Examples:  
   create C:\Users\anonymous\Desktop\MyProject  
   create C:\Users\anonymous\Desktop\MyProject io.Cordova.Example AnApp  

The project can be opened in eclipse using the option import existing android application project.
Sometimes you may not find difficulty to imort the project. This is due to a defect in eclipse side. You can overcome that by pointing eclipse to an empty workspace and import the already created project.

The project has a sample application in built. You can find it inside assets/www folder. You can replace the existing application with your code at this place.

This is the structure of the generated project folder.

Enhance an empty android application project to PhoneGap enabled

Follow these steps to create PhoneGap enabled android application project.

  1. Open eclipse and select 'new android application project'.
  2. Copy PhoneGap2.9.0/lib/android/xml folder into res folder of your android application project.
  3. Copy cordova-2.9.0.jar into libs folder.
  4. Open MainActivity.java and change the parent class as follows.

 public class example extends DroidGap  
 {  
   @Override  
   public void onCreate(Bundle savedInstanceState)  
   {  
     super.onCreate(savedInstanceState);  
     // Set by <content src="index.html" /> in config.xml  
     super.loadUrl(Config.getStartUrl());  
     //super.loadUrl("file:///android_asset/www/index.html")  
   }  
 }  

    5. You also have to add following snippet to your AndroidManifest.xml

 <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" />  
Update user permission based on your app's requirements.

Now you are ready to build the application. You can directly deploy it your device or simulator using eclipse. Right click on the project and select 'Run as Android application'. Choose your device from the list and launch.

If you want to have a detailed look into hybrid app development and packaging, I have written another blog with the context of Sencha Touch 2.2.1.

Happy coding!



No comments:

Post a Comment