BÁO cáo THỰC tập tốt NGHIỆP tên đề tài xây DỰNG WEB bán HÀNG TRỰC TUYẾN 2023

TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP
TÊN ĐỀ TÀI

XÂY DỰNG WEB BÁN HÀNG TRỰC TUYẾN 2023
Đơn vị tập tốt nghiệp

: Công ty CP Đào tạo Công nghệ và Phát triển Devmaster

Cán bộ hướng dẫn

: Ths.Trịnh Văn Chung

Sinh viên thực hiện

: Nguyễn Hà Hồng

Lớp

: ĐH9C4

Hệ Đại học

: Chính qui

Khóa học

: 2019 - 2023

Hà Nội, tháng 03/2023
1


LỜI CẢM ƠN
Em xin gửi lời cảm ơn chân thành đến các thầy, cô là giảng viên khoa Công nghệ thông
tin, trường Đại học Tài Nguyên và Môi Trường cùng giám đốc và các anh chị trong công
ty Viện công nghệ Devmaster đã giúp em có những trải nghiệm quý báu, có những cái
nhìn trực quan hơn trong lĩnh vực phát triển phần mềm

2


Contents

LỜI CẢM ƠN.............................................................................................................................................2
DANH MỤC HÌNH ẢNH..........................................................................................................................4
PHẦN MỞ ĐẦU.........................................................................................................................................6
Chương 1. GIỚI THIỆU ĐỀ TÀI............................................................................................................9
1.1 Tên đề tài............................................................................................................................................9
1.2 Mô tả đề tài........................................................................................................................................9
1.3 Lý do chọn thiết kế Website...............................................................................................................9
1.4 Công nghệ sử dụng...........................................................................................................................10
Chương 2. CƠ SỞ LÝ THUYẾT............................................................................................................11
2.1 Tổng quan về ReactJS......................................................................................................................11
2.2 Tổng quan về Figma.........................................................................................................................11
2.3 Tổng quan về Firebase.....................................................................................................................11
Chương 3. PHÂN TÍCH ĐẶC TẢ YÊU CẦU.......................................................................................13
3.1. Yêu cầu chức năng..........................................................................................................................13
3.2 Yêu cầu phi chức năng.....................................................................................................................15

Chương 4. THIẾT KẾ HỆ THỐNG......................................................................................................16
4.1 Kiến trúc hệ thống Back-End...........................................................................................................16
4.2 Kiến trúc hệ thống Front-End...........................................................................................................18
Chương 5. THIẾT KẾ GIAO DIỆN......................................................................................................19
5.1 Giao diện trang Signup.....................................................................................................................19
5.2 Giao diện trang Login.......................................................................................................................19
5.3 Giao diện trang chủ..........................................................................................................................20
5.4 Giao diện trang cửa hàng..................................................................................................................22
5.5 Giao diện hiển thị chi tiết sản phẩm..................................................................................................24
5.6 Giao diện trang Giỏ hàng..................................................................................................................25
5.7 Giao diện chức năng Thanh toán......................................................................................................25
5.8 Một số hình ảnh giao diện trên màn hình mobile(I phone 12 Pro)....................................................27
KẾT LUẬN...............................................................................................................................................29
TÀI LIỆU THAM KHẢO........................................................................................................................30

3


DANH MỤC HÌNH ẢNH
Hình 4.1 Cấu trúc hệ thống quản lý dữ liệu...............................................................................................16
Hình 4.2 Giao diện Authentication............................................................................................................16
Hình 4.3 Giao diện Cloud Firestore..........................................................................................................17
Hình 4.4 Giao diện Storage......................................................................................................................17
Hình 4.5 Cấu trúc và thành phần của dự án..............................................................................................18
Hình 5.1 Giao diện trang Signup...............................................................................................................19
Hình 5.2 Giao diện trang Login.................................................................................................................19
Hình 5.3 Giao diện trang chủ....................................................................................................................21
Hình 5.4.1 Giao diện trang Cửa hàng........................................................................................................23
Hình 5.4.2 Giao diện chức năng lọc sản phẩm……………………………………………………………………23
Hình 5.4.3 Giao diện chức năng tìm

