đồ án xây dựng website thương mại điện tử kinh doanh thiết bị di động

GIỚI THIỆU

Giới thiệu đề tài

● Tên đề tài: Xây dựng website thương mại điện tử kinh doanh thiết bị di động.

● Mô tả sơ lược: o Website được thiết kế đơn giản và bắt mắt hơn các trang web hiện tại trên thị trường với độ tiếp cận cao và dễ sử dụng, dễ thao tác khi thực hiện. o Nhóm xây dựng Website quản lý hoạt động mua bán điện thoại di động nhằm mục đích đơn giản hóa các hoạt động trao đổi về hàng điện tử. o Trong tương lai sẽ có tích hợp những chức năng về dự đoán lượt mua/ bán và liên hệ khách hàng.

1.1.2 Lý do chọn đề tài

● Công nghệ được tạo ra để giúp đời sống của con người trở nên dễ dàng và tiện lợi Trong đó, phát minh vĩ đại là điện thoại đã ra đời để biến điều đó thành sự thật Tuy nhiên, dần dần theo thời gian, con người càng có những nhu cầu về tiện ích riêng như mua sắm online, tham khảo các mặt hàng thông qua website, những dịch vụ hậu đãi Vậy nên, với sự phát triển của thời đại, nhằm tối ưu hoá những sở thích cá nhân và tiếp cận người dùng thì website quản lý bán điện thoại di động chính là cách thức để đưa công nghệ điện thoại mới đến người tiêu dùng một cách nhanh chóng nhất.

● Trang web quản lý bán điện thoại như chiếc cầu nối giữa người sản xuất, người bán hàng và cả người tiêu dùng, vậy nên nó đóng vai trò cực kỳ quan trọng trong quá trình thương mại điện tử Mà cụ thể, người dùng có thể truy cập trang web và tham khảo các sản phẩm điện thoại mà họ cần với thông tin đầy đủ, sản phẩm đa dạng và có thể so sánh nhiều mẫu mã , hãng điện thoại khác nhau Từ đó giúp cho trải nghiệm người dùng được tối ưu hoá và cải thiện doanh thu bán hàng Cùng với việc bắt kịp các xu hướng công nghệ hiện đại, các dòng sản phẩm luôn được cập nhật một cách nhanh chóng, website còn có khả năng phân tích dữ liệu người dùng để đưa ra các đề xuất mua hàng nhằm tối thiểu hoá rủi ro tồn kho nhưng vẫn đáp ứng được yêu cầu của khách hàng mà không bị lỗi thời Chung quy lại, website quản lý bán điện thoại không chỉ được tạo ra nhằm cải thiện cách tiếp thị đến thị trường mà có thể giúp doanh nghiệp có được doanh số mong muốn và tiếp cận được công nghệ và cả khách hàng mục tiêu.

● Nhằm bắt kịp được sự phát triển của công nghệ và mạng lưới bán hàng điện tử online, hơn hết là đáp ứng nhu cầu khách hàng trong thời đại mới như hiện nay. Website được tạo ra với các mục đích phục vụ cộng đồng, tín đồ đam mê công nghệ, đồng thời mang lại nguồn thu nhập và góp phần vào sự phát triển của doanh nghiệp nói riêng và đất nước nói chung.

● Website cung cấp cho khách hàng các chức năng cơ bản như đặt hàng, tìm kiếm và hiển thị thông tin sản phẩm nhằm giúp người dùng dễ dàng trong việc xem các thông tin sản phẩm phù hợp.

● Người dùng tiết kiệm được thời gian chờ đặt hàng và tránh tình trạng thiếu thông tin sản phẩm.

● Khách hàng sau khi có được sản phẩm như ý sẽ tiến hành đăng nhập tài khoản để mua sản phẩm Thông tin người dùng, sản phẩm sẽ được lưu lại hệ thống dễ dàng sử dụng.

● Để giúp doanh nghiệp quản lý tốt hơn thì website còn có chức năng thống kê hàng tháng về kho hàng, doanh thu và doanh số cần được theo dõi sát sao, có dữ liệu bán hàng và khách hàng Dựa vào những thông tin thống kê được từ chức năng này sẽ cho ra các hoạch định chiến lược cho kinh doanh và các mục tiêu dài hạn sau này.

● Tăng hiệu suất và lợi nhuận cho doanh nghiệp.

● Trang bán hàng của website có thể thêm hoặc xoá sản phẩm giúp dễ dàng kiểm soát rủi ro hàng tồn kho cũng như có thể bắt kịp nhu cầu người dùng.

● Thu thập dữ liệu về xu hướng và sở thích người tiêu dùng khi truy cập vào website.

● Cung cấp một trải nghiệm trực tuyến tốt hơn cho khách hàng.

● Họ có thể xem chi tiết sản phẩm, đăng ký tài khoản, tìm kiếm sản phẩm, xem thông tin quảng cáo, quên mật khẩu.

● Kế thừa toàn bộ chức năng của Visitor, thay đổi thông tin cá nhân (thay đổi mật khẩu, xem đơn hàng đã mua, và thay đổi thông tin địa chỉ), đặt hàng, quản lí giỏ hàng ( thêm và xóa sản phẩm ở giỏ hàng) và thanh toán (có online), thêm sản phẩm vào danh sách yêu thích, đánh giá sản phẩm, bình luận/hỏi đáp trong từng sản phẩm và chat với admin

● Họ sẽ quản lí sản phẩm ( thêm, xóa, và sửa sản phẩm).

● Quản lý doanh thu (từng tháng trong năm, doanh thu từng loại sản phẩm trong tháng, thống kê 5 sản phẩm bán chạy nhất trong tháng)

● Chat với toàn bộ khách hàng.

● Quản lý sản phẩm tồn kho

 Website bán điện thoại di động này là một nền tảng thương mại điện tử thân thiện và chuyên nghiệp, mang đến cho khách hàng trải nghiệm mua sắm thuận tiện và đáng tin cậy Với một giao diện trực quan và dễ sử dụng, trang web cung cấp một loạt các sản phẩm điện thoại di động từ các thương hiệu nổi tiếng và đáng tin cậy trên toàn cầu Bên cạnh đó, website bán điện thoại di động cung cấp công cụ quản lý toàn bộ hệ thống bằng trực tuyến, tạo điều kiện thuận lợi để mở rộng kinh doanh, tăng doanh số bán hàng và xây dựng một hệ thống kinh doanh trực tuyến tin cậy và chuyên nghiệp, thu hút sự quan tâm và lòng tin của khách hàng.

