pdf reviewứng dụng hỗ trợ công việc review trong phát triển phần mềm

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ --- BÁO CÁO THỰC TẬP NGÀNH : CÔNG NGHỆ THÔNG TIN ĐỀ TÀI: PDF REVIEW-ỨNG DỤNG HỖ TRỢ CÔNG VIỆC REVIEW TRONG PHÁT TRIỂN PHẦN MỀM Cán bộ

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ -

BÁO CÁO THỰC TẬP

NGÀNH : CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI: PDF REVIEW-ỨNG DỤNG HỖ TRỢ CÔNG VIỆC REVIEW TRONG PHÁT TRIỂN

PHẦN MỀM

Cán bộ hướng dẫn: Đỗ Việt Trung

Giảng viên đánh giá: Thạc sĩ Vũ Quang Dũng

Hà Nội, tháng 9 năm 2013

Nhóm sinh viên thực hiện :

1 Trương Văn Hưng 10020172 K55C-CLC

2 Chu Văn Minh 10020215 K55C-CLC

3 Đỗ Văn Phong 10020252 K55C-CLC

4 Đỗ Thành Trung 10020382 K55C-CLC

5 Nguyễn Tiến Trung 10020390 K55C-CLC

Mục lục

I GIỚI THIỆU CHUNG 5

1 Giới thiệu môi trường thực tập 5

2 Giới thiệu qua về dự án 5

3 Phân công công việc 6

II MÔ TẢ DỰ ÁN 6

1 Mô tả bài toán 6

a Tình trạng thực tế 6

b Giải pháp 7

2 Môi trường phát triển 7

3 Các chức năng của ứng dụng PDF Review 7

4 Mô tả chi tiết yêu cầu chức năng 9

a Đăng nhập, đăng xuất, quản lý tài khoản người dùng 9

b Hiển thị danh sách các tài liệu 9

c Upload document 9

d Hiển thị chi tiết nội dung file pdf 9

e Thêm, sửa hoặc xóa issue khi đang hiển thị file pdf 10

f Hiển thị danh sách các project, issues 10

g Xuất dữ liệu từ bảng ra file CSV 10

h Thống kê issues và hiển thị dưới dạng biểu đồ 10

i Quản lý, phân quyền truy cập cho các user trong các project 10

III CÔNG NGHỆ VÀ GIẢI PHÁP 10

1 Công nghệ và thuật toán 10

a Giới thiệu về Yii Framework và MVC 10

b CGridView 12

c PHPExcel 12

d EExcelView 13

e OpenFlashChart2Widget 13

f CUploadedFile 13

g PDF.js 13

h Rangy 13

i QPDF.JS 14

2 Giải pháp 14

a Quản lý đăng nhập đăng xuất tài khoản người dùng: 14

b Quản lý tài khoản người dùng 14

c Hiển thị danh sách tài liệu 15

d Upload file 15

e Hiển thị danh sách issue 15

f Xuất dữ liệu ra file CSV 16

g Hiển thị issues dưới dạng biểu đồ 16

h Quản lý, phân quyền truy cập cho user (tác vụ của admin) 16

i Hiển thị nội dung chi tiết của tài liệu 17

j Annotation tool 17

IV MÔ TẢ PHẦN MỀM 19

V KẾT QUẢ ĐẠT ĐƯỢC, HƯỚNG PHÁT TRIỂN 24

1 Kĩ năng, kiến thức học được 24

2 Hướng phát triển 25

VI TÀI LIỆU THAM KHẢO 25

- Hoàn thiện Annotation tool có thể đặt các annotation chồng lên nhau 25

LỜI CẢM ƠN

Trước hết, chúng tôi xin gửi lời cảm ơn tới công ty Toshiba Software Development Vietnam (TSDV) đã hết sức tạo điều kiện cho chúng tôi thực hiện chương trình thực tập này

