A PhoneGap + jQuery Mobile App

We have made a phonegap app. We used jquery mobile to build the UI, which saves us much time during the development.

The app is now running on iOS, android, windown phone.

The client is desirous to make the application work in different platforms, such as Android, iOS , WindowsPhone. This cross-platform application should include the functions such as a native-like UI, manipulating remote data, taking picture from both camera and photo library, saving configuration locally, uploading files and so on.

To see more details and screenshots: http://www.novasoftware.com/Case_Studies/Cases/PhoneGap_Plan_Management.aspx

If you need to outsource your phonegap development, please learn more about our phonegap development service

Three Most Important Skills For PhoneGap Developers

I have been developing PhoneGap apps for some time. A few days ago, a new member of our PhoneGap team asked me a question: what are the most important skills for a PhoneGap developer?

This blog shows my personal ideas on the above question. I'm open to see your opinions.

First, good understanding of Javascript OOP

The most important skills of a PhoneGap developer should be the javascript skills. And a javascript expert must know javascript OOP(object-oriented-programming) well.

There will be many javascripts in your PhoneGap apps. You will need to consider how to organize the javascripts, which will be quite different from common web applications. For common web apps, you probably use no javascript in OOP way. You probably write code like below:

$(document).ready(function(){
     $("#btnSave").click(function(){
         //todo: save the form
    })
});
    

But for PhoneGap apps, too much code like above will make your app hard to maintain. Here, I recommend you write your PhoneGap app in single-page-application, since it behaves more like native apps, instead of web apps, and it will be quite easy to navigate through pages.

In my PhoneGap experience, I found the below javascript OOP skills very important:

1. Class. Normally I use the below code to define a class.

       var ProductEditor = function(productId) {
           this.productId = productId;
       };
   
       ProductEditor.prototype.save = function(callback) {
           //todo: save the form
       };
   

2. Namespace. For example:

       if(window.demo == undefined) {
           demo = { };
       }
       if(demo.services == undefined) {
           demo.services = { };
       }
       
       //define a class under the namespace
       demo.services.ProductService = function () {
   
       };
   
       demo.services.ProductService.prototype.getProductById = function(id) {
           //todo: return product
       };
       
       //to use the service
       var service = new demo.services.ProductService();
       var product = service.getProductById(1);
   

3. Class inheritance.

       demo.services.EmailServiceProvider = function() {
           this.host = "smtp.gmail.com";
           this.port = 587;
       };
   
       demo.services.EmailServiceProvider.prototype.sendEmail = function(subject, body, to, cc) {
   
       };
   
       //define another that inherits the above provider
       demo.services.ContactUsEmailServiceProvider = function() {
           demo.services.EmailServiceProvider.call(this);
       };
   
       demo.services.ContactUsEmailServiceProvider.prototype = new demo.services.EmailServiceProvider();
       demo.services.ContactUsEmailServiceProvider.constructor = demo.services.ContactUsEmailServiceProvider;
   
       //override the parent method
       demo.services.ContactUsEmailServiceProvider.prototype.sendEmail = function(body) {
           demo.services.EmailServiceProvider.prototype.sendEmail.call(this, "contact us", body, "cail@shinetechchina.com");
       };
   
       //define new method
       demo.services.ContactUsEmailServiceProvider.prototype.saveToDB = function(body) {
   
       };
   

4. For other javascript OOP skills, you can google them.

Second, have the ability to handle touch events

Though in most cases, we don't need to handle touch events by ourselves, as the third-party libs ( jquery mobile, Nova PhoneGap framework, Sencha Touch, KendoUI, etc ) do it for us, we still need to know there are 3 very important touch events: touchstart, touchmove, touchend.

If you want to do custom scroll/click/drag/double click/long press/..., or any other amazing effects, you will need to work with the 3 events. If you want to learn more, Nova PhoneGap framework should be a good resource, as it handles the touchs in a simple way, and easy to read easy to learn.

Third, know well of PhoneGap API

• What features are supported by PhoneGap? What features are not?
• What are the free plugins?
• What kinds of projects are not suitable for to be developed in PhoneGap?

A PhoneGap developer should know the answers to the above questions well, and keep an eye on the API upodates because the PhoneGap team work productively.

References in this post

• Third-party libs that enhance your PhoneGap development: jquery mobile, Nova PhoneGap framework, Sencha Touch, KendoUI
• If you want to outsource your PhoneGap development, please take a look at our company website Nova Software (China).