(Đồ án tốt nghiệp) Xây dựng hệ thống chăm sóc khách hàng cho chuỗi salon tóc

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO



ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG HỆ THỐNG CHĂM SÓC KHÁCH HÀNG
CHO CHUỖI SALON TÓC
SVTH :

LÊ QUỐC HƯNG

MSSV :

16110104

SVTH :

NGUYỄN HỮU HỒNG TRẦM

MSSV :

16110229

Khóa :

2016

Ngành :

CƠNG NGHỆ THƠNG TIN

GVHD :

THS. NGUYỄN THANH PHƯỚC

Tp. Hồ Chí Minh, tháng 12 năm 2020


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO



ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG HỆ THỐNG CHĂM SÓC KHÁCH HÀNG
CHO CHUỖI SALON TÓC
SVTH :

LÊ QUỐC HƯNG

MSSV :

16110104

SVTH :

NGUYỄN HỮU HỒNG TRẦM

MSSV :

16110229

Khóa :

2016

Ngành :

CƠNG NGHỆ THƠNG TIN

GVHD :

THS. NGUYỄN THANH PHƯỚC

Tp. Hồ Chí Minh, tháng 12 năm 2020


LỜI CẢM ƠN
Đầu tiên, nhóm thực hiện xin gửi lời cảm ơn đến Ban giám hiệu nhà trường Đại học
Sư Phạm Kỹ Thuật Thành phố Hồ Chí Minh đã tạo điều kiện, mơi trường học tập chất
lượng để nhóm có thể thực hiện đề tài một cách thuận lợi, hiệu quả.
Đồng thời, nhóm thực thiện xin gửi lời cảm ơn đến Ban chủ nhiệm cùng các thầy cô
Khoa Đào Tạo Chất Lượng Cao, Ngành Công Nghệ Thông Tin đã tạo mội trường học
tập và làm việc chuyên nghiệp, truyền đạt nhiều kiến thức bổ ích giúp nhóm vận dụng
được rất nhiều vào đề tài tốt nghiệp này.
Đặc biệt, nhóm thực hiện xin gửi lời cảm ơn chân thành nhất đến thầy Nguyễn Thanh
Phước. Thầy đã nhiệt tình hướng dẫn, góp ý và ln đồng đồng hành cùng nhóm trong
suốt q trình thực hiện đề tài.

Với những kinh nghiệm thực tiễn cịn thiếu sót và kinh nghiệm chun mơn cịn non
yếu, bài báo cáo vẫn có những thiếu sót và hạn chế nhất định. Kính mong nhận được
những phản hồi, đóng góp ý kiến và chỉ bảo thêm của quý thầy cơ để nhóm có thể đạt
được những kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ năng sau này
Chúng em xin chân thành cảm ơn.
Nhóm sinh viên

Lê Quốc Hưng – Nguyễn Hữu Hoàng Trầm


MỤC LỤC
LỜI CẢM ƠN ................................................................................................................... i
MỤC LỤC ........................................................................................................................ ii
DANH SÁCH HÌNH ẢNH .............................................................................................. v
DANH SÁCH BẢNG BIỂU .........................................................................................viii
Chương 1:

TỔNG QUAN .......................................................................................... 1

1.1.

Giới thiệu đề tài khảo sát hiện trạng ................................................................... 1

1.2.

Khảo sát hiện trạng ............................................................................................. 1

1.2.1.

Giới thiệu về trang 30shine.com .................................................................. 1

1.2.2.

Tính năng ..................................................................................................... 2

1.2.3.

Kết luận ........................................................................................................ 2

1.3.

Mục tiêu đề tài .................................................................................................... 2

1.3.1.
Chương 2:
2.1.

Mục tiêu ....................................................................................................... 2
CƠ SỞ LÝ THUYẾT ............................................................................... 5

Spring.................................................................................................................. 5

2.1.1.

Giới thiệu ..................................................................................................... 5

2.1.2.

Các module của Spring ................................................................................ 5

2.1.3.

Ưu điểm của Spring framework .................................................................. 6

2.2.

Angular ............................................................................................................... 6

2.2.1.

Giới thiệu ..................................................................................................... 6

2.2.2.

Module ......................................................................................................... 6

2.2.3.

Component ................................................................................................... 7

2.2.4.

Template ...................................................................................................... 7

2.2.5.

Metadata ....................................................................................................... 7

2.2.6.

Data binding ................................................................................................. 8

2.2.7.

Directive....................................................................................................... 8

2.2.8.

Service và Dependency Injection ................................................................ 8

2.2.9.

Ưu điểm ....................................................................................................... 8

2.3.

RESTful API....................................................................................................... 9


2.3.1.

Giới thiệu ..................................................................................................... 9

2.3.2.

Các phương thức HTTP ............................................................................... 9

2.3.3.

Ưu điểm ....................................................................................................... 9

2.4.

JSON Web Token (JWT) ................................................................................. 10

2.4.1.

Giới thiệu ................................................................................................... 10

2.4.2.

Cấu trúc ...................................................................................................... 10

Chương 3:

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

3.1.

Yêu cầu người dùng.......................................................................................... 11

3.2.

Yêu cầu hệ thống .............................................................................................. 12

3.2.1.

Các tác nhân ............................................................................................... 12

3.2.2.

Lược đồ chức năng .................................................................................... 14

Chương 4:

THIẾT KẾ HỆ THỐNG ......................................................................... 30

4.1.

Thiết kiến trúc ................................................................................................... 30

4.2.

Lược đồ tuần tự................................................................................................. 31

4.2.1.

Lược đồ tuần tự chức năng đăng nhập....................................................... 31

4.2.2.

Lược đồ tuần tự chức năng đặt lịch ........................................................... 32

4.2.3.

Lược đồ tuần tự chức năng xem lịch làm việc........................................... 33

4.2.4.

Lược đồ tuần tự chức năng cập nhật thông tin lịch đặt ............................. 33

4.2.5.

Lược đồ tuần tự chức năng cập nhật hình ảnh ........................................... 34

4.2.6.

Lược đồ tuần tự chức năng xuất hóa đơn thanh toán................................. 35

4.2.7.

Lược đồ tuần tự chức năng xem thống kê doanh thu ................................ 36

4.3.

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

4.3.1.

