TÌM HIỂU VỀ CÔNG NGHỆ MERN STACK VÀ XÂY DỰNG WEBSITE BÁN THIẾT BỊ ĐIỆN TỬ

- Trên trang web của cửa hàng hiển thị đầy đủ các mặt hàng như màn hình, case, loa, và các linh kiện khác…khách hàng có thể lựa chọn để xem hoặc tìm kiếm trên thanh công cụ tìm kiếm

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

-🙞🙞🙞🙞🙞 -ĐỖ THÁI SANG - 14110164 HÀ HẢI LONG - 17110326

ĐỀ TÀI:

TÌM HIỂU VỀ CÔNG NGHỆ MERN STACK

VÀ XÂY DỰNG WEBSITE BÁN THIẾT BỊ ĐIỆN TỬ

TIỂU LUẬN CHUYÊN NGÀNH

HỆ THỐNG THÔNG TIN

GIÁO VIÊN HƯỚNG DẪN

TS NGUYỄN THÀNH SƠN

CHƯƠNG 1: TÌM HIỂU VỀ CÔNG NGHỆ MERN STACK

MERN stack là tâ ̣p hợp của bốn công nghệ mã nguồn mở đều liên quan đến Javascript được sử dụng rô ̣ng rãi đó là: MongoDB, ExpressJS, React/React Native, NodeJS Người

ta dùng MERN stack để xây dựng React Universal App

I MongoDB

MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL (*) hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++.

Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái

niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khảnăng mở rộng dễ dàng

II ExpressJS

Expressjs là một framework được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các

method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng

Để có thể áp dụng công nghệ này cho đề tài, nhóm sẽ sử dụng Expressjs để phát

triển các services là các Rest API Mục đích của việc dùng Rest API là vì chúng tacó thể dễ dàng phát triển hệ thống trên nhiều nền tảng khác không chỉ riêng choviệc viết web trực tuyến, đồng thời như đã nói ở trên về công dụng củaMicroservices thì phát triển hệ thống như thế này là sẽ chia hệ thống ra thành 2thành phần đó là server và client Server ở đây chính là các services được chia nhỏ

ra với ExpressJS Framework, ở đây xử lý dữ liệu sau đó sẽ trả dữ liệu có ích vềcho Client hiển thị cho người dùng

III React

React là một thư viện JavaScript mã nguồn mở, giao diện người dùng để xây dựng giao diện người dùng hoặc các thành phần UI Nó được duy trì bởi Facebook

và một cộng đồng các nhà phát triển và công ty cá nhân React có thể được sử

dụng như một cơ sở để phát triển các ứng dụng trang web hoặc di động

IV NodeJS

Node.js là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web Chương trình được viết bằng C, C++, JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ

để tối thiểu tổng chi phí và tối đa khả năng mở rộng

NodeJS cũng giống với trình duyệt hiện nay, được chạy dựa trên V8 JavaScript engine - công cụ giúp trình duyệt dịch và thực thi JavaScript Ngoài ra, NodeJS

cung cấp một số thư viện không có sẵn trong V8 engine

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG

I Phân tích hiê ̣n trạng:

Trong môi trường kinh tế đang phát triển mạnh hiện nay công nghệ thông tin và thương mại điện tử đang nổi lên như một lĩnh vực quan trọng trong nền kinh tế Nó có mặt trong hầu hết các lĩnh vực của cuộc sống và trở thành một công cụ hỗ trợ đắc lực trong công tác quản lý kinh doanh Vì thế việc bán hàng qua mạng đã không còn là hình thức xa lạ đối với người tiêu dùng và còn là hình thức phổ biến được mọi doanh nghiệp lựa chọn Do đó, nhu cầu xây dựng một website trở nên thiết yếu Chính vì vậy, nhóm đã quyết định chọn đề tài “Xây dựng và thiết kế website bán Laptop” này, mục đích là tạo ramột sản phẩm đáp ứng được nhu cầu của thị trường hiện nay

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

Yêu cầu chức năng nghiê ̣p vụ:

Lưu trữ:

- Người dùng: tên, email, mật khẩu

- Sản phẩm: tên, giá tiền, bảo hành, nhãn hiệu, mô tả, nô ̣i dung, hình ảnh, loại sản phẩm, số lượng sản phẩm, số lượng sản phẩm đã bán, sản phẩm đãxoá