Chúng tôi cũng gửi lời cảm ơn sâu sắc tới anh Đỗ Việt Trung tận tình chỉ bảo và hướng dẫn chúng tôi trong suốt quá trình thực tập Đồng thời, chúng tôi cũng gửi lời cảm ơn tới ban giám đốc, các anh chị nhân viên của TSDV-những người đã tạo điều kiện tốt nhất và giúp đỡ chúng tôi trong thời gian thực tập ở công

ty

Cuối cùng, chúng tôi muốn gửi lời cảm ơn tới Thạc sĩ Vũ Quang Dũng, đã tận tình hướng dẫn chúng tôi trong đợt thực tập này

I GIỚI THIỆU CHUNG

1 Giới thiệu môi trường thực tập

- Được thành lập vào năm 2007, công ty TNHH phát triển phần mềm Toshiba Việt Nam (TSDV) là công ty phần mềm 100% vốn đầu tư nước ngoài của tập đoàn Toshiba Nhật Bản TSDV chuyên phát triển phần mềm cho cơ sở

hạ tầng xã hội và các thiết bị điện tử Đồng thời TSDV cũng phát triển các công cụ hỗ trợ cho tập đoàn Toshiba TSDV hướng đến trở thành một công

ty hàng đầu trong lĩnh vực phát triển phần mềm tại Việt Nam

- Với một môi trường làm việc chuyên nghiệp, Công ty đã giúp cho sinh viên thực tập chúng tôi nắm được kiến thức thực tế và kinh nghiệm trong các vấn

đề mang tính chuyên nghiệp như:

+ Hiểu và có kinh nghiệm về Hệ thống nhúng

+ Hiểu và có kinh nghiệm về Qui trình phát triển phần mềm

+ Hiểu và có kinh nghiệm về Môi trường làm việc chuyên nghiệp thực sự

- Trong quá trình thực tập tại TSDV, nhóm chúng tôi được tham gia phát triển một dự án nhỏ Chúng tôi được học quy trình phát triển phần mềm của

TSDV, dựa vào những kiến thức đó để áp dụng vào dự án được giao

- Chúng tôi được các anh chị trong công ty hướng dẫn, chỉ bảo một cách nhiệt tình, giúp cho chúng tôi hoàn thành thực tập đúng hạn và có kết quả Anh

Đỗ Việt Trung là người hướng dẫn chính của chúng tôi trong suốt quá trình thực tập này, từ việc phân tích yêu cầu bài toán đến thiết kế, tiếp đó là quá trình viết code và viết test case,…Ngoài ra chúng tôi còn được anh Nguyễn Đức Thịnh chỉ dẫn trong giai đoạn thiết kế sản phẩm Chị Đặng Thị Hồng Yến chỉ dẫn cho chúng tôi về quy trình thực hiện viết các test case Đặc biệt, thực tập ở công ty chúng tôi phải tuân thủ những quy tắc cũng như những quy định của công ty giống như một nhân viên chính thức của công ty với giờ làm việc là 08 giờ/ngày, 40 giờ /tuần

2 Giới thiệu qua về dự án

- Review là một phần quan trọng trong quá trình phát triển phần mềm Ở TSDV, công việc Review vẫn còn làm thủ công, chưa có một công cụ hỗ trợ

nên tốn khá nhiều thời gian và công sức của nhân viên.Vì vậy, nhóm thực tập đã phát triển một ứng dụng web hỗ trợ công việc Review với những chức năng cơ bản giúp cải thiện hiệu quả công việc của nhân viên.

3 Phân công công việc

1 Trương Văn Hưng Làm tài liệu SRS,Design,Coding : Annotation tool

(liên quan tới bắt tọa độ vùng được chọn) và chỉnh sửa PDF.js và tổng hợp các báo cáo

2 Chu Văn Minh Làm tài liệu SRS,Design,Coding : các chức năng

trên Yii framework (như upload file pdf,hiển thị danh sách document,…),database và Testing