Mơ hình quan hệ thực thể (ERD)............................................................... 37

4.3.2.

Phân tích các thực thể ................................................................................ 38

4.4.

Thiết kế giao diện ............................................................................................. 51

4.4.1.

Chương 5:

Đặc tả chi tiết giao diện từng màn hình ..................................................... 51
HIỆN THỰC DỰ ÁN............................................................................. 88

5.1.

Môi trường phát triển........................................................................................ 88

5.2.

Quản lý dự án.................................................................................................... 88


5.2.1.

Giới thiệu về Jira ........................................................................................ 88

5.2.2.

Giới thiệu về Github .................................................................................. 89

5.2.3.

Quy trình làm việc ..................................................................................... 89

5.3.

Triển khai ứng dụng trên môi trường thực tế ................................................... 91

5.3.1.

Giới thiệu về Heroku ................................................................................. 91

5.3.2.

Triển khai ứng dụng Spring trên Heroku ................................................... 91

5.3.3.

Giới thiệu về Firebase ................................................................................ 95

5.3.4.

Giới thiệu về Github Actions ..................................................................... 95

5.3.5.

Triển khai ứng dụng Agular tự động lên Firebase với Github Actions ..... 95

Chương 6:

KẾT QUẢ SO SÁNH, THỰC NGHIỆM, TỔNG HỢP ........................ 99

6.1.

Các trường hợp thử nghiệm chức năng chính .................................................. 99

6.2.

Kết quả thực nghiệm đưa ứng dụng ra môi trường thực tế ............................ 101

Chương 7:

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ........................................... 102

7.1.

Kết quả đạt được ............................................................................................. 102

7.2.

Ưu điểm .......................................................................................................... 102

7.3.

Nhược điểm .................................................................................................... 102

7.4.

Hướng phát triển ............................................................................................. 102

TÀI LIỆU THAM KHẢO ............................................................................................ 103


DANH SÁCH HÌNH ẢNH
Hình 2.1: Kiến trúc của Angular ..................................................................................... 6
Hình 2.2: Ví dụ về JSON Web Token........................................................................... 10
Hình 3.1: Lược đồ chức năng ........................................................................................ 14
Hình 4.1: Kiến trúc hệ thống ......................................................................................... 30

Hình 4.2: Lược đồ tuần tự chức năng đăng nhập .......................................................... 31
Hình 4.3: Lược đồ tuần tự chức năng đặt lịch............................................................... 32
Hình 4.4: Lược đồ tuần tự chức năng xem lịch làm việc .............................................. 33
Hình 4.5: Lược đồ tuần tự chức năng cập nhật thông tin lịch đặt ................................. 33
Hình 4.6: Lược đồ tuần tự chức năng xem lịch làm việc .............................................. 34
Hình 4.7: Lược đồ tuần tự chức năng xem lịch làm việc .............................................. 35
Hình 4.8: Lược đồ tuần tự chức năng xem thống kê doanh thu .................................... 36
Hình 4.9: Mơ hình quan hệ thực thể (ERD) .................................................................. 37
Hình 4.10: Hình thực thể Province................................................................................ 38
Hình 4.11: Hình thực thể District .................................................................................. 39
Hình 4.12: Hình thực thể Ward ..................................................................................... 39
Hình 4.13: Hình thực thể salon ..................................................................................... 40
Hình 4.14: Hình thực thể Employee.............................................................................. 41
Hình 4.15: Hình thực thể Role ...................................................................................... 42
Hình 4.16: Hình thực thể Account ................................................................................ 42
Hình 4.17: Hình thực thể Service_Type........................................................................ 43
Hình 4.18: Hình thực thể Service .................................................................................. 43
Hình 4.19: Hình thực thể Booking ................................................................................ 44
Hình 4.20: Hình thực thể Booking_Service .................................................................. 45
Hình 4.21: Hình thực thể Customer .............................................................................. 45
Hình 4.22: Hình thực thể Bill ........................................................................................ 46
Hình 4.23: Hình thực thể Customer_Rating ................................................................. 47
Hình 4.24: Hình thực thể Rating ................................................................................... 47
Hình 4.25: Hình thực thể Product_Type ....................................................................... 48
Hình 4.26: Hình thực thể Product ................................................................................. 48
Hình 4.27: Hình thực thể Order_Detail ......................................................................... 49
Hình 4.28: Hình thực thể Order .................................................................................... 50
Hình 4.29: Giao diện màn hình trang chủ_1 ................................................................. 51
Hình 4.30: Giao diện màn hình trang chủ_2 ................................................................. 52
Hình 4.31: Giao diện màn hình đăng ký ....................................................................... 54

Hình 4.32: Giao diện màn hình đăng nhập ................................................................... 55


Hình 4.33: Giao diện màn hình đặt salon ...................................................................... 56
Hình 4.34: Giao diện màn hình chọn dịch vụ ............................................................... 57
Hình 4.35: Giao diện màn hình chọn lịch ..................................................................... 58
Hình 4.36: Giao diện màn hình hồn tất ....................................................................... 59
Hình 4.37: Giao diện màn hình lịch sử đặt lịch ............................................................ 60
Hình 4.38: Giao diện màn hình thơng tin lịch đặt_1 ..................................................... 61
Hình 4.39: Giao diện thơng tin lịch đặt_2 ..................................................................... 62
Hình 4.40: Giao diện màn hình sản phẩm ..................................................................... 63
Hình 4.41: Giao diện màn hình giỏ hàng ...................................................................... 64
Hình 4.42: Giao diện màn hình đặt hàng ...................................................................... 65
Hình 4.43: Giao diện màn hình lịch sử đơn hàng cá nhân ............................................ 66
Hình 4.44: Giao diện màn hình chi tiêt đơn hàng ......................................................... 67
Hình 4.45: Giao diện màn hình đăng nhập trang quản trị ............................................. 68
Hình 4.46: Giao diện thanh điều hướng trang quản trị ................................................. 69
Hình 4.47: Giao diện màn hình trang tổng quan_1 ....................................................... 70
Hình 4.48: Giao diện màn hình trang tổng quan_2 ....................................................... 71
Hình 4.49: Giao diện màn hình quản lý nhân viên ....................................................... 73
Hình 4.50: Giao diện màn hình quản lý salon ............................................................... 74
Hình 4.51: Giao diện modal thêm mới salon ................................................................ 75
Hình 4.52: Giao diện màn hình quản lý lịch đặt ........................................................... 76
Hình 4.53: Giao diện modal thơng tin thanh tốn lịch đặt ............................................ 77
Hình 4.54: Giao diện hóa đơn thanh tốn...................................................................... 77
Hình 4.55: Giao diện modal đặt lịch mới ...................................................................... 79
Hình 4.56: Giao diện màn hình quản lý sản phẩm ........................................................ 80
Hình 4.57: Giao diện modal thêm sản phẩm ................................................................. 81
Hình 4.58: Giao diện màn hình quản lý dịch vụ ........................................................... 82
Hình 4.59: Giao diện màn hình quản lý đơn hàng ........................................................ 83

