ngCordova : Device APIs for your Hybrid mobile apps.

Standard

As I discussed in my last post that discussed about how ionic apps can be a lifesaver for javascript developers producing production mobile apps without learning multitude of different programming languages. I stick to Javascript for good here :-)

The aspect that one needs to learn while developing a hybrid mobile solution  (other than javascript) is Cordova plugins. As you all know that every mobile app needs to be efficient and smart enough to utilise the device platform that can be essential for any mobile strategy may it be customer engagement (using Push notifications) or simply uploading pictures to the system (using camera for picture click and upload) etc.

Offcourse Cordova is a open style development repository that can be challenging if you don’t have any device API experience. A solution to this problem can be exploring ngCordova which is a a collection of AngularJS wrappers done right for ionic framework. It also has the right documentation to get started and rock in production setups. 

I would be focusing on IOS platform for now and its worth mentioning TouchID is supported here and that is just awesome. Let me walk you through the process to setup and add a single plugin below.

  • Installing ngCordova to your Ionic app : You need to add it in your dependencies in “bower.json” and install it. The other way is to install it directly 
$bower install ngcordova
  • Goto your “www/index.html” and add : 

<script src=”lib/ngCordova/dist/ng-cordova.js”></script>

<script src=”cordova.js”></script>

  • Inject in Angular Module 
angular.module('myApp', ['ngCordova'])
  • Avoid fully loaded device so add in your ngcordova.js before using any plugin

$ionicPlatform.ready(function() {$cordovaPlugin.someFunction().then(success, error);});

Now how to add a Cordova plugin such as TouchID (offcourse you can add any plugin using the same process).

  • STEP 1: Create a Ionic project and test it works

$ionic start test tabs

$cd test

$ionic platform add ios

$ionic serve

  • STEP 2: Add touchID plugin 

$cordova plugin add cordova-plugin-touchid

  • STEP 3: Add “ng-cordova.js” and inject in angular dependency as mentioned above. 
  • STEP 4 : Writing testController that would call for authentication, check if successful and if not then pass error and offcourse log the error in console.

.controller("testController", function($scope, $ionicPlatform, $cordovaTouchID) {

$ionicPlatform.ready(function() {

$cordovaTouchID.checkSupport().then(function() {

$cordovaTouchID.authenticate("You must authenticate").then(function() { alert("The authentication was successful"); },

function(error) {console.log(JSON.stringify(error)); }

);

}, function(error) { console.log(JSON.stringify(error)); });

});

})

Happy coding!

Share Button

Building rockstar Hybrid mobile apps using Javascript

Standard

You are a “WEB-ONLY” nodejs developer and realise that most of the productive businesses are trending to go mobile only (sooner or later). Ok, maybe you build responsive apps that somehow blend to work with browsers but web standards cannot directly use the mobile API’s. This means powerful products cannot utilise the interaction with users in realtime using mobile api’s such as push notification, access etc.

Well a few months  back I would have asked you to goto “Apache Cordova” which is a rock solid platform to build hybrid apps but it sure misses the creative part i.e. somehow easy integration with node frameworks such as express and a clientside MVC attachment.

Hybrid apps have HTML,CSS and Javascript as the ruling code where as they can work to behave same as native apps.

Ionic is answer! It packs a Angular as its client side MVC, easily integration with Express framework and few awesome theme options such as IONIC-MATERIAL. Offcourse bringing express to the table adds a possibility to open a lot of opportunities that can help easily integrate with present node app or new architecture written in node. On top of all this it has a code generator for you to choose from start i.e. “blank”, “sidemenu” and “tabs”. Lastly it supports both IOS and Android production that you can test and launch in various app stores. 

To get started, you can install node on your local system and follow the steps :
INSTALL : $npm install -g cordova ionic
CREATE APP : $ionic start app_name sidemenu/tabs/*nothing*
$cd app_name
DEVELOP :$ionic serve (this would start the app on localhost:8100).
ADD PLATFORM :$ionic add platform ios/android
BUILD IT : $ionic emulate ios/android

For setting up emulators, visit here for IOS and here for Android

Add material design to your ionic app, check here.

Happy hacking!

Share Button