Xây dưng website bán sản phẩm công nghệ sử dụng golang và reactjs

Giao diện Quản lý sản phẩm áp dụng chương trình giảm giá .... Giao diện Quản lý sản phẩm áp dụng chương trình giảm giá – Tạo mới chương trình giảm giá .... Mô tả giao diện trang Quản lý

PHẦN MỞ ĐẦU

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Công nghệ thông tin hiện nay là ngành quyền lực hàng đầu, với ứng dụng rộng rãi trong mọi lĩnh vực của đời sống, kinh tế và xã hội Trong thời kỳ Cách mạng 4.0, tầm quan trọng của công nghệ thông tin càng được khẳng định, đóng vai trò là nền tảng và động lực cho sự phát triển toàn cầu Nhu cầu mua sắm nhanh chóng và hiệu quả ngày càng tăng, khiến cho các website thương mại điện tử trở nên phổ biến, trở thành phương tiện nhanh nhất để doanh nghiệp tiếp cận người tiêu dùng.

Thương mại điện tử mang lại lợi ích lớn nhất là khả năng tiếp cận hàng triệu khách hàng toàn cầu, cho phép doanh nghiệp mở rộng thị trường không chỉ trong khu vực địa phương mà còn ra thế giới Điều này giúp doanh nghiệp tăng trưởng quy mô hoạt động và thu hẹp khoảng cách địa lý, đồng thời nâng cao trải nghiệm mua sắm thuận tiện và linh hoạt cho khách hàng.

Website thương mại điện tử là bộ mặt thương hiệu trên internet, giúp doanh nghiệp truyền tải thông điệp, giá trị và hình ảnh đến khách hàng một cách rõ ràng Doanh nghiệp có thể xây dựng nhận diện thương hiệu thông qua thiết kế website, logo và thông tin sản phẩm Tương tác trực tiếp với khách hàng qua các kênh trực tuyến giúp doanh nghiệp hiểu rõ nhu cầu, thu thập phản hồi và cải thiện thương hiệu hiệu quả.

Dựa trên những nhu cầu thực tế đã được phân tích, nhóm thực hiện đề tài nhận thấy vai trò quan trọng của website thương mại điện tử trong cuộc sống hiện đại Vì vậy, nhóm đã quyết định chọn đề tài "Xây dựng website bán sản phẩm công nghệ" để đáp ứng nhu cầu này.

MỤC TIÊU CỦA ĐỀ TÀI

Mục tiêu chính của đề tài là nghiên cứu và áp dụng kiến thức để xây dựng một website Thương mại điện tử, giúp doanh nghiệp tiếp cận người tiêu dùng một cách nhanh chóng và hiệu quả.

Mục tiêu cụ thể của đề tài là áp dụng và thực hành các công nghệ ReactJS và Golang trong việc xây dựng một website thương mại điện tử, đáp ứng đầy đủ các yêu cầu cơ bản.

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

➢ Lọc/Tìm kiếm sản phẩm

➢ Thêm/xóa/cập nhật số lượng sản phẩm trong giỏ hàng

➢ Thêm sản phẩm vào danh sách yêu thích

➢ Xem lịch sử mua hàng

➢ Xem chi tiết đơn hàng

➢ Cập nhật tài khoản cá nhân

➢ Quản lý loại sản phẩm

➢ Quản lý tài khoản cá nhân

➢ Quản lý chương trình giảm giá

➢ Quản lý số lượng sản phẩm nhập kho

- Yêu cầu phi chức năng:

 Giao diện trực quan, dễ thao tác và thân thiện với người dùng

 Hình ảnh sản phẩm chất lượng

 Tốc độ tải trang nhanh

 Hệ quản trị đơn giản dễ sử dụng.

ĐỐI TƯỢNG NGHIÊN CỨU

Nghiên cứu này tập trung vào việc phân tích ưu điểm và hạn chế của giao diện cũng như chức năng của các website thương mại điện tử trong nước và quốc tế Bên cạnh đó, nghiên cứu cũng xem xét nhu cầu thực tế của người dùng khi sử dụng các nền tảng thương mại điện tử, từ đó xác định mục tiêu chính của đề tài.

Ngoài ra, nhóm thực hiện cũng nghiên cứu các công nghệ để có thể áp dụng vào việc xây dựng hệ thống, bao gồm:

Nghiên cứu framework Golang và Restful API giúp xây dựng các APIs hiệu quả, hỗ trợ truy xuất và thao tác dữ liệu một cách chính xác và nhanh chóng.

- Nghiên cứu và tìm hiểu môi trường lập trình Visual Code

- Nghiên cứu về cơ sở dữ liệu Postgres để lưu trữ dữ liệu

Nghiên cứu các thư viện JavaScript để phát triển giao diện người dùng, đặc biệt là ReactJS, cùng với framework hỗ trợ Redux và một số thư viện khác, là rất quan trọng để tối ưu hóa trải nghiệm người dùng và nâng cao hiệu suất ứng dụng.

- Tìm hiểu và nghiên cứu công nghệ Json Web Token để bảo mật cho hệ thống và kiểm soát tất cả các luồng dữ liệu ra vào.

CÔNG NGHỆ SỬ DỤNG

- Về phía Front-End: sử dụng framework reactJS để xây dựng và thiết kế giao diện người dùng

In the Back-End development, we utilize the Golang framework and Restful APIs to create robust APIs that facilitate data retrieval and manipulation Additionally, we implement Json Web Token technology to enhance system security.

- Về phía Database: sử dụng hệ quản trị cơ sở dữ liệu Postgres để lưu trữ dữ liệu người dùng.

PHẠM VI NGHIÊN CỨU

Phạm vi nghiên cứu của đồ án tập trung vào việc xây dựng một website bán sản phẩm công nghệ sử dụng công nghệ Golang và ReactJS Website sẽ cho phép khách hàng đăng ký tài khoản để đăng nhập và thực hiện giao dịch mua hàng một cách dễ dàng Đồng thời, hệ thống cũng đảm bảo người quản trị có khả năng quản lý hiệu quả cửa hàng, các sản phẩm, đơn hàng và thông tin người dùng.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thiện đề tài, nhóm sẽ rèn luyện nhiều kỹ năng và kiến thức bổ ích, đặc biệt về công nghệ mới Điều này không chỉ nâng cao tinh thần nghiên cứu và sáng tạo mà còn giúp cống hiến cho cộng đồng Nhóm cũng tích lũy kinh nghiệm cho các dự án tiếp theo Khi sản phẩm được áp dụng, việc sử dụng trang web thương mại sẽ ngày càng phát triển, mang lại sự tiện lợi, hiệu quả và an toàn trong mua bán giữa người tiêu dùng và nhà cung cấp.

CƠ SỞ LÝ THUYẾT

CÔNG NGHỆ PHÁT TRIỂN FRONT-END

