Tìm hiểu mean stack và xây dựng ứng dụng minh họa

Xem thông tin tài khoản Tên Use Case Xem thông tin tài khoản Mô tả Xem thông tin cá nhân của tài khoản đang đăng nhập Người thực hiện Admin, User Điều kiện trước khi xử lí Đăng nhập

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

BÁO CÁO CUỐI KÌ

ĐỒ ÁN 2

Đề tài: Tìm hiểu Mean Stack và xây dựng ứng dụng minh họa

Giảng viên hướng dẫn: Thái Thụy Hàn Uyển

Sinh viên: Phạm Ngọc Quyên - 19522115

Vũ Ngọc Mỹ Phương – 19522071

Thành phố Hồ Chí Minh, 06/2022

2

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại học Công

nghệ Thông tin –ĐHQG TP.HCM, chúng em đã được trang bị các kiến thức cơ bản cùng các

kỹ năng thực tế để có thể hoàn thành Đồ án 2 của mình Để hoàn thành khóa luận này, với lòng biết ơn sâu sắc em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM và các thầy cô trong khoa Công nghệ phần mềm vì đã tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thông tin và giúp đỡ khi chúng em cần hỗ trọ

Và cuối cùng chúng em xin bày tỏ lòng biết ơn sâu sắc đến cô Thái Thụy Hàn Uyển – giảng viên hướng dẫn chúng em thực hiện Đồ án 2, cô đã cùng đồng hành và tận tình hướng dẫn cho chúng em qua từng giai đoạn của đồ án Nhờ có sự giúp đỡ nhiệt tình của cô mà chúng em

có thể hoàn thành được được đồ án này một cách tốt nhất Vì kiến thức của chúng em vẫn còn hạn hẹp nên không thể tránh khỏi những thiếu sót trong quá trình thực hiện đồ án Tuy nhiên, chúng em đã cố gắng hoàn thành đúng hạn và hạn chế các lỗi nhiều nhất có thể Nhóm chúng em luôn mong đợi nhận được những ý kiến đóng góp quý báu từ cô và qua đó có thể rút kinh

nghiệm, tự sửa chữa, hoàn thiện bản thân mình trên tinh thần nghiêm túc, tự giác học hỏi Trong quá trình làm đề tài báo cáo, sẽ không thể tránh khỏi các thiếu sót, rất mong nhận được phản hồi

từ cô và các bạn để góp phần làm cho bản báo cáo thêm hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

NỘI DUNG

LỜI CẢM ƠN 2

NỘI DUNG 3

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 5

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 6

I Lý do chọn đề tài 6

II Mục đích đề tài 6

III Phạm vi đề tài 6

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ 8

I Kiến trúc hệ thống 8

II Tổng quan về MEAN Stack 8

III Quy trình hoạt động của MEAN Stack là gì? 12

IV Ưu điểm của MEAN Stack 12

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 13

I Xác định yêu cầu hệ thống 13

II Phân tích thiết kế hệ thống 13

1 Sơ đồ Use Case 14

1.1 Danh sách các Actor 14

1.2 Đặc tả Use Case 14

a) Use Case tổng quát 14

b) Danh sách các Use Case 16

1.3 Phân rã Use Case 17

1.3.1 Quản lý thông tin tài khoản (UC1) 17

1.3.2 Quản lý sách (UC2) 19

1.3.3 Quản lý người dùng (UC3) 22

1.3.4 Quản lý phiếu mượn (UC4) 24

1.3.5 Quản lý phiếu trả (UC5) 25

1.3.6 Quản lý loại sách (UC6) 26

1.3.7 Tìm kiếm sách (UC7) 27

1.3.8 Xem báo cáo thông kê (UC8) 28

2 Thiết kế cơ sở dữ liệu 28

2.1 Sơ đồ ERD 29

4

2.2 Phân tích cơ sở dữ liệu 30

2.2.1 Bảng Users 30

2.2.2 Bảng Books 30

2.2.3 Bảng Categories 31

2.2.4 Bảng Borrows 31

2.2.5 Bảng Returns 32

3 Thiết kế giao diện và mô tả xử lý 32

3.1 Màn hình chung 33

3.1.1 Màn hình Home 33

3.1.2 Popup Đăng nhập 34

3.2 Màn hình phía User 35

3.2.1 Màn hình Dashboard 35

