1. Social Network and Multimedia integrated Mashup
Yan Wang, Jinyue Liu, Yaqin Yang

2. Outline Introduction System Architecture and Methodology
Experiment (demo)
Evaluation
Limitations and Caveats
Conclusions and Future Work

3. Introduction Background to Mashup Def: main characteristics
Web page or application
Uses and combines open APIs, data sources, presentation or functionality from two or more sources
to create new services or produce enriched results that were not necessarily the original reason for producing the raw source data.
main characteristics
combination, aggregation and visualization
Mashup is a new application development approach allowing users to aggregate multiple services in order to establish one service for some specialized purpose. The main characteristics of the mashup are combination, visualization, and aggregation. Because our team intends to do something about application, mashup is more appropriate than other projects. For its flexibility, we may probably figure out some innovative idea about the project, and then utilize a variety of service to implement that. The mashup approach has been proved to open new and broad opportunities for data/services consumers. Besides, because the size of out team is 3, we are supposed to do something considerable. In fact, a mashup user needs to know, in addition to how to write code using programming languages, how to use the different Web APIs, which is kind of a big challenge to us.

4. Introduction Relevant Mashup Application
“Visualization of popular art and design events New York built with the Art Beat API.”
“A geo-located presentation of top local news around a place. ”

5. Introduction Relevant Application
Iphone app: “Discover and hangout with your friends and their friends on Facebook nearby” have to create events info by users themselves

6. Introduction Motivation
above mashups only allow users read those events information; some may allow users to post comments
Facebook ”like”;
google+ “+1”
When they find some interesting events on the web, could user invite friends to hangout by just clicking one button?

7. Introduction Project Definition A mashup, that
search events at least by location, date, category and keyword;
display geo-location of events in Map;
login in with Facebook account;
Invite Facebook friends to join particular event by click one button;
also send user’s voice message to friends at the same time.

8. Core Functionality Functionality Techniques and APIs
Data Process and Management
Upcoming, Eventful REST API
Geo-mapping integration
Google Map API
User login
Friends Invitation with Video Msg
Facebook API, Twilio API
User Interface
JS, JSP, JQuery, CSS, PHP

9. Hang Out Snapshot

10. Domain Description
Event information contributed by the user community and commercial sources.
Users can search for events by time, location, performer, and descriptive keyword.

11. Outline Introduction System Architecture and Methodology
Experiment (demo)
Evaluation
Limitations and Caveats
Conclusions and Future Work

12. Data Process and Management
Data Processor
Data
Query Rewriter
HTTP POST
Data Preprocessor
XML
Schema Matcher
DB: Event
Duplication Filter
Requestor
Next Functionality 

13. Query Rewriter
Category Mapping
Eventful and Upcoming provide different query interfaces;
We give unified query interface, but write a corresponding query for each website
Eventful (27) Upcoming ID (16)
books 3
sports 8
outdoors recreation
fundraisers 12
religion spirituality
politics activism
science 16
technology
QUERY
Query Rewriter
Date Mapping
For convenience, we just predefine the date, in fact it could support the date format of “date mapping”
Date Preprocessor
This/next weekend
next 7/14/30/60 days
QUERY 1
QUERY 2
today
this month
XML
XML
past
this week
yyyymmdd00-yyyymmdd00
XML Parser
[month]

14. Query Rewriter Case 1: Query: Location: Boston Date: this week
Category: education
Query 1 (Eventful):
date=this+week
location=boston
category=learning_education
Query 2 (Upcoming):
quick_date=this_week
category_id=5
Case 2:
Query:
Location: North tonawanda
Date: this weekend
Category: all
Query 1 (Eventful):
date=
location=north+tonawanda
Query 2 (Upcoming):
quick_date=this_weekend
location=north%20tonawanda
BACK
api_key=xxx + query1
+ query2

15. Query Preprocessor DOM4J XML framework main features
A plug-in for any parser (SAX or DOM)
Navigation of XML documents with the Java2 collections framework
Parsing large XML documents with little memory overhead
XML
HTTP POST
DOM4J
XML Parser
Schema Matcher
conn=new URL(url).openConnection();
SAXReader saxReader=new SAXReader();
this.document=saxReader.read(conn.getInputStream());
this.arraylist=document.selectNodes("//event");
Duplication Filter

16. How to store data in memory
Sample XML from eventful:
public class Event {
String id,name,description;
String start_date,end_date;
String start_time,end_time;
String latitude,longitude;
String venue_name,...
public void setId(String id) { this.id=id; }
public String getId() { return id; }
... }
Event has has numerous attributes corresponding to those
in XML,
The XML document returned by website has:
event id, event name, event description, longitude, latitude and so forth.
is saved in a class called “Event”.
BACK
...

17. Schema Matcher Upcoming (xml)
<event event_id =“011” start_date=“ ” start_time=“12:00:00” event_name=“book” ...>
XML
HTTP POST
DOM
Eventful (xml)
XML Parser
<event id =“011”
<title>film</title>
<start_time> :30:00</start_time>
...
</event>
Schema Matcher
Events (database) ID
name
start_date
start_time ..
u011
book
12:00:00
...
e011
Film
18:30:00
Duplication Filter
BACK

18. Duplication Filter Def:
Cosine similarity is a measure of similarity between two vectors by measuring the cosine of the angle between them.

