Đồ án: Xây dựng website bán sách online trên nền tảng MEAN Stack (SPKT)

Tham khảo đồ án tốt nghiệp xây dựng website bán sách online bằng MEAN Stack. Báo cáo chi tiết các chức năng, cơ sở dữ liệu và công nghệ sử dụng.

• Tác giả: Lữ Phước Hưng
• Người hướng dẫn: ThS. Nguyễn Trần Thi Văn
• Trường học: Trường Đại học Sư Phạm Kỹ Thuật Tp. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Website Bán Sách Online Trên Nền Tảng Mean Stack
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Tp. Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Tốt nghiệp Website Bán Sách MEAN Stack

Đồ án tốt nghiệp website bán sách là một dự án học tập toàn diện kết hợp các công nghệ hiện đại trong lĩnh vực phát triển ứng dụng web. Dự án này được thực hiện bởi các sinh viên Trường Đại học Sư Phạm Kỹ Thuật TP. HCM với mục tiêu xây dựng một nền tảng thương mại điện tử chuyên nghiệp cho bán sách online. MEAN Stack là viết tắt của MongoDB, Express.js, Angular và Node.js - một bộ công nghệ mạnh mẽ giúp phát triển ứng dụng web đầy đủ. Website bán sách được thiết kế với giao diện đơn giản, dễ sử dụng cho khách hàng và cung cấp panel quản trị toàn diện cho quản lý viên. Dự án này không chỉ giúp sinh viên áp dụng kiến thức lý thuyết mà còn rèn luyện kỹ năng phát triển ứng dụng thực tế, từ thiết kế cơ sở dữ liệu đến xây dựng giao diện người dùng chuyên nghiệp.

1.1. Lý do chọn Đề tài Đồ án Tốt nghiệp

Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, website bán sách online trở thành nhu cầu cấp thiết. Chọn MEAN Stack cho đồ án cho phép sinh viên học một công nghệ hiện đại, được sử dụng rộng rãi trong ngành. Đề tài này cung cấp cơ hội thực hành toàn bộ quy trình phát triển ứng dụng web: từ phân tích yêu cầu, thiết kế hệ thống, đến cài đặt và kiểm thử.

1.2. Mục đích và Nhiệm vụ của Đề tài

Mục đích chính của đồ án website bán sách là xây dựng một nền tảng bán sách online hoàn chỉnh với các chức năng cơ bản. Nhiệm vụ bao gồm: phát triển giao diện người dùng thân thiện, xây dựng API backend mạnh mẽ, quản lý cơ sở dữ liệu hiệu quả, và triển khai hệ thống thanh toán an toàn cho khách hàng và quản lý đơn hàng cho quản trị viên.

II. Công nghệ MEAN Stack trong Đồ án Website Bán Sách

MEAN Stack là một bộ công nghệ toàn diện cho phát triển web ứng dụng toàn bộ. Bộ stack này bao gồm các thành phần chính: MongoDB xử lý cơ sở dữ liệu, Express.js tạo backend API, Angular phát triển giao diện frontend, và Node.js chạy môi trường runtime. Ưu điểm của MEAN Stack là sử dụng JavaScript cho toàn bộ ứng dụng, giúp giảm độ phức tạp và tăng hiệu suất phát triển. Trong đồ án website bán sách, MongoDB lưu trữ thông tin sản phẩm, khách hàng và đơn hàng. Node.js cùng Express.js xây dựng API xử lý logic nghiệp vụ. Angular tạo giao diện động, tương tác tốt với người dùng. Kết hợp này tạo ra một ứng dụng web hiệu quả, dễ bảo trì và mở rộng.

2.1. MongoDB Cơ sở Dữ liệu NoSQL

MongoDB là cơ sở dữ liệu NoSQL linh hoạt, lưu trữ dữ liệu dưới dạng tài liệu JSON. Trong website bán sách, MongoDB quản lý các collection như sách, người dùng, đơn hàng. Ưu điểm là MongoDB cho phép lưu dữ liệu không theo cấu trúc cố định, giúp thích ứng nhanh chóng với thay đổi yêu cầu trong dự án.

2.2. Express.js và Node.js Backend Framework

Express.js là framework web nhẹ chạy trên Node.js, cung cấp công cụ xây dựng API RESTful mạnh mẽ. Trong đồ án, Express xử lý các request từ client, kết nối với MongoDB, và trả về dữ liệu. Node.js cho phép chạy JavaScript phía server, tăng tốc độ phát triển và giảm sự chuyển đổi ngôn ngữ lập trình.

2.3. Angular Frontend Framework

