CyberTube » Project

Dragon’s Den Pitch Overview

Tolias — Fri, 27 May 2011 15:08:18 +0000

Last week our team presented MovieIt social network-based recommendation application on the Dragon’s Den Pitch panel. We ran 10 minutes presentation that introduced key features of our system outlining technical, social, legal and economic aspects. After presentation “dragons” addressed to us multiple questions pointing out some “gaps” in our project. We found this critics and notes very useful in terms of future idea and marketing strategy evolvement. Below are presentation slides and a short overview of some asked questions and provided answers.

Questions

What is the novelty of your idea? Why should users choose your system? Why is it better than analogous applications?

Answer: our system is free, flexible, independent from any social networking platform and provides a better user experience in contrast to its rivals. MovieIt supports multidimensional trust-based recommendations exploiting geolocation information and relations between users in social networks. It means that the user gets different types of recommendations, some examples provided below:

What movies would I like to watch?
Who suggested this movie to me? If it is Bob/Jane/etc., then probably I would love to see it as we have similar tastes.
What is the best place/cinema to watch this movie?
I’m in the movie theatre. What should I watch here?
Who wants to watch “Avatar” movie with me in the Odeon cinema in the evening?
What kind of movies my friends prefer?

Secondly, user gets an extra information about made suggestions, e.g. “who suggested it?”, reviews, ratings, friends’ comments. These details provide a better user experience and boost trust to received recommendation. Moreover, we don’t limit the functionality of our system. It is more than just a recommendation tool: users can publish in their social network profiles information about movies and places or suggest movies directly to their friends. The novice of our application is that we turned it in a universal environment that combines different features as a multidimensional recommendation engine, a communication tool and a platform for self-expression (comments, reviews).

What are weak points of your project?

Answer: from the social perspective tagging friend in places and movies is something that it is considered personal information. This potentially will have legal implications and we have to find a way to provide means to protect. On approach is to block a user form tagging you for specific types of movies. Also we proposed to use the policy that should notify users about their liabilities and decided to keep the right to remove any material that provokes a complaint upon the request. Secondly, storing such vital information we have the obligation to protect the data from illegal access. System security is something that we have to consider seriously in the future.

Future Developments

Tolias — Fri, 27 May 2011 14:55:15 +0000

Our aim is to make this project a commercial product. To achieve this, firstly we have to improve the client side providing better user experience. At the moment has been implemented using multiple static pages. Further development might be to provide a single page static page where all the user dialogs will appear in the pages this will enable a the provision of a better user experience with smooth transitions from dialog to dialog.

In terms of the technology we need to optimize our servlet algorithm by providing simultaneous (using Java threads) requests to social network APIs eliminating in that way the latency. Further improvement is to provide a buffer for each request for example the last 20 movie searches can be cashed on the servlet so in case the same query-string is requested again then the will return the information directly without making the request to the third party. This happens frequently because the user type a name on the search bar and the presses the backspace to correct it. The string after pressing the backspace is the string had previously requested.

We consider vital the integration of you system with foursquare because our system is mostly targeted foursquare type of users. This kind of integration will have benefit all parties (user, Facebook and MovieIt) because the user gets better recommendation (from MovieIt) and badges (from foursquare) the Foursquare and MovieIt will get information from the user activity the former for places and the later to provide better recommendation.

Finally there is a need of automatic composition, integration, and execution of Web Services. We can achieve this by extending our system to use Semantic Web Services based on RESTfull Web Services. This Semantic web technology will facilitate integration of other systems without ours gaining in that way more information for other sources and therefore more value.

Hacking Social Networks APIs… the MovieIT way

Tolias — Fri, 27 May 2011 05:06:28 +0000

Javascript based Facebook login OAuth 2.0

One of the positive features of OAuth 2.0 is that the OAuth dance occurs only by using HTTP GET method. This code resides in the Auth.htm page. The if structure checks the browser URL to identify the current step and move to the next one. The first step is to access the https://www.facebook.com/dialog/oauth by providing the application id, the redirection URI and the response type (which in our case is of type token). In our case we set the redirection address to again to the Auth.htm file. After the successful redirection from the Facebook page the script makes again a HTTP GET request to the same endpoint by providing the application ID, redirect URL, the response type and the resources that this application will have access to. If everything goes well then Facebook redirects the browser to back to the Auth.htm page by providing a code parameter. The final part of the script extracts this information for the url and passes it to our servlet in order to provide a customized to the user homepage (e.g. his profile image etc.).