kiếm………………………………………………………………………….24
Hình 5.5 Giao diện hiển thị chi tiết sản
phẩm……………………………………………………………………..24
Hình 5.6 Giao diện trang Giỏ hàng…………………………………………………………………………………
25
Hình 5.7 Giao diện chức năng thanh tốn……………………………………...
………………………………….26
Hình 5.8.1 Giao diện trang chủ (mobile)………………………………………………………………………..…27
Hình 5.8.2 Giao diện trang Cửa hàng (mobile)
…………………………………………………………………...27
Hình 5.8.3 Giao diện trang Giỏ hàng (mobile)…………………………………………………………………...28
Hình 5.8.4 Giao diện trang Chi tiết sản phẩm (mobile )…………………………………………………………
28

QUÁ TRÌNH HỌC TẬP VÀ LÀM VIỆCTẠI CƠ SỞ THỰC TẬP
★ Tuần 1 (từ ngày 6/02/2023 đến ngày 11/02/2023)
-

Tìm hiểu tổng quan về nền tảng web và ngôn ngữ đánh dấu HTML5,

-

Tìm hiểu ngơn ngữ định kiểu CSS3;

-

Làm quen với code: tìm hiểu luồng hoạt động của phần mềm đang được triển
khai.

★ Tuần 2 (từ ngày 13/02/2023 đến ngày 18/02/2023)

-

Tìm hiểu về ngơn ngữ lập trình kịch bản javascrip
4


-

Tìm hiểu về thư viện Jquery

★ Tuần 3 (từ ngày 20/02/2023 đến ngày 25/02/2023)
-

Tìm hiểu về Framework Bootstrap

-

Cắt ghép giao diện web(.psd, .ai… => html)

★ Tuần 4 (từ ngày 27/02/2023 đến ngày 04/03/2023)
-

Xây dựng giao diện trang chủ cho dự án

-

Xây dựng giao diện trang giới thiệu cho dự án

★ Tuần 5 (từ ngày 6/03/2023 đến ngày 11/03/2023)
-

Xây dựng giao diện trang sản phẩm, chi tiết sản phẩm

-

Xây dựng trang tin tức. bài viết, các thông tin liên hệ cho dự án

★ Tuần 6 (từ ngày 13/03/2023 đến ngày 16/03/2023)
-

Hoàn thành giao diện website

5


PHẦN MỞ ĐẦU
1. Tính cấp thiết của đề tài
Trong thời đại chuyển giao công nghệ cộng với sự tác động của đại dịch mà người tiêu
dùng chuyển thói quen mua hàng tại các cửa hàng siêu thị sang mua sắm online. Bởi vì sự
tiện lợi, giá cả rõ ràng, vận chuyển đơn hàng ngày càng nhanh chóng hơn, các cửa hàng
kinh doanh luôn nhận thấy được tiềm năng của việc tiếp thị và bán hàng online.Đặc biệt
đối với các cửa hàng bán đồ công nghệ cần phải mở rộng hơn trong việc quảng bá các mặt
hàng của mình tới khách hàng. Nhận thấy được nhu cầu của cửa hàng và tiềm năng trong
việc kinh doanh online, em đã xây dựng "Website bán hàng trực tuyến 2023" nhằm thúc
đẩy doanh thu của cửa hàng thông qua việc bán hàng online.
Phần mềm sẽ là nơi cũng cấp cho người dùng những thông tin chính xác và giá cả
trực quan nhất của sản phẩm, góp phần làm cho việc mua bán các thiết bị cơng nghệ trong
thời kì dịch bệnh trở nên dễ dàng hơn. Ngồi ra cịn giúp của hàng có thể quản lý kho
hàng, các đơn xuất nhập hàng và doanh thu.
2. Mục tiêu đề tài:

- Nắm bắt và áp dụng được Firebase và ReactJS để xây dựng sản phẩm đề tài.
- Xây dựng được website bán hàng với nội dung phong phú, giao diện thân thiện, màu
sắc hài hòa, bố cục hợp lý, đáp ứng các chức năng cần thiết của một website thương mại
điện tử.
3. Phạm vi đề tài:
-

