Issuu on Google+

Improving sharing in WorkVoices Graduation Report Prashant Palikhe

Revision 4.0 10-8-2011


Graduation Report: Improving sharing in WorkVoices

GRADUATION REPORT FOR FONTYS UNIVERSITY OF APPLIED SCIENCES ICT GRADUATION INTERNSHIP Student: Name: Student number: Email: Telephone: Internship period:

Prashant Palikhe 2114126 p.palikhe@student.fontys.nl 0634311489 07/03/2011 – 07/08/2011

Company: Name company: Department: Location:

WorkVoices B.V. Research and Development Laan van Chartroise 174 3552 EZ Utrecht

Company Tutors: Name company tutors: Email:

Marc Koetsier Daan van Tongeren marc@workvoices.com daan@workvoices.com

University Tutor: Name university tutor: Email:

Bert van Gestel b.vanGestel@fontys.nl

Report: Title: Date submitted:

Improving sharing in WorkVoices

Approved and signed by the company tutor: Date:

Signature company tutor:

Name company tutor:

2


Graduation Report: Improving sharing in WorkVoices

Preface During my graduation internship, I wanted to take my technical knowledge to the next level by learning something entirely new, which involved new tools, new programming languages, new development architectures and techniques. WorkVoices B.V. gave me this opportunity by handing me a project that helped me get familiar with different aspects of web development and the web 2.0 world. The goal of the internship was to implement a multiple files upload utility in WorkVoices web application and integrate the utility with a popular file storage service, Dropbox. This report describes the process of work that I have done during my graduation project. The purpose is to give an insight into the considerations and the choices that I made during the project. The target audience is mostly people having an interest in the process or the execution of the project. Hereby, I would like to thank my company mentors Mr. Marc Koetsier and Mr. Daan van Tongeren for their guidance during my period in WorkVoices B.V. Their advices have positively influenced my professional practices and personal growth. I would also like to acknowledge the technical help and support I received from the senior developers at WorkVoices B.V., Mr. Leo Noordergraaf and Mr. Stephan Langeweg. Their guidance and instructions have helped broaden and deepen my knowledge on web development. Also, I would like to extend my gratitude towards my university tutor Mr. Bert van Gestel for his guidance during my graduation and my studies. Finally, I would like to thank all my colleagues at WorkVoices B.V. for their cooperation and my friends and family for their enormous support.

Prashant Palikhe Utrecht, August 2011

3


Graduation Report: Improving sharing in WorkVoices

Table of Contents Preface ............................................................................................................................................................. 3 Summary .......................................................................................................................................................... 5 Glossary............................................................................................................................................................ 6 1

Introduction ............................................................................................................................................. 7

2

WorkVoices B.V. ....................................................................................................................................... 8

3

4

2.1

WorkVoices B.V. ............................................................................................................................... 8

2.2

WorkVoices...................................................................................................................................... 8

Graduation Project ................................................................................................................................... 9 3.1

What led to the project .................................................................................................................... 9

3.2

Objectives ........................................................................................................................................ 9

3.3

The Assignment.............................................................................................................................. 10

3.4

Initial Situation ............................................................................................................................... 10

3.5

Deliverables ................................................................................................................................... 10

Approach ............................................................................................................................................... 11 4.1

Methods & techniques ................................................................................................................... 11

4.2

Work process (Phases and activities) .............................................................................................. 12

5

Initial Research & Planning ..................................................................................................................... 13

6

Iteration 1 .............................................................................................................................................. 13

7

Iteration 2 .............................................................................................................................................. 17

8

Iteration 3 .............................................................................................................................................. 22

9

Additional works .................................................................................................................................... 24

10

Conclusions & Recommendations ........................................................................................................... 27 10.1

Conclusions .................................................................................................................................... 27

10.2

Recommendations ......................................................................................................................... 28

Bibliography ................................................................................................................................................... 29 Appendix A: Technical Report ......................................................................................................................... 30 Appendix B: Project Plan ................................................................................................................................. 59

4


Graduation Report: Improving sharing in WorkVoices

Summary This report provides an in-depth view of my graduation internship at WorkVoices B.V. in Utrecht, the Netherlands. The internship was performed by me, Prashant Palikhe, an international ICT student at Fontys University of applied sciences in Eindhoven, the Netherlands. WorkVoices B.V. offers WorkVoices, a social networking tool for easier exchange of information and collaboration within companies. With WorkVoices, a company can easily set up its own private network for employees. Within the network, employees can share messages, question and files with each other, create and work on smaller groups, search for messages, subjects or personnel and quickly track and follow other employees. The goal of the internship was to create a multiple files upload utility in WorkVoices and integration with popular file sharing and file-storage service, Dropbox. Before the actual development process could start, research was done on the technologies and procedures used at WorkVoices B.V. Research was also done on the possibilities of the functionalities that could or could not be implemented. The research was followed by the development during which a multiple files upload utility and multiple attachments API were developed. Also integration between WorkVoices and Dropbox was created. The project was executed with the iterative and incremental development model. The whole development process consisted of multiple iterations. After all the iterations were completed and all the project goals were achieved, I worked on optimization of the code and some functionality that were beyond the scope of the project. All the project results were deployed to the production environment. The user feedback on the results was positive. During the internship, I have worked extensively with technologies such as Zend framework, JavaScript and AJAX. I have also looked into emerging web technologies like HTML5 and CSS3. Working with Zend framework was a good opportunity to get familiar with Model-View-Controller (MVC) architectural pattern used in application development. I got to learn a lot on the standards and the best practices of building application using the MVC pattern during the internship. As a conclusion, the internship was a great experience. The assignment was challenging, yet very interesting with a lot of new technologies and things to learn. It provided me with a great opportunity to not only improve my technical skills as a web developer but also I gained invaluable experience of working in a professional environment.

5


Graduation Report: Improving sharing in WorkVoices

Glossary

Adobe Flash API

Cloud computing

Dropbox

Enterprise microblogging

IM

Multimedia platform used to add animation, video and interactivity to web pages. Application Programming Interface is a set of rules that applications can follow to communicate with each other. User and access of multiple-server-based computational resources via a digital network (WAN, internet etc.). Popular web-based file storage and synchronization service that allows you to save all your files and pictures on the cloud and access them through a variety of desktop and mobile devices. Broadcast medium in the form of blogging but with smaller content. Microblogs "allow users to exchange small elements of content such as short sentences, individual images, or video links". Instant Messaging, a form of real-time direct textbased communication between two or more people using PCs or other devices, along with shared clients.

JavaScript

Object-oriented scripting language.

jQuery

Lightweight, cross-browser JavaScript library.

Model-View-Controller

SDK

Social network

Web 2.0

Wireframes Zend framework

Architectural pattern used in software engineering where the application logic, data access layer and the user interface are isolated from each other permitting independent development, testing and maintenance of each. A set of development tools that allows for the creation of applications for a certain software package. Architectural pattern used in software engineering that isolates the application logic for the user from the user interface, permitting independent development, testing and maintenance of each. The term is associated with web applications that provide interactive user-centered experience in the form of blogs, wikis, forums etc. rather than simple static information. A basic visual guide or prototype that represents the skeletal framework of a website. Open-source, object-oriented web application framework implemented in PHP 5.

6


Graduation Report: Improving sharing in WorkVoices

1 Introduction I worked at WorkVoices B.V. during my graduation project. The product of WorkVoices B.V., WorkVoices, is a social networking tool that brings together all of a company’s employees inside a private social network where they can communicate, collaborate and share information with each other more easily and efficiently than ever before. The goal of the graduation project is to build a multiple files upload utility in WorkVoices web application and to create integration between the WorkVoices web application and another file storage tool, Dropbox. The goal of this report is to give an insight into the process I used and the choices and considerations that I made during the execution of the project. The second chapter ‘WorkVoices B.V.’ of the report describes the organization and the product on which I worked on during the graduation project. The third chapter ‘Graduation Project’ will give a detail overview on the project itself, why the project was initiated, what was the initial situation, what were the problems and what were the objectives of the graduation project. The fourth chapter ‘Approach’ describes the methods and techniques that were used during the project and what the planning of the project looks like. In the fifth chapter ‘Initial Planning & Research Phase’, the research done on the project will be described. In the sixth chapter ‘Iteration 1’, the research, activities and result of the first iteration of the project will be described. In the seventh chapter ‘Iteration 2’, the research, activities and result of the second iteration will be described. In the eighth chapter ‘Iteration 3’, the research, activities and result of the third iteration will be described. In the ninth chapter ‘Additional Works’, the additional research and works that I did which were beyond the scope of this project will be described. In the tenth chapter ‘Conclusions & Recommendations’, the conclusions of the graduation period will be described. Also, a few recommendations of the company and the school will be described.

7


Graduation Report: Improving sharing in WorkVoices

2 WorkVoices B.V. 2.1 WorkVoices B.V. WorkVoices B.V. is a start-up established by Daan van Tongeren, Marc Koetsier and Bart Lacroix in 2008 that specializes in offering a renewed way of sharing knowledge and cooperation within companies. WorkVoices B.V. has developed a web application based on the best practices from the web 2.0 world and adapted them to the needs of organizations to share knowledge and work together within the company. As of 24thJune, 2011, WorkVoices has more than 2100 members who have created 212 social networks within WorkVoices. WorkVoices customers include both companies and government organizations. For the modern knowledge workers, WorkVoices B.V. also offers its services on the mobile platforms such as iPhone and iPad.

2.2 WorkVoices WorkVoices, the product of WorkVoices B.V., is a corporate social network that enables easier and efficient communication, collaboration and sharing within an organization. WorkVoices focuses on three aspects which are ‘Share’, ‘Search’ and ‘Follow’. With WorkVoices, a group of co-workers, a department, a team or a company as a whole can create its own private social network in minutes and begin inviting others for free. With WorkVoices enterprise microblogging services, the users can instantly share their thoughts or knowledge with other co-workers in the network. With the web application or a mobile device, one can quickly place a short message or a post into WorkVoices, start a conversation or actively collaborate with other co-workers in real-time no matter the location of the user. Users can also create and join private or public groups and collaborate in small teams within their network. Similarly, with WorkVoices, a user can easily search through messages and profiles of his co-workers and quickly connect with them or search on a subject or see what previously has been said about it. It is also possible to search through profiles of co-workers, search their background, past experiences and their proficiencies. Besides, a user can also track and follow co-workers in his department, in his project team or even colleagues in his profession. All these makes it possible for a WorkVoices user to have this social platform within their department, team or company to find and learn about each other, stay updated on each other’s activities and quickly share and disseminate knowledge with each other.

8


Graduation Report: Improving sharing in WorkVoices

3 Graduation Project In this chapter, the graduation project will be described. Before giving the description of the actual assignment, the reasons that led to the project will be given in the first paragraphs. Readers who are only interested in the assignment are directed to paragraph 3.3.

3.1 What led to the project As mentioned in the previous chapter, WorkVoices helps make communication within a company better by focusing on three aspect which are ‘Share’, ‘Search’ and ‘Follow’. The graduation project was initiated to improve the ‘Sharing’ aspect of WorkVoices. WorkVoices web application offered its users a quick way to share a document or a picture or any other file with his co-workers by attaching the file to a post. Allowing users to share a file along with the post, WorkVoices gave its users more than just text as a means of sharing. This made sharing and collaborating more efficient and therefore helped boost productivity. What WorkVoices lacked, compared to other corporate social network counterparts such as Yammer was the one file limit per post that it allowed to its users. So, if a user needed to share five documents related to a project with his co-workers, he would have to create five separate posts and attach the files along with each post or take another alternative by first compressing the files into one single file and sharing it with a post in WorkVoices. Either way, the process took longer than it really needed to be. The sharing wasn’t just as efficient as it could be. WorkVoices needed a multiple files upload utility with which users could add a number of files and documents to the post they wish to share with others. Besides that, for two reasons WorkVoices could benefit from integrating itself with the widely popular services of Dropbox. With the evolution of social software and web 2.0, more and more web applications are publishing APIs that enable other web developers to easily integrate the application’s data and functionalities with their own application. This allows web applications to take advantage of each other’s functionalities and create much richer and powerful applications. WorkVoices integrates with popular websites such as Twitter and LinkedIn to bring together the power of these social networking websites into WorkVoices. Since, WorkVoices is largely about sharing files and documents between co-workers, it only made sense for WorkVoices to create an integration with popular file sharing and file storage service i.e. Dropbox. Integration with Dropbox would also help boost the commercial value of WorkVoices in the market. Integrating Dropbox with WorkVoices own file sharing tool would make sharing and collaboration in WorkVoices even more efficient. In order to make this happen, this graduation project was initiated.

