Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án

Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án

Trang 1

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

TÌM HIỂU CÔNG NGHỆ MERNSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN LÝ VÀ BÁO CÁO ĐỒ ÁN

GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN MINH ĐẠO

MAI VĨNH THÀNH - 16110460 HUỲNH THỊ TUYẾT NHI - 16110409

Trang 2

LỜI CẢM ƠN

Để hoàn thành Khóa luận tốt nghiệp chuyên ngành Công Nghệ Phần Mềm nói chung và quá trình tìm hiểu công nghệ để xây dựng được website quản lý và báo cáo đồ

án, nhóm chúng em xin gửi lời cảm ơn chân thành đến:

Ban giám hiệu trường Đại Học Sư Phạm Kỹ Thuật TP.HCM đã tạo điều kiện về

cơ sở vật chất tốt, đáp ứng được nhu cầu của sinh viên, giảng viên với phòng học sạch đẹp, máy chiếu, wifi để phục vụ cho việc học tập và tìm kiếm thông tin của sinh viên, giảng dạy của giảng viên

Quý Thầy Cô Khoa Công Nghệ Thông Tin Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM đã tạo điều kiện thuận lợi cho nhóm chúng em thực hiện đề tài khóa luận tốt nghiệp này

Giảng viên hướng dẫn Thầy Nguyễn Minh Đạo, người đã giảng dạy, hướng dẫn và chỉ bảo tận tình, chi tiết, giải đáp thắc mắc kịp thời để chúng em có thể hoàn thành đề tài khóa luận tốt nghiêp này một cách tốt nhất

Xin chân thành cảm ơn các anh, chị khóa trên và bạn bè đã ủng hộ, giúp đỡ và động viên chúng em trong thời gian học tập và nghiên cứu khóa luận tốt nghiệp Do chưa

có nhiều kinh nghiệm nên không thể tránh khỏi những thiếu sót và hạn chế, rất mong nhận được ý kiến đóng góp từ phía thầy, cô để đề tài được hoàn thiện hơn nữa

TP Hồ Chí Minh, ngày … tháng 08 năm 2020

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

MAI VĨNH THÀNH

HUỲNH THỊ TUYẾT NHI

Trang 3

Mục lục

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 13

Trang 5

1.12 THIẾT KẾ CƠ SỞ DỮ LIỆU 44

1.13.6 Giao diện hiển thị lịch sử hoạt động người dùng 52

1.13.13 Màn hình chỉnh sửa tiến trình công việc 59

1.13.16 Mô tả thông tin phân chia công việc 62 1.13.17 Giao diện màn hình chỉnh sửa mô tả, để lại bình luận về công việc, lọc công việc theo tiến trình, tiến độ, và phân chia công việc 63

1.13.19 Giao diện cho phép thêm tiến độ công việc vào dự án, cho phép kéo thả

1.13.20 Giao diện thêm thành viên vào dự án 67 1.13.21 Hiển thị thống kê tiến độ hoàn thành dự án 68 1.13.22 Giao diện chỉnh sửa màn hình báo cáo 69

Trang 6

1.14.5 Cấu trúc thư mục Reactjs 71

Trang 7

■ Ảnh 11: Giao diện tạo dự án mới

việc

Trang 8

DANH MỤC BẢNG BIỂU

Bảng 3.9 Mô tả Use case thêm thành viên vào dự án 24 Bảng 3.10 Mô tả Use case thêm trạng thái công việc 25 Bảng 3.11 Mô tả Use case thêm công việc vào dự án 26 Bảng 3.12 Mô tả Use case thêm tiến trình vào dự án 27 Bảng 3.13 Mô tả Use case kéo công việc vào tiến trình 28 Bảng 3.14 Mô tả Use case kéo công việc vào trạng thái 28 Bảng 3.15 Mô tả Use case sửa thông tin công việc 29

Bảng 3.18 Mô tả Use case bình luận trong công việc 31

Bảng 3.24 Mô tả Use case xoá trạng thái công việc 36 Bảng 3.25 Use case sắp xếp trạng thái công việc 36 Bảng 3.26 Mô tả Use case sắp xếp trạng thái công việc 37

