Ssemi Laboratory

Written by Ssemi™(semin Seol), www.Ssemi.net


일단 참 오랜만에(?) 블로깅입니다.
다시 일 관련(?) 블로그에 손을 대기로 마음 먹은 것은 다름이 아니라 최근 ASP.NET MVC 2 Framework로 신개념 온라인 상담 전문 고객센터 커뮤니티인 HELPst.com를 만들었기 때문이랄까요? 차근차근 ASP.NET MVC Framework에 대한 이야기를 나누도록 하고, 우선은 작업에 필요하다 보니까 쓰게되는 내용을 가지고 일단 썰을 풀고자 합니다.

일단 이번에 해볼 작업은 트위터 아시죠? 트위터!! 네 저도 트위터 계정이 있습니다. @ssemi
뭐 다들 트위터니 페이스북이니 미투데이니하는 SNS 하나 정도는 가지고 있자나요?? 개발자라면 여기서 또 API라고 하는 내용을 아시리라 믿습니다. 모르신다구요? API가 무슨 약자게요?? 응용프로그램 인터페이스 (API, Application Program Interface)라고 하는데, 사실 이건 뭐 처음 시스템 프로그래밍상에 있던 내용들이었고, 그 내용이 웹으로 오면서 약간 다른 의미로 쓰이긴 했어요. 

뭐 어쨋든 해당 사이트에 API가 제공된다면 어떤 개발자라도 해당 사이트에서 정보를 쉽게 가져오거나, 변경할 수 있다! 이겁니다.
앞에서부터 잡설이 기네요.

트위터랑 연동하고 싶은데 어떻게 해야 하는걸까? 고민하시는 분들. 일단 차근차근 step 1을 밟아나가시는 겁니다.
API가 뭔소리인지도 모르겠고, 인증은 어떻게 하는거며, 개발은 또 어떻게 해야 하는거야? 라고 생각하시는 분들을 위한 가장 좋은 예제가 될 수 있었으면 좋겠습니다.

Twitter Search API

이 포스팅은 MVC를 기초를 안다는 가정하에 작성되어 있습니다. 
ASP.NET MVC 2 + .NET Framework 3.5 + Visual Studio 2008로 작업했습니다.
Default로 제공되는 템플릿 ASP.NET MVC2 Web Application 템플릿을 생성해서 만든 내용입니다.

이번 내용은 간단하게 ASP.NET MVC로 트위터와 통신하고, 뿌려주는 식의 작업을 할 것이에요.
비인증 API를 사용하기 때문에 전혀 불편 없이 쓸 수 있어요. 

비인증 API가 뭐냐고요? 쉽게 말해서 트위터에 로그인 안하고, 그냥 가져다가 쓸 수 있다는거죠.
트위터 개발자 센터에 가면 API관련 레퍼런스를 볼 수 있는데, 어떤 문서들에는 Requires Authentication  - false 가 있는걸 볼 수 있습니다. 이런 속성이 들어있는 녀석들이 비인증이라는 것이죠. 물론 비인증에는 Rate Limited 즉 요청(Request)에 대한 제한(Limit)이 있죠.  뭐 그래도 어때요. 만들면 장땡이지. 후후후 s(-_-)z

여기서는 비인증 API인 search를 가지고 만들어 보겠습니다.
보통 트위터에서 검색을 하고자 할 때 쓰는 페이지인 이곳에서는 일반적인 텍스트(text), 트렌드(trend), 아이디(@twitterID), 해쉬태그(#hash) 등등을 모두 검색하는 곳입니다. 이곳의 결과를 자신의 페이지에다가 보이도록 해보겠습니다.

우선 내용은 간단하게 아래와 같습니다.
Controller 에서 Search API의 내용을 atom 포맷으로 가져와서 그 내용을 Linq로 Model에 넣어줍니다. View는 Model을 보여주는 일 밖에 없구요.






일단 아래 소스를 붙여보세요.

/Models/AccountModels.cs
public class TwitterViewData { public string AuthorName { get; set; } public string AuthorUri { get; set; } public string Content { get; set; } public string Updated { get; set; } public string Link { get; set; } }
/Controllers/HomeController.cs   - ActionResult Index() { // 안에다가... }
var request = WebRequest.Create("http://search.twitter.com/search.atom?q=helpst&rpp=5") as HttpWebRequest; var twitterViewData = new List<TwitterViewData>(); if (request != null) { using (var response = request.GetResponse() as HttpWebResponse) { using (var reader = new StreamReader(response.GetResponseStream())) { var document = XDocument.Parse(reader.ReadToEnd()); XNamespace xmlns = "http://www.w3.org/2005/Atom"; twitterViewData = (from entry in document.Descendants(xmlns + "entry") select new TwitterViewData { Content = entry.Element(xmlns + "content").Value, Updated = entry.Element(xmlns + "updated").Value, AuthorName = entry.Element(xmlns + "author").Element(xmlns + "name").Value, AuthorUri = entry.Element(xmlns + "author").Element(xmlns + "uri").Value, Link = (from o in entry.Descendants(xmlns + "link") where o.Attribute("rel").Value == "image" select new { Val = o.Attribute("href").Value }).First().Val }).ToList(); } } } ViewData["twitter"] = twitterViewData;
/Views/Home/Index.aspx
<% var model = ViewData["twitter"] as List<TwitterViewData>; foreach (var item in model) { %>; <A href="<%= item.AuthorUri %>" target="_blank"><%= item.AuthorName %></A> <P><%= item.Content %></P> <IMG alt="Twitter Logo" src="<%= item.Link %>" /><br /> <br /> <% } %>
결과 화면 

이처럼 간단하게 인증 없이 트위터 검색 결과를 자신의 홈페이지에 뿌려줄 수 있습니다.

View 페이지에서는  단지 foreach로 화면에 출력만 할 뿐입니다. 수정하여 자신의 취향에 맞게 보여줄 수 있겠죠?
Model 페이지에서는 제공된 정보를 알맞게 가공하여 쓸 수 있도록 개체 클래스를 하나 생성하여 사용하였습니다.
가장 중요한 Controller 페이지에서는 왼쪽에서 보시다싶이 WebRequest로 http://search.twitter.com/search.atom 타입의 URI를 GET으로 요청하였습니다. 그 결과가 atom 타입으로 반환되었고, Controller에서는 그 결과를 Model에 가공된 데이터로 집어 넣었습니다.
트위터의 비인증 API를 사용하면 자신의 글을 이렇게 쉽게 나타낼 수 있습니다.

한번 해보세요. 뭐야? 이렇게 쉬운 것이었어? 라고 놀라실 수도 있습니다. ^^