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.
Table of Contents
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.
|
1 2 3 |
sudo npm install -g cordova ionic |
- 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.
|
1 2 3 |
ionic start your-apps-name blank |
- So I will run the following command to create a blank application.
|
1 2 3 |
ionic start helloWorld blank |
- Now we need to navigate inside the apps directory and we can do it using the cd command.
|
1 2 3 |
cd helloWorld |
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.
|
1 2 3 |
ionic platform add android |
- 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.
- For a better view you can open the folder with a text editor. I am using Sublime text editor for this.
- 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.
- hooks
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link rel="manifest" href="manifest.json"> <!-- un-comment this code to enable service worker <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); } </script>--> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <!-- this h2 is added --> <h2>Hello we are learning Ionic Framework</h2> </ion-content> </ion-pane> </body> </html> |
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.
|
1 2 3 |
ionic run android |
- And you will see the following output.
In browser
- You can also test the application in browser. To run it in browser execute the following command.
|
1 2 3 |
ionic serve |
- 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.
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 🙂
