SlideShare une entreprise Scribd logo
1  sur  116
Télécharger pour lire hors ligne
UNIVERSITY OF SCIENCE
ADVANCED PROGRAM IN COMPUTER SCIENCE
LE MINH QUOC - NGUYEN MINH PHUONG THAO
NEWS WITH RECOMMENDATIONS USING
SENCHA TOUCH FRAMEWORK
BACHELOR OF SCIENCE IN COMPUTER SCIENCE
HO CHI MINH CITY, 2012
UNIVERSITY OF SCIENCE
ADVANCED PROGRAM IN COMPUTER SCIENCE
LE MINH QUOC 0712742
NGUYEN MINH PHUONG THAO 0712746
NEWS WITH RECOMMENDATIONS USING
SENCHA TOUCH FRAMEWORK
BACHELOR OF SCIENCE IN COMPUTER SCIENCE
THESIS ADVISOR
DR. DINH BA TIEN
HO CHI MINH CITY, 2012
i
ACKNOWLEDGMENTS
We would like to dedicate our sincere gratefulness to our advisor, Dr. Dinh Ba Tien,
who has always enthusiastically instructed and encouraged us during our study and
thesis period.
We would like to thank APCS – Advanced Program in Computer Science and
Faculty of Information Technology – University of Science – Vietnam National
University HCM, for providing an outstanding and active environment during whole
student time.
We would like to say thanks to all professors, teaching assistants in APCS and
Faculty of Information Technology who have taught us with all their hearts and
prepared us with treasure knowledge. And we want to give special thanks to
Professor Duong Nguyen Vu, who has always wholeheartedly inspired and motivated
us.
We would like to thank Mr. Ho Tuan Thanh and Mr. Nguyen Le Nguyen Ngu for
helping us during thesis period.
We also send our appreciation to all our friends who had been helping us by
contributing in our reviewing and experimenting processes; and by encouraging,
providing us very useful information and tips regarding our thesis.
We would like to dedicate this achievement to our family who give us greatest
support during the past period.
Although we have tried our best to finish the thesis with highest quality and
performance, it for sure remains some issues. Thus, we would like to receive
feedback from our advisor, professors, teaching assistants, and our friends.
Thank you very much.
Quoc Le – Thao Nguyen
ii
TABLE OF CONTENTS

ACKNOWLEDGMENTS .................................................................................................... i
TABLE OF CONTENTS.................................................................................................... ii
LIST OF FIGURES........................................................................................................... iv
LIST OF TABLES ........................................................................................................... vii
ABSTRACT ................................................................................................................... viii
Chapter 1 Introduction.................................................................................................... 1
1.1 Problem statement ............................................................................................... 1
1.2 Related works...................................................................................................... 2
1.2.1 Baomoi Mobi .........................................................................................................2
1.2.2 Xalo Mobile ...........................................................................................................3
1.2.3 VNExpress Mobile .................................................................................................6
1.2.4 Tuoitre Mobile........................................................................................................7
1.2.5 OhPan news .........................................................................................................10
1.2.6 Amazon store .......................................................................................................11
1.2.7 Gowalla................................................................................................................13
1.3 Objectives ......................................................................................................... 15
Chapter 2 Background.................................................................................................. 17
2.1 Tablet................................................................................................................ 17
2.1.1 Overview..............................................................................................................17
2.1.2 History.................................................................................................................17
2.2 Smartphone....................................................................................................... 19
2.2.1 Overview..............................................................................................................19
2.2.2 iOS ......................................................................................................................21
2.2.3 Android OS..........................................................................................................22
2.3 Location-based services..................................................................................... 24
2.4 Sencha Touch cross-platform framework ........................................................... 26
2.4.1 Introduction..........................................................................................................26
2.4.2 Sencha Touch UI..................................................................................................28
2.5 Recommendation systems.................................................................................. 41
2.5.1 Introduction..........................................................................................................41
2.5.2 User‟s feedbacks...................................................................................................42
2.5.3 Recommendation methods ....................................................................................43
Chapter 3 News website with Recommendations....................................................... 52
3.1 Database ........................................................................................................... 54
3.2 Functionality..................................................................................................... 55
iii
3.2.1 Getting News........................................................................................................55
3.2.2 Register................................................................................................................59
3.2.3 Reading news .......................................................................................................59
3.2.4 “For U” and “Most read in week”..........................................................................60
3.2.5 Additional and location-based services ..................................................................60
3.3 Graphic user interface........................................................................................ 64
3.4 Algorithm ......................................................................................................... 70
3.4.1 Introduction..........................................................................................................70
3.4.2 The concept..........................................................................................................72
3.4.3 The mathematics of matrix factorization ................................................................73
3.4.4 The RNMF algorithm ...........................................................................................76
3.4.5 The pseudo code...................................................................................................77
3.4.6 Our problem.........................................................................................................78
Chapter 4 Experiment ................................................................................................... 80
4.1 Purpose............................................................................................................. 80
4.2 Methods............................................................................................................ 80
4.2.1 Survey..................................................................................................................80
4.2.2 Reading time ........................................................................................................81
4.2.3 Mapping...............................................................................................................81
4.3 Result and analysis ............................................................................................ 84
Chapter 5 Conclusion and Future work....................................................................... 86
5.1 Conclusion........................................................................................................ 86
5.2 Future work....................................................................................................... 86
REFERENCES................................................................................................................ 88
APPENDICES................................................................................................................. 90
A. iOS device specification......................................................................................... 90
B. User guide (in Vietnamese).................................................................................... 96
C. Reading speed ......................................................................................................105
D. Reading time test data...........................................................................................105
iv
LIST OF FIGURES

Figure 1 Baomoi Mobi remarkable news ............................................................................ 2
Figure 2 Baomoi Mobi news details.................................................................................... 3
Figure 3 Xalo Mobile app homepage.................................................................................. 4
Figure 4 Xalo Mobile news ................................................................................................ 5
Figure 5 Xalo Mobile stock news ....................................................................................... 5
Figure 6 VNExpress tablet version ..................................................................................... 6
Figure 7 VNExpress phone version .................................................................................... 7
Figure 8 Tuoitre Mobile on iPad......................................................................................... 8
Figure 9 Tuoitre Mobile news detail on iPhone................................................................... 9
Figure 10 Tuoitre Mobile‟s additional services.................................................................... 9
Figure 11 Tuoitre Mobile Television program..................................................................... 9
Figure 12 Tuoitre Mobile's radio ........................................................................................ 9
Figure 13 OhPan main screen on iPhone........................................................................... 10
Figure 14 OhPan rating feature......................................................................................... 11
Figure 15 Amazon Betterizer............................................................................................ 12
Figure 16 Amazon's recommendation............................................................................... 13
Figure 17 Recommendation base on other shoppers‟ choices............................................. 13
Figure 18 Gowalla on iPad............................................................................................... 14
Figure 19 HP Compaq tablet PC with rotating/removable keyboard................................... 18
Figure 20 Ipad ................................................................................................................. 19
Figure 21 IBM Simon (introduced in 1992) ...................................................................... 20
Figure 22 The Nokia 9210 Communicator........................................................................ 20
Figure 23 iOS 5.0.1 running on an iPhone 4S.................................................................... 22
Figure 24 Home screen of Android OS............................................................................. 23
Figure 25 The basic components of an LBS [8]................................................................. 25
Figure 26 GitHub, one of the best examples for Sencha Touch using, created by
Steffen Hiller ................................................................................................................... 27
Figure 27 Demonstration of some Panel content areas....................................................... 29
Figure 28 Toolbar can be used flexibly ............................................................................. 29
Figure 29 Flip transition to change between cards............................................................. 30
Figure 30 FormPanel's components .................................................................................. 31
Figure 31 FormPanel on iPhone ....................................................................................... 32
v
Figure 32 Difference input widgets base on type of device it is running on ........................ 32
Figure 33 Sheets in portrait mode..................................................................................... 33
Figure 34 Sheets in landscape mode ................................................................................. 33
Figure 35 ActionSheet displayed with buttons................................................................... 34
Figure 36 MessageBox implementation............................................................................ 34
Figure 37 An example of MessageBox ............................................................................. 35
Figure 38 Template for Bus Route DataView.................................................................... 36
Figure 39 Bus Route DataView........................................................................................ 36
Figure 40 An example of List view................................................................................... 37
Figure 41 An example of NestedList view ........................................................................ 37
Figure 42 Getting Geo information is easier and easier...................................................... 38
Figure 43 Google Map in Sencha Touch API.................................................................... 39
Figure 44 An example of playing video on tablet .............................................................. 39
Figure 45 Playing video with a few lines of code .............................................................. 40
Figure 46 Recommender system as a black box ................................................................ 42
Figure 47 Monolithic hybridization design [22] ................................................................ 51
Figure 48 Parallelized hybridization design [22] ............................................................... 51
Figure 49 Pipelined hybridization design [22]................................................................... 51
Figure 50 QTNews interface ............................................................................................ 53
Figure 51 QTNews project structure................................................................................. 53
Figure 52 QTNews database structure............................................................................... 54
Figure 53 VNExpress RSS............................................................................................... 56
Figure 54 Content in each RSS link .................................................................................. 57
Figure 55 Process of getting news and display them on screen........................................... 58
Figure 56 Register and log-in panel .................................................................................. 59
Figure 57 Rating form in news ......................................................................................... 60
Figure 58 Money exchange rate (VND)............................................................................ 61
Figure 59 Weather forecast............................................................................................... 61
Figure 60 Stock service.................................................................................................... 62
Figure 61 Bus route.......................................................................................................... 62
Figure 62 Bus station nearby you...................................................................................... 63
Figure 63 Local Advertisement ........................................................................................ 64
Figure 64 QTNews on iPad with 1. Main toolbar with categories, 2. Main panel, 3.
Suggestion panel, 4. Additional Services, 5. Map and Location-based services. ................. 65
Figure 65 Location base services ...................................................................................... 65
vi
Figure 66 QTNews on iPhone simulator with 1. Login button, 2. Back button, 3.
Rating panel, 4. Category button, 5. Category list, 6. News list.......................................... 66
Figure 67 Rating on phone GUI, tested on iPhone............................................................. 67
Figure 68 News detail, tested on Samsung ACE................................................................ 67
Figure 69 News list, tested on Samsung ACE ................................................................... 68
Figure 70 Weather forecast, tested on Samsung ACE........................................................ 68
Figure 71 Bus line information, tested on Samsung ACE .................................................. 69
Figure 72 Money exchange rate, tested on Samsung ACE................................................. 69
Figure 73 RNMF algorithm steps ..................................................................................... 76
Figure 74 Graph of average reading time per word............................................................ 83
vii
LIST OF TABLES

Table 1 Various groups of UI widgets available in the Sencha Touch framework [9] ......... 28
Table 2 Description of the most common user gestures, alongside their desktop
counterparts [9]................................................................................................................ 40
Table 3 Tradeoffs between recommendation techniques [21]............................................. 49
Table 4 List of tables in database...................................................................................... 55
Table 5 Recommendation techniques [21] ........................................................................ 70
Table 6 Example of rating matrix ..................................................................................... 72
Table 7 Rating matrix....................................................................................................... 79
Table 8 Result matrix after running RNMF....................................................................... 79
Table 9 Reading time test data to find out the average reading time ................................... 82
Table 10 Mapping between star scale and reading time ..................................................... 83
viii
ABSTRACT
Smartphones and tablets become very popular nowadays. With the widespread of
internet, users can use their smartphones, tablets to read news, search information,
check mails, etc. anywhere at any time. A news web application for tablets and
smartphones is not new to Vietnamese internet users. However, most of those
applications have no recommendations unless the online newspaper has to do it
manually for news. They do not provide users beautiful interfaces and some of them
are overwhelming with advertisements. Figure out this fact, our group would like to
build our own web application for reading news with new user interface and provide
new experiences for users using tablets and smartphones.
As the result, QTNews is a website based on Sencha Touch framework and
provides daily news from Vietnamese online newspaper VNExpress. This new
framework allows QTNews to run on different platforms such as tablets, smartphones,
and PCs, which looked and felt like a native application. Applying regularization
non-negative matrix factorization algorithm for collaborative filtering, QTNews
suggests a list of news to a user from users‟ behavior such as the ratings (explicitly),
the reading time (implicitly). Furthermore, QTNews offers users some services like
searching bus stations, advertisements around them and other essential information
such as weather forecast, stock index, foreign exchange rate, etc. We have
successfully released and tested with real users. We collected data and feedbacks
from users and revised our website to make it more useful and friendly.
1
Chapter 1
Introduction
1.1 Problem statement
According to Gartner‟s recent market research [1], Worldwide smart phone
sales will reach 468 million units in 2011. By 2012, 47 percent of the total mobile
device market would be OS devices. By 2015, as their prediction, 67 percent of all
open OS devices will have an average selling price of $300 or below. This research is
proving that smartphone and tablet are becoming an important part of our daily life.
In Vietnam, this number is 32.2 percent for smartphone in device market in 2011 [2].
With the trend, by 2015, the proportion will be 50/50 and keep increasing day by day
[2].
Besides that, smartphone and tablet are now getting better, faster and more
convenience to use with high-resolution cameras, multi-touch technology, GPS
(Global Positioning System), 4G. There is a race between big companies such as
HTC, Samsung, LC, ACER, especially APPLE. With all the technology in just a
small device, the customer‟s need is getting higher. Obviously, one of them is news
reading everywhere, anytime with the demand of recommendation from system. In
addition, another need is location-based services: Where am I? What is around me?
[3]
Moreover, the new appearance of HTML5, which called the future of web, is
changing the way users interfere with websites. When the best feature is HTML5 can
run on many browsers, user-friendly GUI, it becomes the best choice for mobile app
and web development since many of its features were built with the consideration of
being able to run on low-powered devices such as smartphones and tablets. One of
the best HTML5 supported frameworks is Sencha Touch (Sencha Inc). Sencha Touch
allows you to develop mobile web apps that look and feel native on iPhone, Android
and BlackBerry touch devices [4].
2
Interested and motivated by these new things: devices, frameworks, social
needs, especially there is no product that combine those above things in Vietnam. We
want to create the first product for reading news on tablet using one of the newest
HTML5 frameworks with location-based services and have recommendation system
included.
1.2 Related works
1.2.1 Baomoi Mobi1
Baomoi Mobi is a news reading services on phone developed by Felix Studios.
News audio and getting news from more than 100 sources in Vietnam are Baomoi‟s
dominant features. Users can hear the reading voices for an article. Moreover,
Baomoi Mobi is now supporting for than 1000 phone types from smartphones to the
low-tech phones. However, you will be charged 15,000 VND for 30 days of using.
Figure 1 Baomoi Mobi remarkable news
1
You can visit Baomoi Mobi at http://baomoi.mobi/
3
Figure 2 Baomoi Mobi news details
We can see that Baomoi Mobi has a simple GUI for remarkable news panel
because it has to fit with many phone types. Besides, Baomoi Mobi is purely a news
reading mobile app. They provide no additional services, which are now being
commonly asked by high tech users.
1.2.2 Xalo Mobile2
Xalo Mobile is a news mobile application for mobile device. Xalo Mobile is
considered as one of the most comprehensive application with various services in it.
Tinhvan Telecom is the developing company created Xalo Mobile. With user-
friendly GUI, Xalo Mobile easily attracts users for the first time. Xalo‟s getting news
from more than 70 sources with rate of updating is 2mins/time.
2
You can visit Xalo Mobile at http://mobile.xalo.vn/
4
Figure 3 Xalo Mobile app homepage
Furthermore, Xalo provides many services such as:
 Xalo News: News from more than 70 sources with the update rate is
2mins/time. Xalo has many various categories with news brief for each.
 Xalo Photo: Easy-to-use graphic user interface. Many categories for
different users‟ tastes.
 Xalo Game: Fee charged service. Games for mobiles with many type:
Sport, arcade, racing ...
 Xalo Relax: Satisfy users‟ relaxing needs with daily update stories.
 Xalo Music: Users can listen online or they can download to their devices.
Updated with newest albums and hit songs.
5
 Xalo, Video: Newest videos from domestic and international source. Users
can watch video online or download it to their devices.
 Xalo Stock: Collect news, feedbacks about the in-day stock market.
 Xalo Lottery: Collect the lottery results of the day.
Most of them are free. However, Xalo Mobile does not have any location-based
services even this appplication is created for almost smartphones and tablets.
Figure 4 Xalo Mobile news Figure 5 Xalo Mobile stock news
6
1.2.3 VNExpress Mobile3
VNExpress is now one of the most popular online news website in Vietnam.
VNExpress PDA is a special version for devices of VNExpress online newspaper.
Has the same content with the main version but the different graphic user interface
(GUI): lighter GUI, almost no advertisements. In comparison with others, VNExpress
has a simple user recommendation system in each article. When users read any article
there are some related links that the users would be interested in. That makes users
easier to find what they want to read next.
Figure 6 VNExpress tablet version
3
You can visit VNExpress mobile by your devices at http://vnexpress.vn
7
Figure 7 VNExpress phone version
Even VNExpress has some additional services, such as mobile fee payment,
airline ticker booking, game online, card recharging, online shopping. These services
have not been implemented yet on tablet and phone version.
1.2.4 Tuoitre Mobile4
Tuoitre Mobile, a new digital product of Tuoi Tre, was officially launched from
March 2011. Tuoitre Mobile version is providing the latest news for more than 500
types of phones and tablets. Moreover, users can access various categories of news
such as world, business, economy, sport, culture, relax … with the high trust level.
4
You can visit Tuoitre Mobile at http://m.tuoitre.vn
8
Figure 8 Tuoitre Mobile on iPad
However, the best features that users can get from Tuoitre Mobile are users can
listen to news radio, especially Traffic Radio that will notify the traffic situation in
rush hours. Furthermore, Tuoitre Mobile provides some televisions program that
makes itself more convenience. Weather, Money exchange rate, Bus route, Gold rate,
Lottery ... are others services that users can find from Tuoitre Mobile.
9
Figure 9 Tuoitre Mobile news detail
on iPhone
Figure 10 Tuoitre Mobile’s
additional services
Figure 11 Tuoitre Mobile Television
program
Figure 12 Tuoitre Mobile's radio
10
1.2.5 OhPan news
OhPan is a scrolling news ticker web site that released an iPhone application that
uses their same recommendation system to deliver the best content to the users.
OhPan learn your habits and tastes by your rate on content. One of the key features of
OhPan is to offer localized content as well as other unique features.
The localization feature of this application has potential but still have some issues
needed to be solved. Hence, the development team is still working on this application.
Figure 13 OhPan main screen on iPhone
11
Figure 14 OhPan rating feature
The rating feature in content such as the green star button and red bolt button in
figure 14 become the key to the recommendation system. From these information and
the location information above, the recommender with suggest the best content that
suitable to the users‟ tastes and current location.
1.2.6 Amazon store5
Consider as having one of the most effective recommendation algorithms [5],
Amazon is getting a higher profit due to its recommender. The system took Amazon a
decade to build and perfect with a lot of money. Base on users‟ browsing history and
past purchases and purchases of other shoppers to offer users what they should buy
with some statistical reasons for their recommendation.
5
You can visit Amazon at http://www.amazon.com
12
Figure 15 Amazon Betterizer
For the first time you register Amazon account, Amazon Betterizer will ask you
about your taste by clicking on things you like, you already owned or you did not
like. The next time users visit Amazon, the system will recommend you many items
the related to what you have viewed, what you have liked, what you have owned or
items inspired from what you browsed.
The main recommendation algorithm that used in Amazon‟s system is
collaborative filtering. Item-to-item (users buy X should be Y) is the type that was
used. Collecting data and history from users is the key factor of this system. There are
many different types of data that can train this system: votes, clicks, page-view times,
purchases, tagging, adding a title - the users do these things anyway, and you can use
the data.
13
Figure 16 Amazon's recommendation
Figure 17 Recommendation base on other shoppers’ choices
1.2.7 Gowalla
Gowalla is a location-based social network in the type of a mobile application.
Facebook acquired Gowalla since Dec 2, 2011. With Gowalla, registered users can
share with friends the location that they visit and collect those locations as badges.
14
Moreover, users can see the rating and comment or feedback for the location they
want to go to.
Some feature provided by Gowalla:
o All free to use.
o You can update places that you visit.
o Upload image immediately for the location you are being at.
o Share your recommendation and tips for other users.
o Account link to Facebook and Twitter, you can share your post on
Facebook and Twitter also.
o Earn rewards from local businesses by using Gowalla.
o Provide iPhone app, Android app, Blackberry app, Mobile site.
Figure 18 Gowalla on iPad
15
1.3 Objectives
Because Sencha Touch is a new framework and still not have many developer use
it to build their application. Especially there is almost no Sencha Touch based
products in Vietnam. Hence, our expectation for this project is to create a web
application that used for reading news with a recommendation system. We hope that
this project can bring a new way, new inspiration for others who really to make a new
generation of mobile application. To implement that expectation, we want to build a
web application that people can read daily news here and served with good suggested
news from our recommendation system. Besides, it will have ability to provide some
additional services that would be helpful for users to use especially location-based
services. We expect, in details, this site would be:
 We would like to get the news from a local online newspaper to serve for
