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 app 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.
In case you are looking for ways to get more complicated mobile applications developed and want to do your project at affordable cost by an experienced team of mobile app developers, we at Manifera Software Development will get you right there! Contact us for a free consultation or quotation today!
How useful was this post?
Share it with your friends
Get our latest articles here!
Thank you for subscribing to our blog!
Do you have any questions?
Help us improve the content of this Insightful blog by asking us questions. Manifera's team of experts will help you answer these questions as soon as possible.
