Everything you need to know about ionic 2 before getting into developing !

I have been a fan of Angular 2 ever since it came out. One reason for that is that they allow you to write Angular 2 with Typescript as well. Those of you who don’t know of Typescript, think of it as an object-oriented version of JavaScript. If you are coming from a Java, C# or any OOP-based language background, you will love this.

So why am I talking about Angular 2 in an article titled ‘Ionic 2’? Well, it being a hybrid mobile application framework, you can write using Angular 2. Annnnd I love that everything can be written on Angular 2 using TS. I’ll now give you a bit of an introduction to the Ionic Framework.

Ionic Framework

Ionic is all about hybrid mobile app development and it has been quite a popular hybrid mobile application since it was launched. Ionic is built on top of the AngularJS and ApacheCordova Platform. You can develop Ionic applications using web technologies such as html, css, sass, etc. — this might be one of the reasons why Ionic caught the attention of the dev world.

So enough jibberish about other things. Let’s get started with what the title says ;)

Ionic 2 — What’s new ?

Photo Source : https://www.pinterest.com/pin/154881674661403188/

Almost everything. New language, new architecture and new everything. Are these changes good? Well let’s talk about that below — for readability, I have divided this into a couple more headings.

• NEW COMPONENTS !

Ionic 2 is packed with plenty of new components and it’s said that it has 100% support on material design as well. Even older components have been optimised and are very easy for any developer to use in their applications. Also, Ionic 2 now has an all new navigation system as well, which I will talk about a bit more in detail in a while. And to add to it all, they have developed powerful new form control components, which evolves stock controls available in the browser.

• Ionic Native

If you have worked with Ionic1 ngCordova you probably know how awesome it was when playing around with native plugins. If you have dug deeper into ngCordova you must aware that it is a wrapper written for Cordova plugins to blend in with Angular-like frameworks by adding support to promises.

By bringing Ionic Native, the Ionic team have replaced the ngCordova plugins. Ionic Native is almost the same as ngCordova but it has been implemented to give better support to Angular 2 by adding promise and observable support. One good thing about Ionic Native is that unlike in ngCordova, you don’t have to do dependency injection or anything to use Ionic Native — you just directly calling the plugin just like calling any other method.

• Error Handling

Imagine because of you own bug that you wrote :p your entire app suddenly freezes? I think previous Ionic 1 users must have experienced this white screen of death. So fortunately, the Ionic 2 team has been able to add run time error catching, which is fascinating.

They have achieved this by adding custom ErrorHandling class to Ionic that tied into App Script Dev Server. Basically if you run into an error, it will show it in a detailed and graphical view. Here is what it looks like:

Installation Guide

So installing Ionic 2 and related is pretty straightforward and shouldn’t give you any trouble. If you get any, post it in comments, I will try to help you guys out.

First make sure you have nodeJS installed in your computer. if you want to download it yourself and install it on your system, click on this to get the package file appropriate to your operation system. To verify your installation run:

node -v && npm -v 

This should show your nodeJS and npm version if you have successfully installed node and npm on your system.

All right, once you have got nodejs up and running, let’s install ionic and related packages. Simply run

npm install -g ionic cordova

(If you face EACCESS error on linux/mac use sudo)

and again to verify your installation run

ionic info

output ionic info

Annnnnnd that’s it. You are now ready to explore the world of Ionic 2 ;)

Platform Installation

Ionic 2 being hybrid mobile application framework, it needs a bit of core support from platforms (android, iOS) to build and actually get it running on the physical device. Please follow the tutorials below to install these components on your machine depending on which platform you are developing applications for.

For Android — Android Platform Guide

For IOS — iOS Platform Guide

FINALLY ! THE ACTUAL HOW TO START

Creating a boilerplate via Ionic-cli is the easiest and the best way to getting started with Ionic 2. Ionic 2 cli take care of file architecture, webpack, everything. You can just go and start coding right away once you create your Ionic project.

So to start just go ahead and type.

ionic start <your app name> blank — v2  — ts

