Get start your mobile app development journey with Ionic :

Get start your mobile app development journey with Ionic :

In this article, I will help my readers to understand one of the framework for developing apps. The framework is ‘Ionic’. As we all know what position ‘apps’ hold in our lives and there are many ways of developing apps. So, before moving to ‘Ionic’ world, I would like to introduce some of the important concepts of the app development world.

Now, you must be wondering about what concepts I am talking. Let’s end the wait and dive one by one in it.

Web, Hybrid and Native apps :

The moment you start your app development journey, you must have gone through these words and it would have also arisen many questions like what are they? What’s the difference?

Let’s understand them one by one.

Web Apps : Web apps are those applications which we access on our browsers over the network such as internet. Don’t let yourself confused with the word ‘app’. Web apps don’t need to be downloaded on your phone via google play store or app store. They are accessed on web browsers like chrome, safari. They don’t take up any memory of the user. Now, it might arise another question in your mind, ‘It’s behaviour sounds like website then how web apps are different from website’. The answer is websites are generally for providing information whereas web apps are for providing more functionality with information. For example, wikipedia is a website, whereas facebook is a web app as it gives more functionality and interactivity.

Web apps are built in HTML, CSS & JS. There are many frameworks that are available to build web apps that are Angular, React, and Vue.js .

Now come to another heard word which is :

Native Apps : Native apps are those apps that are specifically developed for one platform (environment) using specific language like Java or kotlin is used to develop an app for android platform, whereas Swift or Objective-C is used to develop an app for iOS platform. As native apps are written in particular language that is more understandable by that platform, it makes native apps more interactive with all of the device’s operating system features, such as the microphone, camera, etc.

Now, its time for last one which is:

Hybrid Apps : As its name is self explanatory, hybrid apps are those apps which are having features of native and web apps like they can be distributed on app and google play store just like native apps and can develop using web technologies like HTML,CSS & JS just like web apps. Isn’t it cool?

They are mixture of web and native app. Like a native app, these apps can also interact with operating system features and can develop for both platforms using a single code base. Wait! This may make you curious to know how it is done. Actually, hybrid apps make use of web view concept. i.e. they actually run in a browser that is embedded within the app.

Hybrid apps are actually good to start if time and resources are constraints. Unlike native apps, you don’t have to learn a separate language for development . But, native apps has its own benefits. As I have already said, it is developed in a language that is more understandable by that platform. It makes them more faster and provide better UX. So, both of them have its own pros and cons, it totally depends on your need to determine which one is better for you.

Now, we know what are the different types of apps in app world, but what are the languages/frameworks which we should know for developing these types of apps is still unknown. Let’s discuss it.

Languages/Frameworks to develop these kinds of apps :

I have already discussed about the languages like Java or kotlin is used to develop android apps whereas swift or objective C is for iOS one i.e for developing native apps, we can use Java/kotlin/swift or objective C according to platform. There are also good frameworks available in market for faster developing web apps like Angular, React.js. For hybrid apps development, the frameworks that are available are PhoneGap, Cordova, Ionic.

These are the ways which we can choose to develop our chosen app (native/web/hybrid). But, I would like to tell other two popular mobile app development framework which is React native and flutter. I know you must have heard about them that’s why i thought to discuss it in brief.

React native or flutter are other frameworks for developing apps and there is a one question in a market through which you might have gone that is, whether react native apps are actually native or hybrid one. Although this is not our main concern whether react native apps are native or not. Hence, will not discuss this but, brief intro of react native is that using this framework, development is easy as we have to write once and can use anywhere. The development is done using JavaScript like hybrid apps but unlike hybrid apps, it does’t use web view concept. It uses the same fundamental UI building blocks as regular iOS and Android apps. Hence, the performance is like native apps but the development is like hybrid apps.

This is all about it. Now, I would like my readers to dive into the hybrid app development world as our topic is related to this world.

Hybrid app development world:

As I have already told you that there are frameworks (Ionic, Cordova and PhoneGap) which are available in market for hybrid app development. But, literally they can make you confuse. When i started reading to know about them, i was so much confused. Is PhoneGap same as Cordova or different, how ionic is different from Cordova? That’s why I am writing about it so that my readers don’t face confusion like i faced. Let’s Go.

Cordova is an open source framework that allows us to develop apps using web technologies like HTML,CSS,JS with ability to interact with device hardware and PhoneGap also serves same like Cordova but with some additional features. Now, you might be thinking — Are they same as they both are serving same purpose? To get a clarity, let’s know the story of Cordova and PhoneGap:

PhoneGap was created by Nitobi. Adobe purchased it from Nitobi in 2011. To make it open source, Adobe gives the PhoneGap code base to Apache whereas it is renamed as ‘Cordova’ and now world knows as ‘Apache Cordova’. So, PhoneGap is actually Cordova but with adobe extra features. Initially, there was no difference between Cordova and PhoneGap but with time, Adobe added features to PhoneGap. Hence, we can say that PhoneGap is actually Cordova but with adobe extra features.

