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

ĐẠ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 Đề tài: Tìm hiểu Mean Stack 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 LỜI CẢM ƠN Sau q trình học tập rèn luyện 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 trang bị kiến thức kỹ thực tế để hồn thành Đồ án Để hồ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 thầy cô khoa Công nghệ phần mềm tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thơng tin giúp đỡ chúng em cần hỗ trọ Và cuối chúng em xin bày tỏ lịng biết ơn sâu sắc đến Thái Thụy Hàn Uyển – giảng viên hướng dẫn chúng em thực Đồ án 2, cô đồng hành tận tình hướng dẫn cho chúng em qua giai đoạn đồ án Nhờ có giúp đỡ nhiệt tình mà chúng em hoàn thành được đồ án cách tốt Vì kiến thức chúng em cịn hạn hẹp nên khơng thể tránh khỏi thiếu sót trình thực đồ án Tuy nhiên, chúng em cố gắng hoàn thành hạn hạn chế lỗi nhiều Nhóm chúng em ln mong đợi nhận ý kiến đóng góp quý báu từ qua rút kinh nghiệm, tự sửa chữa, hồn thiện thân tinh thần nghiêm túc, tự giác học hỏi Trong trình làm đề tài báo cáo, khơng thể tránh khỏi thiếu sót, mong nhận phản hồi từ bạn để góp phần làm cho báo cáo thêm hoàn thiện Chúng em xin chân thành cảm ơn! Thành phố Hồ Chí Minh, tháng 06 năm 2022 Sinh viên Phạm Ngọc Quyên Sinh viên Vũ Ngọc Mỹ Phương NỘI DUNG LỜI CẢM ƠN NỘI DUNG NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI Lý chọn đề tài I II Mục đích đề tài III Phạm vi đề tài CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ Kiến trúc hệ thống I II Tổng quan MEAN Stack III Quy trình hoạt động MEAN Stack gì? 12 IV Ưu điểm MEAN Stack 12 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 13 Xác định yêu cầu hệ thống 13 I II Phân tích thiết kế hệ thống 13 Sơ đồ Use Case 14 1.1 Danh sách Actor 14 1.2 Đặc tả Use Case 14 a) Use Case tổng quát 14 b) Danh sách Use Case 16 Phân rã Use Case 17 1.3 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.1 Thiết kế sở liệu 28 Sơ đồ ERD 29 2.2 Phân tích sở 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 Thiết kế giao diện 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 đạt 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 CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI I Lý chọn đề tài Hiện nay, công nghệ thông tin ngày đưa vào áp dụng rộng rãi đời sống Việc quản lý thư viện trường học cách thủ công ngày lộ nhiều nhược điểm như: khó khăn việc lưu trữ giấy tờ, mát thông tin, nhiều thời gian cho quy trình xử lý thủ cơng, cần tiêu tốn nhiều nhân lực Nhận thấy nhược điểm khắc phục cách áp dụng cơng nghệ vào quy trình quản lý thư viện Cụ thể cần có phần mềm hỗ trợ việc quản lý thư viện nhằm giảm thiểu chi phí nhân lực làm cho hoạt động quản lý thư viện dễ dàng, nhanh chóng cách tự động xác Nắm bắt nhu cầu đó, nhóm định chọn đề tài xây dựng phần mềm quản lý thư viện giúp cho nhân viên thư viện xem nhập liệu thông tin sinh viên, sách, thông tin mượn – trả sách II Mục đích đề tài - Xây dựng phần mềm quản lý thư viện với chức mở rộng như: + Quản lý người dùng: tên, ngày sinh, giới tính, email địa + Quản lý sách: tiêu đề, tác giả, mô tả, loại sách, giá số lượng + Xem 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 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 thao tác III Phạm vi đề tài Chương trình cho phép người dùng quản lý thông tin liên quan đến việc mượn, trả, tìm kiếm thơng tin sách Chương trình cho phép lưu trữ thơng tin sách, người dùng Đối tượng sử dụng Đồ án hướng đến nghiên cứu đối tượng sau: − Các công nghệ: + Front-end: Angular + Back-end: Nodejs + Database: MongoDB + IDE: Visual Studio Code − Đối tượng phạm vị đề tài hướng đến: + Nhân viên thư viện: thủ thư người quản lý thư viện + Người mượn trả sách Yêu cầu từ phía người dùng − Hệ thống đăng nhập an tồn, có tính bảo mật − Có hiệu quản lý cao − Dễ dàng theo dõi ngày mượn trả sách − Chức thêm, xoá sách Yêu cầu hệ thống − Gần gũi dễ dàng sử dụng − Dễ dàng quản lý người mượn trả sách − Dễ dàng xử lý nâng cấp CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ I Kiến trúc hệ thống II Tổng quan MEAN Stack MEAN Stack tập hợp công nghệ liên kết với TypeScript Chúng sở hữu tính ư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 MEAN Stack cho phép tạo nên kết nối client với ngôn ngữ server ngôn ngữ sở liệu Nó sử dụng để pháp triển ứng dụng web full stack Thuật ngữ MEAN viết tắt từ tên ứng dụng tạo thành nó: − M Mongo.db − E Express.js − A Angular.js − N Node.js Angular Nó framework kỹ thuật, mã nguồn mở, sử dụng để xây dựng ứng dụng single-page web Các lập trình viên sử dụng để tạo menu động cho trang web HTML Framework sản phẩm trí tuệ kỹ sư Google, Misko Hevery Adam Abrons Google thức phát hành phiên đầu tiên, AngularJS, vào năm 2012 trì kể từ Trước phát hành AngularJS, có cách khác để tạo dynamic page Tuy nhiên, chúng không thuận tiện framework AngularJS sử dụng kiến trúc Model-ViewController (MVC), sử dụng phát triển ứng dụng web Kiểu kiến trúc bao gồm: + Model – cấu trúc liệu quản lý thông tin nhận đầu vào từ controller + View – đại diện thông tin + Controller – đáp ứng đầu vào tương tác với model Trong AngularJS, model framework, view HTML control JavaScript Nói cách đơn giản: + AngularJS ràng buộc JavaScript HTML + JavaScript tiếp nhận liệu đầu vào người dùng gửi đến AngularJS + AngularJS sử dụng đầu vào để sửa đổi HTML Đối với việc ràng buộc framework JavaScript HTML, code chúng đồng Cơ chế làm cho công việc nhà phát triển web dễ dàng làm giảm số lượng code cần viết Node.js NodeJS tảng xây dựng “V8 Javascript engine” viết c++ Javasccript Nền tảng phát triển Ryan Lienhart Dahl vào năm 2009 Tại thời điểm này, nhiều nhà phát triển ứng dụng ưa chuộng tảng mẻ Nó dự án xem nhiều thứ GitHub.org, có nhiều theo dõi nhóm Google.com có 15.000 modules công bố NMP Tất điều cho thấy rằng, NodeJS tảng thú vị cho việc phát triển ứng dụng web, ứng dụng Server NodeJS cho thấy hứa hẹn tảng hấp dẫn thay tảng truyền thống Apache, PHP, Python NodeJS tảng cho việc viết ứng dụng Javascript phía server, không giống Javascript thường viết trình duyệt Với ngơn ngữ Javascript tảng nhập xuất bất đồng bộ, tảng mạnh mẽ để phát triển ứng dụng thời gian thực Express Express web application framework cho NodeJS, cung cấp tính mạnh mẽ cho việc xây dựng ứng dụng web nghĩa lai ExpressJS framework phổ biến sử dụng rộng rãi NodeJS, xây dựng cấu trúc ngữ pháp Sinatra Ý tưởng đằng sau ExpressJS đưa đến framework nhẹ, dễ dàng tiếp cận để phát triển ứng dụng web từ nhỏ đến lớn hay hybrid Express sử dụng để xây dựng API mạnh mẽ thân thiện với người dùng, cung cấp nhiều tiện ích HTTP middleware cho việc kết nối MongDB 10 Đây giao diện mặc định mở trang web Trang hiển thị danh sách tất sách cótrong hệ thống thư viện Người dùng dù chưa đăng nhập hay khơng có tài khaorn xem trang đồng thời tìm kiếm sách theo nhu cầu 3.1.2 Popup Đăng nhập Khi nhấn button “Sign in” header trang Home xuất popup Đăng nhập Người dùng nhập tài khoản mật xác sau nhấn đăng nhập để đăng nhập vào ứng dụng với vai trò tương ứng User Admin 34 3.2 Màn hình phía User 3.2.1 Màn hình Dashboard Màn hình xuất sau đăng nhập với vai trò tương ứng Màn hình thể số liệu thống kê hệ thống quản lý thư viện số lượng sách hệ thống tư viện, số lượng sách mượn, số tiền phạt hạn trả,… 35 3.2.2 Màn hình My Profile/Update Detail Đây hình giúp người dùng đăng nhập chỉnh sửa thơng tin cá nhân 3.2.3 Màn hình My Profile/Change Password 36 Màn hình cho phép người dùng đổi mật tài khoản Mật thay đổi cập nhập lên database sau thay đổi 3.2.4 Màn hình Manage Borrow & Return/View Borrowing Ở hình người dùng xem số lượng sách mà thân mượn, thơng tin phiếu mượn 3.2.5 Màn hình Manage Borrow & Return/View Returning Ở hình người dùng xem lịch sử mà thân mượn sách, thơng tin phiếu trả 37 3.3 Màn hình phía Admin 3.3.1 Màn hình Dashboard Màn hình xuất sau đăng nhập với vai trò tương ứng Màn hình thể số liệu thống kê hệ thống quản lý thư viện số lượng sách hệ thống tư viện, số lượng sách mượn, số tiền phạt hạn trả,… 38 3.3.2 Màn hình My Profile/Update Detail Đây hình giúp người dùng đăng nhập chỉnh sửa thơng tin cá nhân 3.3.3 Màn hình My Profile/Change Password Màn hình cho phép người dùng đổi mật tài khoản Mật thay đổi cập nhập lên database sau thay đổi 39 3.3.4 Màn hình Manage Books/ Add Book Màn hình xuất người dùng chọn tab Add Book Sidebar bên trái hình Ở hình tài khoản đăng nhập thêm sách vào hệ thống thư viện Sau thêm hệ thống cập nhật vào sở liệu 40 3.3.5 Màn hình Manage Books/ View Book Màn hình xuất người dùng chọn tab View Book Sidebar bên trái hình Ở hình tài khoản đăng nhập xem, sửa xóa tất sách có hệ thống thư viện 3.3.6 Màn hình Manage Users/ Add User 41 Màn hình xuất người dùng chọn tab Add User Sidebar bên trái hình Ở hình tài khoản đăng nhập thêm người dùng vào hệ thống thư viện Sau thêm hệ thống cập nhật vào sở liệu 3.3.7 Màn hình Manage Users/ View User 42 Màn hình xuất người dùng chọn tab View Book Sidebar bên trái hình Ở hình tài khoản đăng nhập xem, sửa xóa tất người d có hệ thống thư viện 3.3.8 Màn hình Manage Borrowing/ Add Borrowing Màn hình xuất người dùng chọn tab Add Borrowing Sidebar bên trái hình Ở hình tài khoản đăng nhập thêm phiếu mượn vào hệ thống thư viện Sau thêm hệ thống cập nhật vào sở liệu 3.3.9 Màn hình Manage Borrowing/ View Borrowing 43 Màn hình xuất người dùng chọn tab View Borrowing Sidebar bên trái hình Ở hình tài khoản đăng nhập xem gửi email nhắc nhở cho phiếu mượn tương ứng 3.3.10 Màn hình Manage Returning Màn hình xuất người dùng chọn tab Manage Returning Sidebar bên trái hình Ở hình tài khoản đăng nhập xem tất phiếu trả có hệ thống thư viện 3.3.11 Màn hình Manage Items/ Category 44 Màn hình xuất người dùng chọn tab Category Sidebar bên trái hình Ở hình tài khoản đăng nhập thêm loại sách vào hệ thống thư viện Sau thêm hệ thống cập nhật vào sở liệu 45 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN I Kết đạt Lý thuyết Hiểu cách giải toán quản lý thư viện quy trình nghiệp vụ quản lý thư viện Công nghệ Biết cách sử dụng công nghệ hỗ trợ MEAN Stack để xây dựng ứng dụng: • MongoDB sở liệu NoSQL Nó lưu trữ liệu định dạng JSON định phân nhằm dễ dàng truyền tải liệu server client • Express.js web framework xây dựng Node.js Nó sử dụng để tạo API phát triển ứng dụng web • Angular.js JavaScript Framework dùng để làm front-end cho web, phát triển Google Nó kiểm sốt hành vi phần tử khác hiển thị trang web • Node.js Java Runtime Environment (JRE), sử dụng để tạo web server Ưu điểm II − Hoàn thành yêu cầu đặt ban đầu, có đầy đủ tính cần thiết hệ thống quản lý thư viện − Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng theo tác − Sinh viên thực nắm kiến thức tổ chức việc lập trình web với MEAN Stack III Nhược điểm − Ứng dụng website quản lý thư viện chưa thực hoàn thiện giao diện số tính phụ − Chưa phát triển tính đăng nhập tài khoản Google Facebook − Tối ưu code chưa tốt − Còn hạn chế số tính năng, chưa có tính vượt trổi IV Hướng phát triển 46 − Xây dựng chức cịn thiếu, hồn thiện chức có − Tối ưu hóa code để tăng tốc độ tương tác − Hỗ trợ thêm đa ngôn ngữ cho quốc gia − Triển khai thiết bị thực tế − Cải tiến giao diện website đẹp tiện dụng − Tiếp tục bổ sung phát triển tính website quản lý thư viện giúp việc thao tác quản lý thư viện ngày dễ dàng thuận lợi 47 TÀI LIỆU THAM KHẢO [1] https://teky.edu.vn/blog/mean-stack-la-gi/ [2] https://vn.got-it.ai/blog/mean-stack-la-gi-cau-truc-uu-diem-cua-mean-stack [3] https://topdev.vn/blog/mean-stack-la-gi/ 48 ... hiệu suất xây dựng phần mềm Điểm khác biệt MEAN Stack cho phép tạo nên kết nối client với ngôn ngữ server ngơn ngữ sở liệu Nó sử dụng để pháp triển ứng dụng web full stack Thuật ngữ MEAN viết... tên ứng dụng tạo thành nó: − M Mongo.db − E Express.js − A Angular.js − N Node.js Angular Nó framework kỹ thuật, mã nguồn mở, sử dụng để xây dựng ứng dụng single-page web Các lập trình viên sử dụng. .. dụng công nghệ hỗ trợ MEAN Stack để xây dựng ứng dụng: • MongoDB sở liệu NoSQL Nó lưu trữ liệu định dạng JSON định phân nhằm dễ dàng truyền tải liệu server client • Express.js web framework xây