PhoneGap Development Best Practice(1) - Using Mock

Here I'd like to share with you a phonegap development practice from our phonegap team -- using mock. Then you don't have to test phonegap API related functions on your mobile devices, instead you can test the functions in web browser. You will find it saving you a lot of time.

It's so easy to use

We name the mock file as cordova.mock.js. You can switch beween mock and real cordova by adding/deleting the ".mock" to/from the script reference line.

Using mock:

<script src="cordova.mock.js" type="text/javascript"></script>
        

Using real:

<script src="cordova.js" type="text/javascript"></script>
        

Write the rest of code just like you are using the real cordova.js, becasue the two files works the same.

How to make the cordova.mock.js?

We have created a github repository for cordova.mock.js. It's now not 100% complete, but we'll continue to mock more phonegap API to it. We also welcome you to contribute to this repo.

You can find it on: https://github.com/leotsai2012/phonegapmock

Part of sample code.

if(window.navigator == undefined) {
    window.navigator = { };
}
navigator.contacts = {
    find: function(contactFields, contactSuccess, contactError, contactFindOptions) {
        var contacts = [
            {
                displayName: "Mike",
                name: {
                    familyName: 'R',
                    formatted:'Mike R'
                },
                phoneNumbers: [
                    {
                        type: "string",
                        value: "0722829323123",
                        pref: false
                    }
                ]
            },
            {
                displayName: "Leo",
                phoneNumbers: [
                    {
                        type: "string",
                        value: "03837234343",
                        pref: false
                    },
                    {
                        type: "string",
                        value: "005543834",
                        pref: true
                    }
                ]
            }
        ];
        contactSuccess(contacts);
    }
};

var ContactFindOptions = function() {
    this.filter = "";
    this.multiple = false;
};

You can also make it by your self according to your project requirements. It's really easy.

How do you like this idea? Please feel free to make any comment.

Contact US

Learn Our PhoneGap Development Service

New demo added to nova phonegap framework

We have made a new demo to our phonegap framework. It is used to manage your anual targets. I have been using it for months and find it quite useful.

There is currently no published android or iOS version, only source code available.

Checkout the below path:

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).

Entity Framework For Html5 SQLite, PhoneGap Data Access Framework

Notice: The HTML5 SQLite library has been picked out from Nova PhoneGap Framework, so it is a standalone library now. The latest source code and documentation have been moved to github https://github.com/leotsai/html5sqlite

Nova PhoneGap Framework has developed a framework for data access in html5 SQLite. It works in a similar way with the C# EntityFramework (EF). See documentation

Take a look at the below code then you will know it's so easy to define your database and entities, and query, add, update, delete entities from the db.

// define dbContext & entities------------------------------------
var DemoDataContext = function () {
    nova.data.DbContext.call(this, "Demo",                                                                                                                   style="color: #a31515">"1.0", "Demo DB", 1000000);

    this.users = new nova.data.Repository(                                                                                                              style="color: blue">this, User, "users");
    this.roles = new nova.data.Repository(                                                                                                              style="color: blue">this, Role, "roles");
};

DemoDataContext.prototype = new nova.data.DbContext();
DemoDataContext.constructor = DemoDataContext;

var User = function () {
    nova.data.Entity.call(                              style="color: blue">this);
    this.name = "";
    this.password = "";
    this.birthYear = 1980;
    this.createdDate = new Date();
    this.deleted = false;
};
User.prototype = new nova.data.Entity();
User.constructor = User;

var Role = function () {
    nova.data.Entity.call(                              style="color: blue">this);
    this.name = "";
    this.createdDate = new Date();

};
Role.prototype = new nova.data.Entity();
Role.constructor = Role;
// end define dbContext & entities------------------------------------

// service methods----------------------------------------------------
function getAllUsers(callback) {
    new DemoDataContext().users.toArray(function (users) {
        alert(users.length);
        callback(users);
    });
}

function getUserByName(name, callback) {
    new DemoDataContext().users.where("name='" + name + "'").toArray(                                                                                                                                                                                style="color: blue">function (users) {
        callback(users.firstOrDefault());
    });
}

function addRole(roleName, callback) {
    var role = new Role();
    role.name = roleName;
    var db = new DemoDataContext();
    db.roles.add(role);
    db.saveChanges(callback);
}

function updateUserPassword(username, password, callback) {
    getUserByName(username, function (user) {
        if (user == null) {
            throw "no user found.";
        }
        user.password = password;
        var db = new DemoDataContext();
        db.users.update(user);
        db.saveChanges(callback);
    });
}

function deleteUserByName(name, callback) {
    getUserByName(name,                             style="color: blue">function (user) {
        if (user == null) {
            throw "no user found.";
        }
        var db = new DemoDataContext();
        db.users.remove(user);
        db.saveChanges(callback);
    });
}

// end service methods----------------------------------------------------

General Ideas On The Architecture Of PhoneGap Project

Though PhoneGap uses web technologies (html, css, js) to build apps, PhoneGap projects should be quite different from web projects.

