Open Divers: How is it done?

It all starts with some drawings: first the a few screens of what the website should roughly look like. And then the data model, to get an overview of all the entities of the website, and their relations. Have a look, you will see that objects are very linked:

Current Data Model of the website

I’m developping using Play! framework. It is a very efficient Java web framework, where you focus on getting things done. I can assure you it’s not traditional Java (servlets and all) and that when you start feeling comfortable with it, you can build a clean website very quickly. If you are a web developer who wants to try something refreshing, you should give it a try. (I think you can compare it to RoR, Jango or Symfony)

I first start by defining the objects (Models) of the platform, and relations between them. The framework uses JPA to automatically create the underlining database.

Then I define actions in Controllers to display and edit this data: “show dives”, “explore”, “login” are example of actions.

Finally, I create the different pages (the Views) using HTML and the templating engine. I first used some code from HTML5 boilerplate to start building on something clean. I use some Javascript (with the jQuery library) to perform dynamic actions on the client side (messages that disappear, pop-up layers for login…). I also use jQuery UI for some widgets (a date picker, an accordion for the dive edition page) and the Google Maps Javascript API to display satellite maps. (I really needed satellite imagery, so I cannot use OpenStreetMap data).

I did not found the time to write unit tests, functional tests or front end tests, this is very bad. It will be the first thing I do when I start working on the project again.

There is still a lot to do, it’s a first version, let’s add on top of it. Check out the screenshots from yesterday’s post.

Advertisements

One thought on “Open Divers: How is it done?

  1. Il faudrait trouver un moyen de mettre des vues aériennes (à défaut de satellites) dans OpenStreetMap. Une caméra + gps sur un petit hélico radiocommandé peut être. 🙂

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s