First Ionic app in 4 easy steps
Ionic is a complete open-source SDK for hybrid mobile-app development built on top of AngularJS and Apache Cordova. The more recent releases, known as Ionic 3 or simply “Ionic”, are built on Angular.
Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.
Hybrid apps are increasing in demand at a high rate. One such demand by our clients led me to getting hands on experience with Ionic.
Here is a small walk through on building a cross platform app using the Ionic Framework.
STEP #1
Pre-requisites:-
- NodeJS
- iOS and Android emulator
Now, assuming that you have NodeJS and other dependencies installed, let’s install cordova and ionic using the steps defined here http://ionicframework.com/getting-started/ .
As a beginner, you would like to start with a basic sidemenu template which is available on the above link.
If you have successfully executed all the steps defined in the above link, you should see the app come up in your browser at http://localhost:8100.
And it should look somewhat like this,
STEP #2
Covering all the topics of Ionic is not an easy task, so I will cover just the basics and some other features which may be required for a beginner. Also, there is fantastic documentation by Ionic on their official website https://ionicframework.com/docs/ .
Now, let us understand the major parts of our directory structure. Most of our code goes in src folder. Any decent app requires customisations in terms of css, images and fonts. Ionic follows component based UI, which in current context means each screen will be treated as a standalone UI control with its own JS/TS , HTML and CSS. In this app we have two pages home and about and one component description. We should also have a providers folder where all the service files must be kept, thus making the API calls easier and simplified
Generating pipes, components, pages, directives, providers, and tabs can be looked over on the Ionic official site, https://ionicframework.com/docs/cli/generate/ .
We generate a component when we think or know that a particular functionality shall be required multiple times in the app… and a page is where the component can be used.
Every component and page after generation needs to be manually added in the app.module.ts file so that it can be considered as part of project.
So, if we open home-page component then it should have 3 files, home.ts, home.html and home.scss.
STEP #3
Removing/ Adding new components
Here is how we can remove a component remove the description component if our app needs only one page.
- Delete the list folder inside pages folder.
- Remove the below import reference from app.module.ts and app.component.ts.
import { DescriptionComponent } from ‘../component/description’;
- Remove DescriptionComponent reference from the declarations and entryComponents property of @Ngmodule definition in app.module.ts.
- In app.component.ts file remove its reference from the pages property.
Adding a component is pretty much the reverse case of above steps.
HTML/UI/UX Design
The HTML changes go into the .html and .scss pages of every page/component.
- HTML will go in home.html .
- Style rules go into home.scss .
- Media/Image assets go into src/assets/imgs folder
- Custom fonts go into src/assets/fonts. After adding ttf/woff/eot files, you need to refer them in your ionic build.
Adding JS/TS backend
Any logical app would eventually have to get and save data to a backend. It could be a light db embedded with an app or REST API. For this app, we will not be using any backend services/API calls. Instead, it will just be focusing on the frontend part.
Without adding any major JS files it is easy to make an app which resembles the image below.
(If you are interested in seeing the code for the above app, you can visit https://github.com/varunshukla/IonicHeroApp )
STEP #4
- Adding android platform
Now it’s time to convert our web app into mobile app. Make sure android studios is installed in your system. There will be a lot of tutorials to get you going through this step, so I am skipping this step.
To add android platform, run the following command,
ionic cordova platform add android
The above step will add android, splash screens and icons to your directory.
- Building Android APK
To build an apk out of your web app, run the below command and it should generate an apk into folder,
<project_dir>/platforms/android/build/outputs/apk/android-debug.apk
ionic cordova build android
- Adding for iOS platform
To add iOS platform run the following command,
ionic cordova platform add iOS
- Building for iOS
For building your app for iOS, run the following command,
ionic cordova build ios
If all goes well you now have your first fully functional hybrid app for both iOS and Android! :)
- App name and version customisations
Your app name and version can be changed in config.xml file found in your project root directory.
<widget id=”io.ionic.starter” version=”0.0.1"xmlns=”http://www.w3.org/ns/widgets" xmlns:cdv=”http://cordova.apache.org/ns/1.0">
Side Note:- To use HTTP APIs, you need to add HTTP module to your Ionic/Angular app.
- Add the below import statement in app.module.ts and add HttpModule in imports property to load it
import { HttpModule } from ‘@angular/http’;
- Add the below two imports in home.ts. The promise import is used to convert the API calls into promises which gets handy later on.
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/toPromise’;
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
MY EXPERIENCES WITH IONIC
After working on Ionic Framework for the first time, here is my assessment of a few pros & cons of Ionic, which may help you decide whether to use this framework for developing your app… or not.
Pros:
- Easy to learn: It did not take me much time to learn Ionic even though I had no prior experience with Angular.
- Tons of online help available: Due to online resources available on the official website and other Ionic specific forums, the amount of help I received was tremendous. Almost every issue I was stuck with had already been reported and there were simplified solutions to most of them.
- Debugging the app is easier and faster: Debugging in Ionic is easy as it can be easily hosted on a browser and debugged by the browser’s inspect feature.
- Writing tests is simple: If you know Angular, then it’s a piece of cake for you to write tests in Ionic. If you don’t know much about Angular, then you may face some difficulties but overall it won’t be much trouble. For unit testing, Jasmine and Karma are the best fit to be used.
- The layout for iOS and Android need not be defined separately: One of the core reasons why hybrid frameworks like Ionic are preferred these days is because it reduces the work of developers to build and maintain app separately for both iOS and Android.
- Good range of plugins available to use: For most of the features that were needed during the development, there were plugins already available online.
- Works well on a good variety of phones and OSes: You don’t have to specify styles and other minute settings for various devices and OSes separately. Ionic framework is designed in such way that this is already taken care of..
Cons:
- Even though it may seem barely noticeable, there is a small performance gap between Ionic apps and Native apps. The performance of apps built on this framework is not as swift as the ones of native apps.
- The apps developed with this open-source framework may not be as secure as the native applications.
- Some native functionality may not be available in the Ionic framework. In such cases, you have to develop the plugins to fulfill that function yourself.
- While there are quite a few plugins available, there still remain a few use cases for which plugins are hard to find.
Some famous apps which are built on Ionic and are being used widely are listed at, https://showcase.ionicframework.com/apps/top.
