Tài liệu Website bán và cung cấp các dịch vụ về thú cưng – tích hợp chatbot

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN 1 ĐỀ TÀI: WEBSITE BÁN VÀ CUNG CẤP CÁC DỊCH VỤ VỀ THÚ CƯNG – TÍCH HỢP CHATBOT SE121.M21 Giảng viên hướng dẫn: Cô HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: NGUYỄN CAO CƯỜNG –MSSV: 19521298 ĐINH VIỆT HÀO–MSSV: 19521475 Thành phố Hồ Chí Minh, tháng 6 năm 2022 ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN 1 ĐỀ TÀI: WEBSITE BÁN VÀ CUNG CẤP CÁC DỊCH VỤ VỀ THÚ CƯNG – TÍCH HỢP CHATBOT SE121.M21 Giảng viên hướng dẫn: Cô HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: NGUYỄN CAO CƯỜNG –MSSV: 19521298 ĐINH VIỆT HÀO–MSSV: 19521475 Thành phố Hồ Chí Minh, tháng 6 năm 2022 Lời cảm ơn Đồ án 1 là môn đầu tiên đặt tiền đề cho việc xây dựng khóa luận tốt nghiệp. Đây là môn học có nhiều thử thách, đòi hỏi người học phải dành nhiều thời gian, công sức để nghiên cứu, tìm tòi và xây dựng. Đồng thời, đây cũng là cơ hội để sinh viên thực hành những gì đã học trong suốt những năm đại học và học hỏi thêm nhiều kiến thức, kinh nghiệm và kỹ năng mới phục vụ cho công việc sau này. Cho nên đây được xem là thử thách và cũng là cơ hội để sinh viên được rèn luyện, hoàn thiện bản thân bằng những kĩ năng tích lũy được trong suốt quá trình làm đồ án. Để có thể đi đến đoạn cuối của hành trình là cả sự nỗ lực, cố gắng và kiên trì. Đồng hành cùng sinh viên vượt qua thử thách này là sự có mặt và giúp đỡ của những người thầy tận tâm trong công việc. Nhóm xin chân thành cảm ơn cô Huỳnh Hồ Thị Mộng Trinh đã tận tình giúp đỡ nhóm em hoàn thành đồ án 1 của mình. Chính nhờ những sự góp ý, động viên của cô đã giúp đồ án của nhóm được hoàn thiện và chuyên nghiệp nhiều hơn. Bên cạnh đó, nhóm đã học hỏi được rất nhiều kiến thức, kinh nghiệm và bài học thú vị trong quá trình làm khoá luận, đó sẽ là những hành trang hữu ích cho nhóm sau này. Nhóm cũng xin chân thành cảm ơn các anh chị, bạn bè đã giúp đỡ nhóm trong quá trình thực hiện đồ án. Nhờ mọi người mà nhóm có nhiều góc nhìn khác nhau về đề tài đang làm, từ đó giúp hoàn thiện đồ án của nhóm. Một lần nữa, nhóm xin chân thành cảm ơn cô và mọi người. NHẬN XÉT (Của giáo viên hướng dẫn) ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… MỤC LỤC Lời cảm ơn 3 CHƯƠNG I: GIỚI THIỆU CHUNG 1. Đề tài 2. Lý do chọn đề tài 3. Tóm tắt đề tài 4. Mục tiêu đề tài 5. Phương pháp nghiên cứu 6. Ý nghĩa và hướng của đề tài 6.1. Về mặt tài liệu 6.2. Về mặt sản phẩm 1 CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN 1. ReactJS 1.1. Giới thiệu 1.2. Lý do sử dụng 2. NestJS 2.1. Giới thiệu 3 CHƯƠNG III: PHÂN TÍCH HỆ THỐNG 1. Yêu cầu phần mềm 1.1. Yêu cầu nghiệp vụ 1.2 Yêu cầu chất lượng 2. Use-case 2.1 Sơ đồ Use-case mức tổng quát 2.2 Danh sách các actor 2.3 Danh sách Use-case 2.4 Đặc tả Use-case 2.4.1 Đặc tả Use-case “Tạo tài khoản khách hàng” 2.4.2 Đặc tả Use-case “Đăng nhập khách hàng” 2.4.3 Đặc tả Use-case “Đăng nhập admin” 2.4.4 Đặc tả Use-case “Thay đổi thông tin” 2.4.5 Đặc tả Use-case “Tạo thú cưng” 2.4.6 Đặc tả Use-case “Sửa thú cưng” 2.4.8 Đặc tả Use-case “Tạo sản phẩm” 2.4.9 Đặc tả Use-case “Sửa sản phẩm” 2.4.11 Đặc tả Use-case “Tạo dịch vụ” 6 1 1 1 2 2 2 2 2 3 3 4 4 4 6 6 6 7 7 8 8 9 9 10 12 12 14 15 16 17 18 2.4.12 Đặc tả Use-case “Sửa dịch vụ” 2.4.14 Đặc tả Use-case “Đặt lịch” 2.4.15 Đặc tả Use-case “Xem thông tin đơn hàng” 2.4.16 Đặc tả Use-case “Chỉnh sửa đơn hàng” 2.4.17 Đặc tả Use-case “Đặt đơn hàng” 2.4.18 Đặc tả Use-case “Tra cứu đơn hàng” 2.4.19 Đặc tả Use-case “ChatBot” 2.4.20 Đặc tả Use-case “Quản lý nhân viên” 2.4.21 Đặc tả Use-case “Quản lý khách hàng” 2.5. Activity Diagram: 2.5.1 Đăng nhập 2.5.2 Đăng ký 2.5.3 Đăng xuất 2.5.4 Chỉnh sửa hồ sơ 2.5.5 Thú cưng 2.5.6 Sản phẩm 2.5.7 Dịch vụ 2.5.8 ChatBot CHƯƠNG IV: THIẾT KẾ DỮ LIỆU 1. Sơ đồ logic hoàn chỉnh 2. Danh sách các bảng dữ liệu trong sơ đồ logic 3. Mô tả từng bảng dữ liệu 3.1 Bảng “address”: 3.2 Bảng “admin_user”: 3.3 Bảng “breed” 3.4 Bảng “cart”: 3.5 Bảng “category”: 3.6 Bảng “customer”: 3.7 Bảng “employee”: 3.8 Bảng “employee_to_service”: 3.9 Bảng “order”: 3.10 Bảng “pet”: 3.11 Bảng “pet_cart_item”: 3.12 Bảng “pet_order_item”: 3.13 Bảng “pet_photo”: 3.14 Bảng “pet_type”: 3.15 Bảng “product”: 19 20 21 22 23 24 24 25 26 27 27 27 28 29 30 30 32 33 34 34 34 36 36 36 37 37 37 38 38 39 39 40 40 41 41 41 42 3.16 Bảng “product_cart_item”: 3.17 Bảng “product_order_item”: 3.18 Bảng “product_photo”: 3.19 Bảng “reservation”: 3.20 Bảng “service”: 3.21 Bảng “service_order_item”: 3.22 Bảng “service_photo”: 3.23 Bảng “sub_category”: 42 CHƯƠNG V: THIẾT KẾ GIAO DIỆN 1. Sơ đồ liên kết màn hình 2.Danh sách màn hình 3.Mô tả các màn hình 3.1 Màn hình đăng nhập Admin 3.2 Màn hình tổng quan Admin 3.3 Màn hình thú cưng Admin 3.4 Màn hình thêm thú cưng 3.5 Màn hình loại thú cưng Admin 3.6 Màn hình thêm loại thú cưng 3.7 Màn hình sửa loại thú cưng 3.8 Màn hình giống thú cưng Admin 3.9 Màn hình thêm giống 3.10 Màn hình sửa giống 3.11 Màn hình chi tiết thú cưng Admin 3.12 Màn hình sửa thú cưng 3.13 Màn hình sản phẩm Admin 3.14 Màn hình thêm sản phẩm 3.15 Màn hình danh mục Admin 3.16 Màn hình thêm danh mục 3.17 Màn hình sửa danh mục 3.18 Màn hình danh mục phụ Admin 3.19 Màn hình thêm danh mục phụ 3.20 Màn hình sửa danh mục phụ 3.21 Màn hình sản phẩm chi tiết Admin 3.22 Màn hình sửa sản phẩm 3.23 Màn hình dịch vụ Admin 3.24 Màn hình thêm dịch vụ 3.25 Màn hình đặt lịch Admin 46 43 43 43 44 44 45 45 46 46 52 52 53 53 55 56 57 58 59 60 61 61 62 62 63 64 65 66 66 67 68 69 69 70 71 72 3.26 Màn hình chi tiết dịch vụ 3.27 Màn hình sửa dịch vụ 3.28 Màn hình đơn hàng 3.29 Màn hình chi tiết đơn hàng 3.30 Màn hình khách hàng 3.31 Màn hình thêm khách hàng 3.32 Màn hình sửa khách hàng 3.33 Màn hình vô hiệu hóa khách hàng 3.34 Màn hình kích hoạt khách hàng 3.35 Màn hình nhân viên 3.36 Màn hình thêm nhân viên 3.37 Màn hình sửa nhân viên 3.38 Màn hình người dùng 3.39 Màn hình thêm người dùng 3.40 Màn hình sửa người dùng 3.41 Màn hình kích hoạt người dùng 3.42 Màn hình vô hiệu người dùng 3.43 Màn hình thay đổi thông tin cá nhân 3.44 Màn hình thay đổi mật khẩu 3.45 Màn hình trang chủ khách hàng 3.46 Màn hình thú cưng khách hàng 3.47 Màn hình chi tiết thú cưng khách hàng 3.48 Màn hình sản phẩm khách hàng 3.49 Màn hình chi tiết sản phẩm khách hàng 3.50 Màn hình dịch vụ khách hàng 3.51 Màn hình đặt dịch vụ khách hàng 3.52 Màn hình liên hệ khách hàng 3.53 Màn hình 404 khách hàng 3.54 Màn hình giỏ hàng khách hàng 3.55 Màn hình đơn hàng khách hàng 3.56 Màn hình danh sách đơn hàng khách hàng 3.57 Màn hình đăng nhập khách hàng 3.58 Màn hình đăng ký khách hàng CHƯƠNG VI: TỔNG KẾT 1. Độ hoàn thiện chức năng 2. Kết quả đạt được và hướng phát triển 2.1. Kết quả đạt được 72 73 73 74 74 75 76 77 77 78 79 80 81 82 83 84 84 85 86 87 90 91 92 92 93 94 95 96 96 97 98 98 100 105 105 106 106 2.2. Hướng phát triển 107 BẢNG PHÂN CÔNG CÔNG VIỆC 108 TÀI LIỆU THAM KHẢO 109 Danh mục hình ảnh Hình 1: Giới thiệu về React Hình 2: Giới thiệu về NestJs Hình 3: Sơ đồ usecase mức tổng quát Hình 4: Activity diagram đăng nhập Hình 5: Activity diagram đăng ký Hình 6: Activity diagram đăng xuất Hình 7: Activity diagram chỉnh sửa hồ sơ Hình 8: Activity diagram thú cưng Hình 9: Activity diagram sản phẩm Hình 10: Activity diagram dịch vụ Hình 11: Activity diagram Chatbot Hình 12: Activity diagram sơ đồ dữ liệu tổng quát Hình 13:Sơ đồ liên kết màn hình tổng quát Hình 14: Màn hình đăng nhập Admin Hình 15:Màn hình tổng quan Admin Hình 16:Màn hình thú cưng Admin Hình 17: Màn hình thêm thú cưng Hình 18: Màn hình loại thú cưng Admin Hình 19: Màn hình thêm loại thú cưng Hình 20: Màn hình sửa loại thú cưng Hình 21: Màn hình giống thú cưng Admin Hình 22: Màn hình thêm giống Hình 23: Màn hình sửa giống Hình 24: Màn hình chi tiết thú cưng Admin Hình 25: Màn hình sửa thú cưng Hình 26: Màn hình sản phẩm Admin Hình 27: Màn hình thêm sản phẩm Hình 28: Màn hình danh mục Admin Hình 29: Màn hình thêm danh mục 3 5 8 26 27 27 28 29 30 31 32 32 44 49 50 50 52 53 54 55 56 57 58 58 59 59 60 61 61 Hình 30: Màn hình sửa danh mục Hình 31: Màn hình danh mục phụ Admin Hình 32: Màn hình thêm danh mục phụ Hình 33: Màn hình sửa danh mục phụ Hình 34 Màn hình sản phẩm chi tiết Admin Hình 35 Màn hình sửa sản phẩm Hình 36: Màn hình dịch vụ Admin Hình 37 Màn hình thêm dịch vụ Hình 38: Màn hình đặt lịch Admin Hình 39: Màn hình chi tiết dịch vụ Hình 40:Màn hình sửa dịch vụ Hình 41 Màn hình đơn hàng Hình 42 Màn hình chi tiết đơn hàng Hình 43 Màn hình khách hàng Hình 44 Màn hình thêm khách hàng Hình 45 Màn hình sửa khách hàng Hình 46 Màn hình vô hiệu hóa khách hàng Hình 47 Màn hình kích hoạt khách hàng Hình 48 Màn hình nhân viên Hình 49 Màn hình thêm nhân viên Hình 50 Màn hình sửa nhân viên Hình 51 Màn hình người dùng Hình 52 Màn hình thêm người dùng Hình 53 Màn hình sửa người dùng Hình 54 Màn hình kích hoạt người dùng Hình 55 Màn hình vô hiệu người dùng Hình 56 Màn hình thay đổi thông tin cá nhân Hình 57 Màn hình thay đổi mật khẩu Hình 58 Màn hình trang chủ khách hàng Hình 59 Màn hình thú cưng khách hàng Hình 60 Màn hình chi tiết thú cưng khách hàng Hình 61 Màn hình sản phẩm khách hàng Hình 62 Màn hình chi tiết sản phẩm khách hàng Hình 63 Màn hình dịch vụ khách hàng Hình 64 Màn hình đặt dịch vụ khách hàng Hình 65 Màn hình liên hệ khách hàng Hình 66 Màn hình 404 khách hàng 62 63 64 65 66 66 67 68 68 69 70 70 71 71 72 73 74 74 75 76 77 78 79 80 81 81 82 83 84 87 88 88 89 90 90 91 92 Hình 67 Màn hình giỏ hàng khách hàng Hình 68 Màn hình đơn hàng khách hàng Hình 69 Màn hình danh sách đơn hàng khách hàng Hình 70 Màn hình đăng nhập khách hàng Hình 71 Màn hình đăng ký khách hàng 92 93 94 94 96 Danh mục bảng Bảng 1: Danh sách các actor Bảng 2: Danh sách use-case Bảng 3: Đặc tả use-case tạo tài khoản Bảng 4: Đặc tả use-case đăng nhập khách hàng Bảng 5: Đặc tả use-case đăng nhập admin Bảng 6: Đặc tả use-case thay đổi thông tin Bảng 7: Đặc tả use-case tạo thú cưng Bảng 8: Đặc tả use-case sửa thú cưng Bảng 9: Đặc tả use-case tạo sản phẩm Bảng 10: Đặc tả use-case sửa sản phẩm Bảng 12: Đặc tả use-case tạo dịch vụ Bảng 14: Đặc tả use-case sửa dịch vụ Bảng 15: Đặc tả use-case đặt lịch Bảng 16: Đặc tả use-case xem thông tin đơn hàng Bảng 17: Đặc tả use-case chỉ sửa đơn hàng Bảng 18: Đặc tả use-case đặt đơn hàng Bảng 19: Đặc tả use-case tra cứu đơn hàng Bảng 20: Đặc tả use-case Chatbot Bảng 21: Đặc tả use-case quản lý nhân viên Bảng 22: Đặc tả use-case quản lý khách hàng Bảng 23: Danh sách bảng dữ liệu tổng quất Bảng 24: Bảng dữ liệu address Bảng 25: Bảng dữ liệu admin_user Bảng 26: Bảng dữ liệu breed Bảng 27: Bảng dữ liệu cart Bảng 28: Bảng dữ liệu category Bảng 29: Bảng dữ liệu customer Bảng 30: Bảng dữ liệu employee Bảng 31: Bảng dữ liệu employee_to_service Bảng 31: Bảng dữ liệu order 8 9 10 11 12 13 14 15 16 17 18 19 19 20 22 22 23 24 24 25 34 34 35 35 36 36 36 37 37 38 Bảng 31: Bảng dữ liệu pet Bảng 32: Bảng dữ liệu pet_cart_item Bảng 33: Bảng dữ liệu pet_order_item Bảng 34: Bảng dữ liệu pet_photo Bảng 35: Bảng dữ liệu pet_type Bảng 36: Bảng dữ liệu product Bảng 37: Bảng dữ liệu product_cart_item Bảng 38: Bảng dữ liệu product_order_item Bảng 39: Bảng dữ liệu product_photo Bảng 40: Bảng dữ liệu reservation Bảng 41: Bảng dữ liệu service Bảng 42: Bảng dữ liệu service_order_item Bảng 43: Bảng dữ liệu service_photo Bảng 44: Bảng dữ liệu sub_category Bảng 45: Bảng danh mục màn hình Bảng 46: Bảng phân công công việc 38 39 39 40 40 40 41 41 42 42 42 43 43 43 49 104 CHƯƠNG I: GIỚI THIỆU CHUNG 1. Đề tài - Tên đề tài: Xây dựng website cung cấp các dịch vụ về thú cưng - tích hợp ChatBot. - Công nghệ sử dụng: ReactJs, Nestjs. - Cơ sở dữ liệu sử dụng: Firebase Storage, MySQL. 2. Lý do chọn đề tài Hiện nay, chúng ta đang sống trong một xã hội ngày càng phát triển, điều này làm cho việc tiếp cận công nghệ thông tin ngày căng tang, cùng với việc ngày càng có nhiều người muốn sở hữu cho mình thú cưng dẫn đến các vấn đề về bán và cung cấp các dịch vụ cho thú cưng ngày một nhiều sau mỗi năm. Với phát triển của thời đại công nghệ 4.0 thì việc quản lý, lưu trữ, bán,… thú cưng theo cách cổ điển đang gây ra rất nhiều bất lợi và tốn nhiều thời gian và công sức. Và khi sự bùng nổ các dịch vụ trên Internet ở nước ta ngày càng lớn, thì việc có sự xuất hiện một website bán và cung cấp các dịch vụ về thú cưng để giúp giảm thiểu thời gian và công sức của chủ cửa hàng cũng như giúp chủ cửa hàng, khách hàng có thể theo dõi, truy xuất nhanh chóng, chính xác thông tin, tình trạng đơn hàng, thú cưng một cách dễ dàng là một việc rất cần thiết và khả thi vào lúc này. Dựa theo khảo sát thực trạng, thì có thế nhận thấy rằng tồn tại những công việc tốn rất nhiều thời gian nhưng vẫn lặp đi lặp lại như: Tiếp nhận tin nhắn mua hàng, phân chia các loại thú cưng, tổng kết thống kê doanh thu, kiểm tra thú cưng tồn kho, … Thông thường thì những công việc này chỉ dừng lại ở mức độ dùng Excel hay một số công cụ khác để thực thi và lưu trữ. Vì vậy việc xây dựng lên một website bán và cung cấp các dịch vụ về thú cưng là một vấn đề cực kì cần thiết. 3. Tóm tắt đề tài Những phần mềm thú cưng trên thị trường hiện nay mặc dù có những tính năng rất tiện ích tuy nhiên chúng vẫn còn rất phức tạp đối với một số người không hoàn toàn rành về công nghệ. Bên cạnh đó, còn có vẫn có những tính năng hoàn toàn không cần thiết tại một số nơi nhất định, đồng thời giao diện thiết kễ đã cũ, lạc hậu. Do đó, chúng tôi đã tiến hành thu thập những ý kiến người dùng để từ đó xây dựng một phần mềm có giao diện dễ sử dụng hơn và những tính năng phù hợp hơn. 4. Mục tiêu đề tài - Xây dựng website dịch vụ thú cưng có tính năng: Đăng nhập, đăng ký, quản lý danh mục thú cưng, sản phẩm, dịch vụ, quản lý giỏ hàng, quản lý đơn hàng, quản lý tài khoản, thống kê doanh thu, mặt hàng, chatbot hỗ trợ,... - Tìm hiểu được công nghệ thích hợp xây dựng ứng dụng. - Hoàn thành được báo cáo môn học. 5. Phương pháp nghiên cứu - Nghiên cứu các ứng dụng có sẵn trên thị trường, nhận xét được ưu khuyết điểm của các ứng dụng đó. - Nghiên cứu các tài liệu đặc tả về các phần mềm tương tự như quản lý bán hàng, chat app, ... - Tìm hiểu các công nghệ mới trên thị trường, nhận xét và chọn ra phần mềm thích hợp nhất. 6. Ý nghĩa và hướng của đề tài 6.1. Về mặt tài liệu - Sử dụng nguồn tài liệu tham khảo ReactJs, NestJs, Firebase. - Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mô hình thiết kế giao diện. 6.2. Về mặt sản phẩm - Tạo ra ứng dụng Website cung cấp các dịch vụ về thú cưng, tích hợp Chatbot. - Xử lý các vấn đề về hiệu suất của ứng dụng 1 cách hiệu quả. - Chức năng phù hợp với tình hình thực tế và dễ sử dụng. CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN 1. ReactJS 1.1. Giới thiệu React (Hay ReactJS, React.js) là một thư viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng. Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. Người bị ảnh hưởng bởi XHP (Một nền tảng thành phần HTML cho PHP). React lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau đó được triển khai cho Instagram.com năm 2012. Nó được mở mã nguồn (open-sourced) tại JSConf US tháng 5 năm 2013. Về cơ bản, việc xây dựng một ứng dụng MVC phía client với giàng buộc dữ liệu 2 chiều (2 way data-binding) là khá đơn giản. Tuy nhiên nếu dự án ngày càng mở rộng, nhiều tính năng hơn, làm cho việc bảo trì dự án gặp khó khăn, đồng thời hiệu năng cũng bị giảm. Bạn cũng có thể giải quyết vấn đề đó bằng các thư viện khác như Backbone.js hay Angular.js, tuy nhiên bạn sẽ thấy các hạn chế của chúng khi dự án của bạn ngày càng lớn. React ra đời sau AngularJS, nó sinh ra để dành cho các ứng dụng lớn dễ dàng quản lý và mở rộng. Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng. Hình 1: Giới thiệu về React Tính năng nổi bật của React: - Sử dụng JSX, trích dẫn HTML để render các subcomponent. - Single-way data flow (Luồng dữ liệu một chiều) - Virtual Dom nên khi state thay đổi chúng ta không cần thao tác trực tiếp với DOM. - Hiệu năng nhanh với những ứng dụng có dữ liệu thay đổi liên tục. 1.2. Lý do sử dụng Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX. Nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường. Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về. Bạn có thể tham khảo cách render side servering tại đây. Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS. Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi. 2. NestJS 2.1. Giới thiệu Nest (NestJS) là một framework để xây dựng ứng dụng NodeJS phía máy chủ hiệu quả và có thể mở rộng, được cải tiến từ JavaScript, được xây dựng và hỗ trợ đầy đủ TypeScript (nhưng vẫn cho phép nhà phát triển viết bằng JavaScript thuần) và kết hợp các yếu tố của OOP (Lập trình hướng đối tượng), FP (Lập trình hàm) và FRP (Lập trình phản ứng hàm). Nest cung cấp mức độ trừu tượng cao hơn các Node.js frameworks phổ biến (Express/Fastify), nhưng cũng hiển thị trực tiếp các APIs của họ cho các nhà phát triển. Điều này cho phép các nhà phát triển tự do sử dụng vô số mô-đun của bên thứ ba có sẵn cho nền tảng cơ bản. Hình 2: Giới thiệu về NestJs Tính năng nổi bật của NestJs: NestJS là một dự án mà tác giả muốn wapper lại mã nguồn, tối ưu và sắp xếp mã nguồn dựa trên NodeJS và ExpressJS. Nhờ đó mà mã nguồn dự án của bạn gọn gàng hơn, dễ bảo trì và tốc độ phát triển, xây dựng ứng dụng cũng nhanh hơn. CHƯƠNG III: PHÂN TÍCH HỆ THỐNG 1. Yêu cầu phần mềm 1.1. Yêu cầu nghiệp vụ Đảm bảo được các chức năng cần phải có đối với website cung cấp các dịch vụ về thú cưng - tích hợp ChatBot. Chia làm 3 danh mục bán hàng chính là thú cưng, sản phẩm, dịch vụ: ● Thú cưng: Với mỗi loại thú cưng chỉ có duy nhất một con, nên số lượng chỉ được tính tối đa là một. ● Sản phẩm: Gồm các danh mục sản phẩm, sản phẩm phụ, số lượng hàng tồn kho. ● Dịch vụ: Bao gồm chọn nhân viên làm dịch vụ, đặt lịch hẹn. 1.2 Yêu cầu chất lượng Yêu cầu về tính hiệu quả, đúng đắn: ● Đảm bảo tính toàn vẹn dữ liệu. ● Các thông báo phản hồi ngay lập tức khi người dùng thao tác. ● Các thông số được tính toán, cập nhật và hiển thị ngay lập tức. Yêu cầu về bảo mật: Các dữ liệu quan trọng như mật khẩu được mã hóa. Yêu cầu về tương thích: Tương thích trên nhiều thiết bị. 2. Use-case 2.1 Sơ đồ Use-case mức tổng quát Hình 3: Sơ đồ usecase mức tổng quát 2.2 Danh sách các actor STT Ý nghĩa / ghi chú Tên Actor 1 Người dùng Khách hàng, người sử dụng 2 Admin Người quản lý Bảng 1: Danh sách các actor 2.3 Danh sách Use-case STT Ý nghĩa / ghi chú Tên Usecase 1 Tạo tài khoản khách hàng Tạo tài khoản cá nhân cho app 2 Đăng nhập khách hàng Đăng nhập vào ứng dụng 3 Đăng nhập admin Đăng nhập tài khoản admin 4 Thay đổi thông tin Thay đổi thông tin tài khoản cá nhân 5 Tạo thú cưng Tạo thú cưng 6 Sửa thú cưng Cập nhật thú cưng 8 Tạo sản phẩm Tạo sản phẩm 9 Sửa sản phẩm Cập nhật sản phẩm 10 Tạo dịch vụ Thêm mới dịch vụ 11 Sửa dịch vụ Cập nhật dịch vụ 12 Đặt lịch Đặt lịch hẹn 13 Xem thông tin đơn hàng Xem thông tin đơn hàng