9 Perfect Combo Steps for Creating Hybrid Mobile Apps

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 fantastic hybrid mobile apps.

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.

In this post, you’ll learn how to create effective hybrid mobile apps where the presentation layer is being built using the Bootstrap framework. The domain of the 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 our sample 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, let’s talk about the hybrid mobile apps development process that involves a combination of PhoneGap, AngularJS and Bootstrap.

Step 1- Create an initial app template

For this, you can use Cordova with 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 Geolocation 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:

<link rel=”stylesheet” href=”css/bootstrap.min.css” type=”text/css”/>

<link rel=”stylesheet” href=”css/bootstrap-theme.min.css” type=”text/css”/>

<link rel=”stylesheet” href=”css/style.css” type=”text/css” />

Code associated with linking the Javascript files is shown below:

<script type=”text/javascript” src=”js/jquery-1.11.2.min.js”></script>

<script type=”text/javascript” src=”js/bootstrap.min.js”></script>

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

<script type=”text/javascript” src=”js/angular.min.js”></script>

<script type=”text/javascript” src=”js/angular-route.min.js”></script>

<script type=”text/javascript” src=”js/custom.js”></script>

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

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 connecting 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:

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

<script type=”text/javascript” src=”include/js/libs/jquery-1.11.2.min.js”></script>

<script type=”text/javascript” src=”include/js/libs/bootstrap.min.js”></script>

<script type=”text/javascript” src=”include/js/libs/angular.min.js”></script>

<script type=”text/javascript” src=”include/js/libs/angular-route.min.js”></script>

<script type=”text/javascript” src=”include/js/libs/ui-bootstrap-tpls-0.11.0.min.js”></script>

<script type=”text/javascript” src=”include/js/app.js”></script>

<script type=”text/javascript” src=”include/js/angular/routes.js”></script>

<script type=”text/javascript” src=”include/js/angular/controller.js”></script>

<script type=”text/javascript”>

appCon.initialize();

</script>

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!

Next steps?

When you follow all the steps covered in the above post, I’m sure that you’ll be tempted to go ahead with creating your next hybrid mobile app using the killer combination of AngularJS, PhoneGap and Bootstrap.