Phạm vi môi trường: o Triển khai sản phẩm trên môi trường web.

-

Phạm vi chức năng:
o

Đối với phía admin:
▪

Quản lý sản phẩm

▪

Quản lý đơn hàng.
6


▪

Quản lý tài khoản
▪ Thống kê.

o Đối với phía website:
▪

Đăng nhập, đăng ký tài khoản.

▪

Hiển thị danh sách sản phẩm, chi tiết sản phẩm.

▪

Tìm kiếm sản phẩm.

▪

Bộ lọc chi tiết sản phẩm.

▪

Chức năng giỏ hàng.

▪

Chức năng đặt hàng.

▪

Lịch sử mua hàng.

4. Đối tượng sử dụng:

-

Chủ cơ sở bán hàng.
Người mua hàng, khách hàng có nhu cầu
5. Phương pháp thực hiện:

-

Tìm hiểu về FireBase, ReactJS.

-

Tham khảo các website liên quan để hiểu rõ về nghiệp vụ.

-

Tìm hiểu UX/UI và tiến hành thiết kế giao diện cho website.

-

Xây dựng website cho người dùng và website cho nhân viên.

-

Tiến hành triển khai và kiểm thử.
6. Công nghệ sử dụng:

-

Backend: Firebase

7


-

Front-end: ReactJS
7. Kết quả mong đợi:

-

Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài.

-

Hiểu rõ các nghiệp vụ, chức năng của một website thương mại điện tử. - Áp dụng

được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát
triển phần mềm, cũng như quản lý và triển khai dự án phần mềm để xây dựng website
sản phẩm đề tài.
-

Giao diện website đẹp mắt, dễ sử dụng đối với người dùng.

Có thể thay đổi giao diện một cách linh động và mở rộng thêm các chức năng mới cho
website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn trong tương lai.
8. Kế hoạch thực hiện
Giai đoạn

Thời gian

Chuẩn bị

14/02/2023– 20/03/2023

Phân tích và
thiết kế

Cơng việc
- Tìm hiểu về Fire và ReactJS
- Phân tích, xác định chức năng

20/03/2023 – 26/03/2023

- Thiết kế database
- Thiết kế UI/UX
- Xây dựng website với ReactJS bao

Xây dựng ứng
dụng

gôm giao diện người dùng và giao
26/03/2023 – 05/03/2023

diện quản lý
- Xây dựng chức năng quản lý, thống
kê
- Thực hiện kiểm tra các chức năng

Kiểm thử và
sửa lỗi

05/03/2023 – 10/03/2023

- Tiến hành sửa lỗi phát sinh nếu có
- Cải thiện giao diện và hoàn thành
website

8


Hoàn thiện và
báo cáo

10/03/2023 – 12/03/2023

- Viết báo cáo

Chương 1. GIỚI THIỆU ĐỀ TÀI
1.1 Tên đề tài
-

Tên của đề tài là “Xây dựng bán hàng trực tuyến 2023 ”.

1.2 Mô tả đề tài
Tên gọi website của đề tài là Multimart. Multimart là một website hỗ trợ quản lý hàng hóa và
cung cấp giải pháp bán hàng online cho cửa hàng công nghệ. Ở Multimảt là nơi cung cấp các sản
phẩm nội thất thậm chí là các đồ cơng nghệ số.
Website cung cấp chức năng cho 2 phía người dùng chính: Chủ cửa hàng, khách hàng. Về
phía quản lý Multimart cung cấp các chức năng phục vụ cho việc quản lý phân loại sản phẩm, sản
phẩm, nhập hàng hóa, quản lý các đơn hàng, người dùng trong hệ thống và cuối cùng là thống kê.

Về phía đối tượng sử dụng là khách hàng thì Multimart cung cấp các tính năng như: xem danh sách
sản phẩm theo phân loại, lọc sản phẩm, sắp xếp, xem chi tiết sản phẩm, quản lý giỏ hàng, quản lý hồ
sơ và thông tin của khách hàng nếu khách hàng đăng nhập vào hệ thống.

1.3 Lý do chọn thiết kế Website
-

