What is Ionic?
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 Before we start customizing, we want to check to see if everything is up and running alright. So in our command line we can have to run a few commands:
$ ionic build ios
$ 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!comments powered by Disqus