(Đồ á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

(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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(Đồ á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 HOÀ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 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 thực đề tài cách thuận lợi, hiệu Đồng thời, nhóm thực thiện xin gửi lời cảm ơn đến Ban chủ nhiệm 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 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 nhiều vào đề tài tốt nghiệp Đặc biệt, nhóm thực xin gửi lời cảm ơn chân thành đến thầy Nguyễn Thanh Phước Thầy nhiệt tình hướng dẫn, góp ý ln đồng đồng hành nhóm suốt q trình thực đề tài Với kinh nghiệm thực tiễn cịn thiếu sót kinh nghiệm chun mơn cịn non yếu, báo cáo có thiếu sót hạn chế định Kính mong nhận phản hồi, đóng góp ý kiến bảo thêm q thầy để nhóm đạt kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ sau 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 Giới thiệu đề tài khảo sát trạng 1.2 Khảo sát trạng 1.2.1 Giới thiệu trang 30shine.com 1.2.2 Tính 1.2.3 Kết luận 1.3 Mục tiêu đề tài 1.3.1 Chương 2: 2.1 Mục tiêu CƠ SỞ LÝ THUYẾT Spring 2.1.1 Giới thiệu 2.1.2 Các module Spring 2.1.3 Ưu điểm Spring framework 2.2 Angular 2.2.1 Giới thiệu 2.2.2 Module 2.2.3 Component 2.2.4 Template 2.2.5 Metadata 2.2.6 Data binding 2.2.7 Directive 2.2.8 Service Dependency Injection 2.2.9 Ưu điểm 2.3 RESTful API 2.3.1 Giới thiệu 2.3.2 Các phương thức HTTP 2.3.3 Ưu điểm 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 14 Chương 4: THIẾT KẾ HỆ THỐNG 30 4.1 Thiết kiến trúc 30 4.2 Lược đồ 31 4.2.1 Lược đồ chức đăng nhập 31 4.2.2 Lược đồ chức đặt lịch 32 4.2.3 Lược đồ chức xem lịch làm việc 33 4.2.4 Lược đồ chức cập nhật thông tin lịch đặt 33 4.2.5 Lược đồ chức cập nhật hình ảnh 34 4.2.6 Lược đồ chức xuất hóa đơn tốn 35 4.2.7 Lược đồ chức xem thống kê doanh thu 36 4.3 Thiết kế sở liệu 37 4.3.1 Mơ hình quan hệ thực thể (ERD) 37 4.3.2 Phân tích 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 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 Jira 88 5.2.2 Giới thiệu Github 89 5.2.3 Quy trình làm việc 89 5.3 Triển khai ứng dụng môi trường thực tế 91 5.3.1 Giới thiệu Heroku 91 5.3.2 Triển khai ứng dụng Spring Heroku 91 5.3.3 Giới thiệu Firebase 95 5.3.4 Giới thiệu 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 99 6.2 Kết thực nghiệm đưa ứng dụng 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 đạt 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 Angular Hình 2.2: Ví dụ JSON Web Token 10 Hình 3.1: Lược đồ chức 14 Hình 4.1: Kiến trúc hệ thống 30 Hình 4.2: Lược đồ chức đăng nhập 31 Hình 4.3: Lược đồ chức đặt lịch 32 Hình 4.4: Lược đồ chức xem lịch làm việc 33 Hình 4.5: Lược đồ chức cập nhật thông tin lịch đặt 33 Hình 4.6: Lược đồ chức xem lịch làm việc 34 Hình 4.7: Lược đồ chức xem lịch làm việc 35 Hình 4.8: Lược đồ chức 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 hình trang chủ_1 51 Hình 4.30: Giao diện hình trang chủ_2 52 Hình 4.31: Giao diện hình đăng ký 54 Hình 4.32: Giao diện hình đăng nhập 55 Hình 4.33: Giao diện hình đặt salon 56 Hình 4.34: Giao diện hình chọn dịch vụ 57 Hình 4.35: Giao diện hình chọn lịch 58 Hình 4.36: Giao diện hình hồn tất 59 Hình 4.37: Giao diện hình lịch sử đặt lịch 60 Hình 4.38: Giao diệ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 hình sản phẩm 63 Hình 4.41: Giao diện hình giỏ hàng 64 Hình 4.42: Giao diện hình đặt hàng 65 Hình 4.43: Giao diện hình lịch sử đơn hàng cá nhân 66 Hình 4.44: Giao diện hình chi tiêt đơn hàng 67 Hình 4.45: Giao diện hình đăng nhập trang quản trị 68 Hình 4.46: Giao diện điều hướng trang quản trị 69 Hình 4.47: Giao diện hình trang tổng quan_1 70 Hình 4.48: Giao diện hình trang tổng quan_2 71 Hình 4.49: Giao diện hình quản lý nhân viên 73 Hình 4.50: Giao diện hình quản lý salon 74 Hình 4.51: Giao diện modal thêm salon 75 Hình 4.52: Giao diện hình quản lý lịch đặt 76 Hình 4.53: Giao diện modal thơng tin tốn lịch đặt 77 Hình 4.54: Giao diện hóa đơn tốn 77 Hình 4.55: Giao diện modal đặt lịch 79 Hình 4.56: Giao diệ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 hình quản lý dịch vụ 82 Hình 4.59: Giao diện hình quản lý đơn hàng 83 Hình 4.60: Giao diện hình xem lịch làm việc theo tháng stylist 84 Hình 4.61: Giao diện hình xem lịch làm việc theo ngày stylist 85 Hình 4.62: Giao diện modal xem chi tiết làm việc stylist_1 86 Hình 4.63: Giao diện modal lịch làm việc stylist_2 87 Hình 5.1: Jira board 88 Hình 5.2: Nội dung commit liên kết đến Jira 89 Hình 5.3: Ví dụ pull request nhóm thực 90 Hình 5.4 Thơng tin Jira hồn thành nhóm thực 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 sở 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 hệ thống sau build 94 Hình 5.13: Khởi tạo Firebase Hosting 96 Hình 5.14: Lấy Firebase Token ứng dụng 96 Hình 5.15: Lưu Firebase Token vào Github ứ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 bước thực để deploy ứng dụng lên Firebase 98 Hình 5.18: Kết deploy tự động ứ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ả tác nhân 12 Bảng 3.3: Chức tác nhân 12 Bảng 3.4: Chi tiết lược đồ chức 15 Bảng 3.5: Mô tả chức đăng nhập 16 Bảng 3.6: Mô tả chức đăng ký 17 Bảng 3.7: Mô tả chức đặt lịch 18 Bảng 3.8: Mô tả chức xem lịch sử đặt lịch 18 Bảng 3.9: Mô tả chức thêm sản phẩm vào giỏ hàng 19 Bảng 3.10: Mô tả chức quản lý giỏ hàng 20 Bảng 3.11: Mô tả chức toán 20 Bảng 3.12: Mô tả chức quản lý đơn hàng cá nhân 21 Bảng 3.13: Mô tả chức bình chọn sản phẩm 21 Bảng 3.14: Mô tả chức đăng xuất 22 Bảng 3.15: Mô tả chức quản lý salon 22 Bảng 3.16: Mô tả chức thêm salon 23 Bảng 3.17: Mô tả chức cập nhật salon 23 Bảng 3.18: Mô tả chức xóa salon 24 Bảng 3.19: Mô tả chức quản lý lịch đặt 24 Bảng 3.20 : Mô tả chức đặt lịch 24 Bảng 3.21: In hóa đơn 25 Bảng 3.22: Mô tả chức 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 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 lịch 28 Bảng 3.29: Chụp ảnh upload hình ảnh 28 Bảng 3.30: Mô tả chức xem tổng quan 29 Bảng 4.1: Bảng mô tả thực thể sở 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áo cáo đồ án tốt nghiệp Bước 3: Sau hoàn thành việc code cho tính năng, người thực tạo Pull request Github để thành viên khác nhóm review đưa góp ý nhận xét để người thực chỉnh sửa (nếu code có vấn để) trước merge vào nhánh master Hình 5.3: Ví dụ pull request nhóm thực Bước 4: Sau hồn thành cơng việc, người thực cập nhật trạng thái Jira tương ứng thành “Done”, tóm tắt lại làm mục mơ tả Hình 5.4 Thơng tin Jira hồn thành nhóm thực Chương 5: Hiện thực dự án 90 Báo cáo đồ án tốt nghiệp 5.3 Triển khai ứng dụng môi trường thực tế 5.3.1 Giới thiệu Heroku Heroku tảng cho phép lập trình viên xây dựng, phát triển vận hành ứng dụng hoàn toàn đám mây Heroku hỗ trợ nhiều tảng, ngơn ngữ lập trình khác như: NodeJS, Java, Python, PHP… Điều đặc biệt Heroku cung cấp nhiều dịch vụ hồn tồn miễn phí, tiện ích cho ứng dụng web khơng u cầu tốc độ truy cập cao hay dung lượng lớn Các dịch vụ Heroku mà nhóm sử dụng: • Chứng SSL: cung cấp chế mã hóa đảm bảo tính tồn vẹn liệu đảm bảo thử truyền cách an tồn • Heroku Postgres: cung cấp sở liệu PostgreSQL để lưu trữ liệu • Logplex: ghi lại log trình build chạy thực tế ứng dụng • Github Intergration: liên kết với Github repository phục vụ cho việc xây dựng quy trình CI/CD triển khai ứng dụng 5.3.2 Triển khai ứng dụng Spring Heroku Bước 1: Đăng nhập vào Heroku chọn New->Create New App để tạo ứng dụng Heroku Bước 2: Nhập tên ứng dụng nhấn nút "Create App" Hình 5.5: Tạo ứng dụng Heroku Chương 5: Hiện thực dự án 91 Báo cáo đồ án tốt nghiệp Bước 3: Vào mục Deploy, chọn Deployment method Github, tìm kiếm Github repository ứng dụng nhấn Connect Hình 5.6: Liên kết Heroku với Github Bước 4: Vào mục Resources, tìm kiếm chọn Add-ons Heroku Postgres Hình 5.7: Thêm PostgreSQL vào Heroku Chương 5: Hiện thực dự án 92 Báo cáo đồ án tốt nghiệp Heroku cập cho ta sở liệu PostgreSQL tự động liên kết với ứng dụng Truy cập trang quản lý Heroku Postgres, vào mục Settings nhấn nút View Credentials để xem thơng tin Database Hình 5.8: Thơng tin sở liệu Bước 5: Tạo file Procfile thư mục gốc Project khai báo lệnh để chạy ứng dụng sau build thành công Heroku Hình 5.9: Tạo Procfile chứa mã để chạy chương trình Bước 6: Vào mục Deploy chọn phương pháp deploy ứng dụng Có cách để deploy: Chương 5: Hiện thực dự án 93 Báo cáo đồ án tốt nghiệp • Deploy tự động: Chọn nhánh Github repository để deploy, chọn Enable Automatic Deploys Khi nhánh chọn có code ứng dụng tự động build lại deploy Hình 5.10: Deploy ứng dụng từ động với Github • Deploy thủ cơng: Chọn nhánh cần deploy nhấn nút Deploy Branch Hình 5.11: Deploy ứng dụng thủ cơng Để xem log q trình build deploy ứng dụng ta vào mục Activity chọn View build log build muốn xem Hình 5.12: Nội dung log hệ thống sau build Chương 5: Hiện thực dự án 94 Báo cáo đồ án tốt nghiệp 5.3.3 Giới thiệu Firebase Firebase tảng để phát triển ứng dụng di động ứng dụng web phát triển Google Firebase cung cấp nhiều dịch vụ miễn phí lưu trữ liệu, xác thực người dùng, hosting… Nhóm thực sử dụng dịch vụ sau Firebase để phát triển ứng dụng: • Firebase Hosting: dịch vụ hosting với chứng SSL • Firebase Storage: dịch vụ lưu trữ truy xuất tệp liệu người dùng tệp hình ảnh, âm thanh, video… 5.3.4 Giới thiệu Github Actions Github Actions tính Github dùng để tạo quy trình chạy tự động lập trình viên đẩy code mới, tạo pull request… đến Github repository Mỗi quy trình chạy định nghĩa file yml, gồm phần: • name: tên quy trình • on: điều kiện kích hoạt • jobs: định nghĩa bước thực quy trình Trong đề tài này, nhóm thực sử dụng Github Actions để tạo quy trình triển khai tự động ứng dụng web viết Angular lên tảng Firebase 5.3.5 Triển khai ứng dụng Agular tự động lên Firebase với Github Actions Bước 1: Cấu hình Firebase Hosting cho ứng dụng: • Cài đặt firebase-tools lệnh: npm install firebsae-tool • Đăng nhập vào firebase lệnh: firebsae login • Cài đặt cấu hình hosting lệnh: firebase init, chọn tính Hosting Fireabse Chương 5: Hiện thực dự án 95 Báo cáo đồ án tốt nghiệp Hình 5.13: Khởi tạo Firebase Hosting • Tạo ứng dụng Firebase chọn ứng dụng Firebase tạo để liên kết với ứng dụng Angular phục vụ cho việc deploy Bước 2: Cài đặt Firebase Token Github: • Lấy Firebase Token ứng dụng lệnh: firebase login:ci Hình 5.14: Lấy Firebase Token ứng dụng Chương 5: Hiện thực dự án 96 Báo cáo đồ án tốt nghiệp • Vào Github repository ứng dụng chọn mục Setting->Secrets, Nhấn nhút New Repository Secret, nhập giá trị token vừa cấp nhân nút Add secret Hình 5.15: Lưu Firebase Token vào Github ứng dụng Bước 3: Tạo Workflow với Github Actions Hình 5.16: Cấu hình điều kiện kích hoạt Workflow Chương 5: Hiện thực dự án 97 Báo cáo đồ án tốt nghiệp Hình 5.17: Cấu hình bước thực để deploy ứng dụng lên Firebase Để xem kết quy trình tự động deploy vào mục Actions chọn lần chạy tương ứng Hình 5.18: Kết deploy tự động ứng dụng Chương 5: Hiện thực dự án 98 Báo cáo đồ án tốt nghiệp Chương 6: KẾT QUẢ SO SÁNH, THỰC NGHIỆM, TỔNG HỢP 6.1 Các trường hợp thử nghiệm chức ID Name Kết mong đợi Bước thực Đăng nhập - Thông báo thất bại đăng nhập thất bại - Tắt modal đăng nhập thông báo đăng nhập thành cơng Kết B1: Click button login Thành góc phải hình cơng B2: Trang web bật modal đăng nhập, có form login gồm tài khoản đăng nhập mật B3: Nhập tài khoản mật Đăng ký Đặt lịch - Thông báo thất bại đăng ký thất bại - Thông báo thành công chuyển sang tab đăng nhập modal với tài khoản mật nhập sẵn B4: Click button Đăng nhập B1: Click tab đăng ký Thành modal đăng nhập công B2: Trang web chuyển sang tab đăng ký B3: Điền đầy đủ vào form đăng ký B4: Click button Đăng ký Thông báo lỗi thất bại B1: Chọn button đặt Thành reset lại trang để khách hàng lịch có trang web cơng đặt lại lịch B2: Trang web chuyển đến Thông báo đặt lịch thành công trang đặt lịch chuyển hướng đến trang B3: Chọn salon B1 lịch sử đặt lịch B4: Chọn dịch vụ B2 Chương 6: Kết so sánh, thực nghiệm, tổng hợp 99 Báo cáo đồ án tốt nghiệp B5: Chọn ngày, stylist giở B3 Chọn salon Chọn dịch vụ B6: Chọn button hoàn tất để xác nhận đặt lịch Thơng báo khơng có liệu B1: Chọn salon danh Thành khơng có salon thuộc sách, lọc salon theo cơng option Tỉnh/Phố, Quận/Huyện chọn salon Hiển thị salon theo option lọc B2: Click button tiếp tục phía để chuyển sang Chuyển sang sang bước bước chọn dịch vụ chọn salon Không cho phép chuyển sang bước thông báo chưa chọn salon Không cho phép chuyển sang B1: Chọn dịch vụ có Thành bước chưa chọn dịch vụ danh sách theo công mục, dịch vụ loại Chuyển sang bước combo, uốn, nhuộm chọn dịch vụ 1, dịch vụ khác chọn nhiều dịch vụ B2: Click button tiếp tục phía để chuyển sang bước Chọn Thông báo lỗi chưa chọn B1: Chọn ngày đặt lịch, Thành ngày, stylist ngày, chọn lại ngày phải công chọn lại stylist stylist thực Chuyển sang bước chọn xong option B2: Chọn stylist, chọn lại stylist phải chọn lại B3: Chọn giờ, ô bật sáng ô trống, bị đóng lại khơng cho phép Chương 6: Kết so sánh, thực nghiệm, tổng hợp 100 Báo cáo đồ án tốt nghiệp chọn có người đặt q 6.2 • • • B4: Click button tiếp tục phía để chuyển sang bước Xác Thông báo đăng nhập để đặt B1: Đăng nhập để Thành nhận lịch lịch chưa đăng nhập hoàn tất đặt lịch chưa công đặt đăng nhập Thông báo thất bại đặt lịch thất bại B2: Click button xác nhận để hồn tất đặt lịch Thơng báo thành cơng đặt lịch thành công chuyển hướng đến trang lịch sử đặt lịch Kết thực nghiệm đưa ứng dụng môi trường thực tế Đường dẫn trang web đặt lịch cho khách hàng: https://v-barbershop.web.app Đường dẫn trang web quản lý salon: https://sms-fe.web.app Đường dẫn mô tả API: https://sms-be.herokuapp.com/swagger-ui.html Chương 6: Kết so sánh, thực nghiệm, tổng hợp 101 Báo cáo đồ án tốt nghiệp Chương 7: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 Kết đạt • Vận dụng Spring Framework để xây dựng backend • Vận dụng Angular để xây dựng frontend • Vận dụng Heroku để deploy ứng dụng phía backend Firebase để deploy ứng dụng phía frontend • Xây dựng quy trình CI/CD cho hệ thống tự động deploy lên Heroku Firebase • Xây dựng ứng dụng hỗ trợ chăm sóc khách hàng quản lý chuỗi salon với tính như: o Xem thơng tin dịch vụ chăm sóc tóc o Đặt lịch chăm sóc tóc o Quản lý lịch làm việc cho nhân viên o Quản lý salon, sản phẩm, dịch vụ, lịch đặt, doanh thu Ưu điểm Ứng dụng đơn giản dễ sử dụng Áp dụng công nghệ Website tạo hỗ trợ đầy đủ chức giúp khách hàng đặt lịch chăm sóc tóc, salon quản lý lịch đặt • Dễ bảo trì, mở rộng • Chạy nhiều trình duyệt, chạy đa tảng 7.2 • • • 7.3 • • • • Nhược điểm Giao diện nhiều thiếu sót, chưa bắt mắt Ứng dụng quản lý cịn số tính chưa hồn chỉnh Chưa xử lý trường hợp nhiều người dùng đặt lịch lúc Hệ thống hoạt động chậm chạy môi trường thực tế 7.4 Hướng phát triển • Xây dựng tính tối ưu hơn, tạo thêm nhiều gợi ý cho khách hàng có nhiều thơng tin để đặt lịch • Xây dựng tính đồ, để gợi ý cho khách hàng salon gần • Xây dựng chức chat trực tuyến giúp hỗ trợ thơng tin cho khách hàng • Hồn thiện chức bán hàng • Xây dựng thêm tính quản lý, cho phép nhân viên xin nghỉ di chuyển qua lại salon, … để quản lý salon tốt Chương 7: Kết luận hướng phát triển 102 Báo cáo đồ án tốt nghiệp TÀI LIỆU THAM KHẢO Tiếng Việt [1] Hướng dẫn Spring Security + JWT (Json Web Token) + Hibernate, https://loda.me/huong-dan-spring-security-jwt-json-web-token-hibernateloda1556683105052 [2] Migration data với Flyway sử dụng Maven cho multiple database servers, https://viblo.asia/p/migration-data-voi-flyway-su-dung-maven-cho-multiple-databaseservers-1VgZvB2MZAw Tiếng Anh [3] Spring Framework Documentation, https://docs.spring.io/spring-framework/docs/current/reference/html/index.html [4] Angular Documentation, https://angular.io/docs [5] Heroku Documentation, https://devcenter.heroku.com/categories/reference [6] How To Use Angular Interceptors to Manage HTTP Requests and Error Handling https://www.digitalocean.com/community/tutorials/how-to-use-angular-interceptors-tomanage-http-requests-and-error-handling [7] Implement file upload with Firebase Storage in our Angular App: The simple way https://indepth.dev/posts/1273/implement-file-upload-with-firebase-storage [8] Angular Export to PDF Using PDFMake https://www.ngdevelop.tech/angular-8-export-to-pdf-using-pdfmake [9] Github Actions: How to deploy Angular App to Firebase Hosting https://blog.bitsrc.io/github-actions-how-to-deploy-angular-app-to-firebase-hosting89a93f9c4fe1 Tài liệu tham khảo 103 ...  ĐỒ Á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 HOÀNG TRẦM MSSV : 16110229 Khóa : 2016 Ngành : CƠNG NGHỆ THƠNG... đột xuất Chức đặt hàng Cho phép khách hàng xem đặt sản phẩm để chăm sóc, làm đẹp cho thể Chức 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 thơng... Dòng xử lý Ngoại lệ Thanh toán UC11 Khách hàng toán giỏ hàng Khách hàng, Khách hàng tiềm Đang truy cập vào trang toán Khách hàng click vào button toán Chuyển đến trang toán hiển thị danh sách sản