Nội dung thực hiện

● Đăng nhập, đăng ký, quên mật khẩu

● Xem chi tiết sản phẩm

● Đặt hàng và thanh toán

● Quản lý sản phẩm yêu thích

● Chat với toàn bộ khách hàng

KIẾN THỨC NỀN TẢNG

React

● React là một thư viện JavaScript declarative, hiệu quả và linh hoạt cho việc xây dựng giao diện người dùng React cho phép bạn tạo những giao diện

(UI) phức tạp từ những đoạn code nhỏ và độc lập Những đoạn code này được gọi là “components”.

● Components của công cụ này được phát triển bởi Facebook Nó được ra mắt như một công cụ JavaScript mã nguồn mở vào năm 2013 Hiện tại, nó đã đi trước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất thời bấy giờ.

● Dễ sử dụng: React là một thư viện GUI nguồn mở JavaScript tập trung vào một điều cụ thể hoàn thành nhiệm vụ UI hiệu quả Được phân loại thành kiểu “V” trong mô hình MVC (Model-View-Controller).

● Hỗ trợ Reusable Component trong Java: React cho phép bạn sử dụng lại components đã được phát triển thành các ứng dụng khác có cùng chức năng. Tính năng tái sử dụng component là một lợi thế khác biệt cho các lập trình viên.

● Viết component dễ dàng hơn: react component kết hợp tuyệt vời của JavaScript và HTML Có thể làm rõ toàn bộ quá trình viết cấu trúc trang web Ngoài ra, phần mở rộng cũng giúp render nhiều lựa chọn dễ dàng hơn.

● Hiệu suất tốt hơn với Virtual DOM: React sẽ cập nhật hiệu quả quá trình DOM (Document Object Model – Mô hình đối tượng tài liệu)

● Thân thiện với SEO: React cho phép bạn tạo giao diện người dùng có thể được truy cập trên các công cụ tìm kiếm khác nhau Tính năng này là một lợi thế rất lớn vì không phải tất cả các khung JavaScript đều thân thiện vớiSEO.

● React tăng kích thước của ứng dụng mà người dùng tải xuống

● Sẽ có thêm chi phí về khả năng tính toán và bộ nhớ của thiết bị.

● Để bắt đầu học React JS, một lập trình viên không chỉ phải học thư viện mà còn phải làm quen với mô hình.

Redux [5.3]

● Redux là một thư viện Javascript có tác dụng tạo ra một lớp quản lý mọi trạng thái của ứng dụng Hay nói cách khác, Redux là một predictable state management tool (công cụ quản lý cao cấp) cho các ứng dụng được viết bằng ngôn ngữ lập trình Javascript và còn được gọi là Redux js.

● Redux giúp các ứng dụng bạn viết có thể hoạt động một cách nhất quán và có thể hoạt động trong nhiều môi trường khác nhau như client, server, native,… Ngoài ra, sử dụng thư viện Redux để lưu trữ cũng giúp quá trình test/kiểm thử phần mềm dễ dàng hơn.

2.2.2 Cách hoạt động của Redux

● Redux dựa trên 3 thành phần chính là: Actions, Store, Reducers. o Actions: là bước đầu tiên trong luồng hoạt động của Redux và là cách để gửi dữ liệu từ ứng dụng đến Redux Store (cửa hàng redux) Bất cứ khi nào trạng thái của app hay là render của view thay đổi thì sẽ có một hành động sẽ được tạo ra. o Reducers: Sau khi các dữ liệu được Actions sẽ chuyển về Reducers Đây là nơi state được lưu giữ dưới dạng đối tượng và giúp xác định sự thay đổi trạng thái ứng dụng sao cho đáp ứng Action được gửi tới Store Lúc này Reducer sẽ làm nhiệm vụ định hướng sự thay đổi của các state mỗi khi Actions có phản hồi và phản hồi được gửi đến reducer. o Store: Store là nơi lưu trạng thái của ứng dụng và chỉ có duy nhất mộtStore trong bất kỳ một chương trình ứng dụng Redux nào Nhiệm vụ của store chính là quản lý, access các state được lưu, update state thông qua dispatch, cho phép truy cập state thông qua Getstate và đăng ký hoặc hủy đăng ký các listeners thông qua helper methods.

MySQL [6.2]

● MySQL là 1 hệ thống quản trị về cơ sở dữ liệu với mã nguồn mở (được gọi tắt là RDBMS) và đang hoạt động theo mô hình dạng client-server Đối với RDBMS – Relational Database Management System thì MySQL đã được tích hợp apache và PHP.

● Được phát hành chính thức từ thập niên 90s, MySQL hiện đang quản lý dữ liệu qua những cơ sở dữ liệu, với mỗi một cơ sở dữ liệu hoàn toàn có thể có rất nhiều những bản quan hệ có chứa dữ liệu Ngoài ra, MySQL cũng có cùng 1 cách thức truy xuất cũng như mã lệnh tương tự cùng với ngôn ngữSQL.

● Với những thông tin chi tiết trên về khái niệm MySQL, vậy cơ chế hoạt động của MySQL là gì? Theo đó cách thức vận hành chính tại MySQL môi trường hiện tại là:

● MySQL đang tạo ra bảng để có thể lưu trữ dữ liệu và định nghĩa về sự liên quan giữa những bảng đó

● Client sẽ trực tiếp gửi yêu cầu SQL bằng 1 lệnh đặc biệt có trên MySQL.

● Ứng dụng tại server sẽ tiến hành phản hồi thông tin cũng như trả về những kết quả trên máy client.

Hình 2.4: Bảng lưu trữ dữ liệu và sự liên quan

● MySQL là CSDL có tốc độ khá cao, ổn định và khá dễ sử dụng có thể hoạt động được trên khá nhiều hệ điều hành.