19. Duplication Filter Def: Two events* are the same, if
Their Start time are the same, and
Similarity score of description is greater than 0.8. D1 D2
idf tf
Wt,d1
Wt,d2
product
auto
2.3 1
0.34
best
1.3
car
2.0
0.52
0.30
0.16
insurance
3.0
0.78 2
0.91
0.71
sim(D1,D2)= =0.87
*here assume duplications occur only when merge different data sources; so we only calculate the score of two events which come from different data source
BACK

20. Geo-mapping integration
Google Map
Tools:
Google Map JavaScript API Version 3, HTML5, JSP
Steps:
Initialize new map with local address;
After user pressed button for search, fetch events’ positions and names from DB;
Add marker overlayer with event names.
Now Google Map displayed with geo-location info of all the retrieved events!!
Next Functionality 

21. Google Map API Initialization Marker Overlayer Just add
Load Google Map API source
Parameters needed to create map: map center, zoom level, map type …
Call
Google Map Geocoder (“Buffalo, NY” “42.886, ”)
Marker Overlayer
Markers identify locations on the map. Default Icon:
Fields set when constructing markers:
position (always use Geocoder), map, title
Animation for marker:
Just add
or call
BACK

22. Friends Invitation with Video Msg
Facebook User login
getLoginStatus
Not login
Already login
User Login
Show User Name & photo
Press ”Invite Friends”
Invite Friends with video message
Event DB
Twilio Voice recorder
eventID
Event Info
Facebook Friends Invitation
Send event app request
Friend 1 | Friend 2 | Friend 3 | ...

23. Twilio Voice Recorder
API + markup language = scalable, reliable and advanced voice communications applications.
Used to record the voice by our mic, save it in the cloud, and retrieve the URL of the recording in the project.
Public server
(PHP)
twilio server
My PC
visit
twiml
Recording URL
Recording

24. How it works TwiML(Twilio Markup XML) is similar to HTML.
One can use the TwiML to
make the twilio server say text to the guest;
play audio files;
get input from the keypad;
record audio and so forth.
BACK

25. Facebook API User Login Authentication & Authorization
The Facebook JavaScript SDK allows users to register and sign-in to our website (app) using their Facebook accounts.
Authentication & Authorization
OAuth 2.0 (new version)
API: FB.login(); scope: {“permissions”} “access token”
FB.logout();
FB.getLoginStatus();
Event Handler:
FB.Event.subscriber (auth.login, auth.logout, auth.statusChange...)
“connected”
“not authorized”
“log out or unknown”

26. Facebook API The HTTP calls made through the server-side flow
User authentication
App authorization
App authentication
The HTTP calls made through the server-side flow
(from Facebook developer)
BACK

27. Facebook API Friends Invitation Request Dialogue:
fb.multi-friends-selector(deprecated )
Request Dialogue (new)
Request Dialogue:
Send a request from one user (sender) to one or more other users (recipients).
FB.ui({ method: 'apprequests',
message: ‘[your word]’, },
requestCallback); })
requestCallback is a function returning an object in JSON like:

28. Facebook API User Events Log Facebook Graph API Create an event
Presents a simple, consistent view of the Facebook social graph, representing objects in the graph and the connections between them.
API: FB.api(‘path’, ‘method’, {params}, function(response));
Create an event
Post on user’s wall by issuing an HTTP POST request to EVENT_ID/feed with permissions(user’s ID and access token).
Attributes(name, location, time…) of event can be obtained in Database.
Invite friends
Invite users to an event by issuing an HTTP POST to /invited?user=user1_ID,user2_ID…for multiple users.

29. Outline Introduction System Architecture and Methodology
Experiment (demo)
Evaluation
Limitations and Caveats
Conclusions and Future Work

30. Experiment (Demo) Software tools: Influence factors:
IDE: MyEclipse/Eclipse, Netbeans
Server: Tomcat(JSP), Apache(PHP)
Parser: DOM4J XML Parser
API: Upcomings, Eventful, Google Map, Twilio, Facebook.
OS and Databse: Windows 7/xp, MySQL
Influence factors:
Content of search results
past events cannot be used for friend-invitation.
Run-time
depends on network, amount of XML data (need time to parse and store).

31. Outline Introduction System Architecture and Methodology
Experiment (demo)
Evaluation
Limitations and Caveats
Conclusions and Future Work

32. Evaluation
enable users to achieve specified goals with accuracy and completeness.
time, user’s effort, materials or the financial cost of usage.
acceptable risk of harm to people, business, software, property, environment
satisfy users in use
be modified (corrections, improvements or adaptation of the software to changes in environment, and in requirements and functional specifications).
to be transferred from one environment to another.

33. Outline Introduction System Architecture and Methodology
Experiment (snapshot & demo)
Evaluation
Limitations and Caveats
Conclusions and Future Work

34. Limitations internal: external: limited number of sources
manually schema matching
can not tell spam
Some events posted many time with just a little start time changed
Can not totally filter duplication
external:
unstable Facebook API
Incompatible with IE

35. Conclusions and Future Work
Effectively use two web data source, and integrate geo-mapping, multimedia and social media tightly to achieve our goal.
Future Work
Provide advanced more search conditions
add more data sources
automatically schema matching
improve search time
Algs for filtering spam
User event data management
More work for compatibility with most internet browser after Facebook release stable API

36. By Yan Wang, Jinyue Liu, Yaqin Yang
Thank You !