3.2.2 Màn hình My Profile/Update Detail 36

3.2.3 Màn hình My Profile/Change Password 36

3.2.4 Màn hình Manage Borrow & Return/View Borrowing 37

3.2.5 Màn hình Manage Borrow & Return/View Returning 37

3.3 Màn hình phía Admin 38

3.3.1 Màn hình Dashboard 38

3.3.2 Màn hình My Profile/Update Detail 39

3.3.3 Màn hình My Profile/Change Password 39

3.3.4 Màn hình Manage Books/ Add Book 40

3.3.5 Màn hình Manage Books/ View Book 41

3.3.6 Màn hình Manage Users/ Add User 41

3.3.7 Màn hình Manage Users/ View User 42

3.3.8 Màn hình Manage Borrowing/ Add Borrowing 43

3.3.9 Màn hình Manage Borrowing/ View Borrowing 43

3.3.10 Màn hình Manage Returning 44

3.3.11 Màn hình Manage Items/ Category 44

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 46

I Kết quả đạt được 46

II Ưu điểm 46

III Nhược điểm 46

IV Hướng phát triển 46

TÀI LIỆU THAM KHẢO 48

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

có một phần mềm hỗ trợ việc quản lý thư viện nhằm giảm thiểu chi phí và nhân lực cũng như làm cho các hoạt động quản lý thư viện được dễ dàng, nhanh chóng một cách tự động và chính xác nhất

Nắm bắt được nhu cầu đó, nhóm đã quyết định chọn đề tài xây dựng phần mềm quản lý thư viện giúp cho những nhân viên của thư viện có thể xem và nhập liệu thông tin của sinh viên, sách, thông tin mượn – trả sách

II Mục đích đề tài

- Xây dựng được phần mềm quản lý thư viện với những chức năng cơ bản và mở rộng như:

+ Quản lý người dùng: tên, ngày sinh, giới tính, email và địa chỉ

+ Quản lý sách: tiêu đề, tác giả, mô tả, loại sách, giá và số lượng

+ Xem và nhập liệu thông tin người mượn sách

+ Quản lý thông tin mượn – trả sách: ngày mượn – trả sách, sách mượn, người mượn + Quản lý thu tiền phạt khi quá ngày trả sách

+ Báo cáo thống kê: số lượng sách, số sách đã mượn, tiền phạt

- Ngoài ra, phần mềm cần phải có giao diện thân thiện dễ sử dụng và thao tác

+ Front-end: Angular

+ Back-end: Nodejs

+ Database: MongoDB

+ IDE: Visual Studio Code

− Đối tượng trong phạm vị đề tài hướng đến:

+ Nhân viên thư viện: thủ thư hoặc người quản lý thư viện + Người mượn và trả sách

2 Yêu cầu từ phía người dùng

− Hệ thống đăng nhập an toàn, có tính bảo mật

− Có hiệu quả quản lý cao

− Dễ dàng theo dõi ngày mượn trả sách

− Chức năng thêm, xoá sách

3 Yêu cầu hệ thống

− Gần gũi và dễ dàng sử dụng

− Dễ dàng quản lý những người mượn và trả sách

− Dễ dàng xử lý và nâng cấp

8

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ

I Kiến trúc hệ thống

II Tổng quan về MEAN Stack

MEAN Stack là một tập hợp 4 công nghệ liên kết với TypeScript Chúng sở hữu những

tính năng ưu việt với mục đích tối ưu hóa hiệu suất xây dựng phần mềm Điểm khác biệt của MEAN Stack là nó cho phép tạo nên sự kết nối giữa client với ngôn ngữ server và ngôn ngữ cơ

sở dữ liệu Nó được sử dụng để pháp triển những ứng dụng web full stack

Thuật ngữ MEAN được viết tắt từ tên của 4 ứng dụng tạo thành nó:

Nó là một framework kỹ thuật, mã nguồn mở, được sử dụng để xây dựng các ứng dụng single-page web Các lập trình viên cũng sử dụng nó để tạo các menu động cho các trang web HTML

Framework này là sản phẩm trí tuệ của các kỹ sư Google, Misko Hevery và Adam

Abrons Google chính thức phát hành phiên bản đầu tiên, AngularJS, vào năm 2012 và đã duy trì

nó kể từ đó

