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:




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