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:
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:
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;
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:
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!