Vietnamese, our main customers. Many local sites would be the best
choices for us: VNExpress, DanTri, TuoiTre … In addition, the news
should be updated frequently.
 Use a HTML5 supported framework to build the GUI for this site. It would
be a user-friendly GUI and the time for rendering should be acceptable.
 Site can be read on smartphone and tablet with different GUI which will be
suitable and fit for each.
 When user read news, the website can suggest other news relating to that
news in terms of author, title, keywords, rating, reading time ….
Furthermore, we can suggest some news that the other persons who have
the same habits often read. In order to do this, we will need a
recommendation algorithm to execute data.
 All the services should return the results in an acceptable time.
 Website can let user to like or comment on news. Website automatically
updates user profile, history, reading path, user‟s information for every
move of users.
16
 Website can get user location and suggests things and services that are near
user place.
 Location-based services:
o Bus route information.
o Current position on Google map.
o Local advertisement.
 Additional services:
o Exchange rate.
o TV schedule.
o Weather.
17
Chapter 2
Background
2.1 Tablet
2.1.1 Overview
A tablet computer, or tablet is a mobile computer, larger than mobile phone or
personal digital assistant (PDA), integrated into a flat touch screen and primarily
operated by touching the screen rather than using a physical keyboard. A tablet PC is
an innovative technology computer which is extremely popular nowadays due to the
usefulness, portability and well-functioning. You can utilize the tablet to carry out all
the tasks that you generally user your computer or laptop such as surfing around web,
reading e-books, enjoying video games, watching films, sending or acquiring emails
or viewing images. As with any computer, appropriate use of passwords and data
encryption technology can help to protect personal information on your tablet. One of
the tablets currently on the market comes with a movement sensor that can be used to
trigger an alarm and another comes with an integrated fingerprint reader for enhanced
data security.
2.1.2 History
The tablet computer and the associated special operating system is an example of
pen computing technology. Electrical devices with data input and output on a flat
information display have existed as early as 1888. Throughout the 20th
century, many
devices with these characteristics have been created with the Dynabook concept of
Alan Kay in 1968.
During the 2000s, Microsoft tried to create the term Microsoft Tablet PC for tablet
PCs built to Microsoft‟s specification. These generations of Microsoft Tablet PCs
were designed to run Windows XP Tablet PC Edition and were targeted to address
business needs. However, these devices failed to achieve widespread usage due to
18
price and usability problems. The existing devices were too heavy to be held with one
hand, some specific software features such as finger and virtual keyboard support
were not present, and there were not enough applications specific to the platform.
Figure 19 HP Compaq tablet PC with rotating/removable keyboard
In April 2010, Apple Inc. released the iPad, a tablet computer with an emphasis
on media consumption. With the new purpose, increased usability, battery life,
simplicity, lower weight and cost, the iPad has reached worldwide commercial
success.
19
Figure 20 Ipad
The birth of the iPad has classified tablet devices into two different types: the
Tablet PC and the Post-PC tablet. A tablet PC is a portable computer integrated with
a touch screen as a primary input device and running a modified classic desktop
operating system. This kind of tablet mostly uses the simple resistive touch screens
that respond to any kind of pressure on the screen. Since mid-2010, new tablet
computers have been created with mobile operating systems. They have a different
interface instead of the traditional desktop operating system. These Post-PC tablets
are finger driven; they use capacitive touch screens with multi-touch capabilities that
require a conductive material such as fingertip for input.
2.2 Smartphone
2.2.1 Overview
A smartphone is mobile phone that offers advanced capabilities with functionality
like a personal computer (PC). The first smartphones were devices that mainly
combined the functions of a PDA and a mobile phone. Smartphones use a special
operating system that can add applications in contrast to regular phones which
support applications like Java games. The most common mobile operating systems
are Google‟s Android, Nokia‟s Symbian, Apple‟s iOS, Microsoft‟s Windows Mobile
20
and Windows Phone, and RIM‟s BlackBerry OS. The first smartphone was “Simon”
produced by IBM in 1992. Besides common mobile phone features, it also contained
a calendar, address book, world clock, calculator, not pad, e-mail client, the ability to
send and receive faxes, and games. It had no physical buttons; instead, users used a
touch screen to select.
Figure 21 IBM Simon (introduced in 1992)
Later, during the late 90‟s, Nokia launched a range of phones aimed at business
users. This range started with the Nokia 9000 in 1996 that was a cross between a
phone and a PDA, and was quickly followed by the 9210, 9300 and 9500. The Nokia
9210 was one of the first phones using an open operating system.
Figure 22 The Nokia 9210 Communicator
Today, mobile landscape is a mess of devices, platforms and operating system.
Mobile development has to deal with a variety of environments such as iPhone SDK
(using Objective-C), Android SDK (using Java), BlackBerry (using JavaME), etc. A
web developer might be familiar with the agony of testing 10 or so browser versions
21
across 10 or so operating system versions. Multiply that by 100 and you have the
mobile‟s situation. There is simply no cost-effective way to develop and test across
all of the possible combinations.
2.2.2 iOS
The Apple iPhone, iPod Touch, iPad all use an operating system call iOS that is
derived from Mac OS X. Currently, all iOS devices are developed by Apple and
manufactured by Foxconn or another of Apple‟s partners. The iPhone that launched
in 2007 was the first mobile phone using a multi-touch interface. Interaction with the
OS includes gestures such as swipe, tap, pinch, and reverse pinch. Internal
accelerometers are used by some applications to respond to shaking the device or
rotating it in three dimensions. Starting with iOS 4, multitasking is supported through
seven background APIs: background audio, voice over IP, background location, push
notifications, local notifications, task completion, and fast app switching. Native third
party applications were not officially supported until the release of iOS 2.0. However,
a process called jail breaking can install unofficial third party native applications. In
2008, Apple introduced App Store, an online distribution for third party applications.
It gains a big success and becomes a model for other smart phone makers. In October
2011, App Store contained more than 250,000 iOS applications [6] which have been
downloaded more than 18 billion times. The iOS had a 15% share of the smart phone
operating system units sold, behind both Google‟s Android and Nokia‟s Symbian in
2011 [7]. Developing iOS applications needs Xcode toolset bundled with iOS SDK,
simulators, analysis tools; main language is Objective-C.
22
Figure 23 iOS 5.0.1 running on an iPhone 4S
2.2.3 Android OS
The Android operating system for smartphones was released in 2008. It is an open
source platform created by Google. The first phone to use Android was the HTC
Dream. The software suite included on the phone consists of integration with
Google‟s proprietary applications such as Maps, Calendar, Gmail, and a full HTML
web browser. Third-party apps are available in the Android Market (released October
2008). Android has a series of versions; each version is named, in alphabetical order,
after a dessert. For example, version 2.3 Gingerbread, version 3.0 Honeycomb – a
tablet oriented with multi-core processors supports and hardware acceleration for
graphics, version 4.0 Ice Cream for smartphones with Honeycomb features. Since the
HTC Dream was introduced using Android OS, there has been an explosion in the
number of devices that carry Android OS. On 15 November 2011, Android reached
52.5% of the global smartphone market share [7]. Key features of Android OS:
 Application framework enabling reuse and replacement of components
 Dalvik virtual machine optimized for mobile devices
23
 Integrated browser based on the open source WebKit engine
 Optimized graphics powered by a custom 2D graphics library; 3D graphics
based on the OpenGL ES 1.0 specification (hardware acceleration
optional)
 SQLite for structured data storage
 Media support for common audio, video, and still image formats
 GSM Telephony (hardware dependent)
 Bluetooth, EDGE, 3G, and WiFi (hardware dependent)
 Camera, GPS, compass, and accelerometer (hardware dependent)
 Rich development environment including a device emulator, tools for
debugging, memory and performance profiling and a plugin for the Eclipse
IDE
 Language: Mostly Java with Android SDK
Figure 24 Home screen of Android OS
24
2.3 Location-based services
Location based services (LBS) are information service accessible with mobile
devices through the mobile network and utilizing the ability to make use of the
location of the mobile device. (Virrantaus et al. 2001)
There are some basic components are required to use a location based service as
shown in the figure 25:
 Mobile devices: a tool for the user to request the needed information. The
result can be given by speech, message, using pictures, text, and so on.
Possible devices are PDA‟s, Mobile Phones, Laptops, etc. But the device
can also be a navigation unit of car or a toll box for road pricing in a truck.
 Communication Network: the second component is the mobile network,
which transfers the user data and service request from the mobile to the
service provider and then the requested information back to the user.
 Positioning Component: For the processing of a service, the user position
has to be determined. The user position can be obtained either by using the
mobile communication network or by using the Global Positioning System
(GPS). Further possibilities to determine the position are WLAN stations,
active badges or radio beacons. The latter positioning methods can be
especially used for indoor navigation like in a museum. If the positioning is
not determined automatically, the user can also specify it manually.
 Service and Application Provider: The service provider offers a number of
different services to the user and is responsible for the service request
processing.
 Data and Content Provider: Service providers will usually not store and
maintain all the information that can be requested by users.
25
Figure 25 The basic components of an LBS [8]
Based on users‟ needs, there are many LBS applications. The most common
question is to know where the user is with respect to somebody or something else
(locating). Users may search for persons, objects or events (searching). They can ask
for the way to a location (navigating). Other questions ask for properties of a location
(identifying), or they would try to look for events at or nearby a certain location
(checking).
a) Emergency Services
One of the most evident application of LBS is the ability to locate an
individual who is either unaware of his/her exact location or is not able to
reveal it because of an emergency (injury, criminal attack, etc.). This kind of
application includes public and private emergency services for both pedestrian
and drivers. While public emergency services are calling out fire fighters,
medical teams, etc., the private ones are the emergency roadside assistance for
drivers.
26
b) Navigation Services
Navigation services are based on mobile users who need for direction within
their current geographical location. Some possible applications are indoor
routing, car park guidance, traffic management, etc.
c) Information Services
Location-sensitive information services mostly refer to the digital distribution
of information based on device location, time specificity and user behavior.
Some possible applications are: finding the nearest service, accessing traffic
news, getting help with navigating in an unfamiliar city, obtaining a local
street map, travel service/tourist guides, mobile yellow pages, shopping
guides, advertising, etc.
d) Tracking and Management Services
Tracking services can be used by the consumer and the corporate markets.
One example is tracking postal packages so that companies know where their
goods are at any time. Companies can locate their field personnel such as
salespeople, repair engineers, so that they are able to dispatch the nearest
engineer and provide their customers with accurate personnel arrival times.
Vehicle tracking can also be applied to locating and dispatching an ambulance
that is nearest to a given call.
e) Billing Services
Mobile location service provider can dynamically charge users for a particular
service depending on their location when using or accessing the service.
2.4 Sencha Touch cross-platform framework
2.4.1 Introduction
Sencha Touch, the first mobile HTML5 JavaScript framework developed by
Sencha Inc., has been nominated the 3rd
place in “Packt's Best Open Source in 2011”
[8]. Sencha Touch gives you the experience with HTML5, CSS3, and JavaScript
27
through its features: wide range of UI widgets to choose from, as well as robust data,
layout, and component models with only one tiny JavaScript library file.
Sencha Touch aims at solving the problem of having a mobile web application
that mimic a native application while making full use of HTML5 and CSS3. Sencha
Touch runs on iOS devices (iPad, iPhone, iTouch) as well as Android phones and
tablets.
HTML5, CSS3 and JavaScript in Sencha Touch were optimized to give you a
native mobile application feel and the best mobile experience possible.
Figure 26 GitHub, one of the best examples for Sencha Touch using, created by
Steffen Hiller
2.4.1.1 Browser compatibility:
From the time it was released, June 2010, Sencha Touch is not designed for
running on Rich Internet Applications, such as Fire Fox and Internet Explorer.
Sencha Touch can run on WebKit browsers: Safari or Chrome. The fact is that
28
Sencha Touch is aimed at the development of mobile applications only. That means
you should use Safari or Chrome to run and test your application for the best result
and UI performance.
2.4.1.2 Device compatibility:
With the expectation of bringing the full experience for the user, Sencha Touch
was create to support almost smartphones and tablet devices. Smart device market is
getting larger with newer and more power features, especially multi-touch phone and
tablet. Even Sencha Touch is a cross platform framework, but for the best user
experience, you should use iOS devices or high-powered Android devices. Once
more point, there is not always the same feeling for many smart devices using. It
causes by the hardware in these devices. For example, iOS devices are included GPU
(Graphic Processing Unit) inside. Whereas, most Android devices are not dedicated
GPUs.
2.4.2 Sencha Touch UI
Group Purpose
Containers Widgets that are designed for nothing more than managing other child
items. An example of these types of widgets is the TabPanel.
Containers typically implement layouts.
Sheets Sheets are generally any popup or side-anchored container and appear
in a modal fashion, requiring users to interact with the sheet before
moving forward. An example of a sheet is the Date Picker widget.
Views Views are widgets that implement data Stores to display data. The List
and Nested List are both views that implement Stores.
Misc This collection of widgets range from Buttons to Maps to Media.
Table 1 Various groups of UI widgets available in the Sencha Touch framework [9]
29
2.4.2.1 Panels
The most commonly used Containers in Sencha Touch are Panel, TabPanel,
FormPanel and Toolbar. Panel allows others widgets to be placed in side of Panel, in
an area called “dock”.
Figure 27 Demonstration of some Panel content areas
In Figure 27, you can see that the Panel has three docked items. The Toolbar with
title is docked at top. A List item docked on the left side. A toolbar with buttons
docked at bottom of the Panel. That means toolbar can be used flexibly.
Figure 28 Toolbar can be used flexibly
30
2.4.2.2 TabPanel
When you need to control your screen with the Toolbar, TabPanel would be a
good choice. TabPanel is a container that will automatically generate button for
each child it has. Tapping any buttons will allow you to “change” between its
children known as “card”.
You can set type of transition for these cards: fade, slide, flip, cube, pop, and
wipe.
Figure 29 Flip transition to change between cards
2.4.2.3 FormPanel
FormPanel is a type of container that allows users to input the information into
fields provided by Sencha Touch. They offer us almost type of common fields that
we can find in any framework. With Sencha Touch, the Text, Checkbox, URL,
Email, Textarea, Number, Password and Radio fields all implement native HTML5
input elements, with the addition of styling. That means you can adjust these
element‟s style if you want to. Besides, Sencha Touch aims to create a framework
that its component can mimic native application behavior. Example, when you focus
on Textarea, a virtual keyboard will appear for inputting information as the way you
do on iPhone for iPad.
31
Some component of FormPanel provided by Sencha Touch framework:
 Slider
 Toogle
 Checkbox
 DatePicker
 Email
 Field
 FieldSet
 Hidden
 Number
 Password
 Radio
 Search
 Select
 Spinner
 Text
 TextArea
 Url
