External Data Access

1. External Data Access With jQuery and AJAX Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer http://www.minkov.it

2. Table of Contents • RESTful Web Services • XML, JSON, RSS • Consuming REST with jQuery

3. RESTful Web Services Lightweight Architecture for Web Services

4. What is REST? "Representational state transfer (REST) is a style of software architecture for distributed hypermedia systems such as the World Wide Web." http://en.wikipedia.org/wiki/Representational_State_Transfer • Application state and functionality are resources • Every resource has an URI • All resources share a uniform interface • This natively maps to the HTTP protocol

5. RESTful Services • One URI for a resource, multiple operations • Add a new document "RestTalk" in category "Code" • PUT http://mysite.com/docs/Code/RestTalk • Get the document / some page • GET http://mysite.com/docs/Code/RestTalk • GET http://mysite.com/docs/Code/RestTalk/pages/3 • Remove the document • DELETE http://mysite.com/docs/Code/RestTalk • Retrieve metadata • HEAD http://mysite.com/docs/Code/RestTalk

6. XML, JSON, RSS Comparing the Common Service Data Formats

7. XML • XML is markup-language for encoding documents in machine-readable form • Text-based format • Consists of tags, attributes and content • Provide data and meta-data in the same time <?xml version="1.0"?> <library> <book><title>HTML 5</title><author>Bay Ivan</author></book> <book><title>WPF 4</title><author>Microsoft</author></book> <book><title>WCF 4</title><author>Kaka Mara</author></book> <book><title>UML 2.0</title><author>Bay Ali</author></book> </library>

