Đồ án tìm HIỂU REACT SPRING BOOT 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 - SPRING BOOT VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA Giảng viên hướng dẫn: ThS MAI TRỌNG KHANG Sinh viên thực hiện: ĐINH NGỌC UYÊN PHƯƠNG 18520335 PHẠM NGỌC THỊNH 18520368 Thành phố Hồ Chí Minh, ngày tháng năm 2021 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 Mai Trọng Khang thầy Nguyễn Công Hoan trực tiếp giảng dạy, truyền đạt hỗ trợ cho nhóm 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 2021 MỤC LỤC I GIỚI THIỆU TỔNG QUAN Thơng tin nhóm Tổng quan đề tài 2.1 Giới thiệu đề tài 2.2 Phạm vi nghiên cứu 2.3 Nội dung nghiên cứu 2.4 Kết hướng tới Công cụ sử dụng 1 1 2 II 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 5.1 React Hook 5.2 React Router 5.3 React Redux - Redux toolkit 5.4 Redux Thunk 4 4 7 9 11 11 12 III SPRING BOOT Giới thiệu chung: Ưu điểm Spring Boot: Một số thư viện sử dụng phổ biến với Spring Boot: 3.1 Hibernate: 3.2 Spring Data JPA: 3.3 Spring Security: 3.4 Bcrypt: 14 14 14 15 15 15 16 16 3.5 Jjwt: 3.6 Swagger: Xây dựng Codebase cho ứng dụng Spring Boot: IV ỨNG DỤNG MINH HOẠ Giới thiệu ứng dụng minh hoạ 1.1 Bài toán thực tế 1.2 Hướng giải nhóm 1.3 Tổng quan ứng dụng phát triển Product Requirement Document 2.1 Objective 2.2 Release 2.3 Features 2.3.1 Thanh điều hướng đến loại sản phẩm 2.3.2 Gợi ý dòng sản phẩm liên quan 2.3.3 Đánh giá chất lượng sản phẩm 2.3.4 Theo dõi đơn hàng 2.3.5 Tạo giỏ hàng đặt hàng nhanh chóng 2.3.6 Tạo danh sách sản phẩm u thích 2.3.7 Xem thơng tin chi tiết sản phẩm 2.3.8 Cập nhật loại thông tin cá nhân 2.3.9 Cập nhật sản phẩm trending thời gian 2.4 Analytics - Phân tích 2.4.1 Tính gợi ý dịng sản phẩm liên quan 2.4.2 Tính đánh giá chất lượng sản phẩm 2.4.3 Tính theo dõi đơn hàng 2.4.4 Tính tạo giỏ hàng tốn 2.4.5 Tính tạo danh sách sản phẩm yêu thích 2.5 Future work - Hướng phát triển Các hình minh hoạ 3.1 Trang chủ 3.2 Trang sản phẩm 3.3 Trang chi tiết sản phẩm 3.4 Giỏ hàng 16 17 17 20 20 20 20 20 22 22 23 24 24 25 25 26 26 27 27 28 29 29 29 29 30 30 30 31 32 32 33 34 37 3.5 Đăng nhập 3.6 Trang sản phẩm yêu thích 3.7 Các đơn hàng 38 39 40 V KIẾN TRÚC HỆ THỐNG 42 VI KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN Kết đạt Hướng phát triển 44 44 44 VII TÀI LIỆU THAM KHẢO 45 Final Report - Project Research ReactJS - Spring Boot I GIỚI THIỆU TỔNG QUAN Thơng tin nhóm MSSV Họ tên Email 18520335 Đinh Ngọc Uyên Phương 18520335@gm.uit.edu.vn 18520368 Phạm Ngọc Thịnh 18520368@gm.uit.edu.vn Tổng quan đề tài 2.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ủ: Java ngơn ngữ lập trình phổ biến nhà phát triển sử dụng Sử dụng Java, 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 Java phổ biến tận Tuy nhiên, để cấu hình Final Report - Project Research ReactJS - Spring Boot ứng dụng Java cần nhiều bước, đó, Spring Boot đờ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 2.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 Spring Boot Đồ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 2.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 Spring Boot 2.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 Spring Boot 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 Spring Boot Đồng thời, nhóm học cách nghiên cứu sử dụng framework cần trải qua 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 Spring Boot Đồ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 Spring Boot, lập trình viên khác tham khảo tìm hiểu sâu Final Report - Project Research ReactJS - Spring Boot Công cụ sử dụng Trong trình xây dựng phần mềm, nhóm sử dụng phần mềm sau: ● Eclipse IDE: IDE hỗ trợ xây dựng ứng dụng phía server (Spring Boot) ● 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 ● MySQL Workbench: hỗ trợ nhóm lưu trữ sở liệu Final Report - Project Research ReactJS - Spring Boot 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 React JS 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: Final Report - Project Research ReactJS - Spring Boot 2.5 Future work - Hướng phát triển Future features Chatbot Purpose Có thể giải đáp thắc mắc khách hàng 24/24 Áp dụng BigData/Fast Data để khuyến nghị sản phẩm Phân tích liệu khách hàng để cải thiện chiến thuật tiếp thị Tự động đồng thông tin người dùng thông qua tài khoản mạng xã hội Sử dụng video mơ tả sản phẩm thay dùng hình ảnh Các chiến thuật tiếp thị phù hợp với loại khách hàng vừa giúp tăng doanh thu vừa giữ khách hàng nhớ đến ứng dụng có nhu cầu mua hàng Tăng trải nghiệm người dùng, giúp người dùng không tốn thời gian nhập liệu thơng tin có sẵn trang mạng xã hội Tăng thêm tính sinh động cho sản phẩm, người dùng xem rõ sản phẩm khía cạnh Priority Timeframe Sau số lượng tải ứng dụng đạt 1000 lượt Sau số lượng tải ứng dụng đạt 2000 lượt Sau số lượng tải ứng dụng đạt 1000 lượt Sau số lượng tải ứng dụng đạt 1000 lượt Sau số lượng tải ứng dụng đạt 500 lượt 31 Final Report - Project Research ReactJS - Spring Boot Các hình minh hoạ 3.1 Trang chủ Trang chủ TechShop nơi trưng bày số sản phẩm bật, khách hàng mua nhiều tháng Màn hình trang chủ 32 Final Report - Project Research ReactJS - Spring Boot 3.2 Trang sản phẩm Tất sản phẩm TechShop cung cấp phân loại trang sản phẩm, hỗ trợ người dùng tìm kiếm sản phẩm nhanh Màn hình sản phẩm Headphone Màn hình thiết bị console 33 Final Report - Project Research ReactJS - Spring Boot 3.3 Trang chi tiết sản phẩm Khách hàng xem chi tiết sản phẩm trang trước thêm vào giỏ hàng Trang chứa thông tin quan trọng sản phẩm thông số kỹ thuật, số hình ảnh liên quan, sản phẩm khác loại nhãn hiệu số đánh giá từ phía khách hàng trải nghiệm dịch vụ TechShop cung cấp Một số hình ảnh tổng hợp số thông số kỹ thuật quan trọng sản phẩm 34 Final Report - Project Research ReactJS - Spring Boot Một số sản phẩm khác loại nhãn hiệu 35 Final Report - Project Research ReactJS - Spring Boot Các đánh giá chi tiết từ khách hàng trước Chi tiết thông số kỹ thuật sản phẩm 36 Final Report - Project Research ReactJS - Spring Boot 3.4 Giỏ hàng Khách hàng thêm sản phẩm muốn mua, chỉnh sửa số lượng xoá sản phẩm chọn tiến hành toán giỏ hàng Màn hình sản phẩm có giỏ hàng tạm tính tổng giá tiền đơn hàng 37 Final Report - Project Research ReactJS - Spring Boot Màn hình chỉnh sửa địa giao hàng kiểm tra giỏ hàng trước đặt hàng 3.5 Đăng nhập Để thực thao tác đặt hàng, theo dõi tình trạng đơn hàng người dùng phải đăng nhập tài khoản TechShop Màn hình đăng nhập 38 Final Report - Project Research ReactJS - Spring Boot 3.6 Trang sản phẩm u thích Người dùng lưu lại sản phẩm yêu thích chưa muốn tốn hàng tình trạng chờ hàng nhập kho vào Wishlist để khơng bỏ lỡ hàng u thích mua sau Màn hình danh sách sản phẩm u thích 39 Final Report - Project Research ReactJS - Spring Boot 3.7 Các đơn hàng Người dùng xem lại chi tiết đơn hàng đặt đánh giá dịch vụ cho TechShop cung cấp Màn hình danh sách đơn hàng đặt 40 Final Report - Project Research ReactJS - Spring Boot Màn hình chi tiết đơn hàng Màn hình đánh giá sản phẩm TechShop 41 Final Report - Project Research ReactJS - Spring Boot V KIẾN TRÚC HỆ THỐNG Ứng dụng xây theo kiểu client server với hai tầng frontend ReactJS backend viết Java Spring Boot hai tầng giao tiếp với thông qua Restful API Đối với phần frontend ReactJS, Khi người dùng tương tác với giao diện web main component, bên main component nhóm có đặt router, router có chức điều hướng render component tương ứng với url browser người dùng Dữ liệu component đến từ hai nguồn: ● Thứ từ store redux, nhóm áp dụng redux để quản lý toàn state ứng dụng Để tránh việc truyền state component cao xuống thấp dùng redux tiện nhiều, mà với redux action khơng chứa hành vi bất đồng nhóm sử dụng redux thunk middleware để gọi api lấy data từ server 42 Final Report - Project ● Research ReactJS - Spring Boot Nguồn liệu thứ truyền vào component gọi trực tiếp api mà không cần lưu trữ hay thông qua store Các api trước bước trước vào tầng frontend qua Axios HTTP request Ở interceptor, gắn header token cho request xử lý response trả từ backend Đối với phần backend xây dựng Spring Boot, nhóm có sử dụng Spring Security để xử lý việc phân quyền xác thực người dùng Mọi request trước muốn truy cập vào backend để lấy tài nguyên đểu phải qua lớp security Nếu thông qua lớp này, request Controller điều hướng đến service nhằm xử lý business logic Sau áp dụng business logic, data muốn gửi lên database yêu cầu lấy liệu từ database xử lý repository Ở repository nhóm khơng viết câu lệnh sql mà sử dụng Spring data JPA để áp dụng nhiều database mà khơng cần phải viết lại query Entity đối tượng ứng với bảng database, muốn gửi data lên database dùng Entity cịn nhận data từ database hứng DTO sau dựa liệu trả frontend hiển thị lên cho người dùng 43 Final Report - Project Research ReactJS - Spring Boot VI KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN Kết đạt Nhóm ứng dụng thành công kiến thức ReactJS Spring Boot vào việc xây dựng sản phẩm riêng Sản phẩm nhóm cung cấp đầy đủ tính ứng dụng bán hàng online Nhóm ghi nhận lại tất kiến thức nghiên cứu vào phần báo cáo cuối kỳ giúp lập trình viên khác tham khảo tự phát triển ứng dụng cho riêng TechShop nhóm Hướng phát triển Trong tương lai, nhóm tập trung nghiên cứu thêm công nghệ phổ biến liên quan đến ReactJS Spring Boot Microservice Docker nhằm tăng khả xử lý ứng dụng Đồng thời, nhóm phát triển thêm số tính nâng cao cho ứng dụng toán online, chatbot nhằm tăng trải nghiệm người dùng 44 Final Report - Project Research ReactJS - Spring Boot VII TÀI LIỆU THAM KHẢO Sự hướng dẫn góp ý thầy Mai Trọng Khang thầy Nguyễn Công Hoan giảng viên trường Đại học Công nghệ thông tin ĐHQG TPHCM khoa Công nghệ phần mềm Tài liệu Java Spring Boot trang: https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/ Tài liệu Spring Security trang: https://spring.io/projects/spring-security Tài liệu Swagger trang: https://www.baeldung.com/swagger-2-documentation-for-spring-rest-api Tài liệu Java JWT GitHub: https://github.com/jwtk/jjwt Tài liệu Spring Data JPA trang: https://spring.io/projects/spring-data-jpa Tài liệu ReactJS trang: https://reactjs.org/ Tài liệu React Router trang: https://reactrouter.com/web/guides/quick-start Tài liệu Redux trang: https://redux.js.org/ Tài liệu Redux Thunk GitHub: https://github.com/reduxjs/redux-thunk Tài liệu Redux Toolkit trang: https://redux-toolkit.js.org/ Cộng đồng chia sẻ kinh nghiệm lập trình: https://stackoverflow.com/ 45 ... viên nhóm ReactJS Spring Boot thơng qua 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 Spring Boot Đồng thời,... làm tài liệu, mô tả API đồ án ● Xây dựng Codebase cho ứng dụng Spring Boot: Trong đồ án 1, nhóm chúng em tìm hiểu xây dựng Codebase hoàn chỉnh để triển khai ứng dụng Spring Boot tiêu chuẩn Codebase... (chụp từ ứng dụng) : Mô tả Codebase: 17 Final Report - Project Research ReactJS - Spring Boot ● com.techshopbe: chứa file SpringBootApplication để chạy ứng dụng Spring Boot (có thể hiểu SpringBootApplication