用戶體驗開發基於應用了解遙遠的城市通過旅遊視角

全文

(1)National Taiwan Normal University, Taiwan Department of Computer Science and Information Engineering. Development of User Experiences based Application to Understand Distant Cities Through the Tourism Perspective Thesis Submitted in Partial Fulfillment of the Requirements for the Degree of Master in Computer Science and Information Engineering. Student: Ms. Allishe Archana Vishwanath Advisor: Dr. Yao-Ming Yeh, Professor. Co-advisor: Dr. Chun-Han Lin Assistant Professor. January 2016 1.

(2) Table of Contents. ABSTRACT ..................................................................................................................................05 List of Figures and Tables ...........................................................................................................06 Chapter1: Introduction ...............................................................................................................10 1.1-Research Background ........................................................................................................10 1.2-Research Purpose ...............................................................................................................12 Chapter 2: Technical Components .............................................................................................14 2.1- Graph API .........................................................................................................................14 2.2- ASP.NET ..........................................................................................................................15 2.3- C#.NET .............................................................................................................................16 2.4- HTML5 .............................................................................................................................17 2.5- CSS3 .................................................................................................................................17 2.6- JavaScript..........................................................................................................................18 Chapter 3: User Experiences based Application Design ..........................................................19 3.1- System Overview .......................................................................................................................... 19. 3.1.1- System Block Diagram ............................................................................................19 3.1.2- Steps to Register and Configure Facebook Application ..........................................21 3.2- Social Plugin .....................................................................................................................25 3.2.1- Facebook JavaScript SDK for Social Plugin ...........................................................25 3.2.2- Like Button ..............................................................................................................26 3.2.3- Share Button ............................................................................................................29 3.2.4- Send Message Button ..............................................................................................31 3.2.5- Comment Plugin ......................................................................................................33 3.3- User Experiences ..............................................................................................................35 3.3.1- Algorithm .................................................................................................................35 3.3.2- JSON for User Experiences .....................................................................................37 3.3.3- Graph API ................................................................................................................38 2.

(3) 3.3.3.1- Grant Permissions and Access Token .............................................................38 3.3.3.2- First Graph API Call .......................................................................................40 3.3.3.3- Second Graph API Call...................................................................................41 3.3.3.4- POSTS API Call from Web Page to Get User Experiences ............................42 Chapter 4: Categories and Searches ..........................................................................................45 4.1- Categories ........................................................................................................................45 4.1.1- Attractions Category ................................................................................................45 4.1.2- Food Category .........................................................................................................47 4.1.3- Sports Category .......................................................................................................49 4.1.4- Festivals Category ...................................................................................................51 4.1.5- Night Markets Category ..........................................................................................53 4.2- Query Based Search..........................................................................................................55 4.2.1- Keyword Based Search ............................................................................................55 4.2.1.1 Search User Experiences from Taipei City ......................................................57 4.2.1.2 Search User Experiences from Taichung City .................................................58 4.2.2- Like Based Search ...................................................................................................59 4.3- Multiple Timelines ............................................................................................................61 4.3.1- Pictures Category.....................................................................................................61 4.3.2- Videos Category.......................................................................................................65 4.4- Search and Play YouTube Videos .....................................................................................69 4.5- Google Search...................................................................................................................72 Chapter 5: System Descriptions and Analysis...........................................................................75 5.1- Use Case Diagram ............................................................................................................75 5.2- Activity Diagram ..............................................................................................................76 5.3- Sequence Diagram to Access User Experiences from Facebook .....................................77 5.4- Class Diagram of a Facebook Graph API .........................................................................78 5.5- Class Diagram of a System ...............................................................................................78 5.6- Component Diagram.........................................................................................................79 Chapter 6: Conclusion and Future Work ..................................................................................80 References .....................................................................................................................................82 3.

(4) 抽象社交媒體正在發揮每各行業的重要作用，並在世界各地，包括旅遊觀光。成功的旅遊業在很大程度上取決於使用口碑口碑傳播的意見和建議，以及社交平台如Facebook讓旅客提出意見，並給予意見有關特定城市的特定的東西（如食品，旅遊景點，節日等）。這些意見和建議可以作為信息的其他人誰不知道的那些地方/城市，讓他們了解一個特定的城市/地方提前一個適當的規劃。不過，據我所知，沒有一個系統提供的有關從社交網站的特定城市的個人經驗。考慮到這一點，提出了項目，開發一個網站，可以探索提供有關使用圖形 API（臉譜）和GData的API（YouTube）的城市/地區的社交媒體網絡的信息。在本文中，我們開發了一個系統，它可以讓用戶（一）閱讀其他用戶的所有經驗，從約不同的地方或城市的社會化媒體，（二）閱讀所有評論張貼在網站上（建議，反饋等）（三）閱讀，被自動分類到不同的領域，如食品，旅遊景點，體育，夜市等;（四）利用搜索喜歡的號碼作為查詢任何用戶體驗，（e）所有檢索到的用戶體驗搜查通過使用任何關鍵詞的帖子，（六），見“圖片”類別中的所有張貼在Facebook用戶的圖片，（G）觀賞所有Facebook上的“視頻”類用戶發布的視頻，（H）股/的鏈接後在Facebook上，（我）“ 象”的評論/通過Facebook頁面登錄，（J）發送郵件，通過Facebook的任何朋友，（k）的搜索和播放“的用戶體驗相關視頻”從YouTube，（L）使用谷歌搜索。從Facebook的這種用戶提供的豐富多樣的數據將自動檢索該系統預計將讓用戶了解從不同的角度的城市。. 關鍵詞：社會化媒體，旅遊，臉譜，圖形API，社會經驗。. 4.

(5) ABSTRACT Social media is playing an important role in each and every industry in the world, including travel and tourism. Success in travel and tourism industry depends heavily on the use of word-of-mouth to spread opinions and recommendations, and social platforms such as Facebook allow the traveler to comment and give opinion about a particular thing in particular city (e.g. food, attractions, festivals, etc.). Such comments and opinions can serve as information for others who are unknown to those places/ cities and allow them to understand a particular city/ place in advance for an appropriate planning. However, to my knowledge, none of the system provides the individuals experiences about the particular city from social networking sites. Considering this, the project was proposed to develop a website that can explore the information available on social media networks about the cities/places using Graph API (Facebook) and GData API (YouTube). In this thesis, we developed a system which can allow user to (a) read all the experiences of other users from social media about different places or cities, (b) read all posted comments (suggestions, feedback, etc.) on the website, (c) read all retrieved user experiences which are automatically categorized into different fields such as food, attractions, sports, night markets, etc., (d) search any user experiences using number of likes as a query, (e) search any posts by using any keyword, (f) see all the pictures posted by users on Facebook in “pictures” category, (g) watch all the videos posted by users on Facebook in “video” category, (h) share/ post the link on Facebook, (i) “like” the comments/ pages through the Facebook log-in, (j) send message to any friend through Facebook, (k) search and play “user experiences related videos” from YouTube, (l) use Google search. Such user-contributed rich and diverse data from the Facebook will be retrieved automatically in this system is expected to allow users to know about the cities from different perspectives.. Keywords: Social Media, Tourism, Facebook, Graph API, Social Experiences.. 5.

