Getting started with Ionic framework

You just started a great journey towards Hybrid Mobile App Development.

I have explored many frameworks and libraries for building a Mobile first WEB App, which has to work seamlessly on a Mobile and WEB platforms with a single code base, but i never actually found one. Now am stuck with IONIC a super cool UI Framework for building Mobile first WEB Apps.

Here are the few reasons why i choose IONIC over other frameworks:

• Performance – No other framework will give such experience of a WEB App on mobile with seamless UI and butter smooth transitions.
• UI with Native Feel – IONIC provides a set of different themes based on the Platform and can auto sense and change the themes automagically.
• Components – IONIC provides a set of core UI and JavaScript components, with which we can upfront build Apps just like the ones you with Native SDK.
• Built in Build System – IONIC not only provides build tools like gulp pre installed, but it also allows you to build and deploy your web code directly to a device or simulator.
• Power of AngularJS: You have the power of super heroic MVW(Model View Whatever) framework upfront when you are working with IONIC. Ionic comes as a AngularJS wrapper so you can just leverage Angular features on any IONIC Project. Also IONIC internally uses AngularJS to provide various directives as components.

And more over last but not least its open source. Few things above may seem little different for you to understand, but soon it all makes sense. But before actually jumping in to this tutorial series on ‘IONIC framework Tutorials‘, check out some of the prerequisites:

• HTML5
• CSS
• JavaScript
• AngularJS
• Gulp
• PhoneGap

Hope you have some basic knowledge on the above listed items and Lets get started!

 

These are the topics covered in this tutorial:

1. What is IONIC?
2. Setting up the Environment
3. Creating a project and Running
4. Building and Testing for Mobile
5. What more to come?

 

Note: Even though Ionic is just a pure Mobile SDK we can still use it for building some awesome web apps, with the builtin support for large screens.

 

1. What is IONIC?

The beautiful, open source front end SDK for developing Hybrid Mobile Apps using HTML5 – ionicframework.com

Ionic is built over the powerful MVW JavaScript framework: AngularJS. Ionic leverages the power of angular js directives and provides various components to build a Hybrid Mobile App.

Ionic has good support for the major platforms like Android and IOS. Also ionic focuses on different screen sizes and layouts.

Ionicons: A place to find all the icons required to build a Hybrid Mobile App. All the icons are SVG’s and they are scalable to any size.

 

2. Setting up the Environment

Ionic can be installed as a node module from CLI and we also need PhoneGap(Cordova) to run our apps on Mobile. Follow these simple steps for installation:

Step1: Install Node if not installed earlier.

Check the installation by running

npm -v

  it should return the version of npm, else install it from the official site: http://nodejs.org/download/

Note: Below steps are for MAC OS, on windows just drop of the sudo.

Step2: Install Cordova

sudo npm install -g cordova

Step3: Install Ionic

sudo npm install -g ionic

 

3. Creating a Project and Running

Ionic comes with a bunch of cool commands to create a new Ionic Project, from your CLI:

ionic start <app name> <type of app>

App types: ‘blank’, ‘tabs’ and ‘sidemenu’

Refer: http://ionicframework.com/getting-started/

Ex: ionic start firstApp blank

Ionic App – Folder structure:

$ cd firstApp && ls

|--- bower.json     // bower dependencies
|--- config.xml     // cordova configuration
|--- gulpfile.js    // gulp tasks
|--- hooks          // custom cordova hooks to execute on specific commands
|--- ionic.project  // ionic configuration
|--- package.json   // node dependencies
|--- platforms      // iOS/Android specific builds will reside here
|--- plugins        // where your cordova/ionic plugins will be installed
|--- scss           // scss code, which will output to www/css/
|___ www            // application - JS code and libs, CSS, images, etc.

--------------------------------------------------------------------------

Reference: http://ionicframework.com/docs/guide/installation.html

 

Running the App on a browser:

Now that we have setup our project we can test it on a browser. Generally the project should run on a web server(localhost). Gulp has a task to Run the App on a web server:

Note: cd into the project directory before you run any ionic commands on Project.

cd firstApp

ionic serve 

You now can see the App started and running on the browser:

Ionic will Run couple of Gulp tasks before actually loading the App:

‘sass‘ task to compile sass files to css

‘watch‘ task will be running in the background to ensure live reload. It basically listens for any changes in the www folder and runs corresponding tasks and re-loads the current App.

Tip: Hit

CTRL + C

  to stop the Watch

Working with the code / IDE support:

You can use any of the modern text editors like: Sublime or Brackets to start with actual development. Optionally i would suggest to go with some popular IDE’s like: Netbeans or WebStrom which has good support for AngularJS, code hinting and formatting.

4. Building and Testing for Mobile

Configure platforms

IOS: 

ionic platform add ios

Android: 

ionic platform add android

Note: Also install platform specific tools and SDK’s before building and testing. If on windows you can test only for Android platform.

Building ionic App:

IOS: 

ionic build ios

Android: 

ionic build android

Testing on simulator:

IOS: 

ionic emulate ios

Android: 

ionic emulate android

Running on a real device:

IOS: 

ionic run ios

Android: 

ionic run android

Note: Make sure the device is connected before you run.

 

5. What more to come?

Actually i am building a tutorial series on Ionic, where i will cover all the basics with examples to  show how things can relate when building an actual hybrid application. Goal of this series is to make you understand Ionic completely and leverage ionic features to build some awesome Hybrid Apps.

Am currently working on a Ionic project, and i would like to share my progress along the tutorial. Check out ‘Expense Manager’ on GitHub: https://github.com/chanusukarno/Expense-Manager 

 

Stay Tuned! Comment and Share! Thanks!

 

The post Getting started with Ionic framework appeared first on TechieDreams.