Angular là framework JavaScript mạnh mẽ phát triển giao diện người dùng động. Trong website bán sách, Angular xây dựng các component giao diện: trang chủ, trang sản phẩm, giỏ hàng, thanh toán. Angular cung cấp data binding hai chiều, giúp giao diện cập nhật tự động khi dữ liệu thay đổi.

III. Chức năng Chính của Website Bán Sách MEAN Stack

Website bán sách được phát triển với hai giao diện riêng biệt: giao diện khách hàng và giao diện quản trị viên. Phía khách hàng, website cung cấp các chức năng thiết yếu: đăng ký/đăng nhập tài khoản, tìm kiếm sách theo tiêu chí, xem chi tiết sản phẩm với hình ảnh và mô tả, quản lý giỏ hàng trước khi mua, thanh toán online an toàn, bình luận và đánh giá sách, cũng như quản lý thông tin cá nhân. Phía quản trị viên, website cung cấp quản lý đơn hàng theo trạng thái, quản lý sản phẩm (thêm, sửa, xóa), quản lý nhà cung cấp, quản lý nhân viên và khách hàng, cùng xem thống kê doanh số. Những chức năng này giúp website bán sách hoạt động như một nền tảng thương mại điện tử chuyên nghiệp, tối ưu trải nghiệm mua sắm và quản lý kinh doanh.

3.1. Chức năng Phía Khách hàng

Giao diện khách hàng trong website bán sách tập trung vào trải nghiệm mua sắm dễ dàng. Người dùng có thể đăng ký tài khoản mới hoặc đăng nhập với tài khoản hiện có, tìm kiếm sách theo tên, tác giả, thể loại, xem chi tiết bao gồm giá, mô tả, hình ảnh sách, thêm vào giỏ hàng, thực hiện thanh toán online hoặc khi nhận hàng, đánh giá và bình luận sách đã mua.

3.2. Chức năng Phía Quản trị viên

Panel quản trị viên của website bán sách cung cấp công cụ quản lý toàn diện: thêm, sửa, xóa sản phẩm từ kho sách, quản lý đơn hàng xem trạng thái và cập nhật, quản lý khách hàng và nhân viên, quản lý nhà cung cấp, xem báo cáo thống kê doanh số, lợi nhuận, các sản phẩm bán chạy.

IV. Kết quả và Hướng Phát triển Đồ án Website Bán Sách

Đồ án website bán sách MEAN Stack đã đạt được những kết quả đáng kể trong việc xây dựng một nền tảng thương mại điện tử hoàn chỉnh. Ứng dụng được phát triển thành công với tất cả chức năng cơ bản, giao diện thân thiện, và hệ thống quản lý hiệu quả. Quá trình thực hiện đồ án giúp sinh viên nắm vững công nghệ MEAN Stack, rèn luyện kỹ năng phát triển web chuyên nghiệp, và hiểu rõ quy trình xây dựng ứng dụng từ đầu đến cuối. Mặc dù có những hạn chế nhất định như tính năng thanh toán chưa tích hợp hoàn toàn với các cổng thanh toán thực tế, những hướng phát triển trong tương lai bao gồm: tích hợp các phương thức thanh toán đa dạng, bổ sung AI để gợi ý sách dựa trên lịch sử mua hàng, phát triển ứng dụng mobile cho website, cải thiện hiệu suất với caching và CDN, và triển khai bảo mật nâng cao.

4.1. Những Kết quả Đạt được

Website bán sách đã hoàn thành toàn bộ chức năng đề ra với MEAN Stack. Giao diện người dùng được thiết kế thân thiện, dễ sử dụng. Panel quản trị viên cung cấp đầy đủ công cụ quản lý. Hệ thống cơ sở dữ liệu MongoDB lưu trữ an toàn dữ liệu. API backend Express xử lý nhanh chóng các yêu cầu. Frontend Angular tạo trải nghiệm người dùng mượt mà.

4.2. Hướng Phát triển Tương lai

Để nâng cao website bán sách, có thể phát triển: tích hợp API thanh toán với Stripe hoặc PayPal, xây dựng hệ thống gợi ý sản phẩm dựa trên machine learning, phát triển ứng dụng mobile với React Native, cải thiện SEO cho website, triển khai bảo mật HTTPS và mã hóa dữ liệu khách hàng.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 7 1.2 Tại sao nên sử dụng MongoDB - Các hệ thống real time (thời gian thực) yêu cầu phản hồi nhanh, Các hệ thống big data với yêu cầu truy vấn nhanh hay các hệ thống có lượng request lớn thì MongoDB sẽ là sự lựa chọn ưu tiên hơn CSDL quan hệ. - Website bạn có nhiều dữ liệu quá. Giả sử web bạn có đến 10 triệu records thì đó là cơn ác mộng với MYSQL. Bởi vì MongoDB có khả năng tìm kiến thông tin liên quan cũng khá nhanh nên trường hợp này nên dùng nó.