3.2 Objectives For any social networking website, sharing is vital. Within a company, people still rely on conventional practices of sharing using email or IM clients. Email and IM are great technologies, but they are the previous generation of communication tools. WorkVoices aim to provide employees within a company a better way to share by giving them a social, powerful, more discoverable & searchable and real-time platform to share whatever needs to be shared. To improve sharing in WorkVoices by making it faster, easier and informative was the objective of the project.

9


Graduation Report: Improving sharing in WorkVoices

3.3 The Assignment Build a multiple files upload utility in WorkVoices and integrate Dropbox into the utility.

3.4 Initial Situation In the beginning of the graduation project, WorkVoices did have a file upload utility that allowed users to share a file along with their posts. But the utility did not support multiple files uploads and was visually unattractive. During the project this utility was to be improved on all functional, technical and visual aspects. At the moment the project started, WorkVoices was integrated with two social networking websites, Twitter and LinkedIn. The integration with Dropbox, however, did not exist. During the project, integration with Dropbox was to be created and the file upload utility of WorkVoices was to be extended to support the Dropbox integration.

3.5 Deliverables        

Project Plan Wireframes of the multiple files upload utility Functional multiple files upload utility Wireframes of Dropbox integration with WorkVoices Integration of Dropbox with WorkVoices file upload utility Multiple attachments API Technical Report Project Report

10


Graduation Report: Improving sharing in WorkVoices

4 Approach This chapter describes how the graduation project was executed.

4.1 Methods & techniques The development methodology used during the graduation project was Iterative and Incremental Development. Under this development methodology, the application is developed through repeated cycles (iterative) and in smaller portions at a time (incremental). In each iteration design and modifications are made and new functionalities are added. The Iterative and Incremental Development model starts with an initial planning and ends with deployment with the cyclic iterations in between. Each iteration is considered as a separate project and includes parts of all phases (i.e. in each iteration, there is some analysis, some design, some code and some testing). The major advantages of Iterative and Incremental development methodology are quick feedback from end users, design flaws getting discovered quickly and early in development life cycle and the ability to address the ever changing and evolving requirements of the application.

Figure 1 Iterative and Incremental Development Model

Like all the projects executed with Iterative and Incremental Development model, the graduation project started with the initial research and planning phase. During this phase, a Project Plan was drafted, initial project risks were assessed and client requirements were explored. This phase was more about preparing the project rather than getting too deep inside the project. Wireframes or prototypes were also developed during this phase and discussed with the clients. As the project entered the iterative phases, actual implementation was done. In each iteration a slice of functionality of the entire project was completed, tested and deployed. During the first iteration, the multiple files upload utility was built. The goal of the second iteration was to create integration between WorkVoices and Dropbox. And the goal of the third iteration was to create a multiple attachments API to enable multiple attachments anywhere in the WorkVoices application. At the end of iteration, the results were delivered to the production environment. The reason I decided to work using iterative and incremental methodology was that I could break down the project into smaller, more manageable chunks and focus on less functionality at a time. This would give me an opportunity to learn from what has already been constructed as the project moves forward. Incremental approach also reduces risk. Partial release is the key feature of incremental development model. Only a part of 11


Graduation Report: Improving sharing in WorkVoices

the project functionalities are delivered at a time. On event of bugs or issues, much lesser code has to be reviewed as the developer knows exactly on what release things were working just fine. Maintenance and bugfixing is easier.

4.2 Work process (Phases and activities) Initial Planning & Research

     

Iteration 1

Iteration 2

     

Iteration 3

  

Draft Project Plan Project analysis Risk assessment Functional requirements analysis Develop mockups and wireframes Research on development procedures, architectures and techniques in WorkVoices B.V. Research on tools to build multiple files upload utility Build the utility Create documentation & test Research on how to integrate a web application with Dropbox Research on the Dropbox API Create the integration Integrate Dropbox with WorkVoices file upload utility using the Dropbox API Create documentation & test Build a generic multiple attachments API Create documentation & test

The following chapters describe these phases in more detail.

12


Graduation Report: Improving sharing in WorkVoices

5 Initial Research & Planning The graduation project started with the initial planning. During this phase, the overall project was discussed with the company tutor and the formal client to get a clear overview of the project. The project requirements were analyzed and the goals were specified. Initial risks were assessed and a risk management plan was drafted. Matters regarding how to approach the project were also discussed. The result was a project plan which after few revisions was agreed upon by both parties. After the initial planning was done, research was done to get a clear overview on how the project will be executed and what tools can be used to achieve the goals. Since the project involved using a third-party API, research was also done on the possibilities of functionalities that could be implemented in WorkVoices using the API. Research was also carried out to get accustomed with the development standards and techniques being used at WorkVoices B.V., e.g. research on Zend framework and web applications built with Zend framework. Wireframes and prototype related to the project were also developed and discussed with formal client during this phase. As a result of the initial planning, the project was broken down into three iterations. Each iteration was to be finished, tested and deployed to the production environment before moving on to the next iteration. The entire process was progressive and evolving, and in every iteration, a new functionality was added to the overall project results. Each iteration was carried out as a separate project with its own research, design, implementation, testing and deployment phases. The iterations are described in more detail in the following chapters.

6 Iteration 1 WorkVoices used standard HTML file select element to allow users to attach a file to a post. This file upload tool was inefficient in many ways. The tool did not have a clear visual display of what file the user has just selected. The upload progress was not shown. And the actual file upload was done only when the entire form was submitted. During which the page basically seemed to hang for the user until the web server completed the upload process and returned the next page. Figure 2 illustrates the file upload utility in WorkVoices in the beginning of this iteration.

Figure 2 File upload utility before the iteration started

The goal of this iteration was to implement a multiple files upload utility which would allow a user to: 1. 2. 3.

Attach more than one file to a post See a list of files he has selected to attach to the post Remove a file from the list of selected files (if necessary) 13


Graduation Report: Improving sharing in WorkVoices

4. 5.

Cancel a file upload Have a progress bar that displays the status of the file upload

The iteration started with a research on how to build the utility. There were several options available. One option and probably the simplest, was to add as many file select elements to the form as the number of files the users would be allowed to upload. But since the requirement was to allow unlimited number of file uploads, this option was discarded. Another option was to use Microsoft Silverlight. Microsoft Silverlight is a powerful development tool for creating rich internet applications, with features similar to those of Adobe Flash. But it is relatively young player in the field which is why I did not put a lot of considerations into it. Another option was to use a Java Applet. A Java Applet has a number of strong advantages. It is cross platform or platform independent, supported by most web browsers and is fast and feature rich (supports folders upload, supports files drag and drop and has unlimited maximum file upload size). But the major disadvantages of a Java Applet are its heavy runtime requirement and the slowness while loading the applet. An Applet is slow to load because the browser has to start the Java Virtual Machine (JVM) first then start the Applet. A user’s machine may be hung for a few seconds to get over this. The much lightweight and faster alternative was to use Flash and JavaScript. Flash does not have support for folder upload or drag-and-drops and has a limit of 2 GB for maximum file upload size. But, these disadvantages were not the drawbacks to this project. Flash has a strong penetration rate of ~99%. It is supported by all browsers and has >97 % of OS support (Win + Mac + Linux). The framework or the runtime requirement of a flash uploader is Adobe Flash which is really lightweight compared to Sun JRE for the Java applets. The conclusion of this research was that a flash uploader could be used to fulfill all the requirements of the multiple files upload utility for WorkVoices. There is a number of Flash and JavaScript based multiple files upload plug-ins available that can be easily integrated to a website. I decided to work with a Flash and jQuery based plug-in called Uploadify. The biggest advantage to me of using a jQuery based plug-in was the small learning curve of jQuery. JQuery’s use of familiar CSS syntax, its large documentation and strong open-source community makes it very easy to learn compared to standard JavaScript and other JavaScript libraries. JQuery uses very simple syntax and it also requires much less lines of code to achieve the same feature in comparison with other libraries. These were the advantages that came with Uploadify. Apart from that, Uploadify is highly customizable. There is an array of options that can be used to change the look and feel of the plug-in to fit it in nicely with the existing environment of the website which is why I chose to work with Uploadify. How I implemented Uploadify in Zend framework is discussed in detail in chapter 2.1 of Appendix A: Technical Report. On the front-end, I extended Uploadify to create a jQuery plug-in that consisted of Uploadify-powered file uploader (Flash uploader) and HTML/JavaScript based file uploader (Basic uploader). During the second iteration, Dropbox specific file upload functionalities were added to this plug-in. Unlike the existing HTML based file uploader, the basic uploader supports multiple and instantaneous file uploads with AJAX i.e. file upload occurs as soon as the user selects a file without refreshing the page. Adhering to the Model-ViewController pattern of the Zend framework, a view (Attachment) was created to display all the files attached to a post. On the back-end, a controller (FileController) was created to validate and handle all the file uploads. A model (AttachmentModel) was created to perform all the data manipulation tasks related to the files. More on Model-View-Controller pattern of Zend framework is discussed in chapter 2.1 of Appendix A: Technical Report. How the back end of the multiple files upload utility was implemented, the problems that I faced and the decisions that I made are discussed in detail in chapter 2.2 of Appendix A: Technical Report. Once the multiple files upload utility was implemented, it was tested. After which the utility was deployed to the production environment (online). The project was pushed further to iteration 2. Result Figures below illustrate the results of this iteration. 14


Graduation Report: Improving sharing in WorkVoices

Figure 3 Flash uploader

Figure 4 Basic uploader

By the end of this iteration, a utility containing an Adobe Flash and JavaScript based multiple files uploader (Flash uploader) was built that met all the requirements mentioned above. For the users with Adobe Flash not installed on their machine, the utility also contained HTML and JavaScript based multiple files uploader (Basic uploader). WorkVoices users would now be able to attach unlimited number of files to their post, see what files they have attached, remove wrongly attached files before sharing the post, see the progress of the file uploads and use a Flash based or HTML based uploader depending upon the resources available on their machine.

15


Graduation Report: Improving sharing in WorkVoices

Figure 5 Collaboration & sharing in WorkVoices using the multiple files upload utility

16


Graduation Report: Improving sharing in WorkVoices

7 Iteration 2 The goal of the iteration 2 was to create integration between WorkVoices and Dropbox. In other words, users should be able to connect their WorkVoices user account with one or more Dropbox accounts. And, revoke the connection if necessary. In addition to that, while attaching one or more files to a post, a user should be able to select files from his Dropbox account(s) and attach them to the post. Also the user should be able to upload new files to his Dropbox account(s) from within the WorkVoices file upload utility and attach them along with the post in WorkVoices. The iteration started with research. Research was done on how to access the Dropbox API and if there is any Dropbox SDK available that can be imported into WorkVoices development environment to get started with the Dropbox API. Research was also done on OAuth protocol which Dropbox uses to authenticate the API requests. OAuth is basically a protocol that allows a web application to access user’s private data and resources hosted on another application by using authorized tokens instead of user credentials. In terms of WorkVoices and Dropbox, OAuth allows WorkVoices to gain access to user’s Dropbox accounts from WorkVoices. But WorkVoices will never ask for user’s Dropbox credentials. Instead, users will be directed to a page on the Dropbox website to authorize tokens submitted by WorkVoices. And, these authorized tokens will be used by WorkVoices to request data from Dropbox on behalf of the user. First of all, the OAuth signing API was built. This API would be used to enable and disable connection between WorkVoices user accounts and Dropbox accounts. This would enable a user in a network to connect his WorkVoices user account with Dropbox accounts. The API also supported importing connected Dropbox accounts from one network to another. The API was built using the Zend_Oauth component of Zend framework. More on OAuth and how the API was built in the project is discussed in chapter 3.3.3 of Appendix A: Technical Report. Result: The result of this implementation is illustrated by Figure 6.

