Waking up to CoffeeScript

Just clicking around on github today ran into some files with “.coffee” extension. First I thought someone wanted to be funny with the ‘name’ as they might be drinking way too much coffee while sitting in front of a computer, coding. Checking the contents of the file things looked interesting.
I turned to our best friend ‘google’ and found out about coffee script!
I am not sure if I will be using it in any of my project any time soon, but I thought I should just start with a little ‘Hello World’.

You can find more info on their website, http://jashkenas.github.com/coffee-script/

Installing CoffeeScript
I am on Ubuntu, so, here are steps on how to install CoffeeScript on Ubuntu.
At the time of this writing, the latest version of coffeescript is 1.1.2.
CoffeeScript depends on “Node.js”, so we have to install Node.js first.(0.4.12 is the latest version at the time of writing)

Let’s Install the Node.js

$ wget http://nodejs.org/dist/node-v0.4.12.tar.gz
$ tar xzvf node-v0.4.12.tar.gz

At this point you should have nodejs ready to be configured.
Let’s configure it next

$ cd node-v0.4.12/
$ ./configure  --without-ssl
$ make

(Note: I had issues with ssl so I had to configured it without ssl, you may try without the flag)

Congratulations, you have successfully configured node.js!

Now, Lets Move on to CoffeeScript

Download the latest CoffeeScript and set up by following the steps below:

$ wget --no-check-certificate --trust-server-names     http://github.com/jashkenas/coffee-script/tarball/1.1.2

$ tar xzvf 1.1.2

Once you are done with above steps, you should have a directory something like, ‘jashkenas-coffee-script-1a652a9’

Lets take it for a test drive

$ cd jashkenas-coffee-script-1a652a9
$ bin/coffee --version

You should see an output similar to below:
CoffeeScript version 1.1.2

Create a file and call it “test.coffee” (in same location are you at right now)

alert 'Hello World!'

$
Let’s Compile, to compile a coffee script you simply type the following:

$ bin/coffee -c test.coffee 

You should see a file called ‘test.js’ with content

(function() {
  alert('Hello World!');
}).call(this);

We have successfully written a first “CoffeeScript” Code!
There are tons of examples on their site, we can give it a try at some point.

Reference: http://net.tutsplus.com/tutorials/javascript-ajax/rocking-out-with-coffeescript/

Building a Native (kind of) Android App using Grails, HTML 5, CSS, Javescript hosted on CloudFoundry

Been very busy with personal life lately and haven’t had time to do much of interesting stuff specifically on CloudFoundry, Grails and Android.
Here is my attempt to build an android application entirely based on HTML 5, CSS and JS. Ever since I found out that LinkedIn built their Mobile app based on those technologies instead of pure native application. I have been very interested in trying it out myself.
I truly am a believer in CloudFoundry! I think it is going to change how “Cloud” service is provided (PaaS). (Wanted to blog about CloudFoundry Micro but my machine doesn’t Support VT 😦 so may be will get to blog about it sometime later…)

Let’s Jump on to our today’s topic.
Here is my vision:
1. Build a Grails application that is hosted on cloudfoundry. This will serve as a mobile website. I will be using jQuery Mobile.

2. Build a Native looking app using PhoneGap that will interface to the grails web application hosted on cloudfoundry.

About the application:

We will build an android application that will give events that are going on around you given your location. We will be using YQL to get the data. You can learn more about YQL at http://developer.yahoo.com/yql/

Since I want it to be a good size blog entry and not to long, This will be part I of the application.
By the end of this blog I should have.
1. Grails App optimized for mobile hosted on Cloudfoundry
2. Android App based on PhoneGap that will serve as an interface to the Grails App built above.

Let’s Start with the first part:

Building Grails App and hosting it on CFoundry:

I am going to build it from the ground up. I may skip few things, but, if you just want to know how this is done, you can read my old blog post about building a grails app on Cfoundry here.

Creating Grails app and installing the CFoundry plugin:

  $ grails create-app FindEventsGA
  $ grails install-plugin cloud-foundry