- Máy chủ không có hệ quản trị CSDL. Trường hợp này thường bạn sẽ sử dụng SQLITE hoặc là MongoDB.3 Giới thiệu về Angular: 1.1 Angular là gì? Angular là một JavaScript framework do google phát triển để xây dựng các Single Page Application (SPA) bằng JavaScript, HTML và TypeScript. Angular cung cấp các tính năng tích hợp cho animation, http service và có các tính năng như auto-complete, navigation, toolbar, menus, … Code được viết bằng TypeScript, biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt. Để học được Angular thì bạn cần biết các kiến thức cơ bản sau: HTML, CSS JavaScript, TypeScript, Document Object Model (DOM).1 Angular 8 [5] CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 8 Trước đây chữ A trong MEAN Stack thường được biết tới AngularJS, nhưng sau năm 2012, Angular đã được Google tiếp quản và phát triển lên Angular 2 rồi tới Angular 4 và phiên bản mới nhất hiện nay là Angular 9.

Angular là một Web Framework làm việc ở phía Front-end giúp thuận lợi trong việc tạo các Single Page Web Application. Các tính năng mới trong Angular 8: - Angular 8 hỗ trợ bản TypeScript 3. Nếu bạn muốn dùng Angular 8 cho ứng dụng của mình thì cần upgrade TypeScript lên 3. - IVY Rendering Engine.

- Hỗ trợ Bazel. - Differential Loading cho việc tối ưu hóa hiệu năng. - Thay đổi Lazy Loading trong Route. - Hỗ trợ Web Worker.

- Thu thập phân tích dữ liệu sử dụng. - Loại bỏ @angular/http. - Thay đổi ViewChild và ContentChild. - Hỗ trợ SVG Template.

- Hỗ trợ PNPM. - Hỗ trợ Codelyzer 5. - Hỗ trợ thư viện mới New Builders/ Architect API. - Làm sao để nâng cấp lên Angular 8.2 Những thành phần của Angular o Component: là một khối code trong app Angular.

Nó là sự kết hợp của bộ template html và nhúng kèm code TypeScript (hoặc JavaScript). Các components là độc lập với nhau và độc lập với hệ thống. Nó có thể được cài vào hoặc tháo ra khỏi hệ thống dễ dàng. Một component có thể hiểu như một control trên màn hình hiển thị, gồm giao diện html và code logic xử lý sự kiện đi kèm control đó.

Một component cũng có thể to lớn như là cả 1 màn hình chứa nhiều CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 9 control hoặc một nhóm nhiều màn hình. Tức là một component cũng có thể chứa và gọi được nhiều component khác nối vào. o Binding: Angular có cách code Binding (kết nối giữa html và data) dữ liệu theo kiểu 2 chiều, nghĩa là html input thay đổi thì biến JavaScript sẽ ngay lập tức nhận được giá trị trả về và ngược lại, giá trị trong js thay đổi thì ngay lập tức màn hình html thay đổi theo. Để bind một chuỗi ra ngoài màn hình html thì rất đơn giản sử dụng 2 dấu ngoặc nhọn {{TenBien}}.

o To-way binding: Từ khóa ngModel lúc này không phải là thuộc tính html mà nó là từ khóa của Angular. Khi chúng ta viết [(ngModel)] chúng ta sẽ gắn chặt giá trị của input html với biến title. Dẫn đến người dùng gõ vào ô input thì thẻ h1 sẽ nhận giá trị tương ứng của title. o Xử lý sự kiện: Để gắn 1 sự kiện của control html với một hàm JavaScript.

Khi chúng ta muốn (click) tức là muốn bind sự kiện click chuột của người dùng ở control này gọi là goBack(). o ngModule: Module có thể được biên dịch (compile) dưới dạng ahead-of-time (AoT). Nghĩa là biên dịch ra mã thực thi để hiện ra luôn trên trình duyệt không cần vẽ vời gì từ đầu. Hãy tưởng tượng component có html và js viết riêng, khi load trang thì 2 thứ này mới nhào nặn chung để hiển thị html+data lên màn hình.

AoT là thứ html+data đã nhào sẵn. Module cũng có thể gọi module con và bắt tay được với các module khác. o Service: Để tạo ra một service thì chúng ta cần import và mô tả một class với từ khóa @injectable lấy từ @angular/core module. Nếu muốn dùng chung service mà không muốn khao báo nhiều lần, component nào cũng phải tiêm nó vào.