- Hãng sản phẩm: tên hãng

- Đơn hàng: thông tin người mua, địa chỉ, giỏ hàng, số lượng, giá, tổng giá, trạng thái đơn hàng, chi phí giao hàng

Tra cứu:

- Sản phẩm: Theo mô ̣t tiêu chuẩn nào đó

- Đơn hàng: Theo mô ̣t tiêu chuẩn nào đó

- Hãng sản phẩm: Theo mô ̣t tiêu chuẩn nào đó

Tính toán:

- Tính tổng tiền khi mua sản phẩm

- Thống kê doanh thu

Kết xuất:

- Báo cáo doanh thu

III Khảo sát 1 số website bán laptop

Đánh giá website www.phongvu.vn:

Trang chủ website phong vũ

1 Khối Menu, Slide

Menu gồm có các thông tin để hỗ trợ khác hàng như:

- Thanh menu đầu tiên là các thông tin hệ thống showroom, số điện thoại tư vấn, CSKH, bảng tin công nghệ và xây dựng cấu hình.

- Thanh menu thứ hai là các thông tin về khuyến mại, đơn hàng, đăng nhập và giỏ hàng

Thanh menu của website phongvu.com

- Thanh menu dọc là các thông tin và danh mục sản phẩm

Danh mục sản phẩm của cửa hàng Phong Vũ

Slide thiết kế dạng trượt tự động để cho khách hàng biết về thông tin khuyến mại

Slide hiển thị thông tin khuyến mại của cửa hàng Phong Vũ

2 Khối khuyến mại

Khối khuyến mại thể hiện các sản phẩm đang trong chương trình khuyến mại

3 Khối mặt hàng và các thương hiệu công ty hợp tác

Các thương hiệu laptop mà cửa hàng đang bán

4 Khối các sản phẩm bán chạy

Các sản phẩm bán chạy tại cửa hàng

5 Khối Footer

Thể hiện đầy đủ các chính sách của công ty và thông tin liên hệ khác cuả công ty

Thông tin, chính sách của cửa hàng

6 Chi tiết sản phẩm

Thông tin, chương trình khuyến mại của sản phẩm

CHƯƠNG 3: ĐẶC TẢ, SƠ ĐỒ DỮ LIỆU, THÀNH PHẦN CHỨC NĂNG

1. Sơ đồ chức năng website

2 Xác định các yêu cầu nghiệp vụ

❖ Yêu cầu chung về hệ thống

🙞 Hệ thống được áp dụng rộng rãi, phổ biến cho mọi đối tượng

🙞 Giao diện đơn giản, thân thiện, đẹp và dễ nhìn, dễ sử dụng cho mọi đốitượng mà không cần trình độ cao

🙞 Phải có tính bảo mật cao

🙞 Thao tác nhanh chóng, hợp lý, hiệu quả, chính xác

🙞 Cập nhật, phục hồi và sao lưu dữ liệu

🙞

❖ Các thành phần dữ liệu:

1) Users(người dùng): Danh sách thông tin người dùng( khách hàng hoặc

người quản trị) Bao gồm:

- Mã người dùng, Tên, email, mật khẩu, địa chỉ, quyền.

2) Products(sản phẩm): Danh sách thông tin chi tiết của sản phẩm có

trong cửa hàng Bao gồm:

- Mã sản phẩm, tên sản phẩm, giá tiền, bảo hành, số lượng, mô tả chỉ

tiết, hãng, ảnh, loại sản phẩm

3) Checkout(Hóa đơn): Thông tin chi tiết về giao dịch mua bán sản phẩm.

Bao gồm:

- Tên người mua, Mã giỏ hàng, địa chỉ, tổng tiền, phương thức thanh

toán, ngày tạo

4) Category(Loại sản phẩm): Danh sách các loại sản phẩm Bao gồm:

- Mã loại, tên loại.

5) Cart(Giỏ hàng): Chi tiết về danh sách sản phẩm số tiền mua hàng Bao

gồm:

- Mã sản phẩm, tên sản phẩm, số lượng, giá tiền.

❖ Các chức năng:

- Hiển thị chi tiết thông tin của sản phẩm

- Tìm kiếm: Cho phép khách hàng ghé thăm website của cửa hàng tìm kiếm sản phẩm theo một số tiêu chí như: Tên sản phẩm, tên hãng sản xuất, giá sản phẩm, hay dựa vào một số đặc điểm khác…