(6) List of Figures and Tables. List of Figures 1. Figure 1.1 Social media platform by monthly active users 2. Figure 3.1 System block diagram 3. Figure 3.2 Home page of the application 4. Figure 3.3 Facebook’s developers account 5. Figure 3.4 “My apps” navigation to add new app 6. Figure 3.5 Facebook application platform 7. Figure 3.6 (a) name and (b)category for the application 8. Figure 3.7 Application URL setting 9. Figure 3.8 “App dashboard” to find appId and appSecret 10. Figure 3.9 “Settings” and “App Details” to fill other information 11. Figure 3.10(a) “Like button” on the website 12. Figure 3.10(b) Sample Facebook login 13. Figure 3.10(c) Single click to like and add content 14. Figure 3.10(d) Number of people who liked piece of content 15. Figure 3.11(a) “Share button” on the website 16. Figure 3.11(b) Member setting to share content 17. Figure 3.11(c) Privacy setting to share content 18. Figure 3.11(d) “Facebook – Google Chrome” security check 19. Figure 3.11(e) Shared content on Facebook 20. Figure 3.12(a) “Send message button” on the website 21. Figure 3.12(b) “Select friend” dialog to send message 22. Figure 3.12(c) Send message to a specific friend 23. Figure 3.12(d) “Facebook’s inbox” of a specific friend 24. Figure 3.13(a) Comments posted on the website (b) “Add a comment” box 25. Figure 3.13(c) New comment in the “comment box” 26. Figure 3.13(d) “Facebook’s login” dialog box 27. Figure 3.13(e) Latest posted comment 6.

(7) 28. Figure 3.14(a) “Graph Api Explorer” tool 29. Figure 3.14(b) Permission “user_posts” from “User Data Permissions” 30. Figure 3.14(c) Permission “manage_pages” from “Extended Permissions” 31. Figure 3.14(d) Requested access token 32. Figure 3.15(a) “First Graph API” call using “me” special endpoint 33. Figure 3.15(b) JSON reply from the Graph API call 34. Figure 3.16(a) “Second Graph API” call using “Post API” 35. Figure 3.16(b) JSON reply from the Graph API call 36. Figure 3.17(a) User experiences from Facebook timelines 37. Figure 3.17(b) One of the selected link of the user experiences 38. Figure 3.17(c) Details of the selected link 39. Figure 4.1(a) User experiences from the “Attractions” category 40. Figure 4.1(b) Selected link from the “Attractions” category 41. Figure 4.1(c) Details of the selected link 42. Figure 4.2(a) User experiences from the “Food” category 43. Figure 4.2(b) Selected link to view details 44. Figure 4.2(c) Details of the selected link 45. Figure 4.3(a) User experiences from the “Sports” category 46. Figure 4.3(b) Selected link to view details 47. Figure 4.3(c) Details of the selected link 48. Figure 4.4(a) User experiences from the “Festivals” category 49. Figure 4.4(b) One of the selected link from the “Festivals” category 50. Figure 4.4(c) Details of the selected link 51. Figure 4.5(a) User experiences from the “Night Markets” category 52. Figure 4.5(b) One of the selected link from the “Night Markets” category 53. Figure 4.5(c) Details of the selected link 54. Figure 4.6(a) keyword based query box (b) Searched results 55. Figure 4.6(c) Details of the selected link 56. Figure 4.7(a) Searched results from the Taipei city 57. Figure 4.7(b) One of the selected links 58. Figure 4.7(c) Details of the selected link 7.

(8) 59. Figure 4.8(a) Searched results from the Taichung city 60. Figure 4.8(b) One of the selected links 61. Figure 4.8(c) Details of the selected link 62. Figure 4.9(a) Like based query box (b) User experiences with number of like 1 63. Figure 4.10(a) Posted pictures from the developers and friends accounts 64. Figure 4.10(b) One of the selected link of the one of posted pictures (developers account) 65. Figure 4.10(c) Details of the selected link 66. Figure 4.10(d) One of the selected link of the posted pictures (friend account) 67. Figure 4.10(e) Details of the selected link 68. Figure 4.10(f) One of the selected link of the posted pictures (another friend account) 69. Figure 4.10(g) Details of the selected link 70. Figure 4.11(a) Posted videos from the developers and friends accounts 71. Figure 4.11(b) One of the selected link of the posted videos(developers account) 72. Figure 4.11(c) Details of the selected link 73. Figure 4.11(d) One of the selected link of the posted videos (friend account) 74. Figure 4.11(e) Corresponding video of the selected link 75. Figure 4.11(f) One of the selected link of the posted videos(another friend account) 76. Figure 4.11(g) Corresponding video of the selected link 77. Figure 4.12(a) Search box for YouTube videos 78. Figure 4.12(b) YouTube results for “Graph API” keyword 79. Figure 4.12(c) Playing video from the selected link of “Graph API google results” 80. Figure 4.13(a) Google search box 81. Figure 4.13(b) Google results 82. Figure 4.13(c) Corresponding site of the selected link 83. Figure 5.1 Use case diagram 84. Figure 5.2 Activity diagram 85. Figure 5.3 Sequence diagram to access user experiences from Facebook 86. Figure 5.4 Class diagram of a Facebook Graph API 87. Figure 5.5 Class diagram of a system. 8.

(9) List of Tables. 1. Table 2.1 Graph API versions 2. Table 3.1 Browser support for href attributes 3. Table 3.2 Browser support for <li> attributes 4. Table 3.3 Layout settings for “like button” 5. Table 3.4 HTML5 attributes “share button” 6. Table 3.5 HTML5 attributes “send message button” 7. Table 3.6 HTML5 attributes “comment plugin”. 9.

(10) CHAPTER 01 Introduction. 1.1 Research Background “Social media” is a term used to describe the interaction between groups or individuals in which they produce, share, and sometimes exchange ideas over the internet and in virtual communities1. The kinds of Internet services commonly associated with social media (sometimes referred to as “Web 2.0”) include the following: . Blogs. Short for “web log,” a blog is an online journal in which pages are usually displayed in reverse chronological order2. Blogs can be hosted for free on websites such as WordPress, Tumblr and Blogger.. . Wikis. A wiki is “a collective website where any participant is allowed to modify any page or create a new page using his/her Web browser.” One well-known example is Wikipedia, a free online encyclopedia that makes use of wiki technology3.. . Social bookmarking. Social bookmarking sites allow users to organize and share links to websites4. Examples include reddit, StumbleUpon and Digg.. . Social network sites. These have been defined as “web-based services that allow individuals to (1) construct a public or semi-public profile within a bounded system, (2) articulate a list of other users with whom they share a connection, and (3) view and traverse their list of connections and those made by others within the system5.”. . Status-update services. Also known as microblogging services, status-update services such as Twitter allow people to share short updates about people or events and to see updates created by others6.. . Virtual world content. These sites offer game-like virtual environments in which users interact. One example is the imaginary world constructed in Second Life, in which users create avatars (a virtual representation of the user) that interact with others7.. . Media-sharing sites. These sites allow users to post videos or photographs8. Popular examples include YouTube, Pinterest and Instagram.. 10.

