Đồ án xây dựng website bán đồng hồ tích hợp hệ thống gợi ý sản phẩm

GIỚI THIỆU CHUNG

Giới thiệu đề tài

Website bán đồng hồ với hệ thống gợi ý là một ý tưởng hấp dẫn trong thương mại điện tử, cung cấp đa dạng sản phẩm từ nhiều thương hiệu, kiểu dáng và mức giá khác nhau Hệ thống gợi ý đóng vai trò quan trọng, hỗ trợ khách hàng tìm kiếm và lựa chọn sản phẩm phù hợp với nhu cầu và sở thích cá nhân Bằng cách dựa trên sự tương đồng giữa các sản phẩm như chất liệu và mô tả, hệ thống này giúp khách hàng dễ dàng hơn trong việc đưa ra quyết định mua sắm.

Lý do chọn đề tài

Trong thời đại số hiện nay, Internet đóng vai trò quan trọng trong việc truyền tải và trao đổi thông tin toàn cầu Thương mại điện tử đã trở thành công cụ thiết yếu để thúc đẩy hoạt động kinh doanh của các doanh nghiệp Đối với các cửa hàng, việc quảng bá sản phẩm mới để đáp ứng nhu cầu khách hàng là rất cần thiết Do đó, tôi đã quyết định xây dựng hệ thống bán đồng tích hợp với hệ thống gợi ý sản phẩm mang tên Luxe Watch, nhằm giới thiệu và cung cấp các loại đồng hồ sang trọng có sẵn trên thị trường Khách hàng có thể đặt hàng trực tiếp trên website mà không cần đến cửa hàng, giúp tiết kiệm thời gian và tạo sự chủ động cho họ.

Mục tiêu trong đề tài

- Nghiên cứu một số thuật toán có trong hệ thống gợi ý

- Xây dựng website bán đồng hồ cùng hệ thống gợi ý sản phẩm cho khách hàng

- Xây dựng được hệ thống quản lý bán hàng đảm bảo thực hiện được đầy đủ các chức năng cơ bản của một website bán hàng

- Giải quyết tối ưu hóa quá trình mua bán qua mạng phù hợp với thực tiễn

- Đưa ra các báo cáo, thống kê tổng hợp

- Tìm hiểu và ứng dụng các công nghệ mới, nâng cao kỹ năng phát triển phần mềm

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

1.4.1 Các công nghệ o Front-end: HTML-CSS, Template Handlebars o Backend: NodeJS o Database: MongoDB, Cloudinary o Hệ thống gợi ý dựa theo nội dung (Content-based recommendation systems)

1.4.2 Đối tượng phạm vi đề tài hướng đến o Các cửa hàng muốn có một website bán đồng hồ o Khách hàng muốn mua sản phẩm trực tuyến

Phạm vi

Đề tài này tập trung vào việc phát triển một hệ thống website dành cho những người tiêu dùng có nhu cầu mua đồng hồ với thương hiệu uy tín và rõ ràng.

- Áp dụng tại các cửa hàng bán đồng hồ muốn có website bán đồng hồ trực tuyến

- Người dùng có điện thoại hoặc laptop có internet là có thể truy cập.

Phương pháp thực hiện

- Tìm hiểu và phân tích quy trình tìm kiếm, mua bán sản phẩm tại các website bán đồng hồ

- Phân tích các giải pháp của các sản phẩm tương tự trên thị trường

- Xây dựng chức năng ở mức MVP (Minimum Viable Product) để đo lường tính hiệu quả.

Ý nghĩa thực tiễn

- Việc tìm kiếm sản phẩm ưng ý dễ dàng hơn cho khách hàng

- Khách hàng có một nơi để mua sản phẩm đồng hồ chất lượng

- Người quản trị có thể dễ dàng quản lý các sản phẩm có trong cửa hàng

Kết quả dự kiến

- Hiểu rõ các công nghệ mới: o Front – end: HTML-CSS, Template Engine o Back – end: NodeJS, ExpressJS, Cloudinary, Google API, Hệ thống gợi ý dựa theo nội dung sản phẩm

- Hoàn thành sản phẩm với các chức năng đã được trình bày

- Giao diện thân thiện và tạo ra được những giá trị của mục tiêu hướng tới.

CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ SỬ DỤNG

Hệ thống gợi ý dựa theo nội dung

Hệ thống gợi ý dựa theo nội dung (Content-based recommendation systems) là một công cụ sử dụng các đặc trưng của sản phẩm hoặc người dùng để đưa ra gợi ý phù hợp Chẳng hạn, một hệ thống gợi ý phim có thể dựa vào thể loại, diễn viên, đạo diễn, năm sản xuất và đánh giá để tìm những bộ phim tương tự với sở thích của người dùng Lợi thế của hệ thống này là không cần nhiều dữ liệu về hành vi người dùng và có khả năng giải thích lý do gợi ý Hệ thống sẽ so sánh các thuộc tính của sản phẩm với những mục chưa được tương tác và đưa ra những gợi ý có độ tương đồng cao nhất.

Mô hình này hoạt động mà không cần dữ liệu từ người dùng khác, vì các đề xuất được cá nhân hóa cho từng người dùng riêng biệt Điều này giúp việc mở rộng cho một lượng lớn người dùng trở nên dễ dàng hơn.

Mô hình này có khả năng nắm bắt sở thích cụ thể của người dùng, từ đó đề xuất các mặt hàng phù hợp với niềm yêu thích mà ít người dùng khác quan tâm.

Kỹ thuật biểu diễn tính năng của các mặt hàng thiết kế bằng tay đòi hỏi kiến thức sâu rộng về lĩnh vực này Do đó, chất lượng của mô hình phụ thuộc vào tính năng được thiết kế một cách tỉ mỉ và chuyên nghiệp.

Mô hình chỉ có thể đưa ra các đề xuất dựa trên sở thích hiện tại của người dùng, điều này có nghĩa là nó chỉ có khả năng mở rộng những sở thích này mà không thể tạo ra những sở thích mới.

Để hoạt động hiệu quả trong đồ án này, hệ thống sẽ đưa ra gợi ý dựa trên nội dung của sản phẩm mà khách hàng đã xem, do đó cần kết hợp các thuật toán liên quan để tối ưu hóa trải nghiệm người dùng.

2.1.2.1 Tiền xử lý văn bản(Content Preprocessing)

Các bước tiền xử lý văn bản:

Biến đổi chữ thường là quá trình chuyển đổi tất cả các chữ in hoa thành chữ thường, giúp đơn giản hóa dữ liệu văn bản Phương pháp này không chỉ dễ thực hiện mà còn rất hiệu quả trong việc tiền xử lý dữ liệu, đặc biệt là với các bộ dữ liệu nhỏ.

Tách các câu từ một đoạn văn bản giúp thu được các câu thành phần Để nhận biết một câu, ta có thể dựa vào dấu "." kết thúc câu Việc tách câu diễn ra mỗi khi gặp dấu ".".

Để xây dựng bộ từ vựng hiệu quả, cần loại bỏ các ký tự đặc biệt như dấu hỏi, dấu chấm than, dấu ngoặc kép và dấu chấm phẩy trong các câu văn bản.

Loại bỏ stop-word là một bước quan trọng trong xử lý ngôn ngữ tự nhiên, giúp giảm kích thước bộ từ vựng bằng cách loại bỏ những từ không đóng góp nhiều vào ý nghĩa câu Các stop-word thường gặp trong tiếng Anh bao gồm "the", "is", "at", "on", "which", "in", "some", "many", trong khi tiếng Việt có thể là "cái", "các", "cả" Việc này giúp tối ưu hóa hiệu suất và độ chính xác của các mô hình ngôn ngữ.

Để tối ưu hóa dữ liệu trong các bài toán xử lý ngôn ngữ, việc loại bỏ các từ hiếm gặp là cần thiết, đặc biệt khi làm việc với bộ dữ liệu lớn Tuy nhiên, cần cân nhắc kỹ lưỡng trước khi áp dụng kỹ thuật này, vì việc loại bỏ có thể dẫn đến mất mát ngữ nghĩa, nhất là trong các bộ dữ liệu trung bình và nhỏ.

Stemming là quá trình loại bỏ phần cuối của từ để đưa về dạng gốc, không nhất thiết phải là từ điển Ví dụ, từ "send" và "sending" đều thuộc về gốc "send" Thuật toán Porter’s Stemmer, được phát triển vào năm 1980, là một trong những phương pháp tạo gốc phổ biến nhất, dựa trên việc phân tích các hậu tố trong tiếng Anh Nó nổi bật nhờ tốc độ và sự đơn giản, thường được áp dụng trong khai thác dữ liệu và truy xuất thông tin, mặc dù chỉ giới hạn cho từ tiếng Anh Đáng lưu ý, gốc đầu ra không nhất thiết phải là từ có nghĩa và thuật toán này được xem là một trong những phương pháp gốc lâu đời nhất.