- Giỏ hàng: đựng sản phẩm mà khách hàng đã chọn

- Đặt hàng: Cho phép khách hàng đặt mua hàng

❖ Yêu cầu cụ thể từng chức năng

- Khi khách hàng có nhu cầu mua hàng sau khi đã xem kỹ thông tin về mặt hàng thông qua trang web của cửa hàng, khách hàng sẽ đặt hàng thông qua website

- Mỗi khách hàng muốn mua hàng đều phải là thành viên và phải đăng kýthành công trên trang web của cửa hàng, sau đó khách hàng đăng nhập

và thực hiện mua hàng trên website của cửa hàng

- Trên trang web của cửa hàng hiển thị đầy đủ các mặt hàng như màn hình, case, loa, và các linh kiện khác…khách hàng có thể lựa chọn để xem hoặc tìm kiếm trên thanh công cụ tìm kiếm sản phẩm những sản phẩm mà mình cần tìm

- Khi đã tìm được sản phẩm cần mua, khách hàng chỉ cần click vào sản phẩm để xem thông tin chi tiết về sản phẩm hoặc có thể đặt mua luôn sản phẩm đó

- Sản phẩm mà khách hàng lựa chọn sẽ được đưa vào giỏ hàng, nếu kháchhàng không hài lòng với sản phẩm mình lựa chọn thì có thể xóa sản phẩm đó đi và lựa chọn sản phẩm khác thay thế hoặc xóa giỏ hàng nếu không muốn mua nữa

- Sau khi đã chọn được những sản phẩm mà quý khách cần mua, khách hàng ấn vào nút đặt hàng để gửi yêu cầu đặt hàng cho cửa hàng Khách hàng cần phải kiểm tra lại thông tin cá nhân của mình cũng như chủng loại hàng hóa mà mình đặt mua để thuận lợi cho việc thực hiện giao dịch này

- Để thuận tiện cho việc thực hiện đơn hàng, khách hàng cần ghi đúng, đủ thông tin trong mục đăng ký thành viên

- Mọi đơn hàng thiếu một trong số các thông tin cần thiết (họ tên, địa chỉ, số điện thoại…) sẽ bị loại bỏ

- Những đơn hàng mà cửa hàng cho là không hợp lý cũng sẽ bị loại bỏ

mà không cần báo trước

- Khách hàng có thể lựa chọn nhiều phương thức thanh toán khác nhau như:

o Thanh toán qua paypal

o Thanh toán trực tiếp

- Và khách hàng có thể lựa chọn phương thức giao hàng

o Nhận hàng tại cửa hàng (nếu gần địa điểm của cửa hàng)

o Nhận hàng tại nhà

I ERD

1 Users (_id, name, email, password, addresses, role, cart, isBlock,

createdAt, updatedAt)

ST

8 createdAt Date Ngày tạo user

Bảng Users

2 Products (_id, title, prices, warranty, brand, description, content,

images, category, quantity, sold, isDelete, createdAt, updatedAt)

ST

Bảng Products

3 Categories (_id, name, createdAt, updatedAt)

ST

1 _id ObjectID Khóa chính Mã ID của loại sản phẩm

Bảng Categories

4 Checkout (_id, userId, name, email, address, cart, status, payments, tax,

deliveryCharges, createdAt, updatedAt)

ST

Bảng Checkout

II THIẾT KẾ DỮ LIỆU

III USECASE

Sơ đồ tổng quát của hệ thống

Biểu đồ usecase đăng ký đăng nhập

Biểu đồ usecase tìm kiếm sản phẩm

Biểu đồ usecase quản lý đơn hàng

Biểu đồ usecase mua hàng của khách hàng

Sơ đồ thống kê

ĐẶC TẢ USECASE

1 Đặc tả use-case đăng nhập

Use Case Đăng nhập

Mô tả Cho phép đăng nhập vào hệ thống

Tác nhân kích hoạt Người dùng, admin

Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống

Các bước thực hiện

(1) Click vào nút đăng nhập (2) Nhập email và password (3) Nhấn nút “Đăng Nhập” hoặc nhấn Enter (4) Nếu đăng nhập thất bại, sẽ có thông báo lỗi (5) Nếu đăng nhập thành công thì có thể thực hiện được các