17


Graduation Report: Improving sharing in WorkVoices

Figure 6 Interface in WorkVoices to connect Dropbox accounts

Once the Dropbox OAuth API was built, the next step was to integrate Dropbox into the multiple files upload utility created in the first iteration. This would allow users to share their Dropbox files in WorkVoices. However, there were few problems. In Dropbox, user’s files are not accessible to others unless he has specifically shared the files. Consider a situation where a WorkVoices user in a network of 800 users shares a file from his Dropbox account. In Dropbox, the user has shared this file with one WorkVoices user. This means the Dropbox file that is shared in WorkVoices network is accessible to only two WorkVoices users. First being the user who shared the file. And second being the user with whom the file is shared in Dropbox. For the rest of the 798 users in WorkVoices, the link to the file would be just a broken link, since they do have access to that file in Dropbox. This meant, there would be lots of broken file links in WorkVoices. Another problem was the Dropbox API itself. Using the Dropbox API, a particular file in a user’s Dropbox account can only be identified using the full path to the file. Using only the path to identify a file is not reliable. Consider a situation where a user shares a file “File1” from his Dropbox in WorkVoices which exists in the directory “Directory1” in his Dropbox. The path to the file would therefore be “/Directory1/File1”. Now, if the user has shared this file with others in Dropbox, the others can also access this file using the same path. This path is the only way to uniquely identify a file in Dropbox via the API and therefore is stored in WorkVoices database. Now, if the user changes the file path or the file name in his Dropbox, the link in WorkVoices breaks for everyone. This meant there was an even bigger possibility of WorkVoices having broken links to Dropbox. After repeated talks with clients and colleagues, I decided to keep a copy of the file in WorkVoices every time a user decides to share a Dropbox file in WorkVoices. Doing so, any user who is unable to reach to the Dropbox file shared on WorkVoices for the reasons mentioned above, would be delivered the copy from the WorkVoices web server. Every time a user clicks a link to download a file which was shared from Dropbox, WorkVoices would try to fetch the file from Dropbox using the user’s Dropbox account(s) and if not accessible, user would be presented with a dialog box to get the copy from WorkVoices.

18


Graduation Report: Improving sharing in WorkVoices

Using an example scenario demonstrated with the figures below, how this implementation was done will be discussed. In Figure 7, WorkVoices user, Prashant, navigates through his Dropbox account in WorkVoices and selects two files (NY.jpg and WorkVoices poster.pdf) to share with others. These are the files only Prashant has access to in Dropbox.

Figure 7 Sharing file from Dropbox in WorkVoices

After that, Prashant shares the post. The result is illustrated in Figure 8.

19


Graduation Report: Improving sharing in WorkVoices

Figure 8

Now, when another WorkVoices user, Marc, tries to download the file, he won’t be able to access the files. This is because Prashant has not shared these Dropbox files with anyone else. So, Marc will be presented with a message to get the copies of the files WorkVoices as illustrated in Figure 9.

Figure 9

Marc can now decide whether or not to get the copy from WorkVoices web server. This was how the initial implementation was done. But, me and my company mentors wanted to get the opinions of actual WorkVoices users on this integration. So, a session with the users was planned. The purpose of this session was to get the feedback from the users on the current implementation (demonstrated above) and to get their ideas on how they really expect the integration between WorkVoices and Dropbox to work. The session was very useful. The users were excited to see the integration of Dropbox with WorkVoices. But they were not too excited about the message they were getting when trying to download an inaccessible Dropbox file as in Figure 9. Displaying the message was unnecessary from the user’s perspective. For users, downloading a file, no matter where it is stored i.e. WorkVoices web server or Dropbox, should be just a matter of a single click. After the user session, a meeting with the company mentors/formal clients was conducted and a conclusion was drawn not to display any kind of message to a user about the file being related to Dropbox while the user is trying to download it.

20


Graduation Report: Improving sharing in WorkVoices

Result Dropbox was integrated into WorkVoices multiple files upload utility. Users would be able to navigate through their Dropbox, and select one or more files to attach to their post in WorkVoices. Users would also be able to upload new files to their Dropbox and attach those files to the WorkVoices post.

Figure 10 Dropbox integrated to WorkVoices file sharing utility

Once the Dropbox integration was completed, the functionality was tested in the test environment. The bugs and issues that were found were resolved and eventually, the result was put into the production environment.

21


Graduation Report: Improving sharing in WorkVoices

8 Iteration 3 The goal of this iteration was to build an API that would allow other developers to quickly enable multiple attachments to their projects in WorkVoices. Besides adding attachments to a post, it is possible to add attachments to other entities in WorkVoices such as an event, a job, a group or a network. A generic API had to be built so that the same utility used to add attachments to a post can be used to add attachments to all the other entities. In order to achieve that, the front-end HTML and JavaScript, the back-end files handling code and the database related to the files had to be made generic. The security surrounding file uploads and downloads was also improved during this iteration. Result: The result of this iteration was a multiple attachments API in WorkVoices. API documentation was also developed for the developers who would use the API. Using this API, with few lines of code, it is possible to integrate the multiple files upload utility and enable multiple attachments wherever required in WorkVoices web application. Figure 11 illustrates how the API was used to add/show attachments in a network.

22


Graduation Report: Improving sharing in WorkVoices

Figure 11 Multiple attachments in ´Network´ using the multiple attachments API

23


Graduation Report: Improving sharing in WorkVoices

9 Additional Works Once all the project goals were achieved, I worked on optimization of the code and implementing other extra functionalities. During the optimization of the code, I learned more on Model-View-Controller (MVC) pattern in application development. Please refer to chapter 2.1 of Appendix A: Technical Report to get acquainted with MVC pattern in Zend framework if necessary. In an MVC application, only models have access to the database. The database is where all the information important to the application is stored. So, the best practice is to put as much business logic or the decision making code in the models as possible. The controllers just bind the models and the views together. Controllers are the orchestrators who translate the UI inputs into actions on the Model and pass back output to the client using Views. During my initial research, I had learned that the controllers are where the application logic goes and must define the application behavior. Controllers must define the application behavior in a sense that they map input from the UI onto calls in Models and handle client interaction, but beyond that role the best practice is to contain all the other application logic within the Models. Controllers are just to relay information between the models and the views. “Fat Model, Skinny Controller� is how an MVC application is to be built. Based on this, I refactored my code. I transferred most of the business logic to the Models keeping the controllers very clean and lean. I also created two abstraction layers of models. One layer of model handles the application related task while the other does purely database related actions. Furthermore, for code optimization I did a research on how to decrease load times of web pages. The biggest room for improvement in my code to increase the overall performance was to reduce the number of HTTP requests the client browser would be making through my code. During my project, I made use of a lot of images that were used as icons to indicate different kinds of file and folder types. Using many images in a webpage means a lot of HTTP requests and increased use of bandwidth. This has a severe impact on performance and response time of a website. Table below demonstrates the time spent on loading some of the popular websites. Time retrieving HTML

Time elsewhere

Yahoo!

10%

90%

Google

25%

75%

MSN

5%

95%

Ebay

5%

95%

Amazon

38%

62%

YouTube

9%

91%

CNN

15%

85%

Table 1Time spent on loading some of the popular websites

Note: Times are for page loads with an empty cache over Comcast cable modem (~2.5mbps)

24


Graduation Report: Improving sharing in WorkVoices

As can be seen, these websites spend between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts and style sheets). The negative impact of having many components in a page is increased by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Since I was making use of lots of icons, this was a great opportunity to optimize my code. The most practiced solution to this issue is the use of CSS sprites. CSS sprites are basically a technique where all or a number of images that are used in a webpage or the entire website is combined into one big image and the CSS background positioning technique is used to display the correct image in the correct place in the webpage. This technique reduces the number of HTTP requests made by a webpage and thus saves the overhead of having to fetch multiple images. Figure 12 shows the CSS sprite I used in my project. Using the CSS background positioning technique as demonstrated below, correct image can be easily displayed on a web page. .myImage { background-image: url(/images/sprite.png); background-repeat : no-repeat; background-position: 0 -76px; height: 16px; width: 16px }

Figure 12 WorkVoices icon pack

CSS sprites are generally created manually using graphics editing program such as Photoshop or GIMP. But it can take a lot of planning, measuring and coding to create sprites manually. There are many tools available online that makes it much easier to build CSS sprites. The most recommended spriting service is (SpriteMe). During my project, however, I made use of the (CSS.Sprite.Generator) created by Project Fondue. CSS Sprite Generator allows you to upload all of your images combined into a zip file and it will combine the uploaded images into a single sprite. It can also compress the sprite image with popular PNG image compression algorithm, OptiPNG. Besides, the generator also takes care of a number of browser specific bugs related to CSS sprites. Using this tool to create CSS sprites can save hours of work for a designer /developer. I also designed an icon pack for WorkVoices using Photoshop and Illustrator. A CSS sprite was created of the icons as illustrated by Figure 12. The icons created were sharper compared to existing ones and much smaller in size. In order to optimize the size of the icons, I used the tool PNGOUT developed by (Silverman), and used the tutorial written by (Watson) on how to use PNGOUT. Combining the icons used in WorkVoices into one CSS sprite reduced the number of HTTP requests by 15. It is also worthwhile to mention (PingdomTools) that I used to test the performance of a web page during my project. Pingdom Tools is a web-based application that can be used for easy testing of the performance of web pages. It gives information on the total loading time of a web page and the total number of objects required to render the page. This gives a good insight on things that can be left out or combined. It also gives a visualization of how page objects are loaded and the result can be sorted by load order, load time, file size, file type and URL. This information can be helpful to determine the cause of delay in load time of a web page. Besides, I also contributed on designing the new layout of the WorkVoices web application. Both the design and the icon pack were put online.

25


Graduation Report: Improving sharing in WorkVoices

Apart from that, I also built a search utility to quickly find the files attached to posts. Files could be searched on criteria such as file name, first and last name of the owner and the file extension type. The search result is displayed in a HTML table which can be sorted according to filename, owner’s name or file creation date. The result of this implementation is illustrated by Figure 13.

Figure 13 Search result of files search

In the search result, the files can be downloaded by clicking on the filenames. User can also visit the user profile of the file owner by clicking on the owner´s name. But most importantly, the user can visit the specific thread related to the file. A thread is a set of posts composed of an initial post and all the responses to it. Clicking the icon directs the user to the thread specific to the selected file as illustrated by Figure 14. By doing so, the user can easily view the conversation that took place around a certain file.

Figure 14 Thread specific to a file

26


Graduation Report: Improving sharing in WorkVoices

10 Conclusions & Recommendations 10.1 Conclusions The internship assignment was completed successfully. All the goals of the assignment which had been set forth in the project plan were achieved. The multiple files upload utility was created and an API was built for easy integration of the utility throughout the application. API documentation was drafted to guide other developers. The possibility to connect a WorkVoices user account with Dropbox account(s) was also implemented. The functionality to upload file(s) to and from Dropbox from within the WorkVoices file upload utility was built. A technical report was drawn to guide the developers on how the functionalities were implemented. All the project results were put online for the WorkVoices users. The internship period at WorkVoices B.V. has been a big learning experience. The project was challenging and quite difficult at times. But finishing it successfully with ample time on hand gave me a great sense of satisfaction. From the technical perspective, I have learned a lot about the technologies, standards and the best practices of the web development. Web technology was definitely not a primary focus at Fontys. Coming from the background of .NET technology, one of my primary goals for the internship was to extend my skills as a web developer and get acquainted with new trends and technologies of web development. This internship provided me with enough opportunities to achieve my goals. It was my first time working with technologies such as Zend framework, JavaScript and AJAX. Getting started with these technologies required a lot of initial research but in the end, the knowledge acquired is invaluable. Working with Zend framework was a good chance to get familiar with Model-View-Controller architectural pattern. JavaScript and AJAX were great technologies to work with. I was surprised with the power these technologies gave to the hand of the developers to create interactive web applications. jQuery, the JavaScript framework, was also a valuable learning opportunity. jQuery simplifies the task of creating JavaScript functionalities while making sure the functionality works exactly the same across as many browsers as possible. And to a developer, it saves hours of work. One of the biggest challenges of the front-end web development that I experienced was making sure that everything looked and worked the same way in all browsers. jQuery was definitely a great help to achieve that. The graduation project in WorkVoices taught me how to look into the problems from various perspectives before working on a solution. Each iteration of the project would be followed by a code review from a senior developer. The code reviews were an excellent opportunity to learn the standards and the best practices of web development. The working atmosphere at WorkVoices is very relaxed and friendly yet very professional and it was fun to work there. I had a lot of freedom while performing this project which helped me grow as a developer. I was encouraged to make suggestions and come up with my own ideas. And to see my decisions being appreciated and valued at the company was very motivating. For WorkVoices B.V. all the requirements of the project were delivered and on time. In the end of the iteration, the results were tested and eventually migrated from the development environment to the production environment. The user feedback on the results was positive. So were the responses from the formal clients. The company itself makes use of WorkVoices for their internal communication. And our own experiences have shown the results of the project have been an improvement to WorkVoices. I am very pleased with the opportunities I got to learn new things during the internship period. I am sure the knowledge that I have gained will be of high value throughout my career.