TF-IDF, viết tắt của "term frequency – inverse document frequency", là một chỉ số thống kê thể hiện mức độ quan trọng của một từ trong văn bản Chỉ số này được tính toán dựa trên tần suất xuất hiện của từ đó trong văn bản và tần suất xuất hiện của nó trong toàn bộ tập hợp văn bản.

- Thuật toán này thường được sử dụng vì: trong ngôn ngữ luôn có những từ xảy ra thường xuyên với các từ khác

Trong bất kỳ ngôn ngữ nào, luôn tồn tại một tập hợp các từ có tần suất xuất hiện cao hơn so với các từ khác Do đó, cần áp dụng một phương pháp để làm mịn đường cong tần suất từ, nhằm cân bằng mức độ quan trọng giữa các từ.

- Cách tính trọng số tf-idf:

Tf-term frequency là một chỉ số dùng để ước lượng tần suất xuất hiện của từ trong văn bản Do mỗi văn bản có độ dài khác nhau, số lần xuất hiện của từ có thể khác nhau Để có được tần suất chính xác, số lần xuất hiện của từ sẽ được chia cho tổng số từ trong văn bản đó.

TF(t, d) = ( số lần từ t xuất hiện trong văn bản d) / (tổng số từ trong văn bản d)

Mô hình ứng dụng web MVC

2.2.1 Giới thiệu mô hình ứng dụng web MVC

Mô hình Model-View-Controller (MVC) là một kiến trúc phân tách ứng dụng thành ba thành phần chính: Model, View và Controller Mỗi thành phần này được thiết kế để xử lý các khía cạnh phát triển cụ thể của ứng dụng, giúp tách biệt logic nghiệp vụ và lớp hiển thị Việc áp dụng MVC mang lại sự rõ ràng và dễ quản lý cho quá trình phát triển phần mềm.

2.2.2 Các đặc trưng của mô hình MVC

Mô hình MVC là kiến trúc phổ biến trong lập trình web, cho phép phân chia ứng dụng thành ba thành phần chính: Model, View và Controller, giúp cải thiện cấu trúc và quản lý mã nguồn hiệu quả hơn.

- Model: là thành phần đại diện cho dữ liệu và logic nghiệp vụ của ứng dụng

Model có thể kết nối với cơ sở dữ liệu, xử lý các yêu cầu và trả về kết quả

View là thành phần chính trong việc hiển thị giao diện người dùng và tương tác với họ Nó có thể bao gồm các đối tượng giao diện như textbox, button và hình ảnh Ngoài ra, View còn có khả năng nhận sự kiện từ người dùng và chuyển tiếp đến Controller.

Controller là thành phần chủ chốt trong việc điều khiển luồng xử lý của ứng dụng Nó nhận yêu cầu từ View, tương tác với Model để xử lý dữ liệu và cuối cùng trả kết quả về View để hiển thị cho người dùng.

Mô hình MVC giúp tăng tính tái sử dụng, bảo trì và mở rộng của mã nguồn, cũng như giảm sự phụ thuộc giữa các thành phần

2.2.3 Lý do chọn mô hình MVC cho đề tài

Hệ thống MVC được phát triển hiệu quả cho phép việc phát triển front-end và back-end diễn ra đồng thời mà không cần can thiệp, chia sẻ hay chỉnh sửa các tập tin trong quá trình làm việc của một hoặc hai bên.

Việc triển khai mô hình này rất đơn giản, chỉ cần nắm rõ quy trình vận hành và hiểu các chức năng của từng bộ phận.

MVC tương đối dễ dàng.

Server-Side Rendering

2.3.1 Giới thiệu về Server-Side Rendering

Server side là một kỹ thuật quan trọng trong phát triển website, cho phép máy chủ tùy chỉnh nội dung theo yêu cầu của người sử dụng Nó không chỉ đảm bảo hiển thị chính xác các tập tin của website mà còn cung cấp phản hồi về các tùy chỉnh mà người truy cập thực hiện, từ đó nâng cao trải nghiệm người dùng.

Server-side rendering là một cơ chế lâu đời, trong đó hầu hết các xử lý logic diễn ra trên máy chủ Máy chủ thực hiện các thao tác với cơ sở dữ liệu để chuyển đổi thành HTML, sau đó gửi phản hồi về cho khách hàng Trình duyệt của khách hàng chỉ hiển thị HTML đã được xử lý này.

2.3.2 Các đặc trưng của Server-Side Rendering

Server-side rendering là cơ chế đã được sử dụng từ rất lâu Gọi nó là server-side rendering là vì phần lớn logic sẽ được xử lý ở server:

• Khi người dùng vào một trang web, trình duyệt sẽ gửi GET request tới web server

• Web server sẽ nhận request, đọc dữ liệu từ database

• Web server sẽ render HTML, trả về cho browser để hiển thị cho người dùng

2.3.3 Lý do chọn Server-Side Rendering cho đề tài

"Server-Side Rendering (SSR) tuy đã xuất hiện từ lâu nhưng vẫn không lỗi thời nhờ vào những ưu điểm vượt trội so với các phương pháp khác, bao gồm khả năng tối ưu hóa SEO tốt hơn, cải thiện tốc độ tải trang và mang lại trải nghiệm người dùng mượt mà hơn."

Tốc độ tải ban đầu nhanh chóng và dễ dàng điều chỉnh nhờ vào việc xử lý tất cả dữ liệu trên máy chủ, trong khi máy khách chỉ cần hiển thị lại thông tin đã được diễn giải.

• Phần lớn các web framework đều hỗ trợ cơ chế Server-Side Rendering

Lập trình viên hiện nay có thể dễ dàng hơn trong việc viết mã, khi họ chỉ cần tập trung vào việc phát triển một dự án web mà không cần phải phân chia giữa front-end và back-end.

Hỗ trợ mạnh mẽ cho SEO, vì khi toàn bộ dữ liệu của website được trình bày dưới dạng HTML, nó sẽ được các công cụ tìm kiếm như Google và Bing đánh giá cao.

• Chạy được trên các trình duyệt, bao gồm cả disable JavaScript.

NodeJS

V8 engine là một JavaScript engine mã nguồn mở, hoạt động trên các trình duyệt như Chrome, Opera và Vivaldi, với mục tiêu tối ưu hóa hiệu suất bằng cách chuyển đổi mã JavaScript thành mã máy Cần lưu ý rằng Node.js không chạy trên trình duyệt mà dựa trên V8 engine, bổ sung các tính năng như file system API, thư viện HTTP và các phương thức liên quan đến hệ điều hành Điều này cho thấy Node.js là một môi trường thực thi JavaScript, cho phép chạy mã JavaScript trên máy tính.

2.4.2 Các đặc trưng của NodeJS

Module trong Node.js tương tự như các thư viện JavaScript, bao gồm một tập hợp các chức năng Để tích hợp một module vào ứng dụng Node.js, bạn cần sử dụng hàm require() với tên module được đặt trong dấu ngoặc đơn.

Node.js được phát triển dựa trên mô hình lập trình đơn luồng, nhưng với module Cluster, nó cho phép thực hiện đa luồng bằng cách tạo ra các quy trình con chia sẻ cùng một cổng máy chủ và hoạt động song song.

Trong Node.js, biến toàn cục có mặt trong tất cả các module và bao gồm nhiều loại như hàm, module, chuỗi, v.v Một số biến toàn cục quan trọng trong Node.js có thể được liệt kê như sau:

Xử lý lỗi trong Node.js được thực hiện thông qua các exception, ví dụ như khi xảy ra lỗi chia cho 0 Nếu không được xử lý, lỗi này có thể khiến ứng dụng Node.js bị sập, do đó việc quản lý lỗi là cần thiết để đảm bảo ứng dụng hoạt động ổn định.

Streaming: Stream là các đối tượng cho phép bạn đọc và viết dữ liệu một cách liên tục Có 4 loại stream như sau:

• Readable: Là loại stream mà từ đó dữ liệu có thể đọc được

• Writable: Là loại stream mà dữ liệu có thể được viết lên đó

• Duplex: Là loại stream có thể đọc và viết được

• Transform: Là loại stream có thể thao tác dữ liệu trong khi nó đang được đọc hoặc viết

Buffer: Bộ đệm là một module cho phép xử lý các stream chỉ chứa các dữ liệu dạng nhị phân

Domain: Domain module sẽ chặn các lỗi chưa được xử lý Hai phương thức được dùng để chặn lỗi đó là:

• Internal Binding: Error emitter thực thi code trong phương thức run

• External Binding: Error emitter được thêm thẳng vào domain qua phương thức add của nó

DNS: DNS module được sử dụng để kết nối đến một máy chủ DNS và thực hiện phân giải tên miền

Node.js cung cấp một chức năng gỡ lỗi tích hợp sẵn, cho phép người dùng sử dụng client gỡ lỗi Mặc dù trình gỡ lỗi của Node.js không có nhiều tính năng nâng cao, nó vẫn hỗ trợ các chức năng kiểm tra mã cơ bản Để sử dụng trình gỡ lỗi, người dùng có thể nhập từ khóa 'inspect' trước tên file JavaScript trong bảng lệnh.

2.4.3 Lý do chọn NodeJS cho đề tài