Hình 4.60: Giao diện màn hình xem lịch làm việc theo tháng của stylist .................... 84
Hình 4.61: Giao diện màn hình xem lịch làm việc theo ngày của stylist...................... 85
Hình 4.62: Giao diện modal xem chi tiết làm việc của stylist_1 .................................. 86
Hình 4.63: Giao diện modal lịch làm việc của stylist_2 ............................................... 87
Hình 5.1: Jira board ....................................................................................................... 88
Hình 5.2: Nội dung các commit liên kết đến Jira .......................................................... 89
Hình 5.3: Ví dụ về pull request của nhóm thực hiện .................................................... 90
Hình 5.4. Thơng tin một Jira đã hồn thành của nhóm thực hiện ................................. 90
Hình 5.5: Tạo ứng dụng Heroku ................................................................................... 91
Hình 5.6: Liên kết Heroku với Github .......................................................................... 92


Hình 5.7: Thêm PostgreSQL vào Heroku ..................................................................... 92
Hình 5.8: Thơng tin cơ sở dữ liệu ................................................................................. 93
Hình 5.9: Tạo Procfile chứa mã để chạy chương trình ................................................. 93
Hình 5.10: Deploy ứng dụng từ động với Github ......................................................... 94
Hình 5.11: Deploy ứng dụng thủ cơng .......................................................................... 94
Hình 5.12: Nội dung log của hệ thống sau khi build .................................................... 94
Hình 5.13: Khởi tạo Firebase Hosting .......................................................................... 96
Hình 5.14: Lấy Firebase Token của ứng dụng .............................................................. 96
Hình 5.15: Lưu Firebase Token vào Github của ứng dụng........................................... 97
Hình 5.16: Cấu hình điều kiện kích hoạt Workflow ..................................................... 97
Hình 5.17: Cấu hình các bước thực hiện để deploy ứng dụng lên Firebase ................. 98
Hình 5.18: Kết quả deploy tự động của ứng dụng ........................................................ 98


DANH SÁCH BẢNG BIỂU
Bảng 3.1: Yêu cầu người dùng ...................................................................................... 11
Bảng 3.2: Mô tả các tác nhân......................................................................................... 12
Bảng 3.3: Chức năng của từng tác nhân ........................................................................ 12

Bảng 3.4: Chi tiết lược đồ chức năng ............................................................................ 15
Bảng 3.5: Mô tả chức năng đăng nhập .......................................................................... 16
Bảng 3.6: Mô tả chức năng đăng ký .............................................................................. 17
Bảng 3.7: Mô tả chức năng đặt lịch ............................................................................... 18
Bảng 3.8: Mô tả chức năng xem lịch sử đặt lịch ........................................................... 18
Bảng 3.9: Mô tả chức năng thêm sản phẩm vào giỏ hàng ............................................. 19
Bảng 3.10: Mô tả chức năng quản lý giỏ hàng .............................................................. 20
Bảng 3.11: Mơ tả chức năng thanh tốn ........................................................................ 20
Bảng 3.12: Mơ tả chức năng quản lý đơn hàng cá nhân ............................................... 21
Bảng 3.13: Mơ tả chức năng bình chọn sản phẩm......................................................... 21
Bảng 3.14: Mô tả chức năng đăng xuất ......................................................................... 22
Bảng 3.15: Mô tả chức năng quản lý salon ................................................................... 22
Bảng 3.16: Mô tả chức năng thêm salon ....................................................................... 23
Bảng 3.17: Mô tả chức năng cập nhật salon .................................................................. 23
Bảng 3.18: Mơ tả chức năng xóa salon ......................................................................... 24
Bảng 3.19: Mơ tả chức năng quản lý lịch đặt ................................................................ 24
Bảng 3.20 : Mô tả chức năng đặt lịch mới .................................................................... 24
Bảng 3.21: In hóa đơn ................................................................................................... 25
Bảng 3.22: Mơ tả chức năng quản lý đơn hàng ............................................................. 25
Bảng 3.23: Xác nhân đơn hàng ..................................................................................... 26
Bảng 3.24: Xác nhận đã giao hàng ................................................................................ 26
Bảng 3.25: Mô tả chức năng quản lý lịch làm việc cá nhân.......................................... 27
Bảng 3.26: Xem lịch theo ngày, tháng .......................................................................... 27
Bảng 3.27: Xem chi tiết lịch .......................................................................................... 28
Bảng 3.28: Xác nhận bắt đầu thực hiện lịch .................................................................. 28
Bảng 3.29: Chụp ảnh và upload hình ảnh ..................................................................... 28
Bảng 3.30: Mô tả chức năng xem tổng quan ................................................................. 29
Bảng 4.1: Bảng mô tả các thực thể trong cơ sở dữ liệu................................................. 37
Bảng 4.2: Bảng mô tả thực thể Province ....................................................................... 38
Bảng 4.3: Bảng mô tả thực thể District ......................................................................... 39

Bảng 4.4: Bảng mô tả thực thể Ward ............................................................................ 40
Bảng 4.5: Bảng mô tả thực thể Salon ............................................................................ 40
Bảng 4.6: Bảng mô tả thực thể Employee ..................................................................... 41


