Mobile App Development Framework

Mobile App Development Framework

Mobile app development can be done by using various different platform, but here we will talk about IONIC platform.

IONIC provides an open source framework to develop cross platform mobile app. Advantage for using IONIC is common code base for Android & iOS mobile app.

Lets start configuring system to develop IONIC mobile app

Environment Setup

We need to setup node & npm to begin with IONIC setup.

To verify node & npm installation, please execute below command in new terminal window

$ node --version

$ npm --version

on windows, open command prompt and execute same commands.

If node & npm not exist, please navigate here, to download latest package for respective OS.

Once done, execute below command, to install IONIC framework.

npm install -g ionic

Please note, -g denotes Global, and above command needs admin permission to complete. On Windows machine, open command prompt with “Admin permission” on mac use “sudo”. To get more information for configuration, visit here

Time to create new app

IONIC provide three most common starter template to create new app, a)Blank, b)tabs and c) SideMenu

We will try to create new tab application

cd yourFolderName

ionic start myFirstApp tabs

Once app is created, navigate to folder, you should be able to see below folder structure

  1. ./src/ : This directory having code, to get the most of the work done. When “ionic serve” executes, /src/ will transpiled into correct javascript version.
  2. ./src/index.html : This is entry point for application,
  3. /src/app/app.html : This is main template for app. ion-nav component sitting here to act as main component area.
  4. /scr/app/app/content.ts : First component gets loaded in app.
  5. config.xml : Holding configuration related setting including cordova etc.
  6. package.json : Holding all in-app dependencies

Run Sample App

Time to run and see the app

ionic serve

This will open browser typically with “localhost:8200”. Few more options available with ionic serve like -lab, -local etc, to get more information visit here

Now since, we are well aware about ionic project creation, structure and making it run over browser, so now lets add more pages in app.

Adding New Page

All new pages can be added under “./src/pages”, you must have observed, pages are residing into own folder, and every specific page folder having three files :

  1. *.html
  2. *.scss
  3. *.ts

Its always helpful to keep this pattern, its easily manageable. For more information visit here

Hope this helps to begin with IONIC web app development.

2 thoughts on Mobile App Development Framework

  1. Great write-up.
    Awesome article to kickoff, please extend it for IONIC version 4 and give some insight on how to build app for iOS.
    Appreciate your time and effort for helping us here.

Leave a Reply

Your email address will not be published. Required fields are marked *