12
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/
| Date post: | 15-Jan-2015 |
| Category: |
Technology |
| Upload: | doris-chen |
| View: | 4,463 times |
| Download: | 1 times |
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/
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
Netflix OData in Atom
Netflix OData in Feeder Reading View
Netflix OData Diagram
http://odata.netflix.com/Catalog/Titles?$filter=Name%20eq%20'Star%20Trek'
Query String
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/
Style
<head> <title>Search Movies</title> <style type="text/css"> #movieTemplateContainer div { width:400px; padding: 10px; margin: 10px; border: black solid 1px; } </style> </head>
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>
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 }); });
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"); }
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>
![[MS-ODATA]: Open Data Protocol (OData)](https://static.documents.pub/doc/80x56/622c6e460468f5535800c0b4/ms-odata-open-data-protocol-odata.jpg)
