Introduction To Ionic

Ionic is a toolkit, which provides us functionality to create mobile apps, using Web technologies like HTML, CSS, JavaScript and AngularJS for both Android and iOS mobiles. Ionic provides tools and Services to create a hybrid mobile Application but looks like a native Application.

Ionic is a front end tool, which is built over Cordova platform. Cordova provides API for Native devices to interact with JavaScript code and Ionic framework is like a front end tool, which handles how a native app looks and feels.

Before hybrid applications, if we wanted to create any Application for Android platforms, then we needed the knowledge of Java language or if we wanted to create any Application for iOS, then we needed knowledge of Objects of C or Swift programming language .

If we had a need to create mobile Applications, we were required to hire a developer for an Android platform and also one developer for iOS , which was expensive and time consuming. Now, we can create a hybrid Application, which can run on multiple platforms.


If we have basic knowledge of HTML5, CSS, JavaScript and AngularJS, then we can easily build mobile Applications for Android and iOS platforms without needing any knowledge of platform specific language. Hybrid Application is a boon for Web developers because now they can develop a hybrid Application, which is similar to a Web Application .

We can define a hybrid Application as a Web Application, which is built using HTML5, CSS, JavaScript and after that wrapped in native container providing access to native platforms to access the hybrid app. Let’s consider some cons and pros of Ionic Application.

Advantages

1. Ionic is a cross platform, which means we can write single code for the multiple platforms.
2. To create an Ionic Application, we require basic Web technologies like HTML5, CSS, JavaScript, which means we don’t require knowledge of any platform specific language.
3. We can change the look of the Application to match the native standards for each platform.
4. Ionic Application is a simple, easy interface, easy to update and maintain.

Disadvantages

1. Some time testing becomes a big issue in such types of Applicationst because the Web Browser doesn’t always give errors of any wrong code but when we build the Application for the native platform, then we will face the issue.
2. Ionic Application requires plugins for the native Application that some times becomes a compatibility issue.
3. In some cases, Ionic Applications are slower than the native Applications.
4. We can’t use Ionic for heavily graphical stuff like video games or 3D.

After a brief introduction of Ionic and discussing the advantages and disadvantages of Ionic, let’s focus on another important point about Ionic.



Ionic is used to create hybrid Applications and build over the Apache Cordova.

WebView

Ionic hybrid Applications contain a WebView, which is used to display the Web pages. Hybrid Application contains HTML page like any Web Application.

Cordova

Apache Cordova provides a platform to create a mobile Application, using the Web technologies like HTML, CSS, JavaScript and also provide the plugins for the native Application to interact with JavaScript code.

Ionic

We can create a Web Application, using the Apache Cordova platform and package the Application for the native Application but without the Ionic platform, it will look like any Website or Web Application and doesn’t feel like a native Application.

Now, Ionic comes complete with all these requirements. Ionic provides a native look to any Web Application and converts the Web Application to the native Application.

Let’s take a short tour of Ionic platform.



Ionicframework.com is the official Website of Ionic. You can get more about Ionic CSS and JavaScript components, Ioniccons, demos and also information about the CLI (command Line Interface).

Overview


Ionic overview section provides basic information of Ionic. Sass, CLI, Browser and platform is supported by Ionic.

CSS Components

In this section, you can get all CSS components, which you can use in your Application like header, footer, list etc.





Ionic API

In this section, you will get the information about all Ionic APIs, which you can use in your project to implement the animations and effects. You can find all the complex components, which need JavaScript to perform the actions like tabs, menu, slide bar etc.





Ionic Books

This section provides guidelines about the environment setup, installation, testing, building and publishing of an Application.



Environment Setup

Now, we will learn how to create an environment set up for development of Ionic. Follow the steps carefully, because if you miss any steps or have not it configured properly, then you will get an error during the project and it will become difficult to resolve.

Step 1

Install npm

To install the Ionic and other dependencies, we require a CLI (command line interface). For this, we will use the npm (Node Package Manager). Node.js is an official Website and download the latest version of npm.



After successful installation of Node.js, you can check the npm version, using the “npm –v” command.



Step 2

 

Install Cordova

Now, install the libraries for Cordova, using “npm install –g cordova”. This command downloads the libraries and packages, which are required for set up of Cordova.

After successful downloading of Cordova packages, now run “cordova –v” command to check the version of Cordova.



Step 3

 

Install Ionic

Run “npm install –g ionic” command to download the libraries for Ionic setup. After successful installation, run “ionic –v” command to check the installed version of Ionic.



Step 4 Install Bower

Similar to previous command, run “npm install –g bower” to install the libraries for bower. Bower is a package manager, which is similar to “npm” and used to install third party JavaScript libraries. After successful installation, run “bower –v” command to check the installed version of bower.



Step 5

 

Install Gulp

Run “npm install –v gulp” command to install the libraries for Gulp. Gulp is used to build JavaScript code and libraries, which are used by Ionic to build the project.