Figure 30 FormPanel's components
32
Figure 31 FormPanel on iPhone
Figure 32 Difference input widgets base on type of device it is running on
In Figure 32, we see the difference input widget for the same Select field. That
causes by the detection of Sencha Touch for the devices that this web application is
running on. In the left hand side photo, the Select widget is displaying the Picker
sheet because Sencha Touch detects it is running on a phone. While in the right hand
side photo, it is running on a tablet, hence, it is displaying a dialogue type.
33
2.4.2.4 Sheets and Pickers
Sencha Touch provides you a widget called Sheet, which is a floating input
widget, grabbing the user‟s attention and focus.
Figure 33 Sheets in portrait mode
Figure 34 Sheets in landscape mode
Figure 33 and 34 are sheets displaying on the screen. One of the neat things of
Sencha Touch is that almost its components can render immediately to portrait or
landscape mode while flipping your devices without any additional code in your
application.
In Sheet, we have Picker, MessageBox, and ActionSheet. Sheet is actually a
subclass of Panel. Hence, we can configure and add pretty much anything we want to
the stack of widget.
34
Figure 35 ActionSheet displayed with buttons
In Figure 35, we can see an ActionSheet with added button as we want to.
ActionSheet is used to request the action from users through buttons. When you
choose one button, another function, which was implemented in this button, will be
processed.
Other subclass of Panel is MessageBox, which is used to alert or announce when
event happens.
Figure 36 MessageBox implementation
35
Figure 37 An example of MessageBox
There are three types of MessageBox: Alert, prompt, and confirm. The key
difference between the three is apparent. The alert MessageBox is designed to alert
the user of some condition and only displays one button. The confirm dialog actually
allows the user to make a decision by tapping on a button, allowing for a branch of
logic to execute. Lastly, the prompt MessageBox asks the user for direct input.
2.4.2.5 Data-bound views
Just like Sencha‟s other frameworks, Sencha Touch comes with an incredibly
powerful data package. Developers can easily request data from a wide variety of
sources whether by AJAX, JSONP, or YQL, bind that data to specific visual
components or templates, and then take that data offline with local Storage writers.
Sencha Touch only provides three types of data-bound view: DataView, List, and
NestedList. A DataView is a widget that binds to a data Store to get and show the
data on screen. It gives you 100% control on how you render the data and display
them on screen through Template.
36
Figure 38 Template for Bus Route DataView
Figure 39 Bus Route DataView
Above, DataView rendering data from a Store, which contain the list of bus route.
Now DataView just load it on the screen in the style we want it to be. With the
DataView, we are completely responsible for a lot of work, including defining the
XTemplate that will be used to stamp out the HTML fragments, and styling how the
items are rendered on screen.
List widget is the next data-bound view considered. The List view widget is
getting the same data of DataView above. The obvious difference we can see is the
way data displayed on screen. Like other components, with data-bound components,
we can configure their attributes as well as the way they appear on screen.
37
Figure 40 An example of List view
The DataView and List widgets are designed to display data in a linear set.
However, there are times where you want to display nested data. For that, you will
need to use the NestedList widget.
Figure 41 An example of NestedList view
From the main List on the left photo, we can choose the option we want to go
into, in this situation is “drinks”. Then the view will change in the second level list of
38
“drinks”. Keep going with “Sport drinks”. Once again, the view goes into the third
level of this NestedList. This is the way NestedList works. It helps you to organize
you data in a tree-like structure.
2.4.2.6 Map and Media
Developing with the power of smart devices, technology is getting more powerful
with new features and functions. One of the most demanded needs is location –based
services. Sencha Touch has brought that wonderful feature to users by integrating
Google Maps in its API.
Sencha Touch Map widget literally wraps Google Maps. It allows you to work
with Google Map instances, as it was native to Sencha Touch. That means you can
layout, show, hide, work with Google Map instances, events in Sencha Touch as the
way you did with Google Map API. Moreover, some special methods from Sencha
Touch make it easier for developer to get and work with map‟s coordinates.
Figure 42 Getting Geo information is easier and easier
39
Figure 43 Google Map in Sencha Touch API
Furthermore, growing demand for mobile applications is the ability to play audio
and video content. HTML5 natively has video and audio tags that bring this
functionality to Mobile Safari, but Sencha Touch makes it easier to use.
Figure 44 An example of playing video on tablet
40
Figure 45 Playing video with a few lines of code
2.4.2.7 Finger and Mouse
Sencha Touch was created for the aim at smart devices with almost of them
having touch and multi-touch functions. Part of transitioning to mobile development
is the understanding the user interaction models and how they relate to browser
events.
Mobile/Tablet Desktop Description
tapstart mousedown The initial point at which a touch is detected in the
UI.
tapend mouseup Signals the end of a touchstart event.
tap click A tapstart and tapend event for a single target.
doubletap doubleclick Two successive tapstart and tapends for a single
target.
swipe mousedrag A tapstart and tapend events with a delta in X
(horizontal) or Y (vertical) coordinates.
pinch A complex multi-finger “pinch” gesture. It is
comprised of multiple touchstart and touchend
events with deltas in the X and Y coordinate space.
Table 2 Description of the most common user gestures, alongside their desktop
counterparts [9]
41
2.5 Recommendation systems
2.5.1 Introduction
Previously, users normally have two ways of selecting an item. User can search
either through a key word or via a category. With these methods, use may feel
overwhelmed when dealing with a huge amount of information. Hence, the need of a
method that can help user search for desired items effectively has arisen.
Over the past decade, recommendation systems have gained a high popularity.
Recommender systems attempt to profile user preferences over items, and model the
relation between users and items. Their task is to recommend items that fit the user‟s
taste, in order to help the user in selecting items from an overwhelming set of choices.
Such personalized recommendations are especially important in markets where the
variety of choices is large such as e-commerce, subscription-based services, etc. With
the increasing number of web based merchant and rental services use recommender
systems, Amazon.com, Netflix and MovieLens are leaders in applying successfully
recommendation system. They have spent a lot of time and money to find a quick and
effective recommender. In 2005, Netflix, the largest online DVD rental service in the
United States of America, announced the Netflix Prize competition up to 1 million
dollars award. The task is to learn from a training dataset of approximately 100
million ratings that nearly half of million users gave to 17770 movies and finally
predict another 2.8 million ratings. As an error measurement, the Root Mean Square
Error (RMSE) is used. Prizewere based on improvement over Netflix‟s own
algorithm, called Cinematch, which is able to give a RMSE of 0.9525. Any algorithm
that is capable of improving this result by 10% (which is a RMSE < 0.8563) will be
considered for the $1000000 grand prize. Finally, in 2009, the grand prize was given
to the “BellKor‟s Pragmatic Chaos” team.
However, recommendation systems of e-commerce web site have to deal with
many difficulties. Web-based retailers have a massive data with millions of users and
millions of items. Many services require real time response as well as good
recommendations. In addition, the accuracy of the system is very sensitive to the
42
number of information associated with a given user. The system cannot give accurate
recommendations to new users who have too few information. Therefore,
recommendation problem has attracted many attentions from many researchers.
Figure 46 Recommender system as a black box
2.5.2 User’s feedbacks
2.5.2.1 Explicit feedback
Users are asked to give their opinion about provided recommendations. Explicit
feedback usually comes in the form of ratings that can be positive or negative.
Ratings can be in discrete scale (from 0 to N) or in a binary value (like/dislike).
Another way to gather explicit feedback is to allow users to write comments and
opinions about the item. However, ratings are usually biased toward some values, and
depend on the user perception of rating‟s scale.
2.5.2.2 Implicit feedback
The system can infer the user preferences by user‟s actions. For instance, by
analyzing the history purchase, the time spent on a webpage, the links followed by
the user, the mouse movements, etc. However, negative feedback is not reliable when
using implicit feedback since the system can only observe positive feedback by
analyzing user‟s actions.
43
2.5.3 Recommendation methods
2.5.3.1 Demographic
In demographic recommendation, users are classified based on their personal data,
which they themselves provided during the registration process. Alternatively, this
data can be extracted from the purchasing history, survey responses, etc. It
recommends items most frequently bought within the group of users. For each user,
the system creates one vector of their features, such as experience level, annual
expenses, gender, politics, education, sports, etc. The system clusters users to groups,
define the list of the most popular products for each group and finds the one which is
the closest to the current user based on the current user‟s demographic features. An
example of demographic recommendation is the Grundy system. Grundy
recommends books based on personal information gathered from an interactive
dialogue. The lines printed in upper case were typed by the system; those in lower
case were typed by the user [10].
- PLEASE TYPE IN YOUR NAME
- John Greene
- YOU HAVE NOT USED THIS SYSTEM BEFORE, HAVE YOU?
- No
- OK. I WOULD LIKE TO KNOW WHAT SORT OF PERSON YOU THINK
YOU ARE. PLEASE TYPE IN A FEW SINGLE WORDS THAT YOU
THINK CHARACTERIZE THE MOST IMPORTANT ASPECTS OF
YOURSELF
- Unconventional open direct honest humorous persistent adventurous
- I DO NOT KNOW THE WORD UNCONVENTIONAL. I DO NOT KNOW
THE WORD OPEN. I DO NOT KNOW THE WORD DIRECT. WOULD
YOU LIKE TO TRY SOME MORE WORDS?
- Yes
- OK GO AHEAD
- Relaxed Jewish friendly playful thoughtful eccentric
44
- HAVE YOU EVER READ EARTH ANGELS BY SUSAN CAHILL?
- No
- YOU MIGHT LIKE IT. IT IS ABOUT A GIRL WHO GOES TO
CATHOLIC ELEMENTARY SCHOOL, HIGH SCHOOL AND COLLEGE,
THEN GOES ON TO BECOME A NUN, BUT FINALLY BACKS OUT A
FEW DAYS BEFORE FINAL VOWS. MAJOR CONFLICT IN IT IS THE
RELATIONSHIP OF MAN TO GOD. ONE OF THE MAJOR STRENGTHS
OF ONE OF THE MAIN CHARACTERS IS INTELLIGENCE. IT IS
POLITICALLY LIBERAL. IT HAS A BIT OF ROMANCE. IT HAS
MEDIUM-FAST MOVING PLOT. DOES THAT SOUND GOOD?
- No
- WAS IT BECAUSE OF THE AMOUNT OF ROMANCE? (EITHER TOO
MUCH OR NOT ENOUGH)
- No
- AREN‟T YOU INTERESTED IN THE RELATIONSHIP OF MAN TO
GOD?
- No
Another example is the Winnow algorithm that extracts the characteristics of
home pages associated with users that like a particular restaurant [11]. Instead of
asking users many questions to obtain their demographic information like Grundy
system, it minimizes the effort by taking advantage of the work the user has already
expended in creating a home page on the World Wide Web.
However, the main problem of demographic system is that it recommends the
same items to people with similar demographic profiles. It can only give general
recommendations. Another drawback is the generation of the profile that requires
user‟s effort and time to create.
2.5.3.2 Utility-based
This method predicts the value of items to each individual user on the basis of a
model of the user‟s preferences, which may have been elicited explicitly. In other
45
words, the system gives recommendations based on the evaluation of user‟s needs
and available solutions. A simple algorithm of utility-based includes following steps:
- Step 1: User gives some demands
- Step 2: The system suggests some solutions that are optimal with respect to
user‟s requirements
- Step 3: If user accepts a solution then stop
- Step 4: User evaluate suggested solutions and add or modify his requirements
- Step 5: back to step 2
For example, the ATA system (Automated Travel Assistant) of Greg Linden et al
has recommended flights to a client.
Client: “I want to fly from Seattle to Newark next Tuesday afternoon.”
Agent: “I‟ve got a United flight at 3:30pm for $500 and an American flight at
12:30pn for $520.”
Client: “I can‟t leave before 3:30pm but I do prefer American.”
Agent: “I have another American flight through Denver at 4:00pm for $530.”
Client: “That‟s pretty expensive. I‟d be willing to go on a later flight or another
airline if it‟d be much cheaper.”
Agent: “The cheapest flight is US Air at 8pm for $490.”
Client: “In that case, the American flight is fine.” [12]
The limitation of utility-based method is the communication abilities. This
approach was robust under inaccurate input. It only give static recommendations and
cannot learn from user‟s preference.
2.5.3.3 Knowledge-based
A knowledge-based recommender system generates recommendation to a user by
consulting its knowledge base of the product domain, and then reasoning what items
will best satisfy the user‟s requirements. For example, the PersonalLogic system,
which helps users select on variety of products such as cars, computers, pets, family
activities, etc. It gathers users‟ requirements on a particular product and consults its
46
knowledge base to fine the items that best meet the users‟ requirements. For instance,
a car-shopper may need to provide answers to such questions as what type, size, and
features he prefers, what price he can afford, etc. The system then searches its
knowledge base for cars that are optimal for his requirements. Schafer, Konstan and
Riedl call knowledge-based recommendation the „editor‟s choice‟ method [13].
Knowledge-based recommendation system has some advantages. It does not need
to be initialized with a database of user preferences since its recommendations do not
depend on the user ratings of items. Therefore, it does not suffer from “ramp up” or
“cold start” problem [14]. “Cold star” also known as “new user” problem or “new
item” problem, occur when a new user or a new item enters the system; it is difficult
to make recommendations because there is not enough information. Knowledge-
based system can adjust its recommendations quickly as a user‟s interest change due
to its independence of user‟s preferences in the past. Moreover, it can make good
recommendations for products that have obvious characteristics such as cars, houses,
careers, etc.
However, the main problem with this system is that it must understand the
product domain well and must have knowledge of important features of the product.
Thus, it requires knowledge of experts.
2.5.3.4 Content-based
Content-based recommender system creates a profile for each user or product to
characterize its nature. These features are demographic data for user profiling and
product information, descriptions for item profiling. For example, a movie profile
could include attributes regarding its genre, the actors, the director, and so forth. The
process of characterizing the item data set can be automatic, extracting features by
analyzing the content or based on manual annotations by the domain experts. A
content-based system selects items based on the correlation between the content of
the items and the user‟s preferences.
A known successful realization of content filtering is the Music Genome Project,
which is used for the Internet radio service Pandora.com. A trained music analyst
47
scores each song in the Music Genome Project based on hundreds of distinct musical
characteristics. Another example is PRES. It recommends documents by comparing a
user profile with the content of each document in the collection. The content of a
document is represented by a set of terms that are extracted from documents through
a parsing process. All HTML tags and stop words that occur very often and cannot be
used as discriminations are removed. The remaining words are reduced to their stem
by removing prefixes and suffixes. The user profile is created by analyzing the
content of documents that the user found interesting by using either explicit or
implicit feedback [15]. Another application of content-based filtering is
NewsWeeder. It is a netnews-filtering system that let the user rate his or her interest
level for each article being read and then learn a user profile based on features of
articles that user has rated [16].
One advantage of content-based system is that it can extract features, tags
automatically. No humans must be involved. Moreover, the system is adaptive
through time. In other words, the quality of recommendation is improved over time.
However, this approach has some drawbacks such as dealing with “cold start” and
“gray sheep” problem. It also has to suffer from the problem of noisy features that are
extracted automatically from the content of items. “Gray sheep” problem occurs
when recommended items on the border between two or more groups. Gray sheep are
users whose ratings do not match any group consistently. Black sheep are users
whose ratings are so ridiculous that recommendations are unachievable. But we can
solve this problem by using hybrid recommendation techniques.
2.5.3.5 Collaborative filtering
This approach relies only on past user activities such as transaction history, user
satisfaction expressed in rating. Collaborative filtering analyzes relationships between
users and interdependencies among items to recognize new user-item correlation. For
instance, user A and user B have a purchase history that overlaps strongly and user A
has recently bought a book that B has not yet seen, the system then can reason to
suggest this book to B. Collaborative filtering is independent of the domain. That is, it
48
does not need extra information about either items or users such as what a book is
about, its genre, or who wrote it. Hence, it can solve the problem of content filtering
dealing with data that are often elusive and difficult to profile.
Pure collaborative approaches take a matrix of given user-item ratings as the only
input. They produce a prediction indicating how much the current user like or dislike
a certain item and a list of n recommended items. Such a top-N list should not contain
items that the current user has already selected. There are two main techniques to
solve collaborative filtering: the memory-based approach and model-based approach
[17]. The memory-based approach, also known as neighborhood methods, focus on
the relationships between items or, alternatively, between users. Item-based
neighborhood exploits the similarity among the items. This method analyzes the set
of items that a user has rated, and then computes the similarity among them. User-
based neighborhood suggests items based on the correlation between people with
similar preferences. On the other hand, model-based approach, or latent factor models
try to explain the rating by characterizing both items and users. This method tries to
infer the rating patterns from 2 or more factors. For example, in the movie domain,
these factors could be obvious dimensions such as the genre (comedy, drama), the
amount of action, or the orientation to children, or uninterpretable dimensions. A
recommendation for an item is made when the active user and the item are similar
with respect to these factors. Model-based systems use a variety of learning
techniques including neural networks [18], latent semantic indexing [19], and
Bayesian networks [20]. One of the most often applied techniques for latent factor
models are based on matrix factorization. Matrix factorization can deal with the
sparsity and scalability problems, by reducing the matrix of users and items to k
dimensions (or latent factors).
Although collaborative filtering is one of the most used recommendation methods,
it has some limitations. It has to suffer from data sparsity. With a large number of
users and items, the main problem is the low coverage of the users‟ ratings among the
items. Therefore, it could be difficult to find reliable neighbor, especially for user-
49
based approach. Collaborative filtering also deals with “gray sheep” and “cold start”
problems. When new items enter the system, they cannot be recommended until users
start rating them. This problem is known as the “early rater” problem. Moreover, the
first user that rates new items gets only little benefit (this new item does not match
with any other item yet). In addition, it could be a victim of shilling attacks. When
anyone can provide recommendations, people may give lots of positive
recommendations for their own materials, and negative recommendations for their
competitors.
We have gone through many techniques to solve recommender problem. Let
summarize strengths and weaknesses of each recommendation techniques in
following table.
Table 3 Tradeoffs between recommendation techniques [21]
Technique Strengths Weaknesses
Collaborative
filtering (CF)
A. Can identify cross-genre
niches
B. Domain knowledge not
needed
C. Adaptive: quality improves
over time.
D. Implicit feedback sufficient
I. New user ramp-up
problem
J. New item ramp-up
problem
K. Gray sheep problem
L. Quality dependent on
large historical data
set
M. Stability vs. plasticity
problem
Content-based
(CN)
B, C, D I, L, M
Demographic
(DM)
A, B, C I, K, L, M
N. Must gather
demographic
information
50
Utility-based (UT)
E. No ramp-up required
F. Sensitive to changes of
preference
G. Can include non-product
features
O. User must input
utility function
P. Suggestion ability
static (does not learn)
Knowledge-based
(KB)
E, F, G
H. Can map from user needs
to products
P
Q. Knowledge
engineering required
2.5.3.6 Hybrid system
Hybrid recommender systems are approaches that combine several algorithm
implementations or recommendation components. They combine the strengths of
different algorithms and models in order to overcome or to minimize the problems
that a solely method can have. There are several designs for hybrid recommender
systems. Figure 47 described monolithic hybridization design. This kind of
hybridization is virtual in the sense that features or knowledge sources of different
paradigms are combined. For instance, a content-based recommender that also
exploits community data to determine item similarities falls into this category. Figure
48 depicts parallelized hybrid recommender systems. These systems require at least
two separate recommender implementations, each one operates independently of one
another and produce separate recommendation lists. In hybridization step, their output
is combined into a final set of recommendations. Next, figure 49 sketches the pipeline
architecture. The output of one recommender becomes part of the input of the
subsequent one.
51
Figure 47 Monolithic hybridization design [22]
Figure 48 Parallelized hybridization design [22]
Figure 49 Pipelined hybridization design [22]
52
Chapter 3
News website with Recommendations
Our project, a news web application based on Sencha Touch framework, called
QTNews, was developed for running on smartphones and tablets. This application
aims at providing daily updated news for users from a Vietnamese online newspaper:
VNExpress. For the purpose of meeting user‟s needs of having experience on new
and high-tech services, QTNews also gives additional services that will please those
demands. They are:
 Location-based advertisement
 Currency rate
 Gold rate
 Stock index
 Weather
 Bus route
 User‟s current position
In this part, we will talk about the way we implement our project using Sencha
Touch framework, like how we work with GUI, how we can load data from services,
how can we manage event in Sencha Touch, how can we deal with store, local store,
template… Furthermore, we also work with other stuffs such as:
 Google map: How we can use Sencha Touch to work with map, how to get
coordinates, how to put markers on map …
 Services: local services and services from other sites.
53
Figure 50 QTNews interface
Figure 51 QTNews project structure
54
3.1 Database
Figure 52 QTNews database structure
55
Number Table Description
1 ACCOUNT
Stores user account information including
name, email, password.
2 ADVERTISEMENT
Stores local advertisements with their basic
and location information: latitude and
longitude.
3 BusLine
Stores information of bus in HoChiMinh
City, such as: line number, time per line,
wait time …
4 BusRoute Stores route details of bus.
5 EXRATE Money exchange rate in day.
6 GOLDRATE Gold rate in day.
7 NEWS
Stores news details: title, content, pubdate,
description …
8 RATING Stores rating matrix.
9 SESSSION Stores session for each session issue.
10 STATION
Stores information about location of bus
station, line number go through
11 UserInfo
Keeps track user‟s footprint: datetime,
device, platform, browser…
12 UserPath
Store user‟s behaviors on site: reading time,
news title, news category…
13 VNEFeedUrl Stores VNExpress RSS link
Table 4 List of tables in database
3.2 Functionality
3.2.1 Getting News
The very first step for getting news from a source is we have to find their RSS
(Really Simple Syndication) to get the news brief. RSS solves a problem for people
56
who regularly use the web. It allows you to easily stay informed by retrieving the
latest content from the sites you are interested in. You save time by not needing to
visit each site individually. In short, RSS is the most effective way and the easiest
way to know what news we have for today in site or in category.
With the benefits from using RSS link, our project can keep updating for the
newest news coming. At this time, our application is getting RSS from VNExpress (a
Vietnamese local News site) with commonly read categories, such as:
 Society
 World
 Business
 Culture
 Sport
 Life style
 Science
 Hi-tech
Figure 53 VNExpress RSS
57
Figure 54 Content in each RSS link
As you can see in Figure 54, each RSS link will show a number of newest news in
that category. The number of news in each RSS link will depend on what site it is.
Moreover, this content will be automatically updated if there is any new news
appears. This content is displayed in the structure of XML (each site has different
components in its XML structure). With VNExpress XML format, each <item> node
is a news brief include: <title>, <description>, <link>, <pubDate>. Hence, we have to
create a WebService to read from VNExpress‟s XML structure to our database
(Microsoft SQLServer 2008).
Besides, the XML structure of VNExpress, especially in its <description> node is
not really well organized while they put description text in the same place with
58
<img> tag and other related links. That makes it harder to separate information that
we need for reformatting in our site. Therefore, we have to write a service that has
ability to filter and separate those things.
In order to display news on device‟s screen, first we need to put all data from our
database in a Sencha Touch Store (Ext.data.Store) and format them with our defined
template (Ext.regModel).
Figure 55 Process of getting news and display them on screen
59
3.2.2 Register
Figure 56 Register and log-in panel
For the first time used user, QTNews will ask you to create an account. In the
„Register” form, you will be asked to input 3 basic personal information: name,
password and your email. This clean and simple register form make user feel more
comfortable when using this web application on devices. If you had an account, you
can login in the “Login” form. After login or register process, QTNews will
remember your ID and generate session ID on your devices, hence, you do not need
to login the next time unless deleting cache. Moreover, for each time user access to
this application, system will keep track user‟s information such as user‟s device,
user‟s location, browser, start of using time…
3.2.3 Reading news
When a user selects news to read, system will start a timer to calculate the reading
time. Moreover, after reading a news, user will have a choice to rate for the news in
scale of 1 to 5 according to their satisfaction and expectation to read more similar
news. This rating will be used for the recommender system. The more news user
rates, the better news system recommends. One more point, the rating is always at
default of level 0 (on scale of 5). However, if the users forget to rate for the news
explicitly, we also suggest an implicit way to get users‟ behavior by their reading
60
time. There is a corresponding scale between period of reading and the 5-star rating
which we will give detail in chapter 4 experiment.
Figure 57 Rating form in news
3.2.4 “For U” and “Most read in week”
“For U” and “Most read in week” are our recommendation for users.
 Most read in week:
Each time a user selects news, the system will increase the counting for
that news by one. QTNews will select five recently most read news bases
on their counting to show on the recommendation panel.
 For U:
