Over the recent years, the world of mobile app development has witnessed the introduction of numerous frameworks which have worked as an excellent option for creating a fantastic hybrid mobile app. An impressive combination of PhoneGap, AngularJS and Bootstrap has served as a remarkable option for building hybrid apps that look awesome and function in the expected way. Continue reading this post to know more about creation of effective hybrid mobile apps where the presentation layer is being built using the Bootstrap framework, the domain of app has been modeled using AngularJS and the resultant app is being packaged to a native app using Cordova/PhoneGap.

Firstly, let’s have a look at the components of hybrid mobile app architecture:

Bootstrap

As the mobile-first responsive front-end framework, Bootstrap comes with a responsive grid that allows you to position the layout in the desired way. Designed keeping the mobile use in mind, Bootstrap responds well to a variety of screen sizes and resolutions. Whether it’s about managing the responsive images, typography, forms, notification messages, UI components or any responsive tables; Bootstrap allows you to do all this and a lot more.

AngularJS

As a powerful, full-feature Javascript MVW framework, AngularJS offers a well-defined structure to your app domain model. In addition to this, it also manages your app logic in a remarkable way. There are Views which are being organized using Bootstrap. Then, there are Controllers which organize the communication between View, Services and other components. AngularJS supports a routing mechanism which can be easily extended using extension libraries for addition of robust app functionalities.

PhoneGap/Cordova

Cordova is an Apache project which makes it possible to package the Bootstrap+ AngularJS app to be packaged to a native mobile app which can further be published to multiple mobile app markets and installed in different mobile devices. PhoneGap is a commendable distribution of Cordova.

Now, coming to the hybrid mobile app development process that involves a combination of PhoneGap, AngularJS and Bootstrap

Step 1- Create an initial app template

For this, you can use Cordova/PhoneGap CLI. Just run the command displayed below:

phonegap create appSample com.jimsmith.appSample AppSample

The three arguments required by the ‘create’ command above are explained below:

First one is the directory name that needs to be created for project generation. In my example, it is “appSample”
Second is the project identifier. In my example, it is “com.jimsmith.appSample”
Third is the display title of the application. In my example, it is “AppSample”

Step 2- Install the Geoloation plugin

Since the app that we are ging to build will show your current location coordinates, in order to read these coordinates, you’ll need to install the Geolocation plugin. This can be done by simply executing the below mentioned command:

cordova plugin add org.apache.cordova.geolocation

Step 3- Add the desired platform to which you want to deploy the application

For this, just go to your app directory i.e. appSample in this tutorial and execute the below command for adding the iOS platform:

phonegap platform add ios

After this, you can build the sampel app using the below command:

phonegap build ios

Please note that you can repeat both the above commands for a range of mobile platforms like Android, BlackBerry, Windows Phone etc.

Step 4- Add AngularJS and Boostrap files to the above created application

Now that you’ve the platform set up, it’s time to add AngularJS and Bootstrap files to the sample app. Add the AngularJS files(angular.min.js, anuglar-route.min.js etc.) to appSample/www/js directory. Also, inside appSample/www/css directory, put the bootstrap.min.css and bootstrap-theme.min.css files. Next, link all these files to the main index.html file by adding the below CSS code to the head section:

Code associated with linking the Javascript files is shown below:

Step 5- Start coding the app logic

You need three things to code the app logic viz: angular route config, angular controller and a view. Let’s start with the app.js file. Code associated with this is shown below:

var appSample = angular.module(‘appSample’, [‘ngRoute’,’bootstrap’]);

var appCon= {

// Application Constructor

initialize: function() {

this.bindEvents();

bindEvents: function() {

document.addEventListener(‘deviceready’, this.onDeviceReady, false);

onDeviceReady: function() {

app.receivedEvent(‘deviceready’);

navigator.geolocation.getCurrentPosition(app.onSuccess, app.onErr);

onErr: function(error)

{

alert(‘Without location you can’t use navigate feature! Error:’ + ‘\n’ + error.message);

onSuccess: function(position)

{

appSample.latitude = position.coords.latitude;

appSample.longitude = position.coords.longitude;

}

};

In the above code snippet, you can see that I’ve defined the angular app called appSample, followed by initiating it and defining the ngRoute and bootstrap modules. Then there is onDeviceReady evenet which gets fired each time the app is being loaded. Within this evenet, you can get the current position of device via a single line of code as shown below:

navigator.geolocation.getCurrentPosition(appCon.onSuccess, appCon.onErr);

While getCurrentPosition function fetches the device’s current latitude and longitude, it requires two additional functions in the form of parameters. Here, the first function is called when the current location has been obtained successfully and the second one is called in case of unavailability of the device’s location.

The success function is used for reading corodinates and binding them to the angular app i.e. appSample via the below function:

onSuccess: function(position)

{

appSample.latitude = position.coords.latitude;

appSample.longitude = position.coords.longitude;

}

Step 6- Define two views

You need to define two views, one for page and the one for displaying the location details. Use the below function for displaying coordinates inside the view:

<div class=”align-center”> Your location is:

<p>Latitude: {{latitude}}</p>

<p>Longitude: {{longitude}} </p>

</div>

Step 7- Define a controller for connetcing coordinates to the view

Here’s how the controller will look like:

appSample.controller(‘mainController’, function($scope, $route){

$scope.latitude = appSample.latitude;

$scope.longitude = appSample.longitude;

});

Step 8- Add router configuration in order to bind the above controller to the view

Doing this is necessary for enabling a user to move between app pages. The code snippet associated with the router is shown below:

appSample.config([‘$routeProvider’,

function($routeProvider) {

$routeProvider.

when(‘/’, {

templateUrl: ‘views/index.html’,

controller: ‘mainController’

}).

when(‘/services’, {

templateUrl: ‘views/services.html’

}).

otherwise({

redirectTo: ‘/’

});

}]);

The router part defines a default url and ‘/services’ url. While the former part binds to index.html view, the latter one binds to services.html view.

Step 9- Add the reference of created files in index.html

Here’s a look at the references to last created files:

With that you’re done with creating a hybrid mobile app, go ahead with deploying it to your phone for testing. You can either use a simulator or a real device for testing the app for its looks and functionality.

That’s it for this post!

Conclusion

Hope you’d have followed all the steps covered in the above post. I’m sure by now you’d have got tempted to go ahead with creating your next hybrid mobile app using the killer combination of AngularJS, PhoneGap and Bootstrap.

How to Add Custom Buttons in WordPress Editor?

7 Tips to Eliminate Comment Spam in WordPress

Customizing the Comment Form of WordPress Website

Victoria Brinsley is a Android developer for Appsted Ltd – a renowned Android app development services provider. In case, you are willing to avail more information about related technology, contact her to explore.