Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies
-
Upload
doris-chen -
Category
Technology
-
view
4.465 -
download
1
description
Transcript of Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies
![Page 1: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/1.jpg)
Develop Netflix Movie Search
Application using jQuery, OData,
JSONP and Netflix Technologies
Doris Chen Ph.D. Developer Evangelist
Microsoft
http://blogs.msdn.com/b/dorischen/
![Page 2: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/2.jpg)
How do they all work together?
OData Query
OData in JSON
http://odata.netflix.com/Catalog/Titles?$filter=Name%20eq%20'Star%20Trek'
Netflix OData Provider
JSONP Ajax Call
Callback Render on jQuery Template
![Page 3: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/3.jpg)
Netflix OData in Atom
![Page 4: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/4.jpg)
Netflix OData in Feeder Reading View
![Page 5: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/5.jpg)
Netflix OData Diagram
http://odata.netflix.com/Catalog/Titles?$filter=Name%20eq%20'Star%20Trek'
Query String
![Page 6: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/6.jpg)
Key Steps
• Start with an empty HTML page • Define style or you can put it in a css file • Develop start up page • Define the template of the response page • Compose the JSONP call • Implement callback routine and using jQuery template
– Microsoft has contributed jQuery template jquery.tmpl.js to jQuery project and it will be part jQuery in next release.
• Implement movie play using Netflix API – You need to apply a Netflix Developer API account and get the
key. – More information http://developer.netflix.com/
![Page 7: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/7.jpg)
Style
<head> <title>Search Movies</title> <style type="text/css"> #movieTemplateContainer div { width:400px; padding: 10px; margin: 10px; border: black solid 1px; } </style> </head>
![Page 8: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/8.jpg)
Start Up Page and Template Result Page
<body> <label>Search Movies:</label> <input id="movieName" size="50" /> <button id="btnLookup">Lookup</button> <div id="movieTemplateContainer"></div> <script id="movieTemplate" type="text/html"> <div> <img src="${BoxArt.LargeUrl}" /> <strong>${Name}</strong> </br> <button id="playButton" onclick="play(movieID)"
movieID=${NetflixApiId}>Play Now</button> <p> ${Synopsis} </p> </div> </script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="Scripts/jquery.tmpl.js"></script>
![Page 9: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/9.jpg)
Make JSONP Call <script type="text/javascript"> $("#btnLookup").click(function () { // Build OData query var movieName = $("#movieName").val(); var query = "http://odata.netflix.com/Catalog" // netflix base url + "/Titles" // top-level resource + "?$filter=substringof('" + escape(movieName) + "',Name)" //filter by movie name + "&$callback=callback" // jsonp request + "&$format=json"; // json request // Make JSONP call to Netflix $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); });
![Page 10: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/10.jpg)
Callback and Template
<div id="movieTemplateContainer"></div> <script id="movieTemplate" type="text/html"> <div> <img src="${BoxArt.LargeUrl}" /> <strong>${Name}</strong> </br> <button id="playButton" onclick="play(movieID)" movieID=${NetflixApiId}>Play Now</button> <p> ${Synopsis} </p> </div> </script>
function callback(result) {
// unwrap result var movies = result.d.results; $("#movieTemplateContainer")
.empty(); $("#movieTemplate").render(movies).appendTo("#movieTemplateContainer"); }
![Page 11: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/11.jpg)
Netflix Movie Play function play(movieId) { var id = movieId.substring(45); javascript: nflx.openPlayer('http://api.netflix.com/catalog/movie/'+id, 0, 0, ‘YOUR NETFLIX DEVELOPER ACCOUNT KEY'); } </script> <script src="http://jsapi.netflix.com/us/api/js/api.js"></script>
</body>
![Page 12: Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Technologies](https://reader033.fdocuments.in/reader033/viewer/2022042714/54b6e1b44a795943588b45be/html5/thumbnails/12.jpg)