# Tap for Menu

- Menu
- Go Home
- About 3.0 Update
- HTML Code Edit
- HTML Chat Rooms
- Need Support?

# Apache Cordova

Formally PhoneGap, Apache Cordova allows you to build native apps with HTML5, JS and CSS! You can even access device features like the Camera or Vibration. This app was built with it ;) When combined with a framework like jQuery Mobile, you can make truly native apps. Currently it supports iOS, Amazon Fire OS, Android, BB10, WP 7/8, Windows 8 and Firefox OS. It's amazing to be able to use the same codebase over for each platform. Not only do you not have to write a single line of native code like C or Java, but you can ride once and deploy everywhere.

# Installing

Installing Cordova is very simple. Start off by heading over to http://nodejs.org and installing Node.js for your platform. Please note a Mac is required for iOS, and Windows for WP and Windows development.

Next, open Terminal if you are on Mac/Linux. If you have windows open the Command Prompt. Then type the following command for your platform:

Mac/ Linux: `sudo npm install -g cordova`

Windows: `npm install -g cordova`

This uses Node.js to install cordova. Check to see if you have cordova installed correctly by running this command: `npm info cordova`

You can update cordova in a very simple way! Simply run this command:

`sudo npm update -g cordova`

# Our First App

Have some HTML content ready, and make sure your main page is named "index.html".

Go to the root of your hard drive, your documents or where ever and create a new folder, call it apps or something simialar. Keep all of your source code here. Open your command windows and change the directory to the newly created folder.

`cd /Apps`

Let's create a new project! Use this command: (Keep it all on one line)

`cordova create hello com.domain.hello HelloWorld`

In this case a new folder will be created called "hello" and the project will be named "HelloWorld". Make sure to fill in a bundle id. This could be "com.iamjake.app" for example.

Now we must install a SDK for each platform we plan on using. Check out the offical cordova docs for more information. Let's assume I have the iOS SDK and Android SDK installed.

Change directory to the newly created "hello" folder. We are now ready to add platforms. Say I want to add iOS and Android:

`cordova platform add ios`

`cordova platform add android`

This will generate full source code and apps for the platforms. You can then use cordova to build the projects using the "cordova build" command in the platforms subfolder. You can also use the platforms SDK to edit and build the app from here on out. It is all your personal prefence. For example below is a screenshot of an android project folder.

Open the www/assets folder and replace it with your content! You now have a fully functioning app all built with HTML5, CSS and JS!

# Native Device Features

Besides being able to create native apps from your web content, one of the huge positives is being able to access native device features. In the following example, we will be working with the Vibration API.

Head over to the offical Cordova docs at http://cordova.apache.org/docs/ and look at the various device APIs. All of the different apis are installed as plugins. So let's run this command I pulled from the offical docs:

`cordova plugin add org.apache.cordova.vibration`

There are endless amounts of plugins from vibration to camera, to different ad networks.

The above example is very basic, all it does is vibrate the device for a couple seconds when the button is clicked. As you can see I started out by linking to the cordova.js library. This should be in your projects root folder when you creat a new project. I then create a simple function that vibrates for a set amount of time. The "navigator.notification.vibrate code was pulled straight from the docs. I then make a simple button that vibrates on click! It's that simple.

Poke around the docs for more great features.

- HTML
- JS
- CSS
- Pro