Bảng 4.1 Danh sách đối tượng trong giao diện đăng nhập của người dùng 44 Bảng 4.2 Danh sách đối tượng trong giao diện đăng ký thành viên 45 Bảng 4.3 Danh sách đối tượng trong giao diện quên mật khẩu 46 Bảng 4.4 Danh sách đối tượng trong giao diện trang chủ người dùng 47 Bảng 4.5 Danh sách đối tượng trong giao diện thông tin người dùng 48 Bảng 4.6 Danh sách đối tượng trong giao diện lịch sử hoạt động 49 Bảng 4.7 Danh sách đối tượng trong giao diện danh sách dự án 50 Bảng 4.8 Danh sách đối tượng trong giao diện tạo dự án mới 51 Bảng 4.9 Danh sách đối tượng trong giao diện tìm kiếm dự án 52 Bảng 4.10 Danh sách đối tượng trong giao diện thông tin dự án 53 Bảng 4.11 Danh sách đối tượng trong giao diện tạo mới tiến trình 54

Trang 9

Bảng 4.13 Danh sách các đối tượng trong màn hình chỉnh sửa tiến trình 56 Bảng 4.14 Danh sách các đối tượng trong màn hình chỉnh sửa công việc 57 Bảng 4.15 Danh sách các đối tượng trong màn hình thông tin công việc 58 Bảng 4.16 Danh sách đối tượng trong giao diện mô tả thông tin phân chia công việc 59 Bảng 4.17 Danh sách đối tượng trong giao diện sửa mô tả, để lại bình luận, lọc công việc

Bảng 4.18 Danh sách đối tượng trong giao diện chỉnh sửa dự án 61 Bảng 4.19 Danh sách đối tượng trong giao diện thêm tiến độ công việc 63 Bảng 4.20 Danh sách đối tượng trong giao diện thêm thành viên vào dự án 63 Bảng 4.21 Danh sách đối tượng trong giao diện thống kê tiến độ hoàn thành công việc 64 Bảng 4.22 Danh sách đối tượng trong giao diện chỉnh sửa màn hình báo cáo 65

Bảng 5.2 Kiểm tra hệ thống dành riêng cho manager 73 Bảng 5.3 Kiểm tra hệ thống dành riêng cho teacher 75

Trang 10

PHẦN MỞ ĐẦU

1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Hiện nay, nhu cầu phát triển và quản lý các dự án phần mềm ngày càng tăng cao, đặt biệt là trong môi trường đại học khi mà các sinh viên đang ngày càng nhiều đồ án cuối kỳ của các môn học nhưng lại không thể quản lý được thời gian cũng như công việc để hoàn thành đồ án đúng thời gian quy định và quy trình Nhu cầu cấp thiết hơn nữa đó là báo cáo

đồ án và viết báo cáo cũng là một trong những khó khăn lớn đối với sinh viên Các sinh viên không biết được cấu trúc một bài báo cáo gồm những phần nào, cũng như viết không đúng với yêu cầu giáo viên đưa ra

Với những vấn đề được nêu trên, nhóm chúng em quyết định thiết kế ra phần mềm

có thể giải quyết được các mục tiêu trên một cách khoa học nhất Giúp giảm tải được một khối lượng công việc lớn cho sinh viên, giúp tạo một lượng lớn thời gian để trau chuốt cho

đồ án của mình tốt hơn

1.2 MỤC TIÊU CỦA ĐỀ TÀI

- Tìm hiểu về công nghệ MernStack

- Ứng dụng công nghệ xây dựng dựng website quản lý và báo cáo đồ án

- Viết báo cáo khoa học

1.3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

1.3.1 Đối tượng nghiên cứu

- Công nghệ MernStack

- Các công nghệ và thư viện phía front-end như: lodash, moment, material UI

- Lĩnh vực phát triển website: website quản lý và báo cáo đồ án

1.3.2 Phạm vi nghiên cứu

- Tìm hiểu các công nghệ được sử dụng trong đề tài: MernStack

- Tìm hiểu nghiệp vụ quản lý dự án, SCRUM

Trang 11

- Tìm hiểu các nghiệp vụ liên quan đến phát triển 1 website hoàn chỉnh, có tính khả thi cao

1.4 PHƯƠNG PHÁP NGHIÊN CỨU