Using the data from user rating and RNMF algorithm, (more detail in 3.4),
our recommender system will calculate and suggest news that similar to
other users‟ behaviors for particular users.
Furthermore, users can pull down the panel for other suggestion list.
3.2.5 Additional and location-based services
Our additional and location-based services:
 Money exchange rate: Getting data from Vietcombank‟s site. These data
will automatically update if there is a change from Vietcombank.
61
Figure 58 Money exchange rate (VND)
 Gold rate: we getting this information from SJC‟s site. The same as
money rate, it will update by any change.
 Weather: this is a service that provides the weather forecast getting from
http://tuoitre.vn. The place shown in this is Vietnam‟s provinces.
Figure 59 Weather forecast
 Stock: Stock index is getting from VNExpress, including index from
HoChiMinh City, as well as Hanoi.
62
Figure 60 Stock service
 Bus route: getting information from http://buyttphcm.com.vn
Figure 61 Bus route
 Bus Station: This is a location-based service which data was collected by
FIT (HCMUS). It has ability to show the Bus station near around 500m
according to user‟s current position by clicking on “Bus Station” button.
When users click on the Bus marker on map, there is a message floating on
63
screen to show information about that station, such as: address, bus line
goes through…
Figure 62 Bus station nearby you
 Local advertisement: This service will provide users many
advertisements around their current position with the fullness of item
information: contact phone, price, category… Each item will denoted by a
red shopping cart marker on map. When clicking on these markers, the full
information will be shown.
In addition, if you want to post your own advertisement everywhere on
map, you can click on the blue shopping cart button, and then a red marker
will appear on map. You can drag this marker to your desired position.
After that, just by a click on the red marker, the “Ad Form” will be
displayed on screen for inputting item details.
Finally yet importantly, local advertisement feature also has a function to
choose the radius around you to find advertisement. The scale of this
search is between 1 and 10 kilometers. Otherwise, you can choose
“LocalAd” tab to switch the view of local advertisement to text only. In
this view, you can also know the exact distance from you to an
advertisement.
64
Figure 63 Local Advertisement
In the order to find the distance between you and an item (Bus station,
local advertisement), we have to deal with a formula [23] to estimate how
far it is:
Spherical law of cosines:
d =acos(sin(lat1).sin(lat2)cos(lat1).cos(lat2).cos(long2- long1)).R
With:
o lat1, long1 is latitude and longitude of point 1 (in radian)
o lat2, long2 is latitude and longitude of point 2 (in radian)
o d is the distance we want to estimate (in km)
o R is radius of The Earth (≈ 6371 km)
3.3 Graphic user interface
QTNews was developed to use on many smart devices: tablet and phone. For that
reason, we have two different graphic user interfaces for two these device types. In
tablet device, the view will larger for a comfortable using. Category list show directly
on the main toolbar and the news description has more information. Besides,
65
additional and local-based services show on the same panel with the news list. Make
it easier for users‟ experience.
Figure 64 QTNews on iPad with 1. Main toolbar with categories, 2. Main panel,
3. Suggestion panel, 4. Additional Services, 5. Map and Location-based services.
Figure 65 Location base services
66
Meanwhile, in phone version, with the limited place for displaying, we have to
minimize these components. Category list has put into a “drop list” just shown after
clicking on category button. The complete main view will use for the news list and
news detail. Additional and local-based services will be display in another view by
sliding right to left. Rating panel has no longer shown initially on the main view.
They just can be displayed when the user clicks on rating button.
Figure 66 QTNews on iPhone simulator with 1. Login button, 2. Back button, 3.
Rating panel, 4. Category button, 5. Category list, 6. News list
67
Figure 67 Rating on phone GUI, tested on iPhone
Figure 68 News detail, tested on Samsung ACE
68
Figure 69 News list, tested on Samsung ACE
Figure 70 Weather forecast, tested on Samsung ACE
69
Figure 71 Bus line information, tested on Samsung ACE
Figure 72 Money exchange rate, tested on Samsung ACE
70
3.4 Algorithm
3.4.1 Introduction
The problem is we want to recommend an appropriate list of news for a particular
user when he or she goes to our website. In order to do this, we can use many
approaches mentioned in the above sections. Specifically, recommender systems have
(i) background data, the information that the systems has before the recommendation
process begins, (ii) input data, the information that user must communicate to the
system in order to generate a recommendation, and (iii) an algorithm that combines
background and input data to arrive at its suggestion. On this basis, we can
distinguish five different recommendation techniques as shown in Table 5.
Table 5 Recommendation techniques [21]
(U is the set of users, I is the set of items, u is a user, i is an item)
Technique Background Input Process
Collaborative Ratings from U of
items in I
Ratings from u of
items in I
Identify users in U
similar to u, and
extrapolate from their
ratings of i
Content-based Features of items
in I
u‟s ratings of items
in I
Generate a classifier
that fits u‟s rating
behavior and use it on
i
Demographic Demographic
information about
U and their ratings
of items in I
Demographic
information about u
Identify users that are
demographically
similar to u, and
extrapolate from their
ratings of i
71
Utility-based Features of items
in I
A utility function
over items in I that
describes u‟s
preferences
Apply the function to
the items and
determine i‟s rank
Knowledge-
based
Features of items
in I. Knowledge of
how these items
meet user‟s needs
A description of u‟s
needs or interests
Infer a match between
i and u‟s need
For our thesis‟s scope, knowledge-based seems not suitable since it requires
expert knowledge to classify the items‟ domain. The demographic approach and
content-based approach require profiles of users and items. It is not common for a
news site to have a long registration form or a long survey with all information such
as gender, age, salary, etc. Moreover, the process of extracting content of news is
rather complicated and needs many works. In addition, it may contain many noisy
features if the extracting method is not good enough. In the past decades,
collaborative filtering based systems have been popular and used in many fields due
to their performance and easy implementation. Collaborative filtering is categorized
into memory-based methods (neighborhood-based methods) and model-based
methods. However, memory-based methods suffer from both the data-sparsity and
the scalability problem. Due to the sparsity of the user-item rating matrix, memory-
based methods may fail to correctly identify the most similar users or items, which in
turn reduce the recommender accuracy. On the other hand, when the number of users
and items are very large in real application, the search of most similar neighbors is
time consuming. To overcome those limitations, model-based approaches have been
proposed which establish a model using the observed ratings that can interpret the
given data and predict the unknown ratings. Due to the efficiency in handling very
huge data sets, matrix factorization based model has become one of the most popular
72
models among the model-based methods. Therefore, we choose the model-based
approach to implement our recommender system.
3.4.2 The concept
To start calculating, a recommendation system needs some input information such
as a set of users, a set of items(movies, books…), rating, category, user features (age,
gender, hobby…), user‟s history(favorite items, tag, trading history…). Different
approaches may use different kinds of input information. The most popular input
information is group of users, group of items and rating score. With that information,
we can define the problem as followed:
 Set of users:  NU ,...,1 , N is the number of users
 Set of items:  MI ,...,1 , M is the number of items in the system
 A matrix  MNR  contains all ratings that users in set U have assigned to
items in set I
A recommendation system will predict ratings for items that users have not yet
rated and then suggest high rating-items for them. All the ratings that users have
assigned to the items will be stored in matrix R, with   0, jiR means that user i has
rated item j,   0, jiR means that user i has not yet rated item j and that will be the
value the recommendation system need to predict.
I1 I2 I3 I4
U1 5 4 3 0
U2 4 5 5 3
U3 3 0 4 0
U4 5 3 3 4
Table 6 Example of rating matrix
For example, we need to predict ratings for  4,1R ,  2,3R ,  4,3R such that the
values would be consistent with the existing ratings in the matrix. For user-based
approach, U1 is quite similar to U4 in rating items I1, I2, I3, then we may predict
73
  44,1 R . For item-based approach, I1 and I4 are more similar than the other, so
  44,1 R .
In recommendation point of view, there should be some latent features that
determine how a user rates items. Hence, if we can discover these latent features, we
should be able to predict a rating with respect to a certain user and a certain item,
because the features associated with the user should match with the features
associated with the item. Some of the most successful realization of latent factor
models is based on matrix factorization. Matrix factorization characterized both items
and users by vectors of factors inferred from item rating patterns. High
correspondence between item and user factors leads to a recommendation.
Matrix factorization is to find out two (or more) matrices such that when we
multiply them, we will get a new matrix where values are approximate to those in
original matrix. Thus, the result matrix contains the predicted scores corresponding to
not yet rated items in original matrix.
3.4.3 The mathematics of matrix factorization
As mentioned above, we have a set U of users, a set I of items, and a matrix R of
size |||| IU  . Let matrix P of size KU || and Q of size KI || be two matrices we
need to find [24], K is the number of features or the number of dimension we want to
reduce from initial matrix ( IK  ). Therefore, we have:
RQPR T ˆ (1)
Each user iU is described by a row iP of matrix P, and each item jI is described
by a column j
T
Q of matrix T
Q . A prediction of a rating of a item jI by user iU is then
given by dot product of their feature vectors.
T
kjik
K
k
T
jiij QPQPR  
 1
