Part 4: Create a Basic App

Ok, so to recap: we’ve installed npm (Node.js) which enabled us to install Cordova. We have the documentation downloaded and now we want to create a compass application that will run on several mobile platforms.

First, lets just make a basic “hello world” application.

Create a directory, cd to it from the command prompt and then:
cordova create compass com.example.compass compass

This will create a folder named compass under the directory you’re at. If you’ll have a look inside that directory you’ll notice the following subdirectories:

  • www – This is where the sources and resources of the web application wer’e going to write are
  • plugins – This is where the plugins that enable to access the device from JavaScript are located. Currently it is empty, but we’ll soon add the plugin to access the device orientation (compass) there.
  • platforms – This is where platform specific code for compiling to different mobile platforms is located. This is also empty now, but we’ll soon add the platform for Android there.
  • merges – This is the place to add mobile platform specific customization to the web application. As mentioned, the www directory contains the sources for our mobile embedded web application. Although this (code and resources) is replicated in the platforms directory for every mobile platform each time we will build the application, we do not make customization in the www of the specific platform since it will just get overwritten by the code from the root www directory. Specific platform changes are made in the merges directory

Now lets add a platform – we’ll add the Android platform for this example (The assumption is that you’ve already downloaded the Android SDK and installed some recent version of the API – to do this, type android at the console after installing the Android SDK and setting the paths as explained in Part 2)

To add the Android platform for the compass project, cd to the directory that was created in the previous step:

$ cd compass

and then use cordova to install the Android platform for this project:

$ cordova platform add android

If you’ll look in the platform subdirectory now, you’ll notice that it is not empty anymore and an android directory has been added to it.

next, we’ll add the plugin that will enable us to access the compass on the device:

$ cordova plugin add org.apache.cordova.device-orientation

Note that it doesn’t matter whether you first add the platform you want to compile in or the plugin you need for accessing the device – in both cases, platform directory and plugin directories are modified accordingly.

So now our project includes the platform specific files needed for android and the plugin that will enable us to access the compass on the device. What is left now is to write the code and modify the configuration files of the project, compile and run the first sample. This will be in the next post.

Leave a Reply

Your email address will not be published. Required fields are marked *