Để thực hiện mục tiêu và nhiệm vụ nghiên cứu, nhóm đã sử dụng các phương pháp nghiên cứu sau:

- Phương pháp nghiên cứu tài liệu: đọc ebook, các tài liệu tham khảo, và các bài viết liên quan đến MernStack

- Phương pháp chuyên gia: nhờ sự góp ý, giúp đỡ, tư vấn từ giáo viên hướng dẫn và các thầy cô trong khoa Công nghệ thông tin trường Đại học Sư phạm kỹ thuật TP.HCM

Trang 12

PHẦN NỘI DUNG

1.1 GIỚI THIỆU MERN STACK

1.1.1 Khái niệm [1]

MERN stack là nguyên bộ combo open source các công nghệ đều liên quan đến Javascript là cũng hot nhất hiện nay: MongoDB, ExpressJS, React/React Native, NodeJS Người ta dùng MERN stack để xây dựng React Universal App

Trong đó:

- MongoDB: là một noSQL database hot nhất hiện nay MongoDB thường

đi với Mongoose – một library để giao tiếp với MongoDB dễ dàng hơn

- Node.js: là một Javascript runtime

- Express: là web framework được xây dựng bằng Javascript chạy trên nền Node.js Nó hỗ trợ thêm nhiều tính năng cần có của một web framework như: routing, middlewares, template engines, vv

- React/React Native: là thư viện frontend được viết bằng Javascript, nó là hàng của Facebook đang rất hot hiện nay

1.1.2 Đặc điểm nổi bật của Mern Stack

- Hot Reloading cho các React Components

- Các đoạn mã được phân chia bởi React Router

- Hỗ trợ đa ngôn ngữ

- Hỗ trợ generate code

- Cấu trúc kiểu mô-đun

- Ava Test Runner

- Hỗ trợ Docker

- Có thể tùy biến phiên bản MERN cho riêng bạn

Trang 13

1.2 GIỚI THIỆU REACT [2]

Khái niệm:

React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những

thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên

phía client, mà còn được render trên server và có thể kết nối với nhau React

so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM

Virtual DOM

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có

trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ

xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề

này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật

React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được

truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện

Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó React sẽ rất hữu ích để sử dụng

Giới thiệu về JSX

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm:

Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã

Trang 14

Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một

mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất

dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.github.io/)

Giới thiệu về Components

React được xây dựng xung quanh các component, chứ không dùng template như các

framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một

component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật

component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

Props và State

- Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến

- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

1.3 GIỚI THIỆU NODEJS [3]

1.3.1 Khái niệm về NodeJs

Node.js là một nền tảng dựa vào javascript được xây dụng trên Chrome Javascript runtime để xây dựng các ứng dụng nhanh, có độ lớn Node.js sử dụng các

Trang 15

phần phát sinh các sự kiện (event-driven), mô hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả cho các ứng dụng về dữ liệu thời gian thực chạy trên các thiết bị phân tán

NodeJs là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía Server và các ứng dụng liên quan đến mạng Ứng dụng Node.js được viết bằng Javascript và có thể chạy trong môi trường Node.js trên hệ điều hành Window, Linux

Node.js cung cấp các module Javascript đa dạng từ đó đơn giản hóa sự phát triển của các ứng dụng web sử dụng Node.js với các phần mở rộng

1.3.2 Đặc điểm NodeJs

- Không đồng bộ và hướng sự kiện : Tất cả các API của thư viện Node.js đều không đồng bộ Về cơ bản, điều đó có nghĩa là máy chủ dựa trên Node.js không bao giờ chờ API trả về dữ liệu Máy chủ chuyển sang API tiếp theo sau khi gọi nó

và trong Node.js có sẵn một cơ chế thông báo để giúp máy chủ nhận được phản hồi

từ lệnh gọi API trước đó

- Tốc độ rất nhanh : Được xây dựng trên Công cụ JavaScript V8 của Google Chrome, thư viện Node.js rất nhanh trong việc thực thi mã