The above command has a couple of parameters. Obviously you know what I meant by your app name. The next parameter asks for which predefined template. Ionic has 3 templates — blank, tabs and side menu — I have attached the following image to show how they look like:

v2 means Ionic version 2 and ts indicates that we want to write this using Typescript. So once you create your project, do the following commands on your terminal

cd <your app name >
ionic serve

Ionic serve starts a local development server for your app. You can access your app on localhost:8100 on your browser, most probably.

If you want to view your app on a super cool looking native kinda view, type command

ionic serve -l

This will allow you to test your app on multiple screen sizes and platforms which is pretty cool.

Project Structure

After you create the project, your project structure would look like this. Rather than develop blindly, it would be better if you have an understanding of what is inside these folders.

As you can see it’s a long list :p So for the sake of brevity I will explain the most important ones, assuming you have developed applications using node or angular. But if you have anything more to be clarified, shoot in the comment section.

• /hooks — Don’t confuse this with web hooks. This folder contains scripts that are needed to be run as part of the Cordova build processes. Most probably you don’t have to touch this unless you want some other scripts to be run on the Cordova build process.
• /Platforms— Build files related to android and iOS platforms lie here if you want to build your app using Android Studio or Xcode depending on your operation system.
• /Plugins- All your project related cordova plugins will go inside this folder.
• /Resources- You place your custom Splashscreen and app icons inside here.
• /src- This is the place where uncompiled raw code exists well where you code basically. Inside this there are root of the application(/src/app) pages of the app (/src/pages) , static content (/src/assets ) and style definitions of the entire app (src/themes)

— —/src/app- As I mentioned earlier this holds code related root components of the ionic 2 application.

— — — /src/app/app.module.ts-

This is the entry point of the application and also controls the flow of the entire application as well. In order to use any Component or Service we write in our application we need to import them here. This also points to the entry component of the application which is MyApp in this example.

— — — /src/app/app.component.ts-

This is the first Component of the application which gets loaded. We consider this as an empty shell which lets other components(pages) to load in. see the variable rootpage ? its assigned value will loaded as the first view of the app. In this case HomePage component will be loaded here.

— — /src/page- All the application pages such as home , login etc goes here. each page is a component and to make thing much easier and great you can generate these through ionic cli.

ionic g page home

this create a folder inside a pages called home it will have 3 files inside it.which will ts file — which handles the view logic html file and scss file for styling. Here is a sample of page component ts file.

NOTE :- just like generating pages you can generate providers using

ionic g provider <provider name>

Above parts of the article was focused mainly on installing , configuring , writing code and checking them on your browser. Well as of we all know we need to deploy this on a physical mobile device. Other wise this won’t be a mobile app:P(Genius)

As of I have mentioned ionic cli is pretty damn awesome they have handled deploying and building as well. So below are commands related to these deploying and building.

ionic platform add android / ios

Above command adds platform target to your project. Without running this command you won’t be able to build your application to run on a physical device.

• ionic build <platform>

ionic build android/ios

This command is the proxy for cordova build ionic just have wrapped it on top of it. Just as the command says this will build a platform specific application. example if android you can find your apk file inside

your_app/platforms/android/build/outputs/apk

same workaround goes in iOS as well.

• ionic run <platform>

ionic run android/ios

ionic thought just building apk through their cli is not enough:p So run command is here with twist of lot of handy things for devs, testers etc. What happens inside here is first it do the transpiling , linting and things then build the project and deploy it using adb. This can either be emulator or device depends on your configurations.

Soo yeah , this is the end of it. My ultimate goal of writing article was to give an insightful idea about the ionic architecture and ionic-cli that is required for setting up the ionic 2 application for beginner . Because I faced couple issues understanding couple of things when starting with ionic 2.On my next article I will dig deep into developing ionic 2 application , conventions , using components efficiently talking to your servers etc.

Alright finally , if you come across any issues of understanding , inaccurate data please let me know on comments section I will do my best to rectify them.

Happy Coding !