3 Đỗ Văn Phong Làm tài liệu SRS,Design,Coding : Annotation tool

(liên quan tới khả năng khôi phục vùng đã được lưu)

và chỉnh sửa PDF.js

4 Đỗ Thành Trung Làm tài liệu SRS,Design,Coding : các chức năng

trên Yii framework (hiển thị danh sách các issue,hiển thị theo dạng đồ thị,export csv file,…),database và Testing

5 Nguyễn Tiến Trung Làm tài liệu SRS,Design,Coding : các chức năng

trên Yii framework (quản lý user và nhúng PDF.js vào Yii) và Testing

- Công việc review còn thực hiện thủ công, mỗi báo cáo được ghi trên file dạng excel dẫn đến sự bất tiện khi tổng hợp.

- Ngoài ra, còn thiếu một công cụ để tổng kết và phân tích lỗi theo nhiều khung nhìn khác nhau (Ví dụ như : Từ phía giám đốc, nhân viên PJL, ….)

- Do những nguyên nhân trên, công việc Review vẫn cần nhiều thời gian và công sức để hoàn thiện một báo cáo

b Giải pháp

- Xây dựng một ứng dụng web cho phép người dùng quản lý việc review của các dự án Trong mỗi dự án, người quản trị có thể quản lý nhân viên nào hiện đang tham gia dự án, người dùng bình thường có thể thêm, chỉnh sửa hoặc xóa những tài liệu trong dự án mà họ đang tham gia Tương ứng với mỗi tài liệu là một file PDF Trong phần hiển thị nội dung file PDF, người dùng có thể thêm, chỉnh sửa hoặc xóa các ghi chú trên file PDF đó Người dùng có thể tổng hợp các vấn đề (issue) thông qua hai khung nhìn là : danh sách hoặc đồ thị Tất cả các thông tin liên quan tới công việc review của từng dự án sẽ được lưu trữ trong cơ sở dữ liệu

2 Môi trường phát triển

- Phía Server : Hệ điều hành Ubuntu Linux có cài đặt Apache2, PHP5 và MySQL

- Phía Client : trình duyệt Firefox 22.0 có cài shockware flash

- Ngôn ngữ lập trình : PHP, javascript, css và HTML

- Phương thức lập trình : OOP

- Hệ quản trị cơ sở dữ liệu: MySQL5

- Framework : Yii framework

- Design pattern : MVC

3 Các chức năng của ứng dụng PDF Review

Hình 1 : Biểu đồ ca sử dụng

LO-01 Đăng nhập Cho phép người dùng đăng nhập vào hệ

DOC-01

Thêm tài liệu Cho phép người dùng upload một tài

liệu mới lên cơ sở dữ liệu Cao DOC-

02 Hiển thị danh sách tài liệu Hiển thị danh sách tài liệu đang có trong project Cao DOC-

04 Hiển thị nội dung tài liệu Hiện thỉ nội dung tài liệu (file pdf) Cao

10 Quản lý project Cho phép admin quản lý những người tham gia dự án Trung bình

Bảng 1 : Các chức năng chính của ứng dụng PDF Review

4 Mô tả chi tiết yêu cầu chức năng

a Đăng nhập, đăng xuất, quản lý tài khoản người dùng

- Cho phép hiển thị, tạo, xóa tài khoản và sửa chữa thông tin người dùng:

- Chỉ có admin mới có đầy đủ quyền hiển thị, tạo mới, chỉnh sửa thông tin tài khoản, xóa tài khoản người dung Đối với các người dùng khác chỉ có thể hiển thị thông tin và chỉnh sửa thông tin tài khoản

- Không cho phép hiển thị password người dùng trừ tài khoản admin

b Hiển thị danh sách các tài liệu

- Lấy dữ liệu từ cơ sở dữ liệu và hiển thị dưới dạng bảng

- Cho phép người dung sắp xếp, tìm kiếm theo từng trường

c Upload document