Lý do khách quan:
Cuộc cách mạng khoa học và công nghệ đã và đang diễn ra vô cùng sơi động trên tồn thế

giới đã đưa thế giới bước sang một kỉ nguyên mới, kỉ nguyên của công nghệ thông tin. Việc ứng
dụng tin học vào đời sống nói chung và cơng tác quản lý nói riêng đang phát triển mạnh mẽ, nó góp
vai trị khơng nhỏ trong việc đưa tin học trở thành một phần không thể thiếu trong tất cả mọi nghành
nghề từ văn phòng, quảng cáo, tài chính.
Từ khóa “e-Commerce” chắc chắn khơng cịn xa lạ với chúng ta. Các hoạt động kinh doanh
mua bán đang chuyển dần từ trực tiếp sang các đơn đặt hàng online. Điều đó đặt ra yêu cầu phải
chuyển đổi mơ hình kinh doanh của các cửa hàng, nhà bán lẻ nói chung và thị trường bán lẻ thiết bị
điện tử nói riêng. Để có thể triển khai tốt mơ hình kinh doanh mới này các cửa hàng, nhà bán lẻ phải
quản lý tốt được số lượng sản phẩm trong kho của mình cũng như quản lý các hoạt động khác trong
kinh doanh online để tránh mất mát về lợi nhuận.
9


-

Lý do chủ quan:
Bản thân nhóm chúng em muốn xây dựng một ứng dụng gần hơn với ứng dụng thực tế, có

thể giải quyết được vấn đề về việc xây dựng một cửa hàng kinh doanh online mà các cửa hàng bán
đồ cơng nghệ mắc phải. Cùng với đó là nhu cầu sử dụng phần mềm của một thành viên trong nhóm,

tụi em sẽ cố gắng phát triển thêm để có thể đưa phần mềm vào sử dụng thực tế.

1.4 Cơng nghệ sử dụng
-

Front-End:

• UI/UX: Figma.
• Framework: ReactJS.
-

Back-End:

• Storage: Firebase.
• Database: Cloud Firebase.
-

Mơi trường thiết kế:

• Visual Studio Code.
• Figma
-

Cơng cụ hỗ trợ:

• Chrome

10

Chương 2. CƠ SỞ LÝ THUYẾT
2.1 Tổng quan về ReactJS
-

Tổng quan:
React là một thư viện để xây dựng giao diện người dùng có thể kết hợp. Nó khuyến khích

việc tạo ra các thành phần giao diện người dùng có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời
gian. Rất nhiều người sử dụng React làm V trong MVC. React trừu tượng hóa DOM khỏi bạn, cung
cấp mơ hình lập trình đơn giản hơn và hiệu suất tốt hơn. React cũng có thể hiển thị trên máy chủ
bằng Node và nó có thể cung cấp năng lượng cho các ứng dụng gốc bằng React Native. React triển
khai luồng dữ liệu phản ứng một chiều, điều này giúp giảm bớt phần soạn sẵn và dễ lý luận hơn so
với ràng buộc dữ liệu truyền thống.

-

Ưu điểm nổi bật:

•

Sử dụng DOM ảo là một đối tượng JavaScript. Điều này sẽ cải thiện hiệu suất ứng
dụng, vì DOM ảo JavaScript nhanh hơn DOM thơng thường.

•

Có thể được sử dụng trên máy khách và máy chủ cũng như với các khuôn khổ khác.

•

Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì các ứng dụng

lớn hơn.

2.2 Tổng quan về Figma
-

Tổng quan:
Figma là phần mềm chuyên biệt được các designer dùng để thiết kế giao diện website, ứng

dụng trực tuyến mà không cần phải tải về.

-

Ưu điểm nổi bật:

•

Tương thích với nhiều hệ điều hành.

•

Phù hợp với làm việc nhóm.

•

Có thể chia sẻ và hồn tồn public.

•

Các thiết kế được lưu trữ trên đám mây

•

Cung cấp cho người dùng một kho plugin đa dạng

2.3 Tổng quan về Firebase
-