● Tính bảo mật mạnh và sử dụng được trên nhiều ứng dụng mà MySQL còn hoàn toàn được sử dụng miễn phí.

● MySQL không chỉ dừng lại ở bổ trợ cho PHP và Perl, mà nó còn bổ trợ cho nhiều ngôn ngữ khác, Nó là nơi để lưu trữ thông tin trên các trang web được viết bằng Perl hoặc PHP.

● Nhanh chóng: Nhờ vào việc đưa ra một số những tiêu chuẩn và cho phép MySQL làm việc hiệu quả cũng như tiết kiệm chi phí, giúp gia tăng tốc độ thực thi.

● Mạnh mẽ và khả năng mở rộng: MySQL hoàn toàn có thể xử lý số lượng lớn dữ liệu và đặc biệt hơn thế nữa thì nó còn có thể mở rộng nếu như cần thiết

● Đa tính năng: Ưu điểm MySQL là gì? MySQL hiện đang hỗ trợ nhiều những chức năng SQL rất được mong chờ từ 1 hệ quản trị CSDL quan hệ cả gián tiếp cũng như trực tiếp.

● Độ bảo mật cao: MySQL là gì? Hiện tại nó đang rất thích hợp cho những ứng dụng truy cập CSDL thông qua internet khi sở hữu rất nhiều những tính năng về bảo mật và thậm chí là đang ở cấp cao.

● Dễ dàng sử dụng: MySQL đang là cơ sở dữ liệu dễ sử dụng, ổn định, tốc độ cao và hoạt động trên rất nhiều những hệ điều hành đang cung cấp 1 hệ thống lớn những hàm tiện ích rất mạnh.

● Dung lượng hạn chế: Trong trường hợp nếu như số lượng bản ghi của bạn đang lớn dần lên thì khi đó quá trình truy xuất dữ liệu sẽ diễn ra vô cùng khó khăn Như vậy cần phải áp dụng rất nhiều những biện pháp khác nhau để có thể gia tăng được tốc độ truy xuất những dữ liệu ví dụ như tạo cache MySQL hoặc chia tải database ra nhiều server

● Độ tin cậy: Nhược điểm MySQL là gì? Theo đó cách thức nhận chức năng cụ thể đang được xử lý cùng với MySQL (ví dụ như kiểm toán, những giao dịch, tài liệu tham khảo,…) khiến cho nó trở nên kém tin cậy hơn một số những hệ quản trị về cơ sở dữ liệu có quan hệ khác.

NodeJS là gì [6.1]

● Nodejs là một nền tảng được xây dựng dựa trên thời gian chạy JavaScript của Chrome để dễ dàng xây dựng các ứng dụng mạng nhanh và có thể mở rộng Nodejs sử dụng kiến trúc hướng sự kiện event-driven, không chặn (non-blocking), làm cho nó nhẹ hơn và hiệu quả hơn, hoàn hảo cho các ứng dụng real-time sử dụng nhiều dữ liệu chạy trên các thiết bị phân tán.

● Là một môi trường chạy mã nguồn mở, đa nền tảng, Nodejs được dùng để phát triển các ứng dụng mạng Node.js cũng cung cấp một thư viện phong phú gồm các mô-đun JavaScript khác nhau, giúp đơn giản hóa việc phát triển các ứng dụng web sử dụng Node.js ở một mức độ lớn.

● Lập trình kiến trúc hướng sự kiện và không đồng bộ: Tất cả các API của thư viện Node.js đều không đồng bộ, và không bị chặn (non-blocking) Về cơ bản, điều đó nghĩa là một máy chủ dựa trên Node.js không bao giờ đợi API trả về dữ liệu Server chuyển đến API tiếp theo sau khi gọi API đầu tiên và cơ chế thông báo Sự kiện của Node.js giúp máy chủ nhận phản hồi từ lệnh gọi API trước đó.

● Cực kỳ nhanh chóng: Được xây dựng trên Công cụ JavaScript V8 của Google Chrome, thư viện Node.js xử lý mã rất nhanh.

● Đơn luồng nhưng có khả năng mở rộng cao: Node.js sử dụng mô hình luồng đơn với vòng lặp sự kiện Cơ chế sự kiện giúp server phản hồi theo cách không chặn (non-blocking) và làm cho máy chủ có khả năng mở rộng cao so với các máy chủ truyền thống Node.js sử dụng chương trình luồng đơn và với cùng một chương trình có thể cung cấp dịch vụ cho một số lượng yêu cầu lớn hơn nhiều so với các máy chủ truyền thống như Apache HTTP Server.

● Không Buffering – Các ứng dụng Node.js không có buffer (vùng nhớ tạm thời) cho bất kỳ dữ liệu nào Các ứng dụng này chỉ xuất dữ liệu theo khối.

● Có giấy phép – Node.js được phát hành theo giấy phép của MIT (Học viện công nghệ Massachusetts).

● 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.

● Micro Services: Node.js có thể làm tốt việc chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau.

● I/O hướng sự kiện không đồng bộ, cho phép nhà phát triển xử lý nhiều yêu cầu cùng lúc.

● Node.js sử dụng ngôn ngữ JavaScript là một ngôn ngữ lập trình khá dễ học.

● Có thể cùng chia sẻ code ở cả phía server và client.

● Node Package Manager (NPM) và module Node ngày càng phát triển mạnh mẽ.

● Có cộng đồng hỗ trợ rất tích cực.

● Các file có kích thước lớn được phép stream.

● Nodejs hạn chế khả năng mở rộng, do đó các nhà phát triển không thể tận dụng các phần cứng cấp server với lợi thế về mô hình đa lõi hiện nay.

● Nodejs tỏ ra khó thao tác với các cơ sử dữ liệu quan hệ.

● Mỗi callback cần phải đi kèm với nhiều callback lồng nhau khác.

● Để sử dụng Nodejs, nhà phát triển phải có kiến thức tốt về JavaScript.

● Nodejs tỏ ra không phù hợp với các thao tác cần nhiều CPU.

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

Danh sách các yêu cầu

● Quản lý Người Dùng: o Đăng ký o Đăng nhập/Đăng xuất o Quên mật khẩu o Thay đổi thông tin người dùng o Thay đổi mật khẩu