Node.js nổi bật với khả năng mở rộng linh hoạt, cho phép các ứng dụng mở rộng theo chiều dọc và chiều ngang Quy mô theo chiều dọc giúp thêm tài nguyên vào các nút hiện tại, trong khi quy mô theo chiều ngang cho phép nhanh chóng bổ sung các nút mới Hơn nữa, Node.js không yêu cầu khối lượng lớn trong quá trình phát triển, vì nó hoạt động hiệu quả với các microservices và mô-đun Điều này làm cho Node.js trở thành lựa chọn lý tưởng cho các công ty khởi nghiệp đang tìm kiếm sự phát triển nhanh chóng và dễ dàng.

Node.js mang lại hiệu suất cao nhờ vào việc chạy trên công cụ Google V8 JS, cho phép mã Javascript được biên dịch trực tiếp thành mã máy Điều này không chỉ giúp tiết kiệm tài nguyên mà còn tăng tốc độ hoạt động của khung Google đã đầu tư mạnh mẽ vào công cụ tìm kiếm của mình để cải thiện hiệu suất một cách liên tục.

Node.js Foundation, được thành lập vào năm 2015, là một tổ chức quy tụ nhiều nhà sáng lập từ các công ty hàng đầu như IBM, Microsoft, Fidelity và SAP Cộng đồng Node.js không ngừng phát triển với sự đóng góp tích cực từ hàng triệu nhà phát triển phần mềm và người hâm mộ, nhằm hỗ trợ lẫn nhau Hơn nữa, Node.js được hỗ trợ trên Github, giúp việc phát triển và duy trì framework trở nên dễ dàng và nhanh chóng.

Node.js giúp tăng tốc độ phát triển ứng dụng web nhờ vào các công cụ nhẹ và đa dạng Sổ đăng ký npm cung cấp nhiều giải pháp, mô-đun và thư viện, cho phép các nhà phát triển tạo ra ứng dụng web hiệu quả hơn với ít nỗ lực hơn Bằng cách sử dụng các thư viện của npm, Node.js giúp giảm lỗi và kích thước ứng dụng thông qua các mẫu tái sử dụng, từ đó rút ngắn thời gian đưa sản phẩm ra thị trường.

Node.js cho phép các nhà phát triển tự do phát triển ứng dụng đa nền tảng, nhờ vào các khuôn khổ như Electron và NW.js Điều này giúp tạo ra các ứng dụng web tương thích với máy tính để bàn, thiết bị di động và các hệ điều hành như Mac, Windows và Linux Ngoài ra, Node.js cũng ngày càng được ưa chuộng trong các giải pháp IoT, làm cho nó trở thành lựa chọn tối ưu để nâng cao hiệu suất và khả năng mã hóa của đội ngũ phát triển.

Node.js là một ngôn ngữ lập trình đơn giản, cung cấp sự tương thích giữa Javascript ở cả front-end và back-end Nó mang lại khả năng tiếp cận dễ dàng và tính linh hoạt cao cho người dùng.

Node.js mang lại sức mạnh và sự liền mạch cho toàn bộ quy trình phát triển ứng dụng web, giúp các nhà phát triển và doanh nghiệp tiết kiệm thời gian, năng lượng và tài nguyên Nhờ vào khả năng tối ưu hóa giờ làm việc, Node.js trở thành công nghệ phát triển ứng dụng web được ưa chuộng nhất trên thị trường hiện nay.

Node.js đã khẳng định vị thế của mình trong hệ sinh thái Fullstack và MEANstack, đóng vai trò quan trọng nhờ vào việc sử dụng Javascript, ngôn ngữ lập trình hàng đầu Là một công cụ độc lập, Node.js cung cấp nhiều lợi ích cho ngăn xếp công nghệ, bao gồm thư viện mô-đun JSON Với hơn 368 triệu lượt tải xuống, tương đương với trung bình 1 triệu lượt tải mỗi ngày, Node.js đã trở thành một yếu tố không thể thiếu trong nhiều hệ sinh thái công nghệ.

Node.js mang đến một hệ sinh thái phong phú với npm, nơi có tới 836.000 thư viện và hơn 10.000 gói được xuất bản mỗi tuần Với hơn 475.000 gói và đăng ký sẵn có cùng với 11.000 công cụ mới được giới thiệu hàng tuần, npm giúp giảm đáng kể thời gian và chi phí trong quá trình phát triển và đưa sản phẩm ra thị trường.

ExpressJS

Express.js, còn được gọi là Express js hoặc Express js, là một framework mã nguồn mở miễn phí dành cho Node.js, giúp thiết kế và xây dựng ứng dụng web một cách nhanh chóng và dễ dàng.

Express.js, với yêu cầu duy nhất là ngôn ngữ lập trình JavaScript, giúp lập trình viên dễ dàng xây dựng ứng dụng web và API Là một khuôn khổ của Node.js, Express.js cung cấp nhiều mã code sẵn có, hỗ trợ tối đa cho các nhà phát triển trong quá trình làm việc.

2.5.2 Các đặc trưng của ExpressJS Định tuyến (Routing): ExpressJS cung cấp một hệ thống định tuyến mạnh mẽ, cho phép bạn xác định các tuyến đường (routes) để xử lý yêu cầu từ người dùng và phản hồi tương ứng Điều này giúp tổ chức và quản lý các thành phần của ứng dụng một cách dễ dàng

Middleware trong ExpressJS cho phép tích hợp các chức năng trung gian vào quy trình xử lý yêu cầu và phản hồi Nó hỗ trợ xác thực người dùng, ghi log, xử lý lỗi, nén dữ liệu và thực hiện nhiều tác vụ khác một cách linh hoạt, nâng cao hiệu quả của ứng dụng.

ExpressJS cho phép cấu hình môi trường phát triển và sản xuất một cách linh hoạt Bạn có thể thiết lập biến môi trường, điều chỉnh định dạng và quy tắc, từ đó tùy chỉnh ứng dụng của mình phù hợp với từng môi trường khác nhau.

ExpressJS cung cấp cơ chế xử lý lỗi giúp bạn kiểm soát và xử lý các lỗi phát sinh trong quá trình xử lý yêu cầu Bạn có thể tạo middleware để xử lý lỗi và gửi phản hồi với thông báo lỗi tùy chỉnh.

2.5.3 Lý do chọn ExpressJS cho đề tài

• Đơn giản và dễ sử dụng: ExpressJS có cú pháp đơn giản và dễ hiểu, giúp lập trình viên dễ dàng nắm bắt và triển khai các tính năng

• Linh hoạt: ExpressJS không áp đặt một cấu trúc cụ thể, cho phép lập trình viên tự do tùy chỉnh và xây dựng ứng dụng theo ý muốn

ExpressJS cung cấp một hệ thống middleware mạnh mẽ, cho phép thực hiện linh hoạt các chức năng như xác thực, ghi log, nén dữ liệu và xử lý lỗi một cách dễ dàng.

ExpressJS, được phát triển trên nền tảng Node.js, mang lại hiệu suất cao với khả năng xử lý nhanh chóng nhiều yêu cầu web đồng thời và khả năng mở rộng tốt.

MongoDB

MongoDB was first introduced by MongoDB Inc in October 2007 as part of the 10th generation of technology, functioning as a Platform as a Service (PaaS) similar to Windows Azure and Google App Engine It transitioned to open-source in 2009.

MongoDB là một phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, hỗ trợ đa nền tảng và được thiết kế theo hướng đối tượng Với cấu trúc linh hoạt của các collection, dữ liệu trong MongoDB không cần tuân theo một dạng cấu trúc cố định nào Là một database hướng tài liệu, MongoDB tránh xa cấu trúc table-based của các cơ sở dữ liệu quan hệ, thay vào đó sử dụng định dạng tài liệu JSON với schema linh hoạt gọi là BSON Nhờ việc lưu trữ dữ liệu dưới dạng Document JSON, mỗi collection có thể chứa các kích cỡ và tài liệu khác nhau, giúp truy vấn dữ liệu diễn ra nhanh chóng.

2.6.2 Các đặc trưng của MongoDB

NoSQL (Non-Relational SQL) là một loại cơ sở dữ liệu mã nguồn mở, phát triển như một giải pháp tiên tiến hơn về tốc độ và tính năng so với hệ quản trị cơ sở dữ liệu quan hệ RDBMS Với kiểu dữ liệu JSON, NoSQL sử dụng cấu trúc key-value, mang lại hiệu suất nhanh và khả năng mở rộng linh hoạt mà không bị ràng buộc bởi các khóa ngoại hay khóa chính, vì vậy nó ngày càng được ưa chuộng và sử dụng rộng rãi.

- Truy vấn ad hoc: hỗ trợ search bằng field, các phép search thông thường, regular expression searches, và range queries

- Indexing: bất kì field nào trong BSON document cũng có thể được index

Replication có nghĩa là "nhân bản", tức là tạo ra một phiên bản giống hệt với phiên bản hiện tại Trong bối cảnh cơ sở dữ liệu, nhu cầu lưu trữ lớn và yêu cầu về tính toàn vẹn của dữ liệu rất cao, nhằm đảm bảo không bị mất mát trước những sự cố không lường trước.