27


Graduation Report: Improving sharing in WorkVoices

10.2 Recommendations I would like to suggest WorkVoices B.V. to develop documentation on the software development procedures in WorkVoices B.V. WorkVoices B.V. makes use of DTAP methodology for its application development. DTAP stands for Development, Testing, Acceptance and Production. Documentation on how this methodology is carried out will make it easier for new developers to quickly get started with WorkVoices. Also documentation on the version control procedures can be useful. In my previous internship, the senior developers spent a lot of time to help me understand the development technologies and procedures in the company. Setting up a work environment and getting started with the actual development took longer than I expected at WorkVoices, because I did not receive much guidance from the fellow developers. This was because WorkVoices was on the verge of a major release when I went in. This kept the senior developers very busy. As far as the project results are concerned, I recommend WorkVoices B.V. to keep up with the updates on the Uploadify plug-in. Also in the past few months, there have been a few security issues related to Dropbox. Though the security issues have been resolved, I recommend WorkVoices to keep an eye on that matter. Besides that, the current Dropbox API has few limitations. In the developer´s forum in Dropbox website, it has been mentioned that Dropbox is working on a new web API that is expected to be released soon. I recommend WorkVoices to keep up with these developments to see if the new Dropbox API exposes enough functionality to implements the features that were left out from this project because of the limitations of the current API. To Fontys University of Applied Sciences, I would like to suggest including more on the web technologies in the curriculum. With the evolution of Web 2.0, web services, HTML, XHTML and CSS, many applications are switching to or are built with the web as platform. Therefore, knowledge on different web technologies is always a valuable asset. From my experience, very little focus is given to web technologies and development in Fontys. Including more on these topics would be useful for future students at Fontys.

28


Graduation Report: Improving sharing in WorkVoices

Bibliography 1.

CSS.Sprite.Generator. (sd). CSS Sprite Generator. Opgeroepen op 7 20, 2011, van http://spritegen.websiteperformance.org/

2.

Dropbox Client Library for PHP. (sd). Opgeroepen op 5 2, 2011, van http://code.google.com/p/dropboxphp/

3.

ElementIT. (sd). Multiple uploaders/downloader comparision. Opgeroepen op 3 30, 2011, van http://www.element-it.com/uploaderscomparison.aspx

4.

Gabreanu, A. (sd). How to integrate uploadify in zend framework. Opgeroepen op 3 30, 2011, van http://phpdev.ro/how-to-integrate-uploadify-in-zend-framework-1-9-6.html

5.

PingdomTools. (sd). Opgeroepen op 7 2, 2011, van Pingdom Tools: tools.pingdom.com

6.

Silverman, K. (sd). PNGOUT. Opgeroepen op 7 10, 2011, van http://advsys.net/ken/utils.htm

7.

SpriteMe. (sd). Spriting made easy. Opgeroepen op 7 20, 2011, van http://spriteme.org/

8.

Watson, K. (sd). How to use PNGOUT. Opgeroepen op 7 10, 2011, van http://advsys.net/ken/util/pngout.htm

9.

Yahoo! (sd). Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests. Opgeroepen op 7 25, 2011, van http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

29


Graduation Report: Improving sharing in WorkVoices

Appendix A: Technical Report

30


Graduation Report: Improving sharing in WorkVoices

Improving sharing in WorkVoices Technical Report Prashant Palikhe

Revision 2.0 10-8-2011

31


Graduation Report: Improving sharing in WorkVoices

Preface This report describes the technical aspects of the multiple files upload utility and Dropbox integration created during my graduation internship at WorkVoices B.V. The report is written in an informative manner. Because of the agreement with the formal clients on not using the WorkVoices source code, the report is written in a generic manner. The sample code and procedures explained are generic in nature but stays close to how it was implemented during the graduation internship at WorkVoices B.V. The target audience is mostly software developers having an interest in designing and implementing an efficient multiple files upload utility in their web application or those who are interested in plugging in their web application to Dropbox. Finally, I would like to acknowledge the technical help and support I received from senior developers at WorkVoices B.V. Their guidance and instruction have been immensely helpful in successfully finishing the internship. Also, I would like to thank my company tutor Marc Koetsier and university tutor Mr. Bert van Gestel for their guidance in writing this report. Prashant Palikhe Utrecht, August 2011

32


Graduation Report: Improving sharing in WorkVoices

Table of Contents Preface ........................................................................................................................................................... 32 Summary ........................................................................................................................................................ 34 Glossary.......................................................................................................................................................... 35 1.

Introduction ........................................................................................................................................... 36

2.

Multiple Files Upload Utility.................................................................................................................... 37

3.

4.

2.1

Implementing Uploadify in Zend framework ................................................................................... 37

2.2

Problems and solutions .................................................................................................................. 45

Dropbox Integration ............................................................................................................................... 49 3.1

Introduction to Dropbox................................................................................................................. 49

3.2

Introduction to API ......................................................................................................................... 49

3.3

Using the Dropbox API for Dropbox Integration .............................................................................. 50

3.3.1

Getting a developer´s key........................................................................................................... 50

3.3.2

Authorizing using OAuth protocol .............................................................................................. 50

3.3.3

Zend OAuth to use the Dropbox API ........................................................................................... 53

Conclusion.............................................................................................................................................. 56

Bibliography ................................................................................................................................................... 57 Index .............................................................................................................................................................. 58

33


Graduation Report: Improving sharing in WorkVoices

Summary This report provides an in-depth view of the technical aspects of the multiple files upload utility and Dropbox integration created during my graduation internship at WorkVoices B.V. The following aspects are covered by this report: 1.

2.

Multiple Files Upload Utility What is Zend framework and brief introduction to how applications are built using Zend framework? How to enable multiple files upload in a web application written in Zend framework using a jQuery plug-in, Uploadify? How to securely and effectively handle files upload in a web application using components from Zend framework? Dropbox Integration What is Dropbox? What are APIs? How to use Dropbox API to integrate Dropbox in a web application?

The overall conclusion of the report is that a stable and secure utility for enabling fast and efficient multiple files upload in a web application can be created using the guidelines of this report. Also, connecting a web application to Dropbox and using its API to access Dropbox user contents is also possible following the guidelines of this report.

34


Graduation Report: Improving sharing in WorkVoices

Glossary

ACL ActionScript

Controller

Cookie

Flash JavaScript jQuery Model

Model-View-Controller

Object-oriented programming

View

Access Control List is a list that specifies which users are granted access to resources as well as what operations are allowed on given resources. ActionScript is an object-oriented language primarily used for the development of websites and software targeting the Adobe Flash Player platform, used on Web pages in the form of embedded SWF files. In a web application built with Zend framework’s MVC pattern, Controllers are the links between Models and Views. They manipulate models, decide which view to display based on the user’s request and other factors, pass along the data that each view will need, or hand off control to another controller entirely. A cookie is basically a text data that a web application uses to send/receive state information to/from a user’s browser. The state information can be used for authentication, identification of a user session, user’s preferences or anything else that can be accomplished through storing text data. Adobe Flash is a multimedia platform used to add animation, video and interactivity to web pages. JavaScript is an object-oriented scripting language mostly popular as clientside JavaScript, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites. JQuery is a cross-browser JavaScript library designed to simplify the clientside scripting of HTML. In a web application built with Zend framework’s MVC pattern, Model is the part of the application that defines its data access routines and some business logic. Model-View-Controller is a software architecture pattern that builds a distinction between the way the software handles data and the way the software interacts with the user. Object-oriented programming is a programming paradigm using objects (data structures consisting of data fields and methods together with their interaction) to design applications and computer programs. In a web application built with Zend framework’s MVC pattern, View defines exactly what is presented to the user. Usually controllers pass data to each view to render in some format. Views will often collect data from the user, as well. This is where the HTML markup resides in a MVC web application.

35


Graduation Report: Improving sharing in WorkVoices

1. Introduction During the graduation internship at WorkVoices B.V I created a multiple files upload utility in WorkVoices web application. I also created integration between the WorkVoices and Dropbox. The goal of this report is to give an insight into how the utility and the integration were implemented, what problems occurred and how they were resolved. WorkVoices web application is built using Zend framework. So the report is mostly targeted to the developers who are willing to build a files upload utility and create Dropbox integration in a web application built with Zend framework. The second chapter ‘Multiple Files Upload Utility’ gives a brief introduction to Zend framework, how a web application is structured under Zend framework and how to use an external jQuery plug-in to enable multiple files upload in an application. The chapter also describes the problems that I faced during the implementation and how I solved them. The third chapter ‘Dropbox Integration’ starts with a brief introduction to Dropbox. The chapter also describes what APIs are and how they can be used to integrate services of many web applications. Finally, the chapter describes how to integrate a web application with Dropbox with Zend framework and the Dropbox API. The fourth chapter ‘Conclusions’ documents all the conclusions drawn.

36


Graduation Report: Improving sharing in WorkVoices

2. Multiple Files Upload Utility This chapter will describe how the multiple files upload utility was implemented in WorkVoices using a plug-in, Uploadify. Uploadify is a jQuery plug-in that integrates a fully-customizable multiple file upload utility in a web application. The plug-in uses a mix of jQuery, Flash and a back-end upload script of the developer’s choice to send files from a local computer to a web server. With the mixture of JavaScript and ActionScript, Uploadify dynamically creates an instance a multiple file upload tool over any element on a webpage with a unique identifier. How Uploadify can be implemented in Zend framework is covered in this chapter. The chapter builds up to the explanation by first introducing Zend framework and explaining how applications built with Zend framework work. Besides, the chapter also describes a number of problems that I faced during the implementation of multiple files upload utility and how I solved them.

