Khóa luận tốt nghiệp: Xây dựng website bán đồ cũ bằng MEAN Stack - Nguyễn Đình Đạt

Tài liệu đồ án tốt nghiệp xây dựng website bán đồ cũ sử dụng công nghệ MEAN Stack. Báo cáo chi tiết quá trình phân tích, thiết kế và triển khai.

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

Tóm tắt

I. Giới Thiệu Về MEAN Stack Và Ứng Dụng Trong Thương Mại Điện Tử

MEAN Stack là một công nghệ hiện đại bao gồm bốn thành phần chính: MongoDB, Express.js, AngularJS và Node.js. Đây là một stack công nghệ full-stack JavaScript cho phép lập trình viên xây dựng ứng dụng web toàn diện từ phía máy chủ đến phía khách hàng. Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, website bán đồ cũ đã trở thành một nhu cầu thiết yếu. Công nghệ MEAN Stack cung cấp một nền tảng mạnh mẽ, linh hoạt và hiệu quả để xây dựng các ứng dụng bán hàng trực tuyến. Khóa luận tốt nghiệp này tập trung vào việc phát triển một website thương mại điện tử chuyên biệt cho lĩnh vực bán đồ cũ, kết hợp các tính năng hiện đại như xác thực người dùng, quản lý bài đăng, tìm kiếm nâng cao và quản lý hình ảnh sản phẩm.

1.1. Các Thành Phần Chính Của MEAN Stack

MongoDB là cơ sở dữ liệu NoSQL linh hoạt, lưu trữ dữ liệu dưới dạng JSON-like documents. Express.js là framework web Node.js mạnh mẽ để xây dựng API RESTful. AngularJS là framework JavaScript phía client cho việc xây dựng giao diện người dùng động. Node.js là nền tảng JavaScript phía server giúp xử lý các yêu cầu không đồng bộ một cách hiệu quả. Sự kết hợp hoàn hảo này tạo nên một hệ thống thông tin toàn vẹn cho ứng dụng bán đồ cũ.

1.2. Tầm Quan Trọng Của Công Nghệ Này Trong Phát Triển Web

MEAN Stack cung cấp một môi trường phát triển thống nhất, tăng hiệu suất làm việc của nhóm phát triển. Sử dụng JavaScript trên cả phía server và client giảm bớt độ phức tạp trong việc quản lý ngôn ngữ lập trình. Website bán đồ cũ được xây dựng trên nền tảng này có thể dễ dàng mở rộng, bảo trì và nâng cấp theo nhu cầu kinh doanh.

II. Kiến Trúc Hệ Thống Và Thiết Kế Cơ Sở Dữ Liệu

Kiến trúc hệ thống website bán đồ cũ được chia thành hai phần chính: Back-End và Front-End. Phía Back-End được xây dựng bằng Node.js và Express.js, chịu trách nhiệm xử lý logic nghiệp vụ, quản lý dữ liệu và cung cấp API RESTful. Phía Front-End sử dụng AngularJS để tạo giao diện người dùng tương tác. Cơ sở dữ liệu MongoDB lưu trữ thông tin người dùng, sản phẩm, bình luận và các dữ liệu khác. Mô hình ERD (Entity-Relationship Diagram) được thiết kế chi tiết để đảm bảo tính toàn vẹn dữ liệu. Các collection trong MongoDB bao gồm Users, Products, Comments và Orders, mỗi collection có cấu trúc document rõ ràng để hỗ trợ các chức năng cốt lõi của website thương mại điện tử.

2.1. Cấu Trúc Front End Và Back End

Back-End sử dụng Express.js để tạo các API endpoint xử lý các yêu cầu HTTP. Front-End được xây dựng với Angular CLI, tổ chức theo mô-đun và components. Các folder được cấu trúc rõ ràng: BackEnd chứa server logic, FrontEnd chứa giao diện. Nodemon được cài đặt để tự động reload server khi có thay đổi code, tăng hiệu suất phát triển.

