Twet is a web application that allows users to search Twitter, Flickr, and YouTube for content related to a search term. It uses the WordNet thesaurus to expand the search term by adding synonyms. Results are displayed on a single page with tweets, photos, and videos. Photos on Flickr can be viewed on a map using their geotags. The application was developed using .NET Framework, with a Silverlight client and ASP.NET web service. The web service exposes methods to search each API and returns results, while handling the API calls internally. This allows unified searching and display of content across multiple social networks.
1. Twet
Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu
Faculty of Computer Science, Al. I. Cuza University Iasi, Romania
maricel.caciula@info.uaic.ro, denis.recean@info.uaic.ro,
lucian.nistor@info.uaic.ro, florin.ciobanu@info.uaic.ro
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 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. 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 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. 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 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. 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 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("http://search.twitter.com/search.atom?lang
=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. 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 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. 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 Maricel Caciula, Denis Recean, Lucian Nistor, Florin Ciobanu
var scrubbed = HttpUtility.UrlEncode(expression);
string url = "http://gdata.youtube.com/feeds/videos?start-
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>
http://bit.ly/dkQdtg Huffpost -
OBAMA Goes into Lion's Den and Mauls the Lions
13. Twet 13
</Message>
<Image_uri>
http://a3.twimg.com/profile_images/320055989/Copy_o
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>
http://a1.twimg.com/profile_images/528868912/shiri_
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 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. 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 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.