(11) These categories overlap to some degree. Twitter, for example, is a social network site as well as a status-update service. Likewise, users of the social network site Facebook can share photographs, and users of the media-sharing site Pinterest can follow other people. Facebook and YouTube According to a Pew Research Center’s recent Internet project surveys9 shown in figure 1.1, among the different types of social media mentioned above, Facebook and YouTube are the most popular social media sites10.Currently there are more than 1 billion users of Facebook and YouTube.. Fig.1.1 Social media platform by monthly active users. Following are some of the reasons that make Facebook and YouTube so popular: Facebook . It works as an RSS reader for news.. . It is required to log in to other websites.. . It can be used to build a professional profile.. . It can be used to share photos easily.. . It offers free video messaging. 11.

(12) . It is an easy way of organizing events.. . Facebook groups are better than bulletin boards.. . It is the easiest method for remembering birthdays.. YouTube . Unlimited number of videos.. . Free to use.. . No registration is required.. . User can upload own videos.. 1.2 Research Purpose As mentioned earlier, Facebook has become increasingly popular for personal and professional use. In particular, there has been a recent explosion in the use of Facebook by the individuals to post (images and videos) and share their travel-related comments, opinions and personal experiences about food, lifestyle, culture, political issues, transportation etc. Such posts and shares can serve as information for others who are unknown to those places/ cities and allow them to understand a particular city in advance11,. 12. . By taking in account potential of such. information, the proposed project aim to develop a system that can retrieve the posts (images and videos) and comments from social media, particularly from Facebook website, about the (a) different foods; (b) cultural activities; (c) attractive places; and (d) fashion trends in a particular city (hereafter, the different foods, cultural activities, attractive place and fashion trends in a particular city will be referred as topics of interest, i.e. TOI) . Currently, there are different systems, such as TV, newspaper, books etc. that can allow the individual to learn and understand the distant / unknown city. However, to my knowledge, none of the system provides the individuals experiences about the particular city from social networking sites1,. 13, 14. . Therefore, it is difficult to view and search the online individuals’. experiences about the city’s TOI. Considering this issue, the project is proposed to develop a website that can explore the information available on social media networks about the cities using Graph API (Facebook) and GData API (YouTube). The website is expected to allow the user to know about the city from different perspectives.. 12.

(13) Using the proposed system, the user can: 1. Read all user experiences about different places or cities. 2. Comment (suggestions, feedback etc.) on the website through Facebook. 3. “Like” the comments/ pages through the Facebook log-in. 4. Share/ post the link on Facebook. 5. See all the pictures posted by other users in “photo” category. 6. Watch all the videos posted by other users in “video” category. 7. Search and play user experiences related videos from YouTube. 8. Search any user experience using number of likes as a query. 9. Search any posts by using any keyword. 10. Use google search service from the website 11. Read all retrieved user experiences from different categories such as food, attractions, sports, festivals etc.. 13.

(14) CHAPTER 02 Technical Components. 2.1 Graph API Graph API is a way to write and retrieve data to and from Facebook15, 16. It is named after the concept “Social Graph”. It is a simple, consistent view of the Facebook social graph, uniformly representing objects in the graph (e.g., people, photos, videos, likes, comments, events, and pages) and the connections between them (e.g., friend relationships, shared content, and photo tags). Authentication required accessing anything that isn’t public, relationships between objects or to access data from an application. Graph API is a low-level HTTP-based API in which we can retrieve data, we can post new stories, retrieve photos, share information and stories and the many other things. It provides facility to create new objects and actions of people using Facebook graph app, and to create new instances of those actions and objects. Graph API is a series of nodes that all connected to each other. In this graph, creating nodes and the connections are very important for posting photos, stories and many other things on user’s timeline. Many Facebook’s iOS, Android, PHP and JavaScript SDKs and the third-party toolkits can be use Graph API for accessing the common actions. But, the Graph API is used to read to and write data into Facebook. Graph API versions Table 2.1 Graph API Versions. 14.

(15) The latest version of graph api is v2.5. We can see all versions of graph api in above table. As mentioned in above table, each version of Graph Api will remain for at least 2 years from release, therefore giving us a solid timeline for how long our app will remain working, and for how long we have to update it to newer versions. We can update our code to call a specific API version in order to get two years of stability for Core APIs. Or we can use migrations to change the behavior of an old API version.. Facebook Graph API OAuth2 OAuth is an authorization framework designed to work with Hypertext Transfer Protocol (HTTP).It is commonly used to log into third party websites using their Facebook. It allows third-party applications to get limited access to a user accounts on HTTP service like Facebook, GitHub, etc. In order to access user data, oauth provides access token. The client (website or any other application) requests for access token. The client then uses the access token to access the protected resources hosted by the resource server. Facebook's Graph API only supports OAuth 2.0. Access Token: Tokens are random strings generated by the authorization server and are issued when the client requests them. It can be requested on the Facebook’s Graph API Explorer’s website: https://developers.facebook.com/tools/explorer Application Registration and Configuration: Before using access token in third party application, we must register and configure Facebook application.. This. can. be. done. on. the. Facebook’s. developer’s. website:. https://developers.facebook.com/. 2.2 ASP.NET ASP.NET is a technology to develop content-rich dynamic and personalized websites. Developing ASP.NET Web applications in the .NET Framework is similar to developing Windows applications. .NET Framework support programming languages like C#, VB.NET, or Jscript.NET and also including third party languages, such as PERL and COBOL. The fundamental component of ASP.NET is the Web Form. A Web Form is a web page that the users 15.

(16) view in the browser. An ASP.NET web application can have one or more Web Forms. A Web Form is a dynamic page that can access server resources. Let’s have a look at the constituents of the ASP.NET application: 1. Web Forms or .aspx pages: Web Forms and .aspx pages provide the UI for the Web application. 2. Code-behind pages: Code-behind pages are associated with Web Forms and contain the server side code for the Web Form. 3. Configuration files: Configuration files are XML files that define the default settings for the Web application and the Web Server. Every Web application has one web.config configuration file and each Web Server has one machine.config file. 4. Global.asax file: Global.asax files contain the needed code for responding to applicationlevel events that are raised by ASP.NET. 5. XML Web service links: XML Web service lines allow the Web application to send and receive the data from an XML Web service. 6. Database connectivity: Database connectivity allows the Web application to transfer the data to and from database sources. 7. Caching: Caching allows the Web application to return Web Forms and data more quickly after the first request.. 2.3 C#.NET C# is a simple, general-purpose, platform-independent, type safe object-oriented programming language. It is specially designed to work with Microsoft's .Net platform for improving productivity in the development of Web applications. Visual C#.NET is used to build a variety of applications that run on the .NET Framework. Here we can say that C# is a part of .NET Framework. Using C# language we can create many applications like Windows client applications, XML Web services, distributed components, client-server applications, database applications, etc. In the proposed system, ASP.NET technology is used for designing the web pages and the C#.NET used in code behind files.. 16.

