Ionic Framework Tutorial for Building Mobile Applications

Have you heard about Ionic Framework? It is the most popular framework for building hybrid mobile applications. This post is a introductory post about the Ionic Framework Tutorial I will be posting here. In this post we will learn about the environment setup for Ionic Framework. And we will also deploy a very simple Hello World application. So lets start.

Prerequisites

Though you can easily build Hybrid Applications but we will be discussing about Android here. Now don’t worry if you don’t know java. Because you need the knowledge of HTML, CSS and JavaScript for building Mobile apps with Ionic Framework.

What is Ionic Framework?

Ionic is a front end HTML Framework. It is build on AngularJS and Cordova. If you are a web developer then you can easily start building Mobile Applications using Ionic Framework as it uses the web technologies like HTML, CSS, JavaScript. etc.

Ionic Framework Tutorial

So the first thing we need to get started with Ionic Framework is itself the Ionic Framework. 😛 Installing Ionic is very easy but before you install Ionic you need to.

Installation

Install Android SDK

  • If you already have Android Studio and SDK installed in your computer then you can skip this step. You can get the Android SDK from this link.

Install Node JS

  • To download and install Node JS go to this link.

Install Ionic Framework

  • To install Ionic framework open command prompt in windows. I am using OSX so I will open terminal.
  • Now run the following command.

  • If you are using a Windows OS then you need to remove sudo from the above command. And you need to open command prompt as administrator.
  • When you execute this command Ionic Framework will be installed after few minutes depending on your internet speed.

Starting an Ionic Application

Now we have done with the installation and we can start developing mobile applications. So lets create a blank Ionic Application.

Creating a Blank Application

  • To create a blank application we can use the following command.

  • So I will run the following command to create a blank application.

  • Now we need to navigate inside the apps directory and we can do it using the cd command.

Adding a Platform

  • As we will be learning developing android application so I will add android platform on the created project. To add android platform just type the following command and hit enter.

  • You can also write ios instead of android if you want to build for ios.

Understanding Directory Structure

  • Open the project folder. It will look like this.

ionic framework tutorial

  • For a better view you can open the folder with a text editor. I am using Sublime text editor for this.

ionic framework tutorial

  • Now lets discuss the directories and files.
    • hooks
      This directory contain scripts used for Cordova commands. Don’t worry much about this as we will not be using this for now. 
    • platforms
      We will also not be using this folder. This folder contains the Android and iOS platforms.
    • plugins
      Here cordova plugins are installed. Everytime the project is created some plugins are installed. We can add more plugins that are available. We will learn adding plugins later.
    • resources
      The folder contains resources like icon start screens etc.
    • scss
      This folder contains the sass files. We can also use CSS for styling.
    • www
      This is the main folder for coding the application. www is the default name but it can be changed if needed. You will find some more folders inside this folder. So lets see what are these.

      • css for storing our stylesheet that will be used for styling the application.
      • img for storing the images used in the app.
      • js contains apps main configuration file (app.js) and AngularJS components (controllers, services, directives). And also all the javascript that we will be writing while development will be stored here.
      • libs to store libraries, it is also clear from the name.
      • templates will keep our html files for the application.
      • index.html is the starting view of the app.
    • Other Files
      • .bowerrc is bower configuration file.
      • .editorconfig is editor configuration file.
      • .gitignore when we push the app to githup repository this file used to instruct which part is to ignore from the app. For example we don’t share api keys used.
      • bower.json will contain bower components.
      • gulpfile.js is used for creating automated tasks
      • config.xml is Cordova configuration file.
      • package.json contains all the information about the application, dependencies and plugins.

Customizing the First Screen

  • So you know now that index.html inside www is the starting point of the application. So open it and I am writing a simple h2 here. Just remember all the content is added inside <ion-content> </ion-content> tag.

Running The Application

  • We have two ways to run or debug the application.

In Emulator

  • The first one is in the emulator. So if you have an Android Emulator already installed just run the following command to start the app.

  • And you will see the following output.
ionic framework tutorial
Ionic Framework Tutorial

In browser

  • You can also test the application in browser. To run it in browser execute the following command.

  • And your app will be launched in your default browser. You can also use the toggle device option from the console to debug it in mobile view.
ionic framework tutorial
Ionic Framework Tutorial

So thats all for this Ionic Framework Tutorial friends. This post was only about starting Ionic Framework. In upcoming Ionic Framework Tutorial posts I will discuss some useful development topics. And if you want to recommend that what we should write in upcoming Ionic Framework Tutorial then please leave your comments. Thank You 🙂

5 thoughts on “Ionic Framework Tutorial for Building Mobile Applications”

  1. this is great tutorial … I have been following u since a long time .. i have a question regards this topic .. Ionic is used to design hybrid mobile apps .. my question is how do we connect ionic design element like (button,edittext) with android for ex: we connect xml design code with java via FindViewById … if i design a button in ionic and i want to perform some action from android then how will i able to do that ???

    Reply
  2. spawn eaccess error is coming while running/building the android app while its running fine in ios, I m using mac OS, I have android sdk,jdk everything installed too.

    Reply

Leave a Comment