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.
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
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!
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.