Tổng quan:
11


Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây. Hệ thống giúp người
dùng có thể lập trình ứng dụng thơng qua cách đơn giản các thao tác giữ liệu

-

Ưu điểm nổi bật:

•

Dễ sử dụng

•

Hỗ trợ phát triển ứng dụng 1 cách nhanh chóng

•

Cung cấp dịch vụ: Database of Realtime

•

Khai thác triệt để sức mạnh cũng như dịch vụ của Google.

•

Kho back-end mẫu vơ cùng đa dạng .

•

Sao lưu dữ liệu thường xuyên và đảm bảo tính bảo mật

12


Chương 3. PHÂN TÍCH ĐẶC TẢ YÊU CẦU
3.1. Yêu cầu chức năng
Nhóm chức năng

Chức năng

Mơ tả

Đăng ký tài khoản

Khách hàng có thể đăng ký tài khoản bằng email
để dễ dàng sử dụng các chức năng và ưu đãi của
website

Đăng nhập

Khách hàng sau khi đăng ký có thể sử dụng tài
khoản để đăng nhập

Xem lịch sử mua hàng

Khách hàng có thể theo dõi chi tiết danh sách chi
tiết các đơn hàng mình đã đặt

Khách hàng

Giỏ hàng
Khách hàng có thể chọn các sản phẩm và đưa vào
giỏ hàng để thuận tiện cho việc mua sắm

Chức năng đặt hàng hỗ trợ cả hai đối tượng khách
hàng đã có tài khoản và chưa có tài khoản.

-

cầu đặt hàng sẽ được chuyển thẳng tới cho

Đặt hàng

phía quản lý

-

Quản lý

Quản lý sản phẩm

Đối với các khách hàng đã có tài khoản: Yêu

Đối với các khách hàng chưa có tài khoản:
khách hàng phải nhập đầy đủ thơng tin như số
điện thoại, địa chỉ… Nhân viên sẽ gọi điện và
xác nhận.

Nhân viên quản lý có thể các thực hiện các chức
năng thêm, sửa, xóa sản phẩm.

13


Quản lý biến thể sản
phẩm

Nhân viên quản lý có thể thực hiện các chức năng
thêm, sửa xoá các biến thể của sản phẩm đó.

Quản lý thể loại

Nhân viên quản lý có thể các thực hiện các chức
năng thêm, sửa, xóa thể loại.

Quản lý thương hiệu

Nhân viên quản lý có thể các thực hiện các chức
năng thêm, sửa, xóa thương hiệu.

Quản lý mã giảm giá

Nhân viên quản lý có thể các thực hiện các chức
năng thêm, sửa, xóa các mã giảm giá.

Quản lý đơn hàng

Nhân viên quản lý có thể xem và cập nhật

trạng thái của đơn hàng. Nếu đơn hàng của tài
khoản chưa đăng ký thì nhân viên sẽ gọi điện xác
nhận

Quản lý nhập hàng

Nhân viên có thể xem, thêm hoặc xố chi đơn nhập
hàng

Quản lý tài khoản

Admin có thể thêm, sửa, xố tài khoản cho nhân
viên. Ngồi ra admin có thể xem chi tiết, vơ hiệu
hố tài khoản khách hàng

Thống kê

Hệ thống cung cấp các biểu đồ, số liệu trực quan
và chức năng xuất file excel giúp nhân viên quản lí
dễ dàng nắm bắt được tình hình kinh doanh của

cửa hàng.
Bảng 3.1 Yêu cầu chức năng

14


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

Tính bảo mật: Phải đảm bảo an toàn dữ liệu người dùng, ngăn chặn các tấn cơng từ bên
ngồi, kiểm sốt vận hành hệ thống, giảm thiểu tối đa mức độ rủi ro, rò rỉ thông tin như các
chức năng xác thực người dùng (đăng nhập, đăng ký).

-

Tính tiện dụng: Phần mềm có giao diện đẹp mắt, dễ sử dụng và tiện lợi trong việc mua sắm
online và quản lý của nhân viên.

-

Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượng lớn dữ liệu, tránh xảy ra
lỗi ngoại lệ.

-