Trước khi phát hành AngularJS, đã có những cách khác để tạo dynamic page Tuy nhiên, chúng không thuận tiện như framework này AngularJS sử dụng kiến trúc Model-View-

Controller (MVC), được sử dụng trong phát triển ứng dụng web

Kiểu kiến trúc này bao gồm:

+ Model – cấu trúc dữ liệu quản lý thông tin và nhận đầu vào từ controller

+ View – bản đại diện của thông tin

+ Controller – đáp ứng đầu vào và tương tác với model

Trong AngularJS, model là framework, view là HTML và control là JavaScript Nói một cách đơn giản:

+ AngularJS ràng buộc JavaScript và HTML

+ JavaScript tiếp nhận dữ liệu đầu vào của người dùng và gửi nó đến AngularJS

+ AngularJS sử dụng đầu vào để sửa đổi HTML

Đối với việc ràng buộc framework JavaScript và HTML, code giữa chúng được đồng bộ

Cơ chế này làm cho công việc của các nhà phát triển web dễ dàng hơn vì nó làm giảm số lượng code cần viết

2 Node.js

10

NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viết bằng c++

và Javasccript Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009

Tại thời điểm này, nó được rất nhiều nhà phát triển ứng dụng ưa chuộng và còn là một nền tảng rất mới mẻ Nó là dự án được xem nhiều thứ 2 trên GitHub.org, có khá nhiều theo dõi trên một nhóm của nó trên Google.com và có trên 15.000 modules được công bố trên NMP Tất cả những điều trên cho thấy rằng, NodeJS đang là một nền tảng mới và thú vị cho việc phát triển các ứng dụng web, ứng dụng Server NodeJS cũng cho thấy rằng nó hứa hẹn là một nền tảng hấp dẫn có thể thay thế được các nền tảng truyền thống như Apache, PHP, Python

NodeJS là một nền tảng cho việc viết ứng dụng Javascript phía server, không giống như Javascript chúng ta thường viết trên trình duyệt Với ngôn ngữ Javascript và nền tảng nhập xuất bất đồng bộ, nó là một nền tảng mạnh mẽ để phát triển các ứng dụng thời gian thực

Express cũng có thể sử dụng để xây dựng một API mạnh mẽ và thân thiện với người dùng, vì nó cung cấp rất nhiều tiện ích HTTP và middleware cho việc kết nối

4 MongDB

MongoDB là một cơ sở dữ liệu có dạng NoSQL

NoSQL là một thế hệ cơ sở dữ liệu có các đặc điểm chính là không ràng buộc

(nonrelational), phân tán (distributed), mã nguồn mở (open source), khả năng co giản theo chiều ngang (Horizontal scalable) có thể lưu trữ, xử lý từ một lượng rất nhỏ cho tới dữ liệu cực lớn, lên đến hàng petabytes dữ liệu trong hệ thống cần có độ chịu tải, chịu lỗi cao với những yêu cầu về tài nguyên phần cứng thấp

Mục tiêu chính của Mongo là giữ lại các thuộc tính thân thiện của SQL Do đó các câu truy vấn khá giống với SQL nên MongoDB khá thích hợp cho các lập trình viên đã quen với ngôn ngữ truy vấn SQL MongoDB có một khối lượng tính năng lớn và hiệu năng cao Với các loại dữ liệu phong phú, nhiều truy vấn và việc giảm thời gian phát triển trong việc mô hình hóa các đối tượng

MongoDB được sử dụng tốt nhất với nhu cầu cần truy vấn động, cần tốc độ nhanh cho một cơ sở dữ liệu lớn vì MongoDB ngoài tốc độ đọc nhanh ra thì tốc độ ghi của nó rất nhanh MongoDB hỗ trợ việc tìm theo trường, khoảng kết quả tìm và tìm theo cú pháp Các truy vấn có thể trả về các trường được qui định trong văn bản và cũng có thể bao gồm các hàm Javascript mà người dùng chưa định nghĩa Cũng giống như các cơ sở dữ liệu quan hệ, bất cứ một trường nào trong MongoDB đều được đánh chỉ mục

MongoDB còn có hổ trợ theo mô hình chủ – tớ (master – slave), mảnh, vùng dữ liệu (Sharding)

MongoDB sử dụng một quá trình xử lý để xử lý các yêu cầu về dữ liệu, quản lý định dạng

