IONIC - How to get started with Ionic Framework

Hello everyone,

Today I am gonna show you how to start coding, emulating and having fun with this such great mobile app framework called Ionic. I've been using it 'for fun' since 2014 and it's an useful tool if you want to code as JavaScript instead of other native languages such as Objective-C and Java. In my case I play with both, so, it's really up to you whether or not use it. This weekend I am going to provide you more about it. I hope you enjoy it.

1- First have your Node.js installed on your computer. The current version working with Ionic is Node 4. Node 5, according to the Ionic site at this date, is not yet available for Ionic. Check the site related of Ionic here - http://ionicframework.com/docs/

I have the version 4.4.1 as you can see below on my Mac

2- Make sure you install or have it installed before you start the Apache Cordova Framework that works with Ionic. My current version of Cordova is 6.1.0 as you can see below.

3- I did install my Ionic 1.7.14 version.

4- Starting a project:
ionic start thiagoleoncioApp tabs

4.1- As you can see, it is going to ask if you want to register for push notifications or not.
I would recommend you say yes, as it helps you during your coding to have this option/feature available.

If you type y above, it will give you the option to register your notifications over Ionic site:

NOTE: You probably have noticed that I typed ionic start + my projectname+ tabs.

Here, in this start command we have option to start as blank,tabs or sidemenu. So, if you go with sidemenu your project will start with something similar to this.

5- Now you can run your Ionic project with these commands:
$ cd thiagoleoncioApp --> GO to your project folder created when you started it.
$ ionic platform add ios  --> Add in your platform IOS or Android or another mobile emulator you want to it.

$ ionic build ios

...

$ ionic emulate ios 

COMMON ISSUE: If you are running IOS emulator and you did not install yet iso-sim project you are probably gonna get an issue like this:

ios-sim was not found. Please download, build and install version 3.0.0 or greater from https://github.com/phonegap/ios-sim into your path. Or 'npm install -g ios-sim' using node.js: http://nodejs.org
Error: /Users/tguimaraes/thiagoleoncioApp/platforms/ios/cordova/run: Command failed with exit code 2

So, make sure you run the command - npm install -g ios-sim before emulate it in your Mac.

6- So now, emulating it:

...

7- Here it is your project structure created to develop in IOS using Cordova Ionic Framework.

 Just change the code or whatever you would like and move it on!

Next weekend, I am going to show you guys how to develop using Sencha Touch.

Another great article related of Ionic: How to set up Icons that displays differently amid iOS and Android devices

I hope it helps and happy coding!
Thiago Leoncio.