● Quản lý Sản Phẩm: o Tìm kiếm sản phẩm o Xem chi tiết sản phẩm o Xem thông tin khuyến mãi

● Quản lý Giỏ Hàng: o Thêm sản phẩm vào giỏ o Xóa sản phẩm khỏi giỏ o Quản lý giỏ hàng

● Giao Dịch: o Đặt hàng o Thanh toán o Xem lịch sử mua hàng

● Tương tác và Đánh Giá: o Đánh giá sản phẩm o Bình luận sản phẩm o Trò chuyện với admin

3.1.2 Yêu cầu phi chức năng

● Hiệu Suất: o Thời gian phản hồi của hệ thống o Khả năng xử lý đồng thời nhiều yêu cầu

● Bảo Mật: o Bảo vệ dữ liệu người dùng o Mã hóa thông tin thanh toán o Quản lý quyền truy cập

● Tính Sẵn Sàng: o Khả năng hoạt động liên tục o Tối thiểu hóa thời gian hệ thống không hoạt động

● Khả Năng Mở Rộng: o Dễ dàng cập nhật và mở rộng tính năng o Tích hợp với các hệ thống khác

● Tính Dễ Sử Dụng: o Giao diện người dùng thân thiện o Hỗ trợ đa ngôn ngữ o Hướng dẫn sử dụng rõ ràng

Phân tích yêu cầu

● Quản lý Người Dùng: o Đăng ký: Mô tả quy trình đăng ký, thông tin cần thiết để đăng ký, và cách thức xác minh tài khoản. o Đăng nhập/Đăng xuất: Phân tích cơ chế xác thực, quản lý phiên làm việc và cách thức bảo mật thông tin đăng nhập. o Quên mật khẩu: Mô tả quy trình khôi phục mật khẩu, bao gồm các bước xác minh danh tính và tạo mật khẩu mới. o Thay đổi thông tin người dùng và mật khẩu: Xác định thông tin nào có thể thay đổi và quy trình thay đổi an toàn.

● Quản lý Sản Phẩm: o Tìm kiếm sản phẩm: Phân tích cách thức tìm kiếm hoạt động, bao gồm các bộ lọc và thuật toán tìm kiếm. o Xem chi tiết sản phẩm: Xác định thông tin nào sẽ hiển thị và cách thức cập nhật thông tin sản phẩm. o Xem thông tin khuyến mãi: Phân tích cách thức hiển thị và quản lý các chương trình khuyến mãi.

● Quản lý Giỏ Hàng: o Thêm và xóa sản phẩm từ giỏ: Mô tả quy trình quản lý giỏ hàng, cách tính toán tổng cộng, và cập nhật số lượng. o Quản lý giỏ hàng: Phân tích cách người dùng xem và chỉnh sửa giỏ hàng của họ.

● Giao Dịch: o Đặt hàng: Phân tích quy trình đặt hàng từ bắt đầu đến khi hoàn tất, bao gồm cách thức xử lý thanh toán. o Thanh toán: Mô tả cơ chế thanh toán an toàn và tích hợp với các cổng thanh toán. o Xem lịch sử mua hàng: Phân tích cách thức lưu trữ và truy xuất thông tin đơn hàng cũ.

● Tương tác và Đánh Giá: o Đánh giá sản phẩm: Phân tích cách thức thu thập và hiển thị đánh giá, cũng như quản lý đánh giá không phù hợp. o Bình luận sản phẩm: Mô tả cơ chế để người dùng có thể để lại bình luận và cách thức quản lý bình luận. o Trò chuyện với admin: Phân tích cách thức thiết lập và duy trì các kênh trò chuyện trực tuyến giữa người dùng và quản lý.

3.2.2 Yêu cầu phi chức năng

● Hiệu Suất: o Phân tích các yêu cầu về thời gian phản hồi và khả năng xử lý đồng thời. o Đánh giá cần thiết về tài nguyên hệ thống để đáp ứng các yêu cầu này.

● Bảo Mật: o Xác định các biện pháp bảo mật cho dữ liệu người dùng và thông tin thanh toán. o Mô tả cơ chế quản lý quyền truy cập và phân quyền người dùng.

● Tính Sẵn Sàng: o Đánh giá chiến lược sao lưu và phục hồi hệ thống. o Xác định các yêu cầu về uptime và cách thức đạt được.

● Khả Năng Mở Rộng: o Phân tích kiến trúc hệ thống để đảm bảo khả năng mở rộng và nâng cấp dễ dàng. o Xác định cách thức tích hợp với các hệ thống và dịch vụ bên ngoài.

● Tính Dễ Sử Dụng: o Đánh giá thiết kế giao diện người dùng và trải nghiệm người dùng. o Phân tích yêu cầu về hỗ trợ ngôn ngữ và hướng dẫn sử dụng.

Thiết kế hệ thống

Hình 3.1: Kiến trúc Front-end

 View layer: Nó đại diện cho giao diện người dùng của ứng dụng không có bất kỳ logic ứng dụng nào.

 State management: Layer này chứa logic ứng dụng Layer này, trong kiến trúc đã thực hiện via React Hooks.

 Api Client: Layer này chịu trách nhiệm giao tiếp với máy chủ bên ngoài ( gửi yêu cầu / nhận phản hồi) và lưu trữ dữ liệu cục bộ.

Hình 3.2: Kiến trúc Back-end

 Modal: Thành phần model tương ứng với tất cả logic liên quan đến dữ liệu mà người dùng làm việc với nó Nó duy trì dữ liệu của ứng dụng Về cơ bản nó là phần cơ sở dữ liệu ứng dụng.

 View: Thành phần view được sử dụng cho tất cả logic giao diện người dùng của ứng dụng View sử dụng mô hình hóa và trình bày dữ liệu ở dạng mà người dùng muốn Một người dùng cũng có thể được phép thực hiện các thay đổi đối với dữ liệu được trình bày cho người dùng Chúng bao gồm các trang tĩnh và động được kết xuất hoặc gửi đến người dùng khi yêu cầu chúng.