- Cho phép người dùng đưa tài liệu lên server

- Chỉ có file pdf mới được chọn để tải lên

- Tên đúng định dạng, không có kí tự đặc biệt

d Hiển thị chi tiết nội dung file pdf

- Hiển thị nội dung của file pdf cùng với các issue được bôi màu của file

đó và bảng danh sách rút gọn của các issue ứng với file pdf được hiển thị

- Hiển thị nội dung file pdf thông qua đường dẫn tới thư mục lưu trữ file

e Thêm, sửa hoặc xóa issue khi đang hiển thị file pdf

- Thêm một ghi chú vào file PDF

- Sửa một Issue do chính người dùng đó tạo

- Xóa một issue do chính người dùng đó tạo

f Hiển thị danh sách các project, issues

- Lấy dữ liệu từ database và hiển thị dưới dạng bảng

- Bảng cho phép người dùng sắp xếp, tìm kiếm theo từng trường

g Xuất dữ liệu từ bảng ra file CSV

- Cho phép người duất dữ liệu từ bảng ra file có định dạng CSV

h Thống kê issues và hiển thị dưới dạng biểu đồ

- Hiển thị tỉ lệ các loại issue dưới dạng biểu đồ tròn (pie chart)

- Hiển thị tỉ lệ mức độ của các issue dưới dạng biểu đồ tròn (pie chart)

- Hiển thị số issue theo mức độ cụ thể mỗi user tìm được dưới dạng biểu

đồ tầng (stacked column)

i Quản lý, phân quyền truy cập cho các user trong các project

- Cho phép admin xem danh sách các user nào đang thuộc project và cấp quyền tham gia vào project cho các user

- Không cho phép những user không thuộc project truy cập vào trang của project đó hoặc các tài liệu và issue thuộc project đó

III CÔNG NGHỆ VÀ GIẢI PHÁP

1 Công nghệ và thuật toán

a Giới thiệu về Yii Framework và MVC

i MVC (Model-View-Controller) là một kiến trúc phần mềm hay

mô hình thiết kế được sử dụng trong kỹ thuật phần mềm Nó giúp cho các developer tách ứng dụng của họ ra 3 thành phần khác nhau Model, View và Controller Trong đó Model thể hiện các thông tin (dữ liệu) các quy tắc; View chứa các thành phần thuộc về giao diện người dùng như text, form input; Controller quản lý việc giao tiếp giữa Model và View

ii Yii: là một PHP Framework mã nguồn mở theo mô hình MVC, có

hiệu quả xử lý cao, phát triển tốt nhất trên các ứng dụng Web 2.0,

sử dụng tối đa các thành phần để tăng tốc độ viết ứng dụng

- So sánh với các framework khác Yii tốt hơn các framework khác bởi tính hiệu quả, nhiều tính năng và tài liệu hướng dẫn đầy đủ Yii được thiết kế cẩn thận từ ban đầu để đáp ứng nhu cầu phát triển ứng dụng Web nghiêm ngặt Yii không phải là sự trộn lẫn của các dự án đã qua hay tập hợp các 3rd party library Nó là kết quả của kinh nghiệm phát triển ứng dụng Web lâu năm của các tác giả và sự phân tích kỹ lưỡng, tận dụng những điểm mạnh của các framework khác

- Kế thừa:

 Prado: là tiền thân của Yii Yii làm theo những ý tưởng về component-base, "event-driven programming paradigm", các lớp database abstraction, kiến trúc ứng dụng theo các module, "internationalization and localization",

 Rubi on Rails: kế thừa các quy ước của ROR thông qua cấu hình

 jQuery: jQuery được tích hợp sẵn trong Yii và được sử dụng như một Javascripts framework

 Symfony: Yii tham khảo cách thiết kế các bộ lọc (filter design) của Sym và kiến trúc plug-in của nó

 Joomla: Yii tham khảo thiết kế module (modular design)

và message translation scheme

