Tìm hiểu react express và xây dựng ứng dụng minh họa

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN Đề tài TÌM HIỂU REACT - EXPRESS VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA Giảng viên hướng dẫn: ThS NGUYỄN CÔNG HOAN Sinh viên thực hiện: NGUYỄN TRẦN HỮU ĐĂNG 18520014 HOÀNG PHÚC 19520221 Thành phố Hồ Chí Minh, ngày 16 tháng năm 2022 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… .……………………………………………………………………………………… ……………………………………………………………………………………… LỜI CẢM ƠN Để thực tốt đề tài này, với tất kính trọng, nhóm em xin kính gửi lời cảm ơn đến thầy Nguyễn Công Hoan trực tiếp giảng dạy, truyền đạt hỗ trợ cho nhóm q trình nghiên cứu để nhóm em hồn thành đề tài Trong trình thực hiện, trình làm báo cáo, chúng em khó tránh khỏi sai sót, nhóm em hi vọng thầy bỏ qua chúng em mong nhận ý kiến đóng góp thầy để học thêm nhiều kinh nghiệm để hoàn thành tốt đồ án lần sau Một lần nhóm em xin chân thành cảm ơn thầy Chúng em xin chân thành cảm ơn! Nhóm nghiên cứu Tp Hồ Chí Minh, tháng năm 2022 Mục lục I GIỚI THIỆU TỔNG QUAN 1 Thơng tin nhóm Tổng quan đề tài II 1.1 Giới thiệu đề tài 1.2 Phạm vi nghiên cứu 1.3 Nội dung nghiên cứu 1.4 Kết hướng tới Công cụ sử dụng REACT Giới thiệu chung Các từ khố (key concepts) 2.1 Component-based approach 2.2 Virtual DOM 2.3 Props - State 2.4 Component Lifecycle 2.5 React Hook Cách thức hoạt động ReactJS Lý ReactJS ưa chuộng Một số thư viện - package phổ biến sử dụng ReactJS III 5.1 React Hook 5.2 React Router 5.3 React Redux - Redux toolkit 10 5.4 Redux Thunk 10 EXPRESSJS 11 Giới thiệu chung 11 Ưu điểm ExpressJS 11 Một số chương trình, thư viện sử dụng phổ biến với ExpressJS 12 IV 3.1 EJS 12 3.2 Json Web Token 12 3.3 Dotenv 12 3.4 Bcrypt 13 3.5 Postman 13 Xây dựng Codebase cho ứng dụng ExpressJS 13 ỨNG DỤNG MINH HOẠ 14 Giới thiệu ứng dụng minh hoạ 14 1.1 Bài toán thực tế 14 1.2 Hướng giải nhóm 15 1.3 Tổng quan ứng dụng phát triển 15 1.4 Source code 16 Product Requirement Document 17 2.1 Objective 17 2.2 Release 19 2.3 Features 20 2.4 Analytics - Phân tích 26 2.5 Future work - Hướng phát triển 27 Các hình minh hoạ 29 3.1 Trang chủ 29 3.2 Trang sản phẩm 29 3.3 Trang chi tiết sản phẩm 30 3.4 Giỏ hàng 31 3.5 Xác thực thông tin để đặt hàng 32 3.6 Các đơn hàng 32 Giao diện quản trị hệ thống 33 4.1 Giao diện Admin tổng quan 33 4.2 Quản lý thể loại sản phẩm 34 4.3 Quản lý giao diện tổng thể 35 V KIẾN TRÚC HỆ THỐNG 36 VI KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN 37 Kết đạt 37 Hướng phát triển 38 TÀI LIỆU THAM KHẢO 39 I GIỚI THIỆU TỔNG QUAN Thơng tin nhóm MSSV Họ tên Email 18520014 Nguyễn Trần Hữu Đăng 18520014@gm.uit.edu.vn 19520221 Hoàng Phúc 19520221@gm.uit.edu.vn Tổng quan đề tài 1.1 Giới thiệu đề tài Với doanh nghiệp thời đại công nghệ, website cơng cụ vơ cần thiết Nó mang lại hàng loạt tiện ích tuyệt vời, giúp việc kinh doanh trở nên dễ dàng nhanh chóng hết Do đó, việc thiết kế, phát triển ứng dụng web hỗ trợ cho doanh nghiệp tăng trưởng mạnh mẽ Hiện nay, có nhiều framework thư viện hỗ trợ việc phát triển ứng dụng web cách nhanh chóng, tiện lợi đảm bảo tính bảo mật thơng tin khách hàng Xét mặt thiết kế bố cục: ReactJS giúp nhà phát triển tạo giao diện website theo hệ thống component dễ dàng quản lý, bảo trì mở rộng ứng dụng Các thư viện hỗ trợ cho thư viện giúp nhà phát triển tạo trang web thân thiện với người dùng, giao diện thu hút khách hàng Xét phía máy chủ: JavaScript ngơn ngữ lập trình phổ biến nhà phát triển sử dụng Sử dụng JavaScript, nhà phát triển tận dụng nhiều điểm mạnh mà đem lại “viết lần, thực thi khắp nơi" - câu nói khiến JavaScript phổ biến tận Tuy nhiên, để cấu hình ứng dụng JavaScript cần nhiều bước, đó, ExpressJS đời nhằm rút ngắn thời gian cài đặt ứng dụng, nhà phát triển tập trung vào nghiệp vụ việc cấu hình 1.2 Phạm vi nghiên cứu Trong đồ án lần này, nhóm chủ yếu tập trung vào nghiên cứu tổng quan cách thức hoạt động ReactJS ExpressJS Đồng thời, nhóm áp dụng nghiên cứu vào ứng dụng thực tế để giúp nhóm hiểu sâu kiến thức tìm hiểu 1.3 Nội dung nghiên cứu Nhóm tiến hành nghiên cứu chi tiết cách thức hoạt động, ưu - khuyết điểm thư viện - tính - package liên quan đến ReactJS ExpressJS 1.4 Kết hướng tới Với đề tài này, nhóm đề hai mục tiêu chính: Đối với cá nhân thành viên nhóm: mở rộng kiến thức thành viên nhóm ReactJS ExpressJS thơng qua q trình tìm hiểu áp dụng vào ứng dụng thực tế Các kiến thức tìm hiểu thơng qua đồ án thúc đẩy nhóm phát triển thêm ứng dụng khác ReactJS ExpressJS Đồng thời, nhóm học cách nghiên cứu sử dụng framework cần trải qua q trình nhằm giúp nhóm dễ dàng tiếp xúc với công nghệ tương lai Đối với lập trình viên dùng đồ án nghiên cứu làm tài liệu tham khảo: thông qua tài liệu nghiên cứu ứng dụng nhóm xây dựng, lập trình viên khác dễ dàng định hướng cần phải tìm hiểu sử dụng ReactJS ExpressJS Đồng thời nhóm có ghi số khái niệm, kiến thức thư viện phổ biến đề xuất cộng đồng sử dụng ReactJS ExpressJS, lập trình viên khác tham khảo tìm hiểu sâu Cơng cụ sử dụng Trong q trình xây dựng phần mềm, nhóm sử dụng phần mềm sau: ● NodeJS IDE: IDE hỗ trợ xây dựng ứng dụng phía server (ExpressJS) ● Visual Studio Code: hỗ trợ xây dựng giao diện người dùng (ReactJS) ● Postman: hỗ trợ nhóm test api để lấy liệu từ phía server ● MongoDB Atlas: hỗ trợ nhóm lưu trữ sở liệu II REACT Giới thiệu chung React thư viện Javascript, phát triển Facebook, hỗ trợ xây dựng giao diện người dùng Một ứng dụng có giao diện xây dựng ReactJS tạo nhiều thành phần nhỏ (component), đó, output component đoạn code HTML nhỏ tái sử dụng xuyên suốt ứng dụng Component xem từ khố (key concept) nhắc đến React Mỗi component chứa component nhỏ hơn, đó, ứng dụng với cấu trúc phức tạp hình thành từ nhiều component Đồng thời, cần định nghĩa component lần sử dụng nhiều nơi Một lợi tìm hiểu ReactJS sau có đầy đủ kiến thức ReactJS, lập trình viên dễ dàng học tiếp React Native - framework hỗ trợ xây dựng ứng dụng di động đa tảng Các từ khố (key concepts) 2.1 Component-based approach Đây concept React Ứng dụng chia thành component nhỏ, điều giúp lập trình viên dễ dàng tái sử dụng component quản lý, bảo trì phát triển ứng dụng cách dễ dàng Concept giúp đỡ nhiều việc quản lý ứng dụng lớn phức tạp, lẽ xảy lỗi, lập trình viên cần thay đổi chỉnh sửa component nhỏ mà khơng ảnh hưởng đến code tồn ứng dụng 2.2 Virtual DOM Virtual DOM đại diện ảo DOM, Virtual DOM đời tăng hiệu suất ứng dụng ReactJS cách đáng kể Cách thức hoạt động virtual DOM ReactJS: • Ứng dụng React tạo nhiều component con, component chứa state React theo dõi trạng thái state Khi state component thay đổi, React so sánh khác phiên trước thơng qua thuật toán Diff, đồng thời thực cập nhật virtual DOM • Một nắm component thay đổi, React tiến hành cập nhật component DOM Điều hạn chế việc cập nhật toàn component DOM cách thường xuyên, tăng hiệu ứng dụng web 2.3 Props - State 2.3.1 Props • Để truyền liệu component, ReactJS cho đời khái niệm props (hay cịn gọi properties) • Đối với ReactJS, component không thay đổi giá trị props, vì, props truyền cho nhiều component con, component thay đổi props dẫn đến nhập nhằng testing, liệu component khơng thống 2.3.2 State • Nếu props dùng để hứng liệu từ component cha state dùng để lưu liệu component với giá trị thay đổi phụ thuộc vào logic bên component • Tuy nhiên, sử dụng thao tác cập nhật giá trị state, lập trình viên phải ý nguyên tắc state thay đổi, component render lại Do đó, cần cân nhắc việc thay đổi giá trị state nhằm tránh việc render liên tục, giảm hiệu suất ứng dụng 2.3.8 Tính đề xuất sản phẩm bán chạy cửa hàng Feature Hiển thị đề xuất / best seller / rating cao cửa hàng Như khách hàng quan tâm đến thực phẩm chức năng, việc tập trung Description vào từ khóa khách nghe, biết đến quan trọng Hiển thị sản phẩm phổ biến cho khách hàng, tăng độ tín doanh nghiệp Giúp cho khách hàng dễ dàng truy cập sản phẩm phổ biến sau hàng Purpose động click chuột nhất, an tâm với lựa chọn Giúp cho khách hàng cũ dễ dàng mua lại tham khảo dòng sản phẩm liên quan khác nhiều người quan tâm Với việc tiếp cận người lớn tuổi, trang web phức tạp, tốn nhiều hành động khó chuyển đổi khách hàng thành trả tiền User problem Với việc tiếp cận với khách hàng người trẻ có nhu cầu sử dụng cho / tặng / biếu trang sản phẩm minh bạch tăng độ tin cậy ngược lại Thuận tiện với khách hàng mới, tăng tỉ lệ chuyển đổi thành khách hàng trả tiền giúp họ lại trang web lâu với gợi ý liên tục User value Với khách hàng cũ, tạo vòng đời khách hàng tốt yếu tố sản phẩm đáp ứng, việc mua lại tham khảo sản phẩm khác cách dễ dàng 25 2.4 Analytics - Phân tích 2.4.1 Tính gợi ý dòng sản phẩm liên quan Key performance indicator Baseline Target Phần trăm người dùng tương tác với chức 80% Timeframe tháng sau trải nghiệm 90% tính 2.4.2 Tính đánh giá chất lượng sản phẩm Key performance indicator Baseline Phần trăm người dùng tương tác với chức Thời gian người dùng sử dụng để hồn thành tính Target 60% 80% phút < phút Timeframe tháng sau trải nghiệm tính Sau khoảng lần để lại đánh giá 2.4.3 Tính theo dõi đơn hàng Key performance indicator Phần trăm người dùng tương tác với chức Baseline Target 70% 80% Timeframe tháng sau trải nghiệm tính 26 2.4.4 Tính tạo giỏ hàng tốn Key performance indicator Baseline Phần trăm người dùng tương tác với chức Thời gian người dùng sử dụng để hoàn thành tính 30% 10 phút Target Timeframe tháng sau tải ứng 50% dụng Sau khoảng lần thực