- Single Threaded nhưng có khả năng mở rộng cao : Node.js sử dụng một mô hình luồng đơn với vòng lặp sự kiện Cơ chế sự kiện giúp máy chủ phản hồi theo cách không chặn và làm cho máy chủ có khả năng mở rộng cao so với các máy chủ truyền thống tạo ra các luồng hạn chế để xử lý các yêu cầu Node.js sử dụng một chương trình luồng đơn và cùng một chương trình có thể cung cấp dịch vụ cho số lượng yêu cầu lớn hơn nhiều so với các máy chủ truyền thống như Máy chủ HTTP Apache

- Ít tốn bộ nhớ đệm : Các ứng dụng Node.js tiêu tốn bộ nhớ đệm rất ít Các ứng dụng này chỉ đơn giản là xuất dữ liệu trong khối

Khởi tạo web-server với NodeJs:

Trang 16

Node.js cung cấp một modules http có thể được sử dụng để tạo HTTP client-server Sau đây là cấu trúc tối thiểu của máy chủ HTTP lắng nghe tại cổng

Để có một web server ta cần :

● Import modules http có sẵn trong NodeJs

● Qui định hostname và port để truy cập web server

● Tạo một web server http thông qua phương thức createServer của http

● Cho server lắng nghe ở hostname và port đã được qui định Kết quả :

Khi ta truy cập vào địa chỉ 127.0.0.1:3000 , mở console chúng ta sẽ thấy được nội dung trả về :”Server running at http://127.0.0.1:3000

Trang 17

1.3.3 Khái niệm về RESTFUL Api [4]

RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web

(thiết kế Web services) để tiện cho việc quản lý các resource Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP

Ảnh 1: Cấu trúc hoạt động của RESTful web service

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên

sẽ sử dụng những phương thức HTTP riêng

GET (SELECT): Trả về một Resource hoặc một danh sách Resource

POST (CREATE): Tạo mới một Resource

PUT (UPDATE): Cập nhật thông tin cho Resource

DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với

Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa

Hiện tại đa số lập trình viên viết RESTful API giờ đây đều chọn JSON là format

chính thức nhưng cũng có nhiều người chọn XML làm format, nói chung dùng thế nào cũng được miễn tiện và nhanh

Trang 18

1.4 GIỚI THIỆU EXPRESSJS [5]

ExpressJs là gì :

Express là một framework nhỏ và tiện ích để xây dựng các ứng dụng web, cung cấp một lượng lớn của tính năng mạnh mẽ để phát triển các ứng dụng web và mobile Nó rất dễ dàng để phát triển các ứng dụng nhanh dựa trên Node.js cho các ứng dụng Web

Dưới đây là các tính năng cơ bản của Express framework:

● Cho phép thiết lập các lớp trung gian để trả về các HTTP request

● Định nghĩa bảng routing có thể được sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

● Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template

Khởi tao Web Server NodeJs bằng Express Framework:

Cài đặt Express Framework thông qua bộ thư viện npm :

$ npm install express –save

Khởi tạo Web Server :

var express = require('express');

var app = express();

Trang 19

app.get('/', function (req, res) {

res.send('Hello World');

})