Differences between web projects and PhoneGap projects

For web projects, every page is loaded by changing the url. Each page works like a standalone application. We can say, a web project has many javascript applications. In each web page, we need to load all necessary javascript files(e.g. jQuery), because it is a standalone application.

But for PhoneGap projects, the whole project is an application, just like the desktop applications. So there should be only one main window that contains all resources/controls/data etc. We don’t need to reload all base javasccript/css files on changing the “pages”(a page in PhoneGap is only a control).

The index.html

I suggest the index.html should be the startup page of your PhoneGap application. Why? PhoneGap build service takes the index.html as the first page of your app by default.

The index.html only contains the base javascript and css files that are used in the whole app. It shouldn’t contain any other html tags than the body tag. All other pages are loaded through ajax into this “body”.

To make a better index.html, I suggest add a div#body into the body tag. And other pages are loaded into #body. Then you can add other contents(html, css link) to body tag as base template.

The application.js

Your project should have an “application.js” or “app.js”. There is only one instance of Object in the app.js. Let’s named it as “app”. Some global variables are defined as properties of the app instance, for example, app.settings may contain the settings. Some methods should be defined, such as app.start(), app.exit().

Make sure there is only one instance of the application, because many app instances make no sense. I don’t like KendoUI’s code about application in PhoneGap, it writes in the docs:

new kendo.mobile.Application($(document.body), { hideAddressBar: false });

The above code means you can new many instances of the application, but which is definitely making no sense for PhoneGap.

Page Navigations

As mentioned above, all contents are loaded into the div#body via ajax calls. You don’t need to change the URL address as your app is not running in browser. As there may be many page navigations, I suggest you add some methods to app instance for quick usage. For example, app.gotoPage(url), app.goBack(). Then you have full control of your pages, and there will be no flashings on pages changing.

Conclusions:

All of the above are only my personal opinions. I’m open to your comments, and looking forward to any different ideas.

I have worked out a basic solution. You can find all source code on http://cordova.codeplex.com. From the source code you can know how the index.html and application.js work.

References:

1. All related source code: http://cordova.codeplex.com
2. Our company is doing PhoneGap development outsourcing. Contact Us to request PhoneGap development service.

Who Is Murdering PhoneGap? It's jQuery Mobile

So many people are now arguing the bad performance of PG apps, because of that, many developers stopped entering the army of PG development.

Is PG really so bad?

The answer from me is absolutely NO.

I have to admit that there are so many bad PG apps. Why? Who made them? The most PhoneGap developers. But the developers are innocent of murdering PhoneGap. The real killer is jQuery Mobile.

The bad choice of jQuery Mobile for PhoneGap apps:

1. Not PhoneGap targeted.

jQuery Mobile is not targeting only for PhoneGap apps, instead, it’s developed for mobile WEBSITES. The pages/scripts/resources are organized in a website way, not a native app way. Take pages navigation for an example, a web app navigates to another page by changing the URL, but for desktop/native apps, we new an instance and put it into a wrapper control, the wrapper has full control to the new page, and can receive events of the page, which is quite different from web apps. So, if you are using jQuery Mobile to develop PhoneGap apps, you are probably missing a good application architecture.

2. Too fat & bad performance.

jQuery Mobile does provide very-very many controls/functions, but only a very small part of them are used in apps, which causes much waste of performance. I’d like to take a simple function for example, the scroll. As we know, most mobile browser cores don’t support fixed position, so we have to write custom code to do it and handle the scrolling. jQuery Mobile writes a lot of code for this function, at the same time, a few related touch functions are also provided, but in most cases, the developers only need the scroll. In a word, jQuery Mobile handles too much things for a simple action.

3. Bad documentation.

The jQuery Mobile documentation is not really documentation, but examples. Yeah, they are good examples, but absolutely bad documentation. Not all features are included in the examples, they missed many. This is quite hard for the developers. As some features are hidden from the developers, many developers have to write ugly code.

4. Critical bugs/issues not fixed.

There are so many posts about jQuery mobile scrolling and page flashing. Unfortunately, I don’t see a remarkable answer to their questions. I asked a few developers, they seem to have given it up, and leave the bug/issue as is.

How to make a good PhoneGap app? Here I can share some general ideas:

• 1. Write your own javascript PhoneGap architecture if you are good at JavaScript. If you are not, you can follow me on codeplex where you can find PhoneGap architecture and demos.
• 2. Don not write future code. You don’t need to write code that “may be used in future”, instead, write code that is really used.
• 3. Resolve the critical bugs/issues by yourself. To make a good PhoneGap app, you must first be a JavaScript master, which means you can read others’ code and find the best solution for best of your app.

If you want to develop the best PhoneGap app, you can:

• Follow my PhoneGap team on codeplex: http://cordova.codeplex.com/
• Contact my PhoneGap team for service, or any questions, ideas.

If you are looking for PhoneGap programmers or PhoneGap developers, please feel free to contact us. Free quote is available.