Homework-2 - 실시간 인기검색어 통합뷰어 만들기 - 2012. 10 Youn-Hee Han LINK@KOREATECH http://link.koreatech.ac.kr
RSS 2.0 RSS (Really Simple Syndication) XML을 사용하여 뉴스나 블로그 사이트에서 주로 사용하는 컨텐츠 표현 방식 웹 사이트 관리자는 RSS 형식으로 뉴스나 블로그 내용을 관리하고 그 내용을 가져갈 수 있는 URL을 제공한다. URL로서 제공되는 RSS 내용 RSS Feed RSS Reader를 사용하여 RSS Feed를 받아 좀 더 보기 편한 방식으로 이용할 수 있다. RSS is a dialect (방언) of XML. All RSS feeds must conform to the XML 1.0 specification RSS feed 아이콘 2
RSS Sample RSS 2.0 기반 Sample 파일 <?xml version="1.0"?> <rss version="2.0"> <channel> <title>Liftoff News</title> <link>http://liftoff.msfc.nasa.gov/</link> <description>Liftoff to Space Exploration.</description> <language>en-us</language> <pubDate>Tue, 10 Jun 2003 04:00:00 GMT</pubDate> <lastBuildDate>Tue, 10 Jun 2003 09:41:01 GMT</lastBuildDate> <docs>http://blogs.law.harvard.edu/tech/rss</docs> <generator>Weblog Editor 2.0</generator> <managingEditor>editor@example.com</managingEditor> <webMaster>webmaster@example.com</webMaster> <item> <title>Star City</title> <link>http://liftoff.msfc.nasa.gov/news/2003/news-starcity.asp</link> <description>How do Americans get ready to work with Russians aboard the International Space Station? They take a crash course in culture, language and protocol at Russia's <a href="http://howe.iki.rssi.ru/GCTC/gctc_e.htm">Star City</a>.</description> <pubDate>Tue, 03 Jun 2003 09:39:21 GMT</pubDate> <guid>http://liftoff.msfc.nasa.gov/2003/06/03.html#item573</guid> </item> … </channel> </rss>
NAVER Open API NAVER 제공의 Open API 공식 사이트 NAVER가 제공하는 RSS feed http://dev.naver.com Openapi 소개 사이트 http://dev.naver.com/openapi 제일 먼저 해야 할 일 키 등록 키 등록 관련 FAQ http://dev.naver.com/openapi/faq NAVER가 제공하는 RSS feed 검색 API 뉴스 http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=news&start=1&display=10&query=kut 4 4
RSS Sample of NAVER 5 <?xml version="1.0" encoding="UTF-8"?> <rss version="2.0"> <channel> <title>Naver Open API - news ::'kut'</title> <link>http://search.naver.com</link> <description>Naver Search Result</description> <lastBuildDate>Tue, 09 Oct 2012 15:58:28 +0900</lastBuildDate> <total>271</total> <start>1</start> <display>10</display> <item> <title>한영애 밴드·윈디시티 굿판에 빠지다</title> <originallink>http://www.segye.com/Articles/NEWS/CULTURE/Article.asp?aid=20120912022885&subctg1=&subctg2=&OutUrl=naver</originallink> <link>http://openapi.naver.com/l?AAACWLwQqDMBBEvyYeJdlYXQ85FMRTb/2CkGxQJFFjbPHvu21hYN7MMPtJ+TLLWapybWQSvY9qoctgAEK01NjWBcC+IWmx7yiAcgpVV02ZgplK2YS+CxhZ32+d7Ity7dbIRbRzYstkfZ2mJPQYV09CD4/nIKCNs2c+yDEfs1cclNQc1t8gAZjtn6WERmN3gw/+FUVTsAAAAA==</link> <description>... 한영애 밴드ㆍ윈디시티ㆍ크라잉넛ㆍ수리수리마하수리ㆍ니나노 난다 등은 15, 16일 남한산성 일대에서 열리는 ‘굿 음악제’(<b>Kut</b> Music Festival)에 참여한다. 굿음악이란 굿을 할 때 사용하는 음악으로, 장르에 관계없이 굿판에서 들려주는 음악을 일컫는다. 황해도 굿음악에서 영감을 받은... </description> <pubDate>Wed, 12 Sep 2012 17:48:00 +0900</pubDate> </item> <title>굿음악제, 남한산성에서 무박 2일로 펼쳐지는 놀이판 굿판~</title> <originallink>http://www.ilyoseoul.co.kr/news/articleView.html?idxno=68563</originallink> <link>http://openapi.naver.com/l?AAABWMQQrDIBAAX6NHqZomm4OHQskTehe7omhjYhTr72thYGAOc1bMXYVaaOkHqh3bRQN2BVYggMZJz8YKWCe8aVgXtIIbDnyhLqNVrpSDyAcR26C1xnzs6cJUIzOJhTzq/zikc/Em4stjY658IpGbf3/3RORzhvssfzfgAgiIAAAA</link> <description>... 행사명 : 굿음악제(<b>Kut</b> Music Festa) 일시 : 2012년 9월 15일 13:00 ~ 16일(일) 05:00 장소 : 남한산성일대 프로그램 : 풍물굿 난장, 소리굿 난장, 학술굿판 관람료 : 무료 주최 : 경기도, 경기문화재단 주관 : 굿연구소 소리굿 난장 출연진 : 한영애 밴드, 윈디시티, 크라잉넛, 수리수리 마하수리... </description> <pubDate>Mon, 10 Sep 2012 12:35:00 +0900</pubDate> … </channel> </rss> 5 5
RSS Analysis by using Ajax & DOM processing http://link.koreatech.ac.kr/courses/webservice/ajaxtest3.html Ajax 로 RSS 분석 및 출력하기 (1/3) – 철저 분석 필요 <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var xmlDoc = xmlhttp.responseXML; document.getElementById("title").innerHTML= xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; document.getElementById("link").innerHTML= xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue; var html; var itemElement = xmlDoc.getElementsByTagName("item"); 6 6
RSS Analysis by using Ajax & DOM processing Ajax 로 RSS 분석 및 출력하기 (2/3) html = "<table border='1'><tr><td>Title</td><td>LINK</td></tr>"; for (var i=0; i < itemElement.length; i++) { html += "<tr><td>"; html += itemElement[i].getElementsByTagName("title")[0].childNodes[0].nodeValue; html +="</td><td>"; if (itemElement[i].getElementsByTagName("originallink")[0].childNodes[0] != undefined) { html += itemElement[i].getElementsByTagName("originallink")[0].childNodes[0].nodeValue; } else { html += " "; } html +="</td></tr>"; html += "</table>"; document.getElementById("item").innerHTML=html; var queryString = "한기대"; xmlhttp.open("GET", "proxy.php?proxy_url=" + encodeURIComponent("http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=news&start=1&display=10&query="+ queryString), true); xmlhttp.send(); </script> </head> 7 7
RSS Analysis by using Ajax & DOM processing Ajax 로 RSS 분석 및 출력하기 (3/3) <body> <h1>Ajax Example</h1> <div> <b>title:</b> <span id="title"></span><br /> <b>link:</b> <span id="link"></span><br /> </div> <p> <button type="button" onclick="loadXMLDoc()">Change Content</button> </p> <div id="item"></div> </body> </html> 8 8
4개의 NAVER OpenAPI 서비스 실시간 검색어 서비스 http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&query=nexearch&target=rank 뉴스 서비스 (RSS) http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=news&start=1&display=10&query=kut 이미지 서비스 http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=image&start=1&display=10&query=kut 블로그 서비스 http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&target=blog&display=10&start=1&sort=sim&query=kut 9 9
Daum Open API Daum 제공의 Open API 공식 사이트 http://dna.daum.net/apis/view_all 검색 API 블로그 검색, 카페 검색, 게시판 검색, 동영상 검색, 웹 검색, 이미지 검색, 지식 검색
Daum Open API Daum 은 XML 뿐만 아니라 JSON으로도 결과를 받을 수 있음 http://apis.daum.net/search/board?q=daum&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json
과제 요구사항 목표 Ajax & DOM Processing을 활용하여 네이버와 다음의 4개 웹 서비스를 통합하여 보여주는 “실시간 인기 검색어 통합 뷰어”를 개발 요구사항 NAVER 실시간 인기 검색어 웹서비스를 주어진 주기 (Default: 30초) 마다 갱신해서 분석하여 화면에 리스트 한다. 10개의 실시간 인기 검색어 리스트 중 하나를 클릭하면 네이버와 다음에서 제공하는 검색 API 중 최소한 3개 이상을 사용한 결과를 통합하여 화면에 보여준다. 예를 들어 다음과 같은 정보를 한 화면에 보여준다. NAVER 뉴스 NAVER 블로그 Daum 이미지 제시한 각종 정보들의 좀 더 구체적인 원본 정보를 보기 위하여 원본 링크를 최대한 제공한다. 12 12
화면 디자인 예 선택 사항… 한번 고민해 보세요~~~ 오늘의 날씨 천안: 21C… 2011년 10월 5일 오후 4시 30분 인기 검색어 순위 변리사 안양외고 최강희 … “변리사” 관련 뉴스 리스트 제목: … 내용: … 링크: … “변리사” 관련 블로그 리스트 “변리사” 관련 이미지 리스트 오늘의 날씨 천안: 21C… 13 선택 사항… 한번 고민해 보세요~~~ 13
Homework #2 제출기한 제출방법 2012년 10월 28일 일요일 23:59:59 만들 파일 viewer.html, …, style.css ftp://link.koreatech.ac.kr에 FTP로 자신의 계정에 접근하여 업로드할것 1차 숙제와 다른 폴더에 파일을 구성한다 하지만, 반드시 index.html에 링크를 걸어놓아 평가자가 쉽게 숙제를 확인할 수 있도록 할것 즉, http://link.koreatech.ac.kr/~student1 링크로 들어가면 index.html을 보게 되는데 여기서 눈에 잘 띄도록 2차 숙제 링크를 걸어둘 것
Homework #2 제출방법 el.koreatech.ac.kr 로 제출 2) 보고서 제출 서론, 본론, 결론의 구조를 가진 보고서 표지 서론: Homework의 내용 및 목적 본론: 자신이 만든 홈페이지 코드 설명 및 캡쳐이미지 등 특히, HTML5에 새로 추가된 엘리먼트 활용 내용 및 CSS 적용 내용 설명 필요 결론: 숙제를 한 이후의 느낀점, 하고싶은 말, 또는 불평~~ el.koreatech.ac.kr 로 제출 LINK@KOREATECH
서버 및 계정 설정 내용 FTP & SSH 계정 설정 현황 서버 주소: 220.68.82.29 passwd student1 계정 설정 현황 이름 학번 계정 김남훈 2008135014 student1 김대우 2005160014 student2 김원진 2005135019 student3 김정연 2008135030 student4 김태환 2007135040 student5 김호경 2008135037 student6 노재현 2006135033 student7 박예나 2009135049 student8 백승원 2005135059 student9 손현곤 2012136066 student10 송현정 2006135060 student11 신은세 2007135069 student12 양우석 2009160092 student13 양은호 2005135076 student14 여명 2008135070 student15 오동근 2006135071 student16 유지선 2009135078 student17 이정현 2007135092 student18 이지은 2009160142 student19 이학 2008160138 student20 임재진 2007135104 student21 장성 2007135105 student22 정용진 2007135114 student23 한영미 2008135125 student24 한재민 2007135126 student25 황정민 2008135133 student26 김대웅 student27 LINK@KOREATECH