Three Frameworks You Can Use to Develop a Hybrid Mobile App
Creating a mobile app isn't as difficult or as complicated as it sounds. The tools are all available on the Internet. With a little bit of the right guidance, your dream mobile app can be yours to share with the world. In this article, the author explains
L et’s make a hybrid mobile app using Angular JS, jQuery Mobile and PhoneGap. Before starting with the code, I would like to explain a little about what a hybrid mobile app is, and what Angular JS, jQuery Mobile and PhoneGap are.
Mobile apps are generally of three major types—native apps, mobile Web apps and hybrid mobile apps. Native apps are made using the platform-specific SDK, tools and languages provided by the platform vendor. So, for instance, you can make native Android apps using Java with the Android SDK. Mobile Web apps, on the other hand, are websites or Web applications optimised for mobile browsers. These are developed using Web development technologies - HTML, CSS and JavaScript, but they do not have the luxury of accessing the native features of the mobile. Hybrid mobile apps use the best of both the worlds, and are made using Web development technologies like HTML, CSS and JavaScript, but they run inside a native container utilising the device’s browser engine to render the HTML and process JavaScript. Beyond this, there are abstraction layers available that enable developers to access the native features of the device as well.
jQuery Mobile is a very famous touch-optimised Web/ mobile framework built on top of the jQuery core, by the jQuery team. It has a very minimal learning curve. It is robust enough and the views created using jQuery Mobile adjust themselves automatically based on the browser’s form factor. In other words, there is a very minimalistic CSS change that the developer needs to do when it comes to designing views for various form factors using jQuery Mobile.
Angular JS is a MVW framework that focuses on extending traditional HTML to cater to dynamic content. MVW stands for Model-ViewWhatever, where ‘whatever’ implies “whatever works for you”, though some people also like to bucket Angular JS as a MVC or a MV* framework. Angular JS stands out from other frameworks because it eliminates DOM manipulation and ensures automatic synchronisation between models and views.
PhoneGap is an open source framework that helps in building hybrid mobile apps (cross-platform apps). It helps to wrap the HTML/CSS/JavaScript code inside the native container for the respective target platform, and also provides an abstraction layer in the form of a JavaScript library to access native device features.
Having discussed each of the technologies to be used in building our app, let us now jump into some coding. Let’s develop a single-view app where the user will be able to fetch a list of all the car companies from around the world, then select one company from the list, and find out all the models that belong to that company.
The app structure will be as follows. At the root level,
there will be an index.html file, a config.xml file and the icon. png file. Then there will be the respective folders for the library files (containing the angular.js file), the jquery-mobile files, the images to be used, the custom JavaScript code, and the custom styling, if needed.
Let us first look into the relevant code snippet from the index.html file:
<div data-role="page"> <div data-role="header"> <h1>Cars</h1> </div> <div data-role="content" id="main" ng-app="carsApp" ngcontroller="myAppController"> <a data-role="button" ng-click="fetchCarMakes()">Get Makes</ a> <ul data-role="listview" data-inset="true" id="dataListView"> <li ng-repeat="data in listViewData"> <a ng-click="fetchModels(data)"> <imgng-src="images/{{data.countryFlag}}" class="ui-li-icon">
{{data.name}} </a> </li> </ul> </div>
</div>
Here, we are creating a page using jQuery Mobile. To convert any div tag into a page in jQuery Mobile, we just need to add data-role=“page” in the div tag. The page has two major sets of content—the page header and the page content—each declared using its respective data-role. The content of the page has one button, which when clicked by the user can get the names of all the car companies from around the world. This data is displayed in the listview below the button. The content div uses two AngularJS declarations— ng-app and ng-controller. The first one allows the developer to declare a root element for the application whose behaviour can be modified. ng-controller lets the developer specify a JavaScript controller class that can be used to evaluate HTML expressions. The li element is the listview using the ng-repeat declaration. ng-repeat helps the user to instantiate elements by using items from a collection. Here, the collection is the listViewData, which will be declared inside the controller class— myAppController. The image source can use ng-src. All the data that needs to be accessed in the HTML can be accessed using {{}}.
Next, let us look at the relevant snippet from the JavaScript: angular.module('carsApp', []) .controller('myAppController', ['$scope', '$http', function($scope,$http) { $scope.listViewData = []; $scope.fetchCarMakes = function() { $.mobile.loading( "show" ); $scope.listViewData = []; $http({method: 'GET', url: getCarMakesURL}). success(function(data, status, headers, config) { angular.forEach(data,function(value,obj){
angular.forEach(value,function(makesDetails,ind
ex){ switch (makesDetails.make_country) { case "Italy": $scope.listViewData.push({name:makesDetails. make_display,countryFlag: "italy.png",id:makesDetails.make_ id});
ex){
}])
}); //.. //.. //.. } break; //.. //.. //.. $("#dataListView"). listview("refresh"); //.. //.. } $scope.fetchModels = function(makeName){ //.. $http({method: 'GET', url:modelMakeURL}). success(function(data, status, headers, config) { angular.forEach(data,function(value,obj){
angular.forEach(value,function(modelDetails,ind
$scope.listViewData.push({name:modelDetails. model_name,countryFlag: makeName.countryFlag,id: modelDetails.model_make_id});
});
Here, for ng-app=“carsApp” declared in the HTML, we declare an angular module, which contains our controller. Inside the controller, we handle two events—the button click and the listview item click.
There are two major objects used in the controller - $scope and $http. The $scope object refers to the application model. Scope is the glue between the application controller and the view. Hence, using Scope, we can directly make changes in the view with our controller. The $http object helps for communication with remote HTTP servers.
In the first click event - fetchCarMakes - we first show the jQuery Mobile loader using $.mobile.loading(“show”). We then make a ‘GET’ call to fetch all the car makers from across the world. When we receive the JSON response, we parse it accordingly and push it into the listViewData array. Once the array is completely populated, the ul on the view will automatically get updated. But to update the jQuery Mobile listview, we need to explicitly call $("#dataListView").listview("refresh") on the listview.
Similarly, for the li click event— fetchModels— we pass the car maker argument into the function and use it to make the appropriate ‘GET’ call. And, just as above, when we receive the JSON response, we parse it accordingly and push it into the listViewData array. As a result, the same ul on the view gets updated automatically.
We can first test this locally using the Ripple emulator on Google Chrome. When the initial screen is run, we can see in Figure 1 that only the header and the ‘Get Makes’ button is shown. When we click on the button, we see the jQuery Mobile loader, and then automatically, listview appears with the car makers’ names and their country flags, as seen in Figure 2. This list is very long and is scrollable, automatically. Next, when we click on any particular car maker, the loader appears again, and the listview is updated with the car models as seen in Figure 3.
So now when things are working properly, we can package everything to run it on a device. All we need to do is to zip the entire folder and open www.build.phonegap. com. We can upload the zip file there, and get the respective installation files for various platforms.
The codebase can be found at https://github.com/ kazekagegaara/AngularJSCarApp. You can get the entire codebase, put it into a zip file, build it as instructed above and use the app on your own devices.