Call Wikipedia API using jQuery

I decided to directly use the data from Wikipedia. Many pages contain a structured “Infobox” that I will use to gather information I need.

There is a Wikipedia API (more precisely, MediaWiki, the engine of Wikipedia, has an API). I invite you to read the documentation.

Here are some examples of what can be done using the javascript library jQuery:

  • get the source of a page (API doc):
    $.getJSON("", {titles:pageName, prop: "revisions", rvprop:"content"}, wikipediaPageResult);
  • get the image names of a page (API doc):
    $.getJSON("", {titles:pageName, prop: "images"}, wikipediaImageResult
  • get the HTML formatted content of a page (API doc) (does not follow redirects)
    $.getJSON("", {page:pageName, prop:"text"}, wikipediaHTMLResult);

It is important to note the needed “&callback=?” in the query (it will tell jQuery to use JSONP, a way to do cross-site javascript call), thanks to stackoverflow for this tip.

Note that to get the HTML content of a wiki page using javascript from the browser, I cannot use the “action=render” parameter of index.php because of the Same Origin Policy. I had to use the API to do it client side. I think I will rewrite my system to do this call server-side.

In the end, check my gist on github to get the full code of how to import a Wikipedia Page in javascript.

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.