2.2. Thiết Kế Cơ Sở Dữ Liệu MongoDB

MongoDB collections bao gồm: Users (lưu thông tin đăng nhập, profile), Products (chi tiết sản phẩm cũ), Comments (bình luận sản phẩm), Orders (đơn hàng). Mỗi collection sử dụng document schema linh hoạt, cho phép thêm trường mới mà không ảnh hưởng tới dữ liệu hiện có. Indexes được tạo trên các trường thường xuyên tìm kiếm để tối ưu hiệu suất query.

III. Các Tính Năng Chính Và Chức Năng Của Ứng Dụng

Website bán đồ cũ được phát triển với nhiều tính năng quan trọng để đáp ứng nhu cầu người dùng và quản trị viên. Chức năng xác thực sử dụng Passport.js và JWT tokens để đảm bảo bảo mật. Người dùng có thể đăng ký, đăng nhập an toàn và quản lý hồ sơ cá nhân với khả năng chỉnh sửa thông tin. Chức năng đăng bài cho phép người dùng tải lên sản phẩm cũ với hình ảnh, mô tả chi tiết. Tính năng tìm kiếm nâng cao giúp người dùng tìm kiếm sản phẩm theo nhiều tiêu chí. Chức năng bình luận và quản lý bài đăng cho phép người dùng tương tác với sản phẩm. Tính năng gửi email thông báo người dùng về hoạt động quan trọng. Quản lý hình ảnh được tối ưu hóa để tăng tốc độ tải trang.

3.1. Chức Năng Xác Thực Và Quản Lý Người Dùng

Passport.js kết hợp với JWT tokens tạo ra một hệ thống xác thực an toàn. Mỗi yêu cầu được xác minh bằng token lưu trong localStorage. Hồ sơ cá nhân cho phép người dùng cập nhật thông tin, ảnh đại diện và các thông tin liên lạc. Quản lý người dùng phía admin bao gồm xác minh tài khoản, vô hiệu hóa người dùng vi phạm, thống kê hoạt động người dùng.

3.2. Chức Năng Đăng Bài Bình Luận Và Tìm Kiếm

Chức năng đăng bài cho phép người dùng tạo listings sản phẩm cũ với upload hình ảnh tự động lưu vào database. Chức năng bình luận tạo cộng đồng tương tác, với comment children cho những câu trả lời lồng nhau. Tính năng tìm kiếm sử dụng MongoDB text indexes để tìm kiếm nhanh chóng theo tên, danh mục, giá cả, đảm bảo trải nghiệm người dùng tốt nhất.

IV. Quy Trình Phát Triển Và Các Công Nghệ Hỗ Trợ

Quá trình phát triển website bán đồ cũ từ tháng 3 đến tháng 7 năm 2020 được chia thành các giai đoạn rõ ràng. Giai đoạn đầu tiên tập trung vào tìm hiểu lý thuyết MEAN Stack, MongoDB, Express, Node.js và AngularJS. Giai đoạn thứ hai là cài đặt môi trường phát triển, khởi tạo dự án với git version control. Giai đoạn thứ ba thiết kế cơ sở dữ liệu chi tiết với mô hình ERD. Giai đoạn thứ tư xây dựng Back-End APIs sử dụng Express, thiết lập các endpoints RESTful. Giai đoạn cuối xây dựng Front-End interfaces với AngularJS, thiết kế giao diện người dùng thân thiện. Postman được sử dụng để kiểm thử các API endpoints, đảm bảo các yêu cầu HTTP hoạt động chính xác trước khi tích hợp với Front-End.

4.1. Các Công Cụ Phát Triển Và Cấu Hình Môi Trường

MongoDB được cấu hình với đường dẫn database riêng, khởi động bằng lệnh 'mongod –dbpath'. Node.js và npm cài đặt các dependencies cần thiết. Express.js được cấu hình để lắng nghe trên port 3000, MongoDB chạy trên port 27017. AngularJS được khởi tạo bằng Angular CLI. Nodemon tự động reload server khi có thay đổi code, Git quản lý version control toàn bộ project.