Khái niệm “nhân bản” được phát triển nhằm tạo ra một phiên bản cơ sở dữ liệu giống hệt với cơ sở dữ liệu hiện tại, và lưu trữ ở một vị trí khác để phòng ngừa các sự cố có thể xảy ra.

Các phép toán Aggregation trong MongoDB xử lý dữ liệu bằng cách nhóm các bản ghi và trả về kết quả đã được tính toán Tương tự như trong SQL, các phép toán như count(*) và GROUP BY thực hiện chức năng tương tự, cho phép tổng hợp nhiều giá trị từ nhiều Document khác nhau để tạo ra một kết quả duy nhất.

- Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding

- JavaScript thường được thực thi trong các truy vấn, các hàm tổng hợp và được gửi trực tiếp đến cơ sở dữ liệu

MongoDB hỗ trợ collection giới hạn với kích thước cố định, giúp tối ưu hóa hiệu suất cho các hoạt động liên quan đến dữ liệu Khi dữ liệu vượt quá giới hạn này, các tài liệu cũ sẽ tự động bị xóa mà không cần sử dụng lệnh nào.

2.6.3 Lý do chọn MongoDB cho đề tài

- MongoDB là một cơ sở dữ liệu NoSQL phổ biến, linh hoạt và hiệu năng cao

- MongoDB cho phép lưu trữ và truy vấn dữ liệu dưới dạng tài liệu JSON, không cần định nghĩa cấu trúc trước

- MongoDB hỗ trợ các tính năng như chỉ mục, tìm kiếm văn bản, phân loại, nhóm, tổng hợp và giao dịch đa tài liệu

MongoDB hỗ trợ mở rộng theo chiều ngang thông qua sharding, giúp phân tán dữ liệu trên nhiều máy chủ, từ đó nâng cao khả năng chịu lỗi và hiệu suất xử lý.

- MongoDB có một cộng đồng lớn và hoạt động, cung cấp nhiều tài nguyên học tập, hỗ trợ kỹ thuật và công cụ phát triển.

Cloudinary

Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình ảnh bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery

Với Cloudinary, bạn có thể dễ dàng tải ảnh lên đám mây và thực hiện các thao tác thông minh với ảnh mà không cần cài đặt phần mềm phức tạp Cloudinary cung cấp các API toàn diện và giao diện quản lý, giúp việc tích hợp vào website và ứng dụng di động trở nên đơn giản hơn.

2.7.2 Các đặc trưng của cloudinary

• Xây dựng các URL để chuyển đổi và thao tác với hình ảnh

• Rails view helper cho việc nhúng và thay đổi hình ảnh

• API wrappers: upload image, quản lý và nhiều thứ khác

• Upload image trực tiếp từ trình duyệt sử dụng một jQuery plugin

• Tích hợp với Active Record

• Hình ảnh tĩnh đồng bộ với CDN delivery

2.7.3 Lý do lựa cọn Cloudianry

- Tốc độ CDN ổn định

Có nhiều tùy chọn nén ảnh hiệu quả mà không làm giảm chất lượng hình ảnh Điều này khác biệt so với các CDN miễn phí khác, như Jetpack, thường làm ảnh hưởng đến chất lượng ảnh dù chỉ một chút.

- Miễn phí 25GB CDN hoặc 25000 lượt chuyển đổi, 25 GB lưu trữ

- Thao tác cài đặt tương đối đơn giản.

Bootstrap 5

Bootstrap là một framework front-end miễn phí, giúp người dùng phát triển website nhanh chóng và dễ dàng Nó bao gồm các mẫu thiết kế HTML và CSS cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, hình ảnh, cùng với các plugin JavaScript tùy chọn Ngoài ra, Bootstrap còn cho phép tạo ra các thiết kế website responsive một cách dễ dàng.

2.8.2 Lý do lựa chọn Bootstrap 5

- Dễ sử dụng: Bất cứ ai chỉ cần có kiến thức cơ bản về HTML và CSS đều có thể sử dụng Bootstrap

Tính năng Responsive của Bootstrap cho phép website tự động điều chỉnh giao diện phù hợp với các kích thước màn hình khác nhau, bao gồm điện thoại, máy tính bảng và máy tính để bàn.

- Phương pháp ưu tiên thiết bị di động: Trong Bootstrap, các style ưu tiên thiết bị di động (mobile-first) là một phần framework cốt lõi

- Tương thích trình duyệt: Bootstrap 5 tương thích với tất cả các trình duyệt phổ biến hiện nay: Chrome, Firefox, Edge, Safari và Opera.

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

Phân tích yêu cầu hệ thống

- Đăng ký, đăng nhập bằng gmail google

- Khách hàng có thể tìm kiếm sản phẩm phù hợp và nhanh chóng

- Khách hàng có thể thêm sản phẩm vào giỏ hàng và tạo đơn đặt hàng

- • Quản lý có thể quản lý sản phẩm

- • Quản lý có thể quản lý loại sản phẩm

- • Quản lý có thể quản lý thương hiệu sản phẩm

- • Quản lý có thể quản lý thông tin vận chuyển

- Admin có thể quản lý sản phẩm

- Admin có thể quản lý thương hiệu sản phẩm

- Admin có thể quản lý tag

- Admin có thể quản lý danh mục sản phẩm

- Admin có thể quản lý đơn nhập hàng

- Admin có thể quản lý đơn bán hang

- Admin có thể quản lý tài khoản khách hang

- Admin có thể xem báo cáo thông kê thu chi

3.1.2 Sơ đồ phân rã chức năng

3.1.3 Phân tích yêu cầu phi chức năng Ứng dụng sử dụng tiếng Anh, hoạt động ổn định trên nền tảng website Để thu hút được người dùng hứng thú sử dụng, các thao tác trên ứng dụng phải thật đơn giản Giao diện thân thiện, giúp khách hang và người quản lý nhận thức được giá trị nhận lại khi sử dụng hệ thống

3.1.4 Mô hình hóa các yêu cầu

STT Tên Actor Ý nghĩa/Ghi chú

1 Khách hàng Người truy cập trang web để mua hàng

2 Quản trị viên (Admin) Quản lý danh mục, thương hiệu, tag, đơn hang, xem thống kê thu chi

3.1.4.2 Danh sách các Use case

STT Actor Tên Use-case Chức năng

Admin Đăng nhập Cho phép admin, khách hàng đăng nhập vào trang web UC_2 Khách hàng Xem sản phẩm Xem, thêm sản phẩm vào giỏ hàng

UC_3 Khách hàng Tìm kiếm sản phẩm

Tìm kiếm theo ký tự, theo thương hiệu, tag, danh mục sản phẩm UC_4 Khách hàng Quản lý giỏ hàng Xem, cập nhật, xóa

UC_5 Admin Quản lý danh mục Thêm, cập nhật, xóa

UC_6 Admin Quản lý thương hiệu Thêm, cập nhật, xóa

UC_7 Admin Quản lý tag Xóa

UC_8 Admin Quản lý sản phẩm

Xem, sửa, xóa đơn nhập Tạo tag mới

UC_9 Admin Quản lý đơn nhập hàng Thêm, sửa, xóa đơn nhập sản phẩm

UC_10 Admin Quản lý đơn bán hàng

Xem, xóa, chỉnh sửa trạng thái đơn bán hàng

UC_11 Admin Báo cáo, thông kê Xem thống kê thu chi của cửa hàng

3.1.4.3 Sơ đồ use case tổng

3.1.5.1 UC_1 “Đăng nhập” a Đăng nhập

Tên use case Đăng nhập

Mục đích Đăng nhập vào trang web Điều kiện trước

Tài khoản gmail admin đã tồn tại Điều kiện sau

Người dùng sử dụng chức năng của tài khoản

B1: Truy cập vào trang web B2: Chọn “login”

Hệ thống hiển thị form đăng nhập cho phép người dùng nhập thông tin tài khoản Gmail Sau khi nhập, hệ thống sẽ kiểm tra thông tin tài khoản và cập nhật vào cơ sở dữ liệu Tùy thuộc vào loại tài khoản, hệ thống sẽ hiển thị giao diện tương ứng, có thể là trang bán hàng hoặc trang quản trị Nếu thông tin tài khoản Gmail không chính xác, hệ thống sẽ thông báo “sai tài khoản email hoặc mật khẩu”.

Tên use case Đăng xuất

Mục đích Đăng xuất tài khoản khỏi trang web Điều kiện trước

Người dùng đã đăng nhập vào trang web Điều kiện sau Đăng xuất thành công và trang web trở về trang home

B2: Hệ thống đăng xuất tài khoản và trang web trở về trang home với trạng thái không được login

3.1.5.2 UC_2 “Xem sản phẩm” a Xem sản phẩm

Tên use case Xem sản phẩm

Khách hàng Mục đích Xem thông tin chi tiết của một sản phẩm Điều kiện trước

Khách hàng truy cập vào trang web Điều kiện sau Trang web hiển thị trang xem chi tiết sản phẩm