2.1 Implementing Uploadify in Zend framework This section will begin with a brief introduction of Zend framework and the Model-View-Controller design pattern in Zend framework, explaining what models, views, and controllers are and how they interact with each other to produce a logically separated, layered application in Zend framework. In the words of its official website (http://framework.zend.com/), the Zend Framework (ZF) is “an open source framework for developing web applications and services with PHP 5 based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase.” ZF provides a comprehensive set of tools to build and deploy PHP-based Web applications, with built-in APIs for common functions like security, input validation, data caching, database and XML operations, and internationalization. The strength of ZF lies in the complete implementation of the Model-View-Controller (MVC) pattern that it provides, which allows application business logic to be separated from the user interface and data models. This pattern is recommended for Web application development, as it encourages code reusability and produces a more manageable code structure. The typical approach when constructing dynamic Web pages using PHP is to embed PHP code into one or more HTML documents using special delimiters. This approach however comes at a price because it produces PHP scripts that are so closely interwoven with HTML code that maintaining them becomes a nightmare. Since the same physical file usually contains both HTML interface elements and PHP code, developers and interface designers must coordinate with each other to make changes. E.g. when interface designers need to alter the look and feel of a Web application- typically the changes they make to the HTML code must be monitored by a developer to ensure the integrity of the embedded business logic. Not only this approach is inconvenient from the developer and the designer’s perspective, it also usually requires more time and money than is strictly necessary for the task at hand. Zend framework allows applications to be built using the Model-View-Controller (MVC) design pattern. This approach allows application business logic to be separated from the user interface and data models so that they can be manipulated independent of each other. The following section explains the key components of MVC pattern in Zend framework.

37


Graduation Report: Improving sharing in WorkVoices

Models Models represent the “data layer” which provides functions to retrieve, save, delete and otherwise manipulate application data. This data layer is output-agnostic: it is completely concerned with the data itself, and completely unconcerned with how this data is presented to the user. As such it provides a logically independent interface to manipulate application data. E.g. consider a simple Web application that allows users to post advertisements for used cars. The application’s data– the car listings – would be represented by a Listing model, which would expose methods for manipulating the underlying data. The code snippet below shows what such model might look like:

<?php class ListingModel { public function __construct() { // constructor } public function read($id) { // code to retrieve a single listing using its ID } public function find($criteria) { // code to retrieve listings matching given criteria } public function save() { // code to insert or update a listing } public function delete() { // code to delete a listing } } ?>

38


Graduation Report: Improving sharing in WorkVoices

Views Views are concerned solely with how the data accessed and manipulated by the models are presented to the user. And therefore, views are the â&#x20AC;&#x153;user interface layerâ&#x20AC;?, responsible for displaying data but not capable of directly accessing or manipulating it. Views can also receive input from the user, but their responsibility is again limited to the appearance and behavior of the input form; they are not concerned with processing, sanitizing, or validating the input data. In the context of example above, views would be responsible for displaying current listings and for generating forms into which new listings could be entered. The code snippet below shows how a view intended to display the most recent listings may look like.

<!DOCTYPE html PUBLIC"-//W#C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type "content="text-html; charset=utf-8"/> <base href="/" </head> <body> <div id="header"> <div id="logo"> <img src="/images/logo.gif"/> </div> </div> <div id="content"> <h1>Recent listings</h1> <?php foreach($this->listings as $l): ?> <div class="listing"> <h3 class="listing_title"> <a href="/listing/view/<?php echo $l->id; ?>"> <?php echo $l->title; ?> </a> </h3> <span class="listing_content"> <?php echo $l->content; ?> </span> </div> <?php endforeach; ?> </div> </body> </html>

As illustrated above, views are usually just the PHP scripts containing HTML code necessary to correctly render and display output to the user.

39


Graduation Report: Improving sharing in WorkVoices

Controllers Controllers are the link between models and views. They make changes to application data using models, and then call views to display the results to the user. A controller may be linked to multiple views, and it may call a different view depending on the result that is to be shown at any given time. Therefore, controllers are the “processing layer”, responsible for responding to user actions, triggering changes in application state, and displaying the new state to the user. In the context of the example above, controllers would be responsible for reading and validating request parameters, saving and retrieving listings using model functions and selecting appropriate views to display listing details. So, for example, a controller would intercept a request for the most recent listings, query the ListingModel model for a list of recent entries, select an appropriate view, inject the entries into the view and render the view. The code snippet below shows how a controller that brings together the ListingModel and view illustrated above might look like.

<?php class ListingController { function indexAction() { // code to initialize model and retrieve data $listing = new ListingModel(); $matches = $listing->find( array( 'date' =>'-10 days', 'status' =>'published' ) ); // code to initialize view and populate with data // returned from model $view = new ListingView(); $view->listings = $matches; echo $view->render('recent.php'); } } ?>

As the code snippet illustrates, a controller serves as an intermediary, invoking model methods to perform operations on application data and using views to display the results of those operations to the user. Under the Zend Framework, controllers contain methods suffixed with “Action”, and therefore called actions. These action methods hold the processing code necessary to interact with models and views. There is also an übercontroller called the front controller, which is responsible for intercepting user requests and invoking appropriate controller and action methods to satisfy them.

40


Graduation Report: Improving sharing in WorkVoices

Routes Routes provide the link between user requests and actions. When a user makes a request for an application URL, the front controller intercepts that request and decides, based on the URL pattern, which controller and action should be invoked to fulfill the request. This process of routing requests to controllers is a key part of the application execution flow. By default, the Zend framework includes some standard routes that assume that application URLs are of the form /module/controller/action, and divert user requests accordingly. E.g. a request for http://application/listing/index would be automatically mapped to ListingController: indexAction (If no module mentioned, it is assumed the request is made for the default module). Zend framework also supports custom, user-defined routes. These routes support optional and mandatory parameters, default values and multiple chained routes, and they allow you to micromanage your applicationâ&#x20AC;&#x2122;s routing so that application URLs need not directly reflect your internal classification of controllers, actions and modules. (Vaswani, 2011) But for this report, I assume that everywhere the default routing of Zend framework will be used. Installing Zend framework automatically creates a directory structure for you which resemble the figure 2. The section below describes how to implement Uploadify in Zend framework. Figure 1 Zend framework directory structure

Implementation In order to implement an instance of Uploadify, following minimum requirements need to be met:

1. jQuery 1.4.x or higher 2. swfObject 2.2. or higher 3. Flash player 9.0.24 or higher

Figure 1 Zend framework directory structure

All these can be obtained by downloading the latest package of Uploadify from the URL http://www.uploadify.com/download/ The downloaded package contains the following: cancel.png

Image used in cancel button to remove files from the upload queue

jquery.uploadify.v2.1.4.min.js

Minified version of Uploadify javascript

jquery-1.4.2.min.js

Minified version of jquery library

swfobject.js

41


Graduation Report: Improving sharing in WorkVoices

uploadify.css

Cascading Style Sheet to control the look and feel of Uploadify plug-in

uploadify.php

Default back end upload script provided by Uploadify

uploadify.swf

The flash object that will replace the HTML file input element

The public folder in your application directory structure contains all the public files for your application. The web root of your web server is typically set to this directory. In the “/js” directory under the public directory, put all the JavaScript files that you downloaded from Uploadify package which are: the jquery library, the jquery.uploadify.v2.1.4.min.js and the swfObject.js. Inside the “/images” directory under the public directory goes cancel.png. Inside the “/css” directory under public directory, goes uploadify.css. Create a directory “/flash” inside the public directory and put Uploadify.swf in there. Create a controller “application/modules/default/controllers/UploadController” that will contain the back-end upload script. Inside the controller, create two action methods: indexAction and uploadAction. The uploadAction will contain code that will be responsible to upload the files to your web server. Create a folder named “uploads” outside your public directory and make it writable by PHP (e.g. CHMOD 0777). This will be the destination folder for all the user uploads. The upload directory should be outside the web application root directory. In this way, the contents of the writable folder will not be revealed to outside public. Create a view “application/modules/default/views/scripts/upload/index.phtml” that will contain the upload form and standard HTML file input element over which we will be creating the instance of Uploadify. Make sure the element has a unique id assigned as illustrated below. <input id="file_upload" name="file_upload" type="file"/>

Now, if you browse your application at www.example.com/upload/ you should see the standard HTML file input. In order to replace the file input with Uploadify, add the following piece of JavaScript code in your view index.phtml.

<?php $this->inlineScript()->captureStart(); ?>

1.

$(document).ready(function() { $('#file_upload').uploadify({ 'uploader' : '/flash/uploadify.swf', 'script' : '/upload/upload', 'cancelImg' : '/images/cancel.png', 'folder' : '/uploads', 'scriptData': { 'sessionID' : <?php echo session_id() ?>} }); });

42


Graduation Report: Improving sharing in WorkVoices

2.

<?php $this->inlineScript()->captureEnd(); ?>

3.

Browsing you application at www.example.com/upload/ should now replace the HTML file input with the Uploadify flash uploader. The table below describes the array of options used above to create an Uploadify instance. Option

Description

uploader

The path to the Uploadify.swf file

script

The path to the back-end script that will process the file uploads

cancelImg

The path to the image you would like to use as the cancel button

folder scriptData

The path to the folder where you want to save the files An object containing name/value pairs with additional information that should be sent to the back-end script when processing a file upload

Apart from these options, there are a number of other options and methods available that can be used to customize the plug-in to fit your own needs. For full information on that, visit the Uploadify documentation by visiting http://www.uploadify.com/documentation/ (Uploadify, 2011) Now that we have the front-end working for us, it is time to work on the back-end upload script. While creating the Uploadify instance, we assigned ‘/upload/upload’ as the value for ‘script’ variable. Under the Zend framework, assuming the default route, the URL will be routed to the default modules UploadController’s uploadAction which is exactly the action we created earlier to use as the back-end upload script. So, with that correctly done, I am going move forward to use Zend_File_Transfer component to handle the file uploads. Zend_File_Transfer is a Zend framework component that provides extensive support for file uploads and downloads and comes with built-in validators for files plus functionality to change with filters. Specifically, I will use Zend_File_Transfer’s HTTP protocol adapter, Zend_File_Transfer_Adapter_Http to handle the file uploads. In your uploadAction, add the following code. $adapter = new Zend_File_Transfer_Adapter_Http(); if ($adapter->isUploaded()) { $allowedExtensions = array( 'bmp','gif','jpeg','jpg','png' ); $adapter->addValidator('Extension', false, $allowedExtensions); $adapter->addValidator('Size', false, 10485760); if (!$adapter->isValid()) { $targetFolder ="../uploads/"; $adapter->setDestination($targetFolder); $adapter->receive(); } 43


Graduation Report: Improving sharing in WorkVoices

}

First, I am creating an instance of Zend_File_Transfer_Adapter_Http adapter. Then I check if the file has been actually uploaded by the user. Then I use the Zend_File_Transfer’s built-in validators to validate the size (allowing maximum file size to 10 MB) and the extension (allowing uploads of only image files) of the uploaded files. If valid, I set the adapter’s upload destination to “/uploads” directory that I created earlier. Finally, I call the Zend_File_Transfer’s receive() method to receive the uploaded files in the directory. Once done, one would expect Uploadify to work fine. But there were two problems, Access control and Adobe Flash’s session related bug, that I had to solve before getting Uploadify to work. These problems and the solutions are discussed in detail in the next chapter.

44


Graduation Report: Improving sharing in WorkVoices

2.2 Problems and solutions This section describes the problems that I faced while implementing the multiple files upload utility and how I solved them. The solutions to the problems are based on my research and the guidance from the senior developers at WorkVoices B.V. 1. Access Control If the Web application makes use of ACL, it is likely that Uploadify won’t be able to reach the back-end upload script unless the controller created earlier is added as resource and sufficient privilege is given to Uploadify to access the resource, i.e. UploadController. With Zend framework, managing and controlling access to certain resources by other requesting objects can be done very easily using Zend_Acl. The code snippet below shows how to add UploadController as an ACL resource and allow access to everyone to reach it.

$acl = new Zend_Acl(); $acl->add(new Zend_Acl_Resource('upload')); $acl->allow(null, "upload", null);

Here, we are adding the UploadController created above as a new Zend_Acl_Resource and then we are giving access to all the action methods in the controller to everyone. Doing so we ensure that our controller action is reachable to everyone from anywhere in the application. 2.

Flash session related bug

If your Web application uses sessions and cookie based authentication, trying to upload files at this moment using any browser other than Internet Explorer (IE) still won’t work and will throw an IO error. This is because of session related bug that exists in Flash. (Forum, 2008) Any cookies from a non-IE browser (i.e. authentication, login, etc.) will not be sent with the file upload request. This means, sessions and cookie based authentication are lost when making an upload. Because Uploadify also makes use of Flash to communicate with the back-end script, the session information is not sent when a file is being uploaded. In order to work around this problem, the scriptData option of Uploadify can be used. The scriptData option allows you to send additional data to the back-end script during an upload. The scriptData values can be called in the back-end script like any submitted form field (i.e. $_POST*‘scriptDataVariable’+. The code snippet below illustrates how to achieve this.

In the Uploadify script, use $('#file_upload').uploadify({ ... 'scriptData': { 'sessionID' : <?phpecho session_id() ?>} ... )}; In the back-end script, i.e. the uploadAction created above in the UploadController, call the session ID and restore the session. 45


Graduation Report: Improving sharing in WorkVoices

if(isset($_REQUEST['sessionID'])) { $sessionID = $_REQUEST['sessionID']; if(isset($sessionID) && $sessionID != session_id()) { session_id($sessionID); } }

This solution could be considered a security issue but not severe enough to actually compromise any data. Moreover, WorkVoices Web app uses HTTPS for encrypted communication between the client and WorkVoices web server thus nullifying the security issue that comes with the above solution. 3.

Handling duplicate file names

When saving the files into the MySQL database we don’t have to worry about this. The table for saving the files uses an id as the primary key. So a number of files with the same name won’t create any problem since every file has a unique identifier. However, when saving files to the web server, the problem with duplicate file names arises. If a user uploads two different files with the same file name Zend_File_Transfer adapter’s receive() method will overwrite a file with the same name and this is certainly not a desired behavior. To prevent this, we need to modify the file name before the file is saved in the web server. The following code shows how I created a unique name and used rename filter for Zend_File_Transfer to give unique names to save files in the web server. Zend_File_Transfer comes with several file related filters which can be used to automate several tasks which are often done on files. I use the Zend_File_Transfer’s Zend_Filter_File_Rename component to rename a file to something unique while saving it to the hard disk.

In the uploadAction of FileController, before we receive the files, use the following code: $uploadedFileName = $adapter->getFileName(); $extension = strtolower(substr($uploadedFileName, (strrpos($uploadedFileName, '.') + 1))); $uniqueFileName = uniqid() . "." . $extension; $adapter->addFilter('Rename', array('target' => $targetFolder . $uniqueFileName, 'overwrite' => true));

First I get the filename of the uploaded file using Zend_File_Transfer’s getFileName() function. Then, I extract the extension of the file using PHP’s strrpos() function combined with substr(). With strrpos() I find the position of the last occurrence of ‘.’. Then with substr() function I extract the part of the string from the filename after that last occurrence of ‘.’. This gives me the extension of the filename. Using the PHP’s uniqid() function I generate a unique identifier based on the current time in microseconds. Uniqid() returns a unique id like 4b3403665fea6. The result of uniqid() can be made even more unique by prefixing the result with a random number and setting the more_entropy parameter of the function to true (Setting more_entropy to true, uniqid() will add additional entropy at the end of the return value, which makes the results more unique). E.g. $uniqueId = uniqid(rand(), true) ; Joining the extension and the unique identifier gives me a unique file name. By doing this we remove the probability of a file overwriting another file with the same name in the web server. 46


Graduation Report: Improving sharing in WorkVoices

I also saved the unique name associated with the file in the database so that the unique id in the files table in the database can be linked to the file with unique name in the web server. The final code to handle file uploads looks like this.

$adapter = new Zend_File_Transfer_Adapter_Http(); if ($adapter->isUploaded()) { $allowedExtensions = array( 'bmp','gif','jpeg','jpg','png' ); $adapter->addValidator('Extension', false, $allowedExtensions); $adapter->addValidator('Size', false, 10485760); if (!$adapter->isValid()) { $targetFolder ="../uploads/"; $adapter->setDestination($targetFolder); $uploadedFileName = $adapter->getFileName(); $extension = strtolower(substr($uploadedFileName, (strrpos($uploadedFileName, '.') + 1))); $uniqueFileName = uniqid() . "." . $extension; $adapter->addFilter('Rename', array('target' => $targetFolder . $uniqueFileName, 'overwrite' => true)); $adapter->receive(); } } 4.

Discarded files

If a file is uploaded using AJAX without reloading the page, there is a chance that the user uploads a file and never submits the form. E.g. in WorkVoices, a user may upload some files to attach to a post but then closes the browser without submitting the form. The files are however already uploaded to the WorkVoices web server. It is necessary to check the upload directories for these discarded files and remove them from the server. If your web server is based on Linux operating system, one way to achieve this is by using cron job scheduler. Cron is a time-based job scheduler in Unix-like computer operating systems with which one can schedule jobs (commands or shell scripts) to run periodically at certain times or dates. So, we can create a PHP script that gets the modified time of the files in the upload directory using PHPâ&#x20AC;&#x2122;s filemtime() function and unlink or remove the ones that are older than 1 day. A cron job can be set up that periodically run this PHP script. That way the discarded files are cleaned from the server. I took a different approach to remove the discarded files from the server. When a user uploads a file, the file is uploaded to a temporary directory in the web server. If the file was successfully uploaded, the name of the file in the web server was returned to the front-end JavaScript. Then, I dynamically created HTML hidden input elements to create an array that holds the names of the uploaded files. This array is sent to the back-end script when the form is submitted. The script handling the form submission retrieves the uploaded file names from the array and moves the files to the correct upload directory from the temporary directory. It also checks if there are any files in the temporary directory other than the uploaded files. If so, the files are removed from the web server.

47


Graduation Report: Improving sharing in WorkVoices

5.

Security regarding file download and remove

In WorkVoices, it is important to make sure that the files cannot be downloaded or removed by the users without sufficient privileges. The base URL for file download or remove looks like: http://app.workvoices.com/file/download/id/111 http://app.workvoices.com/file/remove/id/111 With this URL, it was possible to download or remove files by just guessing the id. Even the files from other networks, private groups or private events could be accessed. In order to prevent that, I used md5 hash to sign the download or remove URL. For security reasons I cannot disclose how exactly the hash was created. But the main idea is to add a hash to the URL so that the users cannot reach to the file just through its id or any other parameter that is used that can be easily guessed. I generated the hash using PHP’s md5() function with arguments that are unique to the user and some random text or a number. E.g. md5($user_uid . session_id() . ‘download file’) creates a hash as a 32 hexadecimal number which may look like f359bf03d8fffbc5e7c99b9612dc2a51 This hash is used to sign the file download or remove URL. So the full URL looks like: http://app.workvoices.com/file/download/id/111/hash/f359bf03d8fffbc5e7c99b9612dc2a51 In the script where I handled the file download/remove, I made sure that the hash parameter is not left out in the URL. Then I generated the hash again with the same parameters to match it with the hash passed as the URL parameter. The file download or remove was made possible only if the hashes matched. This way, user could no longer download a file or remove it by just guessing the id. Also, it prevented the users from getting access to the files on a different network or a private group or a private event.

48


Graduation Report: Improving sharing in WorkVoices

3. Dropbox Integration 3.1 Introduction to Dropbox In the words of its official Web site (http://www.dropbox.com/), Dropbox is “a free service that lets you bring all your photos, docs, and videos anywhere. This means that any file you save to your Dropbox will automatically save to all your computers, phones and even the Dropbox website.” Dropbox provides a Webbased file hosting service that uses cloud computing to enable users to store and share files and folders with others across the Internet using file synchronization. (Dropbox, 2011) The reason why Dropbox stands out of the crowd of other similar services is the relatively large number of user clients that Dropbox offers across a variety of desktop and mobile operating systems. Currently, Dropbox offers its services in total of 10 clients which include Microsoft Windows, Mac OS X, Linux and several mobile devices such as Android, Windows Phone 7, iPhone, iPad and Blackberry. And there also exists a web-based client for when no local client is installed.

3.2 Introduction to API APIs, or Application Programming Interfaces, are essentially a set of standardized methods for applications to talk to one another and share information. In desktop application, the Operation System provides a full range of APIs for the programs to run and interact with it. E.g. in Windows, an application can use the windows API to appear as an icon in the system tray. When used in terms of web development, APIs are usually provided as a means of importing data to other services, or using third party clients to push information to your account. A company releases its API to the public so that the developers can design products that are powered by its service. In more technical terms, a Web API is a defined as a set of HTTP request messages along with a definition of the structure of response messages, which is usually in an Extensible Markup Language (XML) or JavaScript Object Notation (JSON) format. Web APIs allows web communities to share content and data between applications. In this way, content that is created in one place can be dynamically posted and updated in multiple locations on the web. E.g. photos from sites like Flickr can be shared on social networking websites like Facebook. Twitter’s API allows developers to share live comments made on Twitter with a Facebook account. Likewise, API released by YouTube allows YouTube’s video content to be embedded on third-party websites. Web APIs come in different forms. Some APIs require the developer to pass chunks of XML data back and forth to make use of its services. But it is the growing trend with the Web 2.0 applications including Dropbox (discussed below) to use more direct REST style communications called RESTful APIs. REST (Representational State Transfer) is an architecture style for designing networked applications. The idea being, rather than using complex mechanisms such as COBRA, RPC or SOAP to connect applications, simple HTTP is used to exchange information between applications. RESTful applications rely on HTTP requests on all four CRUD (Create/Read/Update/Delete) operations. (ELKSTEIN, 2008)

49


Graduation Report: Improving sharing in WorkVoices

3.3 Using the Dropbox API for Dropbox Integration Dropbox API enables you to add cloud storage to your Web application. An application can integrate to Dropbox and make use of all the file synchronization and storage services that Dropbox offers, thus supercharging the application’s storage needs. With Dropbox API, a developer can do things such as access Dropbox accounts from within the application, interact with user files, grab thumbnails or create galleries from photos, create Dropbox accounts etc. But, for my graduation internship, saving files to and from a user´s Dropbox folder and getting metadata information of Dropbox´s files and folders were the only concerns. Below, I will be discussing on how to get started with using the Dropbox API. First of all, the primary standard procedures that have to be followed in order to access the Dropbox API will be discussed, followed by the how OAuth authorization can be used to make the Dropbox API calls on the user’s behalf and finally how I used Zend_Oauth component from the Zend framework to achieve that.

3.3.1

Getting a developer´s key

In order to get access to the Dropbox API, first an app has to be created. Creating an app is as easy as filling up a contact form and can be done by visiting http://www.dropbox.com/developers/apps. It is necessary for the developer to have a Dropbox account in order to create an app. The account with which the app is created is the app owner. Once the app is created, it is given ‘Development’ status by Dropbox. The app becomes the consumer as the app will consume Dropbox’s services via the Dropbox API. The developer is provided with consumer key and consumer secret which can be used by the consumer to identify itself to Dropbox (service provider). But the development status implies that, with these pair of consumer key and consumer secret, the app can only be used by the app owner and has a limit of 5000 API calls per day. The developer may apply for the production status once the app is sufficiently developed. Once the app is given the production status, it can be used by any Dropbox user. During my project, getting the production status for WorkVoices Web app only took 1 working day.

3.3.2

Authorizing using OAuth protocol

OAuth authorization allows your Web application to get authorization from the user to access private resources hosted on another website by making API calls to the website on behalf of the user, without forcing the user to disclose his credentials for the website on your Web application. Instead of user credentials, OAuth works with tokens. OAuth allows users to hand out tokens instead of credentials to give access to their data hosted by a website. Each token grants access to a specific site (e.g. a photo editing site), called consumer, for specific resources (e.g. private photos) hosted on another site (e.g. a photo storage site), called service provider for a defined duration (e.g. next 24 hours). OAuth is not a completely new idea; rather it is a standardized protocol building on the existing properties of protocols such as Google AuthSub, Yahoo BBAuth, and Flickr API etc. All of these protocols more or less operate on the basis of exchanging user credentials for an access token of some description. OAuth being an open standard makes it more powerful since it only requires a single implementation as opposed to many disparate one depending on the web service.

50


Graduation Report: Improving sharing in WorkVoices

Dropbox uses this standard OAuth authorization workflow to allow third party applications to access Dropbox’s API on the user’s behalf. Figure 2 demonstrates the OAuth authorization workflow in context of WorkVoices in three steps which is described below. First when a user decides to connect a Dropbox account to his WorkVoices account, WorkVoices sends an HTTP request to Dropbox’s service asking for a new unauthorized request token. This token is not user specific from Dropbox’s perspective, but WorkVoices may use it specifically for the current user and should associate it with their account and store it for future use. WorkVoices then redirects the user to Dropbox so they can approve WorkVoices access. The URL for this redirect will be signed using Dropbox’s consumer secret and it will also contain the unauthorized request token as a parameter. Now, the user may be asked to log into Dropbox and will be presented with a Dropbox screen asking if they want to approve the request from WorkVoices to access Dropbox’s API on the user’s behalf. If the approval is given, Dropbox will record the current unauthorized request token as having been approved by the user, thus making it user specific. The user will then be redirected back to a specific callback URL used by WorkVoices. Once user approval is granted to WorkVoices, it may exchange its unauthorized request token for a fully authorized access token by sending a request back to Dropbox including the request token. Dropbox will then send back a response containing the access token. The access token must be used to sign all requests to Dropbox’s API made by WorkVoices on behalf of the user. Dropbox will give access token only after they have confirmed the attached request token has not already been used to retrieve another access token. At this point, WorkVoices may confirm the receipt of the approval to the user and delete the original request token which is no longer needed. From this point onward, WorkVoices may use the Dropbox API to request data or perform file operations on data in Dropbox on behalf of the user. Next chapter will describe how Zend_Oauth component from Zend framework can be used to achieve this and make the Dropbox API calls to get user’s account info and folder metadata. (Zend, 2011)

51


Graduation Report: Improving sharing in WorkVoices

Figure 2 OAuth workflow

52


Graduation Report: Improving sharing in WorkVoices

3.3.3

Zend OAuth to use the Dropbox API

As mentioned earlier, the first step is to acquire the consumer key and the consumer secret from Dropbox by creating and registering an app. Once done, the next step is to construct a Zend_Oauth_Consumer instance passing it a configuration as displayed in the code snippet below. 1.

$config = array(

2.

'consumerKey' => $consumerKey,

3.

'consumerSecret' => $consumerSecret,

4.

'requestTokenUrl' => 'https://api.dropbox.com/0/oauth/request_token',

5.

'accessTokenUrl' => 'https://api.dropbox.com/0/oauth/access_token',

6.

'authorizeUrl' => 'https://www.dropbox.com/0/oauth/authorize',

7.

'signatureMethod' => 'HMAC-SHA1' ,

8.

'callbackUrl' => 'http://prashant.dev.int.workvoices.com/dropbox,

9.

);

10. $consumer = new Zend_Oauth_Consumer($config);

Once, you have set up a Zend_Oauth_Consumer instance, request tokens can be fetched as: $token = $consumer->getRequestToken(); This new request token, which is an instance of Zend_Oauth_Token_Request, is unauthorized and therefore cannot be used to access the Dropbox API. So, the next step is to get the user to authorize it. Also, make sure, the token is stored. $_SESSION['DROPBOX_REQUEST_TOKEN'] = serialize($token); $consumer->redirect(); The user will now be redirected to Dropbox where they will be asked to authorize the request token attached to the redirect URIâ&#x20AC;&#x2122;s query string. (Refer to step 2 in Figure 3) Once the user agrees and completes the authorization, the user will be redirected to the previously set Callback URL. In this example, http://prashant.dev.int.workvoices.com/dropbox Before redirecting the user to Dropbox, make sure the request token is stored. In this example, the token is stored in the userâ&#x20AC;&#x2122;s session, but it can also easily be stored in the database as long as the request token is tied to the current user and can be retrieved when they return to the application. Once the request token is authorized, it can be used to fetch access tokens as follows.

53


Graduation Report: Improving sharing in WorkVoices

1.

if (!empty($_GET) && isset($_SESSION['DROPBOX_REQUEST_TOKEN'])) {

2.

$token = $consumer->getAccessToken(

3.

$_GET,

4.

unserialize($_SESSION['DROPBOX_REQUEST_TOKEN'])

5. 6.

); }

Once access token is acquired, previous request token can be discarded and the access token can be used for the future use with the Dropbox API. In this example, access token will be persisted to the user session, but, the Dropbox access token last for as long as 10 years. So, it should really be persisted to a database. Access tokens were stored to WorkVoices database in order to link them with users. unset($_SESSION['DROPBOX_REQUEST_TOKEN']); $_SESSION['DROPBOX_ACCESS_TOKEN'] = serialize($token);

This authorized access token can be used to actually interact with the Dropbox API. The access token must be included with every single API request. To help with that, Zend_Oauth_Consumer offers a ready-to-go HTTP client which can be used by itself or by passing it as a custom HTTP client to another library or component. The code snippet below shows how Zend_HTTP_Client can be used to retrieve a userâ&#x20AC;&#x2122;s Dropbox account info. This can be done from anywhere in the application, as long as the OAuth configuration can be accessed and the final authorized access token can be retrieved. 1.

$token = unserialize($_SESSION['DROPBOX_ACCESS_TOKEN']);

2.

$client = $token->getHttpClient($config);

3.

$client->setUri('https//api.dropbox.com/0/account/info');

4.

$client->setMethod(Zend_Http_Client::GET); $response = $client->request();

1.

$body = Zend_Json::decode($response->getBody());

2.

$result = $response->getBody(); echo $result;

Similarly, in order to get metadata of the root folder of the userâ&#x20AC;&#x2122;s Dropbox account, following code could be used. 5.

$token = unserialize($_SESSION['DROPBOX_ACCESS_TOKEN']);

6.

$client = $token->getHttpClient($config);

7.

$client->setUri('https//api.dropbox.com/0/metadata/dropbox/');

8.

$client->setMethod(Zend_Http_Client::GET); $client->setParameterGet('list', true) ; $response = $client->request();

3.

$body = Zend_Json::decode($response->getBody());

4.

$result = $response->getBody(); echo $result; 54


Graduation Report: Improving sharing in WorkVoices

The only difference between these two API calls is the URI that is set to the Zend_HTTP_Client object. Each API location is dedicated to a unique service. The account info API location retrieves information about the user’s account while the metadata API location provides the ability to retrieve file and folder metadata from the user’s account. Besides, a parameter ‘list’ with value set to true is added to the metadata API request URI which is an option to whether or not retrieve recursive metadata representations from the user’s directory. It is worthwhile to mention that all the parameters that are passed along the Dropbox API request URL needs to be url-encoded. E.g the path parameter passed along with the metadata API request needs to be urlencoded so that the parameter does not contain spaces or any characters that are not allowed in a URL. You can use the PHP’s rawurlencode() function to do this. Rawurlencode() returns a string in which all nonalphanumeric characters except -_.~are replaced with a percent (%) sign followed by two hex digits. This is the encoding described in RFC 3986 for protecting literal characters from being interpreted as special URL delimiters, and for protecting URLs from being mangled by transmission media with character conversions. E.g. Making the API request with URL “https//api.dropbox.com/0/metadata/dropbox/my folder” doesn’t work. The path “my folder” contains a space. Dropbox returns invalid signature error to this request. First url encoding “my folder” will return a url-encoded string which looks like “my%20folder” and then making the API request with the URL 'https//api.dropbox.com/0/metadata/dropbox/my%20folder will make a successful request. Dropbox will then return the content information of the folder “my folder” in Dropbox.

55


Graduation Report: Improving sharing in WorkVoices

4. Conclusion This report provides guidelines on how to implement a multiple files upload utility in a web application. The report also describes some general problems and their solutions while implementing a file upload utility in a web application. The report focuses primarily on the applications built with Zend framework. But the background information and guidelines in the report can be useful for any developers willing to build a file upload utility in their web application. The report also describes what APIs are and provides guidelines on how to use the Dropbox API in a web application. The guidelines are specific to applications built with Zend framework. But any developer willing to understand the concept of APIs, what they are, why use them and how to use them can use this report as reference.

56


Graduation Report: Improving sharing in WorkVoices

Bibliography Dropbox. 2011. Dropbox. What is Dropbox. [Online] Dropbox, Inc., 2011. [Citaat van: 8 6 2011.] http://www.dropbox.com/tour. ELKSTEIN, DR. M. 2008. Learn REST: A Tutorial. [Online] 9 2 2008. [Citaat van: 20 4 2011.] http://rest.elkstein.org/. Forum, General Discussion. 2008. Flash Cookie Bug. [Online] 5 3 2008. [Citaat van: 25 3 2011.] http://swfupload.org/forum/generaldiscussion/383. Uploadify. 2011. Uploadify Documentation. Uploadify. [Online] Reactive Apps, 2011. [Citaat van: 20 3 2011.] Vaswani, Vikram. 2011.Zend Framework, A Beginner's Guide. sl : McGraw Hill, 2011. Zend. 2011. Introduction to OAuth. Zend Framework. [Online] Zend Technologies, 2011. [Citaat van: 10 6 2011.] http://framework.zend.com/manual/en/zend.oauth.introduction.html.

57


Graduation Report: Improving sharing in WorkVoices

Index A

Model-View-Controller....................................... 37

Actions ...............................................................40 Application Programming Interface (API).............47

R

C Consumer key .....................................................48 Consumer secret.................................................48 Controllers..........................................................39 D Dropbox .............................................................47 F Front controller ..................................................40

Request token .................................................... 49 Routes ............................................................... 40 V Views ................................................................. 38 W Web API ............................................................. 47 Z Zend Framework ................................................ 37 Zend_File_Transfer............................................. 43

M Models ...............................................................37

58


Graduation Report: Improving sharing in WorkVoices

Appendix B: Project Plan

59


Graduation Report: Improving sharing in WorkVoices

Improving sharing in WorkVoices Project Plan Prashant Palikhe

Revision 3.0 10-8-2011

60


Graduation Report: Improving sharing in WorkVoices

Table of Contents 1.

Introduction ........................................................................................................................................... 62

2.

Company Information............................................................................................................................. 63

3.

Project Statement .................................................................................................................................. 64

4.

5.

3.1

Project Roles and Responsibilities................................................................................................... 64

3.2

Project Description ......................................................................................................................... 64

3.3

Current Situation............................................................................................................................ 65

3.4

Project Product .............................................................................................................................. 65

3.5

Project Deliverables and Non-Deliverables ..................................................................................... 65

3.6

Project Constraints ......................................................................................................................... 66

3.7

Project Risks................................................................................................................................... 66

3.8

Project Duration............................................................................................................................. 67

Project Phasing and Deliverables ............................................................................................................ 68 4.1

Project Methodology...................................................................................................................... 68

4.2

Initial Planning and Research Phase ................................................................................................ 68

4.3

Project Iterations ........................................................................................................................... 69

4.3.1

Iteration 1 .................................................................................................................................. 69

4.3.2

Iteration 2 .................................................................................................................................. 69

4.3.3

Iteration 3 .................................................................................................................................. 69

Management Plan .................................................................................................................................. 70 5.1

Management Objectives ................................................................................................................ 70

5.1.1

General objectives ..................................................................................................................... 70

5.1.2

Assumptions .............................................................................................................................. 70

5.1.3

Management Constraints ........................................................................................................... 71

5.2

Project Controls ............................................................................................................................. 71

5.3

Money ........................................................................................................................................... 71

5.4

Skills............................................................................................................................................... 71

5.5

Quality ........................................................................................................................................... 71

5.6

Information.................................................................................................................................... 72

5.7

Time .............................................................................................................................................. 73

5.8

Organization .................................................................................................................................. 74

61


Graduation Report: Improving sharing in WorkVoices

1. Introduction This document will provide a definition of the graduation project, including the projectâ&#x20AC;&#x2122;s goals and objectives. Additionally, the document will serve as an agreement between the following parties: Formal Client, Company Tutor, Project Leader, University Tutor and other personnel associated with and/or affected by the project. The second chapter gives an overview of the company and the product that the project was based on. The third chapter describes the project itself, the goals of the project, why the project was initiated and what the project deliverables are. The chapter further includes the constraints and risks involved with the project. The fourth chapter gives an overview on how the project will be executed. Finally, the fifth chapter gives an overview on the project management plan including a detailed project timeline.

62


Graduation Report: Improving sharing in WorkVoices

2. Company Information WorkVoices B.V. was established by Daan van Tongeren, Marc Koetsier and Bart Lacroix in 2008. WorkVoices focuses on sharing of knowledge within organizations. Based on the best practices of Web 2.0 world WorkVoices B.V has created an application, WorkVoices that allows easier and efficient collaboration, communication and sharing within an organization. WorkVoices services are available in multiple platforms. As an Adobe Air based Desktop application, WorkVoices is available in multiple computer platforms such as Microsoft Windows, Mac OS X or Linux. WorkVoices is also available as mobile applications for iOS devices such as iPhone and iPad. And finally WorkVoices is available as a web-based client for when no local client is installed. The company was established with the motive of creating social networks for companies that enable easy and quick communication within organizations, to find co-workers, to gather and disseminate knowledge, questions and documents and to keep others informed of oneâ&#x20AC;&#x2122;s daily work activities.

63


Graduation Report: Improving sharing in WorkVoices

3. Project Statement 3.1

Project Roles and Responsibilities

Role Formal Client / Company Tutor

Project Leader

University Tutor

3.2

Responsibilities         

Ultimate decision-maker Provide project oversight and guidance Review/approve some project elements Ensure project is heading towards right direction Manage project in accordance to the project plan Receive guidance from Formal Client/Company Tutor Receive guidance from University Tutor Direct the project towards achieving the project objectives Handle problems

Guide the project leader (student) during the project

Participant(s) Marc Koetsier Daan van Tongeren

Prashant Palikhe

Bert van Gestel

Project Description

WorkVoices is a social networking tool where users can quickly share messages with others within networks. WorkVoices also allows users to attach a file along with the message. This gives the users more than just text as a means of sharing. What WorkVoices lack compared to other social networking tools is the ability to handle multiple files as attachments to a post. In WorkVoices, only one file can be attached to a post at a time. This makes the process of sharing a number of files related to one subject a longer process. E.g. if a user needs to share five documents related to a project with his co-workers, he has to create five separate posts and attach the files along with each post or take another alternative by first compressing the files into one single file and sharing it with a post in WorkVoices. Either way, the process takes longer than it really needs to be. There is a room for improvement in sharing by creating a multiple files upload utility with which users can add a number of files and documents to a post they wish to share with others. This is one of the reasons why the project was initiated and is therefore a primary goal of the project. Besides that, WorkVoices B.V. wants to create integration between WorkVoices and a popular file storage services, Dropbox. WorkVoices integrates several Social Media services in the WorkVoices application to serve organizations and network even better. Integration with Dropbox will benefit WorkVoices in two ways. Firstly, Dropbox is immensely popular service and is increasingly used in organizations as file storage, backup and collaboration tool. Integration with Dropbox will add a lot to WorkVoices commercial value. Apart from that, allowing users to share their Dropbox files in WorkVoices will further improve the sharing aspect of WorkVoices. To create this integration is another primary goal of the project.

64


Graduation Report: Improving sharing in WorkVoices

3.3

Current Situation

WorkVoices is an organizational social network where employees can share knowledge and information with each other. This can be done by composing a message or a post in WorkVoices application and sharing it with others. Along with the post, it is possible to attach a file to add more information to the message being shared. Currently, only one file can be added to a post in WorkVoices. During this project this functionality has to be extended to support multiple file uploads so that more than one file can be attached to a post in WorkVoices. At the moment WorkVoices B.V. integrates popular social networking services Twitter and LinkedIn in the WorkVoices application. WorkVoices B.V. wants to create integration with Dropbox as well. So obviously, the Dropbox integration does not exist. This integration is to be created during the project.

3.4

Project Product

The end results of this project will be: 1. 2. 3. 4. 5.

3.5

User will be able to attach multiple files to a post in WorkVoices. User will be able to connect one or more Dropbox account(s) to his WorkVoices user account. User will be able to share files from Dropbox in WorkVoices. User will be able to upload files to Dropbox while posting a message or a reply in WorkVoices. A multiple attachments API will be created.

Project Deliverables and Non-Deliverables

Deliverables 1. 2. 3. 4. 5. 6. 7. 8. 9.

Project Plan Wireframes and use case diagrams Possibility to attach multiple files to a post Possibility to connect WorkVoices user account with one or more Dropbox account(s) Possibility to attach share files from Dropbox in WorkVoices Possibility to upload files to Dropbox while posting a message or a reply in WorkVoices Multiple attachments API with API documentation Technical Report Project report (Internship report) Non-deliverables

1.

Design Document

65


Graduation Report: Improving sharing in WorkVoices

3.6

Project Constraints

From client 1. 2. 3.

The project needs to be finished before 4th August, 2011. The project needs to be implemented using PHP5 and Zend framework. The project implementation should remain within the legal boundaries of Dropbox. From project leader

1. 2. 3.

The client must be reachable and available for communication. In case of clientâ&#x20AC;&#x2122;s absence, other developers need to be reachable and available for communication. Project leader should be allowed access to source code in SVN Repository.

3.7

Project Risks

Technical Risk or Uncertainties: 1. 2. 3. 4. 5.

Failure to submit deliverables on time/ keep schedule The key requirements are not implemented sufficiently. Project deliverables are unclear. Lack of knowledge required for the project. System crash or data loss.

A Risk Management Plan has been produced (see below) in order to identify possible risks related to the project. The Risk Management Plan includes a course of action to be taken in the event of a problem. If during the course of the project additional risks are identified by the organization, they will be added to the Risk Management Plan.

66


Graduation Report: Improving sharing in WorkVoices

Risk Management Plan Risk Level (L=Low M=Medium H=High) (Risk = Probability * Impact)

Risk

Probability (1-5) 1=Lowest 5=Highest

Impact (1-5) 1=Lowest 5=Highest

Mitigation Strategy

Project Definition The key requirements are not implemented sufficiently

M: Scope is generally defined, subject to revision

Project deliverables are unclear

H: Deliverables are well-defined

Lack of knowledge required for the project

M: Project requires knowledge of programming in PHP, MySQL and Zend framework

2

2

1

4

Scope initially defined in project plan, reviewed periodically by the Project leader

5

Included in Project Plan, subject to amendment, contact client to resolve any issues

5

Proper pre-study of the required technologies involved, and their possibilities / limitations, consultation of corresponding literature, assistance from company tutor if necessary.

5

Create comprehensive project timeline with frequent baseline reviews, communications plan, frequent meetings, project management oversight

Project Size Failure to submit deliverables on time/ keep schedule

H: Project duration 22 working weeks

2

L: Data backup is generally encouraged, sharing resources reduces overall risks

1

Miscellaneous

System crash or data loss

3.8

4

Project Duration th

Start date: 7 March, 2011

th

End date: 7 August, 2011

67


Graduation Report: Improving sharing in WorkVoices

4. Project Phasing and Deliverables 4.1

Project Methodology

The project methodology that will be used to execute this project is the â&#x20AC;&#x153;Iterative and Incremental developmentâ&#x20AC;? methodology. Iterative development refactors code repeatedly, making progress through successive refinement. On any given day, a developer repeatedly performs a little modeling, a little coding, a little testing and a little integration. The completion of each cycle provides feedback for the next cycle. Incremental development builds and delivers software to a production environment as a series of small and regular releases with expanding functionality. An application is therefore delivered in incremental releases over time, where each release adds new functionality to the previous release. The main benefits which the iterative and incremental development model offers are the quick feedback from the end users and testers, quicker discovery of design flaws and added flexibility of the project to adapt to ever changing and evolving requirements . As a developer, the primary benefit that I will achieve from this methodology is that it will allow me to break the project into small chunks and focus on the project one chunk at a time. Incremental development model is an evolutionary model, where the previous iteration guides the next iteration. This gives me an opportunity to learn and refine the development process along the way.

4.2

Initial Planning and Research Phase

The project will start with the initial planning and research phase. During this phase, the following activities will be performed: 1.

2.

3.

Planning. A Project Plan will be drawn that will be used to guide both project execution and project control. Project plan will have answers to most of the why, what, who and when questions related to the project. Requirements analysis. This will include gathering detailed information about the project, gathering functional and technical requirements related to the project, drawing up initial designs and mock-ups etc. Setting up the work environment. This will include getting all the development tools installed and running, researching on the frameworks, architecture and/or version control system to be used in the project.

Deliverables 1. 2.

Project plan Wireframes and use case diagrams

68


Graduation Report: Improving sharing in WorkVoices

4.3

Project Iterations

Following the iterative and incremental development model, the project will be divided into iterations. During each iteration, a subset of the project requirements will be implemented. Once iteration completes, the project will be pushed forward to the next iteration until all the project requirements are met. 4.3.1

Iteration 1

In this iteration, the multiple files upload utility for WorkVoices will be built. In the end of this iteration, a user will be able to upload and attach multiple files to post in WorkVoices. Deliverable: 1.

4.3.2

Multiple files upload utility.

Iteration 2

In this iteration, WorkVoices will be integrated with Dropbox. As a result, a user will be able to connect one or more Dropbox account(s) to his WorkVoices user account. User will also be able to revoke or undo the connection. The user will be able to share his Dropbox files in WorkVoices. Also he will be able to upload files to his Dropbox while posting a message or a reply in WorkVoices. Deliverables: 1. 2. 3. 4.

4.3.3

Interface to connect WorkVoices user account with one or more Dropbox accounts. Interface to revoke access to Dropbox accounts. Possibility to upload Dropbox files to WorkVoices web server and attach them to a post. Possibility to upload new files to Dropbox and attach them to a post.

Iteration 3

In this iteration, a multiple attachments API will be built. The API will allow other developers to easily enable multiple attachments to their own projects in WorkVoices. Deliverable: 1.

Multiple attachments API

69


Graduation Report: Improving sharing in WorkVoices

5. Management Plan 5.1

Management Objectives

The following section describes project objectives, assumptions and both managerial and technical constraints.

5.1.1

1. 2.

5.1.2

General objectives

Project risks must be documented and assessed and if necessary, action must be taken according to the risk management plan included in this document. If there are any delays to project deliverables, it must be brought into the notice of the formal clients immediately.

Assumptions

The following assumptions are made to achieve the goals of the project. Resource Assumptions 1. 2.

The project leader has ample knowledge to complete the assignment. If necessary, the company should provide enough assistance and guidance.

Delivery Assumptions 1.

The complete application must be delivered on August 4th, 2011.

Environmental Assumptions 1.

The project organization as described in this project plan (see organization chart in page 71) will be implemented.

Functionality Assumptions 1. 2.

The scope of this project is limited to what is described in this project plan. Formal scope change procedures will be followed.

Maintenance Assumptions 1. 2.

The project leader will not be responsible for the maintenance of the software after it has been handed in and approved by WorkVoices B.V. All source code and documentation will be handed over to WorkVoices B.V. and considered its property.

70


Graduation Report: Improving sharing in WorkVoices

5.1.3

1. 2. 3.

5.2

Management Constraints

The delivery of the final application must occur on August 4th, 2011. th The presentation upon the completion of the project will occur on August 5 , 2011. The project must be deemed finished only when it is approved by the formal client.

Project Controls

Project Controls must be in place to ensure the timely and successful completion of the project. Project progress will be mainly monitored by using the Gantt chart included in this document. Furthermore, the company tutor will check the status of member’s work on weekly basis to make sure that the project is heading in the right direction and find any problems in initial stage and take corrective measures.

5.3 Salary Duration Total

5.4

Money : : :

€500 /month 5 months €2500

Skills

Some skills requirements for this project include: 1. 2. 3. 4.

PHP and MySQL knowledge and experience. Basic knowledge on Zend framework. System analysis – ability to analyze the application, create system requirement etc. Interpersonal communication skills – communication between the team and client.

5.5

Quality

The following aspects can ensure the quality of the project: 1. 2. 3. 4.

Good motivation during the project. Good communication between the project leader and formal client. Developing a good project timeframe. The project leader possesses the knowledge and skills necessary to see the product to completion within the established time frame.

71


Graduation Report: Improving sharing in WorkVoices

5.6

Information

Project plan

Project report

Deliverable

Minutes

Formal Client, Company Tutor

R, A

R, A

R, A

R,A

Project Leader

Di, Dr, S, Ar

Di, Dr, S, Ar

Di, Dr, S, Ar

Di, Dr, S, Ar

University Tutor

R, A

R, A

R, A

Dr Di A S R Ar

Draw up Discuss Approve Send Receive Archive

72


5.7

Time


5.8

Organization

Marc Koetsier

Daan van Tongeren

Formal Client/Company Tutor

Formal Client/Company Tutor

Bert van Gestel University Tutor

Prashant Palikhe Project Leader


Graduation Report by Prashant Palikhe