Build Ionic/Cordova app and REST calls

This project is an Iconic/Cordova project, so ionic is a mobile development framework build for angularJs. I didn’t work with angularJs previously. Those technologies are new stuffs for me.

Firstly I had to setup my machine for the ionic environment. So Firstly I installed the necessary packages to the machine. Those are Ionic and Cordova.

npm install –g cordova

npm install –g ionic

(I already installed the node to my computer that’s why I use npm for the package installation otherwise we have to install node J)

Ionic is very easy to understand because in the ionic framework site, it provide lots of things to use when we develop the ionic project. Such as CSS component, JavaScript, icons, kind of things. Those components are very easy to use. And also we can build attractive and user-friendly applications by using Ionic. It is faster than normal android and iOS applications because the applications run with JavaScript.

Cordova is a kind of converter. When we make project by using Ionic we can convert that project in to Android or iOS by using Cordova. These Cordova apps are not the real apps like pure android and IOS apps because those Ionic/Cordova apps are web applications which are basically contain HTML (HTML5) pages. Those applications run on rather the low-level browser shell like iOS’s UIWebView or Android’s WebView. As well as Cordova applications are very useful for business applications. Because they are lightweight and main functions are

  • Get inputs
  • View some data
  • Update data
  • Delete data

We cannot build other applications by using Cordova like games.

After get an idea about the ionic and Cordova I started to build the project.  In case of ionic they provide some project templates to build our apps. Such as tabs, blank, etc. Firstly I use the tab template for my testing thing for learning ionic after that I use the blank template to build my application.

Before install the template we should allocate proper location for the project. I made a new folder in my project folder and after that open command prompt (cmd) from that particular folder.

To setup the blank template

ionic start applicationName blank

(remember we must install ionic globally before these steps otherwise we cannot use ionic packages for the installation)

After that I added the platform to the application

ionic platform add android

ionic platform add ios

After that we can see the ionic blank template application in our created folder. Then start a new command prompt from that blank template folder.

ionic build android (I use it for android only so I test for android only)

This step is to build our app for android view. If we want to view it in our android or iOS emulator

ionic emulate android

(Make sure your computer has already installed android or iOS emulator before 😛 )

Emulator is not efficient thing for testing ionic application because it waste lots of time for emulate the application. There is a way to avoid it. We can test our application in our browser as well.

ionic serve android

That view is not looks good. Because it is web view. So there is another way to test.

ionic serve –lab

That view is looks like mobile. And it provide both android and iOS views. It looks like that.

After that we can build our application according to our needs.

Making REST calls with Ionic/Cordova (AngularJS)

After complete the project i had to do some web services. So our company has a server and I build a database part on it.

POST request

$http({
 method: 'POST',
 url: 'URL',
 params:{"dataKey": dataKey},
 headers: {
 'Content-Type': 'application/json',
 'Authorization': auth
 },
 data: msg
 
 }).then(function successCallback(response) {
// to do after success callback
 console.log(token);
 }, function errorCallback(response) {
// to do after error callback
 });

GET request

 $http({
 method: 'GET',
 url: 'URL',
 headers: {
 'Content-Type': 'application/json',
 'Authorization':auth
 },
 params:{"dataKey": dataKey}
 }).then(function successCallback(response) {
// successCb(response);
 }, function errorCallback( response) {
// errorCb(loginForm, response);
 });
Advertisements