B1: Khách hàng click vào một sản phẩm bất kỳ hiển thị trên danh sách các sản phẩm

B2: Hệ thống sẽ chuyển đến page hiển thị hình ảnh cũng như thông tin chi tiết của sản phẩm

Ngoại lệ b Thêm sản phẩm vào giỏ hàng

Tên use case Thêm sản phẩm vào giỏ hàng

Khách hàng có thể dễ dàng thêm sản phẩm muốn mua vào giỏ hàng khi đang ở trang xem chi tiết sản phẩm Sau khi thực hiện thao tác này, sản phẩm sẽ được ghi nhận và thêm vào giỏ hàng của khách hàng.

Diễn biến chính B1: Khách hàng click “Add to cart”

B2: Hệ thống xác nhận ID của sản phẩm và thêm vảo giỏ hàng

B3: Hệ thống tự động tăng số sản phẩm trên icon giỏ hàng Ngoại lệ B1.1: Sản phẩm hết hàng và hiển thị thông báo “Out of stock”

3.1.5.3 UC_3 “Tìm kiếm sản phẩm”

Hình 3-5 Usecase Đánh giá giảng viên a Tìm kiếm sản phẩm

Mục đích Hiển thị danh sách sản phẩm phù hợp với thông tin tìm kiếm của khách hàng Điều kiện trước

Khách hàng đang ở page xem chi tiết một sản phẩm Điều kiện sau

Hiển thị danh sách các sản phẩm phù hợp với nội dung tìm kiếm

B1: Khách hàng click vào các tag, category, brand, hoặc click vào

“Tìm kiếm và nhập nội dung tìm kiếm”

B2: Hệ thống sẽ lấy thông tin đầu vào và kiểm trả, hiển thị thông tin được tìm thấy

Ngoại lệ B2.1: Hệ thống không tìm thấy sản phẩm phù hợp vói thông tin tìm kiếm của khách hàng và hiện hiện thì “No item found!”

3.1.5.4 UC_4 “Quản lý giỏ hàng” a Quản lý giỏ hàng

Tên use case Quản lý giỏ hàng

Mục đích Hiển thị danh sách sản phẩm phù hợp với thông tin tìm kiếm của khách hàng Điều kiện trước

Khách hàng truy cập vào trang web Điều kiện sau Hiển thị popup giỏ hàng

B1: Khách hàng click icon “giỏ hàng”

B2: Hệ thống sẽ popup ra giỏ hàng hiển thị các sản phẩm đã được thêm vào giỏ

Ngoại lệ b Thêm bớt số lượng sản phẩm

Thêm bớt số lượng sản phẩm

Mục đích Điều chỉnh số lượng từng sản phẩm có trong giỏ hàng Điều kiện trước

Khách hàng đang mở giỏ hàng, giỏ hàng có sản phẩm được thêm từ trước Điều kiện sau

Hiển thị số lượng sản phẩm sau khi được thêm bớt

B1: Khách hàng click vào button “+” hoặc “-“ hoặc nhập số lượng sản phẩm muốn vào input của sản phẩm muốn điều chỉnh

B2: Hệ thống sẽ hiển thị số lượng sản phẩm sau khi được điều chỉnh vào

Sản phẩm sẽ tự động bị xóa khỏi giỏ hàng khi số lượng giảm xuống 0 Nếu số lượng sản phẩm trong giỏ hàng vượt quá số lượng có sẵn tại cửa hàng, hệ thống sẽ không cho phép tăng thêm số lượng.

Tên use case Xóa sản phẩm

Mục đích của việc xóa sản phẩm khỏi giỏ hàng là giúp khách hàng quản lý danh sách mua sắm của mình Trước khi thực hiện thao tác này, khách hàng cần mở giỏ hàng và đảm bảo rằng có sản phẩm đã được thêm vào Sau khi hoàn tất, sản phẩm sẽ được xóa khỏi giỏ hàng, giúp khách hàng dễ dàng điều chỉnh lựa chọn của mình.

Diễn biến chính B1: Khách hàng click icon “X” ở cuối mỗi item sản phẩm

B2: Hệ thống lấy id sản phẩm và tiến hành xóa sản phẩm khỏi giỏ hàng

Tên use case Đặt hàng

Mục đích Đặt hàng sản phẩm có trong giỏ hàng Điều kiện trước

Khách hàng đang mở giỏ hàng Điều kiện sau Đơn hàng được tạo và page chuyển đến trang thông đặt hàng thành công

B1: Khách hàng click “checkout” ở giỏ hàng B2: Trang web chuyển đến trang checkout hiển thị các thông tin các sản phẩm muốn đặt hàng

Khách hàng cần nhập đầy đủ thông tin cần thiết và nhấn nút “Order” để đặt sản phẩm Hệ thống sẽ tự động lấy ID của các sản phẩm đã đặt cùng với thông tin khách hàng, tạo đơn hàng và lưu trữ vào cơ sở dữ liệu.

Trang web sẽ chuyển đến trang thông báo đặt hàng thành công khi đơn hàng được hoàn tất Nếu giỏ hàng không có sản phẩm, nút "checkout" sẽ bị vô hiệu hóa Ngoài ra, nếu khách hàng chưa nhập đủ thông tin cần thiết, trang web sẽ tự động tập trung vào phần input bị thiếu để hướng dẫn họ hoàn tất thông tin.

3.1.5.5 UC_5 “Quản lý danh mục” a Thêm danh mục

Tên use case Thêm danh mục

Mục đích Thêm danh mục mới Điều kiện trước

Admin đăng nhập vào admin page Điều kiện sau Danh mục mới được tạo và lưu vào database

B1: admin click vào “category” trong trang B2: hệ thống chuyển đến màn hình quản lý danh mục B3: admin click vào button “New category”

B4: Hệ thống chuyển đến trang thêm danh mục mới B5: admin nhập các thông tin cần thiết

B7: Hệ thống lưu danh mục mới vào database và trở về trang quản lý danh mục

Ngoại lệ B6.1: admin nhập thiếu thông tin, page sẽ focus vào ô thông tin nhập thiếu b Chỉnh sửa danh mục

Mục đích Chỉnh sửa danh mục Điều kiện trước

Admin đang ở trang quản lý danh mục và danh mục được chỉnh sửa có trong danh sách Điều kiện sau

Thanh đổi thông tin danh mục thành công

B1: Admin click vào icon ba chấm ở cuối dòng danh mục cần chỉnh sửa

B3: Hệ thống chuyển trang chỉnh sửa danh mục B4: Admin thực hiện chỉnh chỉnh sửa tên danh mục B5: Click button “Save”

Hệ thống sẽ cập nhật thông tin danh mục vào cơ sở dữ liệu và quay về trang quản lý danh mục với thông tin mới Trong trường hợp tên danh mục bị để trống, trang sẽ tự động tập trung vào ô nhập liệu trống để người dùng có thể nhập thông tin cần thiết Ngoài ra, người dùng cũng có thể thực hiện thao tác xóa danh mục nếu cần thiết.

Tên use case Xóa danh mục

Mục đích Xóa danh mục Điều kiện trước

Quản trị viên đang trong trang quản lý danh mục và nhận thấy rằng danh mục đã bị xóa không còn xuất hiện trong danh sách các danh mục hiện có.

B1: Admin click vào icon ba chấm ở cuối dòng danh mục cần chỉnh sửa

B3: Popup hiển thị form “Are you sure to delete this item?” B4: Click “Yes”

B6: Hệ thống thực hiện xóa danh mục khỏi database và quay trở về trang quản lý danh mục Ngoại lệ d Tìm kiếm danh mục

Mục đích Tìm kiếm danh mục theo ký tự nhập vào Điều kiện trước

Admin đang ở trang quản lý danh mục Điều kiện sau

Hiển thị danh sách các danh mục phù hợp với thông tin admin nhập vào

Admin có thể tìm kiếm danh mục bằng cách nhập thông tin như tên hoặc số thứ tự của danh mục vào ô tìm kiếm nằm trên bảng danh sách Hệ thống sẽ tự động thực hiện tìm kiếm và hiển thị các danh mục phù hợp với nội dung đã nhập.

B3: Hệ thống hiển thị danh sách các danh mục phù hợp với thông tin nhập vào tìm kiếm

Ngoại lệ B1.1: Hệ thống không tìm kiếm được danh mục khớp với thông tin nhập vào và table hiển thị “No item found”

3.1.5.6 UC_6 “Quản lý thương hiệu” a Thêm thương hiệu

Mục đích Thêm thương hiệu mới Điều kiện trước

Admin đăng nhập vào admin page Điều kiện sau

Thương hiệu mới được tạo và lưu vào database

B1: admin click vào “brand” trong sidebar B2: hệ thống chuyển đến màn hình quản lý brands B3: admin click vào button “New brand”

B4: Hệ thống chuyển đến trang thêm danh mục mới B5: admin chọn ảnh và nhập tên brand

B7: Hệ thống xử lý và lưu brand mới vào database, trở về trang quản lý danh mục với brand mới trong danh sách

