1. Development of Internet Application Web API Ing. Jan Janoušek 9

2. API -Application Programming Interface -Define a way of ineraction between: -Software components Interface -Software and hardware OpenGL DirectX OpenCL -Whole systems or their parts Windows API Linux Kernel API SOAP REST

3. Why API? -Independence. -Scalability. -Providing services to third parties. -I know what I want and I don't care how I reach it (blackbox).

4. Web services -Web services are subset of API. -Software instrument for communication between devices using network. -The most commonly through HTTP protocol. -XML vs. JSON -Independent on platform. -Independent on programing languages. -Security -Authentication vs. authorization -Signed request -HTTP vs. HTTPS

5. REST - Representational State Transfer -Today the most widely used type of web API. -Stateless communication based on HTTP protocol. -REST API is collection of resources, on which it is possible to perform operations. -Every source is uniquely identified by its URL. -HTTP methods GET, POST, PUT and DELETE. -Answers of a server are commonly XML, or JSON. -Scalability and caching. GET http://address-api.xyz/name-or-path-to-resource/?parameters=optional GET https://graph.facebook.com/me/albums?fields=id%2Ccover_photo%2Clink&access_token=... DELETE https://graph.facebook.com/{id_objektu}?access_token=... GET http://address-api.xyz/name-or-path-to-resource/?parameters=optional GET https://graph.facebook.com/me/albums?fields=id%2Ccover_photo%2Clink&access_token=... DELETE https://graph.facebook.com/{id_objektu}?access_token=...

6. SOAP - Simple Object Access Protocol -It's not usually used in combination with JavaScript (and generally for web services). -The most commonly used protocol is HTTP, but it's possible use SMTP, TCP, JMS (Java Message Service). -Requests to a server and its responses are XML documents. POST /InStock HTTP/1.1 Host: www.example.org Content-Type: application/soap+xml; charset=utf-8 Content-Length: 299 SOAPAction: "http://www.w3.org/2003/05/soap-envelope" IBM POST /InStock HTTP/1.1 Host: www.example.org Content-Type: application/soap+xml; charset=utf-8 Content-Length: 299 SOAPAction: "http://www.w3.org/2003/05/soap-envelope" IBM

7. WSDL and UDDI -WSDL (Web Services Description Language) -Language for web serivce interface description based on XML. -Description is readable for machines. -Automatic generation of client source code -UDDI (Universal Description Discovery and Integration) -Web service database -Communication is based on SOAP. -Provide WSDL documents for each API. -It is used mainly in corporations.

8. Facebook API -Communication is wired with FB application. -Social graph – collection of data created by users of FB as graph structure. -A wide range of services/APIs: -Graph API – Primary API for reading and creating content within Social graph. -Open Graph – A tool for description of objects within Social graph. -Social Plugins – miniapplication for web pages. https://developers.facebook.com/apps

9. Facebook - Graph API -REST API based on JSON. -Official SDK exists for JavaScript, PHP, Android (Java) and iOS (Objective-C). -Application ID and private key is required for communication. -Operations related to the user data are subject of the authorization. -graph.facebook.com /{node-id}/{edge-name} https://developers.facebook.com/tools/explorer https://developers.facebook.com/docs/graph-api/reference/

10. Facebook - Graph API window.fbAsyncInit = function() { FB.init({ appId : 'ID__OF_APPLICATION', status : true, xfbml : true, version : 'v2.8' }); // There is place for your API callas FB.login(function(response) { FB.api('/me', function(response) { alert('Your name: ' + response.name); }); }, { scope: 'email,user_likes' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

11. Facebook - Open Graph protocol -Open Graph protocol - http://ogp.me/http://ogp.me/ -Metadata for object description. -It is used by FB, Google+ (an other) -https://developers.facebook.com/tools/debug/https://developers.facebook.com/tools/debug/

12. Facebook - Social Plugins -Miniapplication dedicates to web pages. -Buttons Like, Share, Send and Follow -Embedded Posts -Comments Plugin -Activity Feed -Registration -Recommendations Bar -And many others… https://developers.facebook.com/docs/plugins/

13. Google API -All communication is wired with application (key). -Large range of services/APIs (REST) – Maps, YouTube, Google+, Translate, Visualisation, Analytics, AdSense, Calendar, Drive, Web Fonts, Cloud Storage, Cloud SQL, etc... -Well documented. -Official libraries for a wide range of languages – JavaScript, Python, Java, Ruby, PHP, Go, C# https://console.cloud.google.com/

14. Google Maps -Official SDK: Web (JavaScript), iOS a Android -Require API key. -Own layers and markers. -Free but limited by number of requests. -Includes other API: -Directions -Distance Matrix -Elevation -Geocoding -Time Zone https://console.cloud.google.com/ function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var el = document.getElementById("map-canvas"); var map = new google.maps.Map(el, mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var el = document.getElementById("map-canvas"); var map = new google.maps.Map(el, mapOptions); } google.maps.event.addDomListener(window, 'load', initialize);

15. Google+ widgets -Button +1, Follow a Share -Embedded posts -Badge -Snippet https://developers.google.com/+/web/

16. OAuth 2.0 -Open standard for authorization (not authentization) to access users data. -Requires SSL (HTTPS) for security process. - Contains several processes/flows of authorization: -User-Agent Flow -Web Server Flow -Username and Password Flow -Assertion Flow -Client Credentials Flow -Used by Facebook, Google, Twitter and many others servers/services.

17. OAuth 2.0 – Web Server Flow

18. OAuth 2.0 – User-Agent Flow

19. Other APIs -Twitter – social network- https://dev.twitter.com/ -Dropbox API – storage - https://www.dropbox.com/developers -Box.net – storage - http://developers.box.net/ -Flickr – fotogallery- http://www.flickr.com/services/api/ -Last.fm – music- http://www.last.fm/api -Foursquare – socila network - https://developer.foursquare.com/ -Evernote – notes- http://dev.evernote.com/doc/ -Mapy.cz – maps - http://api.mapy.cz/ -Vimeo – videos - http://developer.vimeo.com/