Introduction: Creating an Android App Using Ionic

Ionic is a framework which makes writing apps for almost all platforms extremely easy. If you know a little css, js and html you can create an Android/ iOS or Windows app.

This instructable will focus on how to create an Android app on a Linux or Mac PC. It is also possible to do it on a Windows OS and the code will be the same, just the comments and the use of Ionic will be different.

Step 1: Getting Started

First you need to install Node.js
Cordova and ionic command line tools:

$ npm install -g cordova ionic. 

(you might have to run this as root, so if it doesn't work try using sudo).

and the platform dependencies for Android

Now you are all set to create your first project.

$ ionic start myApp blank 

The blank is a template project from Ionic, you could also choose tabs which is an already further developed project.

Okay let's see what ionic has created.

$ cd myApp
$ ionic platform add android
$ ionic serve

this will open a webpage at localhost/8100 showing how the app looks. Of course this is not really how it will look on a mobile device, so lets take a look at how to show that.

Step 2: Testing the App

There are several ways to test the app: the first one is to just open the webpage created using serve in previous step in google chrome. Tap F12 to open the inspection menu.

In the left upper corner of this menu (next to elements) you can see a phone icon. If you click this the browser will go into mobile mode and you can see what the app will really look like. Move the inspection menu to the right side of the screen by clicking the button second from the right. you can choose the device you want to simulate by selecting it in the device dropdown.

Note: The look here will be the same as on the real device, however somethimes the app might work here but not on the phone, this is because chrome is more forgiving on small errors than the phone, or because of some device specific problem.

So to test it fully, you either use an emulator or a real android device.
To use an emulator just run

$ ionic emulate android .

To test it on your own device: plug it in via USB, make sure that debugging is enabled on the device (if you don't know how to do this, google is your best friend) and run $ ionic run android.

You can see that you have a blank page with a header.

Step 3: Taking a Look at Our App Structure

lets take a look at what files Ionic has created:

The map of importance to us (where we will create the app is www/) , all the others are files Ionic uses to create the final product, so lets take a closer look at that one.

For those who have already created some webpages this might seem familiar. You have the html file which contains the static information of the app, the js map containing Java Script files for dynamic information and the css map containing the style elements.

Step 4: Taking a Look at Index.html

So if we take a look at the index.html file we see this.

Between the head tag we put the information necessary to display our content: the link to the css stylesheets, the link to angularjs, cordova, and the link to your Java Script file.

Between the body tags you put your content. here you can see an ion-pane, which is just a sort of container for data in ionic, containing a headerbar with a title.

Step 5: Creating a Home Page and Adding Side Menu

Lets really start on the app now and create a nice home page and a side pane for navigation. The best way to do this is to not start putting everything in the index.html page, but to make seperate template files in a templates folder.

In the new index.html not a lot has changed: just the name of the app and the header has been removed. Ion-nav-view has been added, this is a class that loads the default template defined in app.js

Here you can see that I have created some states, these are used to navigate in your app. The sidemenu is an abstract state, which means it can not be used directly, but only by using states that are children of this one (like home). When we use home, both home.html and side-menu.html are loaded.

$urlRouterProvider.otherwise('/side/home')

This is the default route to be taken by the app: in other words this is the page that will be loaded when opening the app.

In side menu you can see the code for the sidemenu. You create a scope side-menus which contains the side menu and the content. The content contains the navigation bar at the top of the page.

the side menu contains the information in the side menu, in this case a list of links to different pages and a header bar.

In home.html you can see that a view is used, this changes the text in the navbar, in this case welcome. And the rest is just html for the page.

Step 6: Take a Look at What We Did

This is what the welcome screen looks like at the moment. When you swipe to the right you see the left menu with a header in a different color. These colors are chosen by using bar-positive for the blue and bar-assertive for the red. For other colors you can check the ionic documentation

Step 7: Using the Google API to Create a Map

For a lot of reasons you might want to have a map in your app, Google provides an API to do this easily.

First we need to include the API in the index.html, we do this the same way we included our own js files.

Next add a new template map.html. In this new html file we create a view named navigation and in this view we create a field with custom class map. This is the canvas on which the google map will be put. In our css file we create a rule #map to match the class we just used and set the size to 100%, this way the map will take all possible space.

The hardest part of making the map is the controller. We usually put the controllers in a seperate file, so create a file named controllers.js in the js map. The first line in this file declares it as an Angular js module with name controllers in the myApp context. Next there is the controller NavCtrl, who will handle the map. we define a function intitialize which will initialize the map and paint it on the canvas. Geolocation is used to get your current positition. The map is then created using your position and zoom factor 10. To put a marker on where you are now, we define a new Marker object, with a position, a map to be used and a name.

At the end of our controller the line

ionic.Platform.ready(initialize)

waits until Ionic is ready reading the file and then calls initialize function. This is safer than just calling Initialize. because then the app might or might not do it right. This line will be executed when the controller is created. But we don't use it yet, so lets link it to the map.html page.

For that we create a new state in app.js, in whose view we load the map.html page and the controller: NavCtrl.

Now all that rests is to point our Navigation in the sidebar to this state. We do this by adding a ui-sref attribute to the link in side-menu.html. sref stands for state reference, so instead of referencing a url, and having to change it if you decide to change the url, you just use the state.

Step 8: And That's It

Really it is that simple.

I know the screenshots aren't always clear, but Instructables did not let me insert HTML code in the text itself.

If you want to read the final product in full, it is available on github

Thanks for reading, if you have any questions, don't hesitate to leave a comment.

Should you decide to create an app yourself, feel free to share a screenshot in the comments.