(17) 2.4 HTML5 HTML is a markup language for creating web pages and other information that can be displayed in a web browser. HTML5 is the next version of Hypertext Markup language (HTML4). It provides some new features. It bought new content-specific elements like article, section, header, footer and nav. header-Defines a header for the document or a section nav- Defines navigation links in the document section-Defines a section in the document article- Defines an article in the document aside- Defines content aside from the page content footer - Defines a footer for the document or a section figure- Specifies self-contained content, like illustrations, diagrams, photos, etc.. 2.5 CSS3 CSS is the Cascading Style Sheet language invented in 1997. It is used for formatting the HTML tags, XHTML elements and even in XML. In other word, we can say that CSS can be used to define look and feel the web pages. CSS properties are easy to use and affect the look and feel of our web pages easily. The CSS specifications are maintained by the World Wide Web Consortium (W3C). CSS3 is the latest version of the CSS.It provides facilities to create rounded borders, add shadow to boxes, and use an image as a border without using a design program, like Photoshop. It has been split into modules”. Some of the new CSS3 modules are: . Selectors. . Box Model. . Backgrounds and Borders. . Image Values and Replaced Content. . Text Effects. . 2D/3D Transformations 17.

(18) . Animations. . Multiple Column Layout. . User Interface. 2.6 JavaScript JavaScript is more popular, platform –independent, widely used scripting language use to make them more interactive. JavaScript was developed by Netscape and Sun Microsystems in 1995. JavaScript can be embedded in HTML and run on the client’s browser. We can embed JavaScript in HTML by using <script>tag that alert browser follow JavaScript code which is written in <script>tag. Or we can put JavaScript file separately as page.js file. And we can use this page.js file on multiple pages. JavaScript can be used for user input validation, page embellishments and special effects, a dynamic content manipulation etc.. 18.

(19) CHAPTER 03 User Experiences based Application Design. 3.1 System Overview The system is expected to allow users to know about the city/country from different perspectives. The system provide functions: 1) automatically retrieve user contributed rich and diverse data, 2) provide Facebook social plugins like user can share content on social media, send message to friend, like any content, comment on website, etc.. 3.1.1- System Block Diagram The system functions are represented by the block diagram shown in figure 3.1. Each block in the block diagram connected by lines which shows the relationships between them. There are three block diagrams inside bock diagram which describes system functions, web server cake recipe and the Facebook and Google server.. Fig.3.1 System block diagram 19.

(20) ASP.NET web technology is used to layout the application. Figure 3.2 shows the home page layout of the application. A home page is the main or start web page of the website. This page also shows different hyperlinks like “About Us” and “Contact Us” page. These pages are designed by using HTML5 and CSS supported by ASP.NET technology. For defining home web page, we used<li> tag which defines a list item. The href attribute in the <li>tag specifies the URL of the page the link goes to. We specified Home.aspx (asp.net page) link to the href attribute. <li><a href="Home.aspx">Home</a></li> “About Us” hyperlink is used to show the introduction of the application. In other words, it reflects the characteristics and the personality of the home page. For defining the about section, we used <li> tag. In the list tag, About.aspx (asp.net page) link specified to the href attribute. <li><a href="About.aspx">About Us</a></li> “Contact us” hyperlink will show the contact information. For defining the contact section, we used <li> tag. In the list tag, ContactUs.aspx (asp.net page) link specified to the href attribute. <li><a href="ContactUs.aspx">Contact Us</a></li>. Browser support for href attributes: Table 3.1: Browser support for href attributes. Browser support for <li> tag: Table 3.2: Browser support for <li> tag. 20.

(21) Fig. 3.2 Home page of the application. 3.1.2- Steps to Register and Configure Facebook Application In order to read and write data to and from Facebook, first we need to register and configure the Facebook application. For the same, we followed below steps: 1. Use Facebook developers account as below. 21.

(22) https://developers.facebook.com/. Fig. 3.3Facebook’s developers account. 2. Create new Facebook app - choose “My Apps” in the header navigation - select “Add a New App”. Fig. 3.4“My Apps” navigation to add new app. 22.

(23) 3. Choose platform. Fig. 3.5 Facebook application platform. 4. Choose a name for the application - select “Create New Facebook App ID” and choose a category for your app. Fig. 3.6 (a) name (b) category for the application. 23.

(24) 5.. Set the application URL in the site URL. Fig. 3.7Application URL setting. 6. Application created successfully. Now found appId and appSecret as below:. Fig. 3.8 “App dashboard” to find appId and appSecret. App ID: Every Facebook application will have a unique app ID. You can use this ID whenever you use SDKs. You can find your app ID in our app's dashboard. App Secret: Facebook auto-generates an app secret associated with the Facebook application. The application secret authenticates requests made by our application to Facebook servers and should be treated like a password. 24.

(25) 7. Fill other information under “Settings” and “App Details” of the application such as contact details, namespace site URL, etc.. Fig. 3.9 “Settings” and “App Details” to fill other information. 8. Registration and configuration of Facebook application is completed. Now we can read to and write data from Facebook.. 3.2 Social Plugins Social plugins are the extensions of Facebook and are specifically designed so no user data is shared with the sites on which they appear. Social plugins including the Like Button, Send Message, and Share content – enable developers to provide social experiences to their users with just a few lines of HTML. Like button, share button, comment plugin and send message button are the social plugins used in this application.. 3.2.1- Facebook JavaScript SDK for Social Plugins Facebook SDK for JavaScript provides a rich set of client-side functionality for adding Social Plugins, Facebook Login and Graph API calls. It doesn't have any standalone files that need to be downloaded or installed; instead we simply need to add JavaScript in HTML that will asynchronously load the SDK. Social plugins such as like button to like content or website, share button to share stories or content, etc. can be easily added in the application using the Facebook 25.

(26) SDK. For the same, first we load and initialize the Facebook SDK code for JavaScript after the <body> tag in the HTML code like below:. In the above JavaScript SDK code, we added appId of our own Facebook Application. We found this appId using the App Dashboard.. 3.2.2- Like Button Like button is the quickest way for people to express that they like, enjoy or support certain piece of content. A single click on the Like button will 'like' pieces of content on the web and share them on Facebook with their friends. Figure 3.10(a) shows the like button on website. Figure 3.10(b) shows the sample login dialog to like the content. Figure 3.10(c) shows single click to like content. Figure 3.10(d) shows the number of people who liked the content. To include like button on the application, we used few lines of HTML code: <div class="fb-like" data href="https://140.109.221.54:63690/hom.aspx" data-layout="standard"data-action="like"data-show-faces="true"data-share="true"> </div> 26.

(27) Layout Settings: Table 3.3 Layout Settings for “Like Button”. HTML5 Attributes: Table 3.4 HTML5 Attributes for “Like Button”. 27.

(28) 1 person liked. Fig. 3.10(a) “Like button” on the website. Facebook login box to like page. Fig. 3.10(b) Sample Facebook login. Confirm like after login. Fig. 3.10(c) Single click to like and add content. 2 persons liked. Fig. 3.10(d) Number of people who liked piece of content 28.

(29) 3.2.3- Share Button Share button allow people to add message and share on Facebook, with particular friends or with a group. It provides facility to share content in a privacy settings like public, only me, custom, etc. Alternatively, they can share in a private message. Figures 3.11(a), 3.11(b), 3.11(c), 3.11(d) shows the share button on the website, timeline settings, privacy settings and the shared content on the Facebook. To include share button on the website, we used few lines of HTML code: <div class="fb-share-button" data-href="http://140.109.221.54:63690/hom.aspx" data-layout="button_count" data-colorscheme="light"> </div>. HTML5 Attributes Table 3.5 HTML5 attributes for “share button”. 29.