Hình 1 : Cấu trúc tĩnh của một ứng dụng Yii

b CGridView

- Là một widget của Yii cho phép hiển thị danh sách dữ liệu dưới dạng bảng Mỗi hàng của bảng tương ứng với dữ liệu của một data item và các cột tương ứng với thuộc tính của item đó

o CGridView hỗ trợ cả sắp xếp và phân trang có thể được gọi qua ajax hoặc request bình thường của người dùng thông qua url

o Ưu điểm của CGridView đó là khi người dùng tắt javascript, phân trang sẽ tự động chuyển sang request dưới dạng url Ví dụ muốn sắp xếp cột issue_date và gọi đến trang thứ 2, url request sẽ có dạng (Issues là tên class model):

http://localhost/pdfreview/index.php/issues/list/125?Issues_sort=issue_date&Issues_page=2

d EExcelView

- Một widget được mở rộng từ CGridView và bao gồm thêm PHPExcel Ý tưởng chính là xuất các lưới ghi (grid) đã được xác định trước vào file excel Widget này sẽ tạo ra bảng dữ liệu tương tự như của CGridView và dùng PHPExcel để xuất ra file

e OpenFlashChart2Widget

- Widget này sử dụng thư viện OpenFlashChart2 để đưa các đối tượng đã được khởi tạo vào và hiển thị dưới dạng biểu đồ

- Ngoài hiển thị biểu đồ, OpenFlashChart2 còn hỗ trợ các chức năng:

o Tooltips cho việc hiển thị dữ liệu biểu đồ

o Xử lý giá trị null

o Cho phép người xem điều chỉnh kích thước biểu đồ

o Lưu biểu đồ dưới dạng ảnh

- Để hiển thị biểu đồ sử dụng OpenFlashChart2 yêu cầu trình duyệt đã được cài Shockwave Flash

- Một số tính năng chính của Rangy :

+ Cung cấp các API làm việc với Range và Selection trên hầu hết các trình duyệt (IE 6+, Chrome, Firefox,…)

+ CSSApplierModule cung cấp chức năng chèn style css vào vùng được chọn

+ SelectionSaveRestoreModule cung cấp chức năng lưu vị trí vùng chọn, từ

vị trí đó có thể khôi phục vùng chọn nếu có reload trang

+ Ngoài ra còn có các module khác như HighlighterModule,

SerializerModule là các module nhỏ hỗ trợ hai tính năng chính ở trên

i QPDF.JS

- Extension: hay được sử dụng trong việc phát triển ứng dụng trên Yii

Framework Extension có thể là thừa kế lớp CController khi tạo mới một lớp controller hay tạo một widget mới bằng việc mở rộng từ CWidget hoặc của một widget đã có sẵn Một extension được sử dụng cho một mục đích và được phân loại thành application, behavior, widget, Controller, Action, filter, console command, validator, module

- QPDF.JS là một extension của Yii framework Bản chất của QPDF.JS chính

là PDF.JS Nó được thay đổi để nhúng được PDF.JS vào các view của Yii

- Link:

2 Giải pháp

a Quản lý đăng nhập đăng xuất tài khoản người dùng:

- Sử dụng các lớp mà Yii cung cấp sẵn khi cài đặt: lớp SiteController với các action Login và action Logout, tạo lớp LoginForm với phương thức login()

để xác nhận người dùng

- SiteController thực thi action Login sẽ lấy thông tin người dùng nhập vào từ view login , tạo một đối tượng LoginForm với các thông tin người dùng nhập vào và gọi tới login() để xác nhận các thông tin tài khoản Khi người dùng logout thì action Logout được thực hiện và đưa về trang đăng nhập ban đầu

b Quản lý tài khoản người dùng

- Tạo lớp model User chứa thông tin tài khoản người dùng, UserController để thực thi các action Create, Update, Delete tương ứng với các view Riêng action Create, Delete chỉ được gọi với tài khoản admin Action Update sẽ