Tính tương thích: Ứng dụng có thể chạy ổn định và tương thích với nhiều nền tảng hệ điều
hành khác nhau.

15

Chương 4. THIẾT KẾ HỆ THỐNG
4.1 Kiến trúc hệ thống Back-End

Hình 4.1 Cấu trúc hệ thống quản lý dữ liệu

- Authentication : Xác thực Firebase cung cấp dịch vụ phụ trợ, SDK dễ sử dụng và thư
viện giao diện người dùng được tạo sẵn để xác thực người dùng với ứng dụng của
bạn. Nó hỗ trợ xác thực bằng mật khẩu, số điện thoại, nhà cung cấp danh tính được liên
kết phổ biến như Google, Facebook và Twitter, v.v. 

Hình 4.2 Giao diện Authentication

- Firestore Database : Cloud Firestore là cơ sở dữ liệu linh hoạt, có thể mở rộng để phát
triển thiết bị di động, web và máy chủ từ Firebase và Google Cloud. Giống như Cơ sở dữ
liệu thời gian thực của Firebase, nó giữ cho dữ liệu của bạn được đồng bộ hóa trên các
ứng dụng khách thơng qua trình nghe thời gian thực và cung cấp hỗ trợ ngoại tuyến cho
thiết bị di động và web để bạn có thể xây dựng các ứng dụng đáp ứng hoạt động bất kể độ

16


trễ của mạng hoặc kết nối Internet. Cloud Firestore cũng cung cấp khả năng tích hợp liền
mạch với các sản phẩm Firebase và Google Cloud khác, bao gồm cả Cloud Function.

Hình 4.3 Giao diện Cloud Firestore

- Storage: Lưu trữ đám mây cho Firebase là dịch vụ lưu trữ đối tượng mạnh mẽ, đơn giản
và tiết kiệm chi phí được xây dựng cho quy mơ của Google.

Hình 4.4 Giao diện Storage

17


4.2 Kiến trúc hệ thống Front-End
- node_modules, public: file cài đặt của
React JS và các framework khác
-src: Chứa toàn bộ sucrose code của dự án
-admin: Giao diện và chương trình quản lý
- assets: Bao gồm tất cả các tài nguyên
được sử dụng trong dự án.
-Components : Chứa các components có
khả năng tái sử dụng.
-Custom-hooks: Cấu hình sử dụng state
-Pages: Chứa các components là các màn
hinh hiển thị
-Routers: Điều hướng của website
- firebase.config.js File cầu hình sử dụng
cho firebase

Hình 4.5 Cấu trúc và thành phần của dự án

18


Chương 5. THIẾT KẾ GIAO DIỆN
5.1 Giao diện trang Signup

Hình 5.6 Giao diện trang Signup

- Sau khi điền thông tin và gửi đi , dữ liệu sẽ được lưu trữ trên Cloud Firebase bao gồm:
User name, Gmail, Mật khẩu và Hình ảnh.
5.2 Giao diện trang Login

19


Hình 5.7 Giao diện trang Login

-Sử dụng gmail và mật khẩu đã tạo trước đó để đăng nhập
- Lúc này Authentiction trên firebase sẽ đảm nhận chức năng hỗ trợ việc đang nhập của
người dùng
5.3 Giao diện trang chủ

20


21


Hình 5.8 Giao diện trang chủ

- Trang chủ bao gồm Header và Footer luôn hiển thị khi tương tác với trang web
- Phần layout bao gồm các ưu đãi của cửa hàng Các sản phẩm Trending Product, Best
Sales, Sản phẩm giới hạn, Sản phẩm mới.
22


5.4 Giao diện trang cửa hàng

23


Hình 5.9.1 Giao diện trang Cửa hàng

- Giao diện trang trang cửa hàng bao gồm danh sách tất cả sản phẩm
- Bộ lọc phân loại sản phẩm và tìm kiếm sản phẩm theo tên

Hình 5.4.2 Giao diện chức năng lọc sản phẩm

24


Hình 5.4.3 Giao diện chức năng tìm kiếm

5.5 Giao diện hiển thị chi tiết sản phẩm

Hình 5.5 Giao diện hiển thị chi tiết sản phẩm
25