My first LiveOak application

I was impressed with LiveOak screencast. Last time I felt like that was when I saw PlayFramework hello world application.

I was decided to create my first application using it even having a lot of other things to do. In this post I will share my experience creating a simple blog application using LiveOak.

About LiveOak

Definition from LiveOak's site:

LiveOak is a backend-as-a-service stack that simplifies development for mobile and standard web clients. Its goal is to enable client-side access to traditional backend services without having to write server-side code.

LiveOak's fundamental architectural approach is REST to the core. LiveOak provides publish/subscribe, push-to-the-mobile-client, and REST-based APIs to shuffle data between mobile handsets, traditional desktops, and other servers in a local cluster or in the cloud.

First thing I liked that it has an administration pane with the download itself, so all the server side things are done in a graphical way. The actual programming is mostly done at the client side and this is totally REST based.

Keep in mind that LiveOak is a new project and at the time I write this, the released version is 1.0 Beta01.

Setting the environment

It requires Java 8 and Maven 3.x. The download comes with Wildfly bounded.
So just download it, unzip in a directory of your preference and start it:

$LIVEOAK_HOME/bin/standalone.sh -b 0.0.0.0

First run will take a while if you don't have MongoDB, because it will download and install it. After this, start LiveOak will take less than 5 seconds!

Once you install it, access localhost:8080/admin and login using admin/admin. Notice it will ask you to change the password, you can set admin/admin again :-)

For more information please see Getting Started guide.

My First application

That was easier than everything I have seem... Really. I needed to simple navigate to Applications and create new Application. It is so intuitive and the interface has hints so you won't get lost:



After this, I needed to create my model object, which is a post with two columns: content and title. To do this, I created a storage and created a collection named post:





Now I am ready to start to do client things. In Javascript. Using JQuery. Yeah, I am not one these cool guys who uses AngularJS. I still prefer JQuery. But someday I will use AngularJS. Ok, I will stop now.

The client side  

 

 I created a simple, simple single page application to make CRD(create, retrieve and delete) operations from the post object I created.
I was lost after this: where should I place my code? The documentation is plenty of examples, but I was still lost.
To find where should I place my stuff, I added the chat-html application to my LiveOak installation and I could see that stuff was added to $LIVEOAK_HOME/apps dir.
I saw that the application is configured in $LIVEOAK_HOME/apps/{app}/application.json and then I added the line "html-app" : "/app/index.html" to it and created a simple HTML  in $LIVEOAK_HOME/apps/blog/app/index.html to access from the browser.
It did not worked even after restarting the server. Seemed it was like in an infinite loop. So I made a diff of the example application.json and also added the "app" declaration to my configuration file:

    "app" : {
      "type" : "filesystem",
      "config" : {
        "directory" : "${application.dir}/app/"
      }  
    }



Restarted the server and Boom! I could see my Hello World in http://localhost:8080/blog, It worked! Now let's go to the blog application.

My page has a form to submit a post and a div that contains all the posts already submitted. Here is HTML and the Javascript file, which was based on the one from the chat-html example application, see:

	var liveoak;
	function deletePost(id) {
	liveoak.remove( '/blog/storage/post',
	{id: 'ObjectId(%22' + id + '%22)' },
	{ success: function(data) {
	console.log( "Post Removed" );
	},
	error: function() {
	console.log( "Error removing post" );
	}
	} );
	}
	$( function() {
	liveoak = new LiveOak( { host: document.location.hostname, port: document.location.port } );
	function addPost(data) {
	// I know this could be better....
	var id = get_id( data );
	$( '#allPosts' ).append(
	$( '<div class="post" id="' + id + '">' ).append(
	$('<h3 class="title">').append( data.title ) ).append(
	$('<em class="content">').append( data.content ) ).append(
	$('<br / ><input type="button" value="delete" onClick=deletePost("' + id + '") /> <hr />')
	) );
	}
	function removePost(data) {
	$( '#' + get_id( data ) ).remove();
	}
	function get_id(data) {
	// Parse "12345" from string like: ObjectId("12345")
	var msgId = data.id.substring(data.id.indexOf('"') + 1);
	msgId = msgId.substring(0, msgId.indexOf('"'));
	return msgId;
	}
	liveoak.connect( function() {
	liveoak.create( '/blog/storage', { id: 'post' }, {
	success: function(data) {
	liveoak.subscribe( '/blog/storage/post/*', function(data, action) {
	if (action == 'create') {
	addPost( data );
	} else if (action == 'delete') {
	removePost( data );
	}
	} );
	liveoak.read( '/blog/storage/post?fields=*(*)', {
	success: function(data) {
	$(data.members).each( function(i, e) {
	addPost( e );
	} );
	}
	} );
	},
	error: function(data) {
	console.log( "post collection NOT created" );
	}
	} );
	} );
	$('#postForm').submit( function() {
	var title = $( '#newTitle' ).val();
	var content = $( '#newContent' ).val();
	$('#newTitle').val( '' );
	$('#newContent').val( '' );
	liveoak.create( '/blog/storage/post',
	{ title: title, content: content },
	{ success: function(data) {
	console.log( "Post Saved" );
	},
	error: function() {
	console.log( "Error saving post" );
	}
	} );
	return false;
	} );
	} )

view raw blog.js hosted with ❤ by GitHub

	<html>
	<head>
	<title>Really Simple blog with LiveOak</title>
	<script src="/blog/client/liveoak.js" type="text/javascript"></script>
	<script src="/blog/app/jquery.js" type="text/javascript"></script>
	<script src="/blog/app/blog.js" type="text/javascript"></script>
	</head>
	<body>
	<h1> The Simples Blog Application using LiveOak </h1>
	<div>
	<form id="postForm">
	Title: <br /><input type="text" id="newTitle" /> <br />
	Content: <br /><textarea id="newContent" ></textarea> <br />
	<input type="submit" value="Save" />
	</form>
	<div>
	<h2> Your posts </h2>
	<div id="allPosts">
	</div>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

The key is the LiveOak object, that allow us to simply interact with the server. Remember I did not write any server side code!

One interesting thing is that LiveOak has the subscribe concept where the client can be notified when a collection is changed in the server. In my JS what I do is to load all the posts when the collection is changed and then I update the div that contains all the posts. The cool thing is that if I go to the server and delete a post from the storage, it will be immediately reflected  in the page!
Here is the "beautiful" result:

Conclusion

This was a really simple example to play with LiveOak and, of course, the project is much more than this and it is just getting started!

My application source on github