Creating Your Own Mobile App with Cordova

For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications for various platforms using the web technologies you already know: HTML, CSS, and JavaScript. This means there’s no need to learn new programming languages.

With the help of the Phonegap build tool, you can turn your code into apps for iOS, Android, Windows Phone, and BlackBerry. So, where do you begin?

The first step is to create a “Cordova Project.” If you’re a web developer eager to venture into mobile app development, this post is for you. We’ll guide you through the simplest way to kick off a Cordova project for mobile app development. Let’s dive in.

Cordova Command-line Interface (CLI)

The Cordova platform includes a Command-line Interface (CLI) that simplifies project creation, emulation, and app building. To use the CLI, you must have Node.js installed because it’s available as a Node.js Package.

Once Node.js is set up on your computer, enter the following command in your Terminal or Command Prompt to install the Cordova CLI:

 npm install -g cordova
 

This installs the cordova command globally, allowing you to access it from any directory on your computer. To check the version of Cordova installed, type cordova -v.

Launching Your Project

After Cordova CLI is installed, initiating a new Cordova project is straightforward. Even if you’re not well-versed in command-line operations, the process is designed to be user-friendly. To create a new project, simply use the create command along with your desired project folder name, like so:

 cordova create hongkiatcom

This step gathers all necessary and some example files to kick-start your development journey.

Upon project creation, navigate into the project directory with cd <project-directory-name>. Inside, you’ll find several folders essential for your project:

• The hooks folder, where scripts can be added to customize Cordova’s native commands.
• The merges folder, housing platform-specific HTML, CSS, and JavaScript files that will replace those in the www folder upon deployment.
• The platforms folder, containing native app files for each target platform.
• The plugins folder, for Cordova plugins that enhance your app.
• The www folder, with general web files used across all platforms.

Selecting an IDE for Development

Before moving forward, it’s necessary to choose an Integrated Development Environment (IDE) compatible with your target platform – Xcode for iOS apps, Android Studio for Android, or Visual Studio for Windows Phone. On OS X with Xcode already installed, I’ll demonstrate adding the iOS platform to my project.

Execute the command below to include the iOS platform in your project:

 cordova platform add ios

This command adds the necessary native files for the specified platform. For iOS, you’ll find an ios folder filled with .xcodeproj files and various others as shown below.

Similarly, if you opt for Android, a corresponding android folder will be created.

Integrating the Project into IDE (Xcode)

Next, we integrate the project directory with your Integrated Development Environment (IDE), in this case, Xcode. Start by launching Xcode, then navigate through File > Open, and proceed to the platform directory – for instance, /platforms/ios. Click Open to load the folder in Xcode.

Within the www folder, you’re free to adjust HTML, CSS, images, and JavaScript files as needed. After making your modifications, hit the play button at the top left corner of Xcode to compile the app and launch it in the iPhone Simulator.

Wrapping Up

Cordova simplifies the mobile app development process, making it as straightforward as website creation. This guide walked you through starting a Cordova project and previewing your app in the iOS simulator, but there’s much more to discover within Cordova. It’s my hope that this introduction will pave the way for your journey into mobile app development with Phonegap.

Note: This article was initially published on July 7, 2014.