Building Apps with Apache Cordova

Last Updated : 30 Jun, 2020

Apache Cordova is hybrid mobile development framework used to create mobile apps out of progressive web applications. However, Apache Cordova is used to make mobile apps using web view and it cannot be used for native android app development. The downside to web view applications is that it is slower in performing than native applications, nonetheless, this is not enough difference to have any noticeable changes in the performance speeds.

Getting Apache Cordova

First up, install Node.js for your respective computer specifications and set up npm environment variables.

Node Package Manager(npm) is used to easily install or upgrade or uninstall packages to your computer. We have to install Cordova packages. We type in the following commands:

npm install -g cordova

-g refers that the package is installed globally, this means you can set up your Cordova project anywhere in your computer.

Then download the Android SDK and install it in your computer.

You have successfully installed Cordova and Android SDK in your computer. Now let’s create our project. In this article we will build a simple clock application using HTML, CSS and JavaScript.

Creating a project

Go to the folder in which you want to create your project in. Create your first project using the following command:

cordova create projectDirectory com.example.name ProjectName

com.example.name is the project ID, ProjectName is the name of the project and projectDirectory is the directory that is now created for building our Cordova app. Change the working directory to the project you just created.

cd projectDirectory

Now let’s add our platforms. It is to be noted that Cordova is a hybrid app development framework, this means that the same codebase can be deployed to multiple platforms such as Windows Desktop, Android Phones, iOS Phones etc., In this example, we are going to deploy to android.

cordova platform add android

Note: If you want to develop for Apple iOS, you need to have XCode which can be installed only in MacOS desktops.

Now we have successfully created a project and added all the modules required for android.

Coding our app

All of the code files that we will be using will be created in a folder named www. Here we can see an index.html file, js/index.js file css/index.css file. Our entry point is going to be index.html. Apache Cordova would have already created a simple starter template. We won’t be needing that as we are going to start coding from scratch. So, open a code editor and remove all the code from index.html, js/index.js and css/index.css.

Now let’s make a simple HTML that has a div container where the clock is displayed and a heading text. Let’s link our stylesheet and JavaScript to the HTML. Now we have the basic view structure of the app, but it still does nothing. So to add functionality, let’s write some javascript codes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0"> 
    <title>Geeks For Geeks Clock</title> 
    <link rel="stylesheet" href="css/index.css"> 
</head> 
<body>     
    <div> 
        <h2 id="Text">Geeks For Geeks</h2> 
        <div id="ClockDisplay"></div> 
    </div> 
    <script src="js/index.js"></script> 
</body> 
</html>

Let’s add some functionality in js/index.js. Create a function named showTime which takes in Date object and sets the inner text of the container in which ClockDisplay is residing to time. Also, set the interval in which the function needs to be repeated. Here, the function repeats itself every 1000ms or 1 second.

Javascript

function showTime() { 
    var date = new Date(); 
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    var s = date.getSeconds(); 
  
    var time = h + ":" + m + ":" + s; 
    document.getElementById("ClockDisplay").innerText = time; 
    document.getElementById("ClockDisplay").textContent = time; 
} 
setInterval(showTime, 1000);

Now we have a very dull looking clock. So let’s add some CSS in css/index.css in to make it look better.

CSS

html { 
  height: 100%; 
} 
body { 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: black; 
  font-family:'Open Sans', sans-serif; 
} 
  
#ClockDisplay { 
  width: 80%; 
  font-size: 20px; 
  text-align: center; 
  font-size: 19vw; 
  color: #acfac1; 
  /*text-shadow: 0 0 5px #fff, 0 0 10px #fff, 
    0 0 15px #82e896, 0 0 20px #82e896,  
   0 0 25px #82e896, 0 0 30px #82e896, 0 0 35px #82e896;*/ 
} 
 
#Text { 
  color:white; 
  font-family:'Open Sans', sans-serif; 
  text-align: center; 
  font-size: 30px; 
} 

Open index.html on a browser to see it’s working. Now we have to move to the next stage, i.e., building the Android Application Package(or .apk file).

Building our app

Apache Cordova makes it really simple to build applications. Open terminal, and change the directory to the Cordova project directory. Just type the following commands to build:

cordova build android

The build process will take some time and save the output file in “(projectfolder)\project\platforms\android\app\build\outputs\apk\debug” as “app-debug.apk”.

Transfer this file to your mobile and install it.