Chrome, webdev

Dart Instagram Web App

One (of the many) good things that happend during the Dart hackathon 2012 in Tel Aviv was the ability to hack with friends. There were a lot of interesting project and I had a bit of time to hack this simple web app that show a combination of few tools. The main goal was to investigate and see how we can work with web services in Dart while giving the user a cool UI. First, I’ve looked at how my JavaScript code should look in Dart. Then, it was easy to bake the functionality into the code that fetch images from Instagram. When you have a case where you need to fetch some unstructured data from the web you might want to consider using yahoo pipes (and/or the new version YQL). In our case, I saw that the work on web.stagram is in the area of what I’ll need in terms of data but (like so many other web site) they don’t have any JSON feed I can work with. The option to parse feeds (RSS/Atom) in JavaScript is painful so here y! pipes come to the rescue. This pipe will take the page of ‘photo of the day’ and will give you back a JSON output of all the information you will want to see in a feed from that page. From here the basic code to fetch the JSON and to build the HTML is looking like that:


// init values on the page
  startThePage() {
    String baseurl = "http://pipes.yahoo.com/pipes/pipe.run?_id=8a481ba9ce15f5efa8ac6b894b45eeac&rand=3334&_render=json";
    XMLHttpRequest request = new XMLHttpRequest();
    request.open("GET", baseurl, true);
    request.on.load.add((e) {
      _divCar.hidden = false;
      
      var response = JSON.parse(request.responseText);
      var imgs = response['value']['items'];
      for (final img in imgs) {
        writeCarousel(img);
      }
    });
    request.send();
  }

Other tools/frameworks I’ve used in this mini-project:

  • Dart – I must say that the new language is very easy to pick up. If you are Java programer a lot of things will look (very) familiar (to good and bed). But, even if you spend you last several years hacking on JavaScript – you will feel at home after the first few hours.
  • Twitter bootstrap – These days, it’s one of the best options to have a quality responsive layout with a lot of other CSS goodies.
  • Y! pipes – Instead of taking the time build an RSS to JSON web service (which might be a cool idea for another hackathon) I’ve used pipes that give you not only that but also a fast cache version of the information so you won’t put any load on the servers of your source.
  • The unoffical web.stagram API – In our case, it was the best way to get the ‘photo of the day’ from Instagram.
Overall, it’s very simple code, yet, it’s giving us some views of what can be done with Dart. I would love to put some more time into this project in order to have a nice web app (and not just simple web site as it’s current state).
Standard

One thought on “Dart Instagram Web App

  1. Pingback: Weekly Dart community update – week ending 05 May 2012 » DartWatch - Watching Google Dart

Comments are closed.