How to develop a low-cost mobile application using hybrid/ionic platform?

Publicatie datum: Jun 01, 2017

One crucial aspect of software development for either an organization or individual mobile app developers, is mobile applications. Nearly everyone on earth (more than 2billion people) owns one type of smartphone or the other, and those smartphones run various applications. This makes the creation of mobile applications something every programmer or entrepreneur wants to do. But the problem with making mobile applications lie in the technology associated with its development. There are two operating systems that rule the mobile world presently: iOS and Android, and both of them have their specific platforms for development. iOs has Objective-C and Swift, while Android has good ‘ol Java. Learning either one or both of these technologies to develop a mobile application is enough to turn off for a lot of developers. Well, that was until the advent of hybrid platforms. Hybrid/Ionic platforms or frameworks let developers create mobile applications using technologies they are already familiar with: HTML, CSS, and JavaScript. Another interesting thing about this is that mobile app developers only need to write one single code base that can then be reused across various platforms, whether iOS, Android or Microsoft. Enough talk, let’s jump into how to make a simple hybrid application that can run on either Android or iOs.
The first thing you would need to do is choose which hybrid development platform you would want to use. There are a lot of good ones to choose from; Apache Cordova, Telerik, PhoneGap, etc. For the purpose of this article, we would be developing using Apache Cordova. To start using these hybrid tools, you need to first sign up with the providers. A lot of them are free, so you do not have to worry about initial costs. In the case of Cordova, you would require their command line tools, which can be installed on your system using npm. To use npm, you first have to install it on your remote system. After certifying you have npm installed, run the following command in your command line:

npm install –g Cordova

This command downloads a bunch of files required for you to get started with Cordova. Now that Cordova is installed on your device, you can now go ahead to create your first hybrid project by running the following command:

cordova create FirstCordovaProject

This command creates a project called FirstCordovaProject. Next, you need to change the directory to the project folder. Type the following command:

cd FirstCordovaProject

Once this is done, you would need to install Cordova's platform. Establishing a platform is important, so Cordova knows how to build your application for the various platforms you intend on targeting. Let’s stick with running the application on our browser for now. Run the following command:

cordova platform add browser

cordova run browser

If you have followed all the steps correctly up until now, a simple web application should have opened in your browser. It’s able to run in the browser because, well, the program is written using HTLM, the “language” of the web. But the app doesn’t look like much now, does it? Let’s try adding a few things to our app to make it do something. Type in the following command into your command line:

cordova plugin add cordova-plugin-network-information

What this command does, is it gives us the ability to connect to a network. Next thing, let’s make our application display something other than what it does display now. Locate the index.html file in your project folder. Open it up, and you should see a line like this:

<p class=”event received”>Device is ready</p>

Yeah, as I said earlier, this is good ‘ol HTML right here. Below it, add the following line to it:

<p class=”connection”></p>

Save the file and close it. Next thing we need to do is change our JavaScript code. Locate the index.js file in the JS folder, and search for the line that looks something like this:

Var receivedElement = parentElement.querySelector(‘.received’);

And add the following lines of code just below it:

var connectionElement = parentElemment.querySelector(‘.connection’);

connectionElement.innerHTML = navigator.connection.type;

Doesn’t it just feel right doing all of these in reliable JavaScript and HTML? Save your work, and restart the application in your browser. You should see a text “UNKNOWN” under the Device is ready. That’s totally fine. Since we are running the application in the browser, the browser can’t tell what type of device it is. Now let’s try testing out our application on a real device. To do this, we need to add the platform we would want to deploy our applications on. For Android and iOS, run the following in your command line:

cordova platform add ios android

To run the application on your Android smartphone, you need to install the software development kit (SDK) for Android. If you are developing using a Mac, run the following command to install the Android SDK manager:

brew install android-sdk

Once the SDK manager is installed, run the following command:

SDK platform

Great! Now it’s time to run it on an actual device.
For Android, run the following commands:

Android SDK platform-tools
Android SDK Build-tools
cordova run android

If all goes well, you should see your application running on your device. Congratulations! That’s all you need to develop a hybrid application.
To run you application on iOS, you need a system running Xcode 7 or higher. Once you have set up your Apple ID and its requirements, you can run the following command:

cordova run ios

And that’s it, folks! Same code, reusable across various platforms! This makes the life of a mobile app developer relatively easy, and the process of software development a painless one. 

Wij horen graag van u, bel ons of vul het contact formulier in!

Wilt u ervaren hoe wij u kunnen helpen met het realiseren van uw wensen? Dan kunt u ons bellen of mailen middels het contactformulier hier. Binnen één werkdag nemen we dan contact met u op.
Neem contact met ons op


Manifera Software Development Pte. Ltd.
100 Tras Street #16-01 100 AM Singapore 079027
+65 9853 2842