Skip to content
PLAY VIDEO PLAY VIDEO PLAY VIDEO
By Sameera Gayan

Getting Started with ionic2

What is Ionic / Ionic 2


Ionic is a popular hybrid mobile application development framework, based on Google's Angular (a popular front end framework) and Apache Cordova (a slightly lower level hybrid mobile app framework).

The latest version of the Ionic framework is Ionic 2, which is based on Angular 2 and comes with new features such as ES2015 and TypeScript support. This blog post aims to help you get started with Ionic 2 and shows you some tools that you can use to make your app development process faster. Some of these features are from Ionic v1 and I’ll explain them when we get to them, so lets get started…

Oh… wait, before we gets started, I have a disclaimer :) Ionic 2 is still in beta at the time of writing this article, but it looks pretty stable and the V2 branch is pretty active which is a good sign... Just keep that in mind when you are starting with V2. (ionic@2.0.0-beta.32)

What I'm going to cover in this blog post


I'll be covering the basic installation, getting started, an overview of Ionic components, using native components, theming your app and also a few other tools that might help you along the way.

Ok, lets get started for real… First up - installing Ionic 2!

Installing Ionic 2

Open up your command line and run the following command, (please note that to run this you need to have npm (Node Package Manager) installed in your machine already, if you don't have npm installed already follow this tutorial to install it first.

npm install -g ionic@beta

at the time of writing this post I'm running on 2.0.0-beta.32

Creating a new project

When creating a new project, Ionic gives you some basic templates to start with.

There are 3 main template types:

  • Blank
  • Tabs (default)
  • Sidemenu

So the basic syntax for creating a new Ionic 2 app will be:

ionic start <app name> <template name>(optional) --v2

To keep things simple, we will create an app with the default template (tabs).

E.g ionic start myCoolApp --v2

remember to pass the --v2 option to tell Ionic that you want an Ionic 2 app

Once that command is done, go into the project folder:

cd myCoolApp

Installing Cordova

As you may already know, Ionic and some other hybrid mobile apps are developed using mostly the standard web technologies (html / js / css). These can be tested in a standard browser (I'll get back to that later), but if at some point you want to test mobile versions of your app, you can do so on an emulator using Cordova.

An advantage of installing Cordova is that it gives you access to a whole list of plugins which allow you to access native mobile components, like Camera.

To add Cordova to your app, try this:

sudo npm install -g cordova

Adding mobile platforms

Sweet! Now we will choose the app platform, this could be

  • IOS
  • Android

Add a platform by typing:

ionic platform add ios (please note that to add iOS you should be on a mac)

And for Android:

ionic platform add android

Testing your app

We have two ways of loading our app to a test environment

1 - Emulator 2 - Browser

1 - Emulator

An emulator is a good way to test your app if you are using native components through Ionic plugins (e.g. Camera), because native components will not work from your browser. To load your app via emulator try:

ionic emulate ios you can replace ios with android, if you have added Android as a platform

2 - Browser

Testing your app via the browser is probably the fastest way to test your app, but remember, as mentioned above - browsers will not work if you're using components like Camera, but if you're just reading a dataset from an external API and displaying it etc. then browser testing will be fine.

Further more, Ionic cli will have the option to auto-reload by default. This means that when you change your code and save it, your browser will auto-reload your app to show you the changes.

To open your app in the browser, type:

ionic serve

Now, there is a more advanced way of doing this with an option called lab or l. Not only it will load your app in the browser, but it will also show you how it will look in different devices (IOS, Android, Windows)

Try

ionic serve -l

screen shot 2016-07-15 at 11 28 54 am

If you have a look you will see that the layout is different from one platform to another - this is one of the really cool features of Ionic 2. It will handle the native look and feel depending on the device. You don't have to do anything.

And if you want to configure the options, you can do that too.

Theming your app

With Ionic 2, theming your app is easy. Ionic uses SASS and it's build on a layered CSS system so you can decide how to change the look and feel of your app. Mainly

  • Application wide
  • Only for one platform (e.g. iOS)
  • Only for one component

So to do this, go to app/theme folder in your app and you should see the following:

screen shot 2016-07-15 at 11 41 16 am

Let's break it down...

  • app.core.scss , This file is used to import the style sheets in the app
  • app.ios.scss, This file is used on iOS, so any styles specifically for iOS go in here. This is same for other stylesheets (android, wp (Windows))
  • app.variables.scss - This is where you can change the default styles of Ionic. Basic colours are already given to make your life easy. $colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, favorite: #69BB7B );

If you want to know all the variables that you could use, have a look here. You can add any of them and change their styles for colour etc..

If you want to change styles for only one component / page, each component / page folder has its own style sheet. Changes on there will affect that html file.

screen shot 2016-07-15 at 2 23 23 pm

Ionic components

A good thing about Ionic is that it comes with heaps of components ready to use. So you don't actually have to worry about writing them from scratch. There are buttons, search bars, alerts etc which actually play nicely with native platform layouts.

E.g If you use the search bar component, it will change its style according to the platform.

iOS screen shot 2016-07-15 at 12 58 58 pm

Android

screen shot 2016-07-15 at 12 59 10 pm

Read more about components here

Accessing native device components

Ionic uses Cordova to access native components under the hood. However, they've give a nice wrapper around Cordova, so that we can use ES6/TypeScript style syntax to access them. These native components vary from touch ID to GeoLocation sensors and many more.

read here to find out the full list of native components supported by Ionic 2

Lets take an example of basic code for accessing the camera.

First you add the Cordova plugin:

ionic plugin add cordova-plugin-camera

then you import that inside your component / page:

import {Camera} from 'ionic-native';

and access it Camera.getPicture(options).then((imageData) => { // imageData is either a base64 encoded string or a file URI // If it's base64: let base64Image = "data:image/jpeg;base64," + imageData; }, (err) => { }); code in docs

Have a look at the full list of native components here

Ionic CLI (Command Line Interface)

Ionic CLI has so many helpful commands including the few we've learnt above (E.g ionic serve) but be sure to have a look at the CLI.

If you want to see the from your terminal itself, type:

ionic --help

Tools

Lets talk about the tools that Ionic provides to make development easier. There are whole lot, but I'll only list a few of the main ones.

Generators

If you are coming from a Rails background then you may have worked with generators before. Generators are basically commands that make your life easier by performing common actions (usually resulting in creation of files & folders) easily without the user needing to type everything out. It's the same concept for Ionic 2. There are a few generator commands that you can use to create files like Components, Pages etc. That means if you run the pages generator it will create all the files that you need for the page. Typically that includes:

  • javascript file (typescript)
  • html
  • .sass file (for styles)

Let's list all the generators:

ionic generate --list 
Available generators:
 * component
 * directive
 * page
 * pipe
 * provider
 * tabs

Using a generator to create a Page named login:

ionic generate page Login

Ionic resources

Ionic resources are an easy way to generate images for icons and splash screens. Once you use this generator it will create images for all of the screen sizes etc..

Read more about resource generator here

Ionic view

screen shot 2016-07-15 at 4 03 24 pm

The developers of Ionic not only focused on creating a great framework, but also considered the end to end development cycle of an app. One example for this is Ionic view app. This is an app you can download from the App Store and Google Play which allows you to run your work in progress app inside the Ionic View app.

A practical example of this would be to show your work to your clients. Let's say you finish one of the features that your client asked for, you can simply push that to Ionic's servers. You'll need to register with https://apps.ionic.io/apps first, Ionic will then give you a unique app number.

Then you can ask your client to download the Ionic View app and enter that unique number to load your app. This makes the feedback cycle for the client fast and easy.

This is heavily used by people who sell themes for Ionic apps, it gives the buyer a chance to try the theme in his/her mobile before they buys it.

Almost all of the items in the Ionic market place have an Ionic View ID: to try it before you buy it.

Conclusion

This may look like a lot in the beginning, but my intention for this post was to go through the basics to give you some useful points when developing an Ionic 2 app. I hope this gives you an idea of what capabilities are at your disposal with this tool. For further reading I would highly recommend you go through the Ionic 2 documentation: Ionic 2 documentation

In a later post, I will go through developing a simple Ionic 2 app including accessing an external API...

'Til then, happy hacking...

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email