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.
Definition from LiveOak's site:
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.
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.
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.
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:
My application source on github
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
Comentários
Postar um comentário