4.2. Kiểm Thử Và Triển Khai Ứng Dụng

Postman là công cụ không thể thiếu để kiểm thử các API RESTful một cách chi tiết và toàn diện. Mỗi endpoint được kiểm thử để xác minh request/response đúng định dạng JSON. Unit testing được thực hiện để đảm bảo từng chức năng hoạt động độc lập. Integration testing kiểm tra sự tương tác giữa các components khác nhau của website bán đồ cũ để đảm bảo tính ổn định và hiệu suất.

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

CHƯƠNG 1: TỔNG QUÁT VỀ MEAN STACK Để tạo một ứng dụng hoàn chỉnh như một trang web động thật sự thì cần phải có sự kết hợp với các ngôn ngữ phía server và ngôn ngữ thao tác cơ sở dữ liệu. Và MEAN Stack là một sự kết hợp như thế. MEAN stack là sự kết hợp giữa : • MongoDB: Nếu như bạn đã từng sử dụng các hệ cơ sở dữ liệu quan hệ (RDBMS)như MySQL, Oracle DB, MSSQL thì MongoDB lại thuộc trường phái cơ sở dữ liệu phi quan hệ (NoSQL). MongoDB lưu trữ các dữ liệu dưới dạng giống với JSON (JavaScript Object Notation) và gọi tên là BSON (Binary JSON).

• ExpressJS: Là một web application framework cho NodeJS, bạn có thể xây dựng ứng dụng Web bằng cách sử dụng ExpressJS. Tuy nhiên, chúng ta có thể sử dụng sức mạnh của ExpressJS để tạo ra các API một cách nhanh chóng. • Angular: Angular là một javascript framework. Dùng để xây dựng giao diện người dùng(Front-end).

Angular được phát triển bởi Google. AngularJS là từ dùng để nói về Angular 1 ra đời 2009 được viết bằng javascript.Còn Angular được gọi chung là Angular 2 ra đời 2016 được viết bằng TypeScript phiên bản nâng cấp javascript. • NodeJS: Là nền tảng phía server được dựng dựa trên Javascript Engine V8 Engine. Sức mạnh của NodeJS hiện nay được sử dụng ở rất nhiều dự án và công ty nổi tiếng như Uber, NetFlix, Facebook, Google…NodeJS có thể xử lý hàng ngàn kết nối song song – điều mà các web server thông thường không dễ để xử lý được.

MONGODB - Giới thiệu: MongoDB là một trong những cơ sở dữ liệu mã nguồn mở NoSQL phổ biến nhất được biết bằng C++. Tính đến tháng 2/2015, MongoDB được xếp thứ 4 trong số các hệ thống cơ sở dữ liệu phổ biến nhất. MongoDB là một cơ sở dữ liệu NoSQL hỗ trợ đa nền tảng, nó có thể chạy trên Windows, Linux và Mac.Nó hỗ trợ hầu hết các ngôn ngữ lập trình phổ biến như C#, Java, PHP, Javascript.và các môi trường phát triển khác nhau. • JSON document lưu trữ các dữ liệu theo kiểu định dạng “key-value”, ví dụ như : { "Name": "Dat", “Age”: “23” } trong ví dụ trên, " Name " và “Age” là key, " Dat" và “23” là value.

• Có 2 kiểu cấu trúc cơ bản trong JSON là:  Array: Một danh sách chứa các thể hiện của một list các “key-value”.  Dictionaries: Lưu trữ các cặp “key-value”. • MongoDb có cấu trúc Schema động. Một cơ sở dữ liệu NoSQL cho phép chúng ta phát triển ứng dụng mà không cần định nghĩa trước một schema, còn đối với các cơ sở dữ liệu quan hệ khác thì chúng ta cần phải định nghĩa một schema trước khi chúng ta có thể thêm dữ liệu vào hệ thống.

