Building Your Own Mobile App With Cordova

Using Cordova may be the fastest way for many web developers to start building a mobile application. With Cordova, you don’t need to learn a new set of programming languages, you can simply use HTML, CSS, and JavaScript.

You can compile your codes into numerous mobile platforms including iOS, Android, Windows Phone and BlackBerry using the Phonegap build tool. The question now is “where to start?”

To begin with, we need to create a “Cordova Project”. If you are a web developer who is interested in building your own mobile application, follow this post. We will show you the quickest way to start a project for building mobile application with Cordova. Let’s just get started.

Recommended Reading: 10 Frameworks To Build Mobile Application With HTML, CSS & JavaScript

Cordova CLI

Cordova comes with Command-line Interface (CLI) that includes the command to create a project, emulate and build the app. The Cordova CLI is available as a Node.js Package. So you have to install Node.js to be able to install it.

Assuming you have it installed in your computer, you can type this command line in Terminal or Command Prompt to install Cordova CLI.

  npm install -g cordova
  

This will install the cordova command globally; you can reach the command anywhere in your computer directories. Type cordova -v to get the installed version.

Creating a Project

Once you have installed the Cordova CLI, starting a Cordova project will be a breeze. Even without being familiar with command lines, this should be easy to follow. We can create a project with the create command followed by the project folder name, for example:

  cordova create hongkiatcom
  

This command will download all the necessary files as well as some example files to help us get started with the development.

Once the project has been created, enter the project directory using cd <name-of-the-project-directory>. This folder should contain the number of folders as follows.

• The hooks folder may contain scripts that customize the native Cordova commands.
• The merges folder may contain HTML, CSS, and JavaScript files for specific platforms and will override with those in the www folder upon the application deployment.
• The platforms folder will contain native app files when we aim to build for specific platform.
• The plugins folder will contain plugins that extend Cordova.
• The www folder contains general web files that are shared across platforms.

Platform IDE

Before proceeding further, we will need to have an IDE such as Xcode for develeping iOS app, Android Studio for developing Android, and Visual Studio for Windows Phone. Since I’m using OS X and have Xcode installed already, I will be using them to add the iOS platform in my project.

Type the following command:

  cordova platform add ios
  

As mentioned, this command will add native files to build apps for the specified platform in the command line. After running the above command, you should find a folder named ios containing .xcodeproj files and a bunch of other files, as follows.

If you have added the Android platform, you shold find a folder named android instead.

Add the Project in IDE (Xcode)

Now we add the project directory to the IDE, which in this case is Xcode. Launch Xcode. Go to File > Open menu and navigate to the platform directory â€" for example /platforms/ios. Click Open to open the folder in Xcode.

You can modify anything â€" HTML, CSS, Image, and JS â€" within the www folder. When it is done, click the play button on the top left of Xcode to compile the app and present it in iPhone Simulator.

Final Thought

Cordova has made creating a mobile app easy to follow. We can build a mobile app like we build a website. In this post, we have shown you how to create a Cordova project and present the app in iOS simulator. There are actually so much more to explore in Cordova. Alas I hope that this post can help you get started on using Phonegap for developing mobile app.