Tài liệu Website thương mại điện tử chuyên mua bán giày

Trang 1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN 1 Đề tài: WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHUYÊN MUA BÁN GIÀY Giảng viên hướng dẫn : Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Đức Chí Đạt 19521334 Nguyễn Ngọc Phúc 19520224 TP. Hồ Chí Minh, tháng 6 năm 2022 Trang 2 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN 1 Đề tài: WEBSITE THƯƠNG MẠI ĐIỆN TỬ CHUYÊN MUA BÁN GIÀY Giảng viên hướng dẫn : Huỳnh Tuấn Anh Sinh viên thực hiện: Nguyễn Đức Chí Đạt 19521334 Nguyễn Ngọc Phúc 19520224 TP. Hồ Chí Minh, tháng 6 năm 2022 Trang 3 Lời mở đầu Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoa Công Nghệ Phần Mềm đã giúp cho nhóm chúng em có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này. Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới Thầy Huỳnh Tuấn Anh. Đã giúp nhóm chúng em hoàn thành tốt báo cáo môn học của mình. Trong thời gian một học kỳ thực hiện đề tài, nhóm chúng em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới. Từ đó, nhóm chúng em vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo đồ án tốt nhất. Tuy nhiên, trong quá trình thực hiện, nhóm chúng em không tránh khỏi những thiếu sót. Chính vì vậy, nhóm chúng em rất mong nhận được những sự góp ý từ phía các Thầy Cô nhằm hoàn thiện những kiến thức mà nhóm chúng em đã học tập và là hành trang để nhóm chúng em thực hiện tiếp các đề tài khác trong tương lai. Nhóm em xin chân thành cảm ơn quý Thầy Cô! Trang 4 NHẬN XÉT CỦA GIẢNG VIÊN ……………………………………………………………………………………………….... ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Trang 5 Mục lục Danh mục hình ảnh 10 Danh mục bảng biểu 12 Chương I 16 Tổng quan 1. Lý do chọn đề tài 16 2. Mục tiêu 17 3. Phạm vi 17 4. Người dùng 18 5. Phương pháp nghiên cứu 18 Chương II Cơ sở lý thuyết & Tổng quan công nghệ 19 1. Giới thiệu về React JS 19 2. Giới thiệu về MongoDB 21 3. 4. 2.1. Các đặc điểm cơ bản của MongoDB 21 2.2. Ưu nhược điểm của MongoDB 22 2.2.1. Ưu điểm 22 2.2.2. Nhược điểm 24 Kiến trúc hệ thống 3.1. Kiến trúc hệ thống 25 3.2. Mô hình kiến trúc hệ thống 25 Mô tả chi tiết thành phần trong hệ thống Chương III 1. 25 Phân tích thiết kế ứng dụng Yêu cầu nghiệp vụ 26 27 27 Trang 6 1.1. Danh sách yêu cầu nghiệp vụ 27 1.2. Nhập sản phẩm 28 1.2.1. 1.3. 1.3.1. 2. Biểu mẫu 1 Lập hóa đơn bán hàng Biểu mẫu 2 Use case 2.1. 28 28 28 29 Mô hình Use Case 29 2.1.1. Use case tổng quát 29 2.1.2. Use case quản lý sản phẩm 30 2.1.3. Use case đăng nhập 30 2.1.4. Use case quản lý khách hàng 31 2.1.5. Use case quản lý đơn hàng 31 2.1.6. Use case quản lý doanh thu 32 2.1.7. Use case mua hàng 32 2.1.8. Use case bán hàng 33 2.1.9. Use case quản lý tài khoản 33 2.2. Danh sách các Actor 34 2.3. Danh sách các Use case 35 2.3.1. Danh sách 35 2.3.2. Đăng nhập admin 35 2.3.3. Đăng nhập customer 37 2.3.4. Quản lý sản phẩm 38 2.3.5. Thêm thông tin 40 2.3.6. Sửa thông tin 42 2.3.7. Xóa thông tin 43 2.3.8. Tìm kiếm thông tin 45 2.3.9. Báo cáo doanh thu 46 2.3.10. Quản lý khách hàng 47 Trang 7 2.3.10.1. Thêm khách hàng 47 2.3.10.2. Cập nhật thông tin khách hàng 49 2.3.11. 52 2.3.11.2. Đổi mật khẩu 54 2.3.11.3. Hiển thị danh sách sản phẩm đã theo dõi 55 2.3.11.4. Hiển thị lịch sử mua hàng, bán hàng 57 Quản lý đơn hàng 58 2.3.12.1. Tạo đơn hàng 58 Activity 61 Cập nhật sản phẩm 61 3.1.1. Sơ đồ trạng thái 61 3.1.2. Bảng mô tả các trạng thái 62 3.1. 3.2. Mua hàng(Customer) 62 3.2.1. Sơ đồ trạng thái 62 3.2.2. Bảng mô tả các trạng thái 63 3.3. Bán hàng ( Customer) 64 3.3.1. Sơ đồ trạng thái 64 3.3.2. Bảng mô tả các trạng thái 64 3.4. 4. 52 2.3.11.1. Chỉnh sửa thông tin 2.3.12. 3. Quản lý tài khoản (Customer) Báo cáo doanh thu 65 3.4.1. Sơ đồ trạng thái 65 3.4.2. Bảng mô tả các trạng thái 65 Sơ đồ lớp 67 4.1. Sơ đồ lớp (Mức phân tích) 67 4.2. Danh sách các lớp đối tượng và quan hệ 68 4.3. Mô tả chi tiết từng đối tượng 68 4.3.1. Categories 68 Trang 8 4.3.1.1. Danh sách thuộc tính 68 4.3.1.2. Danh sách các tính năng 68 4.3.2. Products 4.3.2.1. Danh sách thuộc tính 69 4.3.2.2. Danh sách các tính năng 69 4.3.3. Follows 70 4.3.3.1. Danh sách thuộc tính 70 4.3.3.2. Danh sách các phương thức 70 4.3.4. Sales 71 4.3.4.1. Danh sách thuộc tính 71 4.3.4.2. Danh sách các phương thức 71 4.3.5. Orders 72 4.3.5.1. Danh sách thuộc tính 72 4.3.5.2. Danh sách các phương thức 72 4.3.6. Users 73 4.3.6.1. Danh sách thuộc tính 73 4.3.6.2. Danh sách các phương thức 73 4.3.7. PortfolioItem 4.3.7.1. Danh sách thuộc tính 4.3.8. 5. 69 Authenticates 74 74 74 4.3.8.1. Danh sách thuộc tính 74 4.3.8.2. Danh sách các phương thức 75 Thiết kế CSDL 76 5.1. Sơ đồ logic 76 5.2. Mô tả chi tiết các thành phần trong sơ đồ logic 77 5.2.1. User 77 5.2.2. Admin 77 5.2.3. Customer 78 5.2.4. Categories 78 5.2.5. Product 78 Trang 9 6. 5.2.6. Orders 79 5.2.7. Sales 79 Thiết kế giao diện 80 6.1. Danh sách các màn hình 80 6.2. Mô tả chi tiết các màn hình 81 6.2.1. Signin (Admin) 81 6.2.2. SlideBar (Admin) 82 6.2.3. NavBar (Admin) 83 6.2.4. Dashboard (Admin) 84 6.2.5. Customer (Admin) 85 6.2.6. AddCustomer (Admin) 86 6.2.7. FixCustomer (Admin) 87 6.2.8. Products (Admin) 88 6.2.9. AddProduct (Admin) 89 6.2.10. FixProduct (Admin) 90 6.2.11. Orders (Admin) 91 6.2.12. Analytics (Admin) 92 6.2.13. Login (Customer) 93 6.2.14. Signup (Customer) 94 6.2.15. Navbar (Customer) 95 6.2.16. Home (Customer) 97 6.2.17. Product (Customer) 100 6.2.18. ProductDetail (Customer) 102 6.2.19. ViewAsk (Customer) 104 6.2.20. ViewBid (Customer) 105 6.2.21. ViewSale (Customer) 106 6.2.22. Buy select (Customer) 107 6.2.23. Sell select (Customer) 108 6.2.24. Address (Customer) 109 6.2.25. Sell (Customer) 110 Trang 10 6.2.26. Profile (Customer) 111 6.2.27. ResetPasswrod (Customer) 112 6.2.28. Buying Guide (Customer) 113 6.2.29. Selling Guide (Customer) 114 6.2.30. Following (Customer) 115 7. Component diagram 116 8. Deploy diagram 116 Chương IV Tổng quan 116 1. Kết quả 116 2. Hạn chế 117 3. Hướng phát triển 117 Bảng phân công công việc 118 Tài liệu tham khảo 118 Danh mục hình ảnh Hình 1 Khả năng mở rộng Horizontal Scalability 19 Hình 3 Chi tiết thành phần trong hệ thống 21 Hình 4 Biểu mẫu nhập sản phẩm 23 Hình 5 Biểu mẫu hóa đơn bán hàng 23 Hình 8 Use case tổng quát 24 Hình 9 Use case quản lý sản phẩm 25 Hình 10 Use case đăng nhập 25 Hình 11 Use case quản lý khách hàng 26 Hình 12 Use case quản lý đơn hàng 26 Trang 11 Hình 13 Use case quản lý doanh thu 27 Hình 14 Use case mua hàng 27 Hình 15 Use case bán hàng 28 Hình 16 Use case quản lý tài khoản 28 Hình 17 Sơ đồ trạng thái cập nhật sản phẩm 56 Hình 18 Sơ đồ trạng thái mua hàng 58 Hình 19 Sơ đồ trạng thái bán hàng 59 Hình 20 Sơ đồ trạng thái báo cáo doanh thu 61 Hình 21 Sơ đồ lớp (mức phân tích) 63 Hình 22 Sơ đồ logic 72 Hình 23 Giao diện đăng nhập Admin 77 Hình 24 Giao diện thanh SlideBar 79 Hình 25 Giao diện NavBar 80 Hình 26 Giao diện trang chủ admin 81 Hình 27 Giao diện trang chủ admin 81 Hình 28 Giao diện trang chủ admin 82 Hình 29 Giao diện quản lý khách hàng 83 Hình 30 Giao diện thêm khách hàng 84 Hình 31 Giao diện cập nhật khách hàng 85 Hình 32 Giao diện Tab sản phẩm 86 Hình 33 Giao diện thêm sản phẩm 87 Hình 34 Giao diện cập nhật sản phẩm 89 Hình 35 Giao diện Tab hóa đơn 90 Hình 36 Giao diện Tab Biểu đồ 92 Hình 37 Giao diện đăng nhập khách hàng 93 Hình 38 Giao diện đăng ký khách hàng 94 Hình 39 Giao diện navbar khách hàng 95 Trang 12 Hình 40 Giao diện navbar khách hàng sau khi đăng nhập 95 Hình 41 Giao diện navbar khách hàng 95 Hình 42 Giao diện trang home 98 Hình 43 Giao diện sản phẩm 100 Hình 44 Giao diện chọn chi tiết sản phẩm 102 Hình 45 Giao diện xem giá bán hàng 104 Hình 46 Giao diện xem giá mua hàng 105 Hình 47 Giao diện xem đơn hàng 106 Hình 48 Giao diện mua hàng 107 Hình 49 Giao diện bán hàng 108 Hình 50 Giao diện địa chỉ 109 Hình 51 Giao diện tìm bán hàng 110 Hình 52 Giao diện thông tin người dùng 111 Hình 53 Giao diện đổi mật khẩu 112 Hình 54 Giao diện lịch sử mua hàng 113 Hình 55 Giao diện lịch sử bán hàng 114 Hình 56 Giao diện danh sách theo dõi 115 Hình 57 Component Diagram 116 Hình 58 Deploy Diagram 116 Danh mục bảng biểu Bảng 1 Danh sách yêu cầu nghiệp vụ 22 Bảng 2 Danh sách các Actor 30 Bảng 3 Danh sách các Use Case 30 Bảng 4 Bảng đăng nhập Admin 32 Trang 13 Bảng 5 Bảng chức năng đăng nhập customer 33 Bảng 6 Chức năng đăng nhập Customer 33 Bảng 7 Chức năng quản lý sản phẩm 35 Bảng 8 Chức năng thêm thông tin 37 Bảng 9 Chức năng sửa thông tin 38 Bảng 10 Chức năng xóa thông tin 39 Bảng 11 Chức năng tìm kiếm thông tin 41 Bảng 12 Chức năng báo cáo doanh thu 42 Bảng 13 Chức năng thêm khách hàng 44 Bảng 14 Chức năng cập nhật thông tin khách hàng 47 Bảng 15 Hiển thị lịch sử bán trả hàng 53 Bảng 16 Tạo đơn hàng 55 Bảng 17 Mô tả trạng thái cập nhật sản phẩm 57 Bảng 18 Mô tả trạng thái mua hàng 59 Bảng 19 Mô tả trạng thái bán hàng 60 Bảng 20 Mô tả trạng thái báo cáo doanh thu 62 Bảng 21 Danh sách các lớp đối tượng và quan hệ 64 Bảng 22 Danh sách thuộc tính của loại sản phẩm 64 Bảng 23 Danh sách tính năng của loại sản phẩm 65 Bảng 24 Danh sách thuộc tính của sản phẩm 65 Bảng 25 Danh sách các tính năng của sản phẩm 66 Bảng 26 Danh sách thuộc tính của theo dõi 66 Bảng 27 Danh sách các phương thức của theo dõi 67 Bảng 28 Danh sách thuộc tính của bán hàng 67 Bảng 29 Danh sách các phương thức của bán hàng 68 Bảng 30 Danh sách thuộc tính của đặt hàng 68 Bảng 31 Danh sách các phương thức của đặt hàng 68 Trang 14 Bảng 32 Danh sách thuộc tính của Người dùng 69 Bảng 33 Danh sách các phương thức của Người dùng 69 Bảng 34 Danh sách thuộc tính của portfolioItem 70 Bảng 35 Danh sách thuộc tính của portfolioItem 70 Bảng 36 Danh sách các phương thức của portfolioItem 71 Bảng 37 Các dữ liệu trong Sơ đồ logic 73 Bảng 38 Các thành phần của Chức vụ 73 Bảng 39 Các thành phần của Admin 74 Bảng 40 Các thành phần của Khách hàng 74 Bảng 41 Các thành phần của Loại sản phẩm 74 Bảng 42 Các thành phần của Sản phẩm 75 Bảng 43 Các thành phần của Đặt hàng 75 Bảng 44 Các thành phần của bán hàng 76 Bảng 45 Danh sách các màn hình giao diện 77 Bảng 46 Đối tượng trên màn hình Đăng nhập admin 78 Bảng 47 Danh sách biến cố và xử lý tương ứng của màn hình Đăng nhập admin 78 Bảng 48 Đối tượng trên SlideBar 80 Bảng 49 Biến cố và xử lý tương ứng trên SlideBar 80 Bảng 50 Đối tượng trên NavBar 80 Bảng 51 Biến cố và xử lý tương ứng trên NavBar 80 Bảng 52 Đối tượng trên Trang chủ 82 Bảng 53 Biến cố và xử lý tương ứng trên Trang chủ 82 Bảng 54 Đối tượng trên tab quản lý khách hàng 83 Bảng 55 Biến cố và xử lý tương ứng trên tab quản lý khách hàng 84 Bảng 56 Đối tượng trên thêm khách hàng 85 Bảng 57 Biến cố và xử lý tương ứng trên thêm khách hàng 85 Bảng 58 Đối tượng trên cập nhật khách hàng 85 Trang 15 Bảng 59 Biến cố và xử lý tương ứng trên cập nhật khách hàng 86 Bảng 60 Đối tượng trên Tab sản phẩm 87 Bảng 61 Biến cố và xử lý tương ứng trên Tab sản phẩm 87 Bảng 62 Đối tượng trên thêm sản phẩm 88 Bảng 63 Biến cố và xử lý tương ứng thêm sản phẩm 88 Bảng 64 Đối tượng trên cập nhật sản phẩm 89 Bảng 65 Biến cố và xử lý tương ứng của cập nhật sản phẩm 90 Bảng 66 Đối tượng của Tab hóa đơn 91 Bảng 67 Biến cố và xử lý tương ứng của Tab hóa đơn 91 Bảng 68 Đối tượng của Tab Biểu đồ 92 Bảng 69 Đối tượng của đăng nhập khách hàng 94 Bảng 70 Biến cố và xử lý tương ứng của đăng nhập khách hàng 94 Bảng 71 Đối tượng của đăng ký khách hàng 95 Bảng 72 Biến cố và xử lý tương ứng của đăng ký khách hàng 95 Bảng 73 Đối tượng của navbar khách hàng 96 Bảng 74 Biến cố và xử lý tương ứng của navbar khách hàng 96 Bảng 75 Đối tượng của trang home 99 Bảng 76 Biến cố và xử lý tương ứng của trang home 99 Bảng 77 Đối tượng của sản phẩm 101 Bảng 78 Biến cố và xử lý tương ứng của sản phẩm 101 Bảng 79 Đối tượng của chi tiết sản phẩm 103 Bảng 80 Biến cố và xử lý tương ứng của chi tiết sản phẩm 103 Bảng 81 Đối tượng của xem giá bán hàng 104 Bảng 82 Biến cố và xử lý tương ứng của xem giá bán hàng 105 Bảng 83 Đối tượng của xem giá mua hàng 105 Bảng 84 Biến cố và xử lý tương ứng của xem giá mua hàng 106 Bảng 85 Đối tượng của xem đơn hàng 106 Trang 16 Bảng 86 Biến cố và xử lý tương ứng của xem đơn hàng 106 Bảng 87 Đối tượng của mua hàng 107 Bảng 88 Biến cố và xử lý tương ứng của mua hàng 108 Bảng 89 Đối tượng của bán hàng 108 Bảng 90 Biến cố và xử lý tương ứng của bán hàng 109 Bảng 91 Đối tượng của địa chỉ 110 Bảng 92 Biến cố và xử lý tương ứng của địa chỉ 110 Bảng 93 Đối tượng của tìm bán hàng 111 Bảng 94 Biến cố và xử lý tương ứng của tìm bán hàng 111 Bảng 95 Đối tượng của thông tin người dùng 111 Bảng 96 Biến cố và xử lý tương ứng của thông tin người dùng 112 Bảng 97 Đối tượng của đổi mật khẩu 112 Bảng 98 Biến cố và xử lý tương ứng của đổi mật khẩu 113 Bảng 99 Đối tượng của lịch sử mua hàng 113 Bảng 100 Biến cố và xử lý tương ứng của lịch sử mua hàng 114 Bảng 101 Đối tượng của lịch sử bán hàng 114 Bảng 102 Biến cố và xử lý tương ứng của lịch sử bán hàng 114 Bảng 103 Đối tượng của danh sách theo dõi 115 Bảng 104 Biến cố và xử lý tương ứng của danh sách theo dõi 115 Bảng 105 Phân công công việc 118 Chương I Tổng quan 1. Lý do chọn đề tài Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, Trang 17 cưng như các công ty, cửa hàng, nó đóng vai trò hết sức quan trọng có thể tạo ra những bước đột phá mạnh mẽ. Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy gì làm xa lạ. Đối với lĩnh vực mua bán hàng hóa cũng trở nên ngày càng cấp thiết. Khách hàng ngày càng có nhiều nhu cầu mua sắm và buôn bán những đồ dùng đã qua sử dụng của mình tuy nhiên để tìm kiếm một địa điểm và giả thành hợp lý xong không phải là chuyện dễ dàng dẫn đến mất quá nhiều công sức và thời gian mà hiệu quả lại không cao. Vì vậy ứng dụng công nghệ vào lĩnh vực này ngày càng phổ biến. Với một vài thao tác đơn giản, nhanh chóng, một người hoặc doanh nghiệp bất kì có thể dễ dàng quản lý mọi công việc mua bán hàng hóa của mình trên mọi thiết bị. Dựa vào kiến thức đã được học, sự cần thiết của vấn đề em đã “Xây dựng Website mua bán giày”. Tuy việc xây dựng phần mềm còn nhiều khó khăn và thiếu sót nhưng đã giúp chúng em có thêm nhiều kiến thức và sự học hỏi, tạo bước phát triển cho sau này. 2. Mục tiêu ● Nghiên cứu tổng quan về các nghiệp vụ cửa hàng và bán hàng. ● Nghiên cứu trên cơ sở lý thuyết việc phát triển hệ thống thông tin quản lý và thương mại điện tử Website mua bán giày. ● Xây dựng hệ thống thương mại điện tử và quản lý Website mua bán giày giúp cho việc quản lý và buôn bán trở nên đơn giản hơn. 3. Phạm vi Quy trình quản lý bán hàng, doanh thu và sản phẩm, đổi trả trong Website mua bán giày. Quy trình bán hàng thông qua website. Các vấn đề cần giải quyết trong quá trình quản lý và buôn bán trên Website mua bán giày, ví dụ như: Trang 18 ●Nghiệp vụ bán hàng và thanh toán ●Theo dõi, quản lý lịch sử mua hàng và bán hàng, lịch sử theo dõi của người dùng ●Thêm, xóa, sửa và tra cứu tìm kiếm thông tin của sản phẩm ●Từ đó tiến hành xây dựng cơ sở dữ liệu và khai thác dữ liệu phục vụ công tác quản lý và buôn bán trên website. 4. Người dùng Hệ thống phần mềm hướng về phía người dùng là giúp: khách hàng có địa điểm thuận lợi để mua bán giày tiết kiệm được nhiều rủi ro, chi phí và thời gian tìm kiếm đồng thời tạo độ tin cậy và chính xác cao. 5. Phương pháp nghiên cứu ● Phương pháp hệ thống, phương pháp tư duy. ● Phương pháp phân tích, tổng hợp. ● Phương pháp tin học hóa bằng công cụ lập trình để giải quyết vấn đề. Trang 19 Chương II Cơ sở lý thuyết & Tổng quan công nghệ 1. Giới thiệu về React JS ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản: - Virtual DOM: Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi. Với các đặc điểm ở trên, React dùng để xây dựng các ứng Trang 20 dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng. - Giới thiệu về JSX: JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.github.io/) - Giới thiệu về Components: React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo. - Props và State: