#Phonegap

Update NPM to latest version

Actually, I do not have many opportunities to work with NodeJS. However, sometimes, I have to deploy some applications that request to install some npm packets. So easy with “npm install”. But what you think if npm command get errors? I think that it is time you need to upgrade NPM to the latest version.

It is really simple with commands bellow:

Update Node to latest version:

Finally, link node executed file to /usr/bin/node:

 

CasperJS test lazyload

As you know,  CasperJS/PhantomJS is perfect for automation test in client-side. And nowaday, you usually develop lazyload function that means when you pull the scroll of window or element (div html tag) to the bottom of page, the page will automatically load more data and bind it to the view (table or grid). Along with it, we need write unit test function to cover fully user experiences.

CasperJS test lazyload

Life is what we make it, always has been, always will be

With PhantomJS/CasperJS, It is quite easy, just take a look to the source code below. You just need 2 main functions of CasperJS is scrollToBottom and waitFor to implement it.

 

AngularJS and Scroll lazy load directive

Lazy load is a familiar task when you work with web application. For example,  when you scroll your application to the bottom of page, you want to load more data from server side. This will make a better user experience and app performance.

In angularJS, you should create a directive that will catch scroll event and call load more data function in controller when user scroll to bottom of page.

loadMoreData() function is wrote in Controller that will handle task load more data from server and bind to $scope

 

Store data to SQLite in AngularJS PhoneGap

When you work with a phonegap application, sometimes you need develop a work-offline mode for your app. In this case, SQLite is  a good choice. You can use SQLite to store data you loaded from server-side. If your device lost internet connection, application will load data from SQLite firstly.

Store data to SQLite in AngularJS PhoneGap

Common sense is not a gift, It’s a punishment. Because you have to deal with everyone who doesn’t have it.

To implement, you need install SQLite phonegap plugin for your app. And then, you write a service to handle get/set/remove data in SQLite. And now, I will show you a script that run in my app that uses angularjs, coffee script.

The below is coffee script that implement a factory to get/set/remove cache to SQLite

And DbCache factory should be injected to factories used to load data.  The below is my way:

– Load from SQLite cache firstly

– If Cache is empty,  use $http to load data from server-side

Code example:

 

Fix “Position Fixed” in Phonegap IOS App

When I build a Phonegap App on IOS that has header and footer with “position fixed”. Everything works well on web version, and I start to test IOS app version, it seems work well too. But a problem orcurs when virtual keyboard opens and close, then the layout breaks (“position fixed”  of header and footer does not work). I took 2 hours to research and google. Finally, I work out a solution, it is quite simple. I just set “position static” for header footer when virtual keyboard close (input blur event) and set  a time out about 200 miliseconds to change back “position fixed”, the layout will be perfect again. The below is my code, you will be easy to understand it if you ever work with angularjs, coffeescript