Bảng 4.7: Bảng mô tả thực thể Role.............................................................................. 42
Bảng 4.8: Bảng mô tả thực thể Account........................................................................ 43
Bảng 4.9: Bảng mô tả thực thể Service_Type ............................................................... 43
Bảng 4.10: Bảng mô tả thực thể Service ....................................................................... 44
Bảng 4.11: Bảng mô tả thực thể Booking ..................................................................... 44
Bảng 4.12: Bảng mô tả thực thể Booking_Service ....................................................... 45
Bảng 4.13: Bảng mô tả thực thể Customer.................................................................... 45
Bảng 4.14: Bảng mô tả thực thể Bill ............................................................................. 46
Bảng 4.15: Bảng mô tả thực thể Customer_Rating ....................................................... 47
Bảng 4.16: Bảng mô tả thực thể Rating ........................................................................ 47
Bảng 4.17: Bảng mô tả thực thể Product_Type ............................................................ 48
Bảng 4.18: Bảng mô tả thực thể .................................................................................... 48
Bảng 4.19: Bảng mô tả thực thể Order_Detail .............................................................. 49
Bảng 4.20: Bảng mô tả thực thể Order .......................................................................... 50
Bảng 4.21: Đặc tả chi tiết giao diện màn hình trang chủ .............................................. 52
Bảng 4.22: Đặc tả chi tiết giao diện màn hình đăng ký................................................. 54
Bảng 4.23: Đặc tả chi tiết giao diện màn hình đăng nhập ............................................. 55
Bảng 4.24: Đặc tả chi tiết giao diện màn hình đặt salon ............................................... 56
Bảng 4.25: Đặc tả chi tiết giao diện màn hình chọn dịch vụ......................................... 57
Bảng 4.26: Đặc tả chi tiết giao diện màn hình chọn lịch............................................... 58
Bảng 4.27: Đặc tả chi tiết giao diện màn hình hồn tất................................................. 59
Bảng 4.28: Đặc tả chi tiết giao diện màn hình giao diện màn hình lịch sử đặt lịch ...... 60
Bảng 4.29: Đặc tả chi tiết giao diện màn hình thơng tin lịch đặt .................................. 62
Bảng 4.30: Đặc tả chi tiết giao diện màn hình sản phẩm .............................................. 63
Bảng 4.31: Đặc tả chi tiết giao diện màn hình giao diện màn hình giỏ hàng................ 64

Bảng 4.32: Đặc tả chi tiết giao diện màn hình đặt hàng ................................................ 65
Bảng 4.33: Đặc tả chi tiết giao diện màn hình lịch sử đơn hàng cá nhân ..................... 66
Bảng 4.34: Đặc tả chi tiết giao diện màn hình chi tiết đơn hàng .................................. 67
Bảng 4.35: Đặc tả chi tiết giao diện màn hình đăng nhập trang quản trị ...................... 68
Bảng 4.36: Đặc tả chi tiết giao diện thanh điều hướng trang quản trị ........................... 69
Bảng 4.37: Đặc tả chi tiết giao diện màn hình trang tổng quan .................................... 71
Bảng 4.38: Đặc tả chi tiết giao diện màn hình quản lý nhân viên ................................. 73
Bảng 4.39: Đặc tả chi tiết giao diện màn hình quản lý salon ........................................ 75
Bảng 4.40: Đặc tả chi tiết giao diện modal thêm mới salon ......................................... 75
Bảng 4.41: Đặc tả chi tiết giao diện màn hình quản lý lịch đặt .................................... 78
Bảng 4.42: Đặc tả chi tiết giao diện modal đặt lịch mới ............................................... 79
Bảng 4.43: Đặc tả chi tiết giao diện màn hình quản lý sản phẩm ................................. 80


Bảng 4.44: Đặc tả chi tiết giao diện modal thêm sản phẩm .......................................... 81
Bảng 4.45: Đặc tả chi tiết giao diện màn hình quản lý dịch vụ .................................... 82
Bảng 4.46: Đặc tả chi tiết giao diện màn hình quản lý đơn hàng ................................. 83
Bảng 4.47: Bảng đặc tả chi tiết giao diện màn hình xem lịch làm việc của stylist ....... 86
Bảng 4.48: Bảng đặc tả chi tiết giao diện modal lịch làm việc của stylist .................... 87


Báo cáo đồ án tốt nghiệp
Chương 1: TỔNG QUAN
1.1. Giới thiệu đề tài khảo sát hiện trạng
Hiện nay, ngành công nghệ thơng tin đang phát triển mạnh mẽ, đóng một vai trị
khơng thể thiếu trong xã hội hiện nay. Cơng nghệ thông tin được ứng dụng vào gần như
là tất cả các lĩnh vực như khoa học, xã hội, giáo dục, thương mại, giải trí … giúp thúc
đẩy xã hội hiện đại hóa, phát triền kinh tế, tạo ra mơi trường cạnh tranh cao thúc đẩy sự
phát triển chung cho tồn xã hội.
Những năm gần đây, tại Việt Nam cơng nghệ thông tin đang được áp dụng mạnh,

cập nhật lượng thông tin liên tục giúp người dân nắm bắt thông tin nhanh chóng và hỗ
trợ nhiều tính năng tiện lợi giúp lượng công việc được giải quyết một cách nhanh chóng
và hiệu quả, qua đó tăng năng suất cơng việc giúp các doanh nghiệp phát triển mạnh mẽ.
Với sự phổ biến hiện nay, việc ứng dụng công nghệ thông tin không chỉ giúp cho
lượng công việc được giải quyết nhanh chóng dễ dàng, mà cịn giúp quảng bá thương
hiệu, hình ảnh… giúp các ngành về giải trí, thời trang phát triển vượt bậc.
Ngành làm tóc hiện nay đang được lan truyền và phát triển mạnh mẽ thu hút nhiều
sự chú ý của nhiều lứa tuổi đặc biệt là giới trẻ cả nam lẫn nữ, tạo ra một xu hướng mới
bùng nổ cho thời trang ngày nay. Và tại các tiệm làm tóc hiện nay với lượng khách ngày
càng đơng, nhưng nhân lực thiếu hụt khiến việc quản lý khách hàng khó khăn, qua đó
khiến khách hàng phải đợi lâu hoặc không được trải nghiệm dịch vụ mong muốn khiến
khách hàng mất thời gian và không thoải mái dẫn đến việc mất khách.
Qua đó nhóm quyết định xây dựng một hệ thống quản lý chuỗi salon tóc nhằm
đáp ứng nhu cầu người dùng giúp cho người dùng được trải nghiệm các dịch vụ tốt và
thoải mái, cùng với đó là giúp việc quản lý nhân viên, khách hàng một cách dễ dàng, hợp
lý giúp tăng chất lượng phục vụ và lan truyền, quảng bá hình ảnh đến nhiều người dùng
hơn.
1.2. Khảo sát hiện trạng
1.2.1. Giới thiệu về trang 30shine.com
30Shine là một trang web về chuỗi salon tóc phổ biến tại Việt Nam hiện nay.
Website cung cấp cho khách hàng danh sách dịch vụ, thời gian làm việc của các stylist
của hàng giúp khách hàng có thể chọn dịch vụ và đặt lịch trước khi đến để cửa hàng giúp
khách hàng không phải chờ đợi khi đến cửa hàng.