Ngoại lệ B6.1: admin nhập thiếu thông tin, page sẽ focus vào ô thông tin nhập thiếu b Chỉnh sửa thương hiệu

Tên use case Chỉnh sửa thương hiệu

Mục đích Chỉnh sửa danh mục Điều kiện trước

Admin đang ở trang quản lý thương hiệu và danh mục được chỉnh sửa có trong bảng dữ liệu Điều kiện sau

Thanh đổi thông tin thương hiệu thành công

B1: Admin click vào icon ba chấm ở cuối dòng thương hiệu cần chỉnh sửa

B3: Hệ thống chuyển trang chỉnh sửa thương hiệu B4: Admin thực hiện chỉnh chỉnh sửa tên thương hiệu hoặc ảnh thương hiệu

B6: Hệ thống xử lý và cập nhật thông tin mới vào database và quay về trang quản lý brand

Ngoại lệ B5.1: Tên hoặc ảnh thương hiệu bị để trống, page sẽ focus vào input trống để người dùng nhập thông tin c Xóa thương hiệu

Tên use case Xóa thương hiệu

Mục đích Xóa thương hiệu Điều kiện trước

Admin hiện đang truy cập vào trang quản lý thương hiệu, nơi thương hiệu đã bị xóa không còn xuất hiện trong danh sách các thương hiệu hiện có.

B1: Admin click vào icon ba chấm ở cuối dòng thương hiệu cần chỉnh sửa

B3: Popup hiển thị form “Are you sure to delete this item?” B4: Click “Yes”

B6: Thương hiệu được xóa khỏi bảng dữ liệu Ngoại lệ d Tìm kiếm thương hiệu

Mục đích Tìm kiếm thương hiệu theo ký tự nhập vào Điều kiện trước

Admin đang ở trang quản lý thương hiệu Điều kiện sau

Hiển thị danh sách các thương hiệu khớp với thông tin admin nhập vào

B1: Admin focus và input search nằm phía trên table danh sách các danh , và nhập thông tin cần tìm kiếm

B2: Hệ thống thực hiện tìm kiếm thương hiệu phù hợp với text được nhập vào

B3: Hệ thống hiển thị danh sách các thương hiệu phù hợp với thông tin nhập vào tìm kiếm

Ngoại lệ B1.1: Hệ thống không tìm kiếm được thương hiệu khớp với thông tin nhập vào và table hiển thị “No item found”

3.1.5.7 UC_7 “Quản lý tag” a Xóa tag

Tên use case Xóa tag

Mục đích Xóa tag Điều kiện trước Admin đăng nhập vào admin page Điều kiện sau Tag được xóa khỏi database

B1: admin click vào button “tag” trong sidebar

B2: hệ thống chuyển đến màn hình quản lý tags B3: admin click vào dấu 3 chấm ở cuối dòng tag muốn xóa trong danh sách

B3: Popup hiển thị form “Are you sure to delete this item?”

B6: tag được xóa khỏi bảng dữ liệu Ngoại lệ b Tìm kiếm tag

Tên use case Tìm kiếm

Mục đích Tìm kiếm tag theo ký tự nhập vào Điều kiện trước

Admin đang ở trang quản lý tag Điều kiện sau

Hiển thị danh sách các tag khớp với thông tin admin nhập vào

B1: Admin focus và input search nằm phía trên table và nhập thông tin cần tìm kiếm

B2: Hệ thống thực hiện tìm kiếm tag phù hợp với text được nhập vào

B3: Hệ thống hiển thị danh sách các tag phù hợp với thông tin nhập vào tìm kiếm

Ngoại lệ B1.1: Hệ thống không tìm kiếm được tag khớp với thông tin nhập vào và table hiển thị “No item found”

3.1.5.8 UC_8 “Quản lý sản phẩm” a Xem sản phẩm

Mục đích Xem chi tiết một sản phẩm Điều kiện trước

Hệ thống chuyển đến trang xem chi tiết sản phẩm và hiển thị chính xác thông tin chi tiết của đơn hàng vừa chọn

B1: admin click vào “products” trong trang B2: hệ thống chuyển đến màn hình quản lý sản phẩm

B3: admin click vào icon ba chấm ở cuối dòng sản phẩm muốn xem

B5: Hệ thống chuyển đến trang xem chi tiết sản phẩm và hiển thị chi tiết thông tin của sản phẩm vừa chọn

Ngoại lệ b Thêm sản phẩm

Mục đích Thêm sản phẩm mới Điều kiện trước

Sản phẩm mới được tạo và lưu vào database

B1: admin click vào “products” trong trang B2: hệ thống chuyển đến màn hình quản lý sản phẩm B3: admin click vào button “New product”

B4: Hệ thống chuyển đến trang thêm sản phẩm mới B5: admin nhập các thông tin và chọn ảnh cần thiết cho sản phẩm mới

Hệ thống B7 xử lý và lưu trữ sản phẩm mới vào cơ sở dữ liệu, trong khi B8 quay trở lại trang quản lý sản phẩm và hiển thị bảng dữ liệu, bao gồm cả sản phẩm mới đã được thêm vào.

Ngoại lệ B6.1: admin nhập thiếu thông tin, page sẽ focus vào ô thông tin nhập thiếu c Chỉnh sửa sản phẩm

Mục đích Chỉnh sửa sản phẩm Điều kiện trước

Admin đang ở trang quản lý sản phẩm và sản phẩm được chỉnh sửa có trong danh sách Điều kiện sau

Thanh đổi thông tin sản phẩm thành công

B1: Admin click vào icon ba chấm ở cuối dòng sản phẩm cần chỉnh sửa

B3: Hệ thống chuyển trang chỉnh sửa sản phẩm B4: Admin thực hiện chỉnh sửa các thông tin của sản phẩm (tên, thương hiệu, ảnh, …)

B6: Hệ thống xử lý và cập nhật thông tin sản phẩm vào database, quay về trang quản lý sản phẩm với thông tin sản phẩm mới được cập nhật

Ngoại lệ B5.1: Thông sản phẩm bị để trống, page sẽ focus vào input trống để người dùng nhập thông tin d Xóa sản phẩm

Mục đích Xóa sản phẩm Điều kiện trước

Admin đang ở trang quản lý sản phẩm và sản phẩm bị xóa có trong danh sách Điều kiện sau

Sản phẩm bị xóa không còn hiển thị trong danh sách các sản phẩm hiện có

B1: Admin click vào icon ba chấm ở cuối dòng sản phẩm cần chỉnh sửa

Hệ thống B6 cho phép xóa sản phẩm và tự động quay lại trang quản lý sản phẩm, trong đó sản phẩm vừa bị xóa sẽ không còn hiển thị trong danh sách Ngoài ra, chức năng tìm kiếm sản phẩm cũng được tích hợp để nâng cao trải nghiệm người dùng.

Tên use case Tìm kiếm

Mục đích Tìm kiếm sản phẩm theo ký tự nhập vào Điều kiện trước

Admin đang ở trang quản lý sản phẩm Điều kiện sau

Hiển thị danh sách các sản phẩm phù hợp với thông tin admin nhập vào

B1: Admin focus và input search nằm phía trên table sản phẩm B2: Hệ thống thực hiện tìm kiếm sản phẩm phù hợp với text được nhập vào

B3: Hệ thống hiển thị danh sách các sản phẩm phù hợp với thông tin nhập vào tìm kiếm

Ngoại lệ B1.1: Hệ thống không tìm kiếm được sản phẩm khớp với thông tin nhập vào và table hiển thị “No item found”

3.1.5.9 UC_9 “Quản lý đơn nhập hàng” a Tạo đơn nhập hàng

Mục đích Tạo đơn nhập hàng mới Điều kiện trước

Admin đăng nhập vào admin page Điều kiện sau Đơn nhập hàng mới được tạo và lưu vào database

B1: admin click vào “products” trong trang B2: hệ thống chuyển đến màn hình quản lý sản phẩm B3: admin click vào icon ba chấm ở cuối dòng sản phẩm muốn nhập hàng

B5: Hệ thống popup ra form tạo đơn nhập hàng B6: admin nhập các thông tin cần thiết (đơn giá, số lượng) B7: Click button “Import”

B8: Hệ thống lưu thông tin đơn nhập hàng mới vào database và chuyển đến trang hiển thị danh sách các đơn nhập hàng

Ngoại lệ B6.1: admin nhập thiếu thông tin, page sẽ focus vào ô thông tin nhập thiếu trong form b Chỉnh sửa đơn nhập hàng

Chỉnh sửa đơn nhập hàng

Mục đích Chỉnh sửa đơn nhập hàng Điều kiện trước

Admin đang ở trang quản lý đơn nhập hàng và đơn nhập hàng được chỉnh sửa có trong danh sách Điều kiện sau

Thanh đổi thông tin đơn nhập hàng thành công

B1: Admin click vào icon ba chấm ở cuối dòng đơn nhập hàng cần chỉnh sửa

B3: Hệ thống chuyển trang chỉnh sửa đơn nhập hàng B4: Admin thực hiện chỉnh sửa các thông tin đơn

