Getting started with ionic framework

Install Ionic

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools. Follow the Android and iOS platform guides to install required platform dependencies.

Note: iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim.

After installing node.js run this command in your terminal (command prompt) to install ionic

$ npm install -g cordova ionic

Start a project

Ionic provide ready made templates to create basic app.

There are two types of templates available

  1. Tabs

Screen Shot 2016-06-29 at 1.54.49 pm

2. Side Menu

Screen Shot 2016-06-29 at 1.58.05 pm

To create app with default tabs run this command

$ ionic start myApp tabs

Here myApp is the name of the app.

To create app with side menu  run this command

$ ionic start myApp sidemenu

If you don’t want to use their default template then you can also create an empty app by using following command

$ ionic start myApp blank

Testing you app in browser

Navigate to your project folder

cd myApp

ionic serve

ionic serve will start the node server

Testing you app in emulator or device

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

Client side IP geolocation using JavaScript

<h3>Client side IP geolocation using <a href="http://ipinfo.io">ipinfo.io</a></h3>
<hr/>
<div id="ip"></div>
<div id="address"></div>
<hr/>Full response: <pre id="details"></pre>

<script type="text/javascript">
$.get("http://ipinfo.io", function (response) {
 $("#ip").html("IP: " + response.ip);
 $("#address").html("Location: " + response.city + ", " + response.region);
 $("#details").html(JSON.stringify(response, null, 4));
}, "jsonp");
</script>

OS Detection in JavaScript

You can easily get the operating System of your visitor in javascript. Here is the javascript code which will give you the operating system of your visitor.

<script type="text/javascript">
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
alert(OSName);
</script>

Getting Visitor’s Country in JavaScript

In some of the applications we may need to find the visitor’s location like City, Country,etc. Thereb is a very easy to use service provided by ws.geonames.org . The GeoNames geographical database covers all countries and contains over eight million placenames that are available for download free of charge.

Here is a Jquery Code which will give you the visitor’s Country and Country Code. You will need the updated version of jquery as well.

<script type="text/javascript">
if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(function(position) {
 $.getJSON('http://ws.geonames.org/countryCode', {
 lat: position.coords.latitude,
 lng: position.coords.longitude,
 type: 'JSON'
 }, function(result) {
 alert('Country: ' + result.countryName + '\n' + 'Code: ' + result.countryCode);
 });
 });
 }
</script>

Getting Browser Name and Version in JavaScript

<script type="text/javascript">
var nVer = navigator.appVersion;
 var nAgt = navigator.userAgent;
 var browserName = navigator.appName;
 var fullVersion = ''+parseFloat(navigator.appVersion);
 var majorVersion = parseInt(navigator.appVersion,10);
 var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
 if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
 fullVersion = nAgt.substring(verOffset+6);
 if ((verOffset=nAgt.indexOf("Version"))!=-1)
 fullVersion = nAgt.substring(verOffset+8);
 }
 // In MSIE, the true version is after "MSIE" in userAgent
 else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
 fullVersion = nAgt.substring(verOffset+5);
 }
 // In Chrome, the true version is after "Chrome"
 else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
 }
 // In Safari, the true version is after "Safari" or after "Version"
 else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
 fullVersion = nAgt.substring(verOffset+7);
 if ((verOffset=nAgt.indexOf("Version"))!=-1)
 fullVersion = nAgt.substring(verOffset+8);
 }
 // In Firefox, the true version is after "Firefox"
 else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
 fullVersion = nAgt.substring(verOffset+8);
 }
 // In most other browsers, "name/version" is at the end of userAgent
 else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
 (verOffset=nAgt.lastIndexOf('/')) )
 {
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
 browserName = navigator.appName;
 }
 }
 // trim the fullVersion string at semicolon/space if present
 if ((ix=fullVersion.indexOf(";"))!=-1)
 fullVersion=fullVersion.substring(0,ix);
 if ((ix=fullVersion.indexOf(" "))!=-1)
 fullVersion=fullVersion.substring(0,ix);
majorVersion = parseInt(''+fullVersion,10);
 if (isNaN(majorVersion)) {
 fullVersion = ''+parseFloat(navigator.appVersion);
 majorVersion = parseInt(navigator.appVersion,10);
 }
document.write(''
 +'Browser name = '+browserName+'<br>'
 +'Full version = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
 )
</script>