Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flickr Open Api Mashup

3,250 views

Published on

Flickr Open Api Mashup

Published in: Technology
  • Be the first to comment

Flickr Open Api Mashup

  1. 1. flickr Open API & Mash-up 2008. 05. 26 Yahoo! Korea , Jinho Jung
  2. 2. !quot; • flickr #$ • API Key & NSID • DEMO – NSID% &'( )* +, – Photo ID- )* ./ 0123 – )'4 ./ 0123 • Flickr API Explorer • Flickr Feeds & Format • DEMO – HTML Badge 563 • 78 & API Signature
  3. 3. 9: ;< • flickr =>?? • flickr &' @ /AB?? • Open API =>?? • Open API CD EF ?
  4. 4. About flickr • GH7 )* IJ K LM – )* N-O – )*IJ moo.com flickr – &P,LM – QR • ST( 563 – Open API % &' – 7U, )*V – WH&OX DVD, YZ
  5. 5. flickr [ • Flickr [ – ]^ 12,000 $ &_Q `ab (2.6TB) – cc 2005de &_Q N-O – fgh ! quot;#$ &_Q • . : Free vs. Pro – Free ! Space : 200M / month ! Set : 3$ – Pro ! Unlimited ! Gift!
  6. 6. )*IJ • Set – i. jC kle )* mn – op&q rstu, ‘v] wxu • Collection – Set(yz S{ Collection)e mn – 0|, }R(2007, 2006) • )*IJ – Collection K >~% 5Oz • – c€ •‚ ƒ„, …( †E yz ‡9 ˆV
  7. 7. flickr )* IJ R‰
  8. 8. Š~, &P • Š~ K ‹Œ – Š~ - )* •Ž •• ‘z ’‡Q – ‹Œ - &_Q =“Ž p3z Œ • &P – ”‰, 0| – '&P )*' •&Q
  9. 9. N-O • Flickr Uploadr (PC, Mac) • iPhoto, Aperture • Windows XP plugin • Upload Page • Email
  10. 10. DEMO : hp.com
  11. 11. MashUp– •( 3— • HTML, CSS, XML & XPath • JS & DOM , AJAX , JSON, • Web Server & HTTP , Database • PHP , Perl, Regular Expression • REST, SOAP, XML-RPC, Curl
  12. 12. Flickr Open API • activity • photos.notes • auth • photos.transform • blogs • photos.upload • contacts • photosets • favorites • photosets.comments • groups • prefs • interestingness • reflection • people • tags • photos • photos.geo • test • photos.licenses • urls
  13. 13. NSID & API Key • NSID – Network Service ID – ˜M( User =&™ š – EX) 81559972@N00 ( = phploveme) – ›œ•ž †E 0Ÿ, NSIDz †E 0Ÿ • API Key – ¡&¢ ?£ ‡ )'¤z ID – ¥N' , a¥N'($¦') – API Key §£ ! http://www.flickr.com/services/api/keys/
  14. 14. API Key §£
  15. 15. API Key §£
  16. 16. API )' ¨© • Charter Encoding : UTF-8 • Request Format – REST, SOAP, XML-RPC • REST API Endpoint – http://api.flickr.com/services/rest/ • API key ª Method % &'
  17. 17. [ DEMO ] NSID% quot;&' () *+
  18. 18. DEMO : NSID% &'( )* +, • flickr.photos.search – Endpoint : http://api.flickr.com/services/rest/ – method : flickr.photos.search – user_id : 81559972@N00 ( phploveme NSID) – per_page : 5 ! Default : 100 , MAX: 500 – api_key : MY_API_KEY • Request URL – http://api.flickr.com/services/rest/? method=flickr.photos.search&user_id=81559972@N00 &per_page=5&api_key=25f136aee2f23291097789fb5d c13931
  19. 19. DEMO : NSID% &'( )* +, • Result <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> - <rsp stat=quot;okquot;> - <photos page=quot;1quot; pages=quot;236quot; perpage=quot;5quot; total=quot;1180quot;> <photo id=quot;565367310quot; owner=quot;81559972@N00quot; secret=quot;59ddfb1d5fquot; server=quot;1037quot; farm=quot;2quot; title=quot;˜« ¬-quot; ispublic=quot;1quot; isfriend=quot;0quot; isfamily=quot;0quot; /> <photo id=quot;565759301quot; owner=quot;81559972@N00quot; secret=quot;8ae60ad3a4quot; server=quot;1104quot; farm=quot;2quot; title=quot;®¯) R°±quot; ispublic=quot;1quot; isfriend=quot;0quot; isfamily=quot;0quot; /> <photo id=quot;565367234quot; owner=quot;81559972@N00quot; secret=quot;b749f597d5quot; server=quot;1161quot; farm=quot;2quot; title=quot;;²³ :´quot; ispublic=quot;1quot; isfriend=quot;0quot; isfamily=quot;0quot; /> <photo id=quot;565759217quot; owner=quot;81559972@N00quot; secret=quot;9030c43e55quot; server=quot;1410quot; farm=quot;2quot; title=quot;£/Jquot; ispublic=quot;1quot; isfriend=quot;0quot; isfamily=quot;0quot; /> <photo id=quot;565759175quot; owner=quot;81559972@N00quot; secret=quot;273f96008dquot; server=quot;1424quot; farm=quot;2quot; title=quot;Cj _-Lµquot; ispublic=quot;1quot; isfriend=quot;0quot; isfamily=quot;0quot; /> </photos> </rsp>
  20. 20. DEMO : NSID% &'( )* +, • rsp : ¶· ¸¹ – stat=quot;okquot; • photos : +, ¸¹ ?º – page=quot;1quot; »¼ •&Q – pages=quot;236quot; ½Q¾ •&Q – perpage=quot;5quot; •&Q^ &_Q ¿ – total=quot;1180quot; +,À &_Q • photo : +,¸¹ )* – id=quot;565367310quot; ˜M( Photo ID – owner=quot;81559972@N00quot; ÁÂ4 NSID – secret=quot;59ddfb1d5fquot; Image Server URL ‰-' – server=quot;1037quot; Image Server URL ‰-' – farm=quot;2quot; Image Server URL ‰-' – title=quot;˜« ¬-quot; CÃ
  21. 21. [ DEMO ] Photo ID, () -. /012
  22. 22. DEMO : Photo ID- )* ./ 0123 • flickr.photos.getInfo – Endpoint : http://api.flickr.com/services/rest/ – method : flickr.photos.getInfo – photo_id : 445533638 – api_key : MY_API_KEY • Photo URL – http://www.flickr.com/photos/phploveme/445533638/ • Request URL – http://api.flickr.com/services/rest/? api_key=25f136aee2f23291097789fb5dc13931&method=flickr.ph otos.getInfo&photo_id=445533638
  23. 23. DEMO : Photo ID- )* ./ 0123 • Result <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> - <rsp stat=quot;okquot;> - <photo id=quot;445533638quot; secret=quot;b7ce85e4c8quot; server=quot;224quot; farm=quot;1quot; dateuploaded=quot;1175649087quot; isfavorite=quot;0quot; license=quot;0quot; rotation=quot;0quot; originalsecret=quot;61c37df859quot; originalformat=quot;jpgquot;> <owner nsid=quot;81559972@N00quot; username=quot;phplovemequot; realname=quot;Jinho Jungquot; location=quot;South Koreaquot; /> <title>aG Ä ŽÅÆO ÇE</title> <description /> <visibility ispublic=quot;1quot; isfriend=quot;0quot; isfamily=quot;0quot; /> <dates posted=quot;1175649087quot; taken=quot;2004-02-21 19:33:07quot; takengranularity=quot;0quot; lastupdate=quot;1182170636quot; /> <editability cancomment=quot;0quot; canaddmeta=quot;0quot; /> <comments>9</comments> <notes /> - <tags> <tag id=quot;1281997-445533638-187219quot; author=quot;81559972@N00quot; raw=quot;everlandquot; machine_tag=quot;0quot;>everland</tag> <tag id=quot;1281997-445533638-1213quot; author=quot;81559972@N00quot; raw=quot;nightquot; machine_tag=quot;0quot;>night</tag> <tag id=quot;1281997-445533638-373261quot; author=quot;81559972@N00quot; raw=quot;ŽÅÆOquot; machine_tag=quot;0quot;>ŽÅÆO</tag> </tags> - <urls> <url type=quot;photopagequot;>http://www.flickr.com/photos/phploveme/445533638/</url> </urls> </photo> </rsp>
  24. 24. DEMO : Photo ID- )* ./ 0123 • Photo – username=quot;phplovemequot; – realname=quot;Jinho Jungquot; – location=quot;South Koreaquot; – title : aG Ä ŽÅÆO ÇE – dates ! posted=quot;1175649087quot; ÁÂc UNIX Timestamp ! taken=quot;2004-02-21 19:33:07quot; ÈÉc – Comments : 9 • Urls – http://www.flickr.com/photos/phploveme/445533638/
  25. 25. [ DEMO ] NSID% quot;&' (&3 -. 42
  26. 26. DEMO : )'4 ./ 0123 • flickr.people.getInfo – Endpoint : http://api.flickr.com/services/rest/ – method : flickr.people.getInfo – user_id : 81559972@N00 (phploveme) – api_key : MY_API_KEY • Request URL – http://api.flickr.com/services/rest/? api_key=25f136aee2f23291097789fb5dc13931&metho d=flickr.people.getInfo&user_id=81559972@N00
  27. 27. DEMO : )'4 ./ 0123 • Result <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> - <rsp stat=quot;okquot;> - <person id=quot;81559972@N00quot; nsid=quot;81559972@N00quot; isadmin=quot;0quot; ispro=quot;1quot; iconserver=quot;184quot; iconfarm=quot;1quot;> <username>phploveme</username> <realname>Jinho Jung</realname> <mbox_sha1sum>7fe046668354e5f10a223088c8d24708634e6815 </mbox_sha1sum> <location>South Korea</location> <photosurl>http://www.flickr.com/photos/phploveme/</photosurl> <profileurl>http://www.flickr.com/people/phploveme/</profileurl> <mobileurl>http://m.flickr.com/photostream.gne?id=1281997</mobileurl> - <photos> <firstdatetaken>2003-10-01 22:31:02</firstdatetaken> <firstdate>1175649047</firstdate> <count>1153</count> </photos> </person> </rsp>
  28. 28. 567 : Flickr API Explorer • API test % •( ÊY ˆJ( R‰ – Ê$ †¿ – ¶· ËC – URL Ì- • API <` Cc ¤:Ž •Í – http://www.flickr.com/services/api/ flickr.people.getInfo.htm
  29. 29. Flickr API Explorer
  30. 30. Î¹Ï API &' • Ðc( ’#Oz (Ñ5 ÒÓ • ’#O ÒÓÔ‡Ô0Ÿ¤Õ Öž ./% 01× • Ø?( ¡&¢% ?£¤Q Ùn • ¡&¢ ÚÛ
  31. 31. Flickr Feeds • )' 0Ÿ( ÜO ÃÂ – http://www.flickr.com/services/feeds/ • ÝÞŽ N-O À mß )*: – http://api.flickr.com/services/feeds/photos_public.gne • i. )'4e L$À )*: – http://api.flickr.com/services/feeds/photos_public.gne? id=USER-NSID • ‚à )* mn – http://api.flickr.com/services/feeds/groups_pool.gne? id=GROUP-NSID
  32. 32. Feeds Format • rss2 : RSS 2.0 • atom : Atom 1.0 • rss_091 : RSS 0.91 • rss_092 , rss : RSS 0.92 • rss_100 , rdf : RSS 1.0 • rss_200_enc : RSS 2.0 with enclosures • 3á – php, php_serial, – csv, json, sql, yaml, cdf
  33. 33. [ DEMO ] HTML Badge 892
  34. 34. DEMO : HTML Badge 563 • http://www.flickr.com/badge.gne • âã ä* HTML Badge Flickr HTML Badge New HTML Badge
  35. 35. DEMO : HTML Badge 563 • php feeds &' • $feed : ¸¹še PHP Code Block • http://api.flickr.com/services/feeds/ photos_public.gne? id=81559972@N00&format=php <?php • ¸¹ $feed = array( 'title'=> quot;phplovemeåe )*quot;, 'url' => http://www.flickr.com/photos/phploveme/quot;, 'description' => quot;quot;, 'pub_date' => quot;1182188262quot;, …
  36. 36. Index.html • <html> • <head> • <title>Flickr Mashups: New Badge </title> • <link href=quot;../css/main.cssquot; rel=quot;stylesheetquot; type=quot;text/ cssquot; /> • <link href=quot;../css/badge.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> • </head> • <body> • <?php include('./badge.php') ?> • </body> • </html>
  37. 37. badge.php : $feed • include(quot;http://api.flickr.com/services/feeds/photos_public.gne? id=81559972@N00&format=phpquot;); • … • $str .= '<p class=quot;badge-titlequot;> <a href=quot;' . $feed['url'] . 'quot;>' .$feed['title'] . '</a></p>'; • $items = $feed['items']; • for ($i = 0; $i < count($items); $i++) • { • if (preg_match('/(http://farm[0-9].static.flickr.com/d+/d+_[0-9a-z]+)_m .jpg/',$items[$i]['description'],$result)) • { • $image = $result[1] . '_s.jpg'; • $str .= '<li class=quot;badge-itemquot;><a href=quot;'.$items[$i]['url'].'quot;> • <img src=quot;'.$image.'quot; alt=quot;'.$items[$i]['title'].'quot; /></a></li>'; • } • } • … • echo($str);
  38. 38. Flickr Image Size • http://flickr.com/photo_zoom.gne?id=565367020&size=sq •_) ; æ s3 sq )çè 75 x 75 t éœc êë 100 s Dž s3 êë 240 m k9 s3 êë 500 o µì &_Q µì
  39. 39. 78 : Authentication • 78 – aL$- ;.À )* – N-O N-O,¿., íC • aL$ )* – http://flickr.com/photos/phploveme/560185670/
  40. 40. 78 : Authentication • Mashup 78 je)î – Mashup Ž`z ID/PW % ïQ ½H! – ðJñ )&~Ž`5 ID/PW -‚7 – Mashup ž …(5 òw ózS – )'4z …( ¿ô– Q./íC
  41. 41. Mashup 78 User User 1. Redirect 2. Log in 3. Authentication : X Read, Write, Delete 4. Permission 3rd Party Mashup
  42. 42. 78 : Mashup Ž …( òw¤3 • MashupŽ 78& Ø?( EY =“ URL- Redirect ‡õS – http://flickr.com/services/auth/?api_key=API- KEY&perms=PERMS&api_sig=API-SIG • Ê$ †¿ – api_key : 78ö – perms : read , write , delete – api_sig : ’#O ÒÓ' `æ(signature)
  43. 43. API Signature 563 • API ö 78 ;.
  44. 44. API Signature 563 • api_sig ö Ì- ¨© – md5(secret+api_key+api_val+perms+ perms_val) • ËC – Secret : 1d0c5d654af2d1e9 – api_key : 25f136aee2f23291097789fb5dc13931 – perms: read – api_sig =md5(1d0c5d654af2d1e9api_key25f136aee2f23291 097789fb5dc13931permsread) = 01b108f97ffaa4882ee2a93ab90ffff4
  45. 45. Mashup 78 • 78 URL – http://flickr.com/services/auth/? api_key=25f136aee2f23291097789fb5dc13931&perms=rea d&api_sig=01b108f97ffaa4882ee2a93ab90ffff4 CallBack URL
  46. 46. Mashup 78 ¥• • )'k7 ÷ò Mashup …( – http://www.flickr.com/services/auth/list.gne
  47. 47. [ DEMO ] Flickr Badge Wizard http://lovesera.com/tt/253
  48. 48. [ DEMO ] FD's flickr Toys Badge Maker
  49. 49. URLs • Flickr Services API <` – http://www.flickr.com/services/api/ • Flickr API ‚à – http://www.flickr.com/groups/api/ • Flickr API Korea – http://www.flickr.com/groups/apikr/ • Mashup Camp :; – http://lovesera.com/tt/253 • FD’s flickr Toys – http://bighugelabs.com/flickr/
  50. 50. Thanks BLOG : lovesera.com flickr

×