● Controller: Hoạt động như một giao diện giữa các thành phần Model và View để xử lý tất cả các logic nghiệp vụ và yêu cầu gửi đến, thao tác dữ liệu bằng mô hình thành phần và tương tác view để hiển thị đầu ra cuối cùng.

Thiết kế dữ liệu

Bảng 3.1: Bảng danh sách các hoạt động

STT Tên đối tượng Mô tả

1 Visitor Xem thông tin sản phẩm, tìm kiếm sản phẩm, đăng ký tài khoản, lấy lại mật khẩu đã quên.

Ngoài những chức năng của Visitor còn có thể quản lý thông tin cá nhân, đặt hàng, quản lý giỏ hàng, mua sản phẩm.

3 Manager Quản lý sản phẩm, doanh thu

Bảng 3.2: Bảng danh sách Usecase

STT Tên đối tượng Tên Use-case Mô tả

Giúp người dùng có thể truy cập vào trang web với nhiều vai trò khác nhau.

Manager Logout Giúp người dùng đăng xuất tài khoản.

Register Giúp người dùng đăng ký tài khoản mới.

Forgot Password Giúp người dùng lấy lại mật khẩu khi quên.

5 Customer Manage Cart Giúp người dùng quản lý được giỏ hàng.

6 Customer Payment Giúp người dùng thanh toán đơn đặt hàng.

7 Customer Change User Profile Giúp người dùng quản lý thông tin tài khoản.

8 Manager Manage product Giúp quản lý sản phẩm.

9 Manager Revenue manage Quản lý doanh thu hàng tháng

(doanh thu 12 tháng trong năm, doanh thu từng loại sản phẩm trong tháng, thống kê 5 sản phẩm bán chạy nhất trong tháng)

Manager Comment/Answer Bình luận hỏi đáp bên dưới từng sản phẩm

11 Customer Evaluate product Đánh giá các sản phẩm đã mua

12 Customer Chat with Admin Khách hàng thực hiện chat với admin

Bảng 3.3: Mô tả Use Case Login

Tên Use Case Login Đối tượng Customer, Manager. Điều kiện cần Không.

Người dùng cung cấp thông tin tài khoản.

Hệ thống xác định thông tin tài khoản.

Cho phép người dùng truy cập vào hệ thống hoặc tạo tài khoản mới.

Yêu cầu đặc biệt Người dùng phải có một tài khoản đã đăng ký bao gồm email, password. hiện những chức năng mà hệ thống cung cấp, dựa trên từng vai trò của từng tài khoản.

Khi đăng nhập thất bại, người dùng đăng nhập lại hoặc tạo một tài khoản mới.

Khi đăng ký tài khoản mới thành công, người dùng sẽ dùng tài khoản đó để truy cập vào website. Điểm mở rộng Không.

Bảng 3.4: Mô tả Use Case Logout

Tên Use Case Logout Đối tượng Customer, Manager Điều kiện cần Không

Người dùng chọn vào button logout.

Người dùng xác nhận lựa chọn.

Hệ thống đăng xuất tài khoản.

Yêu cầu đặc biệt Không. Điều kiện sau cùng

Khi người dùng thành công đăng xuất, hệ thống sẽ trở lại trạng thái cho Visitor và chỉ thực hiện được những chức năng của Visitor. Điểm mở rộng Không.

Bảng 3.5: Mô tả Use Case Register

Tên Use Case Register Đối tượng Visitor, Customer, Manager. Điều kiện cần Không.

Luồng cơ bản Người dùng cung cấp thông tin để tạo một tài khoản Đăng nhập vào website bằng tài khoản vừa đăng ký. Yêu cầu đặc biệt Cần một email hợp lệ. Điều kiện sau cùng Khi đăng ký tài khoản mới thành công, người dùng sẽ dùng tài khoản đó để truy cập vào website. Điểm mở rộng Không.

Bảng 3.6: Mô tả Use Case Forgot Password

Tên Use Case Forgot Password Đối tượng Visitor, Customer, Manager. Điều kiện cần Đã đăng ký tài khoản trước đó.

Luồng cơ bản Người dùng cung cấp email đã quên mật khẩu.

Truy cập vào email để nhận được mã code.

Yêu cầu đặc biệt Cần một email hợp lệ. Điều kiện sau cùng Khi đăng ký tài khoản mới thành công, người dùng sẽ dùng tài khoản đó để truy cập vào website. Điểm mở rộng Không.

Bảng 3.7: Mô tả Use Case Manage Cart

Tên Use Case Manage Cart Đối tượng Customer. Điều kiện cần Đã đăng nhập tài khoản.

Người dùng chọn vào biểu tượng Cart trên thanh Header.

Truy cập được vào giỏ hàng và thực hiện được những chức năng mà hệ thống cung cấp.

Yêu cầu đặc biệt Không. Điều kiện sau cùng

Khi vào giỏ hàng, người dùng có thể thực hiện thanh toán các đơn hàng đã có trong giỏ hàng, xóa các đơn hàng hoặc chọn thêm những sản phẩm khác. Điểm mở rộng Không.

Bảng 3.8: Mô tả Use Case Payment

Tên Use Case Payment Đối tượng Customer. Điều kiện cần Đã đăng nhập tài khoản.

Người dùng chọn vào biểu tượng Cart trên thanh Header.

Truy cập được vào giỏ hàng và thực hiện thanh toán những sản phẩm đã thêm vào giỏ hàng. Điền thông tin cần thiết vào để tiến hành đặt đơn hàng Xác nhận thanh toán.

Truy cập vào trang Product Detail.

Chọn Buy Now để thực hiện thanh toán ngay. Điền thông tin cần thiết vào để tiến hành đặt đơn hàngXác nhận thanh toán.

Yêu cầu đặc biệt Không. Điều kiện sau cùng Sau khi thanh toán, trạng thái đơn hàng sẽ được lưu lại để người dùng dễ dàng theo dõi. Điểm mở rộng Không.

3.4.4.7 Use-case “Change User Profile”

Bảng 3.9: Mô tả Usecase Change User Profile

Tên Use Case Change User Profile Đối tượng Customer. Điều kiện cần Đã đăng nhập tài khoản.

Chọn biểu tượng “My profile” để truy cập vào hồ sơ tài khoản.

