Social Network and Multimedia integrated Mashup Yan Wang

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

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

Introduction n Background to Mashup ¨ Def: n Web page or application n Uses and combines open APIs, data sources, presentation or functionality from two or more sources n to create new services or produce enriched results that were not necessarily the original reason for producing the raw source data. ¨ main characteristics n combination, aggregation and visualization

Introduction n 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. ”

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

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

Introduction n 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.

Core 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

Hang Out Snapshot

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

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

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

Query Rewriter n n Eventful and Upcoming provide different query interfaces; We give unified query interface, but write a corresponding query for each website QUERY Query Rewriter Category Mapping Eventful (27) (16) books sports outdoors recreation fundraisers religion spirituality politics activism science technology Date Mapping Date Preprocessor QUERY 1 today XML Parser 3 8 12 16 This/next weekend QUERY 2 XML Upcoming ID past next 7/14/30/60 days this month this week [month] yyyymmdd 00

Query Rewriter Case 1: n Query: ¨ Location: Boston ¨ Date: this week ¨ Category: education Case 2: n Query: ¨ Location: North tonawanda ¨ Date: this weekend ¨ Category: all n Query 1 (Eventful): ¨ date=this+week ¨ location=boston ¨ category=learning_education n Query 1 (Eventful): ¨ date=2011121000 -2011121100 ¨ location=north+tonawanda n Query 2 (Upcoming): ¨ quick_date=this_week ¨ location=boston ¨ category_id=5 n Query 2 (Upcoming): ¨ quick_date=this_weekend ¨ location=north%20 tonawanda BACK http: //api. eventful. com/rest/events/search? api_key=xxx + query 1 http: //upcoming. yahooapis. com/services/rest/? api_key=xx&method=event. search + query 2

Query Preprocessor n n XML HTTP POST DOM 4 J XML Parser DOM 4 J XML framework main features A plug-in for any parser (SAX or DOM) ¨ Navigation of XML documents with the Java 2 collections framework ¨ Parsing large XML documents with little memory overhead ¨ Schema Matcher conn=new URL(url). open. Connection(); SAXReader sax. Reader=new SAXReader(); Duplication Filter this. document=sax. Reader. read(conn. get. Input. Stream()); this. arraylist=document. select. Nodes("//event");

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 set. Id(String id) { this. id=id; } public String get. Id() { return id; }. . . } . . . BACK

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

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

Duplication Filter n Def: ¨ Two events* are the same, if n n Their Start time are the same, and Similarity score of description is greater than 0. 8. D 1 D 2 idf tf Wt, d 1 tf Wt, d 2 produ ct auto 2. 3 0 0 0 1 2. 3 0. 34 0 best 1. 3 1 1. 3 0. 34 0 1. 3 0 0 car 2. 0 1 2. 0 0. 52 1 2. 0 0. 30 0. 16 insuran ce 3. 0 1 3. 0 0. 78 2 3. 0 0. 91 0. 71 sim(D 1, D 2)= 0+0+ 0. 16+0. 71 =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

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

Google Map API n Initialization Load Google Map API source ¨ Parameters needed to create map: map center, zoom level, map type … ¨ Call ¨ ¨ n Google Map Geocoder (“Buffalo, NY” “ 42. 886, -78. 8786”) 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

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

Twilio Voice Recorder n n 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. twiml visit My PC Recording Public server (PHP) Recording URL twilio server

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

Facebook API n User Login The Facebook Java. Script SDK allows users to register and sign-in to our website (app) using their Facebook accounts. q Authentication & Authorization OAuth 2. 0 (new version) API: FB. login(); scope: {“permissions”} FB. logout(); “connected” “not authorized” FB. get. Login. Status(); “access token” “log out or unknown” Event Handler: FB. Event. subscriber (auth. login, auth. logout, auth. status. Change. . . )

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

Facebook API n Friends Invitation ¨ fb. multi-friends-selector(deprecated ) ¨ Request n 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]’, }, request. Callback); }) request. Callback is a function returning an object in JSON like:

Facebook API n User Events Log ¨ Facebook n n 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 n n 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 n Graph API friends Invite users to an event by issuing an HTTP POST to /invited? user=user 1_ID, user 2_ID…for multiple users.

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

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

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

Evaluation External and internal Quality ISO/IEC 9126 -1: 2001(E) Quality Model effectiveness n n n productivity safety satisfaction maintainability portability 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.

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

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

Conclusions and Future Work n Conclusion ¨ Effectively use two web data source, and integrate geo-mapping, multimedia and social media tightly to achieve our goal. n 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

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