(30) Fig. 3.11(a) “Share button” on the website. Content and Friends Timeline settings. Fig. 3.11(b) Member setting to share content. Privacy setting. Fig. 3.11(c) Privacy setting to share content. Facebook-Google Chrome Security Check. 30 Fig. 3.11 (d) “Facebook - Google Chrome” security check.

(31) Fig. 3.11(d)“Facebook- Google Chrome” security check. Shared content. Fig. 3.11 (e) Shared content on Facebook. 3.2.4- Send Message Button The Send button used to send content or message privately from our site to one or more friends in a Facebook message, to an email address, or share it with a Facebook group. When we use send message button to send message to a specific friend, the message will go to a specific friend’s inbox. It will work as a private message. On the other hand, when we send message in group, it will work as a posting story or shared content. Figure 3.12(a) shows the send button on the website. Figure 3.12(b) shows select friend from the list of Facebook friends to send message. Figure 3.12(c) shows message to send to a specific friends. Figure 3.12(d) Shows inbox message of the specific friend. To include send message button, we have added few lines of HTML code as below: <div class="fb-send" data-href="https://developers.facebook.com/docs/plugins/"></div>. 31.

(32) HTML5 Attributes Table 3.6 HTML5 Attributes for “Send Message Button”. Fig. 3.12(a)“Send Message” button on the website. Select Recipients Dialog. 32 Fig. 3.12(b) "Select friend” dialog to send message.

(33) Recipients Facebook Inbox. Fig. 3.12(c) "Facebook’s inbox” of a specific friend. 3.2.5- Comment Plugin Comment plugin allows people to comment on our website using their Facebook account. If we wish to we can share this activity to our friends in News Feed as well. It also contains built-in moderation tools and special social relevance ranking. Figures 3.13(a), 3.13(b), 3.13(c), 3.13(d), 3.13(e) and 3.13(f) shows the comments posted on site and how to post new comment on the site. To include comment plugin on website, we used few lines of HTML5 code: <div class="fb-comments" data-href="http://localhost:63690/hom.aspx" data-width="500" data-version="v2.5" data-numposts="5" data-colorscheme="light"> </div> HTML5 Attributes Table 3.7 HTML5 attributes for “comment plugin”. 33.

(34) Posted Comments. Fig. 3.13(a) Comments posted on the website. Fig. 3.13(b) “Add a comment” box. New comment. Fig. 3.13(c) New comment in the “comment box” 34.

(35) Facebook login box to post new comment. Fig. 3.13(d) “Facebook login” dialog box. Latest posted comment. Fig. 3.13(e) Latest posted comment. 3.3 User Experiences This section describes how to retrieve Facebook timeline posts from the Facebook developer’s account as well as friends account who installed the application.. 3.3.1- Algorithm This section describes step by step procedure to retrieve user experiences from Facebook.. 35.

(36) 36.

(37) 3.3.2- JSON for User Experiences Most data returned by Facebook APIS will be in the form of JSON strings. When we make Graph API call to retrieve all user experiences from Facebook timeline from developers and friends accounts, JSON data will be returned from the Facebook’s Graph API. What is JSON? JSON stands for JavaScript Object Notation. It is used to store and exchange data. It is not only easy for humans to read and write but also easy for machines to parse and generate data. JSON is an alternative to XML. JSON is an easier-to-use alternative to XML. JSON is language independent, self-describing and easy to understand. We can access JSON data in a really logical manner. JSON Syntax Rules. 1. Data is written in name/value pairs 2. Data is separated by commas 3. Curly braces hold objects 4. Square brackets hold arrays ([]) Value value objects or arrays may be as follows: 1. Number (integer or floating point) 2. String 3. Boolean function 4. Array 5. Objects 6. NULL JSON Example {"students": [ {"Name”: “Dev", "Score”: “Distinction"}, {"Name”: “John", "Score”: “First class"}, {"Name”: “Anna", "score”: “Second class"}, {"Name":"Peter","Score":"fail"} ]} 37.

(38) In this example, the object "students" is an array containing four objects. Each object is a record of a student with the name and score.. 3.3.3- Graph API Graph API is a primary way to read and write data to and from Facebook. In this section, we are going to describe how to make Graph API calls and how to retrieve user experiences from Facebook using Graph API.. 3.3.3.1- Grant permissions and Access Token To retrieve Facebook Timeline posts from developer’s as well as friend’s accounts, we took some permission such as “user_friends”, “user_posts” and “manage_pages” from the Facebook Administrators. And then we got access token for retrieving user posts and manage pages from Facebook by requesting for the token. Figures 3.14(a), 3.14(b), 3.14(c), 3.14(d) show how to request for permissions and access token.. Fig. 3.14(a) “Graph API Explorer” tool. 38.

(39) Fig.3.14 (b) Permission “user_friends, user_posts” from “User Data Permissions”. Fig. 3.14(c) Permission “manage_pages” from “Extended Permissions” Permissions. Fig. 3.14(d) Requested access token. 39.

(40) 3.3.3.2- First Graph API Call After taking user_posts, manage_pages permissions and access token, we made first Graph API request (read) for reading data from Facebook. In the Graph API Explorer, "GET" method used to read data from Facebook. To read data about user, we use 'me' endpoint. The special endpoint: /me translate to the user ID of the person whose access token is being used to make the request. Figure 3.15(a) shows the first Graph API call using me special endpoint.. Fig. 3.15(a)“First Graph API” call using “me” special endpoint. After pressing the submit button, Facebook data about particular user pulled on page. Figure 3.15(b) shows the JSON reply from the Graph API call.. JSON. data. returned by Facebook Graph API. Fig. 3.15(b) JSON reply from the Graph API call. 40.

(41) 3.3.3.3- Second Graph API Call We made our second Graph API call in the Graph API Explorer debug window using posts API with GET method. Figure 3.16(a) shows the second Graph API call using Post API.. POSTS API call. Fig. 3.16(a) “Second Graph API” call using “Post API”. GET method is used to retrieve data from Facebook insights and “/me” is a special endpoint that translates to the user ID of the person whose access token is being used to make the request. After executing our second Graph API call using feed API with the GET method, Graph API returned JSON output in figure 3.16(b) with the details of the posts.. 41.

(42) “POSTS. API. call”. results in the form of JSON returned by Facebook Graph API. Fig. 3.16(b) JSON reply from the second Graph API call. The above JSON data returned from the Graph API describes as follows: The "data" is an array containing many objects. Each object is a record of a post with the message, created time and id. We successfully made two Graph API call requests in the Graph API Explorer. Now we have to make Graph API calls from the web pages.. 3.3.3.4- POSTS API Call from Web Page to Get User Experiences To retrieve all posts from the Facebook timeline, we made Graph API call using posts API. Graph API returns output in the form of JSON. In order to grab JSON reply on our web pages, we need to download the JSON data on our web pages using WebClient class. Figure 3.17(a) shows all user experiences from the Facebook Timeline. Figure 3.17(b) shows selected link to. 42.

