Cross Domain Web
Mashups with JQuery and Google App Engine

11,772 views

Published on

An example of how to do a mashup of Google App Engine applications using jQuery and JSONP

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,772
On SlideShare
0
From Embeds
0
Number of Embeds
440
Actions
Shares
0
Downloads
97
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Cross Domain Web
Mashups with JQuery and Google App Engine

  1. 1. Cross Domain Web Mashups with JQuery and Google App Engine Andy McKay. Clearwind Consulting http://clearwind.ca
  2. 2. Also known as A bunch of cool buzz words to try and describe some of the stuff I’m doing these days and get me in to talk at cool conferences
  3. 3. Cross Domain JQuery App Engine
  4. 4. Cross Domain JQuery App Engine
  5. 5. mashup “a web page or application that combines data from two or more external online sources”
  6. 6. reusable web applications
  7. 7. that aren't SOAP and WSDL quot;The three chief virtues of a programmer are: Laziness, Impatience and Hubris”. Larry Wall
  8. 8. back in time...
  9. 9. Zope 2 Plone Rails Django
  10. 10. rewriting things constantly is good for billable hours
  11. 11. small web applications returning xml
  12. 12. Ajax browser: rails.site.ca server: another.ca browser: django.site.ca
  13. 13. there's a problem
  14. 14. Single origin policy
  15. 15. browser: clearwind.ca server: some.other.ca The same origin policy prevents document or script loaded from one origin from getting or setting properties of a document from a different origin. -- From http://www.mozilla.org/projects/security/components/same-origin.html
  16. 16. 1. proxy browser: clearwind.ca server: clearwind.ca server: some.other.ca
  17. 17. 2. hacks flash iframe document script
  18. 18. 3. JSONP JavaScript Object Notation with Padding
  19. 19. Example: json-time By Simon Willison http://json-time.appspot.com/ http://github.com/simonw/json-time/tree/master
  20. 20. JSON { quot;tzquot;: quot;America/Chicagoquot;, quot;hourquot;: 3, quot;datetimequot;: quot;Tue, 19 May 2009 03:06:50 -0500quot;, quot;secondquot;: 50, quot;errorquot;: false, quot;minutequot;: 6 }
  21. 21. JSONP process_time({ quot;tzquot;: quot;America/Chicagoquot;, quot;hourquot;: 3, quot;datetimequot;: quot;Tue, 19 May 2009 03:09:09 -0500quot;, quot;secondquot;: 9, quot;errorquot;: false, quot;minutequot;: 9 })
  22. 22. Cross Domain JQuery App Engine
  23. 23. JQuery for json-time var url = quot;http://json-time.appspot.com/timezones.json?quot; $.getJSON(url + quot;callback=?quot;, function (json) { ... });
  24. 24. JSON time demo
  25. 25. Complete JSON time demo $(document).ready(function() { var url = quot;http://json-time.appspot.comquot;; function showTime(data) { $.getJSON(url + quot;/time.json?tz=quot; + $(quot;#zonesquot;).val() + '&callback=?', function (json){ $(quot;#zones-msgquot;).text('The time is now ' + json[quot;datetimequot;] + '.'); }); }; $.getJSON(url + quot;/timezones.json?callback=?quot;, function (json) { var zones = $(quot;#zonesquot;); for (var k = 0; k < json.length; k++) { zones.append(quot;<option>quot; + json[k] + quot;</option>quot;); }; zones.bind(quot;changequot;, showTime) }); });
  26. 26. Cross Domain JQuery App Engine
  27. 27. Easiest deployment Best scalability Minimal effort
  28. 28. Not straight Python Has it's limitations and quirks
  29. 29. And it's free
  30. 30. Example Mashup The coolest technology of 2006 Google Maps The most hyped technology of 2009 Twitter
  31. 31. Twitter messages with a map by hash tag eg: #owv2009
  32. 32. Step 1: Assign hash tag to location
  33. 33. geohashtag.appspot.com browser: geohashtag.appspot.com server: geohashtag.appspot.com
  34. 34. Model from google.appengine.ext import db class Tag(db.Model): name = db.StringProperty(required=True) geostring = db.StringProperty(required=True)
  35. 35. Issue You cannot do an inequality test on two fields in one query. Or use GeoPt. GeoHash solves this problem: http://en.wikipedia.org/wiki/Geohash
  36. 36. JSON tag.json (returns location for a tag) bounds.json (returns all the tags in a rectangle)
  37. 37. Geohashtag demo
  38. 38. Step 2: Parse RSS into JSONP
  39. 39. atomtojsonp.appspot.com browser: atomtojsonp.appspot.com server: search.twitter.com server: atomtojsonp.appspot.com
  40. 40. Proxy? Because twitter doesn't have JSON export Other services like Google RSS or Yahoo YQL have problems But checkout: http://developer.yahoo.com/yql/ and http://code.google.com/apis/ajaxfeeds/
  41. 41. No Model Quite common for App Engine
  42. 42. Just feedparser http://www.feedparser.org/ class JSONHandler(webapp.RequestHandler): def get(self): url = self.request.get(quot;urlquot;) data = feedparser.parse(url) if self.request.get(quot;callbackquot;): data = quot;%s(%s)quot; % (self.request.get(quot;callbackquot;), data) self.response.out.write(data)
  43. 43. JSON twitter.json (smaller twitter version for a search term) atom.json (a whole atom file for a url)
  44. 44. Atomtwojsonp demo
  45. 45. Step 3: Mash it up
  46. 46. geojsontweet.appspot.com browser: geojsontweet.appspot.com server: maps.google.com browser: geojsontweet.appspot.com
  47. 47. geojsontweet.appspot.com browser: geojsontweet.appspot.com server: maps.google.com browser: geojsontweet.appspot.com server: geohashtag.appspot.com browser: geojsontweet.appspot.com
  48. 48. geojsontweet.appspot.com browser: geojsontweet.appspot.com server: maps.google.com browser: geojsontweet.appspot.com server: geohashtag.appspot.com browser: geojsontweet.appspot.com server: search.twitter.com server: atomtojsonp.appspot.com
  49. 49. No Model In fact, completely static HTML (with JS, no server side code)
  50. 50. Some Javascript function move() { var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var url = map_details.tags_domain + '/bounds.json?nelat='; url += ne.lat() + '&nelon=' + ne.lng(); url += '&swlon=' + sw.lng() + '&swlat=' + sw.lat() + '&callback=?' if (map_details.last_url != url) { map_details.last_url = url $.getJSON(url, function(json) { if (json) { for (var k = 0; k < json.length; k++) { ...
  51. 51. Some more Javascript function twitter() { var tag = null; for (var obj in tags) { var url = map_details.atom_domain + '/twitter.json?tag=' + obj + '&callback=?' $.getJSON(url, function(json) { var tweet = null; for (var k = 0; k < json.length; k++) { ....
  52. 52. Slideshow http://flowplayer.org/tools/scrollable.html $(quot;#tweets-quot; + tweet[quot;tagquot;]).parent().scrollable({ interval: 4000, loop: true, speed: 600, onBeforeSeek: function() { this.getItems().fadeTo(300, 0.2); }, onSeek: function() { this.getItems().fadeTo(300, 1); } });
  53. 53. Geojsontweet demo
  54. 54. Serious issues
  55. 55. Trust You are executing someone else's JavaScript in your site. Better be trustworthy.
  56. 56. Single points of failure?
  57. 57. Single points of failure?
  58. 58. Enterprise Internal servers?
  59. 59. Questions? Code: http://svn.clearwind.ca/public/projects/presentations Email: andy@clearwind.ca

×