tác vụ được cho phép

Luồng sự kiện rẽ nhánh:

- Thành viên đăng nhập không thành công: hệ thống báo quá trình đăng nhập không thành công Chọn đăng ký hay đăng nhập lại

- Hệ thống yêu cầu nhập lại tên và mật khẩu Nếu đồng ý quay trở lại bước 2 UC kết thúc

- Thành viên đăng nhập thành công có thể sử dụngcác chức năng mà hệ thống cung cấp

Bảng 4 5 Đặc tả use case đăng nhập

2 Đặc tả use-case đăng ký

Use Case Đăng Kí

Mô tả Cho phép khách xem đăng ký làm thành viên của hệ thống

Tác nhân kích hoạt Khách xem

Tiền điều kiện Chưa có tài khoản

Các bước thực hiện

(1) Vào trang chủ của website (2) Chọn Login sau đó chọn Register trong giao diện Login (3) Tiến hành nhập thông tin khách hàng muốn thêm vào,

bao gồm : tên, email, password

(4) Nhập xong bấm nút “Register”

(5) Nếu thêm thành công, thông tin đọc giả sẽ được cập nhật

vào CSDL và hiển thị thông báo “Đăng kí thành công”

UC kết thúc

(6) Nếu thêm thất bại, thông báo lỗi và quay lại bước 3.

Thành viên đăng nhập thành công có thể sử dụng cácchức năng mà hệ thống cung cấp

Bảng 4 6 Đặc tả use case đăng ký

3 Đặc tả use-case thanh toán

Use Case Thanh Toán

Mô tả Khách hàng muốn thanh toán sản phẩm đã đưa và giỏ hàng

Tác nhân kích hoạt Khách hàng

Tiền điều kiện Đã đăng nhập thành công và đã có sản phẩm trong giỏ hàng

Các bước thực hiện

(1) Click vào biểu tượng giỏ hàng (2) Điều chỉnh số lượng các sản phẩm trong giỏ hàng (3) Khách hàng kiểm tra lại thông tin về tên, địa chỉ, số

điện thoại… nhập vào địa chỉ giao hàng, thời gian giao hàng, hình thức thanh toán (chuyển khoản hay tiền mặt)

(4) Nếu thành công sẽ có thông báo trên màn hình:” Đã

thanh toán thành công” UC kết thúc

(5) Ngược lại thì thông báo:” Thanh toán thất bại” Quay lại

bước 3

Bảng 4 7 Đặc tả use case thanh toán

4 Đặc tả use-case tìm kiếm sản phẩm

Use Case Tìm Kiếm Sản Phẩm

Mô tả Cho phép tìm kiếm thông tin của sản phẩm

Tác nhân kích hoạt Khách hàng, quản trị viên

Tiền điều kiện Sản phẩm cần tìm phải có trong CSDL

Các bước thực hiện

(1) Người dung chọn mục tìm kiếm.

(2) Chọn tìm kiếm theo tên, tìm theo nhà cung cấp, tìm theo

5 Đặc tả use-case thêm sản phẩm

Use Case Thêm Sản Phẩm

Mô tả Thêm sản phẩm mới vào trang web

Tác nhân kích hoạt Admin

Tiền điều kiện Admin phải đăng nhập thành công

Các bước thực hiện

(1) Click vào Products trong trang admin (2) Chọn Create Product

(3) Thêm các thông tin của sản phẩm (4) Sau khi điền đầy đủ thông tin, chọn Save (5) Xuất hiện sản phẩm mới nếu thêm thành công, nếu

không thì thông báo lỗi

Bảng 4 9 Đặc tả use case thêm sản phẩm

Use Case Xóa Sản Phẩm

Mô tả Khi cửa hàng không kinh doanh sản phẩm đó nữa

Tác nhân kích hoạt Admin

Tiền điều kiện Sản phẩm cần xóa phải có trong CSDL

Các bước thực hiện

(1) Click vào Product trong trang admin (2) Chọn sản phẩm cần xóa.

(3) Bấm icon “Drop”

(4) Sản phẩm sẽ mất nếu xóa thành công, nếu không thì

thông báo lỗi

Bảng 4 10 Đặc tả use case xoá sản phẩm

6 Đặc tả use-case xem sản phẩm

Use Case Xem Sản Phẩm