(43) see details of all user experiences from Facebook. Figure 3.17(c) shows details of the selected link of the user experience.. Fig. 3.17(a) User Experiences from Facebook timeline. 43.

(44) Fig. 3.17(b) One of the selected link of the user experiences. Fig. 3.17(c) Details of the selected link. 44.

(45) CHAPTER 04 Categories and Searches. 4.1 Categories The system will automatically retrieve user experiences into different categories like “Attractions”, “Food”, “Sports”, ”Festivals” and “Night Markets”.. 4.1.1- Attractions Category Attractions category automatically retrieve all user experiences related to attractions from the Facebook timeline. Figure 4.1(a) shows all user experiences from the attractions category. Figure 4.1(b) shows one of the selected links of the user experiences. Figure 4.1(c) details of the selected link. In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps:. 1. Check string liststr for “name”, “message” in list1 using Contains () method. If yes, retrieve message values.. 2. Check for the existence of multiple strings like attractions, park, beautiful place, zoo etc. in the message. If one or more strings available in the message, retrieve name, message values.. 3. Check for link of the post. If yes, retrieve string value of link 4. Repeat these steps for each post in the list1 using “foreach statement”.. 45.

(46) Fig. 3.4.1(a) User Experience from the attraction category. Fig. 4.1(a) User experiences from the “Attraction” category. Fig. 4.1(b) Selected link from the “Attraction” category. 46 Fig. 4.1(c) Details of the selected link.

(47) 4.1.2- Food Category This category automatically retrieves all user experiences related to food from the Facebook Timeline. Figure 4.2(a) shows user experiences from the food category. Figure 4.2(b) shows one of the selected links of the user experience. Figure 4.2(c) shows the details of the selected link. In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps: Check string liststr for “name”, “message” in list1 using Contains() method. If yes, retrieve message values. Check for the existence of multiple strings like food, dinner, lunch, delicious, taste etc. in the message. If one or more strings available in the message, retrieve name, message values.. 1. Check for link of the post. If yes, retrieve string value of link 2. Repeat these steps for each post in the list1 using foreach statement.. 47.

(48) Fig. 4.2(a) User experiences from the “Food” category. Fig. 4.2(b) Selected link to view details. 48 Fig. 4.2(c) Details of the selected link.

(49) 4.1.3- Sports Category This category system automatically retrieves all user experiences related to the sports category from the Facebook Timeline. Figure 4.3(a) shows user experiences from the food category. Figure 4.3(b) shows selected link of the user experience. Figure 4.3(c) shows the details of the selected link. In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps:. 1. Check string liststr for “name”, “message” in list1 using Contains () method. If yes, retrieve message values.. 2. Check for the existence of multiple strings like sports and sports related different keywords in the message. If one or more strings available in the message, retrieve name, message values.. 3. Check for link of the post. If yes, retrieve string value of link 4. Repeat these steps for each post in the list1 using foreach statement.. 49.

(50) Fig. 4.3(a) User experiences from the “Sports” category. Fig. 4.3(b) Selected link of the user experiences. Fig. 4.3(c) Details of the selected link 50.

(51) 4.1.4- Festivals Category This category system automatically retrieves all user experiences related to the festivals category from the Facebook Timeline. Figure 4.4(a) shows user experiences from the food category. Figure 4.4(b) shows selected link of the user experience. Figure 4.4(c) shows the details of the selected link. In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps:. 1. Check string liststr for “name”, “message” in list1 using Contains () method. If yes, retrieve message values.. 2. Check for the existence of multiple strings like festivals, events, functions etc. in the message. If one or more strings available in the message, retrieve name, message values.. 3. Check for link of the post. If yes, retrieve string value of link 4. Repeat these steps for each post in the list1 using foreach statement.. 51.

(52) Fig. 4.4 (a) User Experience from the “Festivals” category. Fig. 4.4 (b) Selected link to see details Fig. 4.4 (b) One of the selected link from the festivals category. 52 Fig. 4.4 (c) Details of the selected link.

(53) 4.1.5- Night Markets Category This category system automatically retrieves all user experiences related to the Night markets category from the Facebook Timeline. Figure 4.5(a) shows user experiences from the food category. Figure 4.5(b) shows selected link of the user experience. Figure 4.5(c) shows the details of the selected link. In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps:. 1. Check string liststr for “name”, “message” in list1 using Contains () method. If yes, retrieve message values.. 2. Check for the existence of multiple strings for night markets in the message. If one or more strings available in the message, retrieve name, message values.. 3. Check for link of the post. If yes, retrieve string value of link 4. Repeat these steps for each post in the list1 using foreach statement.. 53.

(54) Fig. 4.5(a) User experience from the “Night Markets” category. Fig. 4.5 (b) One of the selected link from the “Night Markets” category. Fig. 4.5 (c) Details of the selected link. 54.

(55) 4.2 Query Based Search In this section, we can search data by using query. There are two types of query based search: 1) Keyword based search 2) Like based search.. 4.2.1- Keyword Based Search Using the keyword based search, we can search data using any keyword like food, foo, place, sports, festivals etc. If we search user experiences using “food” keyword, then it will check is there any string which starts from food keyword. If yes, then all user experiences containing with “food” keyword will be pulled with the name, message and URL link of the posts. Figure 4.6(a) shows user experiences from the Facebook Timeline. Figure 4.6(b), 4.6(c) shows keyword to search, results from the search keyword. In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps: Check string liststr for “name”, “message” in list1 using Contains () method. If yes, retrieve message values.. 1. Check for the user entered keyword in the message. If yes, retrieve name, message values.. 2. Check for “link” of the post. If yes, retrieve string value of link. 3. Repeat these steps for each post in the list1 using foreach statement.. 55.

(56) Keyword Based Search Box. Fig. 4.6 (a) Keyword based query box. Searching data for “Flying” keyword. Fig. 4.6 (b) Searched results. 56 Fig. 4.6 (c) Details of the selected link.

(57) 4.2.1.1 - Search User Experiences from Taipei City 4.3. Fig.4.7 (a) Searched Results from the Taipei City. Fig.4.7 (b) One of the selected link 57.

(58) Fig. 4.7(c) Details of the selected link. 4.2.1.2 - Search User Experiences from Taichung City The application is not only limited to Taipei city but also It can be useful to search user experiences from other cities. For example, users can search user experiences from the Taichung city. Figure 4.8(a),. 4.8(b), 4.8(c) shows searched results from the Taichung city, one of the selected link and the details of the selected link.. Fig. 4.8(a) Searched results from the Taichung City. 58.

(59) Fig. 4.8(b) One of the selected links. Fig. 4.8(c) Details of the selected link. 4.2.2- Like Based Search Like based search used to search all user experiences based on number of likes. For example, we can search user experiences whose number of likes is 2. Here we used three Facebook accounts, one is developer’s account and other two accounts are the friend’s accounts who installed the. 59.

(60) application. Figure 4.9(a) shows user experiences from the developer’s and friend’s accounts. Figures 4.9(b) User experiences with number of likes are 2. In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps:. 1. Check string liststr for “name”, “message” in list1 and like_count using Contains () method. If yes, handle code to check number of user entered no. of likes available in the list1. If yes, retrieve name, message and link with the user entered no. of likes.. 2. Repeat these steps for each post in the list1 using foreach statement.. Like Based Search Box. Fig. 4.9 (a) “Like based search” box. 60.