01 var appId = "*********************";
02  var AppSecret = "****";
03  if (window.location.hash == "") {
04  if (window.location.search == 0) {
05  url = "https://www.facebook.com/dialog/oauth?client_id=" + appId + "&redirect_uri=" + 
06  window.location + "&response_type=token";
07  window.location = url;
08  } else {
09  var codeURL = window.location.search;
10  var codeURLSubString = codeURL.substring(6, codeURL.length);
11  var appAuth = "https://graph.facebook.com/oauth/access_token?client_id=" + 
12  appId + "&redirect_uri=" + "http://" +
13  window.location.host + window.location.pathname + "&client_secret=" + 
14  AppSecret + "&code=" + codeURLSubString;
15  window.location = "http://kanga-et2e10.ecs.soton.ac.uk:8080/Testing_servlets/Auth?oauth=" +
16  encodeURIComponent(appAuth);
17  }
18  } else {
19  if (window.location.hash.substring(1).indexOf("access_token") === 0) {
20  
21  graphUrl = "https://www.facebook.com/dialog/oauth?client_id=" + appId + "&redirect_uri=" + "http://" + 
22  window.location.host + window.location.pathname + 
23  "&scope=email,read_stream,publish_stream,user_checkins,"+
24  "friends_checkins,publish_checkins,offline_access,user_photos,"+
25  "user_birthday,user_online_presence,friends_online_presence";
26  window.location = graphUrl;
27  }
28  }
29  function displayUser(user) {

30 userName.innerText = user.name + " " + user.id;31 }

Java2htm

Check in on Facebook

The following code snippet is a Java Servlet code that uses an HTTP GET method to access the https://graph.facebook.com/me/checkins endpoint. For the successful invocation we must provide a message, an access_token, the placeID of the place where the movie was watched, the friends ids they are also watching the movie and the coordinates of the check in place. Another important part on this code is the multipart/form-data mime type. This is the only content type supported by Facebook. Finally the DataOutputStream and the InputStream handles the HTTP request and response respectively.

01  String urlParameters="access_token="+access_token.replace("\n", "")+
02  "&"+"message="+"I saw the \""+mov.get("original_name")+"\" movie "+
03  mov.get("trailer")+"&place="+pid+"&tags="+
04  friendsStr+"&coordinates={\"latitude\":\" "+latitude+"\", \"longitude\": \""+longitude+"\"}";
05  //Create connection
06  url = new URL("https://graph.facebook.com/me/checkins");
07  connection = (HttpURLConnection)url.openConnection();
08  connection.setRequestMethod("POST");
09  connection.setRequestProperty("Content-Type","multipart/form-data");
10  connection.setRequestProperty("Content-Length", "" + 
11  Integer.toString(urlParameters.getBytes().length));
12  connection.setRequestProperty("Content-Language", "en-US"); 
13  connection.setUseCaches (false);
14  connection.setDoInput(true);
15  connection.setDoOutput(true);
16  
17  //Send request
18  DataOutputStream wr = new DataOutputStream (connection.getOutputStream ());
19  wr.writeBytes (urlParameters);
20  wr.flush ();
21  wr.close ();
22  
23  //Get Response 
24  InputStream is = connection.getInputStream();
25  BufferedReader rd = new BufferedReader(new InputStreamReader(is));
26  String line;
27  String responseCheckin=""; 
28  while((line = rd.readLine()) != null) {
29  responseCheckin+=line+ "\r";

30 }31 rd.close();

Java2html

Check in on twitter

Twitter integrates the check in functionality on twitters (it is not a separate task like facebook). This means that the only we have to do is to make a post and provide in addition the geolocation information. In the figure below is the Java servlet code that does exactly that by employing the Scribe-Java library.

01 private String updateStatusOnTwitter(String accessTokena, String accessTokenb,
02  String message, String lat, String lon )throws MalformedURLException, IOException{


03  //========================post code==================================
04  String PROTECTED_RESOURCE_URL = "http://api.twitter.com/1/statuses/update.json"; 
05  OAuthService service = new ServiceBuilder()
06  .provider(TwitterApi.class)
07  
08  .apiKey("***********************")
09  .apiSecret("*****************************")
10  .build();
11  Token accessToken = new Token(accessTokena,accessTokenb);
12  System.out.println("Got the Access Token!");
13  System.out.println();
14  
15  // Now let's go and ask for a protected resource!
16  System.out.println("Now we're going to access a protected resource...");
17  OAuthRequest request = new OAuthRequest(Verb.POST, PROTECTED_RESOURCE_URL);
18  request.addBodyParameter("status", message);
19  request.addBodyParameter("lat", lat);
20  request.addBodyParameter("long", lon);
21  
22  service.signRequest(accessToken, request);
23  Response response = request.send();
24  return response.getBody();

2526 }

Java2html

The MovieIT system in UML (updated)

Tolias — Fri, 27 May 2011 00:59:47 +0000

Use case diagram

