Building the Ionic App

What is Ionic?

Ionic is a front-end framework that is built on Cordova, Angular.js and sass. Cordova is a platform for building native mobile apps that use web based technology (ie. we will be building in HTML, CSS and JavaScript). Cordova then takes the developed website we've made and translates it into cross platform mobile apps (android, ios etc).

Ionic takes Cordova and puts some easy command line wrappers around it to make it easier and more intuitive to learn and build in Cordova. Ionic then stacks sass and Angular on top of it.

Building an App

First we want to install Ionic globally:

$ npm install -g cordova ionic gulp

Then we want want to clone a demo project:

Ionic makes it super easy to to clone default projects and it is instantly created in our directory. I cloned myApp tabs.

$ ionic start myApp tabs

Now lets cd into our myApp directory:

$ cd myApp

Remember that when we clone something from github, all the dependencies are listed in the JSON file but are not included. So we just need to quickly install the dependencies with:

$ npm install

Once we've installed cordova, our default project and our dependencies we just need to choose which platform we want to build on. I will be building with ios. So we just need to let the project know:

$ cordova platform add ios

Great now everything is set up and we can check out our app!

Testing the App

$ ionic build ios

This takes all of our documents (the HTML, CSS and JavaScript) and runs it together to create an app through an xCode ready project. It is now ready to be worked on and developed!

$ ionic emulate ios

The emulate command will display our app in a little phone emulator to show us what the project will look like on a phone.

The app itself has some dummy text and and different views, so if you click on Chats you will see a different page and if you click on Friends you will get to a Friends page.

Right now it looks a little bland with with washed out grey on white, but that's ok because we will soon get to customizing it!

As we can see when we run ionic emulate, it takes some time for the system to render our app. Because this is web based code, we can also run it in our browser!

$ ionic server ios

You don't have to use the browser view, but I recommend it for little changes and tweaks as it is much faster to see what you are doing! Also, if you are using Chrome, you can modify the view to mimic the screen size you are building on! As you can see here, the webpage is stretching out my app:

But if you go into Inspect Element, you can click on an icon that looks like a phone and then choose the type of sceen you want to view, make sure you refresh so that everything resizes to your new view and then you can edit just like the emulator!

And as you can see instead of the mouse arrow, it is replaced by a thumb circle, it now acts as your thumb on a touch screen! (so cool!!)

Great! Now we know that our app is working and how to check our edits, so let's start customizing!