Lighting Talk at SuperHappyDevHouse #40: Develop Netflix Movie Search Application using jQuery, OData, JSONP and Netflix Technologies

  • Article

I attended SuperHappyDevHouse #40 at the Microsoft Silicon Valley campus last Saturday(Sept 18, 2010).  It is the largest SuperHappyDevHouse ever with over 500 developers/hackers/entrepreneurs showed up throughout the day from 1 pm to 1 am.  Here are some pictures to share with you.

Community_Events 176Community_Events 178

Community_Events 180Community_Events 183

I presented at the Lighting talk of SuperHappyDevHouse.  There were about 11 speakers and each would have only no more than 5 minutes. This talk is inspired by Stephen Walther's blog. My original plan was to demonstrate developing a Netlfix Movie search and play application leveraging the technology of jQuery, OData, JSONP, and Netflix API in a simple HTML file in 5 minutes.  However, because of the logistic reason, I can only using slides so I have shared my slide deck with you below.  The presentation covers the architecture, OData detail, key steps in developing this application and step by step code.

Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies

View more presentations from Doris Chen.

The architecture of this application is illustrated in the slide below.  Everything is developed using one simple HTML.  A startup page allows you to enter the movie name to lookup through Netflix site.  During the look up, it will send a Netflix OData query via a JSONP Ajax call to the Netfllix OData Provider.  JSONP is used here for resolving the cross domain issue.  As a response, the Netflix will return the matching movie in JSON format.  Then using jQuery template approach to display the result.  Microsoft has contributed jQuery template jquery.tmpl.js to jQuery project and it will be part of core jQuery 1.5 in the next release. Once you get a list of movies, you can click play button to play the movie in Netflix player.  Two things you need to get before you can run this application:

image

The code in HTML is also illustrated below:

Code Snippet

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Search Movies</title>
  5.     <style type="text/css">
  6.         #movieTemplateContainer div
  7.         {
  8.             width:500px;
  9.             padding: 10px;
  10.             margin: 10px;
  11.             border: black solid 1px;
  12.         }
  13.     
  14.     </style>
  15. </head>
  16. <body>
  17. <label>Search Movies:</label>
  18. <input id="movieName" size="50" />
  19. <button id="btnLookup">Lookup</button>
  20.  
  21. <div id="movieTemplateContainer"></div>
  22.     
  23.   <script id="movieTemplate" type="text/x-jquery-tmpl">
  24. <div>      
  25.          <img src="${BoxArt.LargeUrl}" />
  26.         <strong>${Name}</strong>
  27.         </br>
  28.         <button id="playButton" movieID=${NetflixApiId} onclick="play(this)">Play Now</button>
  29.         <p>
  30.         {{html Synopsis}}
  31.         </p>
  32.   </div>  
  33. </script>
  34.  
  35.   <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
  36.     <script type="text/javascript" src="/Scripts/jquery.tmpl.js"></script>
  37.     <script type="text/javascript">
  38.   
  39.     $("#btnLookup").click(function () {
  40.  
  41.         // Build OData query
  42.         var movieName = $("#movieName").val();
  43.         var query = "https://odata.netflix.com/Catalog" // netflix base url
  44.         + "/Titles" // top-level resource
  45.             + "?$filter=substringof('" + escape(movieName) + "',Name)"  // filter by movie name
  46.             + "&$callback=callback" // jsonp request
  47.             + "&$format=json"; // json request
  48.  
  49.         // Make JSONP call to Netflix
  50.      $.ajax({
  51.             dataType: "jsonp",
  52.             url: query,
  53.             jsonpCallback: "callback",
  54.             success: callback
  55.             });
  56.         });
  57.  
  58.     function callback(result) {
  59.         // unwrap result
  60.         var movies = result.d.results;
  61.  
  62.         $("#movieTemplateContainer").empty();
  63.         $("#movieTemplate").tmpl(movies).appendTo("#movieTemplateContainer");
  64.     }
  65.  
  66.     function play(mvInfo) {
  67.         var id = $(mvInfo).attr("movieID").substring(45);
  68.         javascript: nflx.openPlayer('https://api.netflix.com/catalog/movie/'+id, 0, 0, 'YOUR NETFLIX DEVELOPER API KEY');
  69.     }
  70.     
  71.     </script>
  72.   
  73.  
  74. <script src="https://jsapi.netflix.com/us/api/js/api.js"></script>
  75.  
  76.  
  77. </body>
  78. </html>