Hybrid Mobile App Development -Learn by Example
Instill Learning 
Learn how to Create your first Cordova Project for Android, iOS, Browser, and Desktop using HTML, CSS, and JavaScript.
Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platform's native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s sensors, data, and network status.”
If you want to learn how to develop Android & iOS Mobile apps using HTML, CSS, JS & Apache Cordova then enroll in my course here with a 90% discount.
In this blog post, I’ll show you how to Create your first Cordova Project for Android, iOS, Browser, and Desktop using HTML, CSS, and JavaScript.
By Cross-Platform, we mean that the application codebase can be written once using HTML5, CSS3 & JavaScript and it can be run across multiple target mobile platforms such as Android, iOS, Windows, Firefox, Ubuntu mobile.
The web development community has been continually innovating and with the recent development of frameworks such as Angular, IONIC, jQuery, and React, the traditional web applications have now almost become indistinguishable from their native platform-specific peers in terms of functionality.
Apache Cordova can be extended with native plug-ins, allowing developers to add more functionalities that can be called from JavaScript, making it communicate directly between the native layer and the HTML5 page. These plugins allow access to the device’s accelerometer, camera, compass, file system, microphone, and more.
However, the use of Web-based technologies leads some Apache Cordova applications to run slower than native applications with similar functionality.
And the most important thing is: Cordova is free and open source. Here’s how to get started with Apache Cordova.
Use Apache Cordova if you are:
- a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform’s language and toolset.
- a web developer and want to deploy a web app that’s packaged for distribution in various app store portals.
- a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.
If you would like to watch and learn from the video then you must watch it on YouTube and also subscribe to the “Instill Learning” YouTube channel for a future tutorial.
Prerequisite
Before creating a new Cordova App, there are few prerequisites and you have to install this software:
*Node.js (npm comes with Node.js) [ https://nodejs.org/en/ ]
*Cordova [after installing node.js, you can install cordova through command line or terminal by using following command “npm install -g cordova“] [ https://cordova.apache.org/#getstarted ]
Step 1: Create a new Cordova App
cordova create DeviceInfo info.androidabcd.deviceinfo DeviceInfoSample
After creating the new app, move to Cordova project folder
cd DeviceInfo
Step 2: Add the Android platform
cordova platform add android@latest
Step 3: Add plugin to get device information
cordova plugin add cordova-plugin-device
By using this plugin you get the following device information:
- device.cordova
- device.model
- device.platform
- device.uuid
- device.version
- device.manufacturer
- device.isVirtual
- device.serial
Step 4: Open code in Visual Studio Code Editor
If you haven’t install visual studio code then download and install from here: https://code.visualstudio.com/
You can open the Cordova project from the command line or terminal by typing ” code . ” [code space dot], or you can directly drag & drop the project into visual studio code.
Step 5: Edit index.html in www folder
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Devide Info</title>
</head>
<body>
<h2>Device Info</h2>
<div style="overflow-x:auto;">
<table>
<tr>
<td>Cordova Version</td>
<td><p id="version"></p></td>
</tr>
<tr>
<td>Device Model</td>
<td><p id="model"></p></td>
</tr>
<tr>
<td>Platfrom</td>
<td><p id="platform"></p></td>
</tr>
<tr>
<td>UUID</td>
<td><p id="uuid"></p></td>
</tr>
<tr>
<td>Android Version</td>
<td><p id="androidVersion"></p></td>
</tr>
<tr>
<td>Manufacturer</td>
<td><p id="manufacturer"></p></td>
</tr>
<tr>
<td>isVirtual</td>
<td><p id="isvirtual"></p></td>
</tr>
<tr>
<td>Serial Number</td>
<td><p id="serialNo"></p></td>
</tr>
</table>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Step 6: Edit index.js in www folder
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.getElementById("version").innerHTML = device.cordova;
document.getElementById("model").innerHTML = device.model;
document.getElementById("platform").innerHTML = device.platform;
document.getElementById("uuid").innerHTML = device.uuid;
document.getElementById("androidVersion").innerHTML = device.version;
document.getElementById("manufacturer").innerHTML = device.manufacturer;
document.getElementById("isvirtual").innerHTML = device.isVirtual;
document.getElementById("serialNo").innerHTML = device.serial;
}
Step 7: Edit index.css in www folder
table {
border-collapse: collapse;
width: 100%;
}
th, td{
text-align: left;
}
tr:nth-child(even) {background-color: #f2f2f2;}
Step 8: Prepare the Cordova project
After editing the source code in www folder, you must prepare the code, so that it can distribute to all platforms you have added. to prepare the source code type following command in the command line or terminal:
cordova prepare
Step 9: Build Cordova Project
Once you build your Cordova project, you will notice that it will generate APK File and that you can install it manually in any Android device. Or if you want to install the app using the command line then see the next step.
cordova build android
Step 10: Run Cordova App in Android Emulator
You have to run Android Emulator before running this command.
cordova run android
How to run an Emulator
Step 11: Up and Running Cordova App in Emulator