Chương 1: Tổng quan

1


Báo cáo đồ án tốt nghiệp

1.2.2. Tính năng
Tính năng chính của 30shine:
• Đặt lịch:
o Nhập số điện thoại
o Chọn salon, hỗ trợ tìm kiếm salon gần vị trí hiện tại, hoặc lọc theo
Tỉnh/Thành phố, Quận/Huyện
o Chọn dịch vụ
o Chọn ngày cắt, chọn stylist, chọn giờ cắt
o Yêu cầu thêm của khách hàng
o Hồn tất
• Xem lịch đặt (có thể đổi lịch hoặc hủy lịch):
o Nhập số điện thoại
o Chọn xem lịch đặt
o Đổi lịch
o Hủy lịch
• Đặt hàng:
o Chọn sản phẩm
o Nhập thông tin giao hàng
o Chọn phương thức thanh tốn
o Thanh tốn
1.2.3. Kết luận
• Ưu điểm:
o Hệ thống chuỗi salon lớn, đáp ứng nhu cầu về vị trí giúp khách hàng dễ
dàng di chuyển
o Thông tin dịch vụ rõ ràng giúp khách hàng lựa chọn được dịch vụ ưng ý
o Thời gian đặt lịch rõ ràng giúp khách hàng lựa chọn được giờ giấc phù hợp
o Hệ thống gợi ý rõ rang, giúp khánh hàng dễ dàng tìm thấy dịch vụ đã từng
sử dụng
• Nhược điểm:
o Chưa kiểm sốt được những lịch đặt ảo thông qua số điện thoải ảo

1.3. Mục tiêu đề tài
1.3.1. Mục tiêu
a) Nắm được nghiệp vụ hỗ trợ chăm sóc khách hàng cho chuỗi salon thông qua các
trang web đang hoạt động

Chương 1: Tổng quan

2


Báo cáo đồ án tốt nghiệp
Dựa vào khảo sát hiện trạng có thể nắm bắt được nghiệp vụ các trang web qua đó
giúp nhóm thực hiện hiểu được các luồng xử lý, cách hoạt động của trang web hiện có
để có thể phân tích thiết kế các chức năng một cách hợp lý, hiệu quả.
b) Tìm hiểu và vận dụng các cơng nghệ vào đề tài
• Tìm hiểu SpringBoot để xây dựng Back-end cho ứng dụng
• Tìm hiểu Angular để xây dựng Front-end cho ứng dụng
• Tìm hiểu Postgresql để xây dựng database
• Tìm hiểu Heroku và Firebase để deploy ứng dụng
c) Xây dựng website hỗ cho khách hàng và nhân viên của salon với các tính năng
• Đăng kí, đăng nhập
Người dùng phải đăng kí tài khoản, sau đó đăng nhập mới có thể đặt lịch hay
mua hàng tại trang web, chức năng này giúp trang web quản lý hiệu quả hơn tránh
tình trạng đặt lịch, đặt hàng tràn làn và khơng xác thực.
• Đăng nhập bằng google, facebook
Đăng nhập bằng google, facebook giúp khách hàng có thể đăng nhập nhanh
chóng, dễ dàng khơng phải đăng kí một cách rườm rà, hay dễ dàng nhớ tài khoản
hơn.
• Đặt lịch hẹn
Chức năng đặt lịch hiển thị thông tin salon, dịch vụ, thời gian trống của các salon,

stylist cho phép khách hàng lựa chọn salon phù hợp, dịch vụ sử dụng, stylist yêu
thích, và thời gian thích hợp để đặt lịch hẹn trước khi đến cắt, giúp khách hàng không
phải chờ đợi khi đến salon trải nghiệm dịch vụ.
• Xem lịch sử đặt lịch (có thể đổi lịch hoặc hủy lịch đang đợi)
Chức năng cho phép khách hàng xem lại lịch sử đặt lịch để nắm bắt thơng tin lịch
đặt, có thể đổi lịch nếu bận đột xuất hoặc thay đổi dịch vụ hay stylist khác hoặc hủy
lịch nếu không thu xếp được thời gian đến salon.
• Đặt mua sản phẩm
Chương 1: Tổng quan

3


Báo cáo đồ án tốt nghiệp
Chức năng hiển thị các sản phẩm dùng để chăm sóc tóc, hay các sản phẩm liên
quan đến làm đẹp cho phép khách hàng lựa chọn và đặt mua sản phẩm của cửa hàng.
• Xem lịch sử đơn hàng
Chức năng cho phép khách hàng xem lại lịch sử đặt hàng để nắm bắt thông tin
những sản phẩm đã đặt tại cửa hàng.
• Xem thống kê doanh thu
Admin có thể xem thống kê các đơn hàng mới, các sản phẩm, dịch vụ được sử
dụng trong ngày, tháng hoặc năm qua đó nắm bắt được doanh thu của salon.
• Quản lý sản phẩm, dịch vụ
Cho phép Admin thêm mới, cập nhật thơng tin hay xóa bỏ sản phẩm, dịch vụ
• Quản lý đơn hàng
Chức năng cho phép admin nắm bắt được thơng tin đơn hàng, qua đó kiểm sốt
đơn hàng một cách hiệu quả.
• Quản lý lịch đặt
Quản lý lịch đặt giúp thu ngân có thể nắm bắt được lịch đặt của khách hàng, qua
đó thơng báo và đưa khách hàng đến vị trí stylist đã đặt để thực hiện dịch vụ, sau khi

