Ionic 2 Hybrid Apps – Getting Started
Following on from some of our Angular 2 posts, the next logical step was to delve into the Ionic 2 framework to see what it has to offer.
What is Ionic 2?
Ionic allows the user to build Hybrid Mobile Apps. These apps are built with HTML, CSS, JavaScript and TypeScript and are contained in a native wrapper so the it can be installed and published on a mobile device, whether that be iOS or Android.
This is very advantageous for the developer as it allows him/her to create and publish mobile applications without having to be proficient in their native programming languages (e.g Java for Android).
You can always read up on it here.
Ever wonder where we get our icons from? Check out the Ionicons cheatsheet here.
Why Ionic 2?
Aside from the aforementioned hybrid mobile benefits there is quite a few things to get excited about here. Firstly, the documentation is very well laid out.
https://ionicframework.com/docs/
This allows us quick access to a multitude of structural components to use for an application.
For example, one of the most basic components, cards would use the following markup.
Card Header
As you can see custom HTML tags can be used to generate this structure with outputting a result like so.
There is a whole host of different components like this with usage examples for most so be sure to experiment with different combinations
Getting started.
You’ll need to install the latest version of Node before installing Ionic. Once installed you will have open up your command line and type.
npm install -g ionic cordova
This may take a few minutes.
To create a blank new Ionic project in your current directory you should then use the command.
ionic start MyProject blank --v2
However, we also have other options to create our Ionic application. Ionic will generate some of the applications structure if we specify in a different command.
$ ionic start myApp tabs --v2
We can also generate a project that has a fully integrated sidebar using the command.
ionic start myApp sidemenu --v2
These templates tend to be very useful when you want to scaffold a prototype as fast as possible.
Ionic Native
While the custom layout elements provide a variety of ways for you to creatively structure an application, the plugins or (Ionic Native) are also an extremely useful feature. They are a set of plugins that add native mobile functionality to your application. To install one simply use the command:
Ionic plugin add plugin-name
The plugin has now been added to the project. You can check it out in the plugins folder
Like most packages/plugins that you add in we have to import it at the top of the desired component where it will be used.
import { NativePluginSample } from 'ionic-native';
You can find a whole host of native plugins here.
I hope this post gave you an insight into how Ionic can benefit you for hybrid application development.
We’ll be sure to cover more interesting topics about it in our next post. Including how to publish to an application to the Android SDK. Be sure to have a look at our resource page for any other useful reading material.