Having fun with Mooml & Twitter

Feb 19 2010 Published by Eneko Alonso under uncategorized

Mooml is a templating engine for Mootools. With it, you can create HTML from Javascript using a very clean syntax. Plus, it is extremely useful when you have to generate repeating elements, since Mooml automatically renders arrays of data multiple times. Let’s see an example.

Searching Twitter

Nowadays there are a lot of APIs out there that support JSON or JSONP, which we can use directly from the front end using Javascript. Also, there are other APIs that return tons of JS data, like Google Maps. In this example we are going to be searching Twitter and displaying the search results in a container div, properly rendered as HTML.

The url for searching Twitter is http://search.twitter.com/search.json?q=mootools&show_user=true (searching for Mootools in this case). Check the output:

  1. {
  2.   "results":[
  3.     {
  4.       "profile_image_url":"http://a3.twimg.com/profile_images/547672997/twitterProfilePhoto_normal.jpg",
  5.       "created_at":"Fri, 19 Feb 2010 17:08:55 +0000",
  6.       "from_user":"digitalr3bel",
  7.       "to_user_id":1212494,
  8.       "text":"@davidwalshblog Hi David – im a big fan of your site! Can you recommend a good MooTools tutorial for someone who can already program? thx",
  9.       "id":9343656026,
  10.       "from_user_id":23704390,
  11.       "to_user":"davidwalshblog",
  12.       "geo":null,
  13.       "iso_language_code":"en",
  14.       "source":"<a href="http://apiwiki.twitter.com/" rel="nofollow">API</a>"
  15.     }
  16.     // More results here…
  17.   ],
  18.   "max_id":9343656026,
  19.   "since_id":0,
  20.   "refresh_url":"?since_id=9343656026&q=mootools",
  21.   "next_page":"?page=2&max_id=9343656026&q=mootools",
  22.   "results_per_page":15,
  23.   "page":1,
  24.   "completed_in":0.0352710000000001,
  25.   "query":"mootools"
  26. }

We want to render each result inside out container div. On this example, we will just render the user name, user image and message text. Here is our Mooml template:

  1. Mooml.register('twitter-search-result', function(entry) {
  2.   div({id: "tweet-" + entry.id},
  3.     img({src: entry.profile_image_url, alt: entry.from_user}),
  4.     span(entry.from_user),
  5.     p(entry.text)
  6.   );
  7. });

Since all results are returned into an array, we can pass it directly to Mooml which will render all of the elements in it:

  1. // Data is the JSON response from Twitter
  2. Mooml.render('twitter-search-result', data.results);

So, let’s do a live test. Type something you want to search for and hit the search button to see Mooml in action :)

Search:

How cool is that?

The code

Ok, so here is the whole code I have used in this post for this mini-demo:

  1. <script type="text/javascript" src="http://enekoalonso.com/lib/mootools-1.2.4-core-nc.js"></script>
  2. <script type="text/javascript" src="http://enekoalonso.com/lib/mooml.js"></script>
  3. <script type="text/javascript">
  4. Mooml.register('twitter-search-result', function(entry) {
  5.   div({id: "tweet-" + entry.id},
  6.     img({src: entry.profile_image_url, alt: entry.from_user}),
  7.     span(entry.from_user),
  8.     p(entry.text)
  9.   );
  10. });
  11.  
  12. function searchTwitter() {
  13.   new Element('script', {
  14.     type:'text/javascript',
  15.     src:'http://search.twitter.com/search.json?q={text}&show_user=true&callback=renderData'.substitute({
  16.       text:$('twitter-mooml-search').get('value')
  17.     })
  18.   }).inject(document.head);
  19. }
  20.  
  21. function renderData(data) {
  22.   $('mooml-twitter-demo').empty().adopt(Mooml.render('twitter-search-result', data.results));
  23. }
  24.  
  25. $('twitter-mooml-search-btn').addEvent('click', searchTwitter);
  26. searchTwitter();

