Please find hereunder a video tutorial highlighting the key points of developing a JSON based web application with Erlang and Mochiweb.
Note that, for best performances (HD Definition), you have to directly go to the Vimeo website where the video is stored and watch it in full screen mode.
You may want to download the video. In that case, you will have to follow the instructions at the bottom of the video page on the Vimeo website.
Click on the image below to go the the video page.
The purpose of all this, aside from arousing your curiosity, is to provide you with a getting started pack and allow you to go a step further in the Erlang web application sphere.
I invite you to download the example application (as illustrated in the video stickyNotes.zip) in order for you to understand all the pieces of the puzzle and to venture behind the scene.
Just keep in mind that stickyNotes is a one shot application that I’ve developed from scratch with the unique aim of illustrating the video example.
Having said that, any comment or suggestion is always welcome, especially about ‘struct.erl’, a module that I’ve created when I was learning the language in order to play with the tree structure resulting from the mochijson2 decode function.
We are using it in our mainstream development and I’m still wondering if I might have missed something important with regard to the Erlang distro or Mochiweb itself.
In order to install this stuff on your system and assuming that Erlang is properly setup on your box, just follow these steps:
1) Download stickyNotes and extract the archive in your home directory:
2) cd to stickyNotes dir and compile the code :
make clean && make3) Start the application and initialize the db from the Erlang console (only once)
./start-dev.shstickydb:reset().4) Browse the following address 127.0.0.1:8000
Super easy isn’t ?
Enjoy
Wow, excellent video.
I’ve been playing around with Mochiweb a bit lately, but never gotten far past the “hello world” level with it. This really shows off how to get up and running
Given that the structure of the JSON return values is {struct, X} you can actually make your struct module a parameterized module with a Proplist parameter, and call things in-place like the Request “object” in mochiweb. This would probably break if they optimize parameterized instances but it works fine now
Here’s a minimal example:
-module(struct, [Proplist]).
-export([lookup/1, to_proplist/0]).
key(Key) when is_binary(Key) ->
Key;
key(Key) when is_atom(Key) ->
list_to_binary((atom_to_list(Key)));
key(Key) when is_list(Key) ->
list_to_binary(Key).
lookup(Key) ->
case proplists:lookup(key(Key), to_proplist()) of
none ->
none;
{_K, Value} ->
{Key, Value}
end.
to_proplist() ->
Proplist.
Brilliant! I have been waiting for something like this for awhile. Thanks.
@Bob Ippolito
Thank you very much. That’s certainly the kind of feedback I was waiting for ; ) Your small example brings a good point and I’ll test implementing this module that way. I really appreciate it.
@madlep, JT Archie
Thanks both for your positive comments
I did a similar demo app with rails talking to mochiweb.
http://github.com/dysinger/mochirest/tree/master
http://dysinger.net/2008/10/09/mochirest-rails-ui-and-erlangmochiweb-rest-json-service/
Mine is not as cool as yours though. I didn’t use mnesia and I don’t have a drag and drop UI.
Cool tip from Bob above. I used erlang record.
Hughes,
This is a really neat video, thanks for making it. It seems like an excellent way to get people quickly excited about making Web applications atop mochiweb.
In order to help me figure out if some of my own assumptions were correct, I lifted your tutorial application up on top of the Webmachine layer. I posted about that experience here:
http://blog.therestfulway.com/2008/10/beebole-erlangweb-tutorial-webmachine.html
Cheers!
This tutorial is clear and complete. The online documentation about web servers in Erlang is desperately poor, but here is all the useful info to get started.
Looking forward for more info on your server-side work. Nice that you keep it open.
@Tim
Thanks for sharing. Just as a side note, we didn’t choose to go Restful because we wanted a clear separation between our client side/view stack and the business logic.
@Justin
Really interesting article. I like the lightweight approach you have taken.
My tutorial is definitively not full-fledged app minded as I wanted it as close to the mochiweb metal as possible
Having said that, we are addressing some of the details you mentioned in your post but using a home made layer since we are not building a http general purpose application.
We are actually tunneling all of the ‘Jsons’ trough both the GET(jsonp) and the POST method and we are using a unique interface to handle them (the exceptions are few).
Keep up the good work.
Thank you very much. The demo project is a great start point to build my own app.
Pingback: How To Quickly Set Up Ubuntu 8.04 loaded with Erlang, Mochiweb and Nginx | BeeBuzz
Pingback: BeeBole creates a sample Mochikit Erlang Web Application with Video Tutorial – Erlang Inside
Just posted a link to this tutorial at Erlang Inside. Looks great. Thanks!
Great video. Thanks for it.
There is used list_to_atom form user data and this is little bit insecure. list_to_existing_atom should be used instead. It can not be mentioned in tutorial why, but should be used to learn novices which BIF should be used. The will tell that Erlang is insecure if novices will be deploy insecure application over web.
Pingback: links for 2008-12-11 « Bloggitation
Pingback: Revving Up to Speed « Poking Around Erlang
Pingback: Erlang Resources For Web Applications | BeeBuzz
That’s really a great tutorial.
And I just want to underline how nice it is to use the webmachine REST framework get correct http resources instead of the self-styled imcomplete one I normally write when using only moche.
Just see Justins nice article above.
Pingback: Two Erlang Finds: Atomic Names and Parameterized Modules « User Primary
Great tutorial!
I found the struct library to be especially useful, what are the licensing terms for the struct library source?
Thank you Shey for your interest and your kind words.
There are absolutely no licensing terms. Feel free to use and modify the code as you wish. It only enough to mention us.
Pingback: How To Send Emails From An Erlang Web Application | BeeBole
Pingback: 37Signals Dives Into Erlang | BeeBole
Pingback: Helpful How-To Links « AUW BlogShop Students
Deployed on MBP OS X 10.4 OK. On Windows XP I had to rename stdlib-1.16.1 to stdlib to compile the stickydb. And it worked.
Hi,
Nice post.Now i can develop my own web application.
Pingback: Convert HTML to PDF with Full CSS Support, an OpenSource Alternative Based on Webkit | BeeBole
Pingback: Riak Demo: Stickynotes « BeerRiot Blog
I got this error when running the tutorial:
=CRASH REPORT==== 18-Aug-2009::14:10:46 ===
crasher:
pid:
registered_name: []
exception exit: {aborted,{no_exists,counter}}
in function mnesia:abort/1
in call from mnesia_tm:dirty/2
in call from notes:create/1
in call from stickyNotes_web:loop/2
in call from mochiweb_http:headers/4
initial call: mochiweb_socket_server:acceptor_loop/1
ancestors: [stickyNotes_web,stickyNotes_sup,]
messages: []
links: [,#Port]
dictionary: [{mochiweb_request_body,
<>},
{mochiweb_request_recv,true},
{mochiweb_request_post,
[{"json",
"{"action":"create","doc":{"text":"","x":94,"y":99,"z":1,"color":"yellow"}}"}]},
{mochiweb_request_path,”/notes”}]
trap_exit: false
status: running
heap_size: 4181
stack_size: 23
reductions: 16707
neighbours:
=ERROR REPORT==== 18-Aug-2009::14:10:46 ===
{mochiweb_socket_server,235,{child_error,{aborted,{no_exists,counter}}}}
@momingle
It seems that the tables required by the demo app have not been properly created.
The first time you launch the app with the ‘start-dev.sh’ script, be sure to launch stickydb:reset() in the Erlang console. This function is creating the initial Mnesia schema with 2 tables ‘counter’ and ‘note’.
Pingback: lambder » The BeeBole Erlang/Web Tutorial, Webmachine-Style
There is an exploitable denial-of-service bug in the code.
The action parameter is parsed to an atom without checking.
Atoms are not garbage collected – an attacker
@Arne
Thanks for pointing this out.
One way to fix that is to use the list_to_existing_atom/1 (@Lambder) BIF instead of the list_to_atom/1 one in the stickyNotes_web.erl file line 42 :
Action = list_to_existing_atom(binary_to_list(A)),
From the Erlang doc : “This function returns the atom whose text representation is String, but only if there already exists such atom”.
Dear Hughes
Thank you for this demo. It has been very helpful getting me started with Erlang.
I wonder if you could offer some advice.
I am trying to split the stickyNotes app between two servers: one with the html, css, img and js, and one with the erlang server. However it’s not working.
The only change I’ve made to the code is in application.js I have changed the calls to post() from
post(json, “/notes”, null);
to
post(json, “http://localhost:8000/notes”, null);
The erlang server is receiving the requests, but instead of the POST requests it’s expecting, it’s receiving OPTIONS requests.
I need to figure out what stickyNotes_web.erl should do with an OPTIONS request, and how to get the browser to send POST requests.
I realise this is not really an Erlang question. It’s probably more to do with the change in the http handshake caused by the split between two servers. However, is this something MochiWeb and/or WebMachine can handle? Or is this the wrong way to split the app over two servers?
Any help appreciated. Once I’ve sorted it out I’ll post a summary.
Best wishes
Ivan
Hi Ivan,
Hughes is off for a few days, but I am sure he will be able to answer you very soon.
Thank you for your patience.
The video is not playing on vimeo.com. Please check.
Thanks from India!