«Arman Farahzadeh Master of Science (120 credits) Computer Science and Engineering Luleå University of Technology Department of Computer Science, ...»
A Solution for a Common Front-End File
System for Desktop and Smart Device
Master of Science (120 credits)
Computer Science and Engineering
Luleå University of Technology
Department of Computer Science, Electrical and Space Engineering
A solution for a common front-end file system for desktop
and smart device platforms
Josef Hallberg Luleå University of Technology Department of Computer Science, Electrical and Space Engineering Division of Mobile and Pervasive Computing January 2013 Abstract Many businesses have to release cross-device/cross-platform applications to remain in the market.
The challenge is that each platform demands its especial programming language making this goal very costly to achieve. Web technologies have improved a lot in recent years by newly introduced standards. Web seems mature enough to address this challenge both for existing desktop native applications and native mobile applications which run on smart devices. HTML5 as the latest web standard introduces many new features and capabilities for application developers. In this thesis I will argue why HTML5 is a right choice to select and how it is beneficial in both desktop and mobile platforms. In defending this claim, I will present and evaluate proof-of-concept prototypes.
i Acknowledgment This is a report describing the master thesis project by Arman Farahzadeh. The project was carried out at Designtech Projektsamverkan AB in Luleå, Sweden. Designtech Projektsamverkan AB provides web based collaboration solutions for other companies and organizations.
I would like to thank Josef Hallberg for being incredibly generous with his time and constantly supporting of my work. I was fortunate to have him as my supervisor. I would also like to thank Patrik Svanerudh in Designtech Projektsamverkan AB for his support through this process. I would like also to thank Andreas Andersson for his technical advises.
Finally, I am especially thankful of the constant support of my dear Parents: Ashraf and Rahman, and my dear sister, Elahe. Special thanks also to all of my great friends in Luleå University of Technology.
ii Table of Contents Chapter 1 Introduction
1.2 Problem Definition
1.3.1 File Drag and Drop functionality
Chapter 2 Theoretical Information
2.1 File Drag and Drop Functionality
2.2 Browser plug-ins
2.3 Introducing HTML5
2.4 HTML5 File Drag and Drop
2.5 Mobile Applications
2.5.1 Mobile Native application versus Mobile Web application
2.5.2 Overview of web application frameworks
Chapter 3 Experimental Design and Implementation
2.5.3 A sample mobile web application: Twitter application
3.1 HTML5 File Drag and Drop desktop web application
3.2 Twitter mobile web application
3.2.1 Development Environment and Requirements
Chapter 4 Evaluation and Discussion
4.1 HTML5 File Drag and Drop web Module
4.2 Evaluation of application usability through questionnaire method
Chapter 5 Conclusion and Future works
4.3 Sample mobile web application: Twitter web application
5.2) Future Works
iii 5.2.1) Drag and Drop module
5.2.2) Mobile Web app
Appendix A : Additional Graphs
iv List of Figures and Tables Figure 1.1Businesses tendency to release cross-platform/cross-device applications
Figure 1.2 Document Management System of ProjectCoordinator® running on Internet Explorer 8 and Windows XP operating system
Figure 2.1 PhoneGap Architecture
Figure 2.2 Sencha Touch 2 application architecture.
Figure 3.1 HTML5 Drag and Drop web application Architecture
Figure 3.2 HTML5 Multiple File Drag and Drop desktop web application, running on Fireforx 15.
0 under Ubuntu Linux Operating System
Figure 3.3 Project Schema for HTML5 File Drag and Drop web application
Figure 3.5 screenshot of the HTML5 File Drag and Drop module running inside Safari web browser on Windows 7
Figure 3.6 Twitter web application lists the recent tweet posts with a scrollable indicator and allows the user to tap on and select a particular post
Figure 3.7 Twitter web application after selecting a particular tweet post
Figure 3.8 Twitter web application running on a phone
Figure 4.1 Distribution of participants who had worked with similar files drag and drop functionality.
.. 28 Figure 4.2 Twitter Application architecture which follows Sencha Touch 2 recommended project structure
Figure 4.3 Twitter application running on iPhone and iPad based on scenario 1
Figure 4.4 Twitter web application running Galexy Nexus with Android 4.
01 (Google chrome and Firefox browsers) and window Phone simulator (Internet Explorer mobile browser)
v List of Tables Table 2.1 Mobile Native application compared with mobile web application
Table 2.2 Required developer skills sets for different mobile platforms
Table 4.1 Evaluating HTML5 Drag and Drop module on different web browser and operating systems.
. 27 Table 4.2 The Questionnaire results
Table 4.3 Participants extra comments on the application
Table 4.4 Evaluating twitter application based on scenario 1
This chapter presents an overview of the thesis report. It will provide the background of the topic as well as the problems and research questions that are elaborated through the whole report. In the Requirements section we talk about demands and preferences by the company, Designtech Projektsamverkan AB, in which this thesis has been carried out. The chapter ends with the organization section for the rest of the chapters.
As new trends for accessing information have introduced, many businesses try to release
1.1 Background their products compatible with at least major platforms in the market. Desktop users still have a big share of Internet users but they are going to be surpassed by users of other devices, such smart-phones and tablets.  As a result, both areas should be considered by companies when providing applications for their products.
Enterprise software applications that target businesses and organizations especially the ones that are used in offices solely address Desktop users. In this context, cross platform portability only target different operating systems support. If the final enterprise applications is web based the challenge still exist by how to support different web browsers as well as underlying operating system. IT companies that provide software products should also take large number of smart devices users into consideration. Even Enterprise applications should release applications for mobile and tablet devices.
In Fig 1.1, a schema of most widely used computing devices / platforms based on number of users is illustrated.
As device capabilities such as screen size, input types and display features can vary dramatically from vendor to vendor, achieving cross-platform and crossdevice consistency becomes more costly.
Figure 1.1Businesses tendency to release cross-platform/cross-device applications All of these platforms provide their own Software Development Kit (SDK) and demand different programming languages.
Even rich companies may not be able to afford to release their products for all of the platforms in the market.
Designtech AB is a company located in Luleå, Sweden which provides web based
1.2 Problem Definition collaboration solutions for other businesses. The company’s most important product, ProjectCoordinator®, is a web based comprehensive framework that addresses the organization’s challenges such as project Management, document management, web content management and collaboration, income and expense tracking and etc. ProjectCoordinator® provides a Document Management System for users so they can download, upload documents with view and edit and saving back to the system. Fig 1.2 shows an overall view of the document Management system in ProjectCoordinator®.
Figure 1.2 Document Management System of ProjectCoordinator® running on Internet Explorer 8 and Windows XP operating system Document Management system services are leveraged by offering exclusive Document Management Kit  which allows users to drag and drop files and folders from their computer to the document archive and open, edit locally and save automatically Microsoft Office ® documents(word®,Excel®, PowerPoint®, RTF and MS Project®) directly to the document archive after editing.
The main problem is that Document Management Kit features only work with Windows operating system and Internet Explorer web browser. It is based on Microsoft ActiveX controls technology which has some security issue itself . In addition, the ProjectCoordinator® is only available for Desktop computers and not on smart devices.
The company wanted to provide a new drag and drop functionality method which supports different operating systems and web browsers. The final module should be easy to use and efficient so the end-users can adapt to it fast and the company will not be bothered to invest new staff resources on customer training and support for the new features.
Furthermore, the company wanted to choose a correct strategy towards the smart devices.
In the past, they had decided to export some functionality of their existing product (ProjectCoordinator®), such as File Manager or Calendar for smart device users. One important aspect for the company was to have a solution which is not costly from development prospective so existing developers can adapt to it easily.
This research work tries to propose a new solution for existing web solution which has Desktop users in mind as well as suggestions for future releases which involves mobile applications for smart phones and tablets. We can summarize these facts into to research
1) Is there a comprehensive solution to provide desktop multiple files Drag and Drop upload from local file system to a web browser? This solution should provide crossplatform functionality so it is applicable in different operating systems and on different web browsers.
2) Is there a mobile application development method to provide cross-platform/crossdevice applications that can provide a similar look and feel as native mobile applications and a reduced final development cost for the companies?
The requirements by the company was both based on improvements of their existing
1.3 Requirements product but on different directions which only had cross platform feature in common. We
can categorize the requirements in two groups:
The existing file manager needs extra software to be installed on the user system to be able 1.3.1 File Drag and Drop functionality to provide drag and drop functionality. Some studies was demanded to understand more about the technologies that current document and file manager are based on. Are there are any other technologies that can help us to avoid extra software and plugins to install on end-user operating system to provide web based Drag and Drop functionality. Is web new standards are mature enough to achieve this functionality?
It was also important how the end-users perceive the application. The solution should be able to work on any operating systems, and any web browser users prefer to work with. In the case that the browser cannot provide file drag and drop functionality it is important to allow the users to continue working with an old way of uploading files which includes uploading the files manually from local File System. Furthermore, find a solution showed here and It has to provide an acceptable performance for the end-user and is easy to work with and avoids the company to spend resources to train this feature to the customers.
A proof-of-concept demonstrator was asked to present these features. The back-end of the application had to be compatible with Apache web server to store uploaded files.
Designtech AB also wanted to choose a correct strategy towards the smart device access.
1.3.2 Mobile Application They have decided to export some functionality of their existing product (ProjectCoordinator®), such as File Manager or Calendar for smart device users.
As a result, the company required an evaluation on existing mobile application development in the mark. They wanted to see if web is similarly a correct strategy for mobile applications. Demanded solution for the mobile application should include these
1) Different mobile platforms support 2Low development costs (low current developers training costs plus ability to integrate with desktop version)
3) Similar user interface to native mobile look and feel