Now, come to Ionic. You must be thinking, then what is this ionic? How it is different from Cordova and PhoneGap? Ionic is also built on the top of ‘Apache Cordova’ but with angular (although support for Vue and React are in development). Ionic allows you to develop hybrid app with angular and Cordova. You can use your same angular code of web app with some small changes to develop an app within small amount of time. Isn’t it cool?

I hope now you must have a good picture of app world and more important hybrid app world. Finally, the time has come where we will convert our angular project into the app.

Convert your Angular project into app:

In this sub-topic, we will learn how we can convert our angular project into app using Ionic from scratch in very few steps. Before moving ahead, I would like to tell you about the version of angular and at which platform I have focused more. In this, I have used angular 6 (assuming you have already some angular project that you want to convert into app or ‘Hello World’ project would also be sufficient) and will mainly focus on ‘android’ platform. Let’s start!

Assuming that you have installed NodeJS (if not, follow this link). Now, install Cordova and Ionic using below command (used npm) :

npm install -g cordova ionic

Now, you may be wondering why Cordova? Do you remember, I have told that Ionic is built on Cordova. It gives us features to interact with device hardware. That’s why, it is needed to install Cordova.

Once installation is done, let’s create our ionic project (I have convert one of my angular project ‘meetingTime’ into app. Replace it with your project name) :

ionic start meetingTime

Check out the video to better understand.

To run your project. Go to project directory and use ‘ionic serve’ . It will show dummy project. Now, it’s time to run your actual project. For that, we need to make some changes.

Open package.json of both ionic and angular project and merge it. Once it’s done, open angular.json of your Ionic project and replace the ‘styles’ and ‘scripts’ property with your angular project ‘styles’ and ‘scripts’ property of angular.json.

After this, replace the src of ionic project with src of your angular project. Now, your angular project is ready to convert into app. Before moving ahead, run it and check (make sure you have run ‘npm install’ to install its dependencies). Hurray! I hope you will be able to see your project running perfectly.

Wait! You have not come here to run your project in a browser but want to run it into your phone as a app. No worry! You are not far from this desire.

Before moving ahead, I would like to put a light on file named ‘config.xml’ . This is one of the important file that controls our application setting. In this, we ‘developers’ enters the metadata of our application like packageName, version ,versionCode (for android), CFBundleVersion (for iOS), splash screen configuration and so on. For more detail, visit here.

Now, you know the importance of this file but if you will see your ionic project. This file is missing. To generate it, use below command :

ionic integrations enable cordova

This will generate config.xml. Modify config.xml like your app package name, version and so on.

Wait! Have you noticed that above command not only generated config.xml but also ‘resources’ folder. This folder contains app icon and splash screen (launch image) for different sizes and we know this is the first thing that users see. So, let’s replace that dummy icon and splash screen with our icon and screen but you may be thinking how tedious job is to generate your icon and screen for different sizes. No worry! when Ionic is here then why are you taking care. Just arrange icon image of at least 1024×1024px which should be present at resources/icon.png and splash screen of at least 2732×2732px in the same location. After arranging it, run below command:

ionic cordova resources

This will generate icon and splash screen for different sizes. MAGIC, isn’t? How easy it was? But, want different icon and splash screen for android and iOS. No worry! Follow the link.

Now, you are done with config file, icons and splash screen. As I have already told you I will focus on android platform. So, the time has come to build apk. But, we need to add android platform in our ionic project to move ahead.

To add android platform, use below command :

ionic cordova platform add android

This will add android platform. Now, you can see ‘platforms’ folder in your ionic project, inside of it ‘android’ folder will be there.

Finally, create apk using simple command:

ionic cordova build android –prod

Above command will generate apk.

Note : Generated apk will be debug one and –prod flag minimize and optimize our project (aot complier comes in scene — Angular concept).

Yup! You have apk of your app using Ionic. Install it in your device and see your app.

Wait! We know google play store is not going to accept this debug apk. We have to make it signed. No worry! This is also simple just like generation of debug apk.

Let’s start.

First of all, make unsigned apk (not debug) using –release flag in above command i.e. use this :

ionic cordova build android –prod — release

This will generate unsigned apk. Sign your release build apk using below command :

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore key-store-fiilename.jks unsigned-apk

Align your build with zipalign tool using below command :

[Your Android SDK path]/build-tools/[Newest version number]/zipalign -v 4 android-release-unsigned.apk myapp-signed.apk

Hurray! In just three steps, you got your signed apk that you can distribute in Google play store.

That’s it. This is all about app world and how we can convert our existing angular project into app in an easy way using Ionic.

Thanks for reading!

Get start your mobile app development journey with Ionic : was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.