dữ liệu, thực hiện các hoạt động quản lý bên dưới là mongod, đây là trình xử lý chính Trong việc mở rộng theo chiều ngang sử dụng mô hình mảnh lưu trữ, MongoDB cung cấp dịch vụ xử lý các truy vấn từ tầng ứng dụng, xác định vị trí dữ liệu trong cụm các node phân mảnh được gọi là mongos

12

III Quy trình hoạt động của MEAN Stack là gì?

Khi khách hàng bắt đầu muốn sử dụng MEAN Stack, một yêu cầu sẽ được phát đi thông qua AngularJS Yêu cầu này được chuyển đến server NodeJS sẽ tiếp xúc với yêu cầu đầu tiên và đưa ra các phân tích cú pháp Sau khi quá trình phân tích kết thúc, ExpressJS nhận được kết quả

về các phần dữ liệu cần thiết và đưa ra thông báo cho MongoDB MongoDB sẽ lấy dữ liệu được yêu cầu từ Database trả về cho ExpressJS ExpressJS lại truyền dữ liệu về cho NodeJS Và cuối cùng, NodeJS gửi kết quả dữ liệu cho AngularJS AngularJS sẵn sàng hiển thị thông tin mà khách hàng muốn có trên giao diện màn hình

IV Ưu điểm của MEAN Stack

Tính linh hoạt cao

Một trong những lợi ích to lớn mà MEAN.js mang đến là tính đa nhiệm cao Nó cho phép người dùng tích hợp nhiều tiện ích từ các nguồn khác nhau để nâng cao hiệu năng hoạt động Ngoài ra MEAN Stack còn giúp người dùng thử nghiệm ứng dụng đã hoàn thành trên nền tảng đám mây Từ đó nhanh chóng phát hiện ra những lỗi sai còn tồn đọng Người dùng cũng có thể nhanh chóng sửa lỗi trực tiếp trong quá trình kiểm thử

Khả năng phát triển mạnh mẽ

Vì được cấu tạo nên từ 4 thành phần khác nhau, mỗi phần lại đảm nhận một nhiệm vụ riêng biệt nên MEAN Stack sở hữu khách năng hoạt động rất mạnh mẽ Một nền tảng vững chắc được mang đến giúp cho kết quả phát triển phần mềm trở nên khả thi hơn Từ đó tiết kiệm phần lớn thời gian và chi phí được dùng cho việc kiểm thử sản phẩm trên thị trường

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

- Quản lý việc mượn sách

+ Thêm phiếu mượn + Xem phiếu mượn

- Quản lý việc trả sách

+ Thêm phiếu trả + Xem phiếu trả

- Quản lý loại sách

+ Thêm, xóa, sửa loại sách

- Báo cáo thống kê

- Quản lý tài khoản và nhân viên

+ Thêm, xóa, sửa nhân viên + Đăng nhập

+ Đăng xuất

II Phân tích thiết kế hệ thống

Quản lý thông tin tài khoản

Quản trị viên, người quản lý thư viện

16

b) Danh sách các Use Case

UC1 Quản lý thông tin tài khoản

UC1.1 Xem thông tin

UC1.2 Sửa thông tin

UC1.3 Đổi mật khẩu

UC3 Quản lý người dùng

UC3.1 Thêm người dùng

UC3.2 Xóa người dùng

UC3.3 Sửa người dùng

UC4 Quản lý phiếu mượn

UC4.1 Thêm phiếu mượn

UC4.2 Xem phiếu mượn

UC4.3 Gửi email nhắc nhở

UC5 Quản lý phiếu trả

UC5.1 Thêm phiếu trả

UC5.2 Xem phiếu trả

UC6 Quản lý loại sách

UC6.1 Thêm loại sách

UC6.2 Xóa loại sách

UC7 Tìm kiếm sách

UC8 Xem báo cáo thông kê

1.3 Phân rã Use Case

1.3.1 Quản lý thông tin tài khoản (UC1)

UC1.1 Xem thông tin tài khoản

Tên Use Case Xem thông tin tài khoản

Mô tả Xem thông tin cá nhân của tài khoản đang đăng nhập

Người thực hiện Admin, User

Điều kiện trước khi xử lí Đăng nhập

Tên Use Case Sửa thông tin tài khoản

Mô tả Sửa thông tin cá nhân của tài khoản đang đăng nhập

Người thực hiện Admin, User

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí Thông tin tài khoản được cập nhật