Người dùng thực hiện được các chức năng có trong trang Profile (chỉnh sửa thông tin tài khoản, đổi mật khẩu, chỉnh thông tin vận chuyển, quản lý đơn hàng, đăng xuất tài khoản).

Yêu cầu đặc biệt Chỉ có customer thực hiện được chức năng. Điều kiện sau cùng Thông tin cập nhật sẽ được thay đổi theo nhu cầu của khách hàng. Điểm mở rộng Không.

Bảng 3.10: Mô tả Use Case Manage product

Tên Use Case Manage product Đối tượng Manager. Điều kiện cần Đã đăng nhập tài khoản.

Chọn vào nút list product để đến trang List product. Người quản lý có thể thực hiện được các chức năng (tìm kiếm sản phẩm, tạo mới sản phẩm, sửa chửa sản phẩm,…).

Yêu cầu đặc biệt Chỉ có Manager thực hiện được chức năng. Điều kiện sau cùng Sau khi thực hiện, sản phẩm sẽ được cập nhật theo yêu cầu của người quản lý. Điểm mở rộng Không.

Tên Use Case Revenue manage Đối tượng Manager. Điều kiện cần Đã đăng nhập tài khoản.

Chọn vào nút Dashboard để đến trang Dashboard. Tại đây admin có thể chọn thời gian (tháng, năm) để thống kê

Yêu cầu đặc biệt Chỉ có Manager thực hiện được chức năng. Điều kiện sau cùng Sau khi thực hiện, hiển thị thông tin doanh thu Điểm mở rộng Không.

Tên Use Case Comment Đối tượng Customer. Điều kiện cần Đã đăng nhập tài khoản.

Luồng cơ bản Đăng nhập vào trang home Click vào một sản phẩm cụ thể, scroll xuống phía dưới và thực hiện gõ comment vào bên dưới sản phẩm và gửi comment.

Yêu cầu đặc biệt Chỉ có Customer thực hiện được chức năng. Điều kiện sau cùng Comment sẽ được hiển thị dưới sản phẩm, sẽ có người khác (user khác/ admin) vào trả lời Điểm mở rộng Không.

Tên Use Case Comment Đối tượng Customer. Điều kiện cần Đã đăng nhập tài khoản Đã mua sản phẩm đó từ trước

Luồng cơ bản Đăng nhập vào trang home Click vào một sản phẩm cụ thể, scroll xuống phía dưới click vào button

“Evaluate” Thực hiện đánh giá và click “Submit”

Yêu cầu đặc biệt Chỉ có Customer thực hiện được chức năng. Điều kiện sau cùng Đánh giá được lưu lại và cộng với các đánh giá từ khách hàng khác Sau đó hiển thị số số sao cho sản phẩm. Điểm mở rộng Không.

3.4.4.12 Use- case “Chat with admin”

Bảng 3.14: Mô tả Usecase Chat with admin

Tên Use Case Chat with admin Đối tượng Customer. Điều kiện cần Đã đăng nhập tài khoản.

Luồng cơ bản Đăng nhập vào trang home Click vào button

Yêu cầu đặc biệt Chỉ có Customer thực hiện được chức năng. Điều kiện sau cùng Khách hàng có thể thực hiện chat với admin Điểm mở rộng Không.

Bảng 3.15: Mô tả Usecase Chat

Tên Use Case Chat Đối tượng Admin Điều kiện cần Đã đăng nhập tài khoản admin

Luồng cơ bản Thực hiện login tài khoản admin Cick vào icon Chat trên thanh header

Yêu cầu đặc biệt Không Điều kiện sau cùng Admin có thể thấy và chat với toàn bộ user đã chat với mình Điểm mở rộng Không.

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

1 idusers int Khóa chính Lưu id của người dùng

Phân quyền tài khoản ( Visitor, customer and manager).

3 email varchar Lưu thông tin email.

4 password varchar Lưu thông tin password.

5 firstname varchar Lưu thông tin firstname

6 lastname varchar Lưu thông tin lastname

7 gender varchar Lưu thông tin giới tính.

8 phonenumber varchar Lưu thông tin số điện thoại.

9 days int Lưu thông tin ngày sinh.

10 months int Lưu thông tin tháng sinh.

11 years int Lưu thông tin năm sinh.

12 province varchar Lưu thông tin tỉnh.

13 district varchar Lưu thông tin quận.

14 wards varchar Lưu thông tin xã.

15 publicIdUser varchar Lưu public id để lấy ảnh trên cloundinary

16 avtuser longtext Lưu avatar của user

17 address varchar Lưu địa chỉ chi cụ thể

1 idcate int Khóa chính Lưu id của danh mục.

2 namecate varchar Lưu thông tin tên danh mục.

1 idproducts int Khóa chính Lưu id của sản phẩm.

2 idcate int Khóa ngoại Lưu id danh mục sản phẩm.

3 nameproducts varchar Lưu thông tin tên sản phẩm.

4 promotion varchar Lưu thông tin mô tả.

5 discount int Lưu thông tin giảm giá.

6 description varchar Lưu thông tin mô trả chi tiết sản phẩm.

1 idimage int Khóa chính Lưu id của ảnh.

2 idproducts int Khóa ngoại Lưu id sản phẩm.

4 publicId varchar Lưu thông tin mô tả.

1 idsize int Khóa chính Lưu id size của sản phẩm.

4 pricesize float Lưu giá tiền của size.

1 idcolor int Khóa chính Lưu id màu.

2 idsize int Khóa ngoại Lưu id size

3 namecolor varchar Lưu tên của màu.

4 quantity int Lưu số lượng của màu.

1 idusers int Khóa chính Lưu id của user.

2 idproducts int Khóa ngoại Lưu id product.

3 idsize int Khóa ngoại Lưu id size.

4 idcolor int Khóa ngoại Lưu id color.

5 idimage int Khóa ngoại Lưu id ảnh.

6 quantity int Lưu số lượng hiện tại người dùng đang muốn cho từng sản phẩm.

7 maxquantity int Số lượng sản phẩm hiện đang có trong kho

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

1 idiv int Khóa chính Lưu id của hóa đơn.

2 ivday datetime Khóa ngoại Lưu thời gian mà hóa đơn được đặt.

