• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
22. External Data Access - Web Front-End

22. External Data Access - Web Front-End



External Data Access with jQuery and AJAX. Parse and add a html from an external source (like Google, Facebook, twitter, MySpace) ...

External Data Access with jQuery and AJAX. Parse and add a html from an external source (like Google, Facebook, twitter, MySpace)
Telerik Software Academy: http://html5course.telerik.com
The website and all video materials are in Bulgarian

Table of contents:
RESTful Web Services
Consuming Our REST with jQuery
Consuming Twitter REST with jQuery
Twitter @Anywhere
Twitter @Anywhere Features
Facebook API



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    22. External Data Access - Web Front-End 22. External Data Access - Web Front-End Presentation Transcript

    • External Data Access With jQuery and AJAXDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik Software Academyacademy.telerik.com
    • Table of Contents RESTful Web Services XML, JSON, RSS Consuming Our REST with jQuery Consuming Twitter REST with jQuery Twitter @Anywhere Twitter @Anywhere Features Facebook API 2
    • RESTful Web ServicesLightweight Architecture for Web Services
    • 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 4
    • 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 5
    • XML, JSON, RSSComparing the Common Service Data Formats
    • 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> 7
    • JSON JSON (JavaScript Object Notation)  Standard for representing simple data structures and associative arrays  Lightweight text-based open standard  Derived from the JavaScript language { "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 } 8
    • 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 9
    • 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> 10
    • Consuming REST with jQuery How To Make It Work?
    • 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 12
    • Example of $.ajax(…) The path of the REST Service (should be on the same server)$.ajax({ url: "RestService.svc/students/all", type: "GET", Request type (GET or POST) timeout: 5000, dataType: "json", The type of data to expect(JSON,XML) success: function (students) { $(#loadStudentsButton).html("students loaded"); // do something with the students data // visualize them, etc… In case the request is successful } error: function (err) { $(#loadStudentsButton).html("error: " + err.status); }}); In case the request is unsuccessful Example of jQuery.ajax(…) get request 13
    • Example of $.ajax(…)$.ajax({ url: "RestService.svc/students/new", The type of data to type: "POST", sent to the server (JSON, XML) timeout: 5000, contentType: "application/json", data: JSON.stringify(student), We have a student object (in JSON) and should make it readable for the server success: function () { $(#createStudentButton).html("student created"); //reload the students }, error: function (err) { $(#createStudentButton).html("error: " + err.status); }}); Example of jQuery.ajax(…) post request 14
    • Consuming Our REST with jQuery Live Demo
    • Consuming Twitter REST with jQuery Lets Make Our Own Twitter?
    • 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 17
    • 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 18
    • 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 users timeline by using  The screen_name or user_id parameter  The other users timeline will only be visible if they are not protected  If the authenticating users follow request was 19
    • 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 20
    • TweetsLive Demo
    • Twitter @Anywhere How To Make It Easy?
    • 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  Follow Buttons, Hovercards, linkify Twitter usernames  Build integrations with "Connect to Twitter" 23
    • How to Use @Anywhere? With a registered App at dev.twitter.com  You get a AppId In the head part of the app include <script src="http://platform.twitter.com/ anywhere.js?id=YOUR_APP_ID&v=1"></script> With anywhere.js included  A twttr object and an anywhere function  Used to make the magic with anywhere 24
    • @Anywhere Example Live Demos
    • Search Widgetnew TWTR.Widget({ version: 2, type: search, search: , interval: 300, title: Its 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(); 26
    • Tweets List Widgetnew TWTR.Widget({ version: 2, type: profile, search: , interval: 300, title: Its 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
    • Twitter Widgets Live Demo
    • Twitter @Anywhere Features Login/Logout, Tweet, etc.
    • Login – Logout Login: twttr.anywhere(function (T) { T("#login").connectButton({ authComplete: function(user) { //something to do after authentication }, }); }); Logout function logOut() { twttr.anywhere.signOut(); } 30
    • Login/Logout Live Demo
    • Features Tweet Box twttr.anywhere(function (T) { T("#tbox").tweetBox(); }); Follow Button twttr.anywhere(function (T) { T(#follow-donchominkov).followButton("donchominkov"); }); 32
    • Twitter @Anywhere Live Demo
    • Facebook APILets Play a Little with Facebook
    • 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 35
    • Facebook API Live Demo
    • External Data Access курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
    • Homework Parse and add a html from an external source (like Google, Facebook, twitter, MySpace…) Make a web app that has a textbox that can hold a text no longer than 140 symbols and a button. When the user clicks the button, the text should be tweeted in twitter and send as a feed to Facebook.  Implement a functionality for login/logout to both Twitter and Facebook. 38
    • Homework (2) Research the Rest API of one of the following:  Last.FM, MySpace, Google, Bing, Google +, Flickr, etc  Make a few demos to demonstrate the functionality. 39
    • Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy  html5course.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com