Nexcel
Architectural Design Document
Author
Askerali Maruthullathil
Project Supervisor
Iliano Cervasato
January 18, 2015
Doha
Abstract
This document contains descriptions of the architecture of the Nexcel application. This ap-plication is developed for the QNRF funded project at Carnegie Mellon University Qatar under the supervision of Prof. Iliano Cervasato.
Document Status Sheet
General
Document title Architectural Design Document
Identification Documentatie.ADD.1.0.0
Authors Askerali Maruthullathil, Lamana Mulaffer
Document status Approved by Iliano Cervasato
Document history
-
Version
|
Date
|
Author
|
Reason of change
|
0.0.0
|
3-7-2014
|
Askerali Maruthullathil
|
Initial version
|
1.0.0
|
12-9-2014
|
Askerali Maruthullathil, Lamana Mulaffer
|
First version
|
1.3.0
|
18-1-2015
|
not applicable
|
Beta version
|
|
|
|
|
Document Change Records
General
Date 24-10-2012
Document title Architectural Design Document
Identification Documentatie.ADD.1.0.0
Document history since 0.0.0
Chapter 1
Introduction
1.1 Purpose
The Architectural Design Document (ADD) describes the basic design of the software that will be made by Nexcel. It describes the decomposition of the software into components. Then for each component it describes the relation to external interfaces and the dependen-cies on other components.
1.2 Scope
Nowadays, data are more easily accessible than ever, yet support for correlating base data into interesting consequences is often unavailable, or too expensive, or too technical for many users. We have designed NEXCEL, a possible solution to this problem which revolves around extending the spreadsheet paradigm to enable users to define useful forms of correlation among their data. Spreadsheets are widely available to users, already allow them to routinely define complex custom calculations on numerical data, and are easy to use productively with little or no training. However they are unable to deal with the kind of recursive relational calculations needed for many common types of data correlation problems. NEXCEL's design exploits techniques from logic programming and database theory to solve these issues.
This project has the objective of developing a matching user interface for these functionalities. A specific challenge is to retain the cognitive simplicity, ease to use and gentle learning curve of today's spreadsheet applications. The project will develop an advanced prototype of NEXCEL and perform extensive usability studies to understand how to best present the extended functionalities to interested users.
1.3 List of definitions and abbreviations
1.3.1 Definitions
AJAX Asynchronous JavaScript and XML: a group of interrelated web development tech-niques used on the client-side to create asynchronous web applications.
Bootstrap A free collection of tools for creating websites and web applications. It con-tains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.
Chrome An internet browser developed by Google.
Cookie Usually a small piece of data sent from a website and stored in a user’s web browser while a user is browsing a website. The data stored in the cookie can be retrieved by the website when the user browses the same website in the future.
Nexcel – ARCHITECTURAL DESIGN DOCUMENT
Excel A commercial spreadsheet application developed by Microsoft.
Firefox An internet browser developed by Mozilla.
Internet Explorer An internet browser developed by Microsoft.
JavaScript Scripting language, especially for developing interactive web applications.
jQuery A fast and concise JavaScript Library.
JSON A lightweight data-interchange format.
Opera An internet browser developed by Opera Software.
PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. Originally created by Rasmus Lerdorf in 1994, the PHP reference implementation is now produced by The PHP Group.
Safari An internet browser developed by Apple.
MySQL A powerful, open source object-relational database system.
1.3.2 Abbreviations
ADD
|
Architectural Design Document
|
CSS
|
Cascading Style Sheets
|
CSV
|
Comma-Separated Values
|
DDD
|
Detailed Design Document
|
ESA
|
European Space Agency
|
GUI
|
Graphical User Interface
|
HTML
|
HyperText Markup Language
|
HTTPS
|
HyperText Transfer Protocol Secure
|
JSON
|
JavaScript Object Notation
|
LDAP
|
Lightweight Directory Access Protocol
|
MTV
|
Model-Template-View framework
|
RDBMS
|
Relational Database Management System
|
|
SCR
|
Identification for Software Requirements
|
|
SQL
|
Structured Query Language
|
|
SRD
|
Software Requirements Document
|
|
UCR
|
Identification for User Requirements
|
|
URD
|
User Requirements Document
|
|
URI
|
Uniform Resource Identifier
|
|
USE
|
User, Society and Enterprise
|
|
1.4 Overview
The remainder of this document gives a system overview in chapter 2. Chapter 3 covers the system context. We explain the relationship with each external system. Chapter 4 treats the system design. We give a name and reference of the method used. Furthermore, we give an overview of components. We will pay special attention to decomposition, dependencies and interfaces.
In chapter 5 we discuss the components. For each component, we give the component identifier, type, purpose, function, subordinates, dependencies, interfaces, resources, refer-ences, processing and data. Chapter 6 covers feasibility and resource estimates. Lastly, we give a requirements traceability matrix in chapter 7.
Chapter 2
System overview
Nowadays, data are more easily accessible than ever, yet support for correlating base data into interesting consequences is often unavailable, or too expensive, or too technical for many users. We have designed NEXCEL, a possible solution to this problem which revolves around extending the spreadsheet paradigm to enable users to define useful forms of correlation among their data. Spreadsheets are widely available to users, already allow them to routinely define complex custom calculations on numerical data, and are easy to use productively with little or no training. However they are unable to deal with the kind of recursive relational calculations needed for many common types of data correlation problems. NEXCEL's design exploits techniques from logic programming and database theory to solve these issues.
Nexcel is a web-based spread sheet for these functionalities. A specific challenge is to retain the cognitive simplicity, ease to use and gentle learning curve of today's spreadsheet applications. The project will develop an advanced prototype of NEXCEL and perform extensive usability studies to understand how to best present the extended functionalities to interested users.
Figure 2.1: The environment of Nexcel
Chapter 3
System context
This chapter describes the connections that Nexcel has with database and the authentication systems.
3.1 Interface definition for Nexcel
The Nexcel is a kind of webbased excel sheet which have little more functionalities like prolog implementation in which the users can apply prolog function to do the evaluation of more complex queries on data which is there in the excel sheet. It also have the functionality to provide the webservice so that the same application can be ported to the mobile apps or other applications.
However, Nexcel also has its own database. This database stores all relevant workbook information for the Nexcel application. PHP code is only used by nexcel to update its own database with the latest changes of sheet data and load required information on the page load.
3.1.1 Implementation of the interface
This interface is currently implemented html bootstrap design, It gives an option to use the application in mobile devices and the desktop applications.
Chapter 4
System design
This chapter describes the technical aspects of the design of Nexcel.
4.1 Design method
Nexcel is implemented as a web application based on the jQuery framework. The frame-work supplies many useful components for the development of web applications. The structure and terminology of the framework determine the structure and terminology used in the description of Nexcel.
Section 4.2 defines the components of Nexcel and their dependencies. Section 4.3 offers a short introduction to the jQuery framework. Please refer to the jQuery website for more information on jQuery.
4.2 Decomposition description
The decomposition of Nexcel into components is based on the requirements of the Application.
Section 4.2.1 lists the components, which are further described in chapter 5. Figure 4.1 illustrates the dependencies between the components.
4.2.1 List of components
The following components are identified:
Server side
Database
Nexcel
Query
Workbook
Sheet
Group Expressions/Formulas
User
Cell data and Formulas
Update
GUI
UI Layout
Event Handlers
Mouse Listener
Key Listener
JavaScript modules structure
External libraries
Nexcel
Controller
Helper
Formula
Listener
Model
Parser
Rules
Service
UI
Server PHP Scripts
Controllers
Database
include
4.3 Introduction to the JQuery framework
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
4.3.1 Version of JQuery
JQuery is an open-source project that is under continuous development. Proper functioning of Nexcel is only guaranteed when installed on a server running an appropriate version of JQuery. nexcel is developed using version 1.8 of the JQuery framework.
4.3.2 Models, templates and views
Models
Models describe the logical grouping of data and functionality, like classes in the object-oriented paradigm. In Nexcel the data transferred between the server and clients are with JSON objects. It is easy to parse in the server and the client side.
JSON models are compatible with the any language, it is an international specification for data transfers. Therefore, the Nexcel models include all required fields as described in the class diagram.
Webpage modules
In nexcel we have separated each module ion ui side, so that the application loading can be faster, Nexcel is applying the load on requirement basis. The jquery framework require.js define the looks of the user interface of a Nexcel application. Templates consist of HTML code with special tags, which are replaced with information from specific sheet instances.
The Nexcel UI engine is an essential component of the Nexcel application system, renders a page, it processes the JSON data file and replaces all tags with the appropriate information.
4.3.3 Persistent storage
To enable persistent storage of data, Nexcel ships data in a JSON format from front end and the backend/Server side code will do the database connection and will update accordingly. In phase one it will be simple SQL to manage the data, on the phase II, it will be migrated to a scalable application model. An off-the-shelf Relational Database Management System (RDBMS) is used for the actual storage.
RDBMS
Nexcel uses MySQL as RDBMS, but many other popular RDBMS systems are sup-ported by PHP SQL and may be used instead.
4.3.4 Request processing
The way a user interacts with a web application can be described as a sequence of requests from the user to the application, each followed by response of the application.
HTTP requests and responses
A web application transfers requests and responses between client and server using the HTTP protocol. An HTTP request typically consists of a Uniform Resource Identifier (URI) and optional GET and POST data. An HTTP response consists of a status code and a message body.
JQuery HttpRequest and HttpResponse objects
By means of HttpRequest and HttpResponse objects, Jquery requests handles same as the normal HTTP request is handled.
4.4.1 List of implemented modules
As the Nexcel Application is a Rich Interface, It have one page, the remaining will be loaded on requirement.
Evaluation
Explanation
Dependency Calculation;
Formula Parser
Rule Engine
Negative Explanation
4.5 Internals of the Nexcel webserver
Figure 4.3 illustrates the internal server structure of Nexcel. The RDBMS runs on the same server as Nexcel. Running the RDBMS on an external server introduces additional connection overhead and there may be a bandwidth bottleneck in the network connecting the RDBMS with the webserver. Running the RDBMS on the same server as Nexcel reduces the costs of operation of the system and it will not harm performance because the expected server load is low.
Kroket – ARCHITECTURAL DESIGN DOCUMENT
PHP Server Code
Database
Web Browser
Figure 4.3: The internal server structure of Nexcel.
4.6 Code structure
Nexcel prescribes a typical code structure that is preserved in application, It is very similar to any simple web application codes.
Chapter 5
Component descriptions
In this chapter we will describe every component of chapter 4 in detail. We will, however, start by giving a description model.
5.1 Description model
In this section we specify how components are described. For each component we describe the component identifier, type, purpose, function, subordinates, dependencies, interfaces, processing and data.
5.1.1 Component identifier
In the component identifier, we give a unique identifier to the component.
5.1.2 Type
The type of a component can be either server or client. The server has two subtypes: data persistence and retrieval. The client also has two subtypes: GUI and script.
5.1.3 Purpose
In the purpose of a component, we give a list of software requirements implemented. Some software requirements are not implemented by one component, but by several components together. In this case, it is included in the purpose of each component that contributes to its implementation.
5.1.4 Function
In the function of a component, we describe what the component does.
5.1.5 Subordinates
The subordinates of a component are child modules (modules called, files composed of, classes used).
CHAPTER 5. COMPONENT DESCRIPTIONS
5.1.6 Dependencies
The dependencies of a component consist of components to be executed before or after, and excluded operations during execution.
5.1.7 Interfaces
In the interface of a component, we describe the data and control flow in and out.
5.1.8 Processing
In the processing of a component, we describe the internal control and data flow. Since Nexcel is based on a client-server architecture, this will often dictate a natural ordering on the internal control and data flow.
5.1.9 Data
In the data of a component, we describe the internal data.
5.1.10 Javascript module dependencies
In this module it will show how the dependencies associated with different modules in the javascript side
5.2 Server Side
5.2.1 User Service
Type: Server Side Service
Purpose
This module is mainly meant to handle with all the user associated modules like
-
Create User
-
Add User folder
-
Update folder name
-
Change Password
5.2.2 Workbook Service
Type: Server Side Service
Purpose
This module mainly meant to handle all the data handling associated with the workbook.
-
Add workbook
-
Duplicate Workbook
-
Rename Workbook
-
Load Workbook
-
Load Workbook/Sheets
-
Rename Sheet on Workbook
-
Delete Sheet
-
Add Sheet
-
Update Sheet Order
-
Load Sheet Cells
-
Update Row Size
-
Update Column Size
-
Add Row
-
Add Column
-
Add Cell
-
Update Cells
5.2.2 Workbook UI Service
Type: Server Side Service
Purpose
This module mainly meant to handle all the data handling associated with the groups and data.
-
Create Group
-
Rename Group
-
Pin group
-
Delete Group
-
Sort Group
-
Update Group Formula
-
Update Group Size
-
Update Group Sorting
5.2 Functional requirements
5.2.1 Login
ID: FR 1: This user will be allowed to login to the application with provided username and password.
On first time the user opens the url, he/she will be gives a scree similar above to provide his credentials and get into the application. And there should be an option to create an account if forgot he can request for password recovery option.
ID: FR 2: Retrieve Password
DESC: Given that a user has registered, then the user should be able to retrieve his/her password by email.
ID: FR 3: Demo Login
DESC: All the user will have the option to login as demo user and can view some specific sheets, so that he can have a view of the application.
ID: FR 4: Quick Page loading.
DESC: The nexcel Application is going to rich interface application associated with toomany dependency file need to be downloaded, There should not have too much delay in the initial loading of the application.
Initially it can give a glimpse of the view and the background it can load required files and data using some background processes.
ID: FR 4: Default WorkBook.
DESC: By Default the user will not be opened with any of the workbook, If the user doesn’t provided the workbook id, It should open a popup showing all his workbook in the Nexcel Cloud. Something thing like the windows file browser.
Requires: WorkBookService.loadWorkBook
ID: FR 5: Add WorkBook.
DESC: The user will be provided an option to add a new workbook, by giving a Modal window which prompts for the workbook name.
Process:
-
User Enter the New WorkBook name
-
If clicks OK, it sends Ajax request to server to Service WorkBook.addWorkBook and comes back with new WorkBook Id.
-
Reload the page with the new workbook it.
-
If the user clicks Cancel/Close, the window will be closed.
Requires: FR3, WorkBookService.addWorkBook
ID: FR 6: Duplicate WorkBook.
DESC: The user will be provided an option to duplicate a workbook, by giving a Modal window which prompts to confirm the duplicate or not.
Requires: WorkBookService.duplicateWorkBook
ID: FR 7:Add Sheet
DESC: The user will be provided an option to add a new sheet in the workbook, a Button to add a sheet + will be provided in the bottom, On clicking this a new Sheet will be added to the workbook,
Process:
-
On user clicking the + button a new sheet will be added.
-
It calls the server service WorkBook.addSheet and comes back with new SheetId.
-
The screen will activate with new Sheet with 100 rows & 26 columns default
-
The default name will be Sheet + the number total sheets found.
Requires: FR1, WorkBookService.addSheet
ID: FR 8: Delete Sheet
DESC: The user will be provided an option to delete a sheet in the workbook, a Context menu will be provided on part of the screen
Process:
-
On user clicking the delete menu in the Sheet TAB, It will prompt “Do you want to delete or not”.
-
It calls the server service WorkBook.deleteSheet
-
The screen will activate with next available sheet
-
If there is any group dependency is available a Warning will be shown that, you cannot delete this sheet, first you should delete all the dependencies.
Requires: FR1, WorkBookService.deleteSheet
ID: FR 9: Rename Sheet
DESC: The user will be provided an option to rename a sheet in the workbook, a Context menu will be provided on part of the screen
Process:
-
On user clicking the rename menu in the Sheet TAB, It will prompt a Modal with old name populated, asking for new Name.
-
It calls the server service WorkBook.renameSheet
-
It will check whether the same is already existing or not, If yes, a warning message will be shown.
Requires: FR1, WorkBookService. renameSheet
ID: FR 10: Select single cell
DESC: The user is allowed to select any Cell in the workbook sheet. On Cell Selected, it should be highlighted as in the image.
Process:
-
On user clicking any cell the cell border will be colored to highlight.
-
Must maintain the current selection of the cell.
-
On cell selected the Row and column bar should be highlighted
-
The header should change to the current cell name.
ID: FR 11: Select cell area
DESC: The user is allowed to select any Cell in the workbook sheet. On Cell Selected, it should be highlighted as in the image.
Process:
-
On user clicking any cell the cell border will be colored to highlight.
-
Must maintain the current selection of the cell area.
ID: FR 12: Context menu
DESC: The user is provided with context menu to process required action.
As follows.
Row Number
-
Insert Row Above
-
Insert Row Below
-
Delete Row
-
Clear Row
Column Number
-
Insert Column Above
-
Insert Column Below
-
Delete Column
-
Clear Column
Data Grid - Cell
-
Cut
-
Copy
Data Grid – Cell Area
-
Cut
-
Copy
-
Create Group
Data Grid – Group without Formula
-
Copy
-
Copy Group values
-
Edit Group
-
Delete Group
-
Insert Group Formula
Data Grid – Group with Formula
-
Copy
-
Copy Group values
-
Edit Group
-
Explain
-
Delete Group
-
Remove Group Formula
-
View Evaluation Graph
ID: FR 13: Mouse Left Click
DESC : The screen should have mouse listener, depending on the area the user selected the object should be highlighted.
Click on Cell
-
The cell should be activated – FR:10
-
If cell has formula the formula bar should be updated.
-
The cell name should be updated in near the formula bar.
Requires: FR1, FR11, FR12
ID: FR 13: Mouse Right Click
DESC : The screen should have mouse listener, depending on the area the user selected the object should be highlighted.
Click on Cell
-
The context menu should be poped up.– FR:10
-
If cell has formula the formula bar should be updated.
-
The cell name should be updated in near the formula bar.
Requires: FR1, FR10,FR11
Click on Cell Area
-
The context menu should be poped up.– FR:11
-
If cell has formula the formula bar should be updated.
-
The context menu should have an option to create a Group.
ID: FR 14: Create Group
On Mouse left Click
Requires: FR13
Cancel
OK
Column 4tion
Column 3tion
Column 2tion
Column 1tion
With Selection
With Rangetion
Group Name
Process
-
The user must provide the Group name, It should be distinct
-
The group name should not be existing.
-
If select column name, the name of the column should be provided.
ID: FR 13: Insert group formula – Formula Editor
DESC : On user Mouse right click the user will be prompted to an editor where the user can insert formula.
The formula will be parsed and evaluated.
Process:
-
On the editor user will have option auto suggested to enter the formula – Will do later
-
The formula must follow similar to the prolog implementation
-
Auto suggestion should be implemented
ID: FR 13: Explanation
DESC : On user Mouse right click the user will be prompted to an editor where the user can explain the how the value is got evaluated
Chapter 6
Feasibility and resource estimates
This chapter gives an estimation of the computer resources which are needed to develop and operate Nexcel.
The requirements for the development of Nexcel are:
CPU
|
> 2.0 GHz x66 or equivalent
|
Memory
|
> 4 GB RAM
|
Hard disk
|
> 1 GB free on hard disk
|
Operating system
|
Linux/Windows
|
Software
|
Php 5.4 or higher, JQuery1.8, Firefox version 13 and above,
|
|
Chrome version 20 and above, Internet Explorer version 9
|
|
and above, Safari version 5 and above, Opera version 12
|
|
and above and MySQL 5.5
|
The requirements for operating Nexcel are:
|
Server side:
|
|
> 1.0 GHz x86 or equivalent
|
CPU
|
|
Memory
|
|
> 2 GB RAM
|
Hard disk
|
|
> 4 GB free on hard disk
|
Operating system
|
Linux/Windows
|
Software
|
|
PHP 5.5 or above, MySQL 5.5
|
|
|
|
Client side:
|
|
> 1.0 GHz x86 or equivalent
|
CPU
|
|
Memory
|
|
> 512 MB RAM
|
Operating system
|
Any supporting the software
|
Software
|
|
Firefox version 13 and above, Chrome version 20 and above,
|
|
|
Internet Explorer version 9 and above, Safari version 5
|
|
|
and above or Opera version 12 and above
|
Chapter 7
Requirements traceability matrices
Tracing software requirements to components is vital in the software production process. It allows developers to relate specific parts of the software to the user requirements. In this way, each developer should know what a component’s purpose is.
Share with your friends: |