ˆ (2)
Where ikP and kj
T
Q are the components of the vectors ikP and j
T
Q . ijRˆ is the
predicted rating of an item jI by user iU ,
74
For each ijRˆ , we will calculate the error between the estimated rating and the real
rating, and then try to minimize the error iteratively. The error is calculated as
followed:
2
1
22
)()ˆ(
T
kj
K
k ikijijijij QPRRRe  
 (3)
The estimated rating can be either higher or lower than the real rating; therefore,
we consider the squared error.
To minimize this error, we apply gradient descent algorithm that is also known as
the steepest descent to find the local minimum. Our task now is to minimize equation
(3), min2
ije . First, we do the partial derivative the equation (3) with respect to
each variable separately.
kj
T
ijkj
T
ijijij
ik
QeQRRe
P
 2))(ˆ(2
2


(4)
ikijikijijij
kj
T
PePRRe
Q
 2))(ˆ(2
2


(5)
Now, we know the gradient at the current values. In other words, we know in
which direction we have to modify the values of ikP , T
kjQ such that their product
approximates the corresponding element in matrix R. We obtain the following update
equations:
kj
T
ijikij
ik
ikik QePe
P
PP 


 22
 (6)
ikijkj
T
ij
kj
T
kj
T
kj
T
PeQe
Q
QQ 


 22


(7)
 is a constant whose value determine the rate of approaching the minimum. This
learning rate controls how much of the errors slope is added to the new feature value.
The value  is usually very small, say 0.001 [25]. This is because if we make too
large a step toward the minimum we may run into the risk of missing the minimum
and end up oscillating around the minimum.
75
However, if the product of two matrices P and Q approximates R, is not that our
predictions of all unrated values will all be zeros? In fact, we are not really trying to
come up with P and Q such that we can reproduce exactly matrix R. Instead, we only
try to minimize the errors of the observed user-item pairs. In other words, if we let T
be a set of tuples, each of which is in the form of ),,( ijji RIU , such that T contains all
the observed user-item pairs together with the associated ratings, we are only trying
to minimize every ije for TRIU ijji ),,( . T is our set of training data. For the rest of
the unknowns, we will be able to determine their values once the associations
between the users, items and features have been learnt.
Using the above update rules, we can then iteratively perform the operation until
the error converges to its minimum. We can check overall error as calculated using
the following equation and determine when we should stop the progress.
   
 TRIU
K
k
kj
T
ikijTRIU ij
ijjiijji
QPReE ),,( 1
2
),,(
)( (8)
The above algorithm is as very basic algorithm for factorizing a matrix. A
common extension to this basic algorithm is to introduce regularization with a factor
 to avoid over fitting. This addition will partially suppress overtraining and
improve the overall performance. The update equations change to:
)2()( 2
ikkj
T
ijikikij
ik
ikik PQePPe
P
PP 


  (9)
)2()( 2
kj
T
ikijkj
T
kj
T
ij
kj
T
kj
T
kj
T
QPeQQe
Q
QQ 


 

(10)
The new parameter  is used to control the magnitudes of the user-feature and
item-feature vectors such that P and Q would give a good approximation of R without
having to contain large numbers. In practice,  is set to some values in the range of
0.02. The new squared error can be obtained by:
)||||||(||
2
)()(
2
)( 222
11
22
1
2 2
TK
k
kj
T
ikijkj
TK
k
ik
K
k
kj
T
ikijij QPQPRQPQPRe   

(11)
76
3.4.4 The RNMF algorithm
Normally there are two parts in a recommendation problem. First, we calculate or
predict ratings of items that users have not yet rated. Then, based on those predicting
ratings, the system will suggest items for users. We apply regularization non-negative
matrix factorization algorithm (RNMF) to solve the first part of the problem.
The RNMF has following steps:
Figure 73 RNMF algorithm steps
 Step1: Initialize two matrices P, Q with some non-negative random values.
The first step in matrix factorization approach is to initialize two matrices P, Q
and to assign some values to matrices‟ elements. These values have to be non-
negative and small enough to avoid losing the minimum distance when calculating
the distance between the estimated rating matrix and real rating matrix. We will
assign random number from 0 to 1 to matrices P, Q.
 Step 2: Calculate the error between the estimated rating and real rating
The error at each element will be calculated only when it is assigned a rating by
users. The error is computed as follows:
)0(ˆ
1
   ij
T
kj
K
k ikijijijij RQPRRRe
 Step 3: Update matrices‟ elements
We modify each element in the matrices as follows:
)2(2
ikkj
T
ijikij
ik
ikik PQePe
P
PP 


 
Step 1:
Initializetwo
matrices P, Q with
some non-negative
random values
Step 2:
Calculatethe error
betweenthe
estimatedrating
and real rating
Step 3:
Update values in
matrices P, Q in
order to minimize
the error
Step 4:
Calculatethe overall
error
77
)2(2
kj
T
ikijkj
T
ij
kj
T
kj
T
kj
T
QPeQe
Q
QQ 


 

 Step 4: Calculate the overall error.
If the overall error is small enough (smaller than 0.001), the product of two
matrices P, Q approximates the original matrix R, then we can end the process.
Otherwise, we have to come back to step two.
)||||||(||
2
)()(
2
)( 222
11
22
1
2 2
TK
k
kj
T
ikijkj
TK
k
ik
K
k
kj
T
ikijij QPQPRQPQPRe   

3.4.5 The pseudo code
1: Input R, P, QT, K, alpha, beta, steps
2: Initialize P, QT with random values from 0 to 1
3: for step1 to steps
4: for i1 to len(R)
5: for j1 to len(R[i])
6: if R[i,j] >0 then
7: eij  

K
k
jkQTkiPjiR 1
],[*],[],[
8: for k1 to K
9: ]),[*],[**2(*],[],[ kiPbetajkQTeijalphakiPkiP 
10: ]),[*],[**2(*],[],[ jkQTbetakiPeijalphajkQTjkQT 
11: for i1 to len(R)
12: for j1 to len(R[i])
13: if R[i,j] >0 then
14: e = e +  2
1
],[*],[],[  

K
k
jkQTkiPjiR
15: for k1 to K
16: e = e + (beta/2)* ]),[],[( 22
jkQTkiP 
17: if e < 0.001 then break
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework
News with Recommendations Using Sencha Touch Framework

Contenu connexe

En vedette

Demand Assessment for Green Construction Training
Demand Assessment for Green Construction TrainingDemand Assessment for Green Construction Training
Demand Assessment for Green Construction Traininghmhunt
 
Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009
Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009
Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009Nick Jankowski
 
Las redes sociales cara a cara
Las redes sociales cara a caraLas redes sociales cara a cara
Las redes sociales cara a caraGersón Beltran
 
Zija plan de_compensacion_es
Zija plan de_compensacion_esZija plan de_compensacion_es
Zija plan de_compensacion_esBranya Esparza
 
OpenAIRE compatibility for DSpace repositories - OR 2014 workshop
OpenAIRE compatibility for DSpace repositories - OR 2014 workshop OpenAIRE compatibility for DSpace repositories - OR 2014 workshop
OpenAIRE compatibility for DSpace repositories - OR 2014 workshop OpenAIRE
 
5 Herramientas de Administración de Proyectos
5 Herramientas de Administración de Proyectos5 Herramientas de Administración de Proyectos
5 Herramientas de Administración de ProyectosDimitri Villamar
 
WebTag: Smart Tag with Embedded Web Server
WebTag: Smart Tag with Embedded Web ServerWebTag: Smart Tag with Embedded Web Server
WebTag: Smart Tag with Embedded Web ServerJonathan Ruiz de Garibay
 
Feed me, Seymour! Supplemental User Data For IBM Connections Profiles
Feed me, Seymour!  Supplemental User Data For IBM Connections ProfilesFeed me, Seymour!  Supplemental User Data For IBM Connections Profiles
Feed me, Seymour! Supplemental User Data For IBM Connections ProfilesMartin Leyrer
 
Como hacer bolso de cuero
Como hacer bolso de cueroComo hacer bolso de cuero
Como hacer bolso de cueroNoemiMunoz
 
EL BORN - LA GUERRA DE SUCESIÓN
EL BORN - LA GUERRA DE SUCESIÓNEL BORN - LA GUERRA DE SUCESIÓN
EL BORN - LA GUERRA DE SUCESIÓNManel Cantos
 
Informe Comunidades de Practica Integrabilidad - 2013 2015
Informe Comunidades de Practica Integrabilidad - 2013 2015Informe Comunidades de Practica Integrabilidad - 2013 2015
Informe Comunidades de Practica Integrabilidad - 2013 2015Florencia Garcia Rambeaud
 
Energy management information system in public buildings
Energy management information system in public buildingsEnergy management information system in public buildings
Energy management information system in public buildingsUNDP Eurasia
 
Exportar un producto
Exportar un productoExportar un producto
Exportar un productoluis suarez
 

En vedette (16)

Demand Assessment for Green Construction Training
Demand Assessment for Green Construction TrainingDemand Assessment for Green Construction Training
Demand Assessment for Green Construction Training
 
Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009
Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009
Jankowski, Wcu Workshop Social Media, Revised2, 21 Aug2009
 
Las redes sociales cara a cara
Las redes sociales cara a caraLas redes sociales cara a cara
Las redes sociales cara a cara
 
Zija plan de_compensacion_es
Zija plan de_compensacion_esZija plan de_compensacion_es
Zija plan de_compensacion_es
 
Gamesa Geep
Gamesa GeepGamesa Geep
Gamesa Geep
 
OpenAIRE compatibility for DSpace repositories - OR 2014 workshop
OpenAIRE compatibility for DSpace repositories - OR 2014 workshop OpenAIRE compatibility for DSpace repositories - OR 2014 workshop
OpenAIRE compatibility for DSpace repositories - OR 2014 workshop
 
5 Herramientas de Administración de Proyectos
5 Herramientas de Administración de Proyectos5 Herramientas de Administración de Proyectos
5 Herramientas de Administración de Proyectos
 
WebTag: Smart Tag with Embedded Web Server
WebTag: Smart Tag with Embedded Web ServerWebTag: Smart Tag with Embedded Web Server
WebTag: Smart Tag with Embedded Web Server
 
Feed me, Seymour! Supplemental User Data For IBM Connections Profiles
Feed me, Seymour!  Supplemental User Data For IBM Connections ProfilesFeed me, Seymour!  Supplemental User Data For IBM Connections Profiles
Feed me, Seymour! Supplemental User Data For IBM Connections Profiles
 
Como hacer bolso de cuero
Como hacer bolso de cueroComo hacer bolso de cuero
Como hacer bolso de cuero
 
Macleod runic
Macleod runicMacleod runic
Macleod runic
 
EL BORN - LA GUERRA DE SUCESIÓN
EL BORN - LA GUERRA DE SUCESIÓNEL BORN - LA GUERRA DE SUCESIÓN
EL BORN - LA GUERRA DE SUCESIÓN
 
Informe Comunidades de Practica Integrabilidad - 2013 2015
Informe Comunidades de Practica Integrabilidad - 2013 2015Informe Comunidades de Practica Integrabilidad - 2013 2015
Informe Comunidades de Practica Integrabilidad - 2013 2015
 
Energy management information system in public buildings
Energy management information system in public buildingsEnergy management information system in public buildings
Energy management information system in public buildings
 
La Verona de los Capuleto y los Montesco
La Verona de los Capuleto y los MontescoLa Verona de los Capuleto y los Montesco
La Verona de los Capuleto y los Montesco
 
Exportar un producto
Exportar un productoExportar un producto
Exportar un producto
 

Similaire à News with Recommendations Using Sencha Touch Framework

Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...
Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...
Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...sividocz
 
Computational methods of Hepatitis B virus genotyping
Computational methods of Hepatitis B virus genotypingComputational methods of Hepatitis B virus genotyping
Computational methods of Hepatitis B virus genotypingNguyen Nhat Tien
 
Iset portal with o365 and SP online
Iset portal with o365 and SP onlineIset portal with o365 and SP online
Iset portal with o365 and SP onlineKhouloud Ben Cheikh
 
Student Work Experience Programme (SWEP 1) Technical Report by Michael Agwulonu
Student Work Experience Programme (SWEP 1) Technical Report by Michael AgwulonuStudent Work Experience Programme (SWEP 1) Technical Report by Michael Agwulonu
Student Work Experience Programme (SWEP 1) Technical Report by Michael AgwulonuMichael Agwulonu
 
Difficulties In Translating Financial News Into Vietnamese.doc
Difficulties In Translating Financial News Into Vietnamese.docDifficulties In Translating Financial News Into Vietnamese.doc
Difficulties In Translating Financial News Into Vietnamese.docsividocz
 
Nghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh học
Nghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh họcNghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh học
Nghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh họcTÀI LIỆU NGÀNH MAY
 
Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...
Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...
Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...SadokZgolli
 
Here project final report appendices
Here project final report appendicesHere project final report appendices
Here project final report appendicesSarah_Lawther
 
Design and Implementation Of A Virtual Learning System (A case study of Adele...
Design and Implementation Of A Virtual Learning System (A case study of Adele...Design and Implementation Of A Virtual Learning System (A case study of Adele...
Design and Implementation Of A Virtual Learning System (A case study of Adele...Mekitmfon AwakEssien
 
A Study On Complex Sentences In English With Reference To Vietnamese.doc
A Study On Complex Sentences In English With Reference To Vietnamese.docA Study On Complex Sentences In English With Reference To Vietnamese.doc
A Study On Complex Sentences In English With Reference To Vietnamese.docsividocz
 
4TMA - Le Vuong Nhat Nghi
4TMA - Le Vuong Nhat Nghi4TMA - Le Vuong Nhat Nghi
4TMA - Le Vuong Nhat NghiNghi L
 
The Broad Strokes Of Beginning A Technology
The Broad Strokes Of Beginning A TechnologyThe Broad Strokes Of Beginning A Technology
The Broad Strokes Of Beginning A TechnologyAudra Robertson
 
How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...
How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...
How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...sividocz
 
Accounting And Financial Statements
Accounting And Financial StatementsAccounting And Financial Statements
Accounting And Financial StatementsMelinda Watson
 
Dr atif shahzad_engg_ management_module_01
Dr atif shahzad_engg_ management_module_01Dr atif shahzad_engg_ management_module_01
Dr atif shahzad_engg_ management_module_01Atif Shahzad
 

Similaire à News with Recommendations Using Sencha Touch Framework (20)

Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...
Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...
Effective Methods To Improve Speaking Skill For English Major Freshmen At Hai...
 
Computational methods of Hepatitis B virus genotyping
Computational methods of Hepatitis B virus genotypingComputational methods of Hepatitis B virus genotyping
Computational methods of Hepatitis B virus genotyping
 
Iset portal with o365 and SP online
Iset portal with o365 and SP onlineIset portal with o365 and SP online
Iset portal with o365 and SP online
 
Internship Period At Pineal Media Services Trading Limited Company For A Week
Internship Period At Pineal Media Services Trading Limited Company For A WeekInternship Period At Pineal Media Services Trading Limited Company For A Week
Internship Period At Pineal Media Services Trading Limited Company For A Week
 
Student Work Experience Programme (SWEP 1) Technical Report by Michael Agwulonu
Student Work Experience Programme (SWEP 1) Technical Report by Michael AgwulonuStudent Work Experience Programme (SWEP 1) Technical Report by Michael Agwulonu
Student Work Experience Programme (SWEP 1) Technical Report by Michael Agwulonu
 
Difficulties In Translating Financial News Into Vietnamese.doc
Difficulties In Translating Financial News Into Vietnamese.docDifficulties In Translating Financial News Into Vietnamese.doc
Difficulties In Translating Financial News Into Vietnamese.doc
 
Shadow Economy In The Relationship With Fdi, Institutional Quality, And Incom...
Shadow Economy In The Relationship With Fdi, Institutional Quality, And Incom...Shadow Economy In The Relationship With Fdi, Institutional Quality, And Incom...
Shadow Economy In The Relationship With Fdi, Institutional Quality, And Incom...
 
Nghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh học
Nghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh họcNghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh học
Nghiên cứu công nghệ thủy phân và lên men đồng thời lục bình thành cồn sinh học
 
Luận Văn A Study On Translation Of Economic And Trade Terminology From Englis...
Luận Văn A Study On Translation Of Economic And Trade Terminology From Englis...Luận Văn A Study On Translation Of Economic And Trade Terminology From Englis...
Luận Văn A Study On Translation Of Economic And Trade Terminology From Englis...
 
Luận văn Thạc sĩ a study on second year english major students’ dificulties i...
Luận văn Thạc sĩ a study on second year english major students’ dificulties i...Luận văn Thạc sĩ a study on second year english major students’ dificulties i...
Luận văn Thạc sĩ a study on second year english major students’ dificulties i...
 
Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...
Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...
Rapport Stage PFE Bureau D'étude Electricité : ÉTUDE DE L’INSTALLATION ÉLECTR...
 
Here project final report appendices
Here project final report appendicesHere project final report appendices
Here project final report appendices
 
Design and Implementation Of A Virtual Learning System (A case study of Adele...
Design and Implementation Of A Virtual Learning System (A case study of Adele...Design and Implementation Of A Virtual Learning System (A case study of Adele...
Design and Implementation Of A Virtual Learning System (A case study of Adele...
 
A Study On Complex Sentences In English With Reference To Vietnamese.doc
A Study On Complex Sentences In English With Reference To Vietnamese.docA Study On Complex Sentences In English With Reference To Vietnamese.doc
A Study On Complex Sentences In English With Reference To Vietnamese.doc
 
4TMA - Le Vuong Nhat Nghi
4TMA - Le Vuong Nhat Nghi4TMA - Le Vuong Nhat Nghi
4TMA - Le Vuong Nhat Nghi
 
The Broad Strokes Of Beginning A Technology
The Broad Strokes Of Beginning A TechnologyThe Broad Strokes Of Beginning A Technology
The Broad Strokes Of Beginning A Technology
 
Thesis job satisfaction trung hai company
Thesis job satisfaction trung hai companyThesis job satisfaction trung hai company
Thesis job satisfaction trung hai company
 
How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...
How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...
How English Clubs Can Be Helpful For Hpu English Majors In Improving Speaking...
 
Accounting And Financial Statements
Accounting And Financial StatementsAccounting And Financial Statements
Accounting And Financial Statements
 
Dr atif shahzad_engg_ management_module_01
Dr atif shahzad_engg_ management_module_01Dr atif shahzad_engg_ management_module_01
Dr atif shahzad_engg_ management_module_01
 

News with Recommendations Using Sencha Touch Framework

  • 1. UNIVERSITY OF SCIENCE ADVANCED PROGRAM IN COMPUTER SCIENCE LE MINH QUOC - NGUYEN MINH PHUONG THAO NEWS WITH RECOMMENDATIONS USING SENCHA TOUCH FRAMEWORK BACHELOR OF SCIENCE IN COMPUTER SCIENCE HO CHI MINH CITY, 2012
  • 2. UNIVERSITY OF SCIENCE ADVANCED PROGRAM IN COMPUTER SCIENCE LE MINH QUOC 0712742 NGUYEN MINH PHUONG THAO 0712746 NEWS WITH RECOMMENDATIONS USING SENCHA TOUCH FRAMEWORK BACHELOR OF SCIENCE IN COMPUTER SCIENCE THESIS ADVISOR DR. DINH BA TIEN HO CHI MINH CITY, 2012
  • 3. i ACKNOWLEDGMENTS We would like to dedicate our sincere gratefulness to our advisor, Dr. Dinh Ba Tien, who has always enthusiastically instructed and encouraged us during our study and thesis period. We would like to thank APCS – Advanced Program in Computer Science and Faculty of Information Technology – University of Science – Vietnam National University HCM, for providing an outstanding and active environment during whole student time. We would like to say thanks to all professors, teaching assistants in APCS and Faculty of Information Technology who have taught us with all their hearts and prepared us with treasure knowledge. And we want to give special thanks to Professor Duong Nguyen Vu, who has always wholeheartedly inspired and motivated us. We would like to thank Mr. Ho Tuan Thanh and Mr. Nguyen Le Nguyen Ngu for helping us during thesis period. We also send our appreciation to all our friends who had been helping us by contributing in our reviewing and experimenting processes; and by encouraging, providing us very useful information and tips regarding our thesis. We would like to dedicate this achievement to our family who give us greatest support during the past period. Although we have tried our best to finish the thesis with highest quality and performance, it for sure remains some issues. Thus, we would like to receive feedback from our advisor, professors, teaching assistants, and our friends. Thank you very much. Quoc Le – Thao Nguyen
  • 4. ii TABLE OF CONTENTS  ACKNOWLEDGMENTS .................................................................................................... i TABLE OF CONTENTS.................................................................................................... ii LIST OF FIGURES........................................................................................................... iv LIST OF TABLES ........................................................................................................... vii ABSTRACT ................................................................................................................... viii Chapter 1 Introduction.................................................................................................... 1 1.1 Problem statement ............................................................................................... 1 1.2 Related works...................................................................................................... 2 1.2.1 Baomoi Mobi .........................................................................................................2 1.2.2 Xalo Mobile ...........................................................................................................3 1.2.3 VNExpress Mobile .................................................................................................6 1.2.4 Tuoitre Mobile........................................................................................................7 1.2.5 OhPan news .........................................................................................................10 1.2.6 Amazon store .......................................................................................................11 1.2.7 Gowalla................................................................................................................13 1.3 Objectives ......................................................................................................... 15 Chapter 2 Background.................................................................................................. 17 2.1 Tablet................................................................................................................ 17 2.1.1 Overview..............................................................................................................17 2.1.2 History.................................................................................................................17 2.2 Smartphone....................................................................................................... 19 2.2.1 Overview..............................................................................................................19 2.2.2 iOS ......................................................................................................................21 2.2.3 Android OS..........................................................................................................22 2.3 Location-based services..................................................................................... 24 2.4 Sencha Touch cross-platform framework ........................................................... 26 2.4.1 Introduction..........................................................................................................26 2.4.2 Sencha Touch UI..................................................................................................28 2.5 Recommendation systems.................................................................................. 41 2.5.1 Introduction..........................................................................................................41 2.5.2 User‟s feedbacks...................................................................................................42 2.5.3 Recommendation methods ....................................................................................43 Chapter 3 News website with Recommendations....................................................... 52 3.1 Database ........................................................................................................... 54 3.2 Functionality..................................................................................................... 55
  • 5. iii 3.2.1 Getting News........................................................................................................55 3.2.2 Register................................................................................................................59 3.2.3 Reading news .......................................................................................................59 3.2.4 “For U” and “Most read in week”..........................................................................60 3.2.5 Additional and location-based services ..................................................................60 3.3 Graphic user interface........................................................................................ 64 3.4 Algorithm ......................................................................................................... 70 3.4.1 Introduction..........................................................................................................70 3.4.2 The concept..........................................................................................................72 3.4.3 The mathematics of matrix factorization ................................................................73 3.4.4 The RNMF algorithm ...........................................................................................76 3.4.5 The pseudo code...................................................................................................77 3.4.6 Our problem.........................................................................................................78 Chapter 4 Experiment ................................................................................................... 80 4.1 Purpose............................................................................................................. 80 4.2 Methods............................................................................................................ 80 4.2.1 Survey..................................................................................................................80 4.2.2 Reading time ........................................................................................................81 4.2.3 Mapping...............................................................................................................81 4.3 Result and analysis ............................................................................................ 84 Chapter 5 Conclusion and Future work....................................................................... 86 5.1 Conclusion........................................................................................................ 86 5.2 Future work....................................................................................................... 86 REFERENCES................................................................................................................ 88 APPENDICES................................................................................................................. 90 A. iOS device specification......................................................................................... 90 B. User guide (in Vietnamese).................................................................................... 96 C. Reading speed ......................................................................................................105 D. Reading time test data...........................................................................................105
  • 6. iv LIST OF FIGURES  Figure 1 Baomoi Mobi remarkable news ............................................................................ 2 Figure 2 Baomoi Mobi news details.................................................................................... 3 Figure 3 Xalo Mobile app homepage.................................................................................. 4 Figure 4 Xalo Mobile news ................................................................................................ 5 Figure 5 Xalo Mobile stock news ....................................................................................... 5 Figure 6 VNExpress tablet version ..................................................................................... 6 Figure 7 VNExpress phone version .................................................................................... 7 Figure 8 Tuoitre Mobile on iPad......................................................................................... 8 Figure 9 Tuoitre Mobile news detail on iPhone................................................................... 9 Figure 10 Tuoitre Mobile‟s additional services.................................................................... 9 Figure 11 Tuoitre Mobile Television program..................................................................... 9 Figure 12 Tuoitre Mobile's radio ........................................................................................ 9 Figure 13 OhPan main screen on iPhone........................................................................... 10 Figure 14 OhPan rating feature......................................................................................... 11 Figure 15 Amazon Betterizer............................................................................................ 12 Figure 16 Amazon's recommendation............................................................................... 13 Figure 17 Recommendation base on other shoppers‟ choices............................................. 13 Figure 18 Gowalla on iPad............................................................................................... 14 Figure 19 HP Compaq tablet PC with rotating/removable keyboard................................... 18 Figure 20 Ipad ................................................................................................................. 19 Figure 21 IBM Simon (introduced in 1992) ...................................................................... 20 Figure 22 The Nokia 9210 Communicator........................................................................ 20 Figure 23 iOS 5.0.1 running on an iPhone 4S.................................................................... 22 Figure 24 Home screen of Android OS............................................................................. 23 Figure 25 The basic components of an LBS [8]................................................................. 25 Figure 26 GitHub, one of the best examples for Sencha Touch using, created by Steffen Hiller ................................................................................................................... 27 Figure 27 Demonstration of some Panel content areas....................................................... 29 Figure 28 Toolbar can be used flexibly ............................................................................. 29 Figure 29 Flip transition to change between cards............................................................. 30 Figure 30 FormPanel's components .................................................................................. 31 Figure 31 FormPanel on iPhone ....................................................................................... 32
  • 7. v Figure 32 Difference input widgets base on type of device it is running on ........................ 32 Figure 33 Sheets in portrait mode..................................................................................... 33 Figure 34 Sheets in landscape mode ................................................................................. 33 Figure 35 ActionSheet displayed with buttons................................................................... 34 Figure 36 MessageBox implementation............................................................................ 34 Figure 37 An example of MessageBox ............................................................................. 35 Figure 38 Template for Bus Route DataView.................................................................... 36 Figure 39 Bus Route DataView........................................................................................ 36 Figure 40 An example of List view................................................................................... 37 Figure 41 An example of NestedList view ........................................................................ 37 Figure 42 Getting Geo information is easier and easier...................................................... 38 Figure 43 Google Map in Sencha Touch API.................................................................... 39 Figure 44 An example of playing video on tablet .............................................................. 39 Figure 45 Playing video with a few lines of code .............................................................. 40 Figure 46 Recommender system as a black box ................................................................ 42 Figure 47 Monolithic hybridization design [22] ................................................................ 51 Figure 48 Parallelized hybridization design [22] ............................................................... 51 Figure 49 Pipelined hybridization design [22]................................................................... 51 Figure 50 QTNews interface ............................................................................................ 53 Figure 51 QTNews project structure................................................................................. 53 Figure 52 QTNews database structure............................................................................... 54 Figure 53 VNExpress RSS............................................................................................... 56 Figure 54 Content in each RSS link .................................................................................. 57 Figure 55 Process of getting news and display them on screen........................................... 58 Figure 56 Register and log-in panel .................................................................................. 59 Figure 57 Rating form in news ......................................................................................... 60 Figure 58 Money exchange rate (VND)............................................................................ 61 Figure 59 Weather forecast............................................................................................... 61 Figure 60 Stock service.................................................................................................... 62 Figure 61 Bus route.......................................................................................................... 62 Figure 62 Bus station nearby you...................................................................................... 63 Figure 63 Local Advertisement ........................................................................................ 64 Figure 64 QTNews on iPad with 1. Main toolbar with categories, 2. Main panel, 3. Suggestion panel, 4. Additional Services, 5. Map and Location-based services. ................. 65 Figure 65 Location base services ...................................................................................... 65
  • 8. vi Figure 66 QTNews on iPhone simulator with 1. Login button, 2. Back button, 3. Rating panel, 4. Category button, 5. Category list, 6. News list.......................................... 66 Figure 67 Rating on phone GUI, tested on iPhone............................................................. 67 Figure 68 News detail, tested on Samsung ACE................................................................ 67 Figure 69 News list, tested on Samsung ACE ................................................................... 68 Figure 70 Weather forecast, tested on Samsung ACE........................................................ 68 Figure 71 Bus line information, tested on Samsung ACE .................................................. 69 Figure 72 Money exchange rate, tested on Samsung ACE................................................. 69 Figure 73 RNMF algorithm steps ..................................................................................... 76 Figure 74 Graph of average reading time per word............................................................ 83
  • 9. vii LIST OF TABLES  Table 1 Various groups of UI widgets available in the Sencha Touch framework [9] ......... 28 Table 2 Description of the most common user gestures, alongside their desktop counterparts [9]................................................................................................................ 40 Table 3 Tradeoffs between recommendation techniques [21]............................................. 49 Table 4 List of tables in database...................................................................................... 55 Table 5 Recommendation techniques [21] ........................................................................ 70 Table 6 Example of rating matrix ..................................................................................... 72 Table 7 Rating matrix....................................................................................................... 79 Table 8 Result matrix after running RNMF....................................................................... 79 Table 9 Reading time test data to find out the average reading time ................................... 82 Table 10 Mapping between star scale and reading time ..................................................... 83
  • 10. viii ABSTRACT Smartphones and tablets become very popular nowadays. With the widespread of internet, users can use their smartphones, tablets to read news, search information, check mails, etc. anywhere at any time. A news web application for tablets and smartphones is not new to Vietnamese internet users. However, most of those applications have no recommendations unless the online newspaper has to do it manually for news. They do not provide users beautiful interfaces and some of them are overwhelming with advertisements. Figure out this fact, our group would like to build our own web application for reading news with new user interface and provide new experiences for users using tablets and smartphones. As the result, QTNews is a website based on Sencha Touch framework and provides daily news from Vietnamese online newspaper VNExpress. This new framework allows QTNews to run on different platforms such as tablets, smartphones, and PCs, which looked and felt like a native application. Applying regularization non-negative matrix factorization algorithm for collaborative filtering, QTNews suggests a list of news to a user from users‟ behavior such as the ratings (explicitly), the reading time (implicitly). Furthermore, QTNews offers users some services like searching bus stations, advertisements around them and other essential information such as weather forecast, stock index, foreign exchange rate, etc. We have successfully released and tested with real users. We collected data and feedbacks from users and revised our website to make it more useful and friendly.
  • 11. 1 Chapter 1 Introduction 1.1 Problem statement According to Gartner‟s recent market research [1], Worldwide smart phone sales will reach 468 million units in 2011. By 2012, 47 percent of the total mobile device market would be OS devices. By 2015, as their prediction, 67 percent of all open OS devices will have an average selling price of $300 or below. This research is proving that smartphone and tablet are becoming an important part of our daily life. In Vietnam, this number is 32.2 percent for smartphone in device market in 2011 [2]. With the trend, by 2015, the proportion will be 50/50 and keep increasing day by day [2]. Besides that, smartphone and tablet are now getting better, faster and more convenience to use with high-resolution cameras, multi-touch technology, GPS (Global Positioning System), 4G. There is a race between big companies such as HTC, Samsung, LC, ACER, especially APPLE. With all the technology in just a small device, the customer‟s need is getting higher. Obviously, one of them is news reading everywhere, anytime with the demand of recommendation from system. In addition, another need is location-based services: Where am I? What is around me? [3] Moreover, the new appearance of HTML5, which called the future of web, is changing the way users interfere with websites. When the best feature is HTML5 can run on many browsers, user-friendly GUI, it becomes the best choice for mobile app and web development since many of its features were built with the consideration of being able to run on low-powered devices such as smartphones and tablets. One of the best HTML5 supported frameworks is Sencha Touch (Sencha Inc). Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android and BlackBerry touch devices [4].
  • 12. 2 Interested and motivated by these new things: devices, frameworks, social needs, especially there is no product that combine those above things in Vietnam. We want to create the first product for reading news on tablet using one of the newest HTML5 frameworks with location-based services and have recommendation system included. 1.2 Related works 1.2.1 Baomoi Mobi1 Baomoi Mobi is a news reading services on phone developed by Felix Studios. News audio and getting news from more than 100 sources in Vietnam are Baomoi‟s dominant features. Users can hear the reading voices for an article. Moreover, Baomoi Mobi is now supporting for than 1000 phone types from smartphones to the low-tech phones. However, you will be charged 15,000 VND for 30 days of using. Figure 1 Baomoi Mobi remarkable news 1 You can visit Baomoi Mobi at http://baomoi.mobi/
  • 13. 3 Figure 2 Baomoi Mobi news details We can see that Baomoi Mobi has a simple GUI for remarkable news panel because it has to fit with many phone types. Besides, Baomoi Mobi is purely a news reading mobile app. They provide no additional services, which are now being commonly asked by high tech users. 1.2.2 Xalo Mobile2 Xalo Mobile is a news mobile application for mobile device. Xalo Mobile is considered as one of the most comprehensive application with various services in it. Tinhvan Telecom is the developing company created Xalo Mobile. With user- friendly GUI, Xalo Mobile easily attracts users for the first time. Xalo‟s getting news from more than 70 sources with rate of updating is 2mins/time. 2 You can visit Xalo Mobile at http://mobile.xalo.vn/
  • 14. 4 Figure 3 Xalo Mobile app homepage Furthermore, Xalo provides many services such as:  Xalo News: News from more than 70 sources with the update rate is 2mins/time. Xalo has many various categories with news brief for each.  Xalo Photo: Easy-to-use graphic user interface. Many categories for different users‟ tastes.  Xalo Game: Fee charged service. Games for mobiles with many type: Sport, arcade, racing ...  Xalo Relax: Satisfy users‟ relaxing needs with daily update stories.  Xalo Music: Users can listen online or they can download to their devices. Updated with newest albums and hit songs.
  • 15. 5  Xalo, Video: Newest videos from domestic and international source. Users can watch video online or download it to their devices.  Xalo Stock: Collect news, feedbacks about the in-day stock market.  Xalo Lottery: Collect the lottery results of the day. Most of them are free. However, Xalo Mobile does not have any location-based services even this appplication is created for almost smartphones and tablets. Figure 4 Xalo Mobile news Figure 5 Xalo Mobile stock news
  • 16. 6 1.2.3 VNExpress Mobile3 VNExpress is now one of the most popular online news website in Vietnam. VNExpress PDA is a special version for devices of VNExpress online newspaper. Has the same content with the main version but the different graphic user interface (GUI): lighter GUI, almost no advertisements. In comparison with others, VNExpress has a simple user recommendation system in each article. When users read any article there are some related links that the users would be interested in. That makes users easier to find what they want to read next. Figure 6 VNExpress tablet version 3 You can visit VNExpress mobile by your devices at http://vnexpress.vn
  • 17. 7 Figure 7 VNExpress phone version Even VNExpress has some additional services, such as mobile fee payment, airline ticker booking, game online, card recharging, online shopping. These services have not been implemented yet on tablet and phone version. 1.2.4 Tuoitre Mobile4 Tuoitre Mobile, a new digital product of Tuoi Tre, was officially launched from March 2011. Tuoitre Mobile version is providing the latest news for more than 500 types of phones and tablets. Moreover, users can access various categories of news such as world, business, economy, sport, culture, relax … with the high trust level. 4 You can visit Tuoitre Mobile at http://m.tuoitre.vn
  • 18. 8 Figure 8 Tuoitre Mobile on iPad However, the best features that users can get from Tuoitre Mobile are users can listen to news radio, especially Traffic Radio that will notify the traffic situation in rush hours. Furthermore, Tuoitre Mobile provides some televisions program that makes itself more convenience. Weather, Money exchange rate, Bus route, Gold rate, Lottery ... are others services that users can find from Tuoitre Mobile.
  • 19. 9 Figure 9 Tuoitre Mobile news detail on iPhone Figure 10 Tuoitre Mobile’s additional services Figure 11 Tuoitre Mobile Television program Figure 12 Tuoitre Mobile's radio
  • 20. 10 1.2.5 OhPan news OhPan is a scrolling news ticker web site that released an iPhone application that uses their same recommendation system to deliver the best content to the users. OhPan learn your habits and tastes by your rate on content. One of the key features of OhPan is to offer localized content as well as other unique features. The localization feature of this application has potential but still have some issues needed to be solved. Hence, the development team is still working on this application. Figure 13 OhPan main screen on iPhone
  • 21. 11 Figure 14 OhPan rating feature The rating feature in content such as the green star button and red bolt button in figure 14 become the key to the recommendation system. From these information and the location information above, the recommender with suggest the best content that suitable to the users‟ tastes and current location. 1.2.6 Amazon store5 Consider as having one of the most effective recommendation algorithms [5], Amazon is getting a higher profit due to its recommender. The system took Amazon a decade to build and perfect with a lot of money. Base on users‟ browsing history and past purchases and purchases of other shoppers to offer users what they should buy with some statistical reasons for their recommendation. 5 You can visit Amazon at http://www.amazon.com
  • 22. 12 Figure 15 Amazon Betterizer For the first time you register Amazon account, Amazon Betterizer will ask you about your taste by clicking on things you like, you already owned or you did not like. The next time users visit Amazon, the system will recommend you many items the related to what you have viewed, what you have liked, what you have owned or items inspired from what you browsed. The main recommendation algorithm that used in Amazon‟s system is collaborative filtering. Item-to-item (users buy X should be Y) is the type that was used. Collecting data and history from users is the key factor of this system. There are many different types of data that can train this system: votes, clicks, page-view times, purchases, tagging, adding a title - the users do these things anyway, and you can use the data.
  • 23. 13 Figure 16 Amazon's recommendation Figure 17 Recommendation base on other shoppers’ choices 1.2.7 Gowalla Gowalla is a location-based social network in the type of a mobile application. Facebook acquired Gowalla since Dec 2, 2011. With Gowalla, registered users can share with friends the location that they visit and collect those locations as badges.
  • 24. 14 Moreover, users can see the rating and comment or feedback for the location they want to go to. Some feature provided by Gowalla: o All free to use. o You can update places that you visit. o Upload image immediately for the location you are being at. o Share your recommendation and tips for other users. o Account link to Facebook and Twitter, you can share your post on Facebook and Twitter also. o Earn rewards from local businesses by using Gowalla. o Provide iPhone app, Android app, Blackberry app, Mobile site. Figure 18 Gowalla on iPad
  • 25. 15 1.3 Objectives Because Sencha Touch is a new framework and still not have many developer use it to build their application. Especially there is almost no Sencha Touch based products in Vietnam. Hence, our expectation for this project is to create a web application that used for reading news with a recommendation system. We hope that this project can bring a new way, new inspiration for others who really to make a new generation of mobile application. To implement that expectation, we want to build a web application that people can read daily news here and served with good suggested news from our recommendation system. Besides, it will have ability to provide some additional services that would be helpful for users to use especially location-based services. We expect, in details, this site would be:  We would like to get the news from a local online newspaper to serve for Vietnamese, our main customers. Many local sites would be the best choices for us: VNExpress, DanTri, TuoiTre … In addition, the news should be updated frequently.  Use a HTML5 supported framework to build the GUI for this site. It would be a user-friendly GUI and the time for rendering should be acceptable.  Site can be read on smartphone and tablet with different GUI which will be suitable and fit for each.  When user read news, the website can suggest other news relating to that news in terms of author, title, keywords, rating, reading time …. Furthermore, we can suggest some news that the other persons who have the same habits often read. In order to do this, we will need a recommendation algorithm to execute data.  All the services should return the results in an acceptable time.  Website can let user to like or comment on news. Website automatically updates user profile, history, reading path, user‟s information for every move of users.
  • 26. 16  Website can get user location and suggests things and services that are near user place.  Location-based services: o Bus route information. o Current position on Google map. o Local advertisement.  Additional services: o Exchange rate. o TV schedule. o Weather.
  • 27. 17 Chapter 2 Background 2.1 Tablet 2.1.1 Overview A tablet computer, or tablet is a mobile computer, larger than mobile phone or personal digital assistant (PDA), integrated into a flat touch screen and primarily operated by touching the screen rather than using a physical keyboard. A tablet PC is an innovative technology computer which is extremely popular nowadays due to the usefulness, portability and well-functioning. You can utilize the tablet to carry out all the tasks that you generally user your computer or laptop such as surfing around web, reading e-books, enjoying video games, watching films, sending or acquiring emails or viewing images. As with any computer, appropriate use of passwords and data encryption technology can help to protect personal information on your tablet. One of the tablets currently on the market comes with a movement sensor that can be used to trigger an alarm and another comes with an integrated fingerprint reader for enhanced data security. 2.1.2 History The tablet computer and the associated special operating system is an example of pen computing technology. Electrical devices with data input and output on a flat information display have existed as early as 1888. Throughout the 20th century, many devices with these characteristics have been created with the Dynabook concept of Alan Kay in 1968. During the 2000s, Microsoft tried to create the term Microsoft Tablet PC for tablet PCs built to Microsoft‟s specification. These generations of Microsoft Tablet PCs were designed to run Windows XP Tablet PC Edition and were targeted to address business needs. However, these devices failed to achieve widespread usage due to
  • 28. 18 price and usability problems. The existing devices were too heavy to be held with one hand, some specific software features such as finger and virtual keyboard support were not present, and there were not enough applications specific to the platform. Figure 19 HP Compaq tablet PC with rotating/removable keyboard In April 2010, Apple Inc. released the iPad, a tablet computer with an emphasis on media consumption. With the new purpose, increased usability, battery life, simplicity, lower weight and cost, the iPad has reached worldwide commercial success.
  • 29. 19 Figure 20 Ipad The birth of the iPad has classified tablet devices into two different types: the Tablet PC and the Post-PC tablet. A tablet PC is a portable computer integrated with a touch screen as a primary input device and running a modified classic desktop operating system. This kind of tablet mostly uses the simple resistive touch screens that respond to any kind of pressure on the screen. Since mid-2010, new tablet computers have been created with mobile operating systems. They have a different interface instead of the traditional desktop operating system. These Post-PC tablets are finger driven; they use capacitive touch screens with multi-touch capabilities that require a conductive material such as fingertip for input. 2.2 Smartphone 2.2.1 Overview A smartphone is mobile phone that offers advanced capabilities with functionality like a personal computer (PC). The first smartphones were devices that mainly combined the functions of a PDA and a mobile phone. Smartphones use a special operating system that can add applications in contrast to regular phones which support applications like Java games. The most common mobile operating systems are Google‟s Android, Nokia‟s Symbian, Apple‟s iOS, Microsoft‟s Windows Mobile
  • 30. 20 and Windows Phone, and RIM‟s BlackBerry OS. The first smartphone was “Simon” produced by IBM in 1992. Besides common mobile phone features, it also contained a calendar, address book, world clock, calculator, not pad, e-mail client, the ability to send and receive faxes, and games. It had no physical buttons; instead, users used a touch screen to select. Figure 21 IBM Simon (introduced in 1992) Later, during the late 90‟s, Nokia launched a range of phones aimed at business users. This range started with the Nokia 9000 in 1996 that was a cross between a phone and a PDA, and was quickly followed by the 9210, 9300 and 9500. The Nokia 9210 was one of the first phones using an open operating system. Figure 22 The Nokia 9210 Communicator Today, mobile landscape is a mess of devices, platforms and operating system. Mobile development has to deal with a variety of environments such as iPhone SDK (using Objective-C), Android SDK (using Java), BlackBerry (using JavaME), etc. A web developer might be familiar with the agony of testing 10 or so browser versions
  • 31. 21 across 10 or so operating system versions. Multiply that by 100 and you have the mobile‟s situation. There is simply no cost-effective way to develop and test across all of the possible combinations. 2.2.2 iOS The Apple iPhone, iPod Touch, iPad all use an operating system call iOS that is derived from Mac OS X. Currently, all iOS devices are developed by Apple and manufactured by Foxconn or another of Apple‟s partners. The iPhone that launched in 2007 was the first mobile phone using a multi-touch interface. Interaction with the OS includes gestures such as swipe, tap, pinch, and reverse pinch. Internal accelerometers are used by some applications to respond to shaking the device or rotating it in three dimensions. Starting with iOS 4, multitasking is supported through seven background APIs: background audio, voice over IP, background location, push notifications, local notifications, task completion, and fast app switching. Native third party applications were not officially supported until the release of iOS 2.0. However, a process called jail breaking can install unofficial third party native applications. In 2008, Apple introduced App Store, an online distribution for third party applications. It gains a big success and becomes a model for other smart phone makers. In October 2011, App Store contained more than 250,000 iOS applications [6] which have been downloaded more than 18 billion times. The iOS had a 15% share of the smart phone operating system units sold, behind both Google‟s Android and Nokia‟s Symbian in 2011 [7]. Developing iOS applications needs Xcode toolset bundled with iOS SDK, simulators, analysis tools; main language is Objective-C.
  • 32. 22 Figure 23 iOS 5.0.1 running on an iPhone 4S 2.2.3 Android OS The Android operating system for smartphones was released in 2008. It is an open source platform created by Google. The first phone to use Android was the HTC Dream. The software suite included on the phone consists of integration with Google‟s proprietary applications such as Maps, Calendar, Gmail, and a full HTML web browser. Third-party apps are available in the Android Market (released October 2008). Android has a series of versions; each version is named, in alphabetical order, after a dessert. For example, version 2.3 Gingerbread, version 3.0 Honeycomb – a tablet oriented with multi-core processors supports and hardware acceleration for graphics, version 4.0 Ice Cream for smartphones with Honeycomb features. Since the HTC Dream was introduced using Android OS, there has been an explosion in the number of devices that carry Android OS. On 15 November 2011, Android reached 52.5% of the global smartphone market share [7]. Key features of Android OS:  Application framework enabling reuse and replacement of components  Dalvik virtual machine optimized for mobile devices
  • 33. 23  Integrated browser based on the open source WebKit engine  Optimized graphics powered by a custom 2D graphics library; 3D graphics based on the OpenGL ES 1.0 specification (hardware acceleration optional)  SQLite for structured data storage  Media support for common audio, video, and still image formats  GSM Telephony (hardware dependent)  Bluetooth, EDGE, 3G, and WiFi (hardware dependent)  Camera, GPS, compass, and accelerometer (hardware dependent)  Rich development environment including a device emulator, tools for debugging, memory and performance profiling and a plugin for the Eclipse IDE  Language: Mostly Java with Android SDK Figure 24 Home screen of Android OS
  • 34. 24 2.3 Location-based services Location based services (LBS) are information service accessible with mobile devices through the mobile network and utilizing the ability to make use of the location of the mobile device. (Virrantaus et al. 2001) There are some basic components are required to use a location based service as shown in the figure 25:  Mobile devices: a tool for the user to request the needed information. The result can be given by speech, message, using pictures, text, and so on. Possible devices are PDA‟s, Mobile Phones, Laptops, etc. But the device can also be a navigation unit of car or a toll box for road pricing in a truck.  Communication Network: the second component is the mobile network, which transfers the user data and service request from the mobile to the service provider and then the requested information back to the user.  Positioning Component: For the processing of a service, the user position has to be determined. The user position can be obtained either by using the mobile communication network or by using the Global Positioning System (GPS). Further possibilities to determine the position are WLAN stations, active badges or radio beacons. The latter positioning methods can be especially used for indoor navigation like in a museum. If the positioning is not determined automatically, the user can also specify it manually.  Service and Application Provider: The service provider offers a number of different services to the user and is responsible for the service request processing.  Data and Content Provider: Service providers will usually not store and maintain all the information that can be requested by users.
  • 35. 25 Figure 25 The basic components of an LBS [8] Based on users‟ needs, there are many LBS applications. The most common question is to know where the user is with respect to somebody or something else (locating). Users may search for persons, objects or events (searching). They can ask for the way to a location (navigating). Other questions ask for properties of a location (identifying), or they would try to look for events at or nearby a certain location (checking). a) Emergency Services One of the most evident application of LBS is the ability to locate an individual who is either unaware of his/her exact location or is not able to reveal it because of an emergency (injury, criminal attack, etc.). This kind of application includes public and private emergency services for both pedestrian and drivers. While public emergency services are calling out fire fighters, medical teams, etc., the private ones are the emergency roadside assistance for drivers.
  • 36. 26 b) Navigation Services Navigation services are based on mobile users who need for direction within their current geographical location. Some possible applications are indoor routing, car park guidance, traffic management, etc. c) Information Services Location-sensitive information services mostly refer to the digital distribution of information based on device location, time specificity and user behavior. Some possible applications are: finding the nearest service, accessing traffic news, getting help with navigating in an unfamiliar city, obtaining a local street map, travel service/tourist guides, mobile yellow pages, shopping guides, advertising, etc. d) Tracking and Management Services Tracking services can be used by the consumer and the corporate markets. One example is tracking postal packages so that companies know where their goods are at any time. Companies can locate their field personnel such as salespeople, repair engineers, so that they are able to dispatch the nearest engineer and provide their customers with accurate personnel arrival times. Vehicle tracking can also be applied to locating and dispatching an ambulance that is nearest to a given call. e) Billing Services Mobile location service provider can dynamically charge users for a particular service depending on their location when using or accessing the service. 2.4 Sencha Touch cross-platform framework 2.4.1 Introduction Sencha Touch, the first mobile HTML5 JavaScript framework developed by Sencha Inc., has been nominated the 3rd place in “Packt's Best Open Source in 2011” [8]. Sencha Touch gives you the experience with HTML5, CSS3, and JavaScript
  • 37. 27 through its features: wide range of UI widgets to choose from, as well as robust data, layout, and component models with only one tiny JavaScript library file. Sencha Touch aims at solving the problem of having a mobile web application that mimic a native application while making full use of HTML5 and CSS3. Sencha Touch runs on iOS devices (iPad, iPhone, iTouch) as well as Android phones and tablets. HTML5, CSS3 and JavaScript in Sencha Touch were optimized to give you a native mobile application feel and the best mobile experience possible. Figure 26 GitHub, one of the best examples for Sencha Touch using, created by Steffen Hiller 2.4.1.1 Browser compatibility: From the time it was released, June 2010, Sencha Touch is not designed for running on Rich Internet Applications, such as Fire Fox and Internet Explorer. Sencha Touch can run on WebKit browsers: Safari or Chrome. The fact is that
  • 38. 28 Sencha Touch is aimed at the development of mobile applications only. That means you should use Safari or Chrome to run and test your application for the best result and UI performance. 2.4.1.2 Device compatibility: With the expectation of bringing the full experience for the user, Sencha Touch was create to support almost smartphones and tablet devices. Smart device market is getting larger with newer and more power features, especially multi-touch phone and tablet. Even Sencha Touch is a cross platform framework, but for the best user experience, you should use iOS devices or high-powered Android devices. Once more point, there is not always the same feeling for many smart devices using. It causes by the hardware in these devices. For example, iOS devices are included GPU (Graphic Processing Unit) inside. Whereas, most Android devices are not dedicated GPUs. 2.4.2 Sencha Touch UI Group Purpose Containers Widgets that are designed for nothing more than managing other child items. An example of these types of widgets is the TabPanel. Containers typically implement layouts. Sheets Sheets are generally any popup or side-anchored container and appear in a modal fashion, requiring users to interact with the sheet before moving forward. An example of a sheet is the Date Picker widget. Views Views are widgets that implement data Stores to display data. The List and Nested List are both views that implement Stores. Misc This collection of widgets range from Buttons to Maps to Media. Table 1 Various groups of UI widgets available in the Sencha Touch framework [9]
  • 39. 29 2.4.2.1 Panels The most commonly used Containers in Sencha Touch are Panel, TabPanel, FormPanel and Toolbar. Panel allows others widgets to be placed in side of Panel, in an area called “dock”. Figure 27 Demonstration of some Panel content areas In Figure 27, you can see that the Panel has three docked items. The Toolbar with title is docked at top. A List item docked on the left side. A toolbar with buttons docked at bottom of the Panel. That means toolbar can be used flexibly. Figure 28 Toolbar can be used flexibly
  • 40. 30 2.4.2.2 TabPanel When you need to control your screen with the Toolbar, TabPanel would be a good choice. TabPanel is a container that will automatically generate button for each child it has. Tapping any buttons will allow you to “change” between its children known as “card”. You can set type of transition for these cards: fade, slide, flip, cube, pop, and wipe. Figure 29 Flip transition to change between cards 2.4.2.3 FormPanel FormPanel is a type of container that allows users to input the information into fields provided by Sencha Touch. They offer us almost type of common fields that we can find in any framework. With Sencha Touch, the Text, Checkbox, URL, Email, Textarea, Number, Password and Radio fields all implement native HTML5 input elements, with the addition of styling. That means you can adjust these element‟s style if you want to. Besides, Sencha Touch aims to create a framework that its component can mimic native application behavior. Example, when you focus on Textarea, a virtual keyboard will appear for inputting information as the way you do on iPhone for iPad.
  • 41. 31 Some component of FormPanel provided by Sencha Touch framework:  Slider  Toogle  Checkbox  DatePicker  Email  Field  FieldSet  Hidden  Number  Password  Radio  Search  Select  Spinner  Text  TextArea  Url Figure 30 FormPanel's components
  • 42. 32 Figure 31 FormPanel on iPhone Figure 32 Difference input widgets base on type of device it is running on In Figure 32, we see the difference input widget for the same Select field. That causes by the detection of Sencha Touch for the devices that this web application is running on. In the left hand side photo, the Select widget is displaying the Picker sheet because Sencha Touch detects it is running on a phone. While in the right hand side photo, it is running on a tablet, hence, it is displaying a dialogue type.
  • 43. 33 2.4.2.4 Sheets and Pickers Sencha Touch provides you a widget called Sheet, which is a floating input widget, grabbing the user‟s attention and focus. Figure 33 Sheets in portrait mode Figure 34 Sheets in landscape mode Figure 33 and 34 are sheets displaying on the screen. One of the neat things of Sencha Touch is that almost its components can render immediately to portrait or landscape mode while flipping your devices without any additional code in your application. In Sheet, we have Picker, MessageBox, and ActionSheet. Sheet is actually a subclass of Panel. Hence, we can configure and add pretty much anything we want to the stack of widget.
  • 44. 34 Figure 35 ActionSheet displayed with buttons In Figure 35, we can see an ActionSheet with added button as we want to. ActionSheet is used to request the action from users through buttons. When you choose one button, another function, which was implemented in this button, will be processed. Other subclass of Panel is MessageBox, which is used to alert or announce when event happens. Figure 36 MessageBox implementation
  • 45. 35 Figure 37 An example of MessageBox There are three types of MessageBox: Alert, prompt, and confirm. The key difference between the three is apparent. The alert MessageBox is designed to alert the user of some condition and only displays one button. The confirm dialog actually allows the user to make a decision by tapping on a button, allowing for a branch of logic to execute. Lastly, the prompt MessageBox asks the user for direct input. 2.4.2.5 Data-bound views Just like Sencha‟s other frameworks, Sencha Touch comes with an incredibly powerful data package. Developers can easily request data from a wide variety of sources whether by AJAX, JSONP, or YQL, bind that data to specific visual components or templates, and then take that data offline with local Storage writers. Sencha Touch only provides three types of data-bound view: DataView, List, and NestedList. A DataView is a widget that binds to a data Store to get and show the data on screen. It gives you 100% control on how you render the data and display them on screen through Template.
  • 46. 36 Figure 38 Template for Bus Route DataView Figure 39 Bus Route DataView Above, DataView rendering data from a Store, which contain the list of bus route. Now DataView just load it on the screen in the style we want it to be. With the DataView, we are completely responsible for a lot of work, including defining the XTemplate that will be used to stamp out the HTML fragments, and styling how the items are rendered on screen. List widget is the next data-bound view considered. The List view widget is getting the same data of DataView above. The obvious difference we can see is the way data displayed on screen. Like other components, with data-bound components, we can configure their attributes as well as the way they appear on screen.
  • 47. 37 Figure 40 An example of List view The DataView and List widgets are designed to display data in a linear set. However, there are times where you want to display nested data. For that, you will need to use the NestedList widget. Figure 41 An example of NestedList view From the main List on the left photo, we can choose the option we want to go into, in this situation is “drinks”. Then the view will change in the second level list of
  • 48. 38 “drinks”. Keep going with “Sport drinks”. Once again, the view goes into the third level of this NestedList. This is the way NestedList works. It helps you to organize you data in a tree-like structure. 2.4.2.6 Map and Media Developing with the power of smart devices, technology is getting more powerful with new features and functions. One of the most demanded needs is location –based services. Sencha Touch has brought that wonderful feature to users by integrating Google Maps in its API. Sencha Touch Map widget literally wraps Google Maps. It allows you to work with Google Map instances, as it was native to Sencha Touch. That means you can layout, show, hide, work with Google Map instances, events in Sencha Touch as the way you did with Google Map API. Moreover, some special methods from Sencha Touch make it easier for developer to get and work with map‟s coordinates. Figure 42 Getting Geo information is easier and easier
  • 49. 39 Figure 43 Google Map in Sencha Touch API Furthermore, growing demand for mobile applications is the ability to play audio and video content. HTML5 natively has video and audio tags that bring this functionality to Mobile Safari, but Sencha Touch makes it easier to use. Figure 44 An example of playing video on tablet
  • 50. 40 Figure 45 Playing video with a few lines of code 2.4.2.7 Finger and Mouse Sencha Touch was created for the aim at smart devices with almost of them having touch and multi-touch functions. Part of transitioning to mobile development is the understanding the user interaction models and how they relate to browser events. Mobile/Tablet Desktop Description tapstart mousedown The initial point at which a touch is detected in the UI. tapend mouseup Signals the end of a touchstart event. tap click A tapstart and tapend event for a single target. doubletap doubleclick Two successive tapstart and tapends for a single target. swipe mousedrag A tapstart and tapend events with a delta in X (horizontal) or Y (vertical) coordinates. pinch A complex multi-finger “pinch” gesture. It is comprised of multiple touchstart and touchend events with deltas in the X and Y coordinate space. Table 2 Description of the most common user gestures, alongside their desktop counterparts [9]
  • 51. 41 2.5 Recommendation systems 2.5.1 Introduction Previously, users normally have two ways of selecting an item. User can search either through a key word or via a category. With these methods, use may feel overwhelmed when dealing with a huge amount of information. Hence, the need of a method that can help user search for desired items effectively has arisen. Over the past decade, recommendation systems have gained a high popularity. Recommender systems attempt to profile user preferences over items, and model the relation between users and items. Their task is to recommend items that fit the user‟s taste, in order to help the user in selecting items from an overwhelming set of choices. Such personalized recommendations are especially important in markets where the variety of choices is large such as e-commerce, subscription-based services, etc. With the increasing number of web based merchant and rental services use recommender systems, Amazon.com, Netflix and MovieLens are leaders in applying successfully recommendation system. They have spent a lot of time and money to find a quick and effective recommender. In 2005, Netflix, the largest online DVD rental service in the United States of America, announced the Netflix Prize competition up to 1 million dollars award. The task is to learn from a training dataset of approximately 100 million ratings that nearly half of million users gave to 17770 movies and finally predict another 2.8 million ratings. As an error measurement, the Root Mean Square Error (RMSE) is used. Prizewere based on improvement over Netflix‟s own algorithm, called Cinematch, which is able to give a RMSE of 0.9525. Any algorithm that is capable of improving this result by 10% (which is a RMSE < 0.8563) will be considered for the $1000000 grand prize. Finally, in 2009, the grand prize was given to the “BellKor‟s Pragmatic Chaos” team. However, recommendation systems of e-commerce web site have to deal with many difficulties. Web-based retailers have a massive data with millions of users and millions of items. Many services require real time response as well as good recommendations. In addition, the accuracy of the system is very sensitive to the
  • 52. 42 number of information associated with a given user. The system cannot give accurate recommendations to new users who have too few information. Therefore, recommendation problem has attracted many attentions from many researchers. Figure 46 Recommender system as a black box 2.5.2 User’s feedbacks 2.5.2.1 Explicit feedback Users are asked to give their opinion about provided recommendations. Explicit feedback usually comes in the form of ratings that can be positive or negative. Ratings can be in discrete scale (from 0 to N) or in a binary value (like/dislike). Another way to gather explicit feedback is to allow users to write comments and opinions about the item. However, ratings are usually biased toward some values, and depend on the user perception of rating‟s scale. 2.5.2.2 Implicit feedback The system can infer the user preferences by user‟s actions. For instance, by analyzing the history purchase, the time spent on a webpage, the links followed by the user, the mouse movements, etc. However, negative feedback is not reliable when using implicit feedback since the system can only observe positive feedback by analyzing user‟s actions.
  • 53. 43 2.5.3 Recommendation methods 2.5.3.1 Demographic In demographic recommendation, users are classified based on their personal data, which they themselves provided during the registration process. Alternatively, this data can be extracted from the purchasing history, survey responses, etc. It recommends items most frequently bought within the group of users. For each user, the system creates one vector of their features, such as experience level, annual expenses, gender, politics, education, sports, etc. The system clusters users to groups, define the list of the most popular products for each group and finds the one which is the closest to the current user based on the current user‟s demographic features. An example of demographic recommendation is the Grundy system. Grundy recommends books based on personal information gathered from an interactive dialogue. The lines printed in upper case were typed by the system; those in lower case were typed by the user [10]. - PLEASE TYPE IN YOUR NAME - John Greene - YOU HAVE NOT USED THIS SYSTEM BEFORE, HAVE YOU? - No - OK. I WOULD LIKE TO KNOW WHAT SORT OF PERSON YOU THINK YOU ARE. PLEASE TYPE IN A FEW SINGLE WORDS THAT YOU THINK CHARACTERIZE THE MOST IMPORTANT ASPECTS OF YOURSELF - Unconventional open direct honest humorous persistent adventurous - I DO NOT KNOW THE WORD UNCONVENTIONAL. I DO NOT KNOW THE WORD OPEN. I DO NOT KNOW THE WORD DIRECT. WOULD YOU LIKE TO TRY SOME MORE WORDS? - Yes - OK GO AHEAD - Relaxed Jewish friendly playful thoughtful eccentric
  • 54. 44 - HAVE YOU EVER READ EARTH ANGELS BY SUSAN CAHILL? - No - YOU MIGHT LIKE IT. IT IS ABOUT A GIRL WHO GOES TO CATHOLIC ELEMENTARY SCHOOL, HIGH SCHOOL AND COLLEGE, THEN GOES ON TO BECOME A NUN, BUT FINALLY BACKS OUT A FEW DAYS BEFORE FINAL VOWS. MAJOR CONFLICT IN IT IS THE RELATIONSHIP OF MAN TO GOD. ONE OF THE MAJOR STRENGTHS OF ONE OF THE MAIN CHARACTERS IS INTELLIGENCE. IT IS POLITICALLY LIBERAL. IT HAS A BIT OF ROMANCE. IT HAS MEDIUM-FAST MOVING PLOT. DOES THAT SOUND GOOD? - No - WAS IT BECAUSE OF THE AMOUNT OF ROMANCE? (EITHER TOO MUCH OR NOT ENOUGH) - No - AREN‟T YOU INTERESTED IN THE RELATIONSHIP OF MAN TO GOD? - No Another example is the Winnow algorithm that extracts the characteristics of home pages associated with users that like a particular restaurant [11]. Instead of asking users many questions to obtain their demographic information like Grundy system, it minimizes the effort by taking advantage of the work the user has already expended in creating a home page on the World Wide Web. However, the main problem of demographic system is that it recommends the same items to people with similar demographic profiles. It can only give general recommendations. Another drawback is the generation of the profile that requires user‟s effort and time to create. 2.5.3.2 Utility-based This method predicts the value of items to each individual user on the basis of a model of the user‟s preferences, which may have been elicited explicitly. In other
  • 55. 45 words, the system gives recommendations based on the evaluation of user‟s needs and available solutions. A simple algorithm of utility-based includes following steps: - Step 1: User gives some demands - Step 2: The system suggests some solutions that are optimal with respect to user‟s requirements - Step 3: If user accepts a solution then stop - Step 4: User evaluate suggested solutions and add or modify his requirements - Step 5: back to step 2 For example, the ATA system (Automated Travel Assistant) of Greg Linden et al has recommended flights to a client. Client: “I want to fly from Seattle to Newark next Tuesday afternoon.” Agent: “I‟ve got a United flight at 3:30pm for $500 and an American flight at 12:30pn for $520.” Client: “I can‟t leave before 3:30pm but I do prefer American.” Agent: “I have another American flight through Denver at 4:00pm for $530.” Client: “That‟s pretty expensive. I‟d be willing to go on a later flight or another airline if it‟d be much cheaper.” Agent: “The cheapest flight is US Air at 8pm for $490.” Client: “In that case, the American flight is fine.” [12] The limitation of utility-based method is the communication abilities. This approach was robust under inaccurate input. It only give static recommendations and cannot learn from user‟s preference. 2.5.3.3 Knowledge-based A knowledge-based recommender system generates recommendation to a user by consulting its knowledge base of the product domain, and then reasoning what items will best satisfy the user‟s requirements. For example, the PersonalLogic system, which helps users select on variety of products such as cars, computers, pets, family activities, etc. It gathers users‟ requirements on a particular product and consults its
  • 56. 46 knowledge base to fine the items that best meet the users‟ requirements. For instance, a car-shopper may need to provide answers to such questions as what type, size, and features he prefers, what price he can afford, etc. The system then searches its knowledge base for cars that are optimal for his requirements. Schafer, Konstan and Riedl call knowledge-based recommendation the „editor‟s choice‟ method [13]. Knowledge-based recommendation system has some advantages. It does not need to be initialized with a database of user preferences since its recommendations do not depend on the user ratings of items. Therefore, it does not suffer from “ramp up” or “cold start” problem [14]. “Cold star” also known as “new user” problem or “new item” problem, occur when a new user or a new item enters the system; it is difficult to make recommendations because there is not enough information. Knowledge- based system can adjust its recommendations quickly as a user‟s interest change due to its independence of user‟s preferences in the past. Moreover, it can make good recommendations for products that have obvious characteristics such as cars, houses, careers, etc. However, the main problem with this system is that it must understand the product domain well and must have knowledge of important features of the product. Thus, it requires knowledge of experts. 2.5.3.4 Content-based Content-based recommender system creates a profile for each user or product to characterize its nature. These features are demographic data for user profiling and product information, descriptions for item profiling. For example, a movie profile could include attributes regarding its genre, the actors, the director, and so forth. The process of characterizing the item data set can be automatic, extracting features by analyzing the content or based on manual annotations by the domain experts. A content-based system selects items based on the correlation between the content of the items and the user‟s preferences. A known successful realization of content filtering is the Music Genome Project, which is used for the Internet radio service Pandora.com. A trained music analyst
  • 57. 47 scores each song in the Music Genome Project based on hundreds of distinct musical characteristics. Another example is PRES. It recommends documents by comparing a user profile with the content of each document in the collection. The content of a document is represented by a set of terms that are extracted from documents through a parsing process. All HTML tags and stop words that occur very often and cannot be used as discriminations are removed. The remaining words are reduced to their stem by removing prefixes and suffixes. The user profile is created by analyzing the content of documents that the user found interesting by using either explicit or implicit feedback [15]. Another application of content-based filtering is NewsWeeder. It is a netnews-filtering system that let the user rate his or her interest level for each article being read and then learn a user profile based on features of articles that user has rated [16]. One advantage of content-based system is that it can extract features, tags automatically. No humans must be involved. Moreover, the system is adaptive through time. In other words, the quality of recommendation is improved over time. However, this approach has some drawbacks such as dealing with “cold start” and “gray sheep” problem. It also has to suffer from the problem of noisy features that are extracted automatically from the content of items. “Gray sheep” problem occurs when recommended items on the border between two or more groups. Gray sheep are users whose ratings do not match any group consistently. Black sheep are users whose ratings are so ridiculous that recommendations are unachievable. But we can solve this problem by using hybrid recommendation techniques. 2.5.3.5 Collaborative filtering This approach relies only on past user activities such as transaction history, user satisfaction expressed in rating. Collaborative filtering analyzes relationships between users and interdependencies among items to recognize new user-item correlation. For instance, user A and user B have a purchase history that overlaps strongly and user A has recently bought a book that B has not yet seen, the system then can reason to suggest this book to B. Collaborative filtering is independent of the domain. That is, it
  • 58. 48 does not need extra information about either items or users such as what a book is about, its genre, or who wrote it. Hence, it can solve the problem of content filtering dealing with data that are often elusive and difficult to profile. Pure collaborative approaches take a matrix of given user-item ratings as the only input. They produce a prediction indicating how much the current user like or dislike a certain item and a list of n recommended items. Such a top-N list should not contain items that the current user has already selected. There are two main techniques to solve collaborative filtering: the memory-based approach and model-based approach [17]. The memory-based approach, also known as neighborhood methods, focus on the relationships between items or, alternatively, between users. Item-based neighborhood exploits the similarity among the items. This method analyzes the set of items that a user has rated, and then computes the similarity among them. User- based neighborhood suggests items based on the correlation between people with similar preferences. On the other hand, model-based approach, or latent factor models try to explain the rating by characterizing both items and users. This method tries to infer the rating patterns from 2 or more factors. For example, in the movie domain, these factors could be obvious dimensions such as the genre (comedy, drama), the amount of action, or the orientation to children, or uninterpretable dimensions. A recommendation for an item is made when the active user and the item are similar with respect to these factors. Model-based systems use a variety of learning techniques including neural networks [18], latent semantic indexing [19], and Bayesian networks [20]. One of the most often applied techniques for latent factor models are based on matrix factorization. Matrix factorization can deal with the sparsity and scalability problems, by reducing the matrix of users and items to k dimensions (or latent factors). Although collaborative filtering is one of the most used recommendation methods, it has some limitations. It has to suffer from data sparsity. With a large number of users and items, the main problem is the low coverage of the users‟ ratings among the items. Therefore, it could be difficult to find reliable neighbor, especially for user-
  • 59. 49 based approach. Collaborative filtering also deals with “gray sheep” and “cold start” problems. When new items enter the system, they cannot be recommended until users start rating them. This problem is known as the “early rater” problem. Moreover, the first user that rates new items gets only little benefit (this new item does not match with any other item yet). In addition, it could be a victim of shilling attacks. When anyone can provide recommendations, people may give lots of positive recommendations for their own materials, and negative recommendations for their competitors. We have gone through many techniques to solve recommender problem. Let summarize strengths and weaknesses of each recommendation techniques in following table. Table 3 Tradeoffs between recommendation techniques [21] Technique Strengths Weaknesses Collaborative filtering (CF) A. Can identify cross-genre niches B. Domain knowledge not needed C. Adaptive: quality improves over time. D. Implicit feedback sufficient I. New user ramp-up problem J. New item ramp-up problem K. Gray sheep problem L. Quality dependent on large historical data set M. Stability vs. plasticity problem Content-based (CN) B, C, D I, L, M Demographic (DM) A, B, C I, K, L, M N. Must gather demographic information
  • 60. 50 Utility-based (UT) E. No ramp-up required F. Sensitive to changes of preference G. Can include non-product features O. User must input utility function P. Suggestion ability static (does not learn) Knowledge-based (KB) E, F, G H. Can map from user needs to products P Q. Knowledge engineering required 2.5.3.6 Hybrid system Hybrid recommender systems are approaches that combine several algorithm implementations or recommendation components. They combine the strengths of different algorithms and models in order to overcome or to minimize the problems that a solely method can have. There are several designs for hybrid recommender systems. Figure 47 described monolithic hybridization design. This kind of hybridization is virtual in the sense that features or knowledge sources of different paradigms are combined. For instance, a content-based recommender that also exploits community data to determine item similarities falls into this category. Figure 48 depicts parallelized hybrid recommender systems. These systems require at least two separate recommender implementations, each one operates independently of one another and produce separate recommendation lists. In hybridization step, their output is combined into a final set of recommendations. Next, figure 49 sketches the pipeline architecture. The output of one recommender becomes part of the input of the subsequent one.
  • 61. 51 Figure 47 Monolithic hybridization design [22] Figure 48 Parallelized hybridization design [22] Figure 49 Pipelined hybridization design [22]
  • 62. 52 Chapter 3 News website with Recommendations Our project, a news web application based on Sencha Touch framework, called QTNews, was developed for running on smartphones and tablets. This application aims at providing daily updated news for users from a Vietnamese online newspaper: VNExpress. For the purpose of meeting user‟s needs of having experience on new and high-tech services, QTNews also gives additional services that will please those demands. They are:  Location-based advertisement  Currency rate  Gold rate  Stock index  Weather  Bus route  User‟s current position In this part, we will talk about the way we implement our project using Sencha Touch framework, like how we work with GUI, how we can load data from services, how can we manage event in Sencha Touch, how can we deal with store, local store, template… Furthermore, we also work with other stuffs such as:  Google map: How we can use Sencha Touch to work with map, how to get coordinates, how to put markers on map …  Services: local services and services from other sites.
  • 63. 53 Figure 50 QTNews interface Figure 51 QTNews project structure
  • 64. 54 3.1 Database Figure 52 QTNews database structure
  • 65. 55 Number Table Description 1 ACCOUNT Stores user account information including name, email, password. 2 ADVERTISEMENT Stores local advertisements with their basic and location information: latitude and longitude. 3 BusLine Stores information of bus in HoChiMinh City, such as: line number, time per line, wait time … 4 BusRoute Stores route details of bus. 5 EXRATE Money exchange rate in day. 6 GOLDRATE Gold rate in day. 7 NEWS Stores news details: title, content, pubdate, description … 8 RATING Stores rating matrix. 9 SESSSION Stores session for each session issue. 10 STATION Stores information about location of bus station, line number go through 11 UserInfo Keeps track user‟s footprint: datetime, device, platform, browser… 12 UserPath Store user‟s behaviors on site: reading time, news title, news category… 13 VNEFeedUrl Stores VNExpress RSS link Table 4 List of tables in database 3.2 Functionality 3.2.1 Getting News The very first step for getting news from a source is we have to find their RSS (Really Simple Syndication) to get the news brief. RSS solves a problem for people
  • 66. 56 who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. You save time by not needing to visit each site individually. In short, RSS is the most effective way and the easiest way to know what news we have for today in site or in category. With the benefits from using RSS link, our project can keep updating for the newest news coming. At this time, our application is getting RSS from VNExpress (a Vietnamese local News site) with commonly read categories, such as:  Society  World  Business  Culture  Sport  Life style  Science  Hi-tech Figure 53 VNExpress RSS
  • 67. 57 Figure 54 Content in each RSS link As you can see in Figure 54, each RSS link will show a number of newest news in that category. The number of news in each RSS link will depend on what site it is. Moreover, this content will be automatically updated if there is any new news appears. This content is displayed in the structure of XML (each site has different components in its XML structure). With VNExpress XML format, each <item> node is a news brief include: <title>, <description>, <link>, <pubDate>. Hence, we have to create a WebService to read from VNExpress‟s XML structure to our database (Microsoft SQLServer 2008). Besides, the XML structure of VNExpress, especially in its <description> node is not really well organized while they put description text in the same place with
  • 68. 58 <img> tag and other related links. That makes it harder to separate information that we need for reformatting in our site. Therefore, we have to write a service that has ability to filter and separate those things. In order to display news on device‟s screen, first we need to put all data from our database in a Sencha Touch Store (Ext.data.Store) and format them with our defined template (Ext.regModel). Figure 55 Process of getting news and display them on screen
  • 69. 59 3.2.2 Register Figure 56 Register and log-in panel For the first time used user, QTNews will ask you to create an account. In the „Register” form, you will be asked to input 3 basic personal information: name, password and your email. This clean and simple register form make user feel more comfortable when using this web application on devices. If you had an account, you can login in the “Login” form. After login or register process, QTNews will remember your ID and generate session ID on your devices, hence, you do not need to login the next time unless deleting cache. Moreover, for each time user access to this application, system will keep track user‟s information such as user‟s device, user‟s location, browser, start of using time… 3.2.3 Reading news When a user selects news to read, system will start a timer to calculate the reading time. Moreover, after reading a news, user will have a choice to rate for the news in scale of 1 to 5 according to their satisfaction and expectation to read more similar news. This rating will be used for the recommender system. The more news user rates, the better news system recommends. One more point, the rating is always at default of level 0 (on scale of 5). However, if the users forget to rate for the news explicitly, we also suggest an implicit way to get users‟ behavior by their reading
  • 70. 60 time. There is a corresponding scale between period of reading and the 5-star rating which we will give detail in chapter 4 experiment. Figure 57 Rating form in news 3.2.4 “For U” and “Most read in week” “For U” and “Most read in week” are our recommendation for users.  Most read in week: Each time a user selects news, the system will increase the counting for that news by one. QTNews will select five recently most read news bases on their counting to show on the recommendation panel.  For U: Using the data from user rating and RNMF algorithm, (more detail in 3.4), our recommender system will calculate and suggest news that similar to other users‟ behaviors for particular users. Furthermore, users can pull down the panel for other suggestion list. 3.2.5 Additional and location-based services Our additional and location-based services:  Money exchange rate: Getting data from Vietcombank‟s site. These data will automatically update if there is a change from Vietcombank.
  • 71. 61 Figure 58 Money exchange rate (VND)  Gold rate: we getting this information from SJC‟s site. The same as money rate, it will update by any change.  Weather: this is a service that provides the weather forecast getting from http://tuoitre.vn. The place shown in this is Vietnam‟s provinces. Figure 59 Weather forecast  Stock: Stock index is getting from VNExpress, including index from HoChiMinh City, as well as Hanoi.
  • 72. 62 Figure 60 Stock service  Bus route: getting information from http://buyttphcm.com.vn Figure 61 Bus route  Bus Station: This is a location-based service which data was collected by FIT (HCMUS). It has ability to show the Bus station near around 500m according to user‟s current position by clicking on “Bus Station” button. When users click on the Bus marker on map, there is a message floating on
  • 73. 63 screen to show information about that station, such as: address, bus line goes through… Figure 62 Bus station nearby you  Local advertisement: This service will provide users many advertisements around their current position with the fullness of item information: contact phone, price, category… Each item will denoted by a red shopping cart marker on map. When clicking on these markers, the full information will be shown. In addition, if you want to post your own advertisement everywhere on map, you can click on the blue shopping cart button, and then a red marker will appear on map. You can drag this marker to your desired position. After that, just by a click on the red marker, the “Ad Form” will be displayed on screen for inputting item details. Finally yet importantly, local advertisement feature also has a function to choose the radius around you to find advertisement. The scale of this search is between 1 and 10 kilometers. Otherwise, you can choose “LocalAd” tab to switch the view of local advertisement to text only. In this view, you can also know the exact distance from you to an advertisement.
  • 74. 64 Figure 63 Local Advertisement In the order to find the distance between you and an item (Bus station, local advertisement), we have to deal with a formula [23] to estimate how far it is: Spherical law of cosines: d =acos(sin(lat1).sin(lat2)cos(lat1).cos(lat2).cos(long2- long1)).R With: o lat1, long1 is latitude and longitude of point 1 (in radian) o lat2, long2 is latitude and longitude of point 2 (in radian) o d is the distance we want to estimate (in km) o R is radius of The Earth (≈ 6371 km) 3.3 Graphic user interface QTNews was developed to use on many smart devices: tablet and phone. For that reason, we have two different graphic user interfaces for two these device types. In tablet device, the view will larger for a comfortable using. Category list show directly on the main toolbar and the news description has more information. Besides,
  • 75. 65 additional and local-based services show on the same panel with the news list. Make it easier for users‟ experience. Figure 64 QTNews on iPad with 1. Main toolbar with categories, 2. Main panel, 3. Suggestion panel, 4. Additional Services, 5. Map and Location-based services. Figure 65 Location base services
  • 76. 66 Meanwhile, in phone version, with the limited place for displaying, we have to minimize these components. Category list has put into a “drop list” just shown after clicking on category button. The complete main view will use for the news list and news detail. Additional and local-based services will be display in another view by sliding right to left. Rating panel has no longer shown initially on the main view. They just can be displayed when the user clicks on rating button. Figure 66 QTNews on iPhone simulator with 1. Login button, 2. Back button, 3. Rating panel, 4. Category button, 5. Category list, 6. News list
  • 77. 67 Figure 67 Rating on phone GUI, tested on iPhone Figure 68 News detail, tested on Samsung ACE
  • 78. 68 Figure 69 News list, tested on Samsung ACE Figure 70 Weather forecast, tested on Samsung ACE
  • 79. 69 Figure 71 Bus line information, tested on Samsung ACE Figure 72 Money exchange rate, tested on Samsung ACE
  • 80. 70 3.4 Algorithm 3.4.1 Introduction The problem is we want to recommend an appropriate list of news for a particular user when he or she goes to our website. In order to do this, we can use many approaches mentioned in the above sections. Specifically, recommender systems have (i) background data, the information that the systems has before the recommendation process begins, (ii) input data, the information that user must communicate to the system in order to generate a recommendation, and (iii) an algorithm that combines background and input data to arrive at its suggestion. On this basis, we can distinguish five different recommendation techniques as shown in Table 5. Table 5 Recommendation techniques [21] (U is the set of users, I is the set of items, u is a user, i is an item) Technique Background Input Process Collaborative Ratings from U of items in I Ratings from u of items in I Identify users in U similar to u, and extrapolate from their ratings of i Content-based Features of items in I u‟s ratings of items in I Generate a classifier that fits u‟s rating behavior and use it on i Demographic Demographic information about U and their ratings of items in I Demographic information about u Identify users that are demographically similar to u, and extrapolate from their ratings of i
  • 81. 71 Utility-based Features of items in I A utility function over items in I that describes u‟s preferences Apply the function to the items and determine i‟s rank Knowledge- based Features of items in I. Knowledge of how these items meet user‟s needs A description of u‟s needs or interests Infer a match between i and u‟s need For our thesis‟s scope, knowledge-based seems not suitable since it requires expert knowledge to classify the items‟ domain. The demographic approach and content-based approach require profiles of users and items. It is not common for a news site to have a long registration form or a long survey with all information such as gender, age, salary, etc. Moreover, the process of extracting content of news is rather complicated and needs many works. In addition, it may contain many noisy features if the extracting method is not good enough. In the past decades, collaborative filtering based systems have been popular and used in many fields due to their performance and easy implementation. Collaborative filtering is categorized into memory-based methods (neighborhood-based methods) and model-based methods. However, memory-based methods suffer from both the data-sparsity and the scalability problem. Due to the sparsity of the user-item rating matrix, memory- based methods may fail to correctly identify the most similar users or items, which in turn reduce the recommender accuracy. On the other hand, when the number of users and items are very large in real application, the search of most similar neighbors is time consuming. To overcome those limitations, model-based approaches have been proposed which establish a model using the observed ratings that can interpret the given data and predict the unknown ratings. Due to the efficiency in handling very huge data sets, matrix factorization based model has become one of the most popular
  • 82. 72 models among the model-based methods. Therefore, we choose the model-based approach to implement our recommender system. 3.4.2 The concept To start calculating, a recommendation system needs some input information such as a set of users, a set of items(movies, books…), rating, category, user features (age, gender, hobby…), user‟s history(favorite items, tag, trading history…). Different approaches may use different kinds of input information. The most popular input information is group of users, group of items and rating score. With that information, we can define the problem as followed:  Set of users:  NU ,...,1 , N is the number of users  Set of items:  MI ,...,1 , M is the number of items in the system  A matrix  MNR  contains all ratings that users in set U have assigned to items in set I A recommendation system will predict ratings for items that users have not yet rated and then suggest high rating-items for them. All the ratings that users have assigned to the items will be stored in matrix R, with   0, jiR means that user i has rated item j,   0, jiR means that user i has not yet rated item j and that will be the value the recommendation system need to predict. I1 I2 I3 I4 U1 5 4 3 0 U2 4 5 5 3 U3 3 0 4 0 U4 5 3 3 4 Table 6 Example of rating matrix For example, we need to predict ratings for  4,1R ,  2,3R ,  4,3R such that the values would be consistent with the existing ratings in the matrix. For user-based approach, U1 is quite similar to U4 in rating items I1, I2, I3, then we may predict
  • 83. 73   44,1 R . For item-based approach, I1 and I4 are more similar than the other, so   44,1 R . In recommendation point of view, there should be some latent features that determine how a user rates items. Hence, if we can discover these latent features, we should be able to predict a rating with respect to a certain user and a certain item, because the features associated with the user should match with the features associated with the item. Some of the most successful realization of latent factor models is based on matrix factorization. Matrix factorization characterized both items and users by vectors of factors inferred from item rating patterns. High correspondence between item and user factors leads to a recommendation. Matrix factorization is to find out two (or more) matrices such that when we multiply them, we will get a new matrix where values are approximate to those in original matrix. Thus, the result matrix contains the predicted scores corresponding to not yet rated items in original matrix. 3.4.3 The mathematics of matrix factorization As mentioned above, we have a set U of users, a set I of items, and a matrix R of size |||| IU  . Let matrix P of size KU || and Q of size KI || be two matrices we need to find [24], K is the number of features or the number of dimension we want to reduce from initial matrix ( IK  ). Therefore, we have: RQPR T ˆ (1) Each user iU is described by a row iP of matrix P, and each item jI is described by a column j T Q of matrix T Q . A prediction of a rating of a item jI by user iU is then given by dot product of their feature vectors. T kjik K k T jiij QPQPR    1 ˆ (2) Where ikP and kj T Q are the components of the vectors ikP and j T Q . ijRˆ is the predicted rating of an item jI by user iU ,
  • 84. 74 For each ijRˆ , we will calculate the error between the estimated rating and the real rating, and then try to minimize the error iteratively. The error is calculated as followed: 2 1 22 )()ˆ( T kj K k ikijijijij QPRRRe    (3) The estimated rating can be either higher or lower than the real rating; therefore, we consider the squared error. To minimize this error, we apply gradient descent algorithm that is also known as the steepest descent to find the local minimum. Our task now is to minimize equation (3), min2 ije . First, we do the partial derivative the equation (3) with respect to each variable separately. kj T ijkj T ijijij ik QeQRRe P  2))(ˆ(2 2   (4) ikijikijijij kj T PePRRe Q  2))(ˆ(2 2   (5) Now, we know the gradient at the current values. In other words, we know in which direction we have to modify the values of ikP , T kjQ such that their product approximates the corresponding element in matrix R. We obtain the following update equations: kj T ijikij ik ikik QePe P PP     22  (6) ikijkj T ij kj T kj T kj T PeQe Q QQ     22   (7)  is a constant whose value determine the rate of approaching the minimum. This learning rate controls how much of the errors slope is added to the new feature value. The value  is usually very small, say 0.001 [25]. This is because if we make too large a step toward the minimum we may run into the risk of missing the minimum and end up oscillating around the minimum.
  • 85. 75 However, if the product of two matrices P and Q approximates R, is not that our predictions of all unrated values will all be zeros? In fact, we are not really trying to come up with P and Q such that we can reproduce exactly matrix R. Instead, we only try to minimize the errors of the observed user-item pairs. In other words, if we let T be a set of tuples, each of which is in the form of ),,( ijji RIU , such that T contains all the observed user-item pairs together with the associated ratings, we are only trying to minimize every ije for TRIU ijji ),,( . T is our set of training data. For the rest of the unknowns, we will be able to determine their values once the associations between the users, items and features have been learnt. Using the above update rules, we can then iteratively perform the operation until the error converges to its minimum. We can check overall error as calculated using the following equation and determine when we should stop the progress.      TRIU K k kj T ikijTRIU ij ijjiijji QPReE ),,( 1 2 ),,( )( (8) The above algorithm is as very basic algorithm for factorizing a matrix. A common extension to this basic algorithm is to introduce regularization with a factor  to avoid over fitting. This addition will partially suppress overtraining and improve the overall performance. The update equations change to: )2()( 2 ikkj T ijikikij ik ikik PQePPe P PP      (9) )2()( 2 kj T ikijkj T kj T ij kj T kj T kj T QPeQQe Q QQ       (10) The new parameter  is used to control the magnitudes of the user-feature and item-feature vectors such that P and Q would give a good approximation of R without having to contain large numbers. In practice,  is set to some values in the range of 0.02. The new squared error can be obtained by: )||||||(|| 2 )()( 2 )( 222 11 22 1 2 2 TK k kj T ikijkj TK k ik K k kj T ikijij QPQPRQPQPRe     (11)
  • 86. 76 3.4.4 The RNMF algorithm Normally there are two parts in a recommendation problem. First, we calculate or predict ratings of items that users have not yet rated. Then, based on those predicting ratings, the system will suggest items for users. We apply regularization non-negative matrix factorization algorithm (RNMF) to solve the first part of the problem. The RNMF has following steps: Figure 73 RNMF algorithm steps  Step1: Initialize two matrices P, Q with some non-negative random values. The first step in matrix factorization approach is to initialize two matrices P, Q and to assign some values to matrices‟ elements. These values have to be non- negative and small enough to avoid losing the minimum distance when calculating the distance between the estimated rating matrix and real rating matrix. We will assign random number from 0 to 1 to matrices P, Q.  Step 2: Calculate the error between the estimated rating and real rating The error at each element will be calculated only when it is assigned a rating by users. The error is computed as follows: )0(ˆ 1    ij T kj K k ikijijijij RQPRRRe  Step 3: Update matrices‟ elements We modify each element in the matrices as follows: )2(2 ikkj T ijikij ik ikik PQePe P PP      Step 1: Initializetwo matrices P, Q with some non-negative random values Step 2: Calculatethe error betweenthe estimatedrating and real rating Step 3: Update values in matrices P, Q in order to minimize the error Step 4: Calculatethe overall error
  • 87. 77 )2(2 kj T ikijkj T ij kj T kj T kj T QPeQe Q QQ        Step 4: Calculate the overall error. If the overall error is small enough (smaller than 0.001), the product of two matrices P, Q approximates the original matrix R, then we can end the process. Otherwise, we have to come back to step two. )||||||(|| 2 )()( 2 )( 222 11 22 1 2 2 TK k kj T ikijkj TK k ik K k kj T ikijij QPQPRQPQPRe     3.4.5 The pseudo code 1: Input R, P, QT, K, alpha, beta, steps 2: Initialize P, QT with random values from 0 to 1 3: for step1 to steps 4: for i1 to len(R) 5: for j1 to len(R[i]) 6: if R[i,j] >0 then 7: eij    K k jkQTkiPjiR 1 ],[*],[],[ 8: for k1 to K 9: ]),[*],[**2(*],[],[ kiPbetajkQTeijalphakiPkiP  10: ]),[*],[**2(*],[],[ jkQTbetakiPeijalphajkQTjkQT  11: for i1 to len(R) 12: for j1 to len(R[i]) 13: if R[i,j] >0 then 14: e = e +  2 1 ],[*],[],[    K k jkQTkiPjiR 15: for k1 to K 16: e = e + (beta/2)* ]),[],[( 22 jkQTkiP  17: if e < 0.001 then break