Three Frame­works You Can Use to De­velop a Hy­brid Mo­bile App

Cre­at­ing a mo­bile app isn't as dif­fi­cult or as com­pli­cated as it sounds. The tools are all avail­able on the In­ter­net. With a lit­tle bit of the right guid­ance, your dream mo­bile app can be yours to share with the world. In this ar­ti­cle, the au­thor ex­plains

OpenSource For You - - CONTENTS -

L et’s make a hy­brid mo­bile app us­ing An­gu­lar JS, jQuery Mo­bile and PhoneGap. Be­fore start­ing with the code, I would like to ex­plain a lit­tle about what a hy­brid mo­bile app is, and what An­gu­lar JS, jQuery Mo­bile and PhoneGap are.

Mo­bile apps are gen­er­ally of three ma­jor types—na­tive apps, mo­bile Web apps and hy­brid mo­bile apps. Na­tive apps are made us­ing the plat­form-spe­cific SDK, tools and lan­guages pro­vided by the plat­form ven­dor. So, for in­stance, you can make na­tive An­droid apps us­ing Java with the An­droid SDK. Mo­bile Web apps, on the other hand, are web­sites or Web ap­pli­ca­tions op­ti­mised for mo­bile browsers. These are de­vel­oped us­ing Web de­vel­op­ment tech­nolo­gies - HTML, CSS and JavaScript, but they do not have the lux­ury of ac­cess­ing the na­tive fea­tures of the mo­bile. Hy­brid mo­bile apps use the best of both the worlds, and are made us­ing Web de­vel­op­ment tech­nolo­gies like HTML, CSS and JavaScript, but they run in­side a na­tive con­tainer util­is­ing the de­vice’s browser en­gine to ren­der the HTML and process JavaScript. Be­yond this, there are ab­strac­tion lay­ers avail­able that en­able de­vel­op­ers to ac­cess the na­tive fea­tures of the de­vice as well.

jQuery Mo­bile is a very fa­mous touch-op­ti­mised Web/ mo­bile frame­work built on top of the jQuery core, by the jQuery team. It has a very min­i­mal learn­ing curve. It is ro­bust enough and the views cre­ated us­ing jQuery Mo­bile ad­just them­selves au­to­mat­i­cally based on the browser’s form fac­tor. In other words, there is a very min­i­mal­is­tic CSS change that the de­vel­oper needs to do when it comes to de­sign­ing views for var­i­ous form fac­tors us­ing jQuery Mo­bile.

An­gu­lar JS is a MVW frame­work that fo­cuses on ex­tend­ing tra­di­tional HTML to cater to dy­namic con­tent. MVW stands for Model-ViewWhat­ever, where ‘what­ever’ im­plies “what­ever works for you”, though some peo­ple also like to bucket An­gu­lar JS as a MVC or a MV* frame­work. An­gu­lar JS stands out from other frame­works be­cause it elim­i­nates DOM ma­nip­u­la­tion and en­sures au­to­matic syn­chro­ni­sa­tion be­tween mod­els and views.

PhoneGap is an open source frame­work that helps in build­ing hy­brid mo­bile apps (cross-plat­form apps). It helps to wrap the HTML/CSS/JavaScript code in­side the na­tive con­tainer for the re­spec­tive tar­get plat­form, and also pro­vides an ab­strac­tion layer in the form of a JavaScript li­brary to ac­cess na­tive de­vice fea­tures.

Hav­ing dis­cussed each of the tech­nolo­gies to be used in build­ing our app, let us now jump into some cod­ing. Let’s de­velop a sin­gle-view app where the user will be able to fetch a list of all the car com­pa­nies from around the world, then se­lect one com­pany from the list, and find out all the mod­els that be­long to that com­pany.

The app struc­ture will be as fol­lows. At the root level,

there will be an in­dex.html file, a con­fig.xml file and the icon. png file. Then there will be the re­spec­tive fold­ers for the li­brary files (con­tain­ing the an­gu­lar.js file), the jquery-mo­bile files, the im­ages to be used, the cus­tom JavaScript code, and the cus­tom styling, if needed.

Let us first look into the rel­e­vant code snip­pet from the in­dex.html file:

<div data-role="page"> <div data-role="header"> <h1>Cars</h1> </div> <div data-role="con­tent" id="main" ng-app="carsApp" ng­con­troller="myAp­pCon­troller"> <a data-role="but­ton" ng-click="fetchCarMakes()">Get Makes</ a> <ul data-role="listview" data-in­set="true" id="dataListView"> <li ng-re­peat="data in listViewData"> <a ng-click="fetchModels(data)"> <imgng-src="im­ages/{{data.coun­tryFlag}}" class="ui-li-icon">

{{}} </a> </li> </ul> </div>


