JAVASCRIPT

Build Your First Mobile App with Ionic – Part 1


I believe one of the really good ways of properly learning something is taking baby steps.

I started learning how to build mobile applications with Ionic Framework last week and I am excited to share my learning process and knowledge with you.

Let’s let to build mobile apps with our existing web skills together. You need to have some knowledge of HTML, CSS and JAVASCRIPT to move along. A little knowledge of AngularJS is also necessary.

Step 1

  1. Make sure you have an up-to-date version of Node.js installed on your system. If you don’t have Node.js installed, you can install it from here.
  2. Open a terminal (Mac) or a command interpreter (cmd, Windows), and install Cordova and Ionic:
    • npm install -g cordova
    • npm install -g ionic
    • On a Mac, you may have to use sudo depending on your system configuration: sudo npm install -g cordova ionic
  3. If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
    • npm update -g cordova
    • npm update -g ionic
    • Or sudo npm update -g cordova ionic

Follow these links if you want more information:

Step 2

Ionic comes bundled with some predefined boilerplate templates that just makes it easier for you to build untop of.

Run ionic templates on your terminal

Screen Shot 2016-01-01 at 3.33.05 AM

Let’s use the sidemenu template.

The name of the app we will be building is called Devangelist.

Devangelist will be an app that gets top developers from Github, analyzes their repos and gives us the status of these open source contributors.

So, go ahead and run thisionic start devangelist sidemenu on your terminal.

Now, that the template is downloaded, go ahead and run ionic serve --lab on your terminal.

This brings up the app in iOs and Android view. I love to develop this way so I can see both platforms at thesame time.

Right now, this is how it looks on my browser:

Screen Shot 2016-01-01 at 3.40.15 AM

You can as well just run ionic serve and it will run the app in your browser.

 This is the result of ionic serve on your browser with the side menu toggled:

Screen Shot 2016-01-01 at 3.41.31 AM

Screen Shot 2016-01-01 at 3.42.26 AM

Step 3:

Let’s explore the folder structure

hooks –

platforms – these are the where platform specific files reside

plugins – home for the all the cordova and ionic plugins used in the project

scss – home for our sass files. Ionic is bundled with Sass which makes it a lot easier to use mixins and global variables.

www – home for our app logic. It contains css, img, js, lib, templates folders and index.html file.

templates houses the various view files.

js houses all our controllers, services and app.js where our routes will be. Ionic makes use of Angular UI router which involves the use of states.

Open app.js file

Change the name of the module from starter to devangelist, starter.controllers will also become devangelist.controllers

 

..the run method is invoked once the application loads and $ionicPlatform is an ionic inbuilt service that has a ready method that can be called on it. It is triggered when the mobile device is ready. It hides the keyboard and disables scroll by default.

Now this wouldn’t work unless we download the cordova plugin that is responsible for handling the native mobile keyboard. There are several cordova plugins that makes it possible to interact with the native functionalites and features of a device like the camera, accelerometer, sharing, device battery et.c. The list of those plugins can be found here.

ionic plugin add com.ionic.keyboard

Run the above command in your terminal to add the keyboard to your app.

Now open controllers.js

Get rid of the contents of all the controllers, let be like this:

 

Now, you’ll discover that the app reloads automatically after each change to any file which is totally cool, saves us the stress of having to reload the browser everytime.

Open index.html which is resident in the templates folder

This is the file that links everything together. You’ll see the link to the ionic bundle script, app.js, controllers.js and all the styles.

 

<ion-nav-view></ion-nav-view> is where all the UI for the app will actually be rendered. It’s an ionic directive for navigation views.

Note: I changed the ng-app value from starter to devangelist. Now our app is back online and working.

We are going to have 3 main menu views in our app:

1. Developer – this when clicked will give us developers information

2. Location – this when clicked will put the developers on a map based on their location

3. About – this when clicked will show us simply what the app is about.

Open menu.html in the templates folder, this is it:

 

Replace it with this:

 

Like i said earlier, Ionic has a lot of components – directives and icons.

You can read the component documentation here and ionic icons here

Now our view should look like this:

Screen Shot 2016-01-01 at 11.13.48 AM

We have:

<ion-side-menus>,

<ion-side-menu-content>,

<ion-nav-bar>,

<ion-nav-buttons>,

<ion-nav-view>,

ion-side-menu>,

<ion-content>,

<ion-list>

<ion-item>

You can experiment with these components for various types of layout for the menu.

The ui-sref attributes point to the different states we want the app to navigate to when the item is clicked. We’ll cover that soon.

The menu-close attribute directive ensures that the menu item closes/disappears when it calls another state, and opens a new view.

Step 4:

Let’s set up the routing for the views.

Open app.js,

let the the .config section be like this:

 

We have different controllers for the various views and we have about 3 states.

By default, when the app is opened, it shows the developers view, it routes to that state.

$urlRouterProvider.otherwise(‘/app/developers’);

Now create the following files in the templates folder:

– location.html

– developers.html

– about.html

Step 5:

Let’s deal with the developers view. The developers view will have two tabs namely PHP and JS. Let’s set it up:

developers.html

 

Right now, if you check the app, it looks weird, there are two tabs but it’s just plain white.

Let’s setup Sass for our project. Run ionic setup sass.

Now, create devangelist.scss and dump this in it: This is where will we define the values of our global css variables and mixins

devangelist.scss

 

Also, create developers.scss and dump this in it:

developers.scss

 

There are so many selectors here we will be changing through the course of this tutorial, so don’t worry if you see somethings that are odd.

Now, we need to import these files in ionic.app.scss

ionic.app.scss

 

Can you see the custom styles?..Nice

Now, check your app, this how it should look like now:

Screen Shot 2016-01-01 at 1.54.37 PM

Screen Shot 2016-01-01 at 1.54.27 PM

Conclusion

Our app is been whipped into shape gradually. Take ample time to explore the components we have currently and the styles we have in the sass files.

In the next post, we will start adding logic to our controllers and also start using the GitHub API to fetch results into our app.

Please, let me know if you have any questions or observations in the comments sections. :smile:

PROSPER OTEMUYIWA

About PROSPER OTEMUYIWA

Food Ninja, Code Slinger, Technical Trainer, Accidental Writer, Open Source Advocate and Developer Evangelist.