Đồ án tìm hiểu về reactjs và spring boot framework

ĐẠ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 ReactJS Spring Boot Framework Giảng viên hướng dẫn: NGUYỄN CÔNG HOAN Sinh viên thực hiện: TRIỆU TUẤN TÚ 20522103 Thành phố Hồ Chí Minh, ngày tháng năm 2023 Đồ án Triệu Tuấn Tú 2052103 NHẬN XÉT CỦA GIẢNG VIÊN …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… TRANG Đồ án Triệu Tuấn Tú 2052103 MỤC LỤC Giới thiệu tổng quan I Thành viên nhóm: Tổng quan đề tài: Công cụ sử dụng: II Xây dựng ứng dụng Tổng quan đề tài: 1.1 Lý chọn đề tài: 1.2 Đối tượng hướng đến: 1.3 Kết mong đợi Phân tích thiết kế hệ thống 2.1 Xác định yêu cầu Thiết kế liệu 34 3.1 Danh sách collection liệu: 34 3.2 Mô tả collection liệu 34 Thiết kế hệ thống 36 4.1 Kiến trúc hệ thống: 36 4.2 Chi tiết thành phần hệ thống 37 Thiết kế giao diện 38 5.1 Trang Home 38 5.2 Trang Blog 39 5.3 Giao diện xem chi tiết viết 40 5.4 Trang Introduction 41 5.5 Trang Support 42 5.6 Trang Destination 43 5.7 Giao diện chi tiết tour 44 5.8 Trang booking 45 5.9 Trang search 46 5.10 Thiết kế trang Admin Dashboard 47 5.11 Thiết kế trang quản lý đơn đặt tour 47 Cài đặt kiểm thử 47 Source code 48 III Tìm hiểu ReactJS 48 Giới thiệu 48 TRANG Đồ án IV Triệu Tuấn Tú 2052103 Các thành phần ReactJS 49 2.1 Components 49 2.2 Virtual DOM 50 2.3 JSX 50 2.4 State 51 2.5 Props 51 2.6 Lifecycle 52 2.7 React route dom 52 2.8 Server-side Rendering(SSR) 53 2.9 Client-side Rendering(CSR) 53 Spring boot 53 Giới thiệu 53 Một số component 54 2.1 Spring Boot starter 54 2.2 Spring Boot mybatis-plus 55 2.3 Spring Boot spring cache 56 2.4 Spring Boot rabbitmq 56 2.5 Spring Boot elasticsearch 57 2.6 Spring Boot docker 58 2.7 Spring Boot elk 59 2.8 Spring Boot Admin 2.0 60 2.9 Spring Boot apollo 61 2.10 Spring Boot Security, OAuth2 + API, JWT + API, OAuth2 + JWT 61 2.11 Spring Boot Actuator Prometheus 62 2.12 Spring Boot Seata 63 2.13 Spring Boot JSR303 63 2.14 Spring Boot với Eureka 64 2.15 Spring Boot với rest + ribbon 64 2.16 Spring Boot với Feign 64 2.17 Spring Boot với Hystrix Turbine and Dashboard 65 2.18 Spring Boot với Gateway 65 V Tài liệu tham khảo 66 TRANG Đồ án Triệu Tuấn Tú 2052103 Danh mục hình ảnh Hình 1: Sơ đồ use case 10 Hình 2: Chi tiết use case Xem viết 12 Hình : Chi tiết use case Xem địa điểm 13 Hình 4: : Chi tiết use case Xem tour 15 Hình : Chi tiết use case Quản lý viết 19 Hình : Chi tiết use case Quản lý user 21 Hình : Chi tiết use case Quản lý tour 24 Hình : Chi tiết use case Quản lý địa điểm 26 Hình : Chi tiết use case Quản lý voucher 29 Hình 10 : Chi tiết use case Quản lý review 31 Hình 11 : Chi tiết use case Quản lý xác nhận đơn đặt tour 33 Hình 12: Giao diện trang home 38 Hình 13: Giao diện trang Blog 39 Hình 14: Giao diện xem chi tiết viết 40 Hình 15: Giao diện trang Introduction 41 Hình 16: Giao diện trang Support 42 Hình 17: Giao diện trang Destination 43 Hình 18: Giao diện chi tiết tour 44 Hình 19: Giao diện đặt tour 45 Hình 20: Giao diện trang Tìm kiếm đơn đặt tour 46 Hình 21: Bản thiết kế trang Admin Dashboard 47 Hình 22: Bản thiết kế trang Quản lý đơn đặt tour 47 Hình 23: Virtual Dom 50 Hình 24: Ví dụ sử dụng JSX 50 Hình 25: Ví dụ không sử dụng JSX 51 Hình 26: Ví dụ khai báo thay đổi state 51 Hình 27: Ví dụ truyền props từ component cha 51 Hình 28: Ví dụ nhận props từ component cha 52 Hình 29: Ví dụ react route dom 53 Hình 30: Ví dụ sử dụng springboot starter 54 Hình 31: Ví dụ sử dụng interface mybatis plus 55 Hình 32: Ví dụ code sử dụng mybatis plus 56 Hình 33: Câu lênh SQL tương ứng sử dung mybatis plus 56 Danh mục bảng Bảng 1: Thành viên nhóm Bảng 2: Danh sách tác nhân 10 Bảng 3: Đặc tả use cáe đăng nhập 11 TRANG Đồ án Triệu Tuấn Tú 2052103 Bảng 4: Đặc tả use case đăng ký 12 Bảng 5: Đặc tả use case Xem viết 12 Bảng 6:Đặc tả use case Xem viết theo tên 13 Bảng 7: Đặc tả use case Xem viết theo tag 13 Bảng 8: Đặc tả use case Xem danh sách địa điẻm 14 Bảng 9: Đặc tả use case Xem chi tiết địa điểm 14 Bảng 10 : : Đặc tả use case Xem tour khởi hành 15 Bảng 11 : : Đặc tả use case Xem danh sách tour địa điểm 16 Bảng 12: Đặc tả use case Xem chi tiết tour 16 Bảng 13: Đặc tả use case Đặt tour 17 Bảng 14: Đặc tả use case Tra cứu đơn đặt tour 17 Bảng 15: Đặc tả use case Đánh giá 18 Bảng 16: Đặc tả use case Xem thống kê báo cáo 18 Bảng 17: Đặc tả use case Hiển thị danh sách viết 19 Bảng 18: Đặc tả use case Thêm viết 20 Bảng 19: Đặc tả use case Sửa viết 20 Bảng 20: Đặc tả use case Xóa viết 21 Bảng 21: Đặc tả use case Hiênr thị danh sách user 22 Bảng 22: Đặc tả use case Thêm user 22 Bảng 23: Đặc tả use case Sửa user 23 Bảng 24: Đặc tả use case Xóa user 23 Bảng 25: Đặc tả use case Hiển thị danh sách tour 24 Bảng 26: Đặc tả use case Thêm tour 25 Bảng 27: Đặc tả use case Sửa tour 25 Bảng 28: Đặc tả use case Xóa tour 26 Bảng 29: Đặc tả use case Hiển hị danh sach địa điểm 27 Bảng 30: Đặc tả use case Thêm địa điểm 27 Bảng 31: Đặc tả use case Sửa địa điểm 28 Bảng 32: Đặc tả use case Xóa địa điểm 28 Bảng 33: Đặc tả use case Hiển thị danh sách voucher 29 Bảng 34: Đặc tả use case Thêm voucher 30 Bảng 35: Đặc tả use case Sửa voucher 30 Bảng 36: Đặc tả use case Xóa coucher 31 Bảng 37: Đặc tả use case Hiển thị danh sách review 32 Bảng 38: Đặc tả use case Xóa review 32 Bảng 39: Hiển thị danh sách đơn đặt tour 33 Bảng 40: Đặc tả use case Sửa đơn đặt tour 34 Bảng 41: Danh sách collection liệu 34 Bảng 42: Mô tả collection blog 34 Bảng 43: Mô tả collection booking 35 Bảng 44: Mô tả collection destination 35 Bảng 45: Mô tả collection review 35 Bảng 46: Mô tả collection review 35 Bảng 47: Mô tả collection tour 36 Bảng 48: Mô tả collection user 36 Bảng 49: Mô tả collection Voucher 36 Bảng 50: Kết cài đặt 48 TRANG Đồ án I Triệu Tuấn Tú 2052103 Giới thiệu tổng quan Thành viên nhóm: MSSV Họ tên 20522103 Triệu Tuấn Tú Email Số điện thoại 20522103@gmail.com 0393666925 Bảng 1: Thành viên nhóm Tổng quan đề tài: Đồ án tập trung vào việc xây dựng website sử dụng hai cơng nghệ Spring Boot ReactJS - Spring Boot framework phát triển ứng dụng Java, cung cấp cho tính mạnh mẽ để xây dựng ứng dụng web dịch vụ web hiệu - ReactJS thư viện JavaScript phát triển Facebook, sử dụng để xây dựng giao diện người dùng đáng tin cậy tương tác ứng dụng web Mục tiêu đồ án tạo website Giúp hiểu rõ, sử dụng cơng nghệ tìm hiểu Để đạt mục tiêu này, sử dụng Spring Boot làm backend để xây dựng API xử lý logic nghiệp vụ Sử dụng ReactJS làm frontend để xây dựng giao diện người dùng tương tác gửi yêu cầu tới backend Chúng ta sử dụng RESTful API để truyền thông tin hai phần hệ thống Các công nghệ công cụ khác MongoDB , CSS, Bootstrap Git sử dụng trình phát triển đồ án Đồ án hướng đến việc rèn kỹ lập trình phát triển ứng dụng web, làm quen với hai công nghệ phổ biến Spring Boot ReactJS Ngồi ra, nhằm cung cấp cho nhìn tổng quan quy trình phát triển ứng dụng web từ việc thiết kế sở liệu, triển khai backend, xây dựng giao diện người dùng triển khai website Công cụ sử dụng: Visual Studio Code: IDE để xây dựng ứng dụng MongoDB Compass: Kiểm tra, quản lý sở liệu Postman: Hỗ trợ test API tạo Server II Xây dựng ứng dụng Tổng quan đề tài: - Tên website : DREAM HOLIDAY - Chức : Giúp cung cấp nơi cho khách hàng xem, đặt tour du lịch - Nền tảng phát triển: ReactJS, SpringBoot, MongoDB TRANG Đồ án - Triệu Tuấn Tú 2052103 Mơ hình Client Server Kiến trúc lớp 1.1 Lý chọn đề tài: Trong đợt đại dịch COVID-19, xã hội phải trải qua giai đoạn cách ly điều tạo bùng nổ ngành du lịch sau dịch bệnh qua Với phát triển mạnh mẽ này, doanh nghiệp lĩnh vực du lịch cần phát triển website hỗ trợ đặt tour du lịch trực tuyến, điều trở nên vô cần thiết để tạo hội tiếp cận khách hàng dễ dàng tối ưu hố hoạt động thơng qua công nghệ Một website hỗ trợ đặt tour du lịch đóng góp quan trọng cho khách hàng doanh nghiệp kinh doanh cách sau: - Đối với khách hàng: Website cung cấp tảng cho phép khách hàng tiếp cận thông tin tour du lịch cách nhanh chóng, xác trực quan nhất, giảm thiểu thời gian công sức phải đến trực tiếp đại lý trước Khách hàng dễ dàng tìm hiểu tour du lịch, xem lịch trình, điểm đến, giá thông tin cần thiết khác Họ so sánh lựa chọn tour phù hợp với mong muốn ngân sách cách thuận tiện từ đâu với số thao tác website - Đối với doanh nghiệp: Website hỗ trợ đặt tour du lịch giúp doanh nghiệp tối ưu hóa trình quản lý tour có Thơng qua website, doanh nghiệp dễ dàng cập nhật thơng tin tour, thay đổi lịch trình, giá chi tiết khác cách linh hoạt Họ thu thập thơng tin sở thích xu hướng khách hàng dễ dàng thông qua hệ thống đặt tour trực tuyến Dựa liệu này, doanh nghiệp phân tích đưa chiến lược kinh doanh hợp lý hơn, nhằm tăng cường hấp dẫn tour đáp ứng nhu cầu khách hàng cách tốt Tóm lại, việc phát triển website hỗ trợ đặt tour du lịch trực tuyến mang lại nhiều lợi ích cho khách hàng doanh nghiệp Đối với khách hàng, website cung cấp tiện ích tiếp cận thơng tin nhanh chóng tiện lợi, doanh nghiệp, tạo hội tối ưu hóa hoạt động kinh doanh tăng cường tương tác với khách hàng 1.2 Đối tượng hướng đến: Đối tượng website nhắm tới tất người có nhu cầu đặt tour, muốn du lịch - Những người trẻ muốn tự đặt tour du lịch Những người biết sử dụng internet giúp người khác đặt tour Những người muốn tiết kiệm thời gian không cần đến trung tâm, đại lý TRANG Đồ án Triệu Tuấn Tú 2052103 1.3 Kết mong đợi - Học cách phát triển ứng dụng web - Triển khai, hoàn thành sản phẩm - Áp dụng kiến thức học vào phát triển đồ án Phân tích thiết kế hệ thống 2.1 Xác định yêu cầu Các yêu cầu ứng dụng cần có như: - - Cho customer ▪ Đăng nhập, đăng kí ▪ Đổi mật ▪ Thay đổi thơng tin cá nhân ▪ Xem, tìm kiếm tour, địa điểm ▪ Đặt tour ▪ Đánh giá tour ▪ Xem viết Cho Admin ▪ Quản lý tour: thêm xóa sửa thơng tin ▪ Quản lý địa điểm: thêm xóa sửa địa điểm ▪ Quản lý viết: thêm xóa sửa viết ▪ Xác nhận đơn đặt tour ▪ Xem thống kê báo cáo TRANG Đồ án Triệu Tuấn Tú 2052103 Hình 1: Sơ đồ use case Actor Customer Admin Người sử dụng website Có thể thực chức để đặt tour Người quản lý website Kiểm soát, chỉnh sửa đối tượng có website Bảng 2: Danh sách tác nhân TRANG 10 Đồ án Triệu Tuấn Tú 2052103 Hình 28: Ví dụ nhận props từ component cha 2.6 Lifecycle ReactJS cung cấp phương thức vòng đời cho thành phần, cho phép can thiệp vào giai đoạn quan trọng trình thành phần, khởi tạo, cập nhật huỷ bỏ Việc sử dụng lifecycle methods giúp kiểm soát logic ứng dụng tương tác với kiện xảy trình render Trong life cycle có q trình bao gồm Mouting(khởi tạo), Updating(cập nhật) Unmouting(hủy bỏ) 2.7 React route dom Đây thư viện bên thứ ba phổ biến cộng đồng ReactJS, sử dụng để quản lý định tuyến ứng dụng web React Router cho phép tạo route (đường dẫn) điều hướng thành phần React cách dễ dàng TRANG 52 Đồ án Triệu Tuấn Tú 2052103 Hình 29: Ví dụ react route dom 2.8 Server-side Rendering(SSR) SSR trình tạo render giao diện người dùng máy chủ trước gửi đến trình duyệt Khi yêu cầu gửi từ trình duyệt, máy chủ tạo trả trang HTML render hồn chỉnh cho trình duyệt Với SSR, ReactJS sử dụng để xây dựng giao diện người dùng máy chủ, thông qua thư viện Next.js Gatsby.js React components render thành HTML tĩnh, kèm theo liệu ban đầu từ máy chủ SSR giúp tối ưu hóa SEO, tăng khả tương tác trình duyệt cung cấp trải nghiệm nhanh cho người dùng Tuy nhiên, tốn nhiều tài nguyên máy chủ thời gian render ban đầu 2.9 Client-side Rendering(CSR) CSR trình tạo render giao diện người dùng trình duyệt Khi yêu cầu gửi từ trình duyệt, máy chủ trả tệp HTML trống tập tin JavaScript ứng dụng React Với CSR, ReactJS chạy trình duyệt sử dụng Virtual DOM để tạo cập nhật giao diện người dùng dựa liệu truy vấn từ máy chủ API bên CSR cho phép ứng dụng có tính tương tác cao, cho phép thay đổi giao diện người dùng mà không cần tải lại trang hồn tồn Tuy nhiên, trang ban đầu tải chậm không tối ưu cho SEO IV Spring boot Giới thiệu Spring Boot framework phát triển ứng dụng Java dựa tảng Spring Framework, nhằm giúp đơn giản hóa nhanh chóng hóa trình phát triển ứng dụng Java Nó cung cấp cách tiếp cận cho việc phát triển ứng dụng, có nghĩa giới hạn định lựa chọn, để tập trung vào việc giải vấn đề ứng dụng Spring Boot cung cấp tính cấu hình tự động (auto-configuration), cho phép đưa giải pháp chuẩn hóa cho vấn đề thường gặp việc phát triển TRANG 53 Đồ án Triệu Tuấn Tú 2052103 ứng dụng Nó tích hợp nhiều thành phần Spring Framework, Spring MVC (Model-View-Controller), Spring Data, Spring Security, Spring Batch, để tạo ứng dụng mạnh mẽ đáp ứng nhiều nhu cầu khác Spring Boot hỗ trợ quản lý dependencies thông qua Maven Gradle, giúp giảm thiểu thời gian cơng sức tìm kiếm cài đặt dependencies phụ thuộc Ngồi ra, Spring Boot cịn cung cấp loạt công cụ hỗ trợ cho việc phát triển, kiểm thử triển khai ứng dụng, Spring Boot DevTools, Spring Boot Actuator, Spring Boot CLI Với Spring Boot, việc phát triển ứng dụng Java trở nên đơn giản dễ dàng hết Nó giúp nhà phát triển tập trung vào việc tạo ứng dụng chất lượng cao tiết kiệm thời gian so với việc phải lo lắng cấu hình chi tiết kỹ thuật Một số component 2.1 Spring Boot starter - Khái niệm: Spring Boot starter module giúp đơn giản hóa việc cấu hình sử dụng dependencies ứng dụng Spring Boot Starter cung cấp tập hợp dependencies cấu hình sẵn cho loại ứng dụng cụ thể dependencies tự động phát tự động cấu hình thêm vào - Tính ưu điểm: ▪ Giúp đơn giản hóa q trình cấu hình dependencies ▪ Tự động cấu hình dependencies cách chuẩn xác hiệu ▪ Giảm thiểu thời gian công sức phải cấu hình dependencies cách thủ cơng - Cách sử dụng: Để sử dụng Spring Boot starter, cần thêm dependency starter vào file pom.xml ứng dụng Spring Boot Ví dụ, để sử dụng starter cho RESTful web service, ta thêm dependency sau vào file pom.xml Sau đó, dependencies liên quan đến RESTful web service tự động cấu hình sẵn sàng để sử dụng ứng dụng Spring Boot Hình 30: Ví dụ sử dụng springboot starter TRANG 54 Đồ án Triệu Tuấn Tú 2052103 2.2 Spring Boot mybatis-plus - Khái niệm: Mybatis-Plus framework giúp đơn giản hóa việc sử dụng Mybatis ứng dụng Spring Boot Mybatis-Plus cung cấp tính hỗ trợ hoạt động CRUD pagination cách dễ dàng tiện lợi - Tính ưu điểm: ▪ Giúp đơn giản hóa trình tạo truy vấn SQL cho việc thao tác với CSDL ▪ Cung cấp tính hỗ trợ cho hoạt động CRUD pagination ▪ Tự động cấu hình truy vấn SQL cho hoạt động CRUD - Cách sử dụng: Để sử dụng Mybatis-Plus, ta cần thêm dependency MybatisPlus vào file pom.xml ứng dụng Spring Boot Sau đó, ta sử dụng interface cung cấp Mybatis-Plus để thực hoạt động CRUD pagination đối tượng ứng dụng - Ví dụ khởi tạo nơi lưu trữ đối tượng User extends từ interface mybatis plus Hình 31: Ví dụ sử dụng interface mybatis plus Sau sử dụng mybatis plus truy vấn kết cần thiết cách sử dụng hàm cung cấp TRANG 55 Đồ án Triệu Tuấn Tú 2052103 Hình 32: Ví dụ code sử dụng mybatis plus Kết hàm tương ứng với câu lệnh truy vấn Hình 33: Câu lênh SQL tương ứng sử dung mybatis plus 2.3 Spring Boot spring cache - Khái niệm: Spring Cache framework cung cấp tính hỗ trợ cho việc caching liệu ứng dụng Spring Boot Spring Cache cung cấp cách tiếp cận giúp đơn giản hóa việc sử dụng caching ứng dụng - Tính ưu điểm: ▪ Giảm thời gian phản hồi ứng dụng tăng hiệu suất cách cache liệu ▪ Tăng tính khả dụng độ tin cậy ứng dụng cách giảm tải cho CSDL ▪ Cung cấp tính hỗ trợ cho việc quản lý điều chỉnh cache ▪ @Cacheable: Được sử dụng để đánh dấu phương thức phần tử liệu lưu trữ cache Khi phương thức gọi liệu yêu cầu, Spring Boot kiểm tra cache trước để xem liệu giá trị tương ứng tồn hay khơng Nếu có, giá trị lấy từ cache thay thực lại phương thức truy vấn liệu ▪ @CacheEvict: Xóa giá trị tương ứng cache để đảm bảo liệu truy xuất lần ▪ @CachePut: Thay giá trị có (nếu có) thêm vào cache - Cách sử dụng: Để sử dụng Spring Cache, ta cần sử dụng annotation cung cấp Spring Cache, chẳng hạn @Cacheable, @CachePut, @CacheEvict, để áp dụng caching cho phương thức ứng dụng Ta tùy chỉnh cấu hình cho caching file application.properties ứng dụng 2.4 Spring Boot rabbitmq - Khái niệm: RabbitMQ message broker sử dụng để xử lý truyền tải message ứng dụng Có thể giúp cho hệ thống phần mềm TRANG 56 Đồ án Triệu Tuấn Tú 2052103 khác giao tiếp, trao đổi liệu với Spring Boot RabbitMQ cung cấp tính hỗ trợ cho việc sử dụng RabbitMQ ứng dụng Spring Boot - - Tính ưu điểm: ▪ Giúp đơn giản hóa việc sử dụng RabbitMQ ứng dụng Spring Boot ▪ Cung cấp tính hỗ trợ cho việc quản lý điều chỉnh message queues ▪ Một số tính khác như: Exchanges, Bindings, Publish/Subscribe, v.v Cách sử dụng: Để sử dụng Spring Boot RabbitMQ, ta cần thêm dependency RabbitMQ Spring Boot RabbitMQ vào file pom.xml ứng dụng Spring Boot Sau đó, ta sử dụng annotation API cung cấp Spring Boot RabbitMQ để thực hoạt động publish message, subscribe message xử lý message ứng dụng 2.5 Spring Boot elasticsearch - Khái niệm: Elasticsearch cơng cụ tìm kiếm phân tích liệu mã nguồn mở Nó mạnh mẽ việc phục vụ tìm kiếm liệu lại yếu thao tác CRUD nên thường sử dụng song song với thao tác Database Spring Boot Elasticsearch cung cấp tính hỗ trợ cho việc sử dụng Elasticsearch ứng dụng Spring Boot TRANG 57 Đồ án Triệu Tuấn Tú 2052103 - Tính ưu điểm: ▪ Giúp đơn giản hóa việc tìm kiếm phân tích liệu ứng dụng ▪ Cung cấp tính hỗ trợ cho việc tạo quản lý index document Elasticsearch - Cách sử dụng: Để sử dụng Spring Boot Elasticsearch, ta cần thêm dependency Elasticsearch Spring Boot Elasticsearch vào file pom.xml ứng dụng Spring Boot Sau đó, ta sử dụng API cung cấp Spring Boot Elasticsearch để thực hoạt động tạo index, thêm document, tìm kiếm xóa document Elasticsearch - 2.6 Spring Boot docker - Khái niệm: Docker tảng containerization mã nguồn mở giúp đơn giản hóa việc triển khai ứng dụng.Nó cung cấp môi trường nhẹ tách biệt để chạy ứng dụng thành phần liên quan chúng Spring Boot Docker cung cấp tính hỗ trợ cho việc sử dụng Docker ứng dụng Spring Boot TRANG 58 Đồ án - - Triệu Tuấn Tú 2052103 Tính ưu điểm: ▪ Giúp đơn giản hóa việc triển khai ứng dụng mơi trường container ▪ Cung cấp tính hỗ trợ cho việc quản lý điều chỉnh container ▪ Images: nơi để lưu trữ containers, chúng tạo từ hướng dẫn viết dockerfile ▪ Dockerfile: Dockerfile tệp văn chứa loạt hướng dẫn để xây dựng hình ảnh Docker Dockerfiles cho phép bạn xác định trạng thái mong muốn images tự động hóa q trình xây dựng Images Cách sử dụng: Để sử dụng Spring Boot Docker, ta cần tạo Dockerfile cho ứng dụng Spring Boot để build image Sau đó, ta sử dụng tính Docker để triển khai quản lý container chạy ứng dụng Spring Boot 2.7 Spring Boot elk - Khái niệm: ELK giải pháp mã nguồn mở sử dụng để xử lý phân tích log ELK từ viết tắt Elaticsearch, Logstash Kibana, ba công cụ nguồn mở thường sử dụng để phân tích giám sát nhật ký Spring Boot ELK cung cấp tính hỗ trợ cho việc sử dụng ELK ứng dụng Spring Boot - Tính ưu điểm: ▪ Giúp đơn giản hóa việc xử lý phân tích log ứng dụng ▪ Cung cấp tính hỗ trợ cho việc quản lý điều chỉnh ELK stack TRANG 59 Đồ án Triệu Tuấn Tú 2052103 ▪ Logstash: kênh xử lý liệu thu thập, xử lý chuyển đổi logs nguồn liệu khác trước gửi chúng đến Elaticsearch để lưu trữ ▪ Elaticsearch: sử dụng để lưu trữ lập mục(index) ghi tạo ứng dụng Spring Boot cung cấp từ logstash ▪ Kibana : công cụ khám phá trực quan hóa liệu hoạt động với Elaticsearch Nó cho phép bạn tạo bảng điều khiển, biểu đồ đồ thị tương tác để phân tích trực quan hóa liệu nhật ký lưu trữ từ cung cấp giao diện web thân thiện với người dùng để khám phá nhật ký hiểu rõ liệu - Cách sử dụng: Để sử dụng Spring Boot ELK, ta cần thêm dependency Logstash, Elasticsearch Kibana vào file pom.xml ứng dụng Spring Boot 2.8 Spring Boot Admin 2.0 - Khái niệm: Spring Boot Admin công cụ quản lý giám sát ứng dụng Spring Boot Nó cung cấp bảng điều khiển tập trung nơi bạn xem tình trạng, số liệu thơng tin quan trọng khác ứng dụng Spring Boot thời gian thực Phiên Spring Boot Admin 2.0 cung cấp tính giám sát quản lý tồn diện so với phiên trước - Tính ưu điểm: ▪ Cung cấp giao diện web dễ sử dụng để quản lý giám sát ứng dụng Spring Boot Trên bảng điều khiển giám sát nhiều ứng dụng ▪ Hỗ trợ giám sát thông số CPU, RAM, số lượng request lỗi ứng dụng ▪ Cho phép điều khiển quản lý ứng dụng từ xa chẳng hạn bắt đầu, dừng, khởi động lại ứng dụng - Cách sử dụng: Để sử dụng Spring Boot Admin 2.0, ta cần thêm dependency Spring Boot Admin vào file pom.xml ứng dụng Spring Boot Sau đó, ta cấu hình thơng số cần thiết để kết nối với ứng dụng port, context path, TRANG 60 Đồ án Triệu Tuấn Tú 2052103 username password Sau cấu hình xong, ta truy cập vào giao diện quản lý Spring Boot Admin để quản lý giám sát ứng dụng 2.9 Spring Boot apollo - Khái niệm: Spring Boot Apollo framework cung cấp tính quản lý cấu hình cho ứng dụng Spring Boot phát triển công ty Alibaba Nó cho phép quản lý thơng số cấu hình ứng dụng cách linh hoạt dễ dàng - Tính ưu điểm: ▪ Cung cấp tính quản lý cấu hình cho ứng dụng Spring Boot ▪ Cho phép lưu trữ cấu hình nhiều định dạng khác properties, yaml, xml ▪ Hỗ trợ cấu hình trực tiếp thơng qua file properties thông qua Apollo Portal, nơi người quản trị quản lý cập nhật thơng số cấu hình ứng dụng - Cách sử dụng: Để sử dụng Spring Boot Apollo, ta cần thêm dependency Apollo vào file pom.xml ứng dụng Spring Boot Sau đó, ta cấu hình thơng số cần thiết tên ứng dụng, cluster namespace file application.properties 2.10 - Spring Boot Security, OAuth2 + API, JWT + API, OAuth2 + JWT Khái niệm: Spring Boot Security framework cung cấp tính bảo mật cho ứng dụng Spring Boot Nó cung cấp tính xác thực, ủy quyền, bảo mật dựa phân quyền tính khác để đảm bảo an tồn cho ứng dụng TRANG 61 Đồ án - - Tính ưu điểm: ▪ Cung cấp tính bảo mật cho ứng dụng Spring Boot ▪ Hỗ trợ nhiều phương thức xác thực form login, HTTP Basic, OAuth2 ▪ Cung cấp tính ủy quyền phân quyền để đảm bảo an toàn cho ứng dụng ▪ Hỗ trợ kỹ thuật bảo mật JSON Web Token (JWT) OAuth2 Cách sử dụng: Để sử dụng Spring Boot Security, ta cần thêm dependency Spring Boot Security vào file pom.xml ứng dụng Spring Boot Sau đó, ta cấu hình thơng số cần thiết file SecurityConfig.java 2.11 - Triệu Tuấn Tú 2052103 Spring Boot Actuator Prometheus Khái niệm: Spring Boot Actuator module Spring Boot cung cấp endpoint để giám sát, quản lý ứng dụng Spring Boot Prometheus cơng cụ có nhiều tính quản lý dễ dàng, giám sát trạng thái hoạt động bên dịch vụ, mơ hình liệu mạnh mẽ, ngôn ngữ truy vấn mạnh mẽ PromQL, hiệu quả, khả mở rộng, dễ dàng tích hợp, trực quan hóa Spring Boot Actuator Prometheus module kết hợp Spring Boot Actuator Prometheus để thu thập thông tin ứng dụng đưa số thống kê để giám sát hiệu suất ứng dụng TRANG 62 Đồ án Triệu Tuấn Tú 2052103 - Tính ưu điểm: ▪ Cung cấp endpoint để giám sát, quản lý ứng dụng ▪ Giám sát hiệu suất ứng dụng cách thu thập thông tin ứng dụng đưa số thống kê ▪ Có thể tích hợp với cơng cụ giám sát khác Grafana để hiển thị biểu đồ, thơng báo cảnh báo có lỗi ứng dụng - Cách sử dụng: Để sử dụng Spring Boot Actuator Prometheus, ta cần thêm dependency Prometheus vào file pom.xml ứng dụng Spring Boot Sau đó, ta cấu hình thông số cần thiết file application.properties 2.12 Spring Boot Seata - Khái niệm: Seata framework mã nguồn mở sử dụng để quản lý giám sát giao dịch phân tán Seata cung cấp khả quản lý giao dịch phân tán cho ứng dụng Spring Boot Spring Boot Seata module kết hợp Spring Boot Seata để quản lý giám sát giao dịch phân tán ứng dụng Spring Boot - Tính ưu điểm: ▪ Cung cấp khả quản lý giám sát giao dịch phân tán ứng dụng Spring Boot ▪ Giúp giảm thiểu lỗi xảy trình thực giao dịch phân tán ▪ Có khả xử lý vấn đề liên quan đến đồng hóa liệu xử lý ngoại lệ trình thực giao dịch phân tán ▪ Dễ dàng tích hợp vào ứng dụng Spring Boot có - Cách sử dụng: Để sử dụng Spring Boot Seata, ta cần thêm dependency Seata vào file pom.xml ứng dụng Spring Boot Sau đó, ta cấu hình thơng số cần thiết file application.properties 2.13 Spring Boot JSR303 - Khái niệm: JSR303 specification Java Validation API, cung cấp cách để định nghĩa quy tắc validation cho đối tượng Java - Tính ưu điểm: TRANG 63 Đồ án Triệu Tuấn Tú 2052103 ▪ Spring Boot JSR303 cho phép định nghĩa quy tắc validation dễ dàng cách sử dụng annotations @NotNull, @Size, @Email để định nghĩa quy tắc validation ▪ Spring Boot JSR303 cịn tích hợp với Hibernate Validator để cung cấp quy tắc validation mở rộng - Cách sử dụng: Để sử dụng JSR303 Spring Boot, ta cần thêm dependency sau vào file pom.xml: 2.14 Spring Boot với Eureka - Khái niệm: Eureka service registry Netflix, sử dụng để quản lý phát service khác mạng Khi service đăng ký với Eureka, service khác dễ dàng tìm kiếm sử dụng service thơng qua tên - Tính ưu điểm: ▪ Eureka giúp cho việc phát gọi service trở nên dễ dàng ▪ Giúp cho service tự động tìm kiếm kết nối với mà không cần phải biết trước địa cụ thể service - Cách sử dụng: Để sử dụng Eureka Spring Boot, ta cần thêm dependency spring-cloud-starter-netflix-eureka-server vào file pom.xml 2.15 Spring Boot với rest + ribbon - Khái niệm: Ribbon thư viện load balancer sử dụng để phân phối tải đến service khác mạng Khi client gọi service thông qua Ribbon, Ribbon tự động phân phối tải đến instance service - Tính ưu điểm: ▪ Ribbon giúp cho việc phân phối tải instance service trở nên dễ dàng ▪ Nó giúp cho client gọi service mà không cần biết trước địa cụ thể service - Cách sử dụng: Để sử dụng Ribbon Spring Boot, ta cần thêm dependency spring-cloud-starter-netflix-ribbon vào file pom.xml 2.16 - Spring Boot với Feign Khái niệm: Feign thư viện client HTTP sử dụng để gọi service khác mạng Feign giúp cho việc gọi service trở nên dễ dàng cách sử dụng interface định nghĩa trước để gọi endpoint service TRANG 64 Đồ án Triệu Tuấn Tú 2052103 - Tính ưu điểm: Sử dụng ▪ Feign giúp cho việc gọi service trở nên dễ dàng thuận tiện cách định nghĩa interface để gọi endpoint service ▪ Feign tự động tạo request HTTP phản hồi từ service khác giúp giảm thiểu code boilerplate cho việc gọi service - Cách sử dụng: Để sử dụng Feign Spring Boot, ta cần thêm dependency spring-cloud-starter-openfeign vào file pom.xml 2.17 Spring Boot với Hystrix Turbine and Dashboard - Khái niệm: Hystrix thư viện sử dụng để giảm thiểu ảnh hưởng lỗi giảm tải service Hystrix Dashboard công cụ sử dụng để hiển thị metric thông tin liên quan đến Hystrix Hystrix Turbine công cụ sử dụng để tổng hợp thông tin từ Hystrix Dashboard khác - Tính ưu điểm: ▪ Hystrix giúp giảm thiểu ảnh hưởng lỗi giảm tải service ▪ Hystrix Dashboard giúp hiển thị metric thông tin liên quan đến Hystrix, giúp cho việc phân tích theo dõi lỗi tình trạng service trở nên dễ dàng ▪ Hystrix Turbine giúp tổng hợp thông tin từ Hystrix Dashboard khác nhau, giúp cho việc quản lý giám sát service trở nên dễ dàng - Cách sử dụng: Để sử dụng Hystrix Dashboard Turbine Spring Boot, ta cần thêm dependency spring-cloud-starter-netflix-hystrix-dashboard springcloud-starter-netflix-turbine vào file pom.xml 2.18 Spring Boot với Gateway - Khái niệm: Spring Cloud Gateway thư viện sử dụng để tạo API Gateway hệ thống phân tán API Gateway lớp trung gian client service, giúp cho việc gọi service trở nên dễ dàng quản lý request trở nên dễ dàng - Tính ưu điểm: ▪ Sử dụng Spring Cloud Gateway giúp cho việc tạo API Gateway trở nên dễ dàng thuận tiện ▪ Spring Cloud Gateway hỗ trợ tính routing, filtering load balancing, giúp cho việc quản lý request gọi service trở nên dễ dàng TRANG 65 Đồ án Triệu Tuấn Tú 2052103 ▪ Spring Cloud Gateway hỗ trợ việc định nghĩa policy để kiểm soát việc gọi service - V Cách sử dụng: Để sử dụng Spring Cloud Gateway Spring Boot, ta cần thêm dependency spring-cloud-starter-gateway vào file pom.xml Tài liệu tham khảo Trang chủ React: https://reactjs.org/ React - Hướng dẫn thức: https://reactjs.org/docs/getting-started.html React - Hướng dẫn cho người bắt đầu: https://reactjs.org/tutorial/tutorial.html React - Cơ bản: https://reactjs.org/docs/hello-world.html Trang chủ Spring Boot: https://spring.io/projects/spring-boot Spring Boot - Hướng dẫn thức: https://docs.spring.io/springboot/docs/current/reference/htmlsingle/ Spring Boot - Hướng dẫn bắt đầu: https://spring.io/guides/gs/spring-boot/ Spring Boot - Hướng dẫn JPA Hibernate: https://spring.io/guides/gs/accessingdata-jpa/ TRANG 66