Learn Ionic 2 ,a complete tutorial in 7 easy steps

You want to build mobile apps but you have only web development skills ? or you want to target more than one mobile platform ,Android ,iOS or even Windows Phone but you can not afford to hire more than one developer and in case you are developing by yourself you don't have the required skills for every platform out there such as Java ,Swift and C# .

In this tutorial you are going to learn Ionic 2 and how to build hybrid mobile apps using web technologies such as HTML ,JavaScript and CSS but before writing code lets start by setting up the development environment .

Just like any awesome tool these days .The Ionic 2 CLI is based on Node.js so you need to install Node.js on your operating system ,the simplest way is to go to the official Node.js website and download the Node.js version compatible with your system .

You can also install Node.js from package manager but you need to make sure you follow some proecedures to be able to install the latest version of Node.js .You can simply search in Google for how to install the latest version of Node.js in your operating system .

After successfully installing Node.js you can now install Ionic 2 Command Line Interface or CLI using NPM, the Node package manager .

npm install -g ionic 

If this goes without any errors then you are almost ready to create your first Ionic 2 app .

To create a new Ionic 2 app ,you use the Ionic CLI we have just installed by running .

 ionic start techieApp blank --v2

techieApp is the name of your app/project

blank is the name of the template used to generate your ,other templates are ,sidemenu ,tabs and tutorial .

--v2 tells the CLI to generate a new Ionic 2 app .If you don't specify it an Ionic 1 app will be generated .

Now lets run our blank app .

What is really cool about Ionic 2 and hybrid mobile frameworks is that you can test your app in the browser just like any web app which is a really good thing in development phase so go ahead ,navigate into your app folder and execute the serve command

cd techieApp
ionic serve 

Congratulations ,you have launched your first Ionic 2 app .

Ionic 2 can serve your app inside the browser with live reload which improves your developement workflow .But only for testing the parts of your app which don't access native features such as device camera or accelerometer etc .To test native features you need to run your app in an actual mobile device .

The final resulting app needs to run in a device so you have to build your project for each platform that you want to target . Before you can build your project you need to prepare your local development for that so what exactly you need to do ?

For Android you need to install Java and Android SDK .

For iOS you need to have a MAC with Xcode .

I hope that you have completed this tutorial and successfully started your first Ionic 2 app .See you in the next step of this complete Ionic 2 tutorial in 7 steps.

comments powered by Disqus