Building Apps with Apache Cordova - GeeksforGeeks

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. 
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.
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. 
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).
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. 
This article aims in teaching the basics of Cordova, however the same can be extended to build much more complex applications.
Apache
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Top 10 Angular Libraries For Web Developers
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?
Node.js fs.readFileSync() Method
How to redirect to another page in ReactJS ?
How to Insert Form Data into Database using PHP ?