(61) Searched data with number of likes 1. Fig. 4.9(b) User experiences with number of like 1. 4.3 Multiple Timelines The section automatically retrieves user experiences in pictures and videos category from Facebook. Here, we showed screenshots from multiple timelines.. 4.3.1- Pictures Category In this category, we implemented a mechanism to automatically retrieve all shared pictures from the developer’s as well as friend’s accounts with name, message and link of the post. Here we used three Facebook accounts (Multiple Timelines), one is developer’s account and other two accounts are the friend’s accounts who installed the application. Figures 4.10(a) shows all posted pictures with name, message and link of the shared posts. Figures 4.10 (b), 4.10 (c) show the selected URL of the posted picture to view details and details of the selected URL of the post (developers account). Figures 4.10(d), 4.10(e), 4.10(f), 4.10(g)show the selected URL of the posted pictures and details of the selected URL of the post (friends account). In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps: 61.

(62) 1. Check string liststr for “name”, “link” in list1 using Contains () method. If yes, check for pictures. Again if yes, retrieve name, message and link with the user entered no. of likes.. 2. Repeat these steps for each post in the list1 using foreach statement.. Fig. 4.10 (a) posted pictures from developers and friends accounts. 62.

(63) Fig. 4.10(b) One of the selected links from the posted picture (developer’s account). Developers account. Fig. 4.10(c) Details of the selected link. 63.

(64) Another link to view details. Fig. 4.10(d) One of the selected links from the posted pictures (friend account). Friend_01 account. Fig. 4.10(e) Details of the selected link of the posted picture. 64.

(65) Another link to view details. Fig. 4.10(f) One of the selected links of the posted pictures (another friend account). Friend_02 Account. Fig. 4.10(g) Details of the selected link. 4.3.2- Videos Category This category automatically retrieves all posted videos from the developer’s as well as friend’s accounts with name, message and link. Here we used three Facebook accounts, one is developer’s account and other two accounts are the friend’s accounts who installed the application. Figures 4.11(a) shows all posted videos with name, message and link of the shared 65.

(66) posts. Figures 4.11(b), 4.11(c) show the selected URL of the posted videos and details of the selected URL of the post (developers account). Figures 4.11(d), 4.11(e), 4.11(f), 4.11(g) show the selected URL of the posted videos and details of the selected URL of the post (friends account). In this section, we followed the entire algorithm defined in the 3.3.1 section except the 14thstep of the algorithm. Instead of the 14thstep of the algorithm we followed below steps: 1. Check string liststr for “name”, “link” in list1 using Contains () method. If yes, check for videos. Again if yes, retrieve name, message and link with the user entered no. of likes.. 3. Repeat these steps for each post in the list1 using foreach statement.. Fig.4.11 (a) Posted videos from the developer’s and friends account. 66.

(67) Fig.4.11 (b) One of the selected link of the posted videos (developer’s account). Developers account. Fig. 4.11(c) Video of the selected link. 67 Fig. 4.9(d) One of the selected links of the posted video (friend account).

(68) Friend account. Fig. 4.11(e) Corresponding video of the selected link. Fig. 4.9(f) One of the selected links of the posted videos (another friend account). Friend account. Fig. 4.11(g) Corresponding video of the selected link. 68.

(69) 4.4 Search and Play YouTube Videos This section describes how to search and play YouTube videos in the system. Figure 4.12(a), 4.12(b) and 4.12(c) shows search box to enter keyword, YouTube results from the related keyword and video from the selected link of the entered keyword. We used following steps to add this feature on website:. 1. The feature needs to communicate with the Google Search API. For the same, we require a third-party DLL to be referenced by our application. So we need to download third –party DLL called “Google Search API” as following:GoogleSearchAPI.dll. 2. Add “GoogleSearchAPI.dll” to the BIN folder of our application 3. Add namespace as “Google.API.Search” in the code-behind file (aspx.cs) 4. Use following controls to layout the feature -. TextBox for keyword. -. Button to search YouTube videos of related keyword. -. Datalist (two Hyperlinks to show the search result title with image and duration of video).. -. AJAX ModalPopupExtender to play selected video in popup panel with an Iframe:. 5. Add JavaScript and CSS code in the head tag for the Popup panel design and popup hide/show. 6. To pass TextBox value in the button click to the Google server follow below steps in the button click event -. create new dataset with an object as below DataSetds. -. create an object of datatable. with columns “Title”, “PlayUrl”, “Url” and. “Duration” DataTabledt (Title, PlayUrl, Url, Duration) -. create an instance of “GvideoSearchClient” class by passing www.Facebook.com as the client because it requires the hosted site for security purpose. GvideoSearchClientGVideo (www.Facebook.com) 69.

(70) -. Create IList Interface by passing textbox value with limit of the results (50). We can decrease or increase the results value as needed. IList<IVideoResult> results GVideo.Search (TextBox1.Text, 50);. 7. Bind all video search results from the “IList” to the data table and then to datalist control. 8. Execute the feature, enter search query and press button to enjoy this feature. AJAX ModalPopupExtender–The AJAX Control Toolkit is a shared source library of ASP.NET controls. ModalPopupExtender is one of the Ajax control. It takes the markup generated by a server-side ASP.NET panel and shows or hides it as the user clicks on particular HTML element. In the application, this control is used to play videos in a popup panel. Overall, User can input the query in the TextBox to search and play the YouTube videos on the web page. Here the application has been enabled to display fifty search results on the web page. To play the video can click on any result.. Fig. 4.12(a) Search box for YouTube videos. 70.

(71) Fig. 4.12(b) YouTube results for “Graph API” keyword. Fig. 4.12(c) Playing Video from the selected link of “Graph API google results” 71.

(72) 4.5 Google Search This section describes how to add Google search feature in the system. Figure 4.13(a), 4.13(b) and 4.13(c) shows search box to enter keyword, Google search results and corresponding site from the selected link. We used following steps to add this feature on website: 1. The feature needs to communicate with the Google Search API. For the same, we require a thirdparty DLL to be referenced by our application. So we need to download third –party DLL called “Google Search API” as :GoogleSearchAPI.dll 2. Add “GoogleSearchAPI.dll” to the BIN folder of our application. 3. Add namespace as “Google.API.Search” in the code-behind file (aspx.cs) 4. Use following controls to layout the feature -. TextBox for keyword. -. Button to search. -. Datalist (one LinkButton is used to show the search result title with link and label to show the search description).. 5. To pass TextBox value in the button click to the Google server follow below steps in the button click event -. create new dataset with an object as below DataSetds. -. create datatable with an object with columns “Title”, “PlayUrl”, “Url” and “Duration” DataTabledt (Title, Content, Url). -. create an instance of “GWebSearchClient” by passing www.Facebook.com as the client because it requires the hosted site for security purpose. GWebSearchClientGWeb (www.Facebook.com). -. Create IList Interface by passing textbox value with limit of the results (50). We can decrease or increase the results value as needed. IList<IWebResult> results GWeb. Search (TextBox1.Text, 50);. 72.