After successful installation, run “gulp –v” command to check the version of the installed Gulp.



Create a Demo App

After installation of all the required libraries, now we learn how to create an Application in Ionic and built for Android and iOS platform.

First, change your directory, where you want to create your project and run the “ionic start newAPP tabs”. This command creates an Ionic Application with tabs template. Ionic provides some pre-generated templates like tabs, menu and blank.



This command downloads the template packages for tabs Application.



You can check that the  following files or directories are added in myApp folder.



Now, we run this project in the Web Browser, so change your directory to myApp and run “ionic serve” command.



Now, the screen, shown below will open in the Web Browser. This Application’s template is tab based. In this app, we can see three tabs- Status, chat and Account tabs, where three tabs contains content, shown below.


Status Tab



Chats Tab



Account Tab



Build Application for Android and IOS platform

So far our Application “myAPP” is just a Web Application. Now, we build and add support files for Android and IOS platform. First of all, press “q” for quit. Enter “ionic platform add android” command for an Android platform. These commands add the Android support files for our Application.

You can use “ionic platform add IOS” to add the support files for IOS. I only have an Android device so, I only built and run this Application for an Android.



After installing all the required files, let’s check our “myApp” directory. You will find the a “platform” folder is added into the app and this folder contains all the files to run our Application on an Android device.




Build the Application

For it, we use the “ionic build android” command.



This builds a process, which will generate an “apk” file for our Application. Now, we have “apk” file, so let’s run this “apk” file and test the Application in an Android device or emulator.

Now, run the “ionic emulate android” command. This command launches your Application in an Android emulator, if you have sdk. Let’s check our Application Android emulator.







Our Application is running on an Android emulator, which is a virtual device. Now, we try to launch this Application on a real device.

First of all connect your device, using the USB cable and enable the “USB debugging” mode in your Android device.



Now, run the “ionic run android” command. The command launches this Application into your device. I am sharing my device’s screen image, which is running this Application.





One of the major advantage of ionic is that you can access your device’s screen on your Browser on remote basis. Now, I will tell you, how we can access the device’s screen on our Browser.

First, run “ionic run Android” command. Afterwards, right click on the Browser Window and select ”inspect element” option. Afterwards “inspect element” option, go to “more Tools” and click on “Remote device” option.



Now, a screen will open, where you can see your device name. If your device name is not visible, it means your device is not connected properly.

If your device is connected properly, then you can see your device’s URL and click on “inspect option”.



When you click on “inspect” option, the screen shown below will open.



In this screen, you will get an image of the screen, which currently opens in your device.

Here, you can inspect and edit element just like a Website and the change will be reflected.





Ionic provides live testing, which means whenever we change any code in either project file or in Web Browser, the effect will be reflected immediately on your Browser screen and also on your mobile device.



I replaced the “Welcome to Ionic” with “Hello Pankaj” and you can see that this change is immediately reflected on my Browser and device screen also.

Structure of project

After all installation and environment set up, now we will check out the structure of our project and get the use of each file and directory present in our project.

When you open your project, you see the files and directories, mentioned below.


Hooks

It is used for Cordova commands customization and for building the automated processes during the build process.

Node_modules



We installed all the dependency, using the “npm”. This folder contains files for Cordova, Gulp, bower, which we installed, using “npm”.

Platform



This directory contains Android and IOS project files.

Plugins


It contains Cordova plugins wherever you installed any Cordova plugin, which is installed here.

Res



This directory contains the folder for different size of images and orientation for an Android and IOS.

Resource



This folder contains icons and splash for an Android and IOS.

SCSS

Ionic core is built with SCSS, so the folder contains SCSS files for Ionic.

WWW


This folder is most important part of any Cordova project. This is the folder, where we work . All the project related HTML, CSS and JavaScript files are present in this folder.

• Bowerrc
  This contains bower configuration files.
  
  
• Editorconfig
  It contains editor configuration files.
  
  
• Gitignore
  It defines that which part of the project will not be present when you upload your project to Git repository.
  
  
• Bower.json
  It defines dependencies for bpm(Bower Package Manager)
  
  
• Config.xml
  It contains configuration for Cordova like minimum SDK version for an Android, resource for splash screen etc.
  
  
• gulpfile.js
  It is used to create automated tasks used by gulp task manager.
  
  
• Ionic.config.json
  It defines Ionic project name and Id.
  
  
• Package.json
  It contains all the information about project like name, version, plugins and dependencies. 

Conclusion

In this article, we had a brief introduction of Ionic, advantages and disadvantages of Ionic, environment setup for Ionic and also understood the project structure of an Ionic project. In the next article, we will learn more about Ionic. I know the environment setup for Ionic is little bit complex, so if you face any issue during setup, then you can write in comment section or if you have any query, then write in comment section. 

Thanks for reading the article.