Login

The system requires the Facebook authentication of the user in order to function. For this reason when the user accesses the page is redirected to Facebook web page to provide his/her credentials and then, is redirected back to the main page of the application. The authentication “dance” between the client and Facebook is shown in the following image.

Check In

In the check in use case the user selects the place he wants to check in, the movie he watched and the friends he watched the movie with. The system finds the trailer of the movie selected and posts the check in information both to Facebook and Twitter.

Sequence diagram for the check in use case

Comment and rate

The user selects the rate button and chooses the movie he wants to comment and rate. The system collect the information provided by the user and stores it into the database then the system updates the users Facebook and Twitter status.

Rate and comment use case diagram

Suggest a movie

The user presses the suggest button. The system gets from the database the movies watched by the user and provides them for selection to the user. The user then selects the movie he/she wants to suggest and then selects the one of his social friends he want to suggest the movie to. The system finds the social network that the firend(s) belong to and sends a post accordingly.

Suggest a movie to a friend sequence diagram

Get suggestions

The user presses the get recommendation button. The system uses the recommendation algorithm and returns 5 movies with the highest score.

Get movie recommendation sequence diagram

Class diagram

Our system consists of 3 main packages. The FacebookLib handles the communication with Facebook, the TwitterLib handles the communication with Twitter and the MoviesLib package where the main functionality is provided. The Movies package consist of 2 main classes the MySQLAccess class for handling the communication with the database and the MovieIT class that acts as a controller handling the communication between the different software components.

The MovieIT system class diagram

MovieIt Usability Evaluation

Kristina Koysina — Thu, 26 May 2011 23:11:15 +0000

Last advances in mobile technologies and rapid spread of 3G networks engaged handsets with the Web bringing an instance access to online resources from any place and at any time. However, facilities of mobile devices are not equal to PC (lower screen resolution, performance issues, diversity in geometry of the display and buttons arrangement, etc.) what significantly spoils the user experience. Thus, building a web-based app we need to keep in mind this specific and follow usability rules. In this post we will examine MovieIt in terms of its usability comparing core system characteristics with mobile usability check lists.

* For usability evaluation of our system we used “A Usability Checklist for the Usability Evaluation of Mobile Phone User Interface” proposed by Yong Gu Ji, Jun Ho Park, Cheol Lee and Myung Hwan Yun.

Criteria	MovieIt
Content Mobile users should not be overwhelmed with the content, thus, web site has to provide just necessary information
Layout The user interface must be organized purposefully, in meaningful and useful ways that put related things together and separate unrelated things based on clear, consistent models that are apparent and recognizable to others
Buttons, input fields and other form elements Form elements should show the focus on the selection and have to be easily accessible by keyboard, accessibility tools and other input methods
Consistency The user interface must be designed consistently
Visibility The user interface should always keep users informed about what is going on, through appropriate feedback within reasonable time
Simplicity Make simple, common tasks simple to do, communicate simply in the user’s own language and provide good shortcuts that are meaningfully related to longer procedures
Interaction support feedback The user interface must keep users informed of actions or interpretations, changes of state or condition using clear, concise, and unambiguous language familiar to users
Error indication The representation of errors must be clear to users
Responsiveness The system must respond in an appropriate time
Customizability The user must be able to modify the interface in order to improve efficiency. The customizing features must be easily accessible
Effort The user interface should be designed to minimize the user’s effort for using the system
Flexibility The user interface must be flexible so that adapts to various environments and users

Additional testing

One of the major problems of User Interface for mobile phones is a diversity of screen resolutions and display geometry. Another serious issue is incompatibility of web technologies with mobile platforms and browsers (for example, not all mobile browsers support cookies). In order to ensure that MovieIT system works properly on the most common handsets we ran a set of tests using simulators for following devices: iPhone 3G, iPhone 4, iPad, Blackberry Playbook, Blackberry Tourch, Blackberry Bold 97200, Samsung H1 (touch), HTC Android, Nokia N8 and Nokia 97/5800 (touch). Some screenshots of tested simulators provided below.

Blackberry Bold

Blackberry Touch

Blackberry Playbook

iPhone

HTC Android

Testing results

Simulations revealed that MovieIt system is compatible with all major mobile platforms. Moreover, user interface is displayed properly on all tested devices.

Conclusion

Overall, system has shown itself successfully in the majority of usability evaluation activities. However, there are some drawback as a lack of customization, insufficient feedback in the case of the wrong input and performance issues.

MovieIt Demo Video

Kristina Koysina — Thu, 26 May 2011 21:27:18 +0000

Working Demo link!

Tolias — Fri, 20 May 2011 16:56:34 +0000

kanga-et2e10.ecs.soton.ac.uk/Movies/Auth.htm (Accessible only from ECS)