(73) 6. Bind all video search results from the “IList” to the data table and then to datalist control. 7. Execute the feature, enter search query and press button to enjoy this feature. Fig. 4.13(a) Google search box. Fig. 4.13 (b) Google results. 73.

(74) Fig. 4.11(b) Google search results. Fig. 4.13(c) Corresponding site of the selected link. 74.

(75) CHAPTER 05 System Description and Analysis. The Unified Modeling Language (UML) is a general-purpose, standardized modeling language which provides developers a standard way to specify, visualize the design of a system. There are several types of UML diagrams. From those, the most useful diagrams are: use case diagram, sequence diagram, activity diagram, component diagram and class diagram.. 5.1 Use Case Diagram The diagram represents the events of a system and their flows as shown in figure 5.1.. Fig. 5.1 Use case diagram When we look into the diagram, we will find number of use cases, system boundary and two 75.

(76) actors called as USER and ADMIN. Use cases (User Experiences, Categories, Query based search, etc.) define system functionalities. Actors define something that interacts with the system. These actors’ lies outside the system as these are an external users of the system. As defined in following figure, we can see <<communicates>>, <<uses>> and <<include>> relationships between (a) actors and use cases; and (b) use cases and use cases.. 5.2 Activity Diagram Activity diagram is a flow chart to represent the activity flow of the system shown in figure 5.2.. Fig. 5.2 Activity diagram. 76.

(77) 5.3 Sequence Diagram Figure 5.3 shows the sequence diagram to access data from Facebook. In order to access User Experiences from Facebook (developers as well as friends) accounts, resource owner ask for permissions and access token and then make Graph API calls.. Fig. 5.3 Sequence Diagram to access data Facebook. 5.4 Class Diagram The diagram describes the attributes and operations of a class and also the constraints imposed on the system. The diagram is used to model the static view of an application. Figure 5.4, 5.5 shows the class diagram of a Facebook Graph API and the class diagram of a system. 77.

(78) Fig.5.4 Class diagram of Facebook Graph API. Fig. 5.5 Class Diagram of a System 78.

(79) 5.5 Component Diagram The diagram represents the physical view of the system as shown in figure 5.6.The diagram shows the files in the application and their relationships.. Fig. 5.6 Component Diagram. 79.

(80) CHAPTER 06 Conclusion and Future Work. We have presented a user experiences based Facebook application to reward real time user experiences, comments and opinions about cities/places from Facebook to all visitors who are unknown to a particular city or country. The system 1) automatically retrieve user contributed rich and diverse data 2) automatically retrieve user experiences into different categories like attractions, festivals, sports, food and night markets 3) provide Facebook social plugins like user can share content on social media, send message to friend, like any content, comment on website etc. 4) provide facility to read data using “query” like “keyword based search” and “like based search” from social media. 5) Provide facility that user can search and play YouTube videos from the application. The system retrieves user experiences from the Facebook (developers and friends accounts who have installed the Facebook application) using Graph API v2.5. The system allows users to know about the city/country from different perspectives. Now-a-days social media is becoming more popular. Most of the people including school, college students, and teachers are using social media sites like Facebook, Twitter, etc. Every day they share/post millions of images, videos of daily life in cities. Further comments and discussions about the images and videos reflect different perspectives and opinions, which can enhance the impressions about the cities. As compared to the traditional sources (books, newspaper, TV, friends, etc.), social media can bring the possibility of observing and understanding the unknown city. So the project expect that the user contributed rich and diverse data from social media can bring the revolutionary change to better understand distant cities through the tourism perspective. Two users who are currently using the application reported that the system was useful for them: 1) to read user contributed real time experiences/discussion/opinions 2) to know some interesting places and things in cities they were unaware previously. For example, the famous “Makkies Saturday night market” in Goa, India. The ultimate goal of this system is to provide user contributed rich and diverse data from Facebook to allow visitors to know cities/places from different perspective. Therefore, in the 80.

(81) future we plan to add more functions to the system such as: (1) currently the system retrieves the user experiences only from developers and friends accounts. However, this might be not enough in some cases, therefore in the future the system will be updated to retrieve more user experiences, e.g. experiences from friends_of_friends accounts, (2) incorporation text-based chat module facility, (3) automatically retrieve events from Facebook Timelines, e.g. developer’s, friends, friends_of_friends accounts (4) to give the professional touch to the system.. 81.

(82) REFERENCES. 1. John Fotis, Dimitrios Buhalis, Nicos Rossides. “Social media use and impact during the holiday travel planning process”. Proceedings of the International Conference in Helsingborg, Sweden, January 2012, 25–27. 2. Blood, Rebecca. "Weblogs: A History And Perspective". Rebecca’s Pocket, 2000. (http://www.rebeccablood.net/essays/weblog_history.html) 3. Cunningham, Ward. “What is a Wiki?” Wikipedia. (http://www.wiki.org/wiki.cgi?WhatIsWiki) 4. Noll, Michael G, Meinel, Christoph. "Web Search Personalization via Social Bookmarking and Tagging". Lecture Notes in Computer Science 4825: 2007, 367–380. 5. Buettner, R. “Getting a Job via Career-oriented Social Networking Sites: The Weakness of Ties”. 49th Annual Hawaii International Conference on System Sciences. Kauai, Hawaii: IEEE,2015 6. Kaplan Andreas M., Haenlein Michael. "The early bird catches the news: Nine things you should know about micro-blogging”. Business Horizons, 2011, 54(2). 7.. Bartle, Richard . “Designing Virtual Worlds”. New Riders, 2015.. 8. “What is a media sharing site?” Affilorama (http://www.affilorama.com/internet101/mediasharing) 9. “Social media update 2014”. Pew Research Center (http://www.pewinternet.org/2015/01/09/social-media-update-2014/) 10. Irena Pletikosa Cvijikj, Florian Michahelles. “Monitoring Trends on Facebook”. Ninth IEEE International Conference on Dependable, 2011, Autonomic and Secure Computing. 11. Andreas M. Kaplan, Michael Haenlein. “Users of the world, unite! The challenges and opportunities of social media”. Business Horizons, 2010, Volume 53, Issue 1. 82.

(83) 12. “IBM Grand Challenge 2014: New York City 360”. IBM (http://researcher.watson.ibm.com/researcher/view_group_subpage.php?id=5290). 13. KhairulHilmi A Manap. “The Role of User Generated Content (UGC) in Social Media for Tourism Sector”. The 2013 WEI International Academic Conference Proceedings in Istanbul, Turkey. 14. Zheng Xiang, Ulrike Gretzel. “Role of social media in online travel information search”. Tourism Management, 2010,Volume 31, Issue 2. 15. “Graph API”. Facebook for developers. (https://developers.facebook.com/docs/graphapi) 16. “A Guided Tour of the Graph API Preview’s Graph Explorer Application”. Oakleaf Systems (http://oakleafblog.blogspot.tw/2012/07/guided-tour-of-graph-api-previews-graph.html). 83.

(84)

用戶體驗開發基於應用 了解遙遠的城市通過旅遊視角

用戶體驗開發基於應用了解遙遠的城市通過旅遊視角