dịch vụ đã hoàn thành thu ngân xác nhận và in hóa đơn thanh tốn cho khách hàng.
• Đăng tải hình ảnh của các kiểu tóc đã hồn thành
Stylist sau khi thực hiện xong dịch vụ chụp hình và upload các hình ảnh sản phẩm
để hiển thị cho khách hàng đánh giá và xem lại lịch sử các hình ảnh đã từng chụp
trước đó.

Chương 1: Tổng quan

4


Báo cáo đồ án tốt nghiệp
Chương 2: CƠ SỞ LÝ THUYẾT
2.1. Spring
2.1.1. Giới thiệu
Spring là một framework java mạnh mẽ và phổ biến nhất hiện nay được sử dụng
rộng rãi bởi các lập trình viên. Nó giúp rút ngắn thời gian lập trình cũng như tạo ra các
ứng dụng có hiệu năng cao và dễ mở rộng. Spring được xây dựng dựa trên nguyên lý
thiết kế chính là Dependency Injection và Inversion of Control.
Dependency Injection là nguyên lý thiết kế mà các Object không liên kết trực tiếp
với nhau mà liên kết thông qua Interface và thể hiện chi tiết của nó sẽ được Inject vào
đối tượng lúc runtime. Từ đó giúp chúng ta dễ dàng dễ dàng mở rộng code và giảm sự
phụ thuộc giữa các đối tượng với nhau.
Inversion of Control là nguyên tắc thiết kế sử dụng để đảo ngược luồng điều khiển
nhằm giảm sự phụ thuộc vào nhau của các đổi tượng. Cụ thể ở đây đó là việc khởi tạo
các đối tượng phụ thuộc sẽ khơng do đối tượng chính kiểm sốt nữa mà sẽ được Inversion
of Control Container quản lý. Các đối tượng này sẽ được Inject vào những nơi cần sử
dụng thông qua Dependency Injection.
Nhờ việc tuân thủ theo nguyên tắc thiết kế này nên các ứng dụng xây dựng bằng
Spring dễ dàng bảo trì, tái sử dụng code, thay thế các module một cách đơn giản.

2.1.2. Các module của Spring
Với gần 20 năm phát triển Spring đã xây dựng được hệ sinh thái với hơn 20 module
khác nhau. Spring giúp cho các lập trình viên xây dựng ứng dụng web một cách dễ dàng
và nhanh chóng. Trong đề tài này nhóm thực hiện sử dụng các module sau của Spring
để xây dựng ứng dụng web:
• Spring boot: hỗ trợ việc khởi tạo một ứng dụng Spring với đầy đủ những cấu hình
cơ bản.
• Spring MVC: hỗ trợ xây dựng các ứng dụng web theo kiến trúc MVC.
• Spring Data: cung cấp cơ chế ánh xạ các đổi tượng của java đến các thực thể trong
cơ sở dữ liệu và truy vấn dữ liệu.
• Spring Security: cung cấp cơ chế xác thực và phân quyền cho ứng dụng.

Chương 2: Cơ sở lý thuyết

5


Báo cáo đồ án tốt nghiệp
2.1.3. Ưu điểm của Spring framework
• Là dự án mã nguồn mở với cộng đồng người sử dụng rộng lớn, và nguồn tài liệu
phong phú.
• Có nhiều module hỗ trợ giúp cho việc xây dựng ứng dụng một cách dễ dàng và
nhanh chóng.
• Đơn giản hóa việc cấu hình giúp lập trình viên tập trung vào phát triển ứng dụng.
2.2. Angular
2.2.1. Giới thiệu
Angular là một framework được phát triển bởi Google, được dùng để xây dựng các
ứng dụng single page sử dụng HTML và TypeScript.
Kiến trúc của Angular bao gồm 8 thành phần chính: Module, Component,
Template, Metadata, Data binding, Directive, Service và Depency Injection.

Hình 2.1: Kiến trúc của Angular
2.2.2. Module
Module là khái niệm rộng nhất của Angular. Một module có thể bao gồm các
components, directives, pipes… và tập hợp các module sẽ tạo nên một ứng dụng
Angular. Các thuộc tính của module bao gồm:

Chương 2: Cơ sở lý thuyết

6


Báo cáo đồ án tốt nghiệp
• imports: Định nghĩa sự phụ thuộc của một module, các module phụ thuộc sẽ được
load trước module chính.
• declarations: Định nghĩa tất cả các component sẽ được dùng trong một module.
Nếu chưa được định nghĩa thì các component trong module sẽ khơng thể gọi nhau
vì chúng khơng tìm thấy nhau.
• boostrap: Mỗi ứng dụng Angular đều có một module gốc được định nghĩa trong
boostrap, module này sẽ có một component gốc chứa giao diện sẽ được hiển thị
đầu tiên của ứng dụng.
2.2.3. Component
Một component có thể hiểu như một thành phần giao diện được hiển thị trên trình
duyệt. Nó là sự kết hợp của giao diện HTML và code TypeScript xử lý các sự kiệm đi
kèm. Mỗi component định nghĩa một lớp chứa dữ liệu và các logic xử lí của ứng dụng
và được đánh dấu @Component bên trên lớp đó. Một tập hợp các component liên kết
với nhau hiển thị ra mà hình được gọi là một View và mỗi View sẽ ứng với một đường
dẫn của ứng dụng web.
2.2.4. Template
Angular template bao gồm một khung HTML và các cú pháp của Angular dùng

chỉnh sửa các thành phần HTML trước khi nó được hiển thị. Các template directive của
Angular sẽ cung cấp các logic và ràng buộc để liên kết các dữ liệu của ứng dụng với các
DOM (Document Object Model). Có 2 loại ràng buộc dữ liệu:
• Event binding: ghi nhận những tương tác của người dùng với dụng và cho phép
người lập trình đưa ra những logic xử lí ứng với tương tác đó. Ví dụ như khi người
dùng click vào một button hay nhập thơng tin vào ơ input…
• Property binding: giúp người lập trình gán các giữ liệu của của ứng dụng vào
các thuộc tính HTML. Ví dụ như khi thay đổi giá trị của một thẻ input dựa trên
dữ liệu của ứng dụng trong component tương ứng.
2.2.5. Metadata
Metadata là các cấu hình của một component, nó bao gồm:
• selector: tên của component để các component khác gọi đến trong code HTML.
• template: định nghĩa khung HTML cho component.
• templateUrl: đường dẫn tới file HTML bên ngoài để lấy file đó làm khung
HTML cho component.
• styles: định nghĩa style css cho component.
Chương 2: Cơ sở lý thuyết