Không có schema được định nghĩa trước cho phép các cơ sở dữ liệu NoSQL dễ dàng cập nhật lại dữ liệu của bạn mỗi khi có yêu cầu thay đổi • MongoDB không hỗ trợ Joins và Transaction. - Trước khi tìm hiểu sâu về MongoDB, ta cùng tìm hiều hệ cơ sở dữ liệu phi quan hệ (NoSQL): Cơ sở dữ liệu NoSQL tên gốc là “Non SQL” (phi SQL) hoặc “non relational” (phi quan hệ). Các cơ sở dữ liệu NoSQL đang được sử dụng ngày càng nhiều trong các ứng dụng dữ liệu lớn. Vậy NoSQL khác gì với hệ cơ sở dữ liệu quan hệ (RDBMS)? Và lý do gì để chúng ta lựa chọn NoSQL cho các dự án hiện tại cũng như sắp tới ? * Các đặc điểm khác biệt giữa MongoDB(NoSQL) và RDBMS như sau: 16 • Mô hình dữ liệu: Một cơ sở dữ liệu NoSQL cho phép chúng ta phát triển ứng dụng mà không cần định nghĩa trước một schema, còn đối với các cơ sở dữ liệu quan hệ khác thì chúng ta cần phải định nghĩa một schema trước khi chúng ta có thể thêm dữ liệu vào hệ thống.

Không có schema được định nghĩa trước cho phép các cơ sở dữ liệu NoSQL dễ dàng cập nhật lại dữ liệu của bạn mỗi khi có yêu cầu thay đổi. • Mô hình cấu trúc: MongoDB lưu dữ liệu theo định dạng JSON, chính vì thế nó có hiệu suất cao, tương tác nhanh và khả năng mở rộng tốt, nó hoạt động trên khái niệm Database=> Collections=> _id và document. RDBMS cung cấp kiểu lưu trữ dữ liệu dưới dạng bảng và các bảng này có quan hệ với nhau và nó hoạt động trên khái niệm Databases=> Tables=> Columns • Mô hình quan hệ: RDBMS query cung cấp JOIN query rất mạnh mẽ. Chúng ta có thể lấy dữ liệu liên quan trong nhiều bảng bằng cách sử dụng một câu lệnh SQL.

Còn NoSQL không trang bị JOIN, chúng ta phải làm bằng tay khi chúng ta code. • Transactions: Trong RDBMS, hai hoặc nhiều record update có thể được thực hiện trong một transaction - đảm bảo tất cả update thành công hoặc nếu một bản update fails thì sẽ rollback lại toàn bộ các record khác. Điều này đảm bảo tính đồng nhất cho dữ liệu. Trong NoSQL, việc sửa đổi một document là riêng lẻ.

Nói cách khác, nếu bạn đang cập nhật ba giá trị trong một document, cả ba đều được cập nhật thành công hoặc nó vẫn không thay đổi. Tuy nhiên, không có transaction tương đương để update cho nhiều document. Có những option tương tụ như transaction. Nhưng chúng phải được xử lý thủ công trong khi viết code.

o Ưu điểm của MongoDB: • Do Mongodb lưu trữ dữ liệu dạng JSON, không có tính ràng buộc về các mối quan hệ và cấu trúc lưu trữ nên khả năng mở rộng rất linh động, tính sẵn sàng cao và tốc độ truy vấn cực nhanh (Nhanh hơn nhiều so với SQL). • Sử dụng bộ nhớ nội tại(RAM) để lưu giữ phần công việc, hạn chế truy cập vào ổ cứng nên truy vấn sẽ rất nhanh. • Dữ liệu không đồng nhất ,Khả năng mở rông cao 17 o Nhược điểm của MongoDB: • Điều đầu tiên phải kể đến ở đây là MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với MongoDB thì phải hết sức cẩn thận vì rất dễ sai sót. Không ứng dụng được cho các mô hình giao dịch yêu cầu độ chính xác cao.