(Note: Refer to the link above to set up your Cloudfoundry account in Config.groovy)

Setting up jQuery Mobile Test page:
If you followed me till here you should have a standard grails app all ready to go.
Now, Lets wire up the jQuery Mobile. At the time of this writing, jQuery Mobile Beta 3 was the latest.
Now Navigate to your “index.gsp” in your “views” folder and replace the current content with the following content.

 

<!DOCTYPE html> 
<html> 
<head> 
<title>Grails Mobile App on CloudFoundry</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head> 
<body> 
<div data-role="page" id="dashboard">
	<div data-role="header">
		<h1>GrailsApp</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Hello From Grails Mobile App!</p>	
	</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

Above HTML 5, will replace the standard Grails homepage.
In the Page above, it simply imports jQuery Mobile JS and CSS.
You can read more about them at jQuery Mobile page http://jquerymobile.com/applicatio

Now we are ready to publish the app.

Lets run the following command from the grails project directory and verify that it renders the page correctly.
(Note: If you are using Eclipse with Grails plugin or STS, you can simply press “Ctrl+Alt+Shit+G” –> This will give you grails command prompt where you can simply type “prod cf-push”)

$ grails prod cf-push

I set up my application to be hosted under “http://findevents.cloudfoundry.com/&#8221;
After the app has been published, We can get to it through a browser.
See an screen Shot below.

Since I have pushed the app up in the cloudfoundry “cloud”, I can navigate to it from my mobile browser.
Here is how it looks on the device.

We are half way done! – Building a native application
Now the web app is ready, Let’s set up the android application.

Create a new android project on Eclipse or any other IDE of your choice. (http://developer.android.com has tutorials if you are new to Android development.)

After you have a Android Project ready. We will go to PhoneGap and download their Jars.

Go to PhoneGap website and download their android tools.
http://www.phonegap.com/download-thankyou

Unzip the file and place following artifacts.

1. Get the Android “phonegap-1.0.0.jar” (or whatever version you get) from and “Android” directory in the zip and place it in your Project under “libs” folder. (Create the “libs” directory under your android project)

2. In your android project, create “www” folder under “assets” folder (assets folder should already be in your android project). Copy the “phonegap-1.0.0.js” found in the Android folder in the zip file into this www directory.

3. Copy the “xml” folder found in the Android folder inside the zip file into “res” folder in your android application.

Your Project should look similar to one below:

As we added the jar, let’s add it to the build path.
To do this, simply right click on the project and click on “Properties”.
Navigate to “Java Build Path”>”Libraries”. Click on “Add JARs…” and point to the phonegap jar.

Now, navigate to your Main Activity on your android Project and make following changes.

1. Extend the activity to “DroidGap” instead of “Activity”

2. add URL to your grails application.

 super.loadUrl("http://findevents.cloudfoundry.com");

Your class may look similar to the following:

import android.os.Bundle;

import com.phonegap.DroidGap;

public class FindEventsGADroidActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("http://findevents.cloudfoundry.com");
    }
}

Now let’s change the AndroidManifest.xml and we are ready for the show time.

Add following xml before the <application tag

<supports-screens 
	    android:largeScreens="true"
		android:normalScreens="true" 
		android:smallScreens="true"
		android:resizeable="true" 
		android:anyDensity="true" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 

Add android:configChanges="orientation|keyboardHidden" to the activity tag in AndroidManifest. (view image below)

Add a second activity below under you application tag in AndroidManifest. (view image below)

<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> 
     <intent-filter> </intent-filter>
 </activity> 

Your Manifest should look something like below:

Learn more about PhoneGap at http://www.phonegap.com/start

We are done!

Show Time
Run your application and you should see the Grails app that will apear like a native application on your device.

See below for a screen shot of my application.

We have accomplished our goal for this post and are at a good stopping point.
We now have a grails app thats running on cloudfoundry appear as a native app on Android!

In the next post I will be working on gestures etc on grails app and will use YQL.
Most interestingly use device gps etc to find location. We will have to make some significant changes to the project. Hope you enjoyed this post.