7


Báo cáo đồ án tốt nghiệp
• styleUrl: đường dẫn đến file CSS dành riêng cho component.
2.2.6. Data binding
Data binding đóng vai trò quan trọng trong việc giao tiếp giữa template và
component, cũng như giao tiếp giữa các component với nhau. Nó giúp cho chúng ta hiển
thị dữ liệu của ứng dụng ra màn hình bằng 2 cách:
• Interpolation: truyền dữ liệu 1 chiều từ component ra HTML.
• Two-way binding: truyền dữ liệu 2 chiều giữa compent và HTML, nghĩa là khi
giá trị của thẻ HTML thay đổi thì dữ liệu trong component sẽ ngay lập tức thay

đổi theo giá trị đó và ngược lại.
2.2.7. Directive
Directive là những thành phần mở rộng cho các thẻ HTML trong Angular. Các
directive sẽ được trình biên dịch của Angular biến đổi thành các thẻ HTML trước khi
hiển thị ra màn hình. Có 3 lại directive:
• Components directive: một component sẽ được gọi ra thơng qua selector của nó
trong trang HTML. Ví dụ: khi đưa selector <app-root/> vào file index.html, bản
thân HTML sẽ không hiểu được thẻ này mà sẽ dựa trên chỉ dẫn của directive trong
q trình Angular biên dịch để chuyển nó thành khối thẻ HTML tương ứng để
trình duyệt có thể hiểu được.
• Structural directive: dùng để thay đổi giao diện bằng cách thêm, bớt, thay thế
các phần tử HTML. Các structural directive thường có dấu ‘*’ ở trước của
directive. Ví dụ: *ngFor, *ngIf…
• Attribute directive: dùng để thay thể hành vi của những những thành phần giao
diện đã có sẵn. Cụ thể nó sẽ dựa trên data binding, event binding và property
binding để biên dịch ra các thẻ HTML tương ứng.
2.2.8. Service và Dependency Injection
Trong Angular, những logic hay hay dữ liệu được chung cho nhiều componet sẽ
được đưa vào một lớp service. Lớp service này cần được đánh dấu @Injectable, và khai
báo ở phần providers của component hoặc module chứa component để nó có thể inject
vào các component đó theo cơ chế tương tự như của Spring (mục 2.2.1).
2.2.9. Ưu điểm
• Cung cấp nhiều module giúp cho việc xây dựng front-end của ứng dụng web dễ
dàng và nhanh chóng hơn.
• Tính tái sử dụng và mở rộng cao nhờ việc chia ứng dụng thành các component.
Chương 2: Cơ sở lý thuyết
8


Báo cáo đồ án tốt nghiệp

• Được viết bằng Typescript – ngôn ngữ hướng đối tượng, giúp cho cách tổ chức
code trở nên rõ ràng.
• Cộng động sử dụng đơng đảo, với nhiều nguồn tài liệu tham khảo và thư viện hỗ
trợ.
2.3. RESTful API
2.3.1. Giới thiệu
REST (REpresentational State Transfer) là một thiết kế tận dụng những ưu điểm
của giao thức HTTP để phát triển ứng dụng web (thiết kế web service) phục vụ cho việc
quản lý tài nguyên của ứng dụng. REST không phụ thuộc và một loại định dạng dữ liệu
như SOAP (định dạng XML) mà nó có thể xử lý nhiều loại định dạng dữ liệu khác nhau
tùy vào nhu cầu người sử dụng. Một ứng dụng tuân thủ theo nguyên tắc thiết kế này được
gọi là RESTful.
API (Application Programming Interface) là phương thức, giao thức kết nối giữa
các hệ thống, thành phần ứng dụng khác nhau.
RESTful API sử dụng các phương thức HTTP để các hệ thống tương tác với nhau
theo chuẩn REST. Nó cho phép chúng ta phân chia ứng dụng ra thành những thành phần
riêng biệt (Client và Server) và giao tiếp với nhau thông qua các API với một định dạng
dữ liệu cụ thể (trong đề tại này nhóm thực hiện sử dụng định dạng JSON).
2.3.2. Các phương thức HTTP
HTTP định nghĩa một tập các phương thức để miêu tả các yêu cầu giữa các hệ
thống với nhau để thêm, xóa, cập nhật, hoặc đơn giản là đọc một tài nguyên. Có tổng
cộng 9 loại phương thức: GET, HEAD, POST, PUT, PATCH, DELETE, CONNECT,
OPTIONS, TRACE. Trong đề tài này, nhóm thực hiện sử dụng các phương thức sau:
• GET: dùng để truy xuất dữ liệu và khơng sửa đổi thơng tin theo bất kì cách nào.
• POST: dùng để tạo ra một đối tượng mới trong cơ sở dữ liệu.
• PUT: dùng để cập nhật tồn bộ thơng tin của một đối tượng hiện có. Nếu đối
tượng khơng tồn tại thì sẽ tạo mới.
• PATCH: dùng để cập nhật một phần thông tin của đối tượng được u cầu.
• DELETE: dùng để xóa đối tượng được yêu cầu.
2.3.3. Ưu điểm

• Khả năng mở rộng cao nhờ sự tách biệt giữa các thành phần.
• Sử dụng được cho nhiều nền tảng khác nhau mobile, web…
Chương 2: Cơ sở lý thuyết

9


