Building Apps with Apache Cordova
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.
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.
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.
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.
Now we have a very dull looking clock. So let’s add some CSS in css/index.css in to make it look better.
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.
This article aims in teaching the basics of Cordova, however the same can be extended to build much more complex applications.