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 an 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 the 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
- Ionic is a cross-platform, which means we can write a single code for the multiple platforms.
- 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.
- We can change the look of the Application to match the native standards for each platform.
- Ionic Application is a simple, easy interface, easy to update and maintain.
Disadvantages
- Some time testing becomes a big issue in such types of Applications 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.
- Ionic Application requires plugins for the native Application that sometimes becomes a compatibility issue.
- In some cases, Ionic Applications are slower than the native Applications.
- 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 an HTML page like any Web Application.
Cordova
Apache Cordova provides a platform to create a mobile application, using 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 on 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 the 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 the 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 the “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 the Android and IOS platforms. First of all, press “q” to quit. Enter the “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 “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 advantages of ionic is that you can access your device’s screen on your Browser on a remote basis. Now, I will tell you, how we can access the device’s screen on our Browser.
First, run the “ionic run android” command. Afterward, right-click on the Browser Window and select ”inspect element” option. Afterward “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 the “inspect” option, the screen shown below will open.
On this screen, you will get an image of the screen, which currently opens in your device.
Here, you can inspect and edit elements 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 a 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 the 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 sizes of images and orientation for an Android and IOS.
Resource
This folder contains icons and splashes for Android and IOS.
SCSS
Ionic core is built with SCSS, so the folder contains SCSS files for Ionic.
WWW
This folder is the 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 which part of the project will not be present when you upload your project to the 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 the 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 projects 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 a little bit complex, so if you face any issue during setup, then you can write in the comment section or if you have any query, then write in the comment section.
Thanks for reading the article.