Hệ thống B6 giúp xử lý và cập nhật thông tin đơn nhập hàng trong cơ sở dữ liệu, đồng thời quay về trang quản lý đơn nhập hàng với thông tin đã được cập nhật.

Ngoại lệ B5.1: Thông tin đơn nhập hàng bị để trống, page sẽ focus vào input trống để người dùng nhập thông tin c Xóa đơn nhập hàng

Mục đích Xóa đơn nhập hàng đã tồn tại Điều kiện trước

Admin đang quản lý đơn nhập hàng và nhận thấy rằng các đơn nhập hàng bị xóa sẽ không còn xuất hiện trong danh sách các đơn nhập hàng hiện tại.

B1: Admin click vào icon ba chấm ở cuối dòng đơn nhập hàng cần chỉnh sửa

Thiết kế hệ thống

3.2.1.1 Lược đồ hoạt động của hệ thống gợi ý

3.2.1.2 Lược đồ tuần tự thao tác thêm sản phẩm

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

3.2.2.1 Lược đồ cơ sở dữ liệu

3.2.2.2 Mô tả các bảng dữ liệu Bảng dữ liệu users: Lưu thông tin về tài khoản người dùng

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Ý nghĩa

1 _id UUID Là duy nhất Id của người dùng

2 email string Email đăng ký của người dùng

3 isAdmin Boolean Xác định tài khoản có phải là tài khoản admin không

4 firstName String Họ của người dùng

5 lastName String Tên của người dùng

6 profilePhoto String url ảnh đại diện

7 Source String Tên phương thức đăng nhập

8 lastVisited Date Thời điểm đăng nhập gần nhất

Bảng dữ liệu products: Lưu thông tin về các sản phẩm

1 _id UUID Là duy nhất Id của sản phẩm

2 name String Tên sản phẩm

3 brand ObjectId Id của thương hiệu

4 category Objecid Id của danh mục

5 dial String Thông tin mặt đồng hồ

6 case String Thông tin vỏ ngoài đồng hồ

7 strap String Thông tin quai đeo đồng hồ

8 description String Thông tin mô tả đồng hồ

9 price Number Giá bán sản phẩm

10 code String Mã sản phẩm

12 tags Array Mảng các id tag của sản phẩm

13 thumbnail Object Thông tin thumbnail

14 images Array Mảng chứa thông tin các hình ảnh sản phẩm

16 deleted Boolean Sản phẩm đã bị xóa chưa

17 deletedAt Date Thời điểm sản phẩm bị xóa

Bảng dữ liệu tags: Lưu thông tin về tags

1 _id UUID Là duy nhất Id của tag

2 name String Tên của tag

3 deleted Boolean tag đã bị xóa chưa

4 deletedAt Date Thời điểm tag bị xóa

Bảng dữ liệu categories: Lưu thông tin danh mục

1 _id UUID Là duy nhất Id của danh mục

2 description String Mô tả danh mục

3 name String Tên của tag

Bảng dữ liệu brands: Lưu thông tin thương hiệu

1 _id UUID Là duy nhất Id của brand

2 name String Tên của thương hiệu

4 cloudinary_id String Id của ảnh trên đám mây

Bảng dữ liệu importOrders: Lưu thông tin đơn nhập hàng

1 _id UUID Là duy nhất Id của đơn

2 product ObjectId Id của sản phẩm được nhập

3 quantity Number Số lượng sản phẩm

4 unitPrice Number Đơn giá nhập sản phẩm

Bảng dữ liệu SaleOrders: Lưu thông tin đơn bán hàng

1 _id UUID Là duy nhất Id của đơn

2 firstName String Họ khách hàng

3 lastName String Tên khách hàng

4 phoneNumber String Số điện thoại khách hàng

5 address String Địa chỉ giao hàng

6 productList Array Danh sách sản phẩm trong đơn hàng

7 status String Trạng thái đơn hàng

8 totalPrice Number Giá trị đơn hàng

9 user ObjectId Id tài khoản khách hàng đã đăng ký

3.2.3 Thiết kế kiến trúc hệ thống

Máy chủ back-end được phát triển bằng Express, sử dụng cơ sở dữ liệu MongoDB để lưu trữ thông tin và Cloudinary để quản lý hình ảnh Ngoài ra, server còn áp dụng template engine Handlebars để xử lý giao diện và dữ liệu trước khi gửi HTML về cho client.

3.2.3.2 Kiến trúc thư mục ứng dụng Web package.json: Lưu trữ các thư viện sử dụng trọng ứng dung public: Lưu trữ các file như hình ảnh, icon,… src: Thư mục chứa tất cả logic của ứng dụng bao gồm các layout, model, service,… config: Thư mục chứa các biến sẽ được dùng chung cho toàn hệ thống

3.2.4.1.1 Danh sách giao diện khách hàng

STT Tên màn hình Mô tả chức năng

1 Giao diện trang chủ Hiển thị các sản phẩm mới, các brand của đồng hồ

2 Giao diện đăng nhập Màn hình đăng nhập vào trang web luxewatch

3 Giao diện xem sản phẩm Hiển thị chi tiết sản phẩm vừa được chọn và gợi ý danh sách các sản phẩm tương tự

4 Popup giỏ hàng Hiển thị các sản phẩm có trong giỏ hàng

5 Giao diện đặt hàng Hiển thị form đặt hàng các sản phẩm

6 Giao diện đặt hàng thành công Hiển thị thông báo đặt hàng thành công

7 Giao diện tìm kiếm sản phẩm Hiển thị danh sách các sản phẩm phù khớp với kết quả tìm kiếm

8 Popup tìm kiếm Hiển thị input để nhập thông tin của sản phẩm muốn tìm kiếm

3.2.4.1.2 Danh sách giao diện Admin

1 Giao diện dashboard Hiển thị các báo cáo thống kê của cửa hàng

2 Giao diện quản lý brand Hiển thị danh sách các brand có trong cửa hàng

3 Giao diện thêm brand mới Hiển thị form để tạo brand mới

4 Giao diện chỉnh sửa brand Hiển thị form chỉnh sửa brand

5 Giao diện quản lý tag Hiển thị danh sách các tag có trong database

6 Giao diện quản lý danh mục Hiển thị danh sách các danh mục có trong database

7 Giao diện thêm mới danh mục Hiển thị form thêm mới danh mục

8 Giao diện chỉnh sửa danh mục Hiển thị form chỉnh sửa danh mục

9 Giao diện quản lý sản phẩm Hiển thị danh sách các sản phẩm có trong cửa hàng

10 Giao diện thêm mới sản phẩm Hiển thị form thêm mới sản phẩm

11 Giao diện chỉnh sửa sản phẩm Hiển thị form chỉnh sửa sản phẩm

12 Popup xóa sản phẩm Popup form xác nhận xóa sản phẩm

13 Giao diện xem chi tiết sản phẩm Hiển thị giao diện xem chi tiết một sản phẩm

14 Popup import sản phẩm Popup form để thêm số lượng sản phẩm

15 Giao diện quản lý đơn nhập hàng Hiển thị danh sách đang đơn nhập hàng hiện có

16 Giao diện quản lý đơn bán hàng Hiển thị danh sách các đơn bán hàng hiện có

17 Giao diện xem chi tiết đơn bán hàng

Hiển thị giao diện xem chi tiết một đơn bán hàng

18 Giao diện quản lý khách hàng Hiển thị danh sách các tài khoản khách hàng đã đăng ký

Mô tả các màn hình

Mô tả các đối tượng trên màn hình

STT Tên thành phần Loại Mô tả thành phần

1 Button home Anchor link Chuyển hướng đến trang chủ

2 Gender Anchor link Chuyển hướng đến trang hiển thị danh sách các đồng thồ theo giới tính

3 Product item Anchor link Chuyển hướng đến trang xem chi tiết sản phẩm

4 Search Button Popup giao diện tìm kiếm sản phẩm

5 Cart Button Popup giao diện giỏ hàng

1 Button Login Anchor link Chuyển hướng đến trang đăng nhập gmail google

3.2.4.1.5 Giao diện xem sản phẩm

1 Button Add to cart button Thêm sản phẩm vào giỏ hàng

2 Arrow left right button Chuyển qua lại ảnh sản phẩm đang xem

3 Category Anchor link Tìm kiếm sản phẩm có cùng danh mục của sản phẩm đang xem

4 Brand Anchor link Tìm kiếm sản phẩm có cùng thương hiệu với sản phẩm đang xem

5 Tags Anchor link Tìm kiếm sản phẩm có cùng tag với sản phẩm đang xem

1 Button “+” button Tăng số lượng sản phẩm

2 Button “-“ button Giảm số lượng sản phẩm

3 Button “X” Button Xóa sản phẩm khỏi gió hàng

4 Button “close” Button Đóng giỏ hàng

5 Tags Anchor link Tìm kiếm sản phẩm có cùng tag với sản phẩm đang xem

6 Button “checkout” Anchor link Chuyển đến trang đặt hàng sản phẩm

1 Ô nhập first name Input Nhập họ của khách hàng

2 Ô nhập last name Input Nhập tên của khách hàng

