Twet Application


Published on

Twet is an application that offers search by pattern popular social sites like Twitter, Flickr or Youtube for the latest related content. In order to make the search more efficient we use the WordNet thesaurus to enlarge the search pattern by adding synonyms. Using Bing Maps, it searches for the location of the photos.

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Twet Application

  1. 1. Twet Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu Faculty of Computer Science, Al. I. Cuza University Iasi, Romania,,, Abstract. Twet is an application that offers search by pattern popular social sites like Twitter, Flickr or Youtube for the latest related content. In order to make the search more efficient we use the WordNet thesaurus to enlarge the search pattern by adding synonyms. Using Bing Maps, it searches for the location of the photos. Keywords: mashup, wordnet, synset, twitter, flickr, geo-location 1 Introduction The social web is, for many people, more real than reality itself. Every self esteemed Internet user has an account on the hottest and coolest online social networks. But besides being a way to spend a good time, social networks are great sources of information and profit. Other critical resource in these high speed, information overloaded social networks is time and ease to reach the desired items. Being so many, these social networks are hard to manage so the idea of an application that pools information from several environments and displays it in a unified form becomes obvious. The project that we developed and that will be discussed in this paperwork treats exactly this problem, of mashing up the result of a search into several different social networks into one web application. Specifically we give the user the possibility to insert the desired search key and then give him the result from three different platforms. We give him the latest tweeter messages, Flickr photos and YouTube videos that are related to the input key. All the results are delivered in the same web page. The search is done with the help of the public API available for each platform. Before running the search we use WordNet library to find constructions with a similar meaning with the initial input key. After the search is done and the results displayed a new feature becomes available, the localization of the flicker videos on a live world map. In this paper we will speak about the technologies used to implement the project, about the structure of the project and the way that the project interacts with all the other platforms.
  2. 2. 2 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu 2 Implementation technology The project was developed using .NET Framework. The client side of the project is a Silverlight 3 application. Microsoft Silverlight is a cross-browser, multi- environment plug-in that delivers the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web. In order to develop applications for this plug-in, the Silverlight SDK is required. The server was written in ASP.NET and is a web page that exposes a web service. The web service and the classes that encapsulate the access to other platforms are coded in C#. 3 Project presentation 3.1 Interface The interface was developed in Silverlight. Only the client part of the project has an UI. The UI is simple and intuitive. There is a search box with a search button attached and tree regions, one for each social network environment (Tweeter, Flickr and YouTube). When the user types a search key and presses the search button the application will start searching on all three platforms and the results will be automatically displayed in the corresponding region of the page.
  3. 3. Twet 3 When a user clicks on a picture it is brought to front and enlarged, covering almost all the page. When a movie is selected from the YouTube results list the movie is brought in front and the YouTube player is available for interaction.
  4. 4. 4 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu If the Show on Map Button is pressed the location of each Flickr picture is showed on a Glob Map using Blinko Maps. 3.2 Internal structure and design The project is has two main parts the client, which is basically the UI and the server that is in charge with linking together the API of the social platforms and the WordNet. 3.2.1 Server The server has one web service class and an ASP page that exposes the service to external calls.
  5. 5. Twet 5 Server Class Diagram The service class exposes 4 methods that do the same thing; they get a search key in a string and return the search results. The difference between methods is that each uses a different a different API call (Tweeter, Flickr, Vimeo or YouTube). Before starting to detail on each API call we will explain the role and the way that WordNet thesaurus is used in the project. 3.2.2 WordNet WordNet is a large lexical database of the English language. Each word in the database is interconnected with other words based on semantic and lexical relations. To use it in our project we downloaded the library and we included in our project an open source C# library called WordNetCommon which connects the C# environment with the useful WordNet Functionality.
  6. 6. 6 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu WordNet Class Diagram We used WordNet in orther to get construct phrases that resamble semantically or sintactically with the search phrase inserted by the user. The ideea is to give the user as many userfull results as posible. After using the WordNet API on a phrase we will end up with a regular expression formed disjunctions of each word with its synonims. Lets consider the following phrase I like boats, one possible result, after using the WordNet API will be I OR like OR love OR found of OR boats OR ships OR yachts. At this point, if the API of the social network accepts regular expressions the results for the search will cover more situations. Here is the code for the private function of the web service that creates the regular expresion: private string SearchPhrase(string Phrase) { List<string> result = new List<string>(); string query = string.Empty; if (Phrase.Trim().Equals(string.Empty)) return string.Empty; string[] words = Phrase.Trim().Split(' '); foreach (string word in words) { if (!Contains(result, word.Trim())) { result.Add(word.Trim()); if (!query.Equals(string.Empty))
  7. 7. Twet 7 query += " "+word.Trim(); else query += word.Trim(); } Dictionary<string, List<Definition>> definitions = DictionaryHelper.GetDefinition(word); foreach (string item in definitions.Keys) { string[] subWords = item.Trim().Split(','); foreach (string subItem in subWords) { if (!Contains(result, subItem.Trim())) { result.Add(subItem.Trim()); query += " OR " + subItem.Trim(); } } } } return query; } This funciton is splitting the phrase into words then each word is passed to the GetDefinition method of the DictionaryHelper class, which in turn finds the synonims. The synonims are concatenated in the result string. Between two consecutive words the OR particle is inserted. Next step in the flow of the application, after finding setting the synonims for each word in the phrase, is calling the foreign platform’s API to do the search. Each of the API methods uses a special class that has the implementation of the API Search calls. The idea is that the search results are stored into a list, but each list contains different objects, depenting on what API was called. If the API was Tweeter’s thet the list will contain stings with messages, if the API war YouTube’s the it will contain objects with the detailes form the movie and so on. Other difference is made by the options that are required from each type of answear. For instance for Flickr photos, besides photo dimenssions and photo url, we request the geographical coordonates, if there are any. When YouTube or Vimeo are introgated we also request the embed code. Lets see the code for each method in the web service and for the method in the special class where the communication with the API is done. The interesting parts of the code will be explained a littele bit.
  8. 8. 8 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu 3.2.3 Tweeter Twitter is a web application that allows users to post short messages on the Internet about what they think is important to others to know. These messages can be sent either from a computer connected to the Internet, or from a mobile phone. The last option make it very userful to inform a list of persons that are interested in some aspects. The web service method that is used to get the tweeter API search result is GetTweetMessages: [WebMethod] public TwetterMessage[] GetTweetMessages(string expression) { return Twetter.Search(SearchPhrase(expression)); } The interesting part of this funcition is that before calling the function that actualy interogates the Tweet API, it uses the SearchPhase method to construct the … search phrase. Lest have a closer look at the Twetter.Search: public static TwetterMessage[] Search(string expression) { List<TwetterMessage> result = new List<TwetterMessage>(); var scrubbed = HttpUtility.UrlEncode(expression); var reader = XmlReader.Create( string.Format(" =en&rpp=100&q={0}", scrubbed)); var feed = SyndicationFeed.Load(reader); foreach (SyndicationItem item in feed.Items) { result.Add(new TwetterMessage(item.Authors[0].Name, item.Title.Text,item.Links[1].Uri.AbsoluteUri)); } return result.ToArray(); } In this function we create an xml stream that will be filled with the tweeter query. This xml will be parsed item by item and the URI of each message will be added to the resulted list.
  9. 9. Twet 9 3.2.4 Flickr Flickr is a web apllication that allows users to upload pictures in order to be shared with others. Using this web aplication you can stay in toutch with your friends wether they are far away or not. The web service method that is used to get the Flickr API search result is GetFlickrImages: [WebMethod] public FlickrImages[] GetFlickrImages(string expression,int page) { string query = SearchPhrase(expression).Trim().Replace("OR ", ","); return FlickrWr.ReturnImages(query,page); } This method has one more operation done with the search phase computed with WordNet, it replaces the “OR” used to symbolize disjunction with “,” then it gets all the images that are tagged with one of the words in the phrase. The function that is doing the real API call is public static FlickrImages[] ReturnImages(string query, int page) { List<FlickrImages> result = new List<FlickrImages>(); string apikey = "ac08d85f818cfc0ede0046a2e1238076"; Flickr flickr = new Flickr(apikey); PhotoSearchOptions searchOptions = new PhotoSearchOptions(); searchOptions.Extras |= PhotoSearchExtras.Geo; searchOptions.Tags = query; searchOptions.Page = page; searchOptions.PerPage = 25; Photos microsoftPhotos = flickr.PhotosSearch(searchOptions);
  10. 10. 10 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu PhotoCollection allPhotos = microsoftPhotos.PhotoCollection; foreach (Photo photo in allPhotos) { result.Add(new FlickrImages(photo.ThumbnailUrl,photo.MediumUrl,photo.Tit le, photo.WebUrl, photo.Longitude, photo.Latitude)); } return result.ToArray(); } This funcion is using the FlickrNet framework to communicate with the Flickr API. This framework allows us to specify a series of extra information we want to ghet with each picture, besides URL, like geographic coordinates, the fact that the result will be paginated and that each page will contain 25 pictures. 3.2.5 Vimeo Vimeo is a web application that wants to alow people to share creative videos made by themselves. You can see very interesting videos on Vimeo. The web service exposes the following method that returns Vimeo films: [WebMethod] public VimeoVideos[] GetVimeoVideos(string expression) { string query = SearchPhrase(expression).Trim().Replace(" OR",""); string[] searchTokens = query.Split(' '); List<VimeoVideos> result = new List<VimeoVideos>(); List<Video> lstVideos = Vimeo.ReturnVideos(searchTokens); foreach (Video aVideo in lstVideos) { result.Add(new VimeoVideos(aVideo.sVideoURL,aVideo.sOwnerLocation,aVideo .sVideoTitle)); } return result.ToArray(); } The particularity of vimeo, compared to all the other 3 APIs, is that its API doesn’t allow regular expresion of any kind. The solution is to ask the result for a list of tokens witch in turn will mean interogating the Vimeo API for each item separatly. This is a very slow solution so we didn’t use the vimeo in the client but rather used
  11. 11. Twet 11 YouTube which also returns films but its API accepts regular expresions so the interogatin si easier and faster. public static List<Video> ReturnVideos(string[] sTag) { List<Video> lstVideos = RequestVideos(sTag); foreach (Video aVideo in lstVideos) { GetVideoUrl(aVideo); GetVideoOwnerLocation(aVideo); } return lstVideos; } This is the Vimeo.ReturnVideos method. Here we see better the fact that if we want to obtain a satisfying result we need to make multiple calls to the Vimeo API, but not only that, we need to do a series of coplicated operation to obtain all the information required to do a complete API call. 3.2.6 YouTube YouTube is a web streaming application that alows users to share movies with othe people. The main differes between YouTube and Vimeo is that the last of them focuses more on the creativity, but the first is more famous. In fact it is more popular than television. The web services’ YouTube interogation method is this. [WebMethod] public YouTubeVideo[] GetYouTubeVideos(string expression,int page) { string query = SearchPhrase(expression).Trim().Replace("OR ", " "); return code.YouTube.Search(query,page); } Here we remove the “OR ” particle from the WordNet obtained phrase and replace it with a white space. Then we will pass this new phrase to te YouTube.Search method whici will yeld the result. public static YouTubeVideo[] Search(string expression,int page) {
  12. 12. 12 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu var scrubbed = HttpUtility.UrlEncode(expression); string url = " index=" + (page*25+1).ToString() +"&max-results=25&q=" + scrubbed; XmlDocument document = null; HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url); using (HttpWebResponse response = (HttpWebResponse)request.GetResponse()) { using (Stream responseStream = response.GetResponseStream()) { document = new XmlDocument(); document.Load(responseStream); } } if (document == null) return null; result.Clear(); parseMe(document.ChildNodes); return result.ToArray(); } In this function we see something interesting. The YouTube API is called using HttpWebReques a simplistic yet flexible method. The Flickr class still used web request but it was trasparent to the final user. 3.2.7 Web Service The web service serializes the information into xmls and sends it to the user using a specific protocol. Using the ASP.NET page we can manualy test the web service and see the form of the result. Here we have a fragmeng from the interogation of the Tweeter API with the key word “lion. <ArrayOfTwetterMessage> <TwetterMessage> <Author>superguts (Superguts)</Author> <Message> Huffpost - OBAMA Goes into Lion's Den and Mauls the Lions
  13. 13. Twet 13 </Message> <Image_uri> f_PB010004b_normal.jpg </Image_uri> </TwetterMessage> <TwetterMessage> <Author>fobsicle (Esai)</Author> <Message> @crimsonexe already watched Lion King on Thursday, but def gonna put Toy Story on my list!! :D </Message> <Image_uri> normal.jpg </Image_uri> </TwetterMessage> </ArrayOfTwetterMessage> 3.3 Client Besides the usability map presented in the Interface part of this paper the client has three interesting code parts. But first we will present a Class Diagram that shows us the fact that te client has copied the web service class on his own program.
  14. 14. 14 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu 3.3.1 Embeded YouTube video When a user select a youtube video from the list a new window containig the youtub player loaded with the current movie is created. The player is fully functional. To make this thing possible the folowing c# conbinet with javascrpt snipet was used: HtmlPage.Window.Invoke("showMovie", Api.YouTubeVideo)((sender as ListBox).SelectedItem)).Embeded ); 3.3.2 Displaying the flicker images on Bing Live Maps. Being a Microsoft projects Bing maps are well integrated into .NET framework. Here we have a piece of code from the function that puts the pictures on the map: MapLayer myLayer = null; if (FlickerPageIndex == 1) { myLayer = new MapLayer(); sr.FlickrResult.Clear(); } else {try { myLayer = (MapLayer)map.Children[0]; } catch (Exception){} } foreach (Api.FlickrImages item in e.Result) { sr.FlickrResult.Add(item); Image image = new Image(); image.Source = new BitmapImage(new Uri(item.ThumbUrl)); image.Opacity = 0.8; image.Stretch = Stretch.None; Location location; if (item.Latitude == 0 && item.Longitude == 0) {} else { location = new Location() { Latitude = (double)item.Latitude, Longitude = (double)item.Longitude }; myLayer.AddChild(image, location); } }
  15. 15. Twet 15 3.3.3 Panel animation When the Live Map button is pressed the main panel turs 180 degrees from right to left exposing the other face, eithe the one with the search results or the one with the live map. <Storyboard x:Name="RotateAnimation"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ForListGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.Rotat ionY)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="180"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ForGoogleEarthGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.Rotat ionY)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="180"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Name="BackRotateAnimation"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ForGoogleEarthGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.Rotat ionY)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="180"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ForListGrid" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.Rotat ionY)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="180"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> <EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0">
  16. 16. 16 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> 4 Conclusion and development A mashup application is very useful because it gives rapid acces to multiple platforms allowing someone to find quick infomation. The .Net platform give us the posibility to develop an aplication without having to learn a new programing language or to be forcet to learn the APIs that we used in a deep sense. As a further development task for this application we willl mention the integration of other online ontology in order to enlarge the search results area. The utilisation of ontologies will allow the application to search and analise word from other languages besides english.
  17. 17. Twet 17 5 Bibliography  Silverlight Bing Maps,  WordNet.NET,  Bing Maps Silverlight Control SDK b028-1e0e3187e830