3 idusers int Khóa ngoại Lưu id user.

4 totalprice float Lưu tổng giá tiền.

5 emailreceive varchar Lưu email của người mua.

6 firstnamereceive varchar Lưu firstname của người mua

7 lastnamereceive varchar Lưu lastname của người mua

8 addressreceive varchar Lưu địa chỉ cụ thể của người mua

9 phonenumberrecei ve varchar Lưu số điện thoại của người mua

10 statusiv varchar Lưu trạng thái hóa đơn

11 type varchar Lưu loại thanh toán.

1 idiv int Khóa chính Lưu id hóa đơn.

3 idsize int Khóa ngoại Lưu id size.

4 idcolor int Khóa ngoại Lưu id màu.

6 price float Giá của từng món hàng.

7 quantity int Số lượng của từng món hàng

1 idfavorite int Khóa chính Lưu id lượt yêu thích

1 idevaluate int Khóa chính Lưu id lượt yêu thích

2 idusers int Khóa ngoại Lưu id sản phẩm.

3 idproducts int Khóa ngoại Lưu id user.

4 images json Lưu ảnh người dùng gửi vào khi đánh giá

5 evaluateday datetime Lưu thời gian đánh giá

6 starnumber json Lưu số sao người dung đánh giá

7 review longtext Lưu nội dung đánh giá của người dùng

8 performance json Lưu giá trị và số sao người dùng đánh giá cho hiệu suất

9 batterylife json Lưu giá trị và số sao người dùng đánh giá cho bộ bền bin

10 cameraquantity json Lưu giá trị và số sao người dùng đánh giá cho chất lượng camera

1 idcomment int Khóa chính Lưu id comment

4 comment longtext Lưu comment của người dùng.

6 commentday datetime Lưu thời gian người dùng thực hiện comment

1 idAdminChats string Khóa chính Lưu id admin

2 iduser string Khóa ngoại Lưu id user.

Khóa ngoại Lưu id kết hợp của admin và user

4 displayName string Lưu tên của user

5 photoURL string Lưu link avatar của user

Lưu thời gian người dùng thực hiện comment

Lưu giá trị để kiểm tra admin kiểm tra tin nhắn user chưa

Lưu giá trị để kiểm tra user kiểm tra tin nhắn của admin chưa

Lưu tin nhắn cuối cùng trong đoạn chat của admin và user

1 combineID int Khóa chính Lưu id admin

2 sendId int Khóa ngoại Lưu id user.

Khóa ngoại Lưu id kết hợp của admin và user

4 id string Lưu id được tạo bằng uuid

5 img string Lưu link avatar của user

Thiết kế giao diện

Hình 3.5: Hình Header UserBảng 3.30: Tính năng của Header

STT Tên tính năng Loại Chức năng

1 Search Input Tìm kiếm sản phẩm theo tên.

2 Seller Channel Link Chuyển đến màn hình đăng nhập admin.

3 Home Link Chuyển đến trang

4 Phone Link Hiển thị danh sách các loại sản phẩm.

5 Cart Link Chuyển đến trang Cart.

6 Authentication Link Lựa chọn chuyển đến trang

Hình 3.6: Hình Header Manager Bảng 3.31: Tính năng của Header Manager

1 Product Link Chuyển đến màn hình quản lý sản phẩm

2 Dashboard Link Chuyển đến dashboard đăng nhập admin.

3 Logout Link Thực hiện Logout

Bảng 3.32: Tính năng của Footer

1 Tên các sản phẩm Button Chuyển đến các loại sản phẩm.

Bảng 3.33: Tính năng màn hình Login

4 Forgot password Button Quên mật khẩu.

Bảng 3.34: Tính năng màn hình Register

1 Avatar Img Upload avatar của người dùng

2 Firstname Text Nhập Firstname người dùng

3 Lastname Text Nhập Lastname người dùng

6 Retype password Button Nhập lại password.

Hình 3.10: Màn hình Forgot passwordBảng 3.35: Tính năng màn hình Forgot password

2 Confirm Button Quên mật khẩu.

Hình 3.11: Màn hình Change password

Bảng 3.36: Tính năng màn hình Change password

1 Password Text Nhập mật khẩu.

2 Retype password Text Nhập lại mật khẩu.

Hình 3.12: Màn hình Home Page

Bảng 3.37: Tính năng màn hình Home Page

1 Arrow Left Button Nút qua trái.

2 Arrow Right Button Nút qua phải.

Danh sách danh mục sản phẩm Button

Chuyển sang trang danh mục sản phẩm theo danh mục.

4 Sản phẩm Button Chuyển sang trang chi tiết sản phẩm.

Bảng 3.38: Tính năng màn hình Category

1 Sắp xếp theo giá từ thấp đến cao

Button Sắp xếp theo giá từ thấp đến cao.

Sắp xếp theo giá từ cao đến thấp Button

Sắp xếp theo giá từ cao đến thấp.

3 Xem nhiều sản phẩm Button Xem nhiều sản phẩm.

Chuyển sang trang chi tiết sản phẩm.

Bảng 3.39: Tính năng màn hình Product detail

Thêm/ xóa khỏi danh sách sản phẩm yêu thích

2 List Size Button Chọn từng size của sản phẩm.

3 List Color Button Chọn từng màu của sản phẩm.

Thêm sản phẩm vào giỏ hàng.

6 Evaluate now Button Đánh giá bây giờ.

7 Input Input Nhập câu hỏi của bạn.

8 Send Button Gửi câu hỏi.

9 Answer Button Chuyển trang chi tiết sản phẩm.

Hình 3.16: Màn hình Cart Bảng 3.40: Tính năng màn hình Cart

1 Back Button Trở về trang chi tiết sản phẩm.

2 Xóa Button Xóa một sản phẩm trong giỏ hàng.

Tăng số lượng sản phẩm trong giỏ hàng.

4 Dấu trừ Button Gỉam số lượng sản phẩm trong giỏ hàng.

Hình 3.17: Màn hình Order info

Bảng 3.41: Tính năng màn hình Order info

2 Firstname Text Nhập lastname người mua hàng.

3 Lastname Text Nhập firstname người mua hàng.