3 Ô nhập sđt Input Nhập số điện thoại của khách hàng

4 Ô nhập email Input Nhập email khách hàng

5 Ô nhập địa chỉ Input Nhập địa chỉ giao hàng

6 Button “Order” Button Sau khi nhập đầy đủ thông tin khách hàng tiến hành đặt hàng bằng cách nhấn vào button

3.2.4.1.9 Giao diện đặt hàng thành công

1 Button “Next” Button Nhấn để quay về trang chủ tiếp tục mua hàng

3.2.4.1.10 Giao diện tìm kiếm sản phẩm

1 Select category select Lựa chọn danh mục muốn tìm kiếm

2 Select Price select Lựa chọn khoảng giá muốn tìm kiếm

3 Button filter button Lọc các sản phẩm phù hợp sau khi đã select

1 Input search input Nơi người dụng nhập text liên quan đến sản phẩm muốn tìm kiếm

2 button search Anchor link Chuyển đến trang tìm kiếm sản phầm phù hợp với nội dung vừa nhập

1 Button Dashboard Anchor link Chuyển đến trang dashboard

2 Select time Select Lựa chọn thời gian muốn thống kê

3 Button brands Anchor link Chuyển đến trang quản lý thương hiệu

4 Button categories Anchor link Chuyển đến trang quản lý danh mục

5 Button products Anchor link Chuyển đến trang quản lý sản phẩm

6 Button import orders Anchor link Chuyển đến trang quản lý đơn nhập hàng

Anchor link Chuyển đến trang quản lý đơn bán hàng

8 Button Tags Anchor link Chuyển đến trang quảng lý tag

9 Button Customers Anchor link Chuyển đến trang quản lý khách hàng

3.2.4.1.13 Giao diện quản lý brand

1 Button new brand Anchor link Chuyển đến trang thêm thương hiệu

2 Icon ba chấm button Pop up lựa chọn

3 Button edit Anchor link Chuyển đến trang chỉnh sửa thương hiệu

4 Button delete Xóa thương hiệu Xóa thương hiệu

5 Select entries Select Chọn số dòng dữ liệu muốn xem

6 Input search Input Nhập dữ liệu muốn tìm kiếm

7 Button next Button Chuyển đến trang dữ liệu tiếp theo

8 Button number page Button Chuyển đến trang dữ liệu tương ứng với số trang

3.2.4.1.14 Giao diện thêm brand mới

1 Input file input Chọn ảnh của thương hiệu từ máy

2 Image brand image Hiển thị ảnh thương hiệu vừa chọn

3 Input name input Nhập tên thương hiệu

4 Button reset button Xóa các thông tin vừa nhập

5 Button Add Anchor link Tiến hành thêm sản phẩm mới vào database

3.2.4.1.15 Giao diện chỉnh sửa brand

1 Input file input Chọn ảnh muốn thanh thế

2 Image brand image Hiển thị ảnh thương hiệu

3 Input name input Nhập tên thương hiẹu

4 Button reset button Quay về thông tin cũ trước khi chỉnh sửa

5 Button save Anchor link Lưu thông tin vừa chỉnh sửa

3.2.4.1.16 Giao diện quản lý tags

1 Button delete Anchor link Xóa tag

3.2.4.1.17 Giao diện quản lý danh mục

1 Button new category Anchor link Chuyển đến trang thêm danh mục

3 Button edit Anchor link Chuyển đến trang chỉnh sửa danh mục

4 Button delete Xóa danh mục Xóa danh mục

3.2.4.1.18 Giao diện thêm danh mục mới

1 Text area Textarea Nhập mô tả cho danh mục

3 Input name input Nhập tên danh mục

4 Button reset button Xóa các thông tin vừa nhập

5 Button Add Anchor link Tiến hành thêm sản phẩm mới vào database

3.2.4.1.19 Giao diện chỉnh sửa danh mục

1 Text area Textarea Nhập mô tả cho danh mục

3 Input name input Nhập tên danh mục

4 Button reset button Quay về thông tin trước chỉnh sửa

5 Button save Anchor link Lưu thông tin được chỉnh sửa

3.2.4.1.20 Giao diện quản lý sản phẩm

1 Button new product Anchor link Chuyển đến trang thêm sản phẩm mới

3 Button edit Anchor link Chuyển đến trang chỉnh sửa sản phẩm

4 Button delete button Xóa sản phẩm

9 Button import Button Thêm sản phẩm vào kho

10 Buton view Anchor link Chuyển đến trang xem chi tiết sản phẩm

3.2.4.1.21 Giao diện thêm sản phẩm mới

1 Input name input Nhập tên sản phẩm

3 Select brand select Chọn thương hiệu

4 Code input Nhập code sản phẩm

5 Dial Text area Nhập thông tin về mặt đồng hồ

6 Case Text area Nhập thông tin về vỏ đồng hồ

7 Strap Text area Nhập thông tin về quai đồng hồ

8 Description Text area Nhập mô tả thêm về đồng hồ

9 Price Input Nhập giá bán đồng hồ

10 Media Input file Chọn các ảnh của đồng hồ

11 Thumbnail Input file Chọn ảnh thumbnail của đồng hồ

12 Status Radio Chọn trạng thái của sản phẩm

13 Category Select Chọn danh mục cho đồng hồ

14 Tags Select Gắn các tag cho đồng hồ

15 Button save Button Sau khi nhập đầy đủ thông tin thì click để lưu sản phẩm mới vào hệ thống

3.2.4.1.22 Giao diện chỉnh sửa sản phẩm

1 Input name input Nhập tên sản phẩm

3 Select brand select Chọn thương hiệu

4 Code input Nhập code sản phẩm

5 Dial Text area Nhập thông tin về mặt đồng hồ

6 Case Text area Nhập thông tin về vỏ đồng hồ

7 Strap Text area Nhập thông tin về quai đồng hồ

8 Description Text area Nhập mô tả thêm về đồng hồ

9 Price Input Nhập giá bán đồng hồ

10 Media Input file Chọn các ảnh của đồng hồ

11 Thumbnail Input file Chọn ảnh thumbnail của đồng hồ

12 Status Radio Chọn trạng thái của sản phẩm

13 Category Select Chọn danh mục cho đồng hồ

14 Tags Select Gắn các tag cho đồng hồ

15 Button save Button Lưu các thông tin đã chỉnh sửa của sản phẩm

1 Button close Button Hủy xóa sản phẩm

2 Yes Anchor link Đồng ý xóa sản phẩm khỏi cửa hàng

3 Button edit Anchor link Chuyển đến trang chỉnh sửa sản phẩm

3.2.4.1.24 Giao diện xem chi tiết sản phẩm

1 Input name input Hiển thị tên sản phẩm

3 Select brand select Hiển thị thương hiệu

4 Code input Hiển thị code sản phẩm

5 Dial Text area Hiển thị thông tin về mặt đồng hồ

6 Case Text area Hiển thị thông tin về vỏ đồng hồ

7 Strap Text area Hiển thị thông tin về quai đồng hồ

8 Description Text area Hiển thị mô tả thêm về đồng hồ

9 Price Input Hiển thị giá bán đồng hồ

10 Media Input file Hiển thị các ảnh của đồng hồ

11 Thumbnail Input file Hiển thị ảnh thumbnail của đồng hồ

12 Status Radio Hiển thị trạng thái của sản phẩm

13 Category Select Hiển thị danh mục cho đồng hồ

14 Tags Select Hiển thị các tag của đồng hồ

1 Name product Input Hiển thị tên sản phẩm được nhập hàng

2 Quantity Input Nhập số lượng hàng

3 Unit price Input Đơn giá sản phẩm

4 Cancel Button Hủy nhập hàng

5 Import Anchor link Tạo đơn nhập hàng

3.2.4.1.26 Giao diện quản lý đơn nhập hàng

2 Button edit Anchor link Chuyển đến trang chỉnh sửa danh mục

3 Button delete Xóa danh mục Xóa danh mục

3.2.4.1.27 Giao diện quản lý đơn bán hàng

2 Button view detail Anchor link Chuyển đến trang xem chi tiết dơn

3 Status Select Chỉnh sửa trạng thái đơn hàng

3.2.4.1.28 Giao diện xem chi tiết đơn bán hàng

1 status Text Hiển thị trạng thái đơn hàng

3 Purchase information Text Hiển thị thông tin sản phẩm được đặt mua

Text Hiển thị thông tin khách hàng

5 Delivery information Text Hiển thị địa chị giao hàng

3.2.4.1.29 Giao diện quản lý tài khoản khách hàng

Tiêu đề	Đồ Án Xây Dựng Website Bán Đồng Hồ Tích Hợp Hệ Thống Gợi Ý Sản Phẩm
Tác giả	Trần Trọng Hoàng
Người hướng dẫn	ThS. Nguyễn Thị Thanh Trúc
Trường học	Trường Đại Học Công Nghệ Thông Tin
Chuyên ngành	Kỹ Thuật Phần Mềm
Thể loại	Đồ án
Năm xuất bản	2023
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	119
Dung lượng	4,81 MB