8. JSON • JSON (JavaScript Object Notation) • Standard for representing simple data structures and associative arrays • Lightweight text-based open standard • Derived from the JavaScriptlanguage { "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "33 Alex. Malinov Blvd.", "city": "Sofia", "postalCode": "10021" }, "phoneNumber": [{ "type": "home", "number": "212 555-1234"}, { "type": "fax", "number": "646 555-4567" }] }, { "firstName": "Bay", "lastName": "Ivan", "age": 79 }

9. RSS • RSS (Really Simple Syndication) • Family of Web feed formats for publishing frequently updated works • E.g. blog entries, news headlines, videos, etc. • Based on XML, with standardized XSD schema • RSS documents (feeds) are list of items • Each containing title, author, publish date, summarized text, and metadata • Atom protocol aimed to enhance / replace RSS

10. RSS – Example <?xml version="1.0" encoding="utf-8" ?> <rss version="2.0"> <channel> <title>W3Schools Home Page</title> <link>http://www.w3schools.com</link> <description>Free web building tutorials</description> <item> <title>RSS Tutorial</title> <link>http://www.w3schools.com/rss</link> <description>New RSS tutorial on W3Schools</description> </item> <item> <title>XML Tutorial</title> <link>http://www.w3schools.com/xml</link> <description>New XML tutorial on W3Schools</description> </item> </channel> </rss>

11. Consuming REST with jQuery How To Make It Work?

12. Consuming REST With jQuery • Can be done with three methods • $.ajax(…) • $.get(…) • $.post(…) • $.get(…) and $.post(…) use $.ajax(…) under the hood • These methods load data from the server • Using rest service • Return JSON, Atom, RSS

13. Example of $.ajax(…) The path of the REST Service (should be on the same server) $.ajax({ url: "RestService.svc/students/all", type: "GET", timeout: 5000, dataType: "json", success: function (students) { $('#loadStudentsButton').html("students loaded"); // do something with the students data // visualize them, etc… } error: function (err) { $('#loadStudentsButton').html("error: " + err.status); } }); Request type ('GET' or 'POST') The type of data to expect(JSON,XML) In case the request is successful In case the request is unsuccessful • Example of jQuery.ajax(…) get request

14. Example of $.ajax(…) $.ajax({ url: "RestService.svc/students/new", type: "POST", timeout: 5000, contentType: "application/json", data: JSON.stringify(student), success: function () { $('#createStudentButton').html("student created"); //reload the students }, error: function (err) { $('#createStudentButton').html("error: " + err.status); } }); The type of data to sent to the server (JSON, XML) We have a student object (in JSON) and should make it readable for the server • Example of jQuery.ajax(…) post request

15. Consuming Our REST with jQuery Live Demo

16. Consuming Twitter REST with jQuery Lets Make Our Own Twitter?

17. Twitter Rest API • First lets get familiar with the Twitter REST API • We are given a set of methods to • Get a number of tweets for a given user • Post a tweet using jQuery • Search tweets • Etc… • First need to register a twitter app

18. Twitter Rest API (2) • Registering a Twitter App • Go to http://dev.twitter.com • Register a App • When your app is registered you get: • Consumer key • The key your app authorizes with • Consumer secret • Used for user authentication

19. Methods of Twitter REST API • GET statuses/user_timeline • Returns the 20 most recent statuses posted by the authenticating user • It is also possible to request another user's timeline by using • The screen_nameor user_idparameter • The other users timeline will only be visible if they are not protected • If the authenticating user's follow request was

20. Example of $.ajax(…) $.ajax({ url : https://twitter.com/statuses/user_timeline/"+ user+".json?callback=?" dataType: "json", timeout:5000, success : function(data) { //Visualize Tweets }, error : function() { //Visualize Errors }, }); • Getting Tweets from Twitter with jQuery

21. Tweets Live Demo

22. Twitter @Anywhere How To Make It Easy?

23. Example of $.ajax(…) • What is Twitter @Anywhere? • An easy-to-deploy solution • Bringing the Twitter communication platform • Promotes a more engaged user base • Can be used to add • FollowButtons, Hovercards, linkifyTwitterusernames • Build integrations with "Connect to Twitter"

24. How to Use @Anywhere? • With a registered App at dev.twitter.com • You get a AppId • In the head part of the app include • With anywhere.js included • A twttrobject and an anywherefunction • Used to make the magic with anywhere <script src="http://platform.twitter.com/anywhere.js?id=YOUR_APP_ID&v=1"></script>

25. @Anywhere Example Live Demos

26. Search Widget new TWTR.Widget({ version: 2, type: 'search', search: , interval: 300, title: 'It\'s a double rainbow', subject: 'Across the sky', width: 250, height: 300, theme: { shell: {background:'#70fd90',color: '#000000'}, tweets: {background: '#c6fec7', color: '#444444', links: '#1985b5'} }, features: { scrollbar: true, loop: true, live: true, behavior: 'default' } }).render().start();

27. Tweets List Widget new TWTR.Widget({ version: 2, type: 'profile', search: , interval: 300, title: 'It\'s a double rainbow', subject: 'Across the sky', width: 250, height: 300, theme: { shell: {background:'#70fd90',color: '#000000'}, tweets: {background: '#c6fec7', color: '#444444', links: '#1985b5'} }, features: { scrollbar: true, loop: true, live: true, behavior: 'default' } }).render().start();

28. Twitter Widgets Live Demo

29. Twitter @Anywhere Features Login/Logout, Tweet, etc.

30. Login – Logout twttr.anywhere(function (T) { T("#login").connectButton({ authComplete: function(user) { //something to do after authentication }, }); }); • Login: • Logout function logOut() { twttr.anywhere.signOut(); }

31. Login/Logout Live Demo

32. Features • Tweet Box twttr.anywhere(function (T) { T("#tbox").tweetBox(); }); • Follow Button twttr.anywhere(function (T) { T('#follow-donchominkov').followButton("donchominkov"); });

33. Twitter @Anywhere Live Demo

34. Facebook API Lets Play a Little with Facebook

35. Facebook JavaScript SDK • Facebook provides a SDK for JavaScript • To use the functionality of Facebook • Should register an app • Through phone number • With credit card • Absolutely free • Made for precautions

36. Facebook API Live Demo

37. External Data Access