4 Phone number Text Nhập số điện thoại người mua hàng.

5 Email Text Nhập email người mua hàng.

Choose a delivery method Button Chọn phương thức mua hàng.

10 Detail address Text Nhập đầy đủ địa chỉ giao hàng.

11 Continues Button Chuyển đến trang detail bill.

12 Choose add the product product

Button Quay về trang chi tiết sản phẩm.

Hình 3.18: Màn hình Detail bill

Hình 3.19: Màn hình Detail bill khi click Paypal

Hình 3.20: Màn hình Detail bill khi click Complete Purchase

Bảng 3.42: Tính năng màn hình Detail bill

Thực hiệnh thanh toán online thông qua Paypal

3 Checkout Button Thanh toán đơn hàng.

4 Choose add the product product

Button Quay về trang chi tiết sản phẩm.

3.5.16.Màn hình Page not found

Hình 3.22: Màn hình Page not found

3.5.17.Màn hình Profile (User profile)

Hình 3.23: Màn hình Profile (User profile) Bảng 3.43: Tính năng màn hình Profile (User profile)

1 Avatar img Nhập ảnh đại diện người dùng

2 First name Text Nhập first name của người dùng.

Nhập last name của người dùng

4 Email Text Nhập email của người dùng.

5 Phone number Text Nhập số điện thoại người dùng.

6 Gender Radio Chọn giới tính.

7 Date Button Chọn ngày sinh.

8 Month Button Chọn tháng sinh.

9 Year Button Chọn năm sinh.

Cập nhật thông tin người dùng.

3.5.18.Màn hình Profile (Change password)

Hình 3.24: Màn hình Profile (Change password)

Bảng 3.44: Tính năng màn hình Profile (Change password)

1 Current password Text Nhập mật khẩu hiện tại.

2 New password Text Nhập mật khẩu mới.

Text Nhập lại mật khẩu mới.

4 Update Button Cập nhật lại mật khẩu.

3.5.19.Màn hình Profile (Delivery address)

Hình 3.25: Màn hình Profile (Delivery address)

Bảng 3.45: Tính năng màn hình Profile (Delivery address)

1 Full name Text Nhập tên người dùng.

3 Phone number Text Nhập số điện thoại.

7 Address detail Text Nhập đầy đủ chi tiết địa chỉ.

8 Update Button Cập nhật thông tin.

Hình 3.26: Màn hình Profile (Purchase) Bảng 3.46: Tính năng màn hình Profile (Purchase)

Chuyển sang trang see detail.

2 Pagination Button Chuyển sang từng đơn hàng.

3.5.21.Màn hình Profile (See detail)

Hình 3.27: Màn hình See detail

3.5.22.Màn hình Profile (See logout)

Hình 3.28: Màn hình Profile (See logout)

3.5.23.Màn hình Profile (Purchase empty)

Hình 3.29: Màn hình Profile (Purchase empty)

Hình 3.30: Màn hình Product Modifier Bảng 3.47: Tính năng màn hình Product Modifier

1 Product Name Text Nhập tên sản phẩm.

2 Discount Text Nhập phần trăm giảm giá.

4 Description Text Mô tả chi tiết sản phẩm.

7 Save Button Lưu thông tin sản phẩm.

3.5.25.Màn hình Product Modifier (Modal)

Hình 3.31: Màn hình Product Modifier (Modal)

Bảng 3.48: Tính năng màn hình Product Modifier (Modal)

1 Name size Text Nhập tên size.

2 Price size Text Nhập giá size.

3 Cộng Button Thêm 1 or nhiều màu.

4 Name color Text Nhập tên màu.

5 Quantity Text Nhập số lượng.

Xóa màu và số lượng của màu.

8 OK Button Thêm mới 1 size.

Hình 3.32: Màn hình Product List Bảng 3.49: Tính năng màn hình Product List

Chuyển đến trang product modifier.

Chuyển đến trang product modifier nhưng hiển thị lại sản phẩm muốn cập nhật.

4 Delete Button Xóa sản phẩm.

3.5.27 Màn hình Product List (Empty)

Hình 3.33: Màn hình Product List (Empty)

Hình 3.34: Màn hình Dashboard Bảng 3.50: Tính năng màn hình Dashboard

1 Chọn tháng Combobox Chọn tháng muốn hiển thị thông tin thống kê

2 Chọn năm Combobox Chọn năm muốn hiển thị thông tin thống kê

Hình 3.35: Màn hình Chat Bảng 3.51: Tính năng màn hình Chat

Nhập vào tên của user để tìm kiếm đoạn chat

Nhập đoạn tin nhắn để gửi đến khách hàng

Chọn hình ảnh để gửi đến user.

Gửi tin nhắn và hình ảnh đính kèm đến khách hàng

CÀI ĐẶT VÀ THỬ NGHIỆM

Công nghệ sử dụng

● Công cụ thiết kế UI/UX: Figma, antd design

● Ngôn ngữ sử dụng: Javascript.

● Xây dựng website: HTML5, CSS3.

● Cơ sở dữ liệu: MySQL.

● Thư viện sử dụng: o Front-end: Reactjs. o Back-end: Nodejs.

● Dịch vụ hỗ trợ thanh toán chuyển tiền: paypal

Môi trường lập trình

● Visual Studio Code (VS Code).

Công cụ hỗ trợ

● Tìm hiểu các công cụ hỗ trợ: Figma, StarUML (WebApp hỗ trợ vẽ diagram).

● Môi trường làm việc: Notion.

Cài đặt

 Download source code qua dòng lệnh sau: o git clone https://github.com/Vanboizz/phoneFrontend.git

 Đầu tiên, ta cần mở project sau khi tải về gõ lệnh: o yarn i o yarn dev

Hướng phát triển

 Tích hợp chatbox tự động

 Mở rộng quyền cho bên trung gian ( shipper ) nhằm hỗ trợ về mặt vận chuyển

 Tích hợp tính năng an toàn thông tin nhằm bảo mật thông tin khách hàng

 Bổ sung thêm tính năng dự đoán đơn hàng, doanh thu và doanh số dựa trên số liệu trong quá khứ

Định dạng
Số trang	101
Dung lượng	5,68 MB