As you can see, the code is very basic and so is the Mooml template. The coolest thing here is that you don’t need to iterate over the results to render each element.

Have fun!

No responses yet

Things to do

Jan 28 2010 Published by Eneko Alonso under uncategorized

To do list:

That’s it for now. Let’s see if I can find time to do all those.

Updated

No responses yet

iPhone 3.0 geolocation with Javascript

Jun 30 2009 Published by Eneko Alonso under uncategorized

I was watching one of the video tutorials from Apple last night about some custom JS available on Safari, only on the iPhone 3.0, that let’s you interact with the phone and obtain data like the current location, etc.

So I built a little page to see how it works. I included Mootools 1.2.3 from Google servers and the Google Maps API. And voilá, with a few lines of code we have a totally functional web based GSP navigation system. A little bit ugly, but functional. Currenlty it only centers the map on the coordinates given by the phone, and also does a reverse geolocation to obtain the address (actually city, state and country). But it could be easily extended to add markers to the map, or even paths to track the movement.

If you have an iPhone (or an iPhone simulator) go to:
http://enekoalonso.com/research/iphone/geolocation.html

The source code:

  1. var Navigator = new Class({
  2.   initialize: function() {
  3.  
  4.     // Listen for position changes
  5.     this.watchId = navigator.geolocation.watchPosition(
  6.       function(position){ this.position(position) }.bind(this),
  7.       function() {},
  8.       { enableHighAccuracy: true, timeout: 1000, maximumAge: 10000 }
  9.     );
  10.     this.infoPanel = $('info');
  11.  
  12.     // Create the Geocoder and the Map
  13.     this.geocoder = new google.maps.Geocoder();
  14.     this.map = new google.maps.Map($('map'), {
  15.       zoom: 12,
  16.       mapTypeId: google.maps.MapTypeId.ROADMAP
  17.     });
  18.   },
  19.  
  20.   position: function(position) {
  21.     // Update labels
  22.     this.infoPanel.getElement('p.date').set('text', position.timestamp);
  23.     this.infoPanel.getElement('p.coords').set('text', position.coords.latitude + ', ' + position.coords.longitude);
  24.     this.infoPanel.getElement('p.altitude').set('text', position.coords.altitude);
  25.     this.infoPanel.getElement('p.heading').set('text', position.coords.heading);
  26.     this.infoPanel.getElement('p.speed').set('text', position.coords.speed);
  27.  
  28.     // Center map
  29.     var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  30.     this.map.set_center(latLng);
  31.  
  32.     // Reverse geolocation (get current address)
  33.     this.geocoder.geocode({'latLng': latLng},
  34.       function(results, status) {
  35.         if (google.maps.GeocoderStatus.OK) this.showAddress(results)
  36.       }.bind(this)
  37.     );
  38.   },
  39.  
  40.   showAddress: function(results) {
  41.     // console.dir(response);
  42.     if (results[1]) {
  43.       this.infoPanel.getElement('p.location').set('text', results[1].formatted_address);
  44.     }
  45.   }
  46. });
  47.  
  48. window.addEvent('load', function() {
  49.   new Navigator();
  50. });

Enjoy.

No responses yet

Kyte’s REST API

Feb 28 2009 Published by Eneko Alonso under uncategorized

During the last weeks at work I’ve been working on a very cool Mootools based Javascript API to interact with Kyte’s REST API. So far it’s been working very good and I’m very impressed about how fast Kyte’s API is.

Unfortunately, until the project I’m working on is launched I won’t be able to show any code. The launch date is April 27th :)

No responses yet

Wordpress Comment API & WPNotifier

Dec 20 2008 Published by Eneko Alonso under uncategorized

I didn’t know Wordpress had an API (I just decided to start using WordPress a few weeks ago). Apparently now is event better, since the 2.7 API has support for comments too. Well, I promise I’ll play with it as soon as I have some time. Others are already having fun with it and applications like WPNotifier are a good example of what this API can do.

No responses yet