Dòng sự kiện chính Ở màn hình chính vừa mới đăng nhập, chọn tab “MyProfile” →

chọn tab “Update Detail” Sidebar bên trái

18

Sửa thông tin cá nhân của tài khoản đang đăng nhập

Nhấn button “Update Detail”

Tên Use Case Đổi mật khẩu

Mô tả Đổi mật khẩu của tài khoản đang đăng nhập

Người thực hiện Admin, User

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí Mật khẩu tài khoản được cập nhật

Tên Use Case Đăng nhập

Mô tả Đăng nhập theo vai trò tương ứng

Người thực hiện Admin, User

Điều kiện trước khi xử lí

Dòng sự kiện khác

Ở màn Home, trên thanh Header chọn button “Sign In” Popup đăng nhập xuất hiện

Nhập mật khẩu và email Nhấn button “Sign In” trong popup Sai mật khẩu → Hiển thị thông báo lỗi

UC1.5 Đăng xuất

Tên Use Case Đăng xuất

Mô tả Đăng xuất khỏi tài khoản hiện tại

Người thực hiện Admin, User

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí Đăng xuất khỏi tài khoản hiện tại

Dòng sự kiện chính Nhấn mũi tên ở góc phải thanh Header → chọn “Sign out”

Dòng sự kiện khác Không

1.3.2 Quản lý sách (UC2)

UC2.1 Thêm sách

20

Tên Use Case Thêm sách

Mô tả Thêm 1 quyển sách mới vào hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí 1 quyển sách được thêm vào

Dòng sự kiện chính

Ở màn hình chính đã đăng nhập, chọn tab “ManageBooks” → chọn tab “Add Book” bên trái

Nhập các thông tin bắt buộc của sách

Nhấn button “Add Book”

Dòng sự kiện khác Không

UC2.2 Xóa sách

Tên Use Case Xóa sách

Mô tả Xóa 1 quyển sách của hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí 1 quyển sách được xóa

Nhấn “Yes, delete it”

Nhấn “Cancel”

UC2.3 Sửa sách

Tên Use Case Sửa sách

Mô tả Sửa 1 quyển sách mới trong hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí Thông tin của quyển sách được cập nhật

Nhấn “Cancel”

22

1.3.3 Quản lý người dùng (UC3)

UC3.1 Thêm người dùng

Tên Use Case Thêm người dùng

Mô tả Thêm 1 người dùng mới vào hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí 1 người dùng được thêm vào

Dòng sự kiện chính

Ở màn hình chính đã đăng nhập, chọn tab “ManageUsers” → chọn tab “Add User” bên trái

Nhập các thông tin bắt buộc của người dùng

Nhấn button “Add User”

Dòng sự kiện khác Không

UC3.2 Xóa người dùng

Tên Use Case Xóa người dùng

Mô tả Xóa 1 người dùng của hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí 1 người dùng được xóa

Dòng sự kiện chính Ở màn hình chính đã đăng nhập, chọn tab “ManageUsers” →

chọn tab “View User” bên trái

Hiển thị list user Chọn biểu tượng xóa của người dùng cần xóa Hiển thị popup xác nhận

Nhấn “Yes, delete it”

Nhấn “Cancel”

UC3.3 Sửa người dùng

Tên Use Case Sửa người dùng

Mô tả Sửa 1 người dùng mới trong hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí Thông tin của người dùng được cập nhật

24

Nhập các thông tin cần sửa Nhấn “Cancel”

1.3.4 Quản lý phiếu mượn (UC4)

UC4.1 Thêm phiếu mượn

Tên Use Case Thêm phiếu mượn

Mô tả Thêm 1 phiếu mượn mới vào hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập

Sau xử lí 1 phiếu mượn được thêm vào

Dòng sự kiện chính

Ở màn hình chính đã đăng nhập, chọn tab “Manage Borrowing”

→ chọn tab “Add Borrowing” Sidebar bên trái

Nhập các thông tin bắt buộc của phiếu mượn

Nhấn button “Borrow Book”

Dòng sự kiện khác Không

UC4.2 Xem phiếu mượn

Tên Use Case Xem phiếu mượn

Mô tả Xem thông tin của 1 phiếu mượn mới trong hệ thống thư viện

Người thực hiện Admin

Điều kiện trước khi xử lí Đăng nhập