MovieIt and Legal Aspects

Kristina Koysina — Tue, 17 May 2011 22:31:22 +0000

The Web 2.0 content can be categorized as a user generated content (UGC) where anyone can say anything about anything. This decentralization of information publishing boosted even more intensive spread of WWW and attracted huge amount of people that generate millions of pages, records, images, videos and other multimedia content every day. Along with obvious advantages (diverse and rich content, availability of discussion platforms, etc.) social Web exposed some serious legal issues related to copyright infringements or publishing of false and detractive information about facts, individuals or legal entities. However, it would not be true to say that legal issues in the Web appeared with the movement to UGC model. Plagiarism and libel existed long before WWW invention but due to the decentralized nature of the Web 2.0 and a huge amount of generated content they became less controllable and, thus, more common. Another issue with a social content is that the majority of users does not consider online publishing as something serious and feel less responsible for the exposed web content. For example, the survey held by YouGov in 2008 revealed that “three quarters of Internet users who comment online realize they could be breaking the libel law”.

Considering what legal issues can be exposed by our application we should take into account that the “MovieIt” allows users to publish reviews on movies and leave comments about cinemas. Below we listed possible legal problems:

Accessibility problems (According to the UK Equality Act (2010) inaccessible web content is against the law);
Copyright infringement (in case if user leaves a review on movie or cinema that was copied from another resource);
Libel (in case if user writes wittingly false information about cinemas or movies);

Risks for the CyberTube team

The law can consider application owner as a publisher or editor of the illegal content;
The owner of an application can be accused in inaccessible content;

If you edit or run a group of community, even if you’re not responsible for the hosting of content (such as Flickr group), then choosing not to exercise control and ignoring requests to remove defamatory or illegal content would not be a defence to any claims brought against you.

Danvers Baillieu
Associate at Winston Straws

Possible solutions

Accessibility

Use of Accessibility guidelines (WCAG) and specifications (WAI-ARIA) during the design process;
Test application accessibility using automated tools (W3C HTML and CSS Checkers) and guides (IBM guideline, Section 508);
Test application accessibility against focus group of people with different sorts of disabilities;

Copyright Infringement and Libel

Have a clear complaint policy and procedure;
Remove any material that provokes a complaint upon the request;
Provide “terms and conditions of use” guidelines that state clearly what content can be considered as a plagiarism or libel and ensure that the user was acquainted with a material;
Monitor the content;

As it can be seen there are different ways to protect users and owners of the application from being sued for inappropriate content starting from removal of provocative materials and content monitoring and ending with more mild actions as make the user aware about his/her responsibilities and possible consequences. Considering what way is more preferable for our application we should find an optimal solution that will minimize risks and make users comfortable with our system at the same time (e.g. system should not impede free sharing of opinions and views). We are strongly perceived that a good user experience is one of the key features of our system, thus, we prefer to make users aware about their responsibilities and we exclude an opportunity of content monitoring. However, we leave the right to remove materials that provoke a compliant.

Materials used

1. Presentation on “Is your social media marketing breaking the law?” prepared by Dom Sparkes, MD.
2. Robert P. Latham, Jeremy T. Brown and Carl C. Butzer, “Legal Implications of User Generated Content: YouTube, MySpace, Facebook”.

It’s all about data!

Hamid — Thu, 12 May 2011 21:53:25 +0000

Database managment is an important of the aspects of the MovieIt project. The following diagram displays the structure of our relational database, along with the conenctions between them.

MovieIt and Economic Aspects

foroogh — Mon, 09 May 2011 16:17:48 +0000

By increase in the amount of movies offered through the web, people require a mean to find and evaluate these many alternatives. Recommender systems are a solution to this problem. Actually, recommendation systems are emerging as an important business application with significant economic impact. Movie recommendation systems such as Netflix or our proposed system (MovieIt) recommend movies to users. In fact, recommender systems help consumers, to find out about new products, and this increases sales diversity. Providing these kinds of systems is an incentive for movie companies, because it can help them increase profits.

Some believe that the likelihood of purchasing a recommended product depends on the information provided, context and familiarity. In MovieIt recommender system, people receive recommendations from their Facebook friends. In other word, it is more likely that the recommendation they get from their friends, matches their taste. On the other hand, with MovieIt people can also rate a movie and write a comment about the movie they have seen. This means, that other than giving recommendation, some other information is also provided about those movies. This makes the process of decision for users much easier. All of this can increase the probability of purchasing a movie or going to the cinema and watching it which causes more profit for the movie company.

These kinds of applications can revolutionise the way we choose products. Furthermore, these types of applications can leverage the power of social interactions and use it for making more informed, more suitable and simply better decisions.