var server = app.listen(3000, function () {

var host = server.address().address;

var port = server.address().port;

console.log("Server running at: http://%s:%s", host, port);

1.5 GIỚI THIỆU VỀ MONGODB [6]

Giới thiệu về MongoDB:

● MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql được hàng triệu người sử dụng

● MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh

● Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

● Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

Trang 20

● Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS Kết nối MongoDB trong ứng dụng NodeJs :

Để kết nối với MongoDB chúng ta cần import package mongodb có trong bộ thư viện npm

> npm install mongodb

Sau khi import package chúng ta sẽ kết nói với mongodb thông qua câu lệnh kết nối

var MongoClient = require('mongodb').MongoClient;

// Kết nối database

MongoClient.connect("mongodb://localhost:27017/exampleDb",

function(err, db) {

Trang 21

ưu việt và sự hỗ trợ mạnh mẽ của mình MernStack có thể rút ngắn thời gian phát triển và tối ưu ứng dụng

Trang 22

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

1.7 KHẢO SÁT CÁC WEBSITE LIÊN QUAN:

1.7.1 Trang web jira

- Chưa có chức năng viết báo cáo mà cần qua phần mềm khác hỗ trợ là confluence

1.7.2 Trang web trello

1.8.1 Yêu cầu chức năng

▪ Đăng ký tài khoản

▪ Đăng nhập bằng tài khoản được tạo trên website

▪ Đổi mật khẩu

▪ Lưu trữ :

- Tài khoản người dùng

Trang 23

- Thông tin người dùng

- Thông tin đồ án

- Thông tin công việc

- Thông tin tiến trình

- Thông tin báo cáo

▪ Truy xuất :

- Danh sách đồ án

- Danh sách thành viên trong đồ án

- Danh sách công việc trong đồ án

- Danh sách tiến trình trong đồ án

- Cho phép chỉnh sửa thông tin cá nhân và tài khoản đăng nhập

- Xem công việc của mình

- Quản lý lịch sử hoạt động

▪ Nghiệp vụ :

▪ Lập trình viên:

- Xem danh sách công việc

- Xem thông tin cá nhân

- Chỉnh sửa thông tin cá nhân

- Di chuyển công việc trong backlog

- Di chuyển công việc trong tiến trình

- Bắt đầu tiến trình

- Xóa tiến trình ra khỏi tiến trình công việc

- Chỉnh sửa tiến trình

- Xem chi tiết, ghi chú lại công việc

- Phân chia công việc lại cho thành viên khác

Trang 24

▪ Quản lý :

- Xem thông tin cá nhân

- Chỉnh sửa thông tin cá nhân

- Xem danh sách công việc của thành viên khác trong dự

án

- Phân chia công việc cho từng thành viên

- Thêm thành viên vào dự án

- Chỉnh sửa chi tiết công việc

- Thêm thành viên trong hệ thống vào dự án

- Phân chia quyền của thành viên trong dự án

▪ Giáo viên:

- Xem bảng báo cáo

1.8.2 Yêu cầu phi chức năng

▪ Có khả năng lưu trữ lớn, có thể lưu được thông tin, hình

ảnh,…

▪ Đáp ứng lượt truy cập lớn

▪ Khả năng tìm kiếm , truy xuất dữ liệu lớn và nhanh

▪ Giao diện đẹp mắt , dễ sử dụng và phù hợp với mọi người dùng

▪ Thao tác nghiệp vụ dễ sử dụng trơn tru , chính xác

Trang 25

CHƯƠNG 2: MÔ HÌNH HÓA YÊU CẦU

1.9 LƯỢC ĐỒ DIAGRAM

Ảnh 2: Lược đồ diagram 1.10 MÔ TẢ YÊU CẦU

1.10.1 Đăng ký

Bảng 3.1 Mô tả Use Case Đăng ký

Use Case đăng ký UsecaseID USC_SIGN_UP

Tóm tắt mô tả Cho phép người dùng đăng ký tài khoản

Tiền điều kiện Chưa có tài khoản

Hậu điều kiện Tạo 1 tài khoản trên hệ thống

Trang 26

Luồng

1 Vào trang sign up của hệ thống

1.1 Hiện trang sign up

2 Nhập thông tin gmail, mật khẩu

2.1 Kiểm tra các input có

trống

3 Nhấn nút đăng ký 3.1 Tạo tài khoản

3.2 Chuyển hướng về trang

chủ

Điều kiện ngoại lệ

2.1 Kiểm tra các input có trống 2.1.1 Nếu email trống hiện thông

báo chưa có email 2.1.2 Nếu mật khẩu và mật khẩu xác thực khác nhau hiện thông báo mật khẩu không trùng khớp

3.1 Tạo tài khoản 3.1.1 Kiểm tra email đã tồn tại,

nếu đã tồn tại thông báo email đã tồn tại

Trang 27

1.10.2 Đăng nhập

Bảng 3.2 Mô tả Use Case đăng nhập

Use Case đăng nhập

Tóm tắt mô tả Cho phép người dùng đăng nhập tài khoản

Tiền điều kiện Đã có tài khoản

Hậu điều kiện Vào hệ thống

Luồng

1 Vào trang login của hệ thống

1.1 Hiện trang login

2 Nhập thông tin gmail, mật khẩu

2.1 Kiểm tra các input có

trống

3 Nhấn nút đăng nhập 3.1 Kiểm tra tài khoản

3.2 Chuyển hướng về trang

chủ

báo chưa có email

Trang 28

3.1 Kiểm tra tài khoản 3.1.1 Kiểm tra email và mật khẩu

trên hệ thống có trùng khớp, nếu không thông báo đăng nhập lỗi

1.10.3 Quên mật khẩu

Bảng 3.3 Mô tả Use Case quên mật khẩu

Use Case quên mật khẩu

Tóm tắt mô tả Cho phép người dùng đổi lại mật khẩu khi quên

Tiền điều kiện Đã có tài khoản

Hậu điều kiện Vào được trang đổi mật khẩu mới

Luồng

1 Vào trang forgot pass của

hệ thống

1.1 Hiện trang forgot pass

2 Nhập thông tin gmail 2.1 Kiểm tra các input có

trống

3 Nhấn nút gửi email 3.1 Kiểm tra tài khoản

3.2 Gửi về email đường dẫn

đến trang đổi mật khẩu

Trang 29

báo chưa có email 3.1 Kiểm tra tài khoản 3.1.1 Kiểm tra email có trên hệ

thống, nếu chưa thông báo email chưa có trên hệ thống

1.10.4 Đổi mật khẩu

Bảng 3.4 Mô tả Use Case đổi mật khẩu

Use Case đổi mật khẩu

1.1 Hiện trang change pass

2 Nhập mật khẩu mới 2.1 Kiểm tra các input có

trống

Trang 30

3 Nhấn nút gửi 3.1 Lưu mật khẩu mới

2.1 Kiểm tra các input có trống 2.1.1 Nếu mật khẩu và mật khẩu

xác thực khác nhau hiện thông báo mật khẩu không trùng khớp

1.10.5 Đăng nhập bằng gmail

Bảng 3.5 Mô tả Use Case đăng nhập bằng gmail

Use Case đăng nhập bằng gmail

Tóm tắt mô tả Cho phép người dùng đăng ký tài khoản

Tiền điều kiện Chưa có tài khoản

Hậu điều kiện Tạo 1 tài khoản trên hệ thống

2.1 Vào trang chủ

Trang 31

2.1 Tạo tài khoản mới 2.1.1 Kiểm tra email có trên hệ

thống, nếu chưa có thì tạo tài khoản mới

1.10.6 Tạo dự án mới

Bảng 3.6 Mô tả Use Case tạo dự án mới

Use Case tạo dự án mới UsecaseID USC_CREATE_PROJECT

Tóm tắt mô tả Cho phép người dùng tạo 1 dự án mới

Tác nhân Người dùng

Tiền điều kiện Đã đăng nhập vào hệ thống

Hậu điều kiện Tạo 1 dự án mới trên hệ thống

Trang 32

3 Bấm nút tạo dự án 3.1 Tạo dự án mới

2.1 Kiểm tra các input có trống 2.1.1 Thông báo chưa có tên dự án

nếu input trống

1.10.7 Sửa thông tin cá nhân

Bảng 3.7 Mô tả Use Case sửa thông tin cá nhân

Use Case sửa thông tin cá nhân UsecaseID USC_EDIT_PROFILE

Tóm tắt mô tả Cho phép người dùng thay đổi thông tin cá nhân Tác nhân Người dùng

Tiền điều kiện Đã đăng nhập vào hệ thống

Hậu điều kiện Chỉnh sửa thành công thông tin cá nhân

Trang 33

1.10.8 Sửa thông tin dự án

Bảng 3.8 Mô tả Use case sửa thông tin dự án

Use case sửa thông tin dự án UsecaseID USC_EDIT_PROJECT

Tóm tắt mô tả Cho phép người dùng chỉnh sửa thông tin dự án Tác nhân Người dùng

Tiền điều kiện Đã đăng nhập vào hệ thống, đã có dự án

Hậu điều kiện Thông tin mới được cập nhật

Trang 34

2.1 Kiểm tra các input có trống 2.1.1 Thông báo chưa có tên dự án

nếu input name trống

1.10.9 Thêm thành viên vào dự án

Bảng 3.9 Mô tả Use case thêm thành viên vào dự án

Use case thêm thành viên vào dự án

Tóm tắt mô tả Cho phép người dùng thêm thành viên vào dự án Tác nhân Người dùng

Hậu điều kiện Thêm thành công thành viên vào dự án

Trang 35

Mô tả Hệ thống

2.1 Tìm kiếm người dùng theo

email, hiện ra danh sách theo từ

khóa

2.1.1 Thông báo email không tồn tại nếu không có email trong danh sách người dùng

1.10.10 Thêm trạng thái công việc

Bảng 3.10 Mô tả Use case thêm trạng thái công việc

Use case thêm trạng thái công việc

Tóm tắt mô tả Cho phép người dùng thêm trạng thái công viêc thực

hiện Tác nhân Người dùng

Hậu điều kiện Thêm thành công trạng thái công việc

Trang 36

1.10.11 Thêm công việc vào dự án

Bảng 3.11 Mô tả Use case thêm công việc vào dự án

Use case thêm công việc vào dự án UsecaseID USC_CREATE_ISSUE

Tóm tắt mô tả Cho phép người dùng thêm công viêc vào dự án Tác nhân Người dùng

Hậu điều kiện Thêm thành công công việc

Luồng

1 Vào trang thêm backlog 1.1 Hiện trang backlog

2 Bấm nút thêm công việc 2.1 Hiện cửa sổ thêm công

việc

3 Nhập tên công việc, thông tin khác

3.1 Kiểm tra các input trống

4 Bấm nút lưu 4.1 Lưu thông tin công việc

vào dự án

Trang 37

3.1 Kiểm tra các input trống 3.1.1 Thông báo cần nhập tên

công việc nếu input name trống

1.10.11 Thêm tiến trình vào dự án

Bảng 3.12 Mô tả Use case thêm tiến trình vào dự án

Use case thêm tiến trình vào dự án UsecaseID USC_CREATE_SPRINT

Tóm tắt mô tả Cho phép người dùng thêm tiến trình vào dự án Tác nhân Người dùng

Hậu điều kiện Thêm thành công tiến trình

Luồng

1 Vào trang thêm backlog 1.1 Hiện trang backlog

2 Bấm nút thêm tiến trình 2.1 Hiện cửa sổ thêm tiến

trình

3 Nhập tên tiến trình, thông tin khác

3.1 Kiểm tra các input trống

4 Bấm nút lưu 4.1 Lưu thông tin tiến trình

vào dự án

Trang 38

3.1 Kiểm tra các input trống 3.1.1 Thông báo cần nhập tên tiến

trình nếu input name trống

1.10.12.Kéo công việc vào tiến trình

Bảng 3.13 Mô tả Use case kéo công việc vào tiến trình

Use case kéo công việc vào tiến trình UsecaseID USC_D&D_ISSUE_IN_SPRINT

Tóm tắt mô tả Cho phép người dùng thao tác kéo và thả công việc

vào tiến trình Tác nhân Người dùng

Hậu điều kiện Thêm thành công công việc vào tiến trình

Luồng

1 Vào trang backlog 1.1 Hiện trang backlog

2 Nhấn vào công việc và kéo

2.1 Công việc được kéo nổi

Trang 39

1.10.13 Kéo công việc vào trạng thái

Bảng 3.14 Mô tả Use case kéo công việc vào trạng thái

Use case kéo công việc vào trạng thái UsecaseID USC_D&D_ISSUE_IN_PROCESS

Tóm tắt mô tả Cho phép người dùng thao tác kéo và thả công việc

vào trạng thái Tác nhân Người dùng

Hậu điều kiện Sửa thành công trạng thái công việc

Luồng

1 Vào trang active sprint 1.1 Hiện trang active sprint

Trang 40

1.10.14 Sửa thông tin công việc

Bảng 3.15 Mô tả Use case sửa thông tin công việc

Use case sửa thông tin công việc UsecaseID USC_EDIT_ISSUE

Tóm tắt mô tả Cho phép người dùng thay đổi thông tin công việc Tác nhân Người dùng

Hậu điều kiện Sửa thành công thông tin công việc

Luồng

1 Vào trang Issue Filter 1.1 Hiện trang Issue Filter

1.10.15 Sửa thông tin tiến trình

Bảng 3.16 Use case sửa thông tin tiến trình

Use case sửa thông tin tiến trình UsecaseID USC_EDIT_SPRINT

Định dạng
Số trang	86
Dung lượng	2,01 MB