(Nguồn: https://t3h.com.vn/tin-tuc/jsx-trong-reactjs)

ReactJS là thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt vào năm 2013, chuyên dùng để xây dựng các thành phần giao diện người dùng (UI) cho website Một trong những đặc điểm nổi bật của ReactJS là khả năng render dữ liệu ở cả phía máy chủ và phía máy khách.

ReactJS được xây dựng dựa trên nguyên lý component-based, cho phép tái sử dụng và phù hợp với ứng dụng một trang (SPA) Lập trình viên có thể xây dựng giao diện người dùng bằng cách sử dụng JSX, một cú pháp mở rộng của JavaScript ReactJS tạo ra các DOM ảo để tối ưu hóa quá trình render trang web, với DOM ảo là bản sao của DOM thực tế Khi dữ liệu thay đổi, ReactJS chỉ cập nhật DOM ảo, từ đó cải thiện hiệu suất của ứng dụng.

ReactJS được thiết kế dựa trên các thành phần UI riêng lẻ, giúp dễ dàng tái sử dụng

ReactJS đã trở thành lựa chọn hàng đầu cho các nhà phát triển web nhờ vào những tính năng vượt trội của nó Hiện nay, ReactJS vẫn giữ vị trí số 1 trong số các thư viện Front-End, khẳng định sự phổ biến và hiệu quả trong phát triển ứng dụng web.

ReactJS là một thư viện rất phổ biến và được sử dụng bởi nhiều ứng dụng web nổi tiếng, bao gồm Facebook, Instagram, Netflix, Airbnb và Uber

(Nguồn: https://www.w3schools.com/js/js_htmldom.asp)

JSX, viết tắt của JavaScript XML, là một cú pháp mở rộng cho JavaScript, cho phép lập trình viên dễ dàng viết HTML trong React JSX được biên dịch thành JavaScript thông thường trong quá trình chạy mã.

Nó cho phép các nhà phát triển viết HTML theo cách tự nhiên và dễ hiểu hơn [2]

Một số ưu điểm của JSX trong React:

• Tối ưu hóa mã JavaScript trong quá trình biên dịch giúp tăng tốc độ ứng dụng

• JSX có thể giúp giảm thiểu thời gian phát triển ứng dụng bằng cách phát hiện lỗi sớm trong quá trình biên dịch

• JSX giúp các nhà phát triển quen thuộc với HTML viết các mẫu HTML một cách hiệu quả hơn

DOM (Mô hình Đối tượng Tài liệu) là thành phần đại diện cho giao diện người dùng trong ứng dụng, và nó sẽ tự động cập nhật khi có sự thay đổi trong giao diện Tuy nhiên, việc thao tác quá nhiều lên DOM có thể gây giảm hiệu suất và làm chậm ứng dụng.

DOM được cấu trúc dưới dạng cây, cho phép các thay đổi và cập nhật diễn ra nhanh chóng Tuy nhiên, mỗi lần thay đổi, phần tử và các phần tử con của nó phải được cập nhật lại, dẫn đến việc hiển thị lại giao diện người dùng Quá trình render và hiển thị lại này là nguyên nhân chính khiến ứng dụng chậm lại Do đó, với càng nhiều thành phần giao diện người dùng, số lượng cập nhật DOM cũng tăng lên, yêu cầu hiển thị lại cho mỗi lần cập nhật.

DOM ảo là một giải pháp tối ưu cho hiệu suất của DOM thực, hoạt động như một bản sao ảo chỉ được cập nhật khi trạng thái ứng dụng thay đổi Việc này giúp cải thiện hiệu suất bằng cách giảm thiểu số lượng cập nhật cần thiết cho DOM thực.

Khi thêm phần tử mới vào giao diện người dùng, một DOM ảo sẽ được tạo thành cây, với mỗi phần tử là một nút Khi trạng thái của bất kỳ phần tử nào thay đổi, một cây DOM ảo mới sẽ được tạo ra và so sánh với cây trước đó để xác định các thay đổi cần thiết DOM ảo sẽ tính toán phương pháp tối ưu để thực hiện các thay đổi này trên DOM thực, giúp tối thiểu hóa hoạt động cập nhật và cải thiện hiệu suất.

Component là các cấu trúc cốt lõi trong ReactJS, và mọi ứng dụng phát triển bằng React đều được xây dựng từ các phần gọi là Component.

Theo tài liệu từ website React, component giúp chia giao diện người dùng (UI) thành các phần nhỏ, đơn giản hóa việc quản lý và tái sử dụng Mỗi component đảm nhiệm một phần hiển thị khác nhau, và khi kết hợp tất cả các component này, ta có được giao diện người dùng hoàn chỉnh.

Trong React, các Component trả về mã JSX để xác định nội dung hiển thị trên màn hình Có hai loại thành phần chính trong React là Class component và Function component.

State là trạng thái của component State có thể được thay đổi bởi người dùng hoặc bởi các phần tử khác trong ứng dụng [2]

Props là các thuộc tính được truyền từ các phần tử khác trong ứng dụng đến component Chúng có thể được sử dụng để cấu hình trạng thái hoặc hành vi của component, giúp tăng tính linh hoạt và tái sử dụng trong phát triển ứng dụng.

Life cycle của component trong ReactJS là quá trình từ khi tạo ra, thay đổi và hủy bỏ component Gồm 3 giai đoạn:

(Nguồn: https://fullstack.edu.vn/blog/co-ban-life-cycle-cua-component-trong- reactjs.html)

• constructor: Được gọi đầu tiên khi component được tạo Sử dụng để khởi tạo biến state, gắn event listener và thực hiện các thiết lập ban đầu

• render: Được gọi sau constructor, trả về phần tử HTML hoặc JavaScript XML (JSX) sẽ được render lên màn hình

componentDidMount là phương thức được gọi sau khi component đã được render và gắn vào DOM Nó thường được sử dụng để thực hiện các tác vụ phụ thuộc vào DOM như lấy dữ liệu, khởi động bộ đếm thời gian hoặc đăng ký listener cho sự kiện.

The componentDidUpdate method is invoked after a component re-renders and updates the DOM This lifecycle method is ideal for updating state or performing side effects that depend on the DOM following an update.

Hàm componentWillUnmount được gọi trước khi component bị gỡ bỏ khỏi DOM, giúp bạn thực hiện việc hủy đăng ký event listener, dừng các hoạt động chạy nền và dọn dẹp các nguồn tài nguyên khác.

CÔNG NGHỆ PHÁT TRIỂN BACK-END

Golang, viết tắt của Go, là một ngôn ngữ lập trình biên dịch, tĩnh và đa luồng được phát triển bởi Google vào năm 2007, nhưng thuộc dự án mã nguồn mở Ngôn ngữ này được thiết kế với tiêu chí đơn giản, hiệu quả và dễ học, đồng thời vẫn mạnh mẽ và linh hoạt So với C++ và Java, Golang có cú pháp tinh gọn hơn, giúp việc học trở nên dễ dàng hơn, đặc biệt cho những ai đã quen thuộc với C++.

Ngôn ngữ Golang nổi bật với khả năng xử lý đồng thời nhiều tác vụ nhờ vào Goroutines và Channels, cho phép thực hiện nhiều đoạn mã song song Tính năng này làm cho Golang trở thành lựa chọn lý tưởng cho việc phát triển các dịch vụ mạng hiệu suất cao, khả năng mở rộng tốt và giải quyết các vấn đề tính toán phức tạp.

Một trong những ưu điểm nổi bật của ngôn ngữ Golang là khả năng quản lý bộ nhớ tự động, giúp loại bỏ nhu cầu quản lý bộ nhớ thủ công Tính năng này không chỉ giảm thiểu nguy cơ xuất hiện lỗi bộ nhớ mà còn hạn chế các lỗi khác phát sinh trong quá trình lập trình.

Golang là một ngôn ngữ lập trình kết hợp ưu điểm của ngôn ngữ diễn giải, với tính dễ lập trình và kiểu động, cùng với hiệu suất và an toàn của ngôn ngữ biên dịch, kiểu tĩnh.

Golang tập trung vào giảm thiểu việc gõ phím và sự phức tạp trong thiết kế:

• Trong quá trình thiết kế, các nhà phát triển đã nỗ lực giảm bớt sự lộn xộn và phức tạp

• Không có khai báo biến và không có tệp tiêu đề, tất cả mọi thứ chỉ cần khai báo một lần

• Golang sử dụng cấu trúc := để khai báo và khởi tạo đơn giản, giúp giảm thiểu sự lặp lại

• Golang không có hệ thống thứ bậc kiểu Các kiểu chỉ đơn giản tồn tại, không cần phải thông báo về mối quan hệ của chúng

2.2.2 Ưu điểm của ngôn ngữ lập trình Golang Đơn giản : Golang là một ngôn ngữ lập trình đơn giản và dễ học, với cú pháp rõ ràng và trực quan Ngôn ngữ này phù hợp với cả người mới bắt đầu và các lập trình viên có kinh nghiệm Đồng thời : Golang hỗ trợ tính đồng thời tích hợp sẵn, giúp các nhà phát triển viết mã nguồn hiệu quả và có thể mở rộng cho hệ thống đa nhân và phân tán

Golang cung cấp tính năng quản lý bộ nhớ tự động, giúp các lập trình viên không phải lo lắng về việc phân bổ và giải phóng bộ nhớ, từ đó tăng cường hiệu suất phát triển ứng dụng.

Thời gian biên dịch nhanh : Golang có trình biên dịch nhanh, giúp quá trình phát triển diễn ra nhanh chóng và hiệu quả

Hỗ trợ đa nền tảng : Golang có thể biên dịch để chạy trên nhiều nền tảng khác nhau, bao gồm Windows, Linux và macOS

Kiểu dữ liệu mạnh mẽ : Golang là ngôn ngữ kiểu tĩnh, giúp phát hiện lỗi tại thời điểm biên dịch, ngăn ngừa lỗi xảy ra khi chạy chương trình

Golang nổi bật với hiệu suất cao và khả năng sử dụng bộ nhớ thấp, làm cho nó trở thành lựa chọn lý tưởng cho các ứng dụng đòi hỏi hiệu suất mạnh mẽ, như dịch vụ web và các ứng dụng tính toán phức tạp.

Golang là một ngôn ngữ lập trình kiểu tĩnh, nghĩa là loại dữ liệu được xác định tại thời điểm biên dịch Điều này giúp phát hiện và ngăn chặn các lỗi liên quan đến kiểu dữ liệu ngay từ giai đoạn biên dịch, tránh những sự cố có thể xảy ra khi chương trình đang chạy.

Golang sở hữu một cộng đồng lập trình viên rộng lớn và đang phát triển nhanh chóng, nhờ vào sự hỗ trợ từ nhiều công ty danh tiếng như Google, Uber và Dropbox.

2.2.3 Nhược điểm của ngôn ngữ lập trình Golang

Golang là một ngôn ngữ lập trình đang ngày càng được ưa chuộng nhờ vào hiệu suất cao, tính dễ học và tính dễ sử dụng Mặc dù vậy, người dùng cũng cần lưu ý đến một số nhược điểm của Golang.

Golang không hỗ trợ Generics, một tính năng quan trọng giúp lập trình viên viết mã nguồn linh hoạt và tái sử dụng cho nhiều loại dữ liệu khác nhau.

Golang, là một ngôn ngữ lập trình mới, chưa có thư viện phong phú như Python hay Java Điều này có thể tạo ra thách thức trong việc phát triển các ứng dụng phức tạp cần nhiều thư viện bên ngoài.

Quản lý bộ nhớ tự động (garbage collection) là một tính năng hữu ích giúp lập trình viên không phải lo lắng về việc quản lý bộ nhớ Tuy nhiên, trong một số tình huống, đặc biệt khi ứng dụng chứa nhiều đối tượng nhỏ, garbage collection có thể gây ra sự chậm trễ.

Golang không hỗ trợ lớp (class) như các ngôn ngữ lập trình hướng đối tượng truyền thống Thay vào đó, ngôn ngữ này sử dụng struct và interface để thực hiện các chức năng tương tự Điều này có thể gây khó khăn cho lập trình viên đã quen thuộc với việc sử dụng lớp trong quá trình phát triển ứng dụng.

Ngoài ra, Golang cũng có một số nhược điểm khác như:

Golang hiện tại không hỗ trợ tính năng operator overloading, điều này có thể làm cho mã nguồn trở nên khó đọc và khó hiểu hơn, vì không thể sử dụng cùng một toán tử cho nhiều kiểu dữ liệu khác nhau.

HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU POSTGRESQL

(Nguồn: https://tenten.vn/tin-tuc/postgresql-la-gi/)

PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ - đối tượng mã nguồn mở, được phát triển từ POSTGRES 4.2 tại phòng khoa học máy tính của Đại học California, Berkeley Hệ thống này có khả năng hoạt động trên nhiều nền tảng, bao gồm UNIX, Windows và Mac OS X.

PostgreSQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở, nổi bật với tính ổn định và bảo mật cao Được phát triển bởi cộng đồng toàn cầu, nó cung cấp nhiều tính năng nâng cao như kiểm soát truy cập, mã hóa dữ liệu và xác thực Hệ thống này hỗ trợ đa dạng loại dữ liệu và phương pháp truy vấn phức tạp, giúp việc lưu trữ và truy xuất dữ liệu trở nên thuận tiện hơn.

PostgreSQL nổi bật với khả năng mở rộng và tùy chỉnh linh hoạt, cho phép người dùng thêm các module mở rộng để cải thiện tính năng và điều chỉnh cấu trúc cơ sở dữ liệu theo nhu cầu cụ thể Hệ thống cũng hỗ trợ các tính năng như replica và sharding, giúp tăng cường khả năng chịu tải và độ tin cậy.

PostgreSQL là một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất toàn cầu, được nhiều doanh nghiệp lớn như Apple, Cisco, và Fujitsu, cũng như các tổ chức chính phủ như NASA và NOAA sử dụng Với tự hào là cơ sở dữ liệu mã nguồn mở tiên tiến nhất, PostgreSQL đáp ứng nhu cầu đa dạng của nhiều loại ứng dụng khác nhau.

2.3.2 Các tính năng nổi bật của PostgreSQL

Kiểu dữ liệu đa dạng:

PostgreSQL cung cấp nhiều kiểu dữ liệu đa dạng, bao gồm kiểu nguyên hàm như số nguyên, số thực, chuỗi và boolean; kiểu cấu trúc như ngày/giờ, mảng, phạm vi và UUID; kiểu tài liệu như JSON/JSONB, XML và key-value; cũng như kiểu hình học như điểm, đường thẳng, vòng tròn và đa giác, cùng với các kiểu dữ liệu tùy chỉnh.

Tính toàn vẹn dữ liệu là yếu tố thiết yếu, đảm bảo rằng dữ liệu luôn chính xác và đáng tin cậy Để duy trì tính toàn vẹn này, có thể sử dụng nhiều tính năng như khóa chính, khóa ngoại, ràng buộc duy nhất, ràng buộc not-null và ràng buộc loại trừ.

PostgreSQL cung cấp nhiều tính năng tối ưu hóa hiệu suất như lập danh mục b-tree, multicolumn, expressions và partial Ngoài ra, hệ thống còn hỗ trợ các loại lập danh mục nâng cao như GiST, SP-Gist, KNN GiST, GIN, BRIN và Bloom filters Trình lập kế hoạch và tối ưu hóa truy vấn phức tạp, cùng với khả năng quét index-only và thống kê số liệu trên nhiều cột, giúp nâng cao hiệu quả xử lý dữ liệu.

PostgreSQL áp dụng MVCC (Multi-Version Concurrency Control) để hỗ trợ nhiều người dùng truy cập đồng thời vào cơ sở dữ liệu mà không gây ảnh hưởng đến nhau Điều này không chỉ nâng cao hiệu suất mà còn đảm bảo độ tin cậy và khả năng phục hồi sau thảm họa cho hệ thống.

PostgreSQL offers robust features for reliability and disaster recovery, including Write-ahead Logging (WAL), replication, Point-in-time recovery (PITR), and table space management.

PostgreSQL hỗ trợ xây dựng hàng rào bảo mật có xác thực mạnh (SCRAM-SHA-

256, SSPI, LDAP, GSSAPI, Certificate,…), hệ thống kiểm soát truy cập kĩ càng, bảo mật cấp độ cột – hàng

PostgreSQL là một hệ quản trị cơ sở dữ liệu mạnh mẽ với khả năng mở rộng cao, hỗ trợ nhiều ngôn ngữ lập trình thủ tục như PL/PGSQL, Python, và Perl Nó cũng tích hợp thư viện mở rộng PostGIS, cho phép kết nối với các cơ sở dữ liệu hoặc luồng khác thông qua giao diện SQL chuẩn.

PostgreSQL có khả năng lưu trữ dữ liệu lớn, lên đến hàng trăm terabyte hoặc petabyte nhờ vào các tính năng phân vùng và phân tán Hệ thống này có thể được triển khai trên nhiều máy chủ để nâng cao khả năng phục vụ, đồng thời đảm bảo sự ổn định và tin cậy Việc điều chỉnh và cấu hình tùy chỉnh cũng góp phần tối ưu hóa hiệu suất của PostgreSQL.

PostgreSQL cung cấp khả năng tùy chỉnh cấu hình linh hoạt, giúp người dùng điều chỉnh hệ thống theo nhu cầu cụ thể của họ Các tùy chọn cấu hình này bao gồm tối ưu hóa hiệu suất, quản lý bộ đệm, và quản lý kết nối, cùng nhiều tính năng khác.

Tích hợp với các ngôn ngữ lập trình:

PostgreSQL hỗ trợ nhiều ngôn ngữ lập trình tích hợp (PL), cho phép người dùng tạo và lưu trữ các chức năng tùy chỉnh ngay trong cơ sở dữ liệu Các ngôn ngữ PL có sẵn bao gồm PL/pgSQL, PL/Python, PL/Perl, PL/Tcl, PL/Java và PL/R.

Chức năng tìm kiếm văn bản:

PostgreSQL hỗ trợ tính năng tìm kiếm văn bản đầy đủ và hệ thống hóa ký tự một cách khoa học thông qua ICU collations, giúp đảm bảo rằng các tìm kiếm diễn ra chính xác và nhất quán.

Đảm bảo tính sẵn sàng của cơ sở dữ liệu là rất quan trọng, giúp nó luôn hoạt động hiệu quả và có khả năng phục hồi nhanh chóng trong trường hợp xảy ra thảm họa hoặc sự cố.

• Cho phép chạy các trang web, ứng dụng web động với LAMP

• Lưu nhật ký đã viết trước đó để sử dụng như một cơ sở dữ liệu với khả năng sửa lỗi tốt

• Có sẵn mã nguồn miễn phí theo giấy phép mã nguồn mở, cho phép chỉnh sửa và triển khai tùy theo nhu cầu của người dùng

• Có khả năng đối tượng hóa dữ liệu

• Có một cộng đồng đông đảo và nhiều kinh nghiệm

• Giảm thiểu việc bảo trì hệ thống

• Do không thuộc quyền quản lý của bất kỳ tổ chức nào nên gây khó khăn cho người dùng khi muốn tiếp cận với đầy đủ tính năng

• Tập trung vào khả năng tương thích nên khi thực hiện thay đổi để cải thiện tốc độ thì sẽ yêu cầu nhiều công việc hơn so với MySQL

• Một số ứng dụng nguồn mở không hỗ trợ PostgreSQL dù có hỗ trợ MySQL

• Hiệu suất chậm hơn so với MySQL.

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

Website FPT Shop

Link: https://fptshop.com.vn/

FPT Shop là một trong những đơn vị hàng đầu cung cấp sản phẩm kỹ thuật số như điện thoại, máy tính bảng, laptop, PC và phụ kiện điện tử tại Việt Nam Với phong cách trẻ trung, hiện đại và sáng tạo, FPT Shop không chỉ thu hút đông đảo người tiêu dùng Internet mà còn khẳng định vị thế độc tôn trong ngành công nghệ và thị trường thương mại điện tử.

Hình 3.2 Website thương mại điện tử FPT Shop Ưu điểm:

Trang web được thiết kế thân thiện và tiện lợi, cung cấp thông tin chi tiết về các sản phẩm chính của cửa hàng Với các phím tắt cho từng dòng sản phẩm như Phụ kiện, Máy tính bảng, Apple, Điện thoại, và Laptop, khách hàng dễ dàng tìm kiếm sản phẩm theo nhu cầu của mình.

Cung cấp hình ảnh phong phú về sản phẩm cùng với thông tin chi tiết về chức năng, cấu hình và thông số kỹ thuật, giúp khách hàng dễ dàng lựa chọn và xác định sản phẩm phù hợp nhất.

- Hỗ trợ tính năng so sánh giữa các sản phẩm giúp người dùng dễ dàng hơn trong việc lựa chọn sản phẩm phù hợp

Hình 3.3 Tính năng so sánh sản phẩm - Website FPT Shop

- Hỗ trợ nhiều phương thức thanh toán và các khuyến mãi tương ứng, cập nhật liên tục các tin tức về khuyến mãi và ra mắt sản phẩm mới

- Cho phép người dùng đánh giá, bình luận về sản phẩm, hỗ trợ khách hàng nhanh chóng trực tiếp qua Zalo

- Hệ thống dễ bị nghẽn trong những giờ cao điểm

- Bước xuất hóa đơn dễ bị treo, đơ và không hoàn tất được giao dịch

Hệ thống hiện có hơn 150 cửa hàng trên toàn quốc và đang mở rộng nhanh chóng, tuy nhiên vẫn chưa kịp nâng cấp để đáp ứng đầy đủ các yêu cầu.

Website CellphoneS

Link: https://cellphones.com.vn/

CellphoneS là một trong những trang web thương mại điện tử hàng đầu tại Việt Nam, chuyên cung cấp các sản phẩm công nghệ và phụ kiện chất lượng Mặc dù không có sự đầu tư lớn, CellphoneS vẫn khẳng định được thương hiệu nhờ vào sự năng động, trẻ trung và dịch vụ khách hàng tận tâm, hiệu quả.

Hình 3.4 Website thương mại điện tử CellphoneS Ưu điểm:

- Hỗ trợ nhiều phương thức thanh toán

- Cho phép khách hàng đánh giá và bình luận về sản phẩm

- Có các chương trình Flashsales cho các sản phẩm tại các khung giờ cụ thể, hỗ trợ khách hàng có thể mua sắm với mức ưu đãi đặc biệt

- Không có quảng cáo gây khó chịu

- Hỗ trợ người dùng trực tiếp và nhanh chóng qua chức năng “Chat với nhân viên tư vấn” hoặc qua mục bình luận

- Hỗ trợ giao hàng nhanh đối với một số khu vực

- Cung cấp nhiều bài blog, tin tức công nghệ với nhiều kiến thức và tin tức bổ ích

- Danh sách sản phẩm chưa thực sự đáp ứng được nhu cầu người dùng

- Hình ảnh sản phẩm còn đơn điệu

- Giao diện có quá nhiều banner gây rối mắt

- Thông tin chi tiết sản phẩm khá ít, các thông số chi tiết không quá nổi bật khiến người dùng khó nhận biết.

Website Newegg

Link: https://www.newegg.com/

Newegg là một trong những trang web hàng đầu cho những ai đang tìm kiếm máy tính bảng, điện thoại di động và máy tính xách tay Ngoài ra, trang web còn cung cấp đa dạng phần mềm, bao gồm phần mềm video, giáo dục, âm thanh, chống vi-rút, lập trình và phát triển web.

Newegg có hơn 3 triệu sản phẩm và rất phổ biến trong số những người nghiện công nghệ và người mua sắm trực tuyến

Hình 3.5 Website thương mại điện tử Newegg Ưu điểm:

- Hình ảnh sản phẩm chất lượng và mô tả sản phẩm chi tiết

Đánh giá sản phẩm chi tiết và chính xác là yếu tố quan trọng giúp khách hàng dễ dàng lựa chọn sản phẩm phù hợp Thông tin về các thông số kỹ thuật và chức năng nổi bật của sản phẩm sẽ cung cấp cái nhìn tổng quan, hỗ trợ người tiêu dùng trong quyết định mua sắm.

- Hỗ trợ nhiều công cụ tìm kiếm sản phẩm giúp người dùng dễ dàng tìm được sản phẩm theo nhu cầu

- Hỗ trợ chủ đề giao diện tương thích theo nhu cầu của người dùng

- Hỗ trợ đa ngôn ngữ

- Hỗ trợ tính năng so sánh các sản phẩm tương tự

Hình 3.6 Tính năng so sánh sản phẩm – Website Newegg

- Giao diện chi tiết sản phẩm chứa nhiều mục nhỏ gây rối mắt

Hình 3.7 Chi tiết sản phẩm - Website Newegg

Website BestBuy

Best Buy là một trang web uy tín và chất lượng, nổi tiếng trong cộng đồng mua sắm trực tuyến Đây là điểm đến ưa thích của nhiều người tiêu dùng hàng ngày, đặc biệt là những ai yêu thích việc mua sắm qua mạng.

Khi truy cập vào BestBuy, người dùng sẽ dễ dàng tìm thấy nhiều sản phẩm yêu thích nhờ vào cách sắp xếp hàng hóa khoa học và dễ tìm trên các gian hàng trực tuyến.

Hiện nay, BestBuy đã có ở Việt Nam trong vài năm, tuy nhiên cách thức mua hàng của Bestbuy Việt Nam và quốc tế có khá nhiều điểm khác biệt

Hình 3.8 Website thương mại điện tử BestBuy Ưu điểm:

- Giao diện trực quan, bố cục khoa học, rõ ràng

- Cung cấp dịch vụ cài đặt và sửa chữa sản phẩm của các thương hiệu uy tín như Dell, Sony, HP, LG

- Cho phép người dùng đánh giá và bình luận về sản phẩm

- Các thông số kỹ thuật về sản phẩm chi tiết, cụ thể

- Cung cấp các bài viết và topic bổ ích

- Hỗ trợ tính năng so sánh các sản phẩm tương tự, cho phép người dùng lưu lại lịch sử so sánh

Hình 3.9 Tính năng so sánh sản phẩm - Website BestBuy

- Hạn chế về ngôn ngữ và khu vực

- Giao diện chưa thực sự thân thiện với nhà bán nhỏ lẻ

- Các chính sách về giá tương đối khắt khe.

Kinh nghiệm rút ra

Qua khảo sát và phân tích 5 website thương mại điện tử, nhóm nhận thấy mỗi ứng dụng đều có những điểm mạnh và hạn chế riêng Mặc dù vậy, tất cả các website này đều thu hút và phục vụ nhu cầu của một lượng người dùng nhất định Việc xây dựng một website thương mại điện tử không chỉ dựa vào giao diện đẹp hay nhiều chức năng, mà còn phụ thuộc vào mức độ phổ biến và khả năng đáp ứng nhu cầu của nhóm người dùng cụ thể.

Nhóm xác định rằng website cần được thiết kế nhằm phục vụ nhu cầu của một nhóm người dùng cụ thể Ứng dụng phải có giao diện đẹp mắt, thuận tiện và dễ sử dụng, với các chức năng hiệu quả và tối ưu để mang lại trải nghiệm tốt nhất cho người dùng.

XÁC ĐỊNH YÊU CẦU

3.2.1 Yêu cầu chức năng của người dùng

Bảng 3.1 Bảng yêu cầu chức năng của người dùng

STT Yêu cầu Loại YC Mô tả/ Ràng buộc

1 Đăng ký tài khoản Lưu trữ

Mỗi email/số điện thoại chỉ được đăng kí một lần

Chức năng đăng ký tài khoản

2 Đăng nhập Kết xuất Đã đăng ký tài khoản

3 Đăng xuất Lưu trữ Đã đăng nhập vào hệ thống

4 Cập nhật tài khoản cá nhân Lưu trữ Đã đăng nhập vào hệ thống

5 Tìm kiếm/Lọc sản phẩm Tra cứu

6 Xem chi tiết sản phẩm Kết xuất

10 Đặt hàng Lưu trữ Đã đăng nhập vào hệ thống

11 Thanh toán Lưu trữ Đã đăng nhập vào hệ thống

12 Thêm/sửa/xóa sản phẩm trong giỏ hàng Lưu trữ Đã đăng nhập vào hệ thống

13 Bình luận sản phẩm Lưu trữ Đã đăng nhập vào hệ thống

14 Thay đổi mật khẩu Lưu trữ Đã đăng nhập vào hệ thống

15 Xem lịch sử mua hàng Lưu trữ Đã đăng nhập vào hệ thống

16 Xem chi tiết đơn hàng Lưu trữ Đã đăng nhập vào hệ thống

17 Cập nhật tài khoản cá nhân (Quản trị viên) Lưu trữ Đã đăng nhập vào hệ thống

(Quản trị viên) Lưu trữ Đã đăng nhập vào hệ thống

20 Quản lý loại sản phẩm (Quản trị viên) Lưu trữ Đã đăng nhập vào hệ thống

(Quản trị viên) Lưu trữ Đã đăng nhập vào hệ thống

23 Quản lý nhãn hàng Lưu trữ Đã đăng nhập vào hệ thống

24 Quản lý chương trình giảm giá Lưu trữ Đã đăng nhập vào hệ thống

25 Quản lý số lượng sản phẩm nhập kho Lưu trữ Đã đăng nhập vào hệ thống

3.2.2 Yêu cầu chức năng hệ thống

Bảng 3.2 Bảng yêu cầu chức năng hệ thống

STT Yêu cầu Mô tả/ Ràng buộc Ghi chú

* Người dùng chưa đăng ký thực hiện được các chức năng ở trang của mình gồm:

- Xem danh sách sản phẩm/chi tiết sản phẩm

- Lọc/Tìm kiếm sản phẩm

- Thêm sản phẩm vào CompareList

- Xem bình luận của sản phẩm

* Người dùng đã đăng ký thực hiện được các chức năng ở trang của mình gồm:

- Xem danh sách sản phẩm/chi tiết sản phẩm

- Thêm/sửa/xóa sản phẩm trong giỏ hàng

- Thêm sản phẩm vào WishList

- Thêm sản phẩm vào CompareList

- Cập nhật tài khoản cá nhân

- Xem lịch sử mua hàng

- Xem chi tiết đơn hàng

* Quản trị viên thực hiện được các chức năng ở trang của mình gồm:

- Quản lý loại sản phẩm

- Quản lý chương trình giảm giá

- Quản lý số lượng sản phẩm nhập kho

- Cập nhật tài khoản cá nhân

2 Sao lưu phục hồi Sao lưu lại dữ liệu database mỗi tháng một lần

3 Tự động gửi mail Tự động gửi mail thông tin đơn hàng về cho người dùng mỗi lần đặt hàng

Bảng 3.3 Bảng yêu cầu phi chức năng

STT Yêu cầu Loại yêu cầu Ghi chú

1 Giao diện thân thiện dễ nhìn Tính tiện dụng

2 Tốc độ phản hồi của API nhanh < 5s Tính hiệu quả

3 Có hiệu ứng khi người dùng tương tác Tính hiệu quả

4 Các tương tác thay đổi dữ liệu hệ thống nên sử dụng phương thức POST Tính bảo mật

5 Dễ dàng nâng cấp khi có yêu cầu Tính tiến hoá

6 Tỉ lệ xảy ra lỗi thấp < 5% Tính hiệu quả

7 Tỉ lệ sai số thấp < 0.05% Tính hiệu quả

8 Tương thích với hầu hết các trình duyệt Tính hiệu quả

9 Dễ dàng thay đổi các cài đặt Tính tiến hóa

MÔ HÌNH HÓA YÊU CẦU

Hệ thống bao gồm hai nhóm người dùng chính: Khách hàng, được chia thành Guest (người dùng chưa đăng ký tài khoản) và Customer (người dùng đã đăng ký tài khoản), cùng với vai trò của Quản trị viên.

• Phía Khách hàng (Guest và Customer)

Hình 3.10 Use Case của Khách hàng

• Phía Quản trị viên (Admin)

Bảng 3.4 Bảng đặc tả Use Case Đăng ký

Use Case Name Đăng ký

Short Description Người dùng đăng ký tài khoản mới bằng email để truy cập được vào hệ thống

Actor(s) Người dùng chưa đăng ký tài khoản (Guest)

Pre-conditions Người dùng có tài khoản email hợp lệ và chưa đăng ký trên hệ thống

Khi người dùng đăng ký tài khoản thành công, hệ thống sẽ thông báo và tự động điều hướng họ đến trang chủ Ngược lại, nếu quá trình đăng ký không thành công, hệ thống sẽ hiển thị thông báo lỗi để người dùng biết.

Basic Flow (1) Người dùng truy cập vào trang Register

(2) Hệ thống hiển thị form đăng ký

(3) Người dùng nhập đầy đủ thông tin đăng ký và nhấn chọn nút “Register” [E1]

(4) Hệ thống kiểm tra tính hợp lệ của thông tin vừa nhập [E2]

(5) Hệ thống hiển thị thông báo đăng ký tài khoản thành công và điều hướng người dùng đến trang chủ

Exception Flow(s) [E1] Người dùng nhấn nút "Log In”

1.1 Kết thúc Use case 1.2 Hệ thống điều hướng đến trang Log In

[E2] Người dùng nhập thông tin đăng ký không hợp lệ

2.1 Hệ thống thông báo lỗi và yêu cầu người dùng nhập lại thông tin

2.2 Use Case quay lại thực hiện bước (3)

Bảng 3.5 Bảng đặc tả Use Case Đăng nhập

Use Case Name Đăng nhập

Short Description Người dùng đăng nhập vào hệ thống

Pre-conditions Người dùng đã đăng ký tài khoản trên hệ thống và tài khoản không bị vô hiệu hóa

Post-condition Thành công: Người dùng đăng nhập và truy cập vào hệ thống thành công

Thất bại: Hệ thống thông báo lỗi đăng nhập không thành công

Basic Flow (1) Người dùng truy cập vào trang Log In

(2) Hệ thống hiển thị form đăng nhập bao gồm email/username/phone và password

(3) Người dùng nhập thông tin đăng nhập và nhấn chọn nút “Login” [E1]

(4) Hệ thống xác thực thông tin đăng nhập [E2]

(5) Người dùng đăng nhập thành công và hệ thống điều hướng người dùng đến trang chủ

Exception Flow(s) [E1] Người dùng nhấn chọn nút “Register”

1.1 Kết thúc Use Case 1.2 Hệ thống điều hướng đến trang Register

[E2] Hệ thống xác thực thông tin đăng nhập không chính xác

2.1 Hệ thống thông báo đăng nhập thất bại 2.2 Use case quay lại thực hiện bước (3)

Bảng 3.6 Bảng đặc tả Use Case Đăng xuất

Use Case Name Đăng xuất

Short Description Người dùng đăng xuất khỏi hệ thống

Pre-conditions Người dùng đã đăng nhập và truy cập vào hệ thống thành công

Post-condition Người dùng đăng xuất khỏi hệ thống thành công

Basic Flow (1) Người dùng nhấn chọn nút “Log out”

(2) Hệ thống thoát khỏi tài khoản người dùng và điều hướng người dùng đến trang “Log In”

Alternate Flow(s) Nếu việc đăng xuất thất bại thì hệ thống giữ trạng thái hiện tại

3.3.1.4 Use Case Tìm kiếm sản phẩm

Bảng 3.7 Bảng đặc tả Use Case Tìm kiếm sản phẩm

Use Case Name Tìm kiếm sản phẩm

Short Description Người dùng tìm kiếm sản phẩm

Post-condition Người dùng tìm được sản phẩm theo nhu cầu

Basic Flow (1) Người dùng nhấn vào thanh tìm kiếm

(2) Người dùng nhập từ khóa liên quan đến sản phẩm muốn tìm kiếm và nhấn chọn icon tìm kiếm hoặc nhấn phím Enter [E1]

(3) Hệ thống hiển thị những sản phẩm liên quan đến từ khóa người dùng nhập

Exception Flow(s) [E1.1] Người dùng xóa từ khóa vừa nhập

3.3.1.5 Use Case Lọc sản phẩm

Bảng 3.8 Bảng đặc tả Use Case Lọc sản phẩm

Use Case Name Lọc sản phẩm

Short Description Người dùng lọc sản phẩm

Post-condition Người dùng lọc được các sản phẩm đúng theo các tiêu chí đã chọn

Basic Flow (1) Người dùng nhấn nút “Filter”

(2) Người dùng chọn các tiêu chí về sản phẩm muốn tìm kiếm, chọn phạm vi giá tiền [E1]

(3) Nhấn ngoài sidebar hoặc nút “Close” để đóng popup filter

(4) Hệ thống hiển thị những sản phẩm phù hợp với các tiêu chí mà người dùng đã chọn [E2]

Exception Flow(s) [E1] Không tồn tại sản phẩm thỏa mãn các tiêu chí đã chọn

1.1 Hệ thống thông báo không tìm thấy sản phẩm phù hợp

1.2 Use Case quay lại thực hiện bước (1)

[E2] Khi người dùng nhấn vào “Reset Filter”

[E1.2] Không tồn tại sản phẩm liên quan đến từ khóa

1.2.1 Hệ thống hiển thị không tìm thấy sản phẩm phù hợp

1.2.2 Use Case quay lại thực hiện bước (2)

3.3.1.6 Use Case Xem chi tiết sản phẩm

Bảng 3.9 Bảng đặc tả Use Case Xem chi tiết sản phẩm

Use Case Name Xem chi tiết sản phẩm

Short Description Người dùng xem mô tả chi tiết của sản phẩm

Post-condition Hệ thống hiển thị thông tin chi tiết của sản phẩm đã chọn

Basic Flow (1) Người dùng nhấn chọn vào sản phẩm muốn xem chi tiết

(2) Hệ thống hiển thị mô tả chi tiết của sản phẩm người dùng vừa chọn [E1]

Exception Flow(s) [E1] Sản phẩm không còn trên hệ thống

1.1 Hệ thống hiển thị không tìm thấy sản phẩm

3.3.1.7 Use Case Cập nhật giỏ hàng

Bảng 3.10 Bảng đặc tả Use Case Cập nhật giỏ hàng

Use Case Name Cập nhật giỏ hàng

Short Description Người dùng cập nhật sản phẩm trong giỏ hàng

Post-condition Người dùng cập nhật giỏ hàng thành công

Hệ thống hiển thị chính xác thông tin trong giỏ hàng của người dùng

Basic Flow (1) Người dùng chọn biểu tượng giỏ hàng

(2) Hệ thống hiển thị popup giỏ hàng, người dùng nhấn vào nút “View Cart”

(3) Hệ thống điều hướng đến trang Cart

(4) Người dùng cập nhập thông tin trong giỏ hàng [E1]

(5) Hệ thống thông báo cập nhật giỏ hàng thành công

Exception Flow(s) [E1] Cập nhật thông tin giỏ hàng không thành công

1.1 Hệ thống hiển thị thông báo lỗi và thông tin sản phẩm trong giỏ hàng không thay đổi

3.3.1.8 Use Case Thêm sản phẩm vào WishList

Bảng 3.11 Bảng đặc tả Use Case Thêm sản phẩm vào WishList

Use Case Name Thêm sản phẩm vào WishList

Short Description Người dùng thêm sản phẩm vào WishList

Pre-conditions Người dùng đã đăng nhập và truy cập thành công vào hệ thống

Post-condition Sản phẩm được thêm thành công vào WishList

Basic Flow (1) Tại danh sách sản phẩm, nhấn chọn vào icon trái tim ở sản phẩm muốn thêm vào WishList [A1]

(2) Hệ thống hiển thị thông báo sản phẩm được thêm thành công vào WishList [E1]

Alternate Flow(s) [A1] Thêm sản phẩm vào WishList ở trang Detail

Product 1.1 Tại trang Chi tiết sản phẩm, nhấn vào nút

1.2 Hệ thống hiển thị thông báo sản phẩm được thêm vào danh sách yêu thích thành công [E1]

Exception Flow(s) [E1] Sản phẩm được thêm vào WishList không thành công

1.1 Hệ thống hiển thị thông báo sản phẩm được thêm vào WishList không thành công

3.3.1.9 Use Case Thêm sản phẩm vào CompareList

Bảng 3.12 Bảng đặc tả Use Case Thêm sản phẩm vào Compare List

Use Case Name Thêm sản phẩm vào CompareList

Short Description Người dùng thêm sản phẩm vào CompareList

Post-condition Sản phẩm được thêm thành công vào ComapreList

Basic Flow (3) Tại danh sách sản phẩm, nhấn chọn vào icon so sánh ở sản phẩm muốn thêm vào CompareList [A1]

(4) Hệ thống hiển thị thông báo sản phẩm được thêm thành công vào CompareList [E1]

Alternate Flow(s) [A1] Thêm sản phẩm vào CompareList ở trang Detail

Product 1.1 Tại trang Chi tiết sản phẩm, nhấn vào nút

1.2 Hệ thống hiển thị thông báo sản phẩm được thêm vào CompareList thành công [E1]

Exception Flow(s) [E1] Sản phẩm được thêm vào CompareList không thành công

1.1 Hệ thống hiển thị thông báo sản phẩm được thêm vào CompareList không thành công

Bảng 3.13 Bảng đặc tả Use Case Đặt hàng

Use Case Name Đặt hàng

Short Description Người dùng tiến hành đặt hàng

Post-condition Người dùng đặt hàng thành công

Basic Flow (1) Người dùng nhấn chọn nút “Proceed to Checkout” ở trang giỏ hàng

(2) Người dùng kiểm tra thông tin đơn hàng và nhập thông tin người nhận hàng, địa chỉ giao hàng

(3) Người dùng chọn phương thức thanh toán và nhập thông tin thanh toán (nếu thanh toán bằng ví) và nhấn chọn nút “Place Order” [E1]

(4) Hệ thống hiển thị thông báo đặt hàng thành công

Exception Flow(s) [E1] Đơn hàng không được đặt thành công

1.1 Hệ thống hiển thị thông báo đặt hàng không thành công

3.3.1.11 Use Case Cập nhật thông tin tài khoản

Bảng 3.14 Bảng đặc tả Use Case Cập nhật thông tin tài khoản

Use Case Name Cập nhật thông tin tài khoản

Short Description Người dùng cập nhật thông tin tài khoản

Post-condition Thông tin tài khoản người dùng được cập nhật thành công

Basic Flow (1) Người dùng mở trang “Profile”

(2) Người dùng chỉnh sửa thông tin và nhấn chọn nút

(3) Hệ thống hiển thị thông báo cập nhật thông tin tài khoản thành công

Exception Flow(s) [E1] Cập nhật thông tin không thành công

1.1 Hệ thống hiển thị thông báo cập nhật thông tin không thành công

3.3.1.12 Use Case Xem lịch sử mua hàng

Bảng 3.15 Bảng đặc tả Use Case Xem lịch sử mua hàng

3.3.1.13 Use Case Xem chi tiết đơn hàng

Bảng 3.16 Bảng đặc tả Use Case Xem chi tiết đơn hàng

Use Case Name Xem lịch sử mua hàng

Short Description Người dùng xem lịch sử mua hàng

Post-condition Thông tin lịch sử mua hàng của người dùng được hiển thị chính xác

Basic Flow (1) Người dùng nhấn vào biểu tượng tài khoản trên header và hệ thống điều hướng đến trang My Account

(2) Người dùng nhấn vào “My Orders” trên thanh menu

(3) Hệ thống hiển thị danh sách các đơn hàng của người dùng

Use Case Name Xem chi tiết đơn hàng

Short Description Người dùng xem chi tiết đơn hàng

Pre-conditions Người dùng đã đăng nhập và truy cập thành công vào hệ thống Và đã có ít nhất một đơn hàng trên hệ thống

Post-condition Thông tin chi tiết về đơn hàng của người dùng được hiển thị chính xác

3.3.1.14 Use Case Thay đổi mật khẩu

Bảng 3.17 Bảng đặc tả Use Case Thay đổi mật khẩu

3.3.1.15 Use Case Thêm loại sản phẩm

Bảng 3.18 Bảng đặc tả Use Case Thêm loại sản phẩm

Use Case Name Thêm loại sản phẩm

Basic Flow (1) Tại trang My Orders, người dùng nhấn vào nút

(2) Hệ thống điều hướng đến trang Chi tiết đơn hàng vừa chọn

Use Case Name Thay đổi mật khẩu

Short Description Người dùng thay đổi mật khẩu

Post-condition Thay đổi mật khẩu mới thành công

Basic Flow (1) Nhập mật khẩu hiện tại ở trường Current Password

(2) Nhập mật khẩu mới tại trường New Password

(3) Nhập lại mật khẩu mới tại trường Confirm Password [E1]

(5) Hệ thống hiển thị mật khẩu đã được cập nhật thành công và điều hướng đến trang Đăng nhập

Exception Flow(s) [E1] So sánh mật khẩu không trùng khớp

1.1 Hệ thống thông báo mật khẩu không khớp và yêu cầu nhập lại

Post-condition Hệ thống thông báo loại sản phẩm đã được thêm thành công và thông tin loại sản phẩm được hiển thị trong trang Category Management

Basic Flow (1) Người dùng nhấn chọn nút “Add New” ở trang

(2) Hệ thống hiển thị popup Create New Category

(3) Người dùng điền đầy đủ thông tin loại sản phẩm cần tạo mới [E1]

(5) Hệ thống hiển thị thông báo thêm loại sản phẩm mới thành công và loại sản phẩm mới được hiển thị trong trang Category Management

Exception Flow(s) [E1] Người dùng nhấn nút “Cancel”

[E2] Thêm loại sản phẩm mới không thành công

2.1 Hệ thống hiển thị thông báo quá trình thêm loại sản phẩm không thành công và dữ liệu ở trang Category Management không thay đổi

3.3.1.16 Use Case Thêm sản phẩm

Bảng 3.19 Bảng đặc tả Use Case Thêm sản phẩm

Use Case Name Thêm sản phẩm

Short Description Người dùng tiến hàng thêm sản phẩm

Post-condition Hệ thống thông báo sản phẩm được thêm thành công và thông tin sản phẩm được hiển thị trong trang Product Management

(2) Hệ thống điều hướng đến trang Create New Product

(3) Người dùng điền đầy đủ thông tin sản phẩm cần tạo mới [E1]

(5) Hệ thống hiển thị thông báo thêm sản phẩm thành công và sản phẩm mới được hiển thị trong trang Product Management

[E2] Thêm sản phẩm không thành công

2.1 Hệ thống hiển thị thông báo quá trình thêm sản phẩm không thành công và dữ liệu ở trang Product Management không thay đổi

3.3.1.17 Use Case Thêm chương trình giảm giá

Bảng 3.20 Bảng đặc tả Use Case Thêm chương trình giảm giá

Use Case Name Thêm chương trình giảm giá

Short Description Người dùng thêm chương trình giảm giá

Post-condition Hệ thống thông báo chương trình giảm giá được thêm thành công và thông tin chương trình giảm giá được

(2) Hệ thống điều hướng đến trang Create New Offer

(3) Người dùng điền đầy đủ thông tin chương trình giảm giá cần tạo mới [E1]

(5) Hệ thống hiển thị thông báo thêm chương trình giảm giá thành công và sản phẩm mới được hiển thị trong trang Product Management

[E2] Thêm chương trình giảm giá không thành công

2.1 Hệ thống hiển thị thông báo quá trình thêm chương trình giảm giá không thành công và dữ liệu ở trang Offer Management không thay đổi

3.3.1.18 Use Case Thêm nhãn hàng

Bảng 3.21 Bảng đặc tả Use Case Thêm nhãn hàng

Use Case Name Thêm nhãn hàng

Short Description Người dùng tiến hàng thêm nhãn hàng

Post-condition Hệ thống thông báo nhãn hàng được thêm thành công và thông tin nhãn hàng được hiển thị trong trang Brand Management

(2) Hệ thống điều hướng đến trang Create New Brand

(3) Người dùng điền đầy đủ thông tin nhãn hàng cần tạo mới [E1]

(5) Hệ thống hiển thị thông báo thêm nhãn hàng thành công và nhãn hàng mới được hiển thị trong trang Brand Management

[E2] Thêm nhãn hàng không thành công

2.1 Hệ thống hiển thị thông báo quá trình thêm nhãn hàng không thành công và dữ liệu ở trang Brand Management không thay đổi

3.3.1.19 Use Case Quản lý số lượng sản phẩm trong kho

Bảng 3.22 Bảng đặc tả Use Case Quản lý số lượng sản phẩm trong kho

Use Case Name Quản lý số lượng sản phẩm nhập kho

Short Description Người dùng tiến hàng cập nhật số lượng sản phẩm trong kho

Pre-conditions Người dùng đã đăng nhập vào hệ thống và có ít nhất một sản phẩm

Post-condition Hệ thống thông báo số lượng sản phẩm được cập nhật thành công

Basic Flow (1) Người dùng nhấn chọn nút “Edit” ở trang Stock

Management tại sản phẩm muốn cập nhật

(2) Hệ thống hiển thị popup Edit Stock Product

(3) Người dùng nhập số lượng muốn cập nhật của sản phẩm [E1]

(5) Hệ thống hiển thị thông báo cập đơn số lượng sản phẩm thành công và thông tin số lượng sản phẩm trong kho được cập nhật thành công

[E2] Cập nhật số lượng sản phẩm trong kho không thành công

2.1 Hệ thống hiển thị thông báo quá trình cập nhật số lượng sản phẩm trong kho không thành công và dữ liệu ở trang Stock Management không thay đổi

THIẾT KẾ PHẦN MỀM

LƯỢC ĐỒ LỚP

Hình 4.1 Lược đồ lớp Đặc tả lược đồ lớp:

Bảng 4.1 Bảng đặc tả lược đồ lớp

STT Tên bảng Ý nghĩa Quan hệ

Chứa các thông tin chung của người dùng như: email, password, role, full name, phone, address

- 1 account chỉ thuộc về 1 role

2 Admin Chứa các thông tin được kế thừa từ account

- 1 admin sẽ quản lý các account, order, user, product,

3 Customer Chứa các thông tin được kế thừa từ account

- 1 customer có thể có 1 hoặc nhiều order

- 1 customer có thể có 0 hoặc nhiều comment

4 Address Chứa các thông tin về địa chỉ: number, street, commune, district, province

- 1 address có thể thuộc về 1 hoặc nhiều account

- 1 address có thể thuộc về 0 hoặc nhiều order

Chứa các thông tin về sản phẩm như: productName, productDescription, categoryID, brandID, price, discountPrice, quantity, createAt, updateAt, isActive

-1 product chỉ thuộc về 1 brand

-1 product chỉ thuộc về 1 category

- 1 product có thể thuộc về 0 hoặc nhiều cart

- 1 product có thể có 1 hoặc nhiều product image

6 Product Image Chứa thông tin về ảnh sản phẩm như: productID, path, isDefault

- 1 product image chỉ thuộc về 1 product

7 Brand Chứa các thông tin về nhãn hàng như: brandName

- 1 brand có thể có 1 hoặc nhiều product

8 Category Chứa các thông tin về loại sản phẩm như: categoryName

- 1 category có thể có chứa 0 hoặc nhiều product

Chứa các thông tin về giỏ hàng như: customerID, totalPrice, appliedCouponID, discountAmount

- 1 cart có thể có 0 hoặc nhiều cart item

- 1 cart chỉ thuộc về 1 client

- 1 cart có thể có 0 hoặc nhiều product

Chứa các thông tin về mặt hàng trong giỏ hàng: cartID, productID, price, isActive, quantity

- 1 cart item chỉ thuộc về 1 cart

Chứa các thông tin về đơn hàng như: orderDate, clientID, status, address, totalPrice

- 1 order có thể có 1 hoặc nhiều order item

Chứa các thông tin về mặt hàng trong đơn hàng như: orderID, productID, price, quantity

- 1 order item chỉ thuộc về 1 order

Chứa các thông tin về bình luận của sản phẩm: productID, clientID, content, ratePoint

- 1 comment chỉ thuộc về 1 client

- 1 comment chỉ thuộc về 1 product.

LƯỢC ĐỒ TUẦN TỰ

Hình 4.2 Lược đồ tuần tự chức năng Đăng ký

Hình 4.3 Lược đồ tuần tự chức năng Đăng nhập

Hình 4.4 Lược đồ tuần tự chức năng Đăng xuất

4.2.4 Chức năng Tìm kiếm sản phẩm

Hình 4.5 Lược đồ tuần tự chức năng Tìm kiếm sản phẩm

4.2.5 Chức năng Lọc sản phẩm

Hình 4.6 Lược đồ tuần tự chức năng Lọc sản phẩm

4.2.6 Chức năng Xem chi tiết sản phẩm

Hình 4.7 Lược đồ tuần tự chức năng Xem chi tiết sản phẩm

4.2.7 Chức năng Thêm sản phẩm vào Comparelist

Hình 4.8 Lược đồ tuần tự chức năng Thêm sản phẩm vào CompareList

4.2.8 Chức năng Quản lý giỏ hàng

Hình 4.9 Lược đồ tuần tự chức năng Quản lý giỏ hàng

Hình 4.10 Lược đồ tuần tự chức năng Đặt hàng

4.2.10 Chức năng Quản lý đơn hàng (Customer)

Hình 4.11 Lược đồ tuần tự chức năng Quản lý đơn hàng

4.2.11 Chức năng Cập nhật tài khoản cá nhân

Hình 4.12 Lược đồ tuần tự chức năng Cập nhật tài khoản cá nhân

4.2.12 Chức năng Quản lý người dùng

Hình 4.13 Lược đồ tuần tự chức năng Quản lý người dùng

4.2.13 Chức năng Quản lý sản phẩm

4.2.14 Chức năng Quản lý chương trình giảm giá (Admin)

Hình 4.15 Lược đồ tuần tự chức năng Quản lý chương trình giảm giá (Admin)

LƯỢC ĐỒ THỰC THỂ KẾT HỢP (ERD)

4.3.1 Lược đồ thực thể kết hợp (ERD)

Hình 4.16 Lược đồ thực thể kết hợp

4.3.2 Mô tả chi tiết Document

Bảng 4.2 Bảng mô tả chi tiết Collections users

STT Thuộc tính Kiểu Ý nghĩa Ghi chú

1 id int8 Mã user Trường khóa chính

2 day_of_birth timestamptz(6) Ngày sinh của user

3 google_image text Avatar của user

4 first_name text Tên của user

5 last_name text Họ của user

6 user_name text Tên đăng nhập của user

7 email text Email của user

8 phone text Số điện thoại của user

9 password text Mật khẩu của user

10 verified bool Trạng thái xác thực của user

11 block_status bool Trạng thái hoạt động của user

12 created_at timestamptz(6) Ngày khởi tạo user

13 updated_at timestamptz(6) Ngày cập nhật user

Bảng 4.3 Bảng mô tả chi tiết Collections products

1 id int8 Mã product Trường khóa chính

3 description text Mô tả chi tiết của product

4 category_id int8 Mã category

5 brand_id int8 Mã brand

6 price int8 Giá gốc của product

7 discount_price int8 Giá sau khi giảm giá của product

8 image text Ảnh của product

9 created_at timestamptz(6) Ngày khởi tạo product

10 updated_at timestamptz(6) Ngày cập nhật product

Bảng 4.4 Bảng mô tả chi tiết Collections product_items

1 id int8 Mã product item Trường khóa chính

2 product_id int8 Mã product

3 qty_in_stock int8 Số lượng trong kho

4 price int8 Giá gốc của product

6 discount_price int8 Giá sau khi giảm giá của product

7 created_at timestamptz(6) Ngày khởi tạo product

8 updated_at timestamptz(6) Ngày cập nhật product

Bảng 4.5 Bảng mô tả chi tiết Collections wish_lists

1 id int8 Mã wish list Trường khóa chính

2 user_id int8 Mã user

3 product_item_id int8 Mã product item

Bảng 4.6 Bảng mô tả chi tiết Collections brands

1 id int8 Mã brand Trường khóa chính

Bảng 4.7 Bảng mô tả chi tiết Collections product_images

1 id int8 Mã product image Trường khóa chính

3 image text Path của product image

Bảng 4.8 Bảng mô tả chi tiết Collections categories

1 id int8 Mã category Trường khóa chính

2 category_id int8 Mã sub category

Bảng 4.9 Bảng mô tả chi tiết Collections carts

1 id int8 Mã cart Trường khóa chính

3 total_price int8 Tổng giá tiền

4 applied_coupon_id int8 Mã coupon đã được áp dụng

5 discount_amount int8 Số tiền chiết khấu

Bảng 4.10 Bảng mô tả chi tiết Collections cart_items

1 id int8 Mã cart item Trường khóa chính

2 cart_id int8 Mã cart

Bảng 4.11 Bảng mô tả chi tiết Collections offers

1 id int8 Mã offer Trường khóa chính

3 description text Chi tiết của offer

4 discount_rate int8 Tỷ lệ chiết khấu

5 start_date timestamptz(6) Ngày bắt đầu

6 end_date timestamptz(6) Ngày kết thúc

Bảng 4.12 Bảng mô tả chi tiết Collections offer_products

1 id int8 Mã offer product Trường khóa chính

2 offer_id int8 Mã offer

3 product_id int8 Mã product

Bảng 4.13 Bảng mô tả chi tiết Collections offer_categories

1 id int8 Mã offer category Trường khóa chính

2 offer_id int8 Mã offer

Bảng 4.14 Bảng mô tả chi tiết Collections wallets

1 id int8 Mã wallet Trường khóa chính

3 total_amount int8 Tổng số tiền

Bảng 4.15 Bảng mô tả chi tiết Collections transactions

1 transaction_id int8 Mã transaction Trường khóa chính

2 wallet_id int8 Mã wallet

3 transaction_date timestamptz(6) Ngày thực thiện transaction

4 amount int8 Tổng số tiền

5 transaction_type text Loại transaction

Bảng 4.16 Bảng mô tả chi tiết Collections coupons

1 coupon_id int8 Mã coupon Trường khóa chính

2 coupon_name text Tên coupon

3 coupon_code text Mã code coupon

4 expire_date timestamptz(6) Ngày hết hạn

6 discount_rate int8 Tỷ lệ chiết khấu

7 minimum_cart_price int8 Giá trị giỏ hàng tối thiểu

9 block_status bool Trạng thái coupon

10 created_at timestamptz(6) Ngày khởi tạo

11 updated_at timestamptz(6) Ngày cập nhật

Bảng 4.17 Bảng mô tả chi tiết Collections coupon_users

1 coupon_user_id int8 Mã coupon user Trường khóa chính

2 coupon_id int8 Mã coupon

Bảng 4.18 Bảng mô tả chi tiết Collections addresses

1 id int8 Mã address Trường khóa chính

2 name text Tên địa chỉ

3 phone_number text Số điện thoại

4 detail_address text Địa chỉ chi tiết

9 country_id int8 Mã country

10 created_at timestamptz(6) Ngày khởi tạo

11 updated_at timestamptz(6) Ngày cập nhật

Bảng 4.19 Bảng mô tả chi tiết Collections user_addresses

1 id int8 Mã user address Trường khóa chính

3 address_id int8 Mã địa chỉ

4 is_default bool Trạng thái địa chỉ mặc định

Bảng 4.20 Bảng mô tả chi tiết Collections countries

1 id int8 Mã country Trường khóa chính

2 country_name text Tên country

Bảng 4.21 Bảng mô tả chi tiết Collections shop_orders

1 id int8 Mã đơn hàng Trường khóa chính

3 order_date timestamptz(6) Ngày đặt hàng

4 address_id int8 Mã địa chỉ

5 order_total_price int8 Tổng giá tiền đơn hàng

7 order_status_id int8 Mã trạng thái đơn hàng

8 payment_method_id int8 Mã phương thức thanh toán

Bảng 4.22 Bảng mô tả chi tiết Collections payment_methods

1 id int8 Mã phương thức thanh toán Trường khóa chính

Trạng thái phương thức thanh toán

4 maximum_amount int8 Số tiền tối đa

Bảng 4.23 Bảng mô tả chi tiết Collections order_statuses

1 id int8 Mã trạng thái đơn hàng Trường khóa chính

2 status text Tên trạng thái đơn hàng

Bảng 4.24 Bảng mô tả chi tiết Collections order_returns

1 id int8 Mã order return Trường khóa chính

2 shop_order_id int8 Mã order

3 request_date timestamptz(6) Ngày yêu cầu

4 return_reason text Lý do trả hàng

5 refund_amount int8 Tổng số tiền trả lại

6 is_approved bool Trạng thái xác nhận

7 return_date timestamptz(6) Ngày trả hàng

8 approval_date timestamptz(6) Ngày xác nhận

9 admin_comment text Nhận xét của nhà quản trị

Bảng 4.25 Bảng mô tả chi tiết Collections variations

1 id int8 Mã variation Trường khóa chính

Bảng 4.26 Bảng mô tả chi tiết Collections variation_options

1 id int8 Mã variation option Trường khóa chính

2 variation_id int8 Mã variation

3 value text Giá trị variation

Bảng 4.27 Bảng mô tả chi tiết Collections product_configurations

1 product_item_id int8 Mã product item Trường khóa chính

2 variation_option_id int8 Mã variation option

Bảng 4.28 Bảng mô tả chi tiết Collections refresh_sessions

1 token_id text Mã token Trường khóa chính

3 refresh_token text Mã refresh token

4 expire_at timestamptz(6) Ngày hết hạn

5 is_block bool Trạng thái refresh session

Bảng 4.29 Bảng mô tả chi tiết Collections otp_sessions

1 id int8 Mã otp session Trường khóa chính

2 otp_id text Mã otp

4 phone text Số điện thoại

5 expire_at timestamptz(6) Ngày hết hạn

THIẾT KẾ GIAO DIỆN HỆ THỐNG

GIAO DIỆN PHÍA NGƯỜI DÙNG

5.1.1 Giao diện trang Đăng ký

Hình 5.1 Giao diện trang Đăng ký

Bảng 5.1 Mô tả giao diện trang Đăng ký

8 Check vào checkbox chấp nhận chính sách

10 Nút điều hướng đến trang Đăng nhập

5.1.2 Giao diện trang Đăng nhập

Hình 5.2 Giao diện trang Đăng nhập Bảng 5.2 Mô tả giao diện trang Đăng nhập

1 Nhập thông tin email hoặc phone hoặc username

3 Nút ẩn/hiện mật khẩu

5 Nút điều hướng đến trang Đăng ký

Hình 5.3 Giao diện trang chủ

Hình 5.4 Giao diện trang chủ - Khi hover vào sản phẩm Bảng 5.3 Mô tả giao diện trang chủ

1 Nút điều hướng đến trang chủ

2 Nút điều hướng đến trang Sản phẩm

3 Nút điều hướng đến trang Mã giảm giá

4 Nhập tên sản phẩm muốn tìm kiếm

5 Nút tìm kiếm sản phẩm

6 Nút điều hướng đến trang So sánh sản phẩm

7 Nút điều hướng đến trang Sản phẩm yêu thích

8 Nút hiển thị cửa sổ bật lên giỏ hàng

10 Nhấn vào hình ảnh/tên sản phẩm để điều hướng đến trang Chi tiết sản phẩm

11 Nút thêm sản phẩm vào trang Sản phẩm yêu thích

12 Nút thêm sản phẩm vào trang So sánh sản phẩm

13 Nút hiển thị popup chi tiết sản phẩm

14 Nút thêm sản phẩm vào giỏ hàng

5.1.4 Giao diện trang Chi tiết sản phẩm

Hình 5.5 Giao diện trang chi tiết sản phẩm – Tab Description

Hình 5.6 Giao diện trang Chi tiết sản phẩm – Tab Review

Bảng 5.4 Mô tả giao diện trang Chi tiết sản phẩm

1 Nút giảm số lượng sản phẩm

2 Nút tăng số lượng sản phẩm

4 Nút thêm sản phẩm này vào trang Đặt hàng và điều hướng đến trang Đặt hàng

5 Nút thêm sản phẩm vào trang Sản phẩm yêu thích

6 Nút thêm sản phẩm vào trang So sánh sản phẩm

7 Nút điều hướng đến tab xem thông tin chi tiết sản phẩm

8 Nút điều hướng đến tab xem đánh giá sản phẩm

9 Nhập nội dung bình luận

5.1.5 Giao diện trang Sản phẩm yêu thích

Hình 5.7 Giao diện trang Sản phẩm yêu thích - Có sản phẩm

Hình 5.8 Giao diện trang Sản phẩm yêu thích - Không có sản phẩm

Bảng 5.5 Mô tả giao diện trang Sản phẩm yêu thích

4 Nút xóa sản phẩm khỏi trang Sản phẩm yêu thích

5 Nút điều hướng đến trang Giỏ hàng

5.1.6 Giao diện trang So sánh sản phẩm

Hình 5.9 Giao diện trang So sánh sản phẩm - Có sản phẩm

Hình 5.10 Giao diện trang So sánh sản phẩm - Không có sản phẩm

Bảng 5.6 Mô tả giao diện trang So sánh sản phẩm

2 Nút xóa sản phẩm khỏi trang So sánh sản phẩm

5.1.7 Giao diện trang Lọc sản phẩm

Hình 5.11 Giao diện trang Lọc sản phẩm Bảng 5.7 Mô tả giao diện trang Lọc sản phẩm

1 Chọn kiểu sắp xếp sản phẩm

2 Chọn lọc sản phẩm theo giá, nhãn hàng, trạng thái sản phẩm và loại sản phẩm

5.1.8 Giao diện trang Giỏ hàng

Hình 5.12 Giao diện trang Giỏ hàng - Có sản phẩm

Hình 5.13 Giao diện trang giỏ hàng - Không có sản phẩm

Bảng 5.8 Mô tả giao diện trang Giỏ hàng

3 Nút xóa tất cả các sản phẩm khỏi trang Giỏ hàng

4 Nút xóa sản phẩm khỏi trang Giỏ hàng

5 Nút điều hướng đến trang Đặt hàng

5.1.9 Giao diện trang Đặt hàng

Hình 5.14 Giao diện trang Đặt hàng Bảng 5.9 Mô tả giao diện trang Đặt hàng

3 Số điện thoại người nhận hàng

5 Ngày sinh người nhận hàng

6 Tên đường trong địa chỉ giao hàng

7 Tên xã trong địa chỉ giao hàng

9 Tên tỉnh/thành phố trong địa chỉ giao hàng

13 Chọn phương thức thanh toán

5.1.10 Giao diện trang Hồ sơ tài khoản

Hình 5.15 Giao diện trang Hồ sơ tài khoản Bảng 5.10 Mô tả giao diện trang Hồ sơ tài khoản

2 Số điện thoại người nhận hàng

5.1.11 Giao diện trang Thay đổi mật khẩu

Hình 5.16 Giao diện trang Thay đổi mật khẩu Bảng 5.11 Mô tả giao diện trang Thay đổi mật khẩu

1 Trường nhập mật khẩu hiện tại

2 Trường nhập mật khẩu mới

3 Trường nhập lại mật khẩu mới

5.1.12 Giao diện trang Xem lịch sử mua hàng

Hình 5.17 Giao diện trang Xem lịch sử mua hàng Bảng 5.12 Mô tả giao diện trang Xem lịch sử mua hàng

1 Nút xem chi tiết đơn hàng

5.1.13 Giao diện trang Xem chi tiết đơn hàng

Hình 5.18 Giao diện trang Xem chi tiết đơn hàng

5.1.14 Giao diện trang Mã giảm giá

Hình 5.19 Giao diện trang Mã giảm giá Bảng 5.13 Mô tả giao diện trang Mã giảm giá

1 Nút sao chép mã giảm giá

GIAO DIỆN PHÍA QUẢN TRỊ VIÊN

5.2.1 Giao diện trang Đăng nhập

Hình 5.20 Giao diện trang Đăng nhập Bảng 5.14 Mô tả giao diện trang Đăng nhập

3 Nút hiển thị/ẩn password

5.2.2 Giao diện trang chủ phía quản trị viên

Hình 5.21 Giao diện trang chủ Bảng 5.15 Mô tả giao diện trang chủ

1 Điều hướng đến trang Quản lý mã giảm giá/chương trình giảm giá

2 Điều hướng đến trang Quản lý đơn hàng

3 Điều hướng đến trang Quản lý sản phẩm

4 Điều hướng đến trang Quản lý người dùng

5 Điều hướng đến trang Quản lý số lượng sản phẩm nhập kho

5.2.2 Giao diện trang Quản lý người dùng

Hình 5.22 Giao diện trang Quản lý người dùng Bảng 5.16 Mô tả giao diện trang Quản lý người dùng

1 Tìm kiếm tài khoản người dùng

2 Bật/tắt trạng thái hoạt động của tài khoản

3 Hiển thị các giá trị của trang trước đó

4 Hiển thị các giá trị của trang sau đó

5 Hiển thị các giá trị của trang đầu tiên

6 Hiển thị các giá trị của trang cuối cùng

7 Sắp xếp giá trị tăng dần/giảm dần của cột

5.2.3 Giao diện trang Quản lý sản phẩm

Hình 5.23 Giao diện trang Quản lý sản phẩm - Có sản phẩm

Hình 5.24 Giao diện trang Quản lý sản phẩm - Các hành động

Hình 5.25 Giao diện trang Quản lý sản phẩm - Tạo sản phẩm mới

Hình 5.26 Giao diện trang Quản lý sản phẩm – Cập nhật sản phẩm

Hình 5.27 Giao diện trang Quản lý sản phẩm – Không có sản phẩm

Hình 5.28 Giao diện trang Quản lý product item – Không có mặt hàng

Hình 5.29 Giao diện trang Quản lý product item – Có mặt hàng

Hình 5.30 Giao diện trang Quản lý product item – Tạo mới mặt hàng

Bảng 5.17 Mô tả giao diện trang Quản lý sản phẩm

3 Xem menu hành động: View Item, Edit

8 Mô tả chi tiết sản phẩm

10 Nút hủy lưu dữ liệu

Bảng 5.18 Mô tả giao diện trang Quản lý product item

3 Nút trở về trang trước đó

6 Nhập số lượng tồn kho

5.2.4 Giao diện trang Quản lý nhãn hàng

Hình 5.31 Giao diện trang Quản lý nhãn hàng

Hình 5.32 Giao diện trang Quản lý nhãn hàng – Các hành động

Hình 5.33 Giao diện trang Quản lý nhãn hàng – Tạo mới nhãn hàng

Hình 5.34 Giao diện trang Quản lý nhãn hàng – Cập nhật nhãn hàng

Bảng 5.19 Mô tả giao diện trang Quản lý nhãn hàng

3 Xem menu hành động: Edit, Delete

5.2.5 Giao diện trang Quản lý loại sản phẩm

Hình 5.35 Giao diện trang Quản lý loại sản phẩm

Hình 5.36 Giao diện trang Quản lý loại sản phẩm – Các hành động

Hình 5.37 Giao diện trang Quản lý loại sản phẩm – Tạo mới loại sản phẩm

Hình 5.38 Giao diện trang Quản lý sub category

Hình 5.39 Giao diện trang Quản lý sub category – Tạo mới sub category

Hình 5.40 Giao diện trang Quản lý variant category

Hình 5.41 Giao diện trang Quản lý variant category – Các hành động

Hình 5.42 Giao diện trang Quản lý variant category – Tạo mới variant category

Hình 5.43 Giao diện trang Quản lý variant category – Cập nhật variant category

Hình 5.44 Giao diện trang Quản lý option variant

Hình 5.45 Giao diện trang Quản lý option variant – Các hành động

Hình 5.46 Giao diện trang Quản lý option variant – Tạo mới option variant

Hình 5.47 Giao diện trang Quản lý option variant – Cập nhật option variant

Bảng 5.20 Mô tả giao diện trang Quản lý loại sản phẩm

1 Tìm kiếm loại sản phẩm

2 Tạo mới loại sản phẩm

3 Xem menu hành động: View sub category, View variant category

4 Nhập tên loại sản phẩm

Bảng 5.21 Mô tả giao diện trang Quản lý sub category

3 Hiển thị chi tiết variant của sub category

Bảng 5.22 Mô tả giao diện trang Quản lý variant category

3 Xem menu hành động: View Option, Edit, Delete

Bảng 5.23 Mô tả giao diện trang Quản lý option variant

3 Xem menu hành động: Edit, Delete

5.2.6 Giao diện trang Quản lý mã giảm giá

Hình 5.48 Giao diện trang Quản lý mã giảm giá – Có mã giảm giá

Hình 5.49 Giao diện trang Quản lý mã giảm giá – Tạo mới mã giảm giá

Hình 5.50 Giao diện trang Quản lý mã giảm giá – Cập nhật mã giảm giá

Hình 5.51 Giao diện trang Quản lý mã giảm giá – Không có mã giảm giá

Bảng 5.24 Mô tả giao diện trang Quản lý mã giảm giá

1 Tìm kiếm mã giảm giá

2 Tạo mới mã giảm giá

4 Nhập tên mã giảm giá

5 Nhập ảnh của mã giảm giá

6 Mô tả chi tiết mã giảm giá

9 Giá đơn hàng tối thiểu

5.2.7 Giao diện trang Quản lý chương trình giảm giá

Hình 5.52 Giao diện trang Quản lý chương trình giảm giá – Có chương trình giảm giá

Hình 5.53 Giao diện trang Quản lý chương trình giảm giá – Tạo mới chương trình giảm giá

Hình 5.54 Giao diện trang Quản lý chương trình giảm giá – Không có chương trình giảm giá

Hình 5.55 Giao diện Quản lý sản phẩm áp dụng chương trình giảm giá

Hình 5.56 trình bày giao diện quản lý sản phẩm cho chương trình giảm giá, cho phép người dùng tạo mới chương trình giảm giá một cách dễ dàng Bảng 5.25 mô tả chi tiết giao diện trang quản lý chương trình giảm giá, cung cấp thông tin cần thiết để người dùng thực hiện các thao tác hiệu quả.

1 Tìm kiếm chương trình giảm giá

2 Tạo mới chương trình giảm giá

3 Các hành động: View Item, delete

4 Nhập tên chương trình giảm giá

5 Mô tả chi tiết chương trình giảm giá

Bảng 5.26 Mô tả giao diện trang Quản lý sản phẩm áp dụng chương trình giảm giá

1 Tìm kiếm sản phẩm áp dụng chương trình giảm giá

2 Thêm sản phẩm áp dụng chương trình giảm giá

3 Các hành động: Edit, Delete

5.2.8 Giao diện trang Quản lý đơn hàng

Hình 5.57 Giao diện trang Quản lý đơn hàng – Có đơn hàng

Hình 5.58 Giao diện trang Quản lý đơn hàng – Không có đơn hàng

Bảng 5.27 Mô tả giao diện Quản lý đơn hàng

1 Xem chi tiết đơn hàng

5.2.9 Giao diện trang Quản lý tài khoản cá nhân

Hình 5.59 Giao diện trang Quản lý tài khoản cá nhân Bảng 5.28 Mô tả giao diện trang Quản lý tài khoản cá nhân

5.2.10 Giao diện trang Thay đổi mật khẩu

Hình 5.60 Giao diện trang Thay đổi mật khẩu Bảng 5.29 Mô tả giao diện trang Thay đổi mật khẩu

1 Nhập mật khẩu hiện tại

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

CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM

CÀI ĐẶT

Các yêu cầu về môi trường cài đặt, công nghệ và phần mềm cần sử dụng trong ứng dụng:

- Front-End: ReactJS, HTML, CSS

- Hệ quản trị cơ sở dữ liệu: PostgreSQL

- Công cụ quản lý mã nguồn: Github

- Trình duyệt: Google Chrome, Firefox, Microsoft Edge

- Thiết kế sơ đồ: Draw.io

- Bước 1: Clone hoặc download project từ link Github: https://github.com/khanhngan501/etterath_shop

- Bước 2: Khởi chạy chương trình:

Sau khi clone về máy, mở Visual Studio Code và mở project

Sau đó, trên thanh công cụ nhấn Terminal, chọn New Terminal

Chạy lệnh “go run main.go” để chạy ở chế độ localhost

1 Bước 1: Clone hoặc download project từ link Github: https://github.com/khanhngan501/etterath_shop

2 Bước 2: Khởi chạy chương trình:

Sau khi clone về máy, mở Visual Studio Code và mở project

Sau đó, trên thanh công cụ nhấn Terminal, chọn New Terminal Ở Terminal, cài đặt npm bằng câu lệnh: npm install.

KIỂM THỬ

6.2.1 Yêu cầu về tài nguyên

Bảng 6.1 Bảng yêu cầu phần cứng máy tính

Intel Core i5, 2.3 GHz 4GB 360GB 64 bit

Bảng 6.2 Bảng yêu cầu phần phần mềm

Tên phần mềm Phiên bản Loại

IE8 8.0.6001.18702IC Trình duyệt web

Mozilla Firefox 12.0 Trình duyệt web

Google Chrome 19.0.1084.56 Trình duyệt web

Microsoft Windows 10 10 Hệ điều hành

Nhóm đã áp dụng phương pháp kiểm thử hộp đen để kiểm tra và đánh giá chức năng của hệ thống Phương pháp này không yêu cầu kiến thức về thiết kế chi tiết hay thực hiện nội bộ của phần mềm, mà tập trung vào việc kiểm thử dựa trên các yêu cầu và kịch bản sử dụng của phần mềm.

Bảng 6.3 Kiểm thử chức năng

Mục đích kiểm tra Đảm bảo chức năng

Thực hiện tất cả các trường hợp có thể xảy ra trong một hoặc nhóm chức năng, sử dụng dữ liệu đầu vào hợp lệ và không hợp lệ để xác định kết quả.

3 Kết quả mong đợi đúng theo dữ liệu được nhập vào

4 Báo lỗi đúng với mỗi loại dữ liệu không hợp lệ

Tiêu chuẩn dừng Tất cả test case được thiết kế đều được thực thi

Tìm được các lỗi và ghi nhận rõ ràng

Chịu trách nhiệm Test Designer / Tester

Cách kiểm thử Kiểm thử bằng tay

Xử lý ngoại lệ Liệt kê các vấn đề xảy ra liên quan đến quá trình kiểm thử

Kiểm thử phi chức năng:

Bảng 6.4 Kiểm thử phi chức năng

Mục đích kiểm tra Đảm bảo chức năng

Website có phản hồi tốt với thiết kế giao diện hợp lý, đảm bảo layout không bị chồng chéo trên các màn hình nhỏ Giao diện thân thiện và dễ sử dụng, mang lại trải nghiệm tốt cho người dùng.

Tiêu chuẩn dừng Hoàn thành những tiêu chuẩn trong yêu cầu phi chức năng Chịu trách nhiệm Tester

Cách kiểm thử Kiểm thử bằng tay

Xử lý ngoại lệ Liệt kê các vấn đề xảy ra liên quan đến quá trình kiểm thử

Bảng 6.5 Kết quả kiểm thử

STT Mô tả Các bước thực hiện Kết quả mong muốn

Kiểm thử chức năng đăng ký tài khoản

- Nhập đầy đủ thông tin đăng ký

Thông báo đăng ký thành công và điều hướng đến trang chủ

Như kết quả mong muốn Đạt

Kiểm thử chức năng đăng nhập

- Nhập số điện thoại/email đăng nhập

Thông báo đăng nhập thành công và điều hướng đến trang chủ

Kiểm thử chức năng đăng xuất

- Nhấn chọn Logout Đăng xuất thành công và điều hướng sang trang chủ

Kiểm thử chức năng tìm kiếm sản phẩm

- Nhập keyword tại thanh tìm kiếm

- Nhấn icon Tìm kiếm hoặc nhấn phím Enter

Hiển thị tất cả các sản phẩm phù hợp với keyword tìm kiếm của người dùng

Kiểm thử chức năng lọc sản phẩm

- Lựa chọn các tiêu chí muốn tìm kiếm

Hiển thị tất cả các sản phẩm phù hợp với các tiêu chí mà người dùng đã lựa chọn

Kiểm thử chức năng xem chi tiết sản phẩm

- Nhấn chọn vào hình ảnh/tên/icon view của sản phẩm Điều hướng sang trang Chi tiết sản phẩm của sản phẩm đã chọn

Kiểm thử chức năng thêm sản phẩm vào

- Nhấn chọn icon heart của sản phẩm hoặc nhấn vào nút

Add To WishList ở trang Chi tiết sản phẩm

Sản phẩm được thêm thành công vào trang Sản phẩm yêu thích

Kiểm thử chức năng thêm sản phẩm vào

- Nhấn chọn icon compare của sản phẩm hoặc nhấn vào nút Add To

Sản phẩm được thêm thành công vào trang So sánh sản phẩm

Kiểm thử chức năng thêm sản phẩm vào giỏ hàng

- Nhấn chọn icon cart của sản phẩm hoặc nhấn vào nút Add To

Cart ở trang Chi tiết sản phẩm/So sánh sản phẩm/Sản phẩm yêu thích

Sản phẩm được thêm thành công vào giỏ hàng

Kiểm thử chức năng cập nhật số lượng sản phẩm trong giỏ hàng

“-“/”+” để giảm/tăng số lượng của sản phẩm trong giỏ hàng

Số lượng của sản phẩm trong giỏ hàng được cập nhật thành công

Kiểm thử chức năng xóa sản phẩm

- Nhấn chọn icon “x“ để xóa sản phẩm khỏi giỏ hàng

Sản phẩm được xóa khỏi giỏ hàng

Như kết quả mong muốn Đạt trong giỏ hàng

Kiểm thử chức năng đặt hàng

- Tùy chỉnh địa chỉ nhận hàng, thông tin người nhận hàng

- Chọn phương thức thanh toán

Thông báo đặt hàng thành công

Kiểm thử chức năng cập nhật thông tin cá nhân

- Tiến hành chỉnh sửa thông tin

Thông báo cập nhật thông tin thành công và dữ liệu đã được cập nhật

Kiểm thử chức năng xem lịch sử đơn hàng

Hiển thị tất cả đơn hàng của người dùng

Kiểm thử chức năng xem chi tiết đơn hàng

Invoice ở My Orders để xem chi tiết đơn hàng

Hiển thị chi tiết đơn hàng của người dùng

Kiểm thử chức năng thay đổi mật khẩu

Thông báo cập nhật thành công, đăng xuất khỏi tài khoản và điều

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

- Nhấn nút Update hướng về trang chủ

Quản lý tài khoản cá nhân (Quản trị viên)

- Chỉnh sửa thông tin tài khoản ở trang Profile

Thông báo cập nhật tài khoản thành công và dữ liệu đã được cập nhật

Quản lý sản phẩm (Quản trị viên)

Management ở sidebar tại trang Admin Điều hướng sang trang Quản lý sản phẩm

Quản lý loại sản phẩm

- Nhấn chọn Category Management ở sidebar tại trang Admin Điều hướng sang trang Quản lý loại sản phẩm

- Nhấn chọn User Management ở sidebar tại trang Admin Điều hướng sang trang Quản lý người dùng

Quản lý đơn hàng (Quản trị viên)

- Nhấn chọn Order Management ở sidebar tại trang Admin Điều hướng sang trang Quản lý đơn hàng

Quản lý nhãn hàng (Quản

- Nhấn chọn Brand Management ở sidebar tại trang Điều hướng sang trang Quản lý nhãn

Như kết quả mong Đạt

Quản lý chương trình giảm giá

- Nhấn chọn Coupon Management ở sidebar tại trang Admin Điều hướng sang trang Quản lý chương trình giảm giá

TỔNG KẾT

KẾT QUẢ ĐẠT ĐƯỢC

Sau khi nghiên cứu và hoàn thiện đề tài “Xây dựng Website bán sản phẩm công nghệ sử dụng Golang và ReactJS”, nhóm đã đạt được những kết quả đáng ghi nhận, bao gồm việc phát triển một nền tảng trực tuyến hiệu quả và thân thiện với người dùng, tích hợp công nghệ tiên tiến để tối ưu hóa trải nghiệm mua sắm và quản lý sản phẩm.

Nhóm đã nghiên cứu và ứng dụng thành công các công nghệ ReactJS, Golang và PostgreSQL trong việc phát triển một website chuyên bán sản phẩm công nghệ.

Nhóm đã nhận thức rõ tầm quan trọng của việc bảo mật hệ thống, vì vậy họ đã tiến hành nghiên cứu về Json Web Token nhằm nâng cao bảo mật và quản lý phân quyền trong hệ thống.

Nắm vững kiến thức về PostgreSQL để lưu trữ dữ liệu người dùng, kết hợp với việc sử dụng framework ReactJS hiện đại cho giao diện Đồng thời, khám phá các thư viện hỗ trợ mạnh mẽ cho ReactJS nhằm tạo ra giao diện đơn giản, thẩm mỹ và thân thiện với người dùng.

Nắm vững và áp dụng kiến thức về Golang để phát triển và tối ưu hóa các API Phát triển kỹ năng làm việc độc lập và làm việc nhóm, đồng thời tìm kiếm giải pháp hiệu quả khi đối mặt với các vấn đề phát sinh.

Xây dựng được website bán sản phẩm công nghệ trực tuyến với các chức năng cơ bản theo kế hoạch đã dự kiến:

- Các chức năng liên quan đến tài khoản người dùng: Đăng ký, Đăng nhập, Thay đổi mật khẩu, Cập nhật thông tin cá nhân

Các chức năng liên quan đến sản phẩm bao gồm: xem chi tiết sản phẩm, thêm sản phẩm vào danh sách yêu thích (Wish List), thêm sản phẩm vào danh sách so sánh (Compare List), thêm sản phẩm vào giỏ hàng, cập nhật số lượng sản phẩm trong giỏ hàng và xóa sản phẩm khỏi giỏ hàng.

Quản trị viên có nhiều chức năng quan trọng, bao gồm quản lý người dùng để đảm bảo trải nghiệm người dùng tốt nhất, quản lý đơn hàng nhằm theo dõi và xử lý giao dịch hiệu quả, quản lý sản phẩm để duy trì danh mục hàng hóa phong phú Ngoài ra, họ cũng quản lý loại sản phẩm và nhãn hàng để phân loại và tổ chức sản phẩm một cách hợp lý Quản lý chương trình giảm giá giúp thu hút khách hàng và tăng doanh thu, trong khi quản lý tài khoản cá nhân đảm bảo thông tin người dùng được bảo mật và dễ dàng truy cập.

ƯU ĐIỂM

Sau quá trình học hỏi, nghiên cứu và hoàn thiện website thì nhóm đã hoàn thành được các tính năng cơ bản cần có của một website bán hàng

Website được thiết kế với giao diện đơn giản, dễ thao tác để người dùng luôn có trải nghiệm tốt khi sử dụng

Website chạy chính xác các tính năng đã được cài đặt, không xảy ra hiện tượng xung đột hay lỗi

Các chức năng được tách riêng theo từng component và module để có thể dễ dàng trong việc quản lý và bảo trì hệ thống

Việc áp dụng công nghệ Json Web Token giúp bảo mật dữ liệu người dùng, từ đó giảm thiểu nguy cơ mất mát hoặc đánh cắp thông tin cá nhân.

Hình ảnh được sử dụng trong website đều có phân giải cao đảm bảo tính thẩm mỹ.

HẠN CHẾ

Bên cạnh những ưu điểm trên thì nhóm nhận thấy website vẫn còn tồn tại một số hạn chế nhất định:

Website hiện tại chưa cung cấp đầy đủ và đa dạng các tính năng cần thiết, bao gồm đánh giá sản phẩm, chức năng quên mật khẩu, dịch vụ hỗ trợ khách hàng, blog thông tin và diễn đàn thảo luận cho người dùng.

- Tốc độ cập nhật dữ liệu của website còn chậm

- Cần cải thiện giao diện dễ nhìn và thân thiện với người dùng hơn

- Quá trình xử lý và thực hiện các chức năng chưa được nhanh và mượt.

HƯỚNG PHÁT TRIỂN

Thông qua kết quả đạt được và những hạn chế, từ đó nhóm đã quyết định được hướng phát triển của website như sau:

- Tiếp tục phát triển thêm các tính năng khác để website hoàn thiện hơn

- Cải thiện tốc độ website

- Tích hợp AI để gợi ý sản phẩm

- Cải thiện giao diện thân thiện với người dùng hơn

- Deploy ứng dụng lên server.

Tiêu đề	Xây dựng website bán sản phẩm công nghệ sử dụng golang và reactjs
Tác giả	Hoàng Nhựt Khánh Ngân, Lê Hoàng Mai Ngân, Nguyễn Thanh Minh Đức
Người hướng dẫn	TS. Lê Văn Vinh
Trường học	Đại học sư phạm kỹ thuật tp.hcm
Chuyên ngành	Công nghệ thông tin
Thể loại	Khóa luận tốt nghiệp kỹ sư cntt
Năm xuất bản	2024
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	153
Dung lượng	8,61 MB