• Vì không hỗ trợ join giống như RDBMS nên khi viết function join trong code ta phải làm bằng tay. • Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao. EXPRESSJS * Expressjs là một Framework của Nodejs, nhưng linh hoạt đượ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.

Express 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. Express hỗ trợ các phương thức HTTP và middleware tạo ra 1 API rất mạnh mẽ và sử dụng dễ dàng hơn. * Các tính năng của Express framework phải kể đến như: • Cho phép thiết lập các lớp trung gian để trả về các HTTP request. • Định nghĩa 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. • Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên các bạn không phải lo lắng khi làm việc với Framework này. • Express hỗ trợ các phương thức HTTP và middleware để tạo ra API một cách dễ dàng, nhanh chóng và rất mạnh mẽ. • Về hiệu năng thì Express rất tối ưu vì Express cung cấp một layer bao gồm các tính năng cơ bản của ứng dụng web và không hề tác động đến các tính năng của Node.

18 * Cấu trúc của ExpressJS Hình 1.1: Cấu trúc Express • 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. • Routes: chứa các route có trong ứng dụng • Views: chứa view/template cho ứng dụng • Public: chứa các file css, js, images,.cho ứng dụng. ANGULAR • Angular là một Javascript frameword dùng để viết giao diện web (Front- end),được phát triển bởi google.

• Angular 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. * Các tính năng cốt lõi của Angular: - Angular Module: Angular bao gồm một số các khối như Component, Service và Directive. Chúng ta tạo ra nhiều block để phát triển ứng dụng lớn dần. Angular đưa ra một cách tốt để tổ chức các khối này sử dụng một khái niệm gọi là Angular Module.

19 Chúng ta tạo ra các component, service, và directive sau đó đặt chúng trong Angular Module. Chúng ta sử dụng một directive đặc biệt gọi là @NgModule để tạo module. Angular Module cũng được gọi là NgModule. Sử dụng Angular Module (hoặc ngModule) để tổ chức code ứng dụng Angular với một ứng dụng Angular lớn hơn.

Ứng dụng sẽ gộp lại bởi nhiều Angular Module. Mỗi Module triển khai một tính năng cụ thể voặc các tính năng của ứng dụng. - Component: Angular Component là một class nó được bổ trợ bởi @Component decorator. Component điều khiển một phần của UI.

- Template: Component cần một view để hiển thị. Template định nghĩa view. Template chỉ là một tập con của HTML, nó chỉ cho Angular biết làm sao để hiển thị view. Nó là một trang HTML chuẩn sử dụng các thẻ H1, H2.Nó cũng sử dụng các lệnh của Angular như {}, [].

- Diective: Directive giúp chúng ta thao tác với View. Một directive là một class, chúng ta tạo ra sử dụng @Directive nó chứa metadata và logic thao tác trên DOM. View được tạo ra bởi Angular sử dụng template metadata được định nghĩa trong Component. Các template là động và được chuyển đổi sử dụng directive.

- Service : Service cung cấp dịch vụ cho các Components hoặc các service khác. Angular không có bất cứ đặc tả nào cho Service nó chỉ là các class có export method và chứa một số task. Bạn không cần làm gì cả. * Ưu điểm của Angular: - Tốc độ và hiệu suất: Đạt được tốc độ tối đa có thể có trên Nền tảng Web hiện nay và tiếp tục thực hiện nó thông qua Công việc Web và hiển thị phía máy chủ.

Angular giúp bạn kiểm soát khả năng mở rộng. Đáp ứng các yêu cầu dữ liệu lớn bằng cách xây dựng các mô hình dữ liệu trên RxJS, Immutable.js hoặc một mô hình đẩy khác. - Công cụ đáng kinh ngạc: Xây dựng các tính năng nhanh chóng với các mẫu đơn giản, khai báo. Mở rộng ngôn ngữ mẫu với các thành phần của riêng bạn và sử dụng một mảng rộng các thành phần hiện có.

Nhận trợ giúp và phản hồi cụ thể theo góc cạnh với hầu hết mọi IDE và trình chỉnh sửa.