Tuesday, November 28, 2006

Easy does it ...

Well I don't know JavaScript or HTML and I haven't coded in a long time (the last time was languages like C++ / VB and C - however even then most of my work was in heavy databases)

So I wanted to see how quickly I could build and release a web application. I decided to build a "mood" finder - the idea would be that the service would extract data from multiple different sites and determine the "mood" of the internet.

To begin with I'd make things simple and just extract "mood" from one site - in this case I chose Flickr and to make it even simpler I'd just extract images and tags related to four predefined words - happiness, sadness, fear and hope.

So steps to be done.

1. Get a web server somewhere
2. Install programming language and other necessary items
3. Write a web site which extracts information from a public API and displays it.

Hmmm.

Well I skipped steps 1 + 2 by just using Zimki.

I created a new realm, with the following URL and added some javascript and template code (see below)

All done - approx 1 hr (with about 5 minutes help from James), and it only took an hour because I didn't know JavaScript and HTML!

Now to combine with some other sites and provide something more useful or maybe just add something AJAX like - just to show how quick it can be done.

Gosh, this is easy ...

P.S If my code sucks ... well, I'm just learning the language so give us a break!


JavaScript Code
================
zimki.library.require('library', 'trimpath.js');

var fapikey   = 'add your own Flickr key here';
var url       = 'http://api.flickr.com/services/rest/';
var photo_url = 'http://static.flickr.com/${photo.server}
/${photo.id}_${photo.secret}_s.jpg';
 
function processPhotos( photoList ) {
   var subset = {};
   subset.count = photoList.total;
   subset.urls = new Array();
   for ( let aPhotoId in photoList.photo )
    subset.urls.push( photo_url.process(
      { photo: photoList.photo[aPhotoId] } ) );
   return subset;
}

function processTags( tagList ) {
  return tagList.tag.map( 
              function(o) { return o._content; } );
}

function jsonFlickrApi( d ) {
   if (d.photos) return processPhotos( d.photos );
   if (d.tags) return processTags( d.tags );
}

function getPhotos( aTag ) {
  return eval(zimki.remote.get(url,
                             {method: 'flickr.photos.search',
                               api_key: fapikey,
                               tags: aTag,
                               per_page: 8,
                               format: 'json' }
                             ));
}

function getTags( aTag ) {
  return eval(zimki.remote.get(url,
                              {method: 'flickr.tags.getRelated',
                               api_key: fapikey,
                               tag: aTag,
                               format: 'json'}
                             ));
}


function runapp() {

  var tags = ['happiness','sadness','fear','hope']; 
  var moodData = {};

  tags.forEach(
    function( aTag ) {
      moodData[aTag] = {};
      moodData[aTag].mood = aTag;
      moodData[aTag].photos = getPhotos( aTag );
      moodData[aTag].tags   = getTags( aTag );
    }
  );
   
  return zimki.render.trimpath('index.html',
                          {moodData:moodData});
}

zimki.publishPath('/', runapp );


Template Code
============
<HTML>
<HEAD>
</HEAD>
<BODY>

<TABLE border="1">
<CAPTION><EM>A table of moods</EM></CAPTION>
<COLGROUP align="center" width="20%">
<COLGROUP align="center" width="50%">
<COLGROUP align="center" width="20%">
<COLGROUP align="center" width="10%">
<TR><TH>Mood<TH>Photo<TH>Words<TH>Count

 {for moods in moodData}
  <TR><TH>${moods.mood}<TD>
    {for photo_url in moods.photos.urls}
       <A HREF='${photo_url}'><IMG border="0" height="150"
 width="150" src='${photo_url}'</IMG></A>
    {/for}
    <TD>
    {for tag in moods.tags}
      ${tag} 
    {/for}
    <TD>
    ${moods.photos.count}
 {/for}

</TABLE>

</BODY>
</HTML>
Posted by at
Labels: , , ,