Thì lúc này có thể khai báo service ở phần providers của component hoặc module. o Router Outlet: Mỗi một Router sẽ có một URL để load component. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 10 1.4 Giới thiệu về ExpressJS : 1.1 ExpressJS là gì? ExpressJS là một framework được xây dựng trên nền tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile.

Expressjs hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng. ExpressJS là framework phổ biến và được sử dụng rộng rãi nhất của NodeJS, được xây dựng trên cấu trúc ngữ pháp của Sinatra. Ý tưởng đằng sau ExpressJS là đưa đến một framework nhẹ, dễ dàng tiếp cận để phát triển các ứng dụng web từ nhỏ đến lớn hay hybrid. 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.1 Framework ExpressJS [6] Các ưu điểm khi sử dụng express framework: - Express hỗ trợ chúng ta phát triển ứng dụng theo mô hình MVC.

- Cho phép định nghĩa các middleware. - Định nghĩa rõ ràng các request methods trong route. - Hỗ trợ mạnh về REST API.2 Cấu trúc của ExpressJS CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 11 Hình 1.2 Cấu trúc của ExpressJS [7] Cấu trúc của ExpressJS gồm: - Root - app.js chứa các thông tin về cấu hình, khai báo, các định nghĩa,. để ứng dụng của chúng ta chạy ok.json chứa các package cho ứng dụng chạy.

Nếu bạn nào làm với PHP hoặc RoR rồi thì file này có chức năng tương tự như composer.json hoặc Gemfile. - Folder routes: chứa các route có trong ứng dụng. - Folder view: chứa view/template cho ứng dụng. - Folder public chứa các file css, js, images, .cho ứng dụng.3 Router trong Express Router trong express framework là một bộ định tuyến giúp cho chúng ta định danh ra các url và hành động kèm theo nó.

Để sử dụng router trong express framework thì các bạn sử dụng cú pháp: app.method(path,handle); Trong đó:  app là biến mà khi chúng ta khởi tạo express framework.  method là một trong các dạng http method sau: get, post, put, delete, head, path.  path là thành phần phía sau domain mà chúng ta muốn xác định. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 12  handle là hành động sẽ thực thi khi danh path được gọi.

handle ở đây là callback function Với req là biến chứa tất cả các thông số request mà người dùng gửi lên và res là biến chứa tất cả các thông số mà server trả về cho client.4 Middleware trong ExpressJS ExpressJS khi hoạt động, về cơ bản sẽ là một loạt các hàm Middleware được thực hiện liên tiếp nhau. Sau khi đã thiết lập, các request từ phía người dùng khi gửi lên ExpressJS sẽ thực hiện lần lượt qua các hàm Middleware cho đến khi trả về response cho người dùng. Các hàm này sẽ được quyền truy cập đến các đối tượng đại diện cho Request - req, Response - res, hàm Middleware tiếp theo - next, và đối tượng lỗi - err nếu cần thiết. Một hàm Middleware sau khi hoạt động xong, nếu chưa phải là cuối cùng trong chuỗi các hàm cần thực hiện, sẽ cần gọi lệnh next () để chuyển sang hàm tiếp theo, bằng không xử lý sẽ bị treo tại hàm đó.

Các chức năng mà middleware có thể thực hiện trong ExpressJS sẽ bao gồm:  Thực hiện bất cứ đoạn code nào.  Thay đổi các đối tượng request và response.  Kết thúc một quá trình request-response.  Gọi hàm middleware tiếp theo trong stack.

Trong Express, có 5 kiểu middleware có thể sử dụng:  Application-level middleware (middleware cấp ứng dụng).  Router-level middleware (middleware cấp điều hướng - router).  Error-handling middleware (middleware xử lý lỗi).  Built-in middleware (middleware sẵn có).

 Third-party middleware (middleware của bên thứ ba). CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 13 1.5 Giới thiệu về NodeJS: 1.1 NodeJS là gì? 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à JavaScript. Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009.1 NodeJS [8] 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. Ưu điểm của NodeJS: - Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao. - Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, real time thời gian thực. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Báo cáo khóa luận tốt nghiệp Trang 14 - Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.2 Những ứng dụng nên viết bằng Nodejs Rõ ràng, không phải cứ hot và mới là Nodejs làm gì cũng tốt, ví dụ như một ứng dụng cần tính ổn định cao, logic phức tạp thì các ngôn ngữ PHP hay Ruby, vẫn là sự lựa chọn tốt hơn.

Còn dưới đây là những ứng dụng có thể và nên viết bằng Nodejs:  Websocket server: Các máy chủ web socket như là Online Chat, Game Server  Fast File Upload Client: là các chương trình upload file tốc độ cao.  Ad Server: Các máy chủ quảng cáo.  Cloud Services: Các dịch vụ đám mây.  RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API.

 Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực.