Xây dựng hệ thống chăm sóc khách hàng cho chuỗi salon tóc

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 hoà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 tố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ả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 hình trang chủ 52 Bảng 4.22: Đặc tả chi tiết giao diện hình đăng ký 54 Bảng 4.23: Đặc tả chi tiết giao diện hình đăng nhập 55 Bảng 4.24: Đặc tả chi tiết giao diện hình đặt salon 56 Bảng 4.25: Đặc tả chi tiết giao diện hình chọn dịch vụ 57 Bảng 4.26: Đặc tả chi tiết giao diện hình chọn lịch 58 Bảng 4.27: Đặc tả chi tiết giao diện hình hồn tất 59 Bảng 4.28: Đặc tả chi tiết giao diện hình giao diện hình lịch sử đặt lịch 60 Bảng 4.29: Đặc tả chi tiết giao diện hình thơng tin lịch đặt 62 Bảng 4.30: Đặc tả chi tiết giao diện hình sản phẩm 63 Bảng 4.31: Đặc tả chi tiết giao diện hình giao diện hình giỏ hàng 64 Bảng 4.32: Đặc tả chi tiết giao diện hình đặt hàng 65 Bảng 4.33: Đặc tả chi tiết giao diệ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 hình chi tiết đơn hàng 67 Bảng 4.35: Đặc tả chi tiết giao diện hình đăng nhập trang quản trị 68 Bảng 4.36: Đặc tả chi tiết giao diện điều hướng trang quản trị 69 Bảng 4.37: Đặc tả chi tiết giao diện hình trang tổng quan 71 Bảng 4.38: Đặc tả chi tiết giao diện hình quản lý nhân viên 73 Bảng 4.39: Đặc tả chi tiết giao diện hình quản lý salon 75 Bảng 4.40: Đặc tả chi tiết giao diện modal thêm salon 75 Bảng 4.41: Đặc tả chi tiết giao diệ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 79 Bảng 4.43: Đặc tả chi tiết giao diệ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 hình quản lý dịch vụ 82 Bảng 4.46: Đặc tả chi tiết giao diện hình quản lý đơn hàng 83 Bảng 4.47: Bảng đặc tả chi tiết giao diện hình xem lịch làm việc stylist 86 Bảng 4.48: Bảng đặc tả chi tiết giao diện modal lịch làm việc 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 trạng Hiện nay, ngành công nghệ thông tin phát triển mạnh mẽ, đóng vai trị khơng thể thiếu xã hội Công nghệ thông tin ứng dụng vào gần tất lĩnh vực 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 đại hóa, phát triền kinh tế, tạo môi trường cạnh tranh cao thúc đẩy phát triển chung cho toàn xã hội Những năm gần đây, Việt Nam công nghệ thông tin á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 hỗ trợ nhiều tính tiện lợi giúp lượng cơng việc giải cách nhanh chóng hiệu quả, qua tăng suất cơng việc giúp doanh nghiệp phát triển mạnh mẽ Với phổ biến nay, việc ứng dụng công nghệ thông tin không giúp cho lượng công việc giải nhanh chóng dễ dàng, mà cịn giúp quảng bá thương hiệu, hình ảnh… giúp ngành giải trí, thời trang phát triển vượt bậc Ngành làm tóc lan truyền phát triển mạnh mẽ thu hút nhiều ý nhiều lứa tuổi đặc biệt giới trẻ nam lẫn nữ, tạo xu hướng bùng nổ cho thời trang ngày Và tiệm làm tóc với lượng khách ngày đô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 khơng trải nghiệm dịch vụ mong muốn khiến khách hàng thời gian không thoải mái dẫn đến việc khách Qua nhóm định xây dựng 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 trải nghiệm dịch vụ tốt thoải mái, với giúp việc quản lý nhân viên, khách hàng cách dễ dàng, hợp lý giúp tăng chất lượng phục vụ lan truyền, quảng bá hình ảnh đến nhiều người dùng 1.2 Khảo sát trạng 1.2.1 Giới thiệu trang 30shine.com 30Shine trang web chuỗi salon tóc phổ biến Việt Nam Website cung cấp cho khách hàng danh sách dịch vụ, thời gian làm việc stylist hàng giúp khách hàng chọn dịch vụ đặt lịch trước đến để cửa hàng giúp khách hàng chờ đợi đến cửa hàng Chương 1: Tổng quan Báo cáo đồ án tốt nghiệp 5.2.2 Giới thiệu Github Github dịch vụ tiếng cung cấp kho lưu trữ mã nguồn cho dự án phần mềm Github cung cấp đầy đủ tính Git giúp cho việc quản lý mã nguồn án cách dễ dàng thông việc đồng mã nguồn thành viên nhóm lên server hay hỗ trợ kiểm tra mã nguồn q trình làm việc Trong đề tài này, nhóm thực sử dụng Github để quản lý mã nguồn với Github repository để lưu trữ mã nguồn cho module đề tài: - Mã nguồn web cho khách hàng: https://github.com/hunglq04/SMS-FE-CLIENT Mã nguồn web cho nhân viên: https://github.com/hunglq04/SMS-FE Mã nguồn backend: https://github.com/hunglq04/SMS-BE 5.2.3 Quy trình làm việc Để việc thực đề tài cách hiệu nhóm thực đưa quy trình thực công việc để tài sau: Bước 1: Trước thực cơng việc đó, người thực thay đổi trạng thái Jira tương ứng thành “In Progress” để thành viên nhóm biết làm công việc Đồng tạo nhánh từ nhánh master Github thực code nhánh Bước 2: Trong q trình thực công việc, commit liên quan phải được đặt theo cú pháp “[Số Jira]: [nội dung commit]” Điều giúp cho Jira liên kết đến Github để hiển thị thay đổi code Jira Hình 5.2: Nội dung commit liên kết đến Jira Chương 5: Hiện thực dự án 89 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 salon trước cắt Ngồi khách hàng đổi lịch hủy lịch bận việc độ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. .. dịch vụ mong muốn khiến khách hàng thời gian không thoải mái dẫn đến việc khách Qua nhóm định xây dựng 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 trải nghiệm... client Khách hàng click vào button tên khách hàng chọn Lịch sử đơn hàng Chuyển đến lịch sử đơn hàng hiển thị danh sách đơn hàng Khách hàng chọn xem chi tiết đơn hàng để biết thông tin đơn hàng