Báo cáo đồ án tốt nghiệp
• Giao tiếp giữa các thành phần được định nghĩa rõ ràng, dễ hiểu.
• Khả năng thay đổi linh hoạt, không phụ thuộc vào một loại dữ liệu nhất định.
2.4. JSON Web Token (JWT)
2.4.1. Giới thiệu
JSON Web Token (JWT) là một chuỗi mã hóa được dùng để truyền dữ liệu dữ liệu
một cách an toàn giữa các bên bằng một đối tượng JSON. Thông tin truyền đi được xác
thực bằng một chữ ký số mã hóa bằng HMAC SHA256 hoặc RSA. JWT thường được
dùng để xác thực người dùng trong hệ thống sử dụng RESTful API.
2.4.2. Cấu trúc
Cấu trúc của JWT bao gồm 3 phần phân cách nhau bằng dấu ‘.’:
• Header: chứa thơng tin của giải thuật mã hóa chữ ký số (HMAC SHA256 hoặc
RSA) và loại token (JWT). Header là một đối tượng JSON được mã hóa bằng
Base64.
• Payload: chứa nội dung của thơng tin được truyền đi. Thơng tin đó thường là
thơng tin của người dùng (tên, email, quyền…) kèm theo thông tin của token (thời
điểm cấp token, thời điểm token hết hạn…). Payload cũng là một đối tượng JSON
được mã hóa bằng Base64.
• Signature: là phần chữ kí được tạo ra bằng cách kết hợp Header và Payload và
một secret key, rồi mã hóa lại bằng giả thuật HMAC SHA256 hoặc RSA.

Hình 2.2: Ví dụ về JSON Web Token
Chương 2: Cơ sở lý thuyết

10


Báo cáo đồ án tốt nghiệp
Chương 3: XÁC ĐỊNH YÊU CẦU
3.1. Yêu cầu người dùng
Bảng 3.1: Yêu cầu người dùng
#
1

2
3

4

5
6

7

8

9
10

Tiêu đề
Tóm tắt yêu cầu (user story)
Các chức năng cơ bản phía Có các chức năng cơ bản của một website
khách hàng

như đăng ký, đăng nhập, thêm vào giỏ hàng,
quản lý giỏ hàng, thanh toán, lịch sử đơn
hàng.
Đăng nhập với các tài khoản Cho phép đăng nhập bằng goolge, facebook
mạng xã hội
để đăng nhập nhanh chóng, thuận lợi
Chức năng đặt lịch
Hiển thị các salon, dịch vụ, stylist và giờ
làm việc trống để khách hàng có thể thoải
mái lựa chọn salon, dịch vụ và khung giờ
ưng ý.
Chức năng xem lại lịch đặt
Cho phép khách hàng xem lại lịch đã đặt để
nắm bắt thông tin, biết thời gian để đến
salon trước khi cắt. Ngồi ra khách hàng có
thế đổi lịch hoặc hủy lịch nếu bận việc đột
xuất.
Chức năng đặt hàng
Cho phép khách hàng xem và đặt những sản
phẩm để chăm sóc, làm đẹp cho cơ thể.
Chức năng xem lại lịch sử đơn Cho phép khách hàng xem lại danh sách
hàng
đơn hàng, giúp khách hàng kiểm sốt được
thơng tin chi tiêu hợp lý
Các module quản lý
Các module quản lý bắt buộc phải có như
quản lý sanlon, nhân viên, lịch đặt, đơn
hàng, dịch vụ, sản phẩm, khách hàng. Yêu
cầu các thao tác CRUD dễ sử dụng, các thao
tác trong module chi tiết rõ ràng.

Quản lý lịch đặt
Cho phép thu ngân đặt hàng cho khách hàng
vãng lai, xác nhận và thông báo tới khách
hàng khi đến giờ hẹn, xác nhận và in hóa
đơn giúp kiểm sốt công việc dễ dàng hơn.
Quản lý lịch làm việc
Cho phép stylist xem lịch làm việc theo
ngày hoặc theo tháng để biết lịch làm việc
Xem tổng quan
Cho phép admin và quản lý xem lại thống
kê của salon để kiểm soát doanh thu

Chương 3: Xác định yêu cầu

11


Báo cáo đồ án tốt nghiệp
3.2. Yêu cầu hệ thống
3.2.1. Các tác nhân
Bảng 3.2: Mô tả các tác nhân
#
1

Tên
Khách (chưa đăng nhập)

2

Người dùng (đã đăng nhập)

3

Thu ngân

4

Nhà tạo mẫu

5

Người quản lý

6

Admin

3.2.1.1.

Mơ tả
Được thao tác tồn bộ các chức năng cần
thiết nhất của việc mua hàng. Khơng có
chức năng quản lý thông tin tài khoản, quản
lý đơn hàng, đặt lịch.
Được thao tác tồn bộ chức năng trang
khách hàng Khơng được quyền truy cập vào
trang quản trị.
Thu ngân có quyền quản lý lịch đặt của
salon, thông báo lịch đặt và xác nhận in hóa
đơn thanh tốn cho khách hàng.

Nhà tạo mẫu có thể xem lịch làm việc cá
nhân, nhà tạo mẫu sau khi thực hiện xong
dịch vụ sẽ upload hình ảnh sản phẩm.
Quản lý có tồn quyền quản lý của một
salon.
Admin có toàn quyền quản lý của chuỗi
salon.

Chức năng của các tác nhân

Bảng 3.3: Chức năng của từng tác nhân
#
1
2

3
4

Các chức
Khách
năng chính
Đăng ký
x
Đăng nhập
(trang khách
x
hàng)
Đặt lại mật
x
khẩu

Xem trang
x
chủ

Chương 3: Xác định yêu cầu

Khách
hàng

Nhân
viên

Thu
ngân

Nhà tạo Người
Quản
mẫu
quản lý trị viên

x
12


Báo cáo đồ án tốt nghiệp
5
6
7
8
9

10
11
12

13
14
15
16
17

18

19
20
21
22
23

Xem danh
sách salon
Xem dịch vụ
Xem chi tiết
dịch vụ
Xem
sản
phẩm
Xem chi tiết
sản phẩm
Đặt lịch
Quản lý lịch

đặt cá nhân
Thêm
sản
phẩm
vào
giỏ hàng
Quản lý giỏ
hàng
Thanh tốn
Xem lịch sử
đơn hàng
Bình chọn
Đăng xuất
(trang khách
hàng)
Đăng nhập
(trang quản
trị)
Quản
lý
salon
Quản
lý
nhân viên
Quản lý sản
phẩm
Quản lý dịch
vụ
Quản lý đơn
hàng

x

x

x

x

x

x

x

x

x

x
x
x

x

x

x

x

x

x

Chương 3: Xác định yêu cầu

x
x
x

x

x

x

x

x
x

x
x
x
x

x
x
x

x

13