Mô tả Cho phép tìm kiếm thông tin của sản phẩm

Tác nhân kích hoạt Khách hàng, quản trị viên

Tiền điều kiện

Các bước thực hiện

(1) Người dùng chọn sản phẩm cần xem.

(2) Hệ thống hiển thị thông tin về sản phẩm được chọn (3) Kết thúc UC.

Bảng 4 11 Đặc tả use case xem sản phẩm

7 Đặc tả use-case xem thông tin cá nhân

Use Case Xem Thông Tin Cá Nhân

Mô tả Cho phép thành viên thay đổi thông tin đăng ký

Tác nhân kích hoạt Khách hàng, quản trị viên

Tiền điều kiện Thành viên phải đăng nhập vào hệ thống

Các bước thực hiện

(1) Thành viên chọn chức năng xem thông tin cá nhân (2) Hệ thống hiển thị form thông tin với các thông tin của

khách hàng

(3) UC kết thúc.

Bảng 4 12 Đặc tả use case xem thông tin cá nhân

8 Đặc tả use-case thêm giỏ hàng

Use Case Thêm giỏ hàng

Mô tả Cho phép khách hàng đưa sản phẩm đã chọn vào giỏ hàng

Tác nhân kích hoạt Khách hàng

Tiền điều kiện Sản phẩm đã được chọn

Các bước thực hiện

(1) Chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã

chọn vào lưu trữ trong giỏ hàng

(2) Nếu chưa chọn sản phẩm mà nhấn nút thêm vào giỏ

hàng thì thực hiện luồng rẽ nhánh A1

(3) - Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ hàng (4) - UC kết thúc e

(5) Luồng rẽ nhánh A1: chưa chọn sản phẩm cần mua

- Hệ thống thông báo sản phẩm chưa được chọn

- Hiển thị sản phẩm để khách hàng chọn

- Quay lại bước 1 của luồng sự kiện chính

Bảng 4 13 Đặc tả use case thêm vào giỏ hàng

9 Đặc tả use-case xác nhận đơn hàng

Use Case Xác nhận đơn hàng

Mô tả UC cho phép nhân viên nhận đơn hàng và giao hàng theo yêu

cầu

Tác nhân kích hoạt Nhân viên hệ thống

Tiền điều kiện Thành viên phải đăng nhập vào hệ thống

Các bước thực hiện

(1) Nhân viên nhận được đơn hàng cần thực hiện.

(2) Thay đổi trạng thái đơn hàng.

(3) Gửi thông tin phản hồi.

(4) Kết thúc UC.

Bảng 4 14 Đặc tả use case nhận và giao hàng

10 Đặc tả use-case cập nhật thông tin sản phẩm

Use Case Cập Nhật Thông Tin Sản Phẩm

Mô tả Khi có sai sót thông tin khi thêm sản phẩm hoặc sửa đổi thông

tin sản phẩm

Tác nhân kích hoạt Admin

Tiền điều kiện Phải có sản phẩm cần chỉnh sửa trong CSDL

Các bước thực hiện

(1) Click vào Product trong trang admin (2) Chọn sản phẩm cần chỉnh sửa thông tin.

(3) Click icon “Edit” để chỉnh sửa (4) Tiến hành sửa các thông tin cần thiết cho sản phẩm (5) Sửa xong bấm nút “Save”

(6) Nếu sửa thành công, thông tin sản phẩm sẽ được cập

nhật vào CSDL và hiển thị thông báo “Sửa thông tin sảnphẩm thành công” Nếu chỉnh sửa thất bại, thông báo lỗi

và nhập lại

Bảng 4 15 Đặc tả use case cập nhật thông tin sản phẩm

11 Đặc tả use-case thêm loại sản phẩm

Use Case Thêm Loại Sản Phẩm

Mô tả Thêm loại sản phẩm mới vào trang web

Tác nhân kích hoạt Admin

Tiền điều kiện Admin đã đăng nhập thành công

Các bước thực hiện

(1) Click vào Category trong trang admin (2) Chọn New

(3) Thêm các thông tin của sản phẩm (4) Sau khi điền đầy đủ thông tin, chọn Save (5) Thông báo “created category” nếu thêm loại sản phẩm

thành công, nếu không thì thông báo lỗi

Bảng 4 16 Đặc tả use case thêm loại sản phẩm