Here, we are cre­at­ing a page us­ing jQuery Mo­bile. To con­vert any div tag into a page in jQuery Mo­bile, we just need to add data-role=“page” in the div tag. The page has two ma­jor sets of con­tent—the page header and the page con­tent—each de­clared us­ing its re­spec­tive data-role. The con­tent of the page has one but­ton, which when clicked by the user can get the names of all the car com­pa­nies from around the world. This data is dis­played in the listview be­low the but­ton. The con­tent div uses two An­gu­larJS dec­la­ra­tions— ng-app and ng-con­troller. The first one al­lows the de­vel­oper to de­clare a root el­e­ment for the ap­pli­ca­tion whose be­hav­iour can be mod­i­fied. ng-con­troller lets the de­vel­oper spec­ify a JavaScript con­troller class that can be used to eval­u­ate HTML expressions. The li el­e­ment is the listview us­ing the ng-re­peat dec­la­ra­tion. ng-re­peat helps the user to in­stan­ti­ate el­e­ments by us­ing items from a col­lec­tion. Here, the col­lec­tion is the listViewData, which will be de­clared in­side the con­troller class— myAp­pCon­troller. The im­age source can use ng-src. All the data that needs to be ac­cessed in the HTML can be ac­cessed us­ing {{}}.

Next, let us look at the rel­e­vant snip­pet from the JavaScript: an­gu­­d­ule('carsApp', []) .con­troller('myAp­pCon­troller', ['$scope', '$http', func­tion($scope,$http) { $scope.listViewData = []; $scope.fetchCarMakes = func­tion() { $.mo­bile.loading( "show" ); $scope.listViewData = []; $http({method: 'GET', url: getCarMakesURL}). suc­cess(func­tion(data, sta­tus, head­ers, con­fig) { an­gu­lar.forEach(data,func­tion(value,obj){


ex){ switch (makesDe­tails.make_­coun­try) { case "Italy": $scope.listViewData.push({name:makesDe­tails. make_dis­play,coun­tryFlag: "italy.png",id:makesDe­tails.make_ id});



}); //.. //.. //.. } break; //.. //.. //.. $("#dataListView"). listview("re­fresh"); //.. //.. } $scope.fetchModels = func­tion(makeName){ //.. $http({method: 'GET', url:mod­elMakeURL}). suc­cess(func­tion(data, sta­tus, head­ers, con­fig) { an­gu­lar.forEach(data,func­tion(value,obj){


$scope.listViewData.push({name:mod­elDe­tails. mod­el_­name,coun­tryFlag: makeName.coun­tryFlag,id: mod­elDe­tails.mod­el_­make_id});


Here, for ng-app=“carsApp” de­clared in the HTML, we de­clare an an­gu­lar mo­d­ule, which con­tains our con­troller. In­side the con­troller, we han­dle two events—the but­ton click and the listview item click.

There are two ma­jor ob­jects used in the con­troller - $scope and $http. The $scope ob­ject refers to the ap­pli­ca­tion model. Scope is the glue be­tween the ap­pli­ca­tion con­troller and the view. Hence, us­ing Scope, we can di­rectly make changes in the view with our con­troller. The $http ob­ject helps for com­mu­ni­ca­tion with re­mote HTTP servers.

In the first click event - fetchCarMakes - we first show the jQuery Mo­bile loader us­ing $.mo­bile.loading(“show”). We then make a ‘GET’ call to fetch all the car mak­ers from across the world. When we re­ceive the JSON re­sponse, we parse it ac­cord­ingly and push it into the listViewData ar­ray. Once the ar­ray is com­pletely pop­u­lated, the ul on the view will au­to­mat­i­cally get up­dated. But to up­date the jQuery Mo­bile listview, we need to ex­plic­itly call $("#dataListView").listview("re­fresh") on the listview.

Sim­i­larly, for the li click event— fetchModels— we pass the car maker ar­gu­ment into the func­tion and use it to make the ap­pro­pri­ate ‘GET’ call. And, just as above, when we re­ceive the JSON re­sponse, we parse it ac­cord­ingly and push it into the listViewData ar­ray. As a re­sult, the same ul on the view gets up­dated au­to­mat­i­cally.

We can first test this lo­cally us­ing the Rip­ple em­u­la­tor on Google Chrome. When the ini­tial screen is run, we can see in Fig­ure 1 that only the header and the ‘Get Makes’ but­ton is shown. When we click on the but­ton, we see the jQuery Mo­bile loader, and then au­to­mat­i­cally, listview ap­pears with the car mak­ers’ names and their coun­try flags, as seen in Fig­ure 2. This list is very long and is scrol­lable, au­to­mat­i­cally. Next, when we click on any par­tic­u­lar car maker, the loader ap­pears again, and the listview is up­dated with the car mod­els as seen in Fig­ure 3.

So now when things are work­ing prop­erly, we can pack­age ev­ery­thing to run it on a de­vice. All we need to do is to zip the en­tire folder and open com. We can up­load the zip file there, and get the re­spec­tive in­stal­la­tion files for var­i­ous plat­forms.

The code­base can be found at kazek­age­gaara/An­gu­larJSCarApp. You can get the en­tire code­base, put it into a zip file, build it as in­structed above and use the app on your own de­vices.

Fig­ure 2: Listview pop­u­lated with car maker names

Fig­ure 3: Listview re­freshed with car model names for a par­tic­u­lar car make

Fig­ure 1: First screen of the app

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.