Transcript Home Work
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>[email protected]</managingEditor> <webMaster>[email protected]</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> 3 </rss> NAVER Open API NAVER 제공의 Open API 공식 사이트 http://dev.naver.com Openapi 소개 사이트 http://dev.naver.com/openapi 제일 먼저 해야 할 일 키 등록 키 등록 관련 FAQ http://dev.naver.com/openapi/faq NAVER가 제공하는 RSS feed 검색 API 뉴스 4 http://openapi.naver.com/search?key=8f2e88ae4a6cf2894e0a897ef21c1817&ta rget=news&start=1&display=10&query=kut RSS Sample of NAVER <?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&amp;subctg1=&am <link>http://openapi.naver.com/l?AAACWLwQqDMBBEvyYeJdlYXQ85FMRTb/2CkGxQJFFjbPHvu21hYN7MMPtJ+TLLWapybWQ <description>... 한영애 밴드ㆍ윈디시티ㆍ크라잉넛ㆍ수리수리마하수리ㆍ니나노 난다 등은 15, 16일 남한산성 일대에서 열리는 <pubDate>Wed, 12 Sep 2012 17:48:00 +0900</pubDate> </item> <item> <title>굿음악제, 남한산성에서 무박 2일로 펼쳐지는 놀이판 굿판~</title> <originallink>http://www.ilyoseoul.co.kr/news/articleView.html?idxno=68563</originallink> <link>http://openapi.naver.com/l?AAABWMQQrDIBAAX6NHqZomm4OHQskTehe7omhjYhTr72thYGAOc1bMXYVaaOkHqh3bR <description>... 행사명 : 굿음악제(<b>Kut</b> Music Festa) 일시 : 2012년 9월 15일 13:00 ~ 16일(일) 05:00 장소 : <pubDate>Mon, 10 Sep 2012 12:35:00 +0900</pubDate> </item> <item> … </item> </channel> </rss> 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 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/sea xmlhttp.send(); 7 } </script> </head> 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 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 Daum Open API Daum 제공의 Open API 공식 사이트 http://dna.daum.net/apis/view_all 검색 API 블로그 검색, 카페 검색, 게시판 검색, 동영상 검색, 웹 검색, 이미지 검색, 지식 검색 10 Daum Open API Daum 은 XML 뿐만 아니라 JSON으로도 결과를 받을 수 있음 http://apis.daum.net/search/board?q=daum&apikey=DAUM_SEARCH_ DEMO_APIKEY&output=json 11 과제 요구사항 목표 Ajax & DOM Processing을 활용하여 네이버와 다음의 4개 웹 서비스를 통합하여 보여주는 “실시간 인기 검색어 통합 뷰어”를 개발 요구사항 NAVER 실시간 인기 검색어 웹서비스를 주어진 주기 (Default: 30초) 마다 갱신해서 분석하여 화면에 리스트 한다. 10개의 실시간 인기 검색어 리스트 중 하나를 클릭하면 네이버와 다음에서 제공하는 검색 API 중 최소한 3개 이상을 사용한 결과를 통합하여 화면에 보여준다. 예를 들어 다음과 같은 정보를 한 화면에 보여준다. NAVER 뉴스 NAVER 블로그 Daum 이미지 제시한 각종 정보들의 좀 더 구체적인 원본 정보를 보기 위하여 원본 링크를 최대한 제공한다. 12 화면 디자인 예 2011년 10월 5일 오후 4시 30분 인기 검색어 순위 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 변리사 안양외고 최강희 … … … … … … … 오늘의 날씨 천안: 21C… 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차 숙제 링크를 걸어둘 것 14 Homework #2 제출방법 – 2) 보고서 제출 • 서론, 본론, 결론의 구조를 가진 보고서 표지 서론: Homework의 내용 및 목적 본론: 자신이 만든 홈페이지 코드 설명 및 캡쳐이미지 등 » 특히, HTML5에 새로 추가된 엘리먼트 활용 내용 및 CSS 적용 내 용 설명 필요 결론: 숙제를 한 이후의 느낀점, 하고싶은 말, 또는 불평~~ el.koreatech.ac.kr 로 제출 LINK@KOREATECH 15 서버 및 계정 설정 내용 FTP & SSH – 서버 주소: 220.68.82.29 – FTP로 접속 확인후 SSH 클라이언트 다운 받아 반드시 비밀번호 변경 • passwd student1 계정 설정 현황 이름 김남훈 김대우 김원진 김정연 김태환 김호경 노재현 박예나 백승원 손현곤 송현정 신은세 양우석 양은호 여명 오동근 유지선 이정현 이지은 이학 임재진 장성 정용진 한영미 한재민 황정민 김대웅 학번 2008135014 2005160014 2005135019 2008135030 2007135040 2008135037 2006135033 2009135049 2005135059 2012136066 2006135060 2007135069 2009160092 2005135076 2008135070 2006135071 2009135078 2007135092 2009160142 2008160138 2007135104 2007135105 2007135114 2008135125 2007135126 2008135133 LINK@KOREATECH 계정 student1 student2 student3 student4 student5 student6 student7 student8 student9 student10 student11 student12 student13 student14 student15 student16 student17 student18 student19 student20 student21 student22 student23 student24 student25 student26 student27 16