In my previous blog Preparing to Develop Mobile Apps with Cordova I detailed my experiences in setting up Cordova. Now its time for the first App - and what better than 'Hello World' !
Step 1 - initialise a project
Cordova allows you to initialise a proected using the command
cordova create <root_directory> <package_structure> <application_name>
e.g. cordova create hello com.example.hello HelloWorld
The above command creates a directory hello in the current location and then a skeleton application called HelloWorld, with a package structure of com.example.hello.
If we look at what this has created below we can see the directory hello which contains a configuration file (config.xml) and a www subdirectory, which itself contains index.html and some subdirectories for default image, css and javascript.
This 'skeleton' app is fully working (although it doesn't do much) all we have to do is to build and deploy it.
Building for Android
Before we can build our app we have to tell cordova what platforms it's to be deployed on. This is quite straightforward - we use the command
cordova platform add <platform_type>
So if I am going to build for android, I enter
cordova build platform android
(NB this and the subsequent command need to be run in the project's root directory - os in the above example I made sure I was in directory hello before running any more commands).
The project can support multiple platforms - its just a case of repeating the above command with the appropriate platform name.
Now that I have defined the platform I need to build for that platform using the command
cordova build <platform_type>
e.g. cordova build platform android
If all goes to plan you will end up with a message similar to the folllowing
Note that the generated apk file is in subdirectory hello/platforms/android/build/outputs/apk.
NB - only use the android-debug.apk for now. THe 'unsigned' file has relevance when building for publishing to Google, which is not covered in this blog.
Testing the App
There are various ways to test the app - one is to connect an Android device to your computer (e.g. via USB), download the file to the device (e.g. using Androind File Manager, avaialbe from Google Play) and then installing the app (e.g. clicking on it on the device). The exact details will vary depending on the device used.
Another alternative is to use an Emulator on your computer - I have been using BlueStacks which works really well - for more details see http://www.bluestacks.com/
With Bluestacks running, loading the app is as easy as right clicking on the apk file, and taking the 'Open with Bluestacks' option. The app will then deploy to Bluestacks and can be opened - e.g.
Coding 'Hello World'
The above is the output from the default index.html page provided when we created our application - inspection of that file will explain how the above output is generated. for my app I want it to say 'Hello world' so I need to edit the index.html file accordingly . For example if I edit the file as follows ;
<html>
<head>
<title>Hello World</title>
</head>
<body>
Peter says <b>Hello World</b>
</body>
</html>
I now rebuild the app - i.e. cordova build android
Redeploying the app to Bluestacks I see.
Obviously this is a trivial an app as it is possible to build - but 'all' I need to do now is to write html (plus javascript, etc!) and I can quickly build deploy and test my app. IN other words, if you can write a webapp, you can write a mobile app!
