What is Ionic / Ionic 2
Ionic is a popular hybrid mobile application development framework, based on Google’s [Angular] (https://angularjs.org/) (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 let’s 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
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:
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.
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
Android
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
Let’s 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
Let’s 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
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…
