Sunday, 8 January 2017

Ionic 2 Basics

Ionic is a  open source HTML framework for development of hybid  Mobile application UI.
                It means it helps to develop single application which will run on Android,Windows and iOS operating system.

It is built on top of AngularJS and Apache Cordova.
    1.AngularJS - provides MVC for SPA
    2.Apache Cordova  - provides API for native device functions with JavaScript code.

How to Create demo Project using ionic-cli ?
Requirement -
NodeJS v6.0.0 and above 
Steps -
1.Install ionic globally -
   npm install ionic -g
2.Install cordova globally -
   npm install cordova -g
3.Create ionic standard project structure.
  ionic start appName slidemenu --v2
 above step will create project skeleton "appName" with all basic config.


 If  ***ECONNREFUSED*** error occurs - set proxy in environment variable. 
Temporary soln  - set PROXY=http://rilproxy2.rolta.com:8080  
This is temp setting.It needs to used every time we  create/run ionic app in new window.
Permanent soln -  Set new proxy in environment variable.

4.cd to appName
   ionic serve 

Now browser automatically hits url  http://localhost:8100 

Ionic 2 Chat app using sockets -
https://github.com/ardyhim/ionSocket
1.Down load  client side and server side code
Requirements -
Install  globally.
ionic2, 
cordova and 
typings 

1.Client side code
Setup commands - 
1.npm install socket.io-client --save 
2.typings install dt~socket.io-client --save --global

 2.Server side code-
npm install

How to run ->
1.Run Express server side code to listen at 3000 port
npm start 
2.Run Client Side code at 8100 port
ionic serve