Tìm hiểu về reactjs và spring boot framework

Giới thiệu tổng quan

Thành viên nhóm

MSSV Họ tên Email Số điện thoại

20522103 Triệu Tuấn Tú 20522103@gmail.co m

Bảng 1: Thành viên nhóm

Tổng quan đề tài

Đồ án này tập trung vào việc xây dựng một website sử dụng hai công nghệ chính là Spring Boot và ReactJS

- Spring Boot là một framework phát triển ứng dụng Java, cung cấp cho chúng ta các tính năng mạnh mẽ để xây dựng các ứng dụng web và dịch vụ web hiệu quả

- ReactJS là một thư viện JavaScript phát triển bởi Facebook, được sử dụng để xây dựng giao diện người dùng đáng tin cậy và tương tác trên các ứng dụng web.

Mục tiêu của đồ án này là tạo ra một website cơ bản Giúp hiểu rõ, sử dụng được các công nghệ tìm hiểu Để đạt được mục tiêu này, chúng ta sẽ sử dụng Spring Boot làm backend để xây dựng các API và 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 và gửi các yêu cầu tới backend Chúng ta sẽ sử dụng RESTful API để truyền thông tin giữa hai phần của hệ thống Các công nghệ và công cụ khác như MongoDB , CSS, Bootstrap và Git cũng sẽ được sử dụng trong quá trình phát triển đồ án. Đồ án này hướng đến việc rèn kỹ năng lập trình và phát triển ứng dụng web, cũng như làm quen với hai công nghệ phổ biến hiện nay là Spring Boot và

ReactJS Ngoài ra, nó cũng nhằm cung cấp cho chúng ta một cái nhìn tổng quan về quy trình phát triển ứng dụng web từ việc thiết kế cơ sở dữ liệu, triển khai backend, xây dựng giao diện người dùng và triển khai website.

Công cụ sử dụng

Visual Studio Code: IDE chính để xây dựng ứng dụng

MongoDB Compass: Kiểm tra, quản lý cơ sở dữ liệu

Postman: Hỗ trợ test các API được tạo bởi Server

Xây dựng ứng dụng

Tổng quan đề tài

- Chức năng chính : 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

1.1Lý do 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 và điều này đã tạo ra một sự bùng nổ trong ngành du lịch ngay sau khi dịch bệnh đi qua Với sự phát triển mạnh mẽ này, các doanh nghiệp trong lĩnh vực du lịch đang cần phát triển một website hỗ trợ đặt tour du lịch trực tuyến, và điều này trở nên vô cùng cần thiết để tạo ra cơ hội tiếp cận khách hàng dễ dàng và tối ưu hoá hoạt động thông qua công nghệ Một website hỗ trợ đặt tour du lịch có thể đóng góp quan trọng cho cả khách hàng và doanh nghiệp kinh doanh trong các cách sau:

- Đối với khách hàng: Website cung cấp một nền tảng cho phép khách hàng tiếp cận thông tin về các tour du lịch một cách nhanh chóng, chính xác và trực quan nhất, giảm thiểu thời gian và công sức phải đến trực tiếp các đại lý như trước đây Khách hàng có thể dễ dàng tìm hiểu về các tour du lịch, xem các lịch trình, các điểm đến, giá cả và những thông tin cần thiết khác

Họ có thể so sánh và lựa chọn tour phù hợp với mong muốn và ngân sách của mình một cách thuận tiện từ bất kỳ đâu chỉ với một số thao tác trên 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 quá trình quản lý các tour hiện có Thông qua website, doanh nghiệp có thể dễ dàng cập nhật thông tin về tour, thay đổi lịch trình, giá cả và các chi tiết khác một cách linh hoạt Họ cũng có thể thu thập thông tin về sở thích và xu hướng của khách hàng dễ dàng hơn thông qua hệ thống đặt tour trực tuyến Dựa trên những dữ liệu này, doanh nghiệp có thể phân tích và đưa ra các chiến lược kinh doanh hợp lý hơn, nhằm tăng cường sự hấp dẫn của tour và đáp ứng nhu cầu của khách hàng một cách tốt nhất.

Tóm lại, việc phát triển một website hỗ trợ đặt tour du lịch trực tuyến mang lại nhiều lợi ích cho cả khách hàng và 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 và tiện lợi, trong khi đối với doanh nghiệp, nó tạo ra cơ hội tối ưu hóa hoạt động kinh doanh và tăng cường sự 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 là tất cả những người có nhu cầu đặt tour, muốn đi du lịch

- Những người trẻ muốn tự đặt tour đi 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 đi đến các trung tâm, đại lý

- Học được cách phát triển một ứng dụng web

- Triển khai, hoàn thành được sản phẩm

- Áp dụng được các kiến thức đã học vào phát triển đồ án

Phân tích thiết kế hệ thống

2.1Xác định các yêu cầu

Các yêu cầu ứng dụng cần có như:

 Thay đổi thông tin cá nhân

 Xem, tìm kiếm các tour, địa điểm

 Quản lý các tour: thêm xóa sửa thông tin

 Quản lý các địa điểm: thêm xóa sửa địa điểm

 Quản lý các bài viết: thêm xóa sửa bài viết

 Xác nhận các đơn đặt tour

 Xem thống kê báo cáo

Hình 1: Sơ đồ use case

Customer Người sử dụng chính của website Có thể thực hiện các chức năng để đặt tour Admin Người quản lý website Kiểm soát, chỉnh sửa các đối tượng hiện có trong website

Bảng 2: Danh sách tác nhân

Mô tả ngắn gọn: Người dùng đăng nhập vào hệ thống Điều kiện tiên quyết:

2 Chưa có người dùng đăng nhập

3 Chọn “Đăng nhập” tại trang bất kỳ

1 Người dùng chọn “Đăng nhập”

2 Hệ thống hiển thị form đăng nhập

3 Người dùng nhập username, password và bấm đăng nhập

4 Hệ thống gửi username, password cho Server kiểm tra

5 Người dùng đăng nhập thành công vào hệ thống

4 Sai tài khoản hoặc mật khẩu: Thông báo sai tài khoản hoặc mật khẩu

5 Lỗi từ phía Server: Thông báo có lỗi từ phía Server

Bảng 3: Đặc tả use cáe đăng nhập

Mô tả ngắn gọn: Người dùng đăng ký tài khoản vào hệ thống Điều kiện tiên quyết:

6 Chưa có người dùng đăng nhập

7 Chọn “Đăng ký” tại form đăng nhập

1 Người dùng chọn “Đăng ký”

2 Hệ thống hiển thị form đăng ký

3 Người dùng nhập username, password và bấm đăng ký

4 Hệ thống gửi username, password cho Server kiểm tra

6 Người dùng đăng ký thành công và đăng nhập thành công vào hệ thống

8 Đã tồn tại user có email hoặc username đang đăng ký: Thông báo trùng email hoặc username

Bảng 4: Đặc tả use case đăng ký

Use case Xem bài viết

Hình 2: Chi tiết use case Xem bài viết

Use case: Xem bài viết

Mô tả ngắn gọn: Xem các bài viết do chủ trang web đăng tải Điều kiện tiên quyết:

10.Chọn tab “Blog” tại trên thanh navbar

1 Người dùng chọn tab “Blog”

2 Hệ thống gửi yêu cầu lấy bài viết cho Server

3 Server trả về dữ liệu Hệ thống hiện thị các bài viết lên trang web

11.Lỗi từ phía Server: Thông báo có lỗi từ phía Server

Bảng 5: Đặc tả use case Xem bài viết

User case Xem bài viết theo tên

Use case: Xem bài viết theo tên

Mô tả ngắn gọn: Tìm kiếm, xem các bài viết theo tên Điều kiện tiên quyết:

13.Nhập tên bài viết trên thanh “Search”

1 Người dùng nhập tên bài viết và nhấn search

2 Hệ thống gửi yêu cầu tìm bài viết theo tên cho Server

3 Server trả về dữ liệu theo yêu cầu Hệ thống hiện thị các bài viết lên trang web

Bảng 6:Đặc tả use case Xem bài viết theo tên

User case Xem bài viết theo tag

Use case: Xem bài viết theo tên

Mô tả ngắn gọn: Lọc xem các bài viết theo “tag” Điều kiện tiên quyết:

16.Chọn vào “tag” của một bài viết bất kỳ

1 Người dùng chọn vào “tag” của một bài viết bất kỳ

2 Hệ thống gửi yêu cầu tìm bài viết theo “tag” cho Server

3 Server trả về dữ liệu theo yêu cầu Hệ thống hiện thị các bài viết lên trang web

Bảng 7: Đặc tả use case Xem bài viết theo tag

Use case Xem địa điểm

Hình 3 : Chi tiết use case Xem địa điểm

Use case Xem danh sách địa điểm

Use case: Xem danh sách địa điểm

Mô tả ngắn gọn: Hiển thị danh sách các địa điểm trong trang web Điều kiện tiên quyết:

1 Người dùng truy cập vào trang chủ

2 Hệ thống gửi yêu cầu lấy dữ liệu địa điểm cho Server

3 Server trả dữ liệu Hệ thống hiển thị ảnh, tên địa điể, vị trí lên trang web

Bảng 8: Đặc tả use case Xem danh sách địa điẻm

Use case Xem chi tiết địa điểm

Use case: Xem chi tiết địa điểm

Mô tả ngắn gọn: Hiển thị chi tiết của địa điểm được chọn Điều kiện tiên quyết:

3 Người dùng chọn vào một địa điểm bất kỳ trong danh sách

2 Đưa người dùng đến trang xem chi tiết địa điểm

3 Hệ thống gửi yêu cầu lấy dữ liệu địa điểm cho Server

4 Server trả dữ liệu Hệ thống hiển thị ảnh, tên địa điểm các tour có trong địa điểm, các đánh giá về địa điểm lên trang web

Bảng 9: Đặc tả use case Xem chi tiết địa điểm

Hình 4: : Chi tiết use case Xem tour

Use case Xem danh sách tour sắp khởi hành

Use case: Xem danh sách tour sắp khởi hành

Mô tả ngắn gọn: Hiển thị một danh sách các tour sắp khởi hành Điều kiện tiên quyết:

2 Hệ thống yêu cầu lấy dữ liệu các tour

3 Server trả dữ liệu Hệ thống hiển thị danh sách tên tour, ngày giờ khởi hành, trở về, giá tour lên trang web

Bảng 10 : : Đặc tả use case Xem tour sắp khởi hành

Use case Xem danh sách tour của địa điểm cụ thể

Use case: Xem danh sách tour của địa điểm cụ thể

Mô tả ngắn gọn: Hiển thị một danh sách các tour sắp khởi hành Điều kiện tiên quyết:

7 Người dùng chọn xem thông tin một địa điểm cụ thể

2 Đưa người dùng đến trang xem chi tiết địa điểm

3 Hệ thống gửi yêu cầu lấy dữ liệu các tour theo địa điểm đó cho Server

4 Server trả dữ liệu Hệ thống hiển thị danh sách tên tour, ngày giờ khởi hành, trở về, giá tour theo địa điểm đó

Bảng 11 : : Đặc tả use case Xem danh sách tour của địa điểm

Use case Xem chi tiết tour

Use case: Xem chi tiết của một tour cụ thể

Mô tả ngắn gọn: Hiển thị chi tiết thông tin tour mà người dùng chọn Điều kiện tiên quyết:

9 Người dùng chọn xem thông tin một tour cụ thể Có thể là tour trong danh sách tour sắp khởi hành, có thể là tour trong một địa điểm

1 Người dùng chọn vào một tour

2 Hệ thống lấy dữ liệu của tour đó Tạo popup hiển thị thông tin chi tiết của tour

Bảng 12: Đặc tả use case Xem chi tiết tour

Mô tả ngắn gọn: Cho phép người dùng đặt tour Điều kiện tiên quyết:

10.Người dùng chọn vào “Đặt tour ngay” trong khi xem chi tiết tour

1 Đưa người dùng đến trang đặt tour

2 Hệ thống gửi yêu cầu lấy dữ liệu các tour theo địa điểm đó cho Server

3 Server trả dữ liệu Hệ thống hiển thị danh sách tên tour, ngày giờ khởi hành, trở về, giá tour theo địa điểm đó

4 Hiển thị form cho người dùng xác nhận Họ tên, Email, SDT, nhập voucher nếu có

5 Người dùng chọn “Đặt tour” sau khi nhập đủ thông tin

6 Hệ thống gửi dữ liệu cho Server sử lý

7 Server trả về kết quả Hệ thống hiển thị đặt tour thành công

11 Hiển thị lỗi đặt tour không thành công

Bảng 13: Đặc tả use case Đặt tour

Use case Tra cứu tour đã đặt

Use case: Tra cứu tour đã đặt

Mô tả ngắn gọn: Người dùng tra cứu các tour đã đặt Điều kiện tiên quyết:

12 Người dùng đã đăng nhập

13.Chọn “Các tour đã đặt” tại “trang cá nhân”

1 Người dùng chọn “Các tour đã đặt”

2 Hệ thống gửi yêu cầu lấy các tour đã đặt theo userId, email, SDT cho Server

3 Server trả về dữ liệu theo yêu cầu Hệ thống hiển thị thông tin các tour đã đặt như: tên tour, ngày giờ khởi hành, kết thúc, giá tour, mã giảm giá

Bảng 14: Đặc tả use case Tra cứu đơn đặt tour

Mô tả ngắn gọn: Người dùng để lại bình luận, đánh giá với các địa điểm đã đi Điều kiện tiên quyết:

15 Người dùng đã đăng nhập

16.Người dùng chọn đánh giá tại một địa điểm đã từng đi

1 Người dùng nhập nội dung đánh giá, số sao đánh giá và nhấn

2 Hệ thống gửi yêu cầu tạo review kèm dữ liệu cho Server

3 Server trả về dữ liệu theo yêu cầu Hệ thống hiển thị bình luận mới tại địa điểm đó

Bảng 15: Đặc tả use case Đánh giá

Use case Xem thống kê báo cáo

Use case: Xem thống kê báo cáo

Mô tả ngắn gọn: Xem thống kê tổng quát của trang web Điều kiện tiên quyết:

18 Người dùng đã đăng nhập bằng tài khoản có quyền là Admin

19.Người dùng truy cập trang Admin dashboard

1 Người dùng truy cập trang Admin dashboard

2 Hệ thống gửi yêu cầu lấy các dữ liệu từ Server.

3 Hệ thống xử lý, hiển thị các thông số, bảng, biểu đồ thể hiện doanh thu, số đơn đặt tour thành công, số tour đang sử lý v.v

Bảng 16: Đặc tả use case Xem thống kê báo cáo

Use case Quản lý bài viết

Hình 5 : Chi tiết use case Quản lý bài viết

Use case Hiển thị danh sách bài viết

Use case: Hiển thị danh sách bài viết

Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các bài viết Điều kiện tiên quyết:

22.Chọn mục “Blog” tại trang bất kỳ trong Admin Dashboard

2 Hệ thống gửi yêu cầu lấy dữ liệu bài viết từ Server

3 Server trả dữ liệu theo yêu cầu Hệ thống hiển thị dữ liệu thành dạng bảng

4 Hệ thống thêm các action cho mỗi dòng dữ liệu

Bảng 17: Đặc tả use case Hiển thị danh sách bài viết

Use case Thêm bài viết

Use case: Thêm bài viết

Mô tả ngắn gọn: Thêm bài viết mới vào trang web Điều kiện tiên quyết:

26.Chọn “Thêm” trang quản lý bài viết

2 Hệ thống hiển thị trang thêm bài viết

3 Người dùng nhập thông tin bài viết và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu thêm bài viết cho server Thông báo thêm thành công và quay về trang quản lý bài viết

Bảng 18: Đặc tả use case Thêm bài viết

Use case Sửa bài viết

Use case: Sửa bài viết

Mô tả ngắn gọn: Sửa bài viết đã có tại trang web Điều kiện tiên quyết:

30.Chọn button/icon “Sửa” tại dòng của bài viết muốn sửa

2 Hệ thống hiển thị trang sửa bài viết với các thông tin load sẵn từ bài viết đã chọn

3 Người dùng sửathông tin bài viết và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu sửa bài viết cho server Thông báo sửa thành công và quay về trang quản lý bài viết

Bảng 19: Đặc tả use case Sửa bài viết

Use case Xóa bài viết

Use case: Xóa bài viết

Mô tả ngắn gọn: Xóa bài viết đã có tại trang web Điều kiện tiên quyết:

34.Chọn button/icon “Xóa” tại dòng của bài viết muốn sửa

2 Hệ thống hiển thị thông báo xác nhận có chắc chắn muốn xóa bài viết không

3 Người dùng xác nhận xóa

4 Hệ thống gửi yêu cầu xóa bài viết cho server Thông báo sửa thành công và quay về trang quản lý bài viết

Bảng 20: Đặc tả use case Xóa bài viết

Use case Quản lý user

Hình 6 : Chi tiết use case Quản lý user

Use case Hiển thị danh sách user

Use case: Hiển thị danh sách user

Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các user Điều kiện tiên quyết:

37.Chọn mục “User” tại trang bất kỳ trong Admin Dashboard

2 Hệ thống gửi yêu cầu lấy dữ liệu user từ Server

Bảng 21: Đặc tả use case Hiênr thị danh sách user

Mô tả ngắn gọn: Thêm user mới vào trang web Điều kiện tiên quyết:

41.Chọn “Thêm” trang quản lý user

2 Hệ thống hiển thị trang thêm user

3 Người dùng nhập thông tin user và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu thêm user cho server Thông báo thêm thành công và quay về trang quản lý user

Bảng 22: Đặc tả use case Thêm user

Mô tả ngắn gọn: Sửa user đã có tại trang web Điều kiện tiên quyết:

45.Chọn button/icon “Sửa” tại dòng của user muốn sửa

2 Hệ thống hiển thị trang sửa user với các thông tin load sẵn từ user đã chọn

3 Người dùng sửathông tin user và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu sửa user cho server Thông báo sửa thành công và quay về trang quản lý user

Bảng 23: Đặc tả use case Sửa user

Mô tả ngắn gọn: Xóa user đã có tại trang web Điều kiện tiên quyết:

49.Chọn button/icon “Xóa” tại dòng của user muốn sửa

2 Hệ thống hiển thị thông báo xác nhận có chắc chắn muốn xóa user không

4 Hệ thống gửi yêu cầu xóa user cho server Thông báo sửa thành công và quay về trang quản lý user

50 Không thể xóa user: nếu user đã từng đặt tour sẽ thông báo không thể xóa user

Bảng 24: Đặc tả use case Xóa user

Use case Quản lý tour

Hình 7 : Chi tiết use case Quản lý tour

Use case Hiển thị danh sách tour

Use case: Hiển thị danh sách tour

Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các tour Điều kiện tiên quyết:

53.Chọn mục “Tour” tại trang bất kỳ trong Admin Dashboard

2 Hệ thống gửi yêu cầu lấy dữ liệu tour từ Server

Bảng 25: Đặc tả use case Hiển thị danh sách tour

Mô tả ngắn gọn: Thêm tour mới vào trang web Điều kiện tiên quyết:

57.Chọn “Thêm” trang quản lý tour

2 Hệ thống hiển thị trang thêm tour

3 Người dùng nhập thông tin tour và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu thêm tour cho server Thông báo thêm thành công và quay về trang quản lý tour

Bảng 26: Đặc tả use case Thêm tour

Mô tả ngắn gọn: Sửa tour đã có tại trang web Điều kiện tiên quyết:

61.Chọn button/icon “Sửa” tại dòng của tour muốn sửa

2 Hệ thống hiển thị trang sửa tour với các thông tin load sẵn từ tour đã chọn

3 Người dùng sửathông tin tour và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu sửa tour cho server Thông báo sửa thành công và quay về trang quản lý tour

Bảng 27: Đặc tả use case Sửa tour

Mô tả ngắn gọn: Xóa tour đã có tại trang web Điều kiện tiên quyết:

65.Chọn button/icon “Xóa” tại dòng của tour muốn sửa

2 Hệ thống hiển thị thông báo xác nhận có chắc chắn muốn xóa tour không

4 Hệ thống gửi yêu cầu xóa tour cho server Thông báo sửa thành công và quay về trang quản lý tour

66 Không thể xóa tour: nếu tour đã từng được đặt sẽ thông báo không thể xóa tour

Bảng 28: Đặc tả use case Xóa tour

Use case Quản lý địa điểm

Hình 8 : Chi tiết use case Quản lý địa điểm

Use case Hiển thị danh sách địa điểm

Use case: Hiển thị danh sách địa điểm

Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các địa điểm Điều kiện tiên quyết:

69.Chọn mục “Destinations” tại trang bất kỳ trong Admin Dashboard

2 Hệ thống gửi yêu cầu lấy dữ liệu địa điểm từ Server

Bảng 29: Đặc tả use case Hiển hị danh sach địa điểm

Use case Thêm địa điểm

Use case: Thêm địa điểm

Mô tả ngắn gọn: Thêm địa điểm mới vào trang web Điều kiện tiên quyết:

73.Chọn “Thêm” trang quản lý tour

2 Hệ thống hiển thị trang thêm địa điểm

3 Người dùng nhập thông tin địa điểm và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu thêm địa điểm cho server Thông báo thêm thành công và quay về trang quản lý địa điểm

Bảng 30: Đặc tả use case Thêm địa điểm

Use case Sửa địa điểm

Use case: Sửa địa điểm

Mô tả ngắn gọn: Sửa địa điểm đã có tại trang web Điều kiện tiên quyết:

77.Chọn button/icon “Sửa” tại dòng của địa điểm muốn sửa

2 Hệ thống hiển thị trang sửa địa điểm với các thông tin load sẵn từ địa điểm đã chọn

3 Người dùng sửathông tin địa điểm và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu sửa địa điểm cho server Thông báo sửa thành công và quay về trang quản lý địa điểm

Bảng 31: Đặc tả use case Sửa địa điểm

Use case Xóa địa điểm

Use case: Xóa địa điểm

Mô tả ngắn gọn: Xóa địa điểm đã có tại trang web Điều kiện tiên quyết:

81.Chọn button/icon “Xóa” tại dòng của địa điểm muốn sửa

2 Hệ thống hiển thị thông báo xác nhận có chắc chắn muốn xóa địa điểm không

4 Hệ thống gửi yêu cầu xóa địa điểm cho server Thông báo sửa thành công và quay về trang quản lý địa điểm

82 Không thể xóa địa điểm: nếu địa điểm đã có tour sẽ thông báo không thể xóa địa điểm

Bảng 32: Đặc tả use case Xóa địa điểm

Use case Quản lý voucher

Hình 9 : Chi tiết use case Quản lý voucher

Use case Hiển thị danh sách voucher

Use case: Hiển thị danh sách voucher

Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các voucher Điều kiện tiên quyết:

85.Chọn mục “Voucher” tại trang bất kỳ trong Admin Dashboard

2 Hệ thống gửi yêu cầu lấy dữ liệu voucher từ Server

Bảng 33: Đặc tả use case Hiển thị danh sách voucher

Mô tả ngắn gọn: Thêm voucher mới vào trang web Điều kiện tiên quyết:

89.Chọn “Thêm” trang quản lý voucher

2 Hệ thống hiển thị trang thêm voucher

3 Người dùng nhập thông tin voucher và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu thêm voucher cho server Thông báo thêm thành công và quay về trang quản lý voucher

Bảng 34: Đặc tả use case Thêm voucher

Mô tả ngắn gọn: Sửa voucher đã có tại trang web Điều kiện tiên quyết:

93.Chọn button/icon “Sửa” tại dòng của voucher muốn sửa

2 Hệ thống hiển thị trang sửa voucher với các thông tin load sẵn từ voucher đã chọn

3 Người dùng sửathông tin voucher và nhấn “Hoàn tất”

4 Hệ thống gửi yêu cầu sửa voucher cho server Thông báo sửa thành công và quay về trang quản lý voucher

Bảng 35: Đặc tả use case Sửa voucher

Mô tả ngắn gọn: Xóa voucher đã có tại trang web Điều kiện tiên quyết:

97.Chọn button/icon “Xóa” tại dòng của voucher muốn sửa

2 Hệ thống hiển thị thông báo xác nhận có chắc chắn muốn xóa voucher không

4 Hệ thống gửi yêu cầu xóa voucher cho server Thông báo sửa thành công và quay về trang quản lý voucher

98 Không thể xóa voucher: nếu voucher đã từng được đặt sẽ thông báo không thể xóa voucher

Bảng 36: Đặc tả use case Xóa coucher

Use case Quản lý review

Hình 10 : Chi tiết use case Quản lý review

Use case Hiển thị danh sách review

Use case: Hiển thị danh sách review

Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các review Điều kiện tiên quyết:

101 Chọn mục “Review” tại trang bất kỳ trong Admin Dashboard

2 Hệ thống gửi yêu cầu lấy dữ liệu review từ Server

Bảng 37: Đặc tả use case Hiển thị danh sách review

Mô tả ngắn gọn: Xóa review đã có tại trang web Điều kiện tiên quyết:

104 Chọn mục “Review” tại trang bất kỳ trong Admin Dashboard

105 Chọn button/icon “Xóa” tại dòng của review muốn sửa

2 Hệ thống hiển thị thông báo xác nhận có chắc chắn muốn xóa review không

4 Hệ thống gửi yêu cầu xóa review cho server Thông báo sửa thành công và quay về trang quản lý review

Bảng 38: Đặc tả use case Xóa review

Use case Quản lý, xác nhận đơn đặt tour

Hình 11 : Chi tiết use case Quản lý xác nhận đơn đặt tour

Use case Hiển thị danh sách đơn đặt tour

Use case: Hiển thị danh sách đơn đặt tour

Mô tả ngắn gọn: Hiển thị bảng chứa danh sách tất cả các đơn đặt tour Điều kiện tiên quyết:

108 Chọn mục “Booking” tại trang bất kỳ trong Admin Dashboard

2 Hệ thống gửi yêu cầu lấy dữ liệu đơn đặt tour từ Server

Bảng 39: Hiển thị danh sách đơn đặt tour

Use case Sửa đơn đặt tour

Use case: Sửa đơn đặt tour

Mô tả ngắn gọn: Sửa đơn đặt tour đã có tại trang web Điều kiện tiên quyết:

111 Chọn mục “Booking” tại trang bất kỳ trong Admin Dashboard

112 Chọn button/icon “Sửa” tại dòng của đơn đặt tour muốn sửa

6 Hệ thống hiển thị trang sửa đơn đặt tour với các thông tin load sẵn từ đơn đặt tour đã chọn

7 Người dùng chỉ có thể sửa trạng thái đơn đặt tour và nhấn “Hoàn tất”

8 Hệ thống gửi yêu cầu sửa đơn đặt tour cho server Thông báo sửa thành công và quay về trang quản lý đơn đặt tour

Bảng 40: Đặc tả use case Sửa đơn đặt tour

Thiết kế dữ liệu

3.1Danh sách các collection dữ liệu:

1 Blog Chứa các document là dữ liệu các bài viết

2 Booking Chứa các document là dữ liệu các đơn đặt tour

3 Destination Chứa các document là dữ liệu các địa điểm

4 Review Chứa các document là dữ liệu các đánh giá

5 Role Chứa các document là dữ liệu các quyền của user

6 Tour Chứa các document là dữ liệu các tour

7 User Chứa các document là dữ liệu các user

8 Voucher Chứa các document là dữ liệu các voucher

Bảng 41: Danh sách collection dữ liệu

3.2Mô tả từng collection dữ liệu

T Tên thuộc tính Kiểu dữ liệu Diễn giải

1 _id String Mã duy nhất của bài viết

2 Title String Tiêu đề bài viết

3 Content String Nội dung của bài viết

4 Tag String Chủ đề của bài viết

5 createAt DateTime Ngày giờ tạo bài viết

6 Image String Đường dẫn tới hình ảnh minh họa của bài viết

String Nội dung chi tiết của bài viết

Bảng 42: Mô tả collection blog

1 _id String Mã duy nhất của đơn đặt tour

2 userId String Mã của user đã đặt tour

3 tourId String Mã của tour được đặt

4 voucherId String Mã của phiếu giảm giá được áp dụng

5 Status String Trạng thái của đơn hàng

Bảng 43: Mô tả collection booking

1 _id String Mã duy nhất của địa điểm

2 name String Tên của địa điểm

3 description String Mô tả ngắn gọn địa điểm

4 Location String Thành phố, quốc gia của địa điểm

5 Main_img String Đường dẫn tới hình ảnh chính của địa điểm

6 Img String[] Chứa danh sách hình ảnh của điểm đến

Bảng 44: Mô tả collection destination

1 _id String Mã duy nhất của review

2 userId String Mã của user đã viết review

String Mã của địa điểm được đánh giá

4 Rating Int Số điểm đánh giá

5 Comment String Nội dung của đánh giá

6 createAt DateTime Ngày giờ tạo đánh giá

Bảng 45: Mô tả collection review

1 _id String Mã duy nhất của role

2 Name String Tên của role

Bảng 46: Mô tả collection review

1 _id String Mã duy nhất của tour

2 tourName String Tên của tour

3 destinationI d String Mã của địa điểm tour thuộc về

4 dateFrom DateTime Ngày giờ khởi hành tour

5 dateTo DateTime Ngày giờ kết thúc tour

6 Schedule String Lịch trình di chuyển

7 Price Double Giá gốc của tour

Bảng 47: Mô tả collection tour

1 _id String Mã duy nhất của đơn đặt tour

2 Username String Tên tài khoản của user

3 Password String Mật khẩu của user

String Số điện thoại của user

5 Email String Email của user

6 fullName String Họ tên đầy đủ của user

7 roleId String Mã của role của user đó

Bảng 48: Mô tả collection user

1 _id String Mã duy nhất của voucher

2 Number String Tổng số voucher

3 Value String Giá trị của voucher

4 Start DateTime Ngày bắt đầu áp dụng của voucher

5 End DateTime Ngày kết thúc áp dụng của voucher

Bảng 49: Mô tả collection Voucher

Thiết kế hệ thống

- Tầng Presentation: hiển thị các thành phần giao diện để tương tác với người dùng như tiếp nhận thông tin, thông báo lỗi, …

- Tầng Business Logic: thực hiện các hành động nghiệp vụ của phần mềm như tính toán, đánh giá tính hợp lệ của thông tin, … Tầng này còn di chuyển, xử lí thông tin giữa 2 tầng trên dưới

- Tầng Data: nơi lưu trữ và trích xuất dữ liệu từ các hệ quản trị CSDL hay các file trong hệ thống Cho phép tầng Business logic thực hiện các truy vấn dữ liệu

- Client: Tiếp nhận, gửi các request từ người dùng cho Server

- Server: Nhận các request, xử lý, trả về kết quả cho Client

4.2Chi tiết các thành phần trong hệ thống

- Giao diện người dung: Cung cấp một giao diện cho người dùng thực hiện các thao tác nhập/xuất dữ liệu Đồng thời, trong lúc sử dụng, thông báo cho người dùng nếu có lỗi xảy ra

- Mô hình 3 lớp Tiếp nhận yêu cầu từ giao diện người dùng, kiểm tra tính đúng đắn theo ràng buộc và thực thi yêu cầu nếu điều kiện được đáp ứng

- Cơ sở dữ liệu Lưu trữ toàn bộ dữ liệu liên quan đến thông tin trung tâm.

Thiết kế giao diện

Hình 12: Giao diện trang home

Hình 13: Giao diện trang Blog

5.3Giao diện xem chi tiết bài viết

Hình 14: Giao diện xem chi tiết bài viết

Hình 15: Giao diện trang Introduction

Hình 16: Giao diện trang Support

Hình 17: Giao diện trang Destination

5.7Giao diện chi tiết tour

Hình 18: Giao diện chi tiết tour

Hình 19: Giao diện đặt tour

Hình 20: Giao diện trang Tìm kiếm đơn đặt tour

5.10 Thiết kế trang Admin Dashboard

Hình 21: Bản thiết kế trang Admin Dashboard

5.11 Thiết kế trang quản lý đơn đặt tour

Hình 22: Bản thiết kế trang Quản lý đơn đặt tour

Cài đặt và kiểm thử

T Chức năng Độ hoàn thành Ghi chú

1 Đăng nhập 70% Hoàn thành FrontEnd,

BackEnd lỗi chưa chạy được

2 Đăng ký 70% Hoàn thành FrontEnd,

BackEnd lỗi chưa chạy được

7 Tra cứu tour đã đặt 100%

8 Đánh giá 60% Hoàn thành BackEnd Phần

FrontEnd chưa có giao điện để thực hiện gửi bình luận

9 Xem thống kê báo cáo 0%

15 Quản lý xác nhận đơn đặt tour 50%

Bảng 50: Kết quả cài đặt

Source code

Link github BE: Vippro67/Project1_BE: Backend for Project1 - DreamHoliday (github.com)Link github FE: Vippro67/Project1_FE: Frontend for Project1 - DreamHoliday (github.com)

Tìm hiểu về ReactJS

Giới thiệu

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi

Facebook Nó ra đời với mục đích giúp cho việc xây dựng các ứng dụng web và mobile hiện đại trở nên đơn giản hơn và tiện lợi hơn.

ReactJS được phát triển dựa trên mô hình component, cho phép các nhà phát triển tạo ra các thành phần độc lập có tính tái sử dụng cao Các component này có thể được sử dụng để xây dựng các giao diện người dùng phong phú và đa dạng, từ những trang web tĩnh đến các ứng dụng động phức tạp ReactJS cung cấp một cách tiếp cận khác biệt so với các thư viện JavaScript khác, bằng cách sử dụng Virtual DOM (Document Object Model) để tối ưu hiệu suất của ứng dụng Virtual DOM là một phiên bản tạm thời của DOM, cho phép

ReactJS so sánh sự khác biệt giữa Virtual DOM cũ và mới, và chỉ render lại các thành phần cần thiết, giảm thiểu thời gian và tài nguyên của ứng dụng

Ngoài ra, ReactJS cũng hỗ trợ quản lý state của ứng dụng một cách dễ dàng hơn, với các tính năng như props, state và lifecycle methods Props và state được sử dụng để lưu trữ các giá trị và dữ liệu của component, trong khi lifecycle methods giúp cho các component tự động render lại mỗi khi có sự thay đổi trong state của nó.

ReactJS cũng được tích hợp với các công cụ và thư viện khác để giúp người lập trình phát triển ứng dụng một cách linh hoạt và tiện lợi hơn Ví dụ, Redux là một thư viện quản lý state phổ biến trong ReactJS, giúp cho việc quản lý và đồng bộ hóa các thành phần trong ứng dụng trở nên đơn giản hơn.

Bên cạnh đó, ReactJS còn có khả năng tương thích với các nền tảng khác như React Native, cho phép người lập trình sử dụng cùng một codebase để phát triển cả ứng dụng web và mobile, tiết kiệm thời gian và chi phí cho quá trình phát triển.

Từ các ưu điểm vượt trội như tính tái sử dụng cao, hiệu suất tối ưu và khả năng tương thích với nhiều nền tảng, ReactJS đã trở thành một trong những thư viện JavaScript phổ biến nhất hiện nay Nó được sử dụng rộng rãi trong việc xây dựng các ứng dụng web và mobile, từ các startup mới đến các công ty lớn Một số ví dụ nổi tiếng về các ứng dụng được xây dựng bằng ReactJS bao gồm Facebook, Instagram, Netflix, Airbnb và Uber.

ReactJS cũng được đánh giá cao về cộng đồng phát triển và tài liệu hỗ trợ Nó có một cộng đồng đông đảo và tích cực, với hàng ngàn các thư viện và công cụ được phát triển và chia sẻ miễn phí trên các trang web như npm và

GitHub Ngoài ra, ReactJS cũng có rất nhiều tài liệu học tập và giải đáp thắc mắc trực tuyến, từ các trang web học tập như Udemy, Coursera và Pluralsight đến các diễn đàn như Stack Overflow và Reddit.

Với những ưu điểm vượt trội và sự phổ biến ngày càng tăng, ReactJS đã trở thành một trong những công nghệ quan trọng nhất trong lĩnh vực phát triển web và mobile hiện nay Việc nắm vững ReactJS sẽ giúp cho các lập trình viên có thể xây dựng các ứng dụng đa dạng, hiệu quả và tiện lợi hơn bao giờ hết.

Các thành phần chính trong ReactJS

ReactJS xây dựng ứng dụng bằng cách chia nhỏ chúng thành các thành phần độc lập và tái sử dụng được gọi là components Components là các khối xây dựng giao diện có thể nhúng vào nhau để tạo thành giao diện người dùng hoàn chỉnh Các components trong ReactJS có thể là class-based component hoặc function component.

- Class-based components: Là các thành phần được định nghĩa bằng cách tạo một lớp con của React.Component và ghi đè các phương thức của lớp cha để định nghĩa giao diện người dùng.

- Function components: Là các thành phần được định nghĩa bằng cách sử dụng hàm JavaScript và trả về JSX để xác định giao diện người dùng.

ReactJS sử dụng một cấu trúc dữ liệu gọi là Virtual DOM để biểu diễn giao diện người dùng Virtual DOM là một bản sao nhẹ của DOM thực sự trong trình duyệt, và ReactJS sử dụng nó để hiệu quả cập nhật và tái render các thành phần khi dữ liệu thay đổi Việc sử dụng Virtual DOM giúp tăng hiệu suất và tối ưu quá trình rendering trong ReactJS.

Virtual DOM sẽ so sánh những thay đổi của nó và DOM cũ Từ đó chỉ re-rendered lại các thành phần có thay đổi thay vì render lại cả trang web.

JavaScript XML một phần mở rộng cú pháp cho JavaScript, cho phép viết mã HTML trong các thành phần React JSX giúp kết hợp mã JavaScript và HTML một cách dễ dàng và tạo ra mã nguồn có cấu trúc rõ ràng hơn ReactJS biên dịch JSX thành mã JavaScript thông thườngđể thực thi.

Hình 24: Ví dụ khi sử dụng JSX

Hình 25: Ví dụ khi không sử dụng JSX

Qua ví dụ trên có thể thấy JSX giúp code trở nên trực quan hơn, dễ tiếp cận với những người đã học qua HTML hoặc mới tiếp cận và sử dụng reactJS.

ReactJS quản lý trạng thái của ứng dụng thông qua một đối tượng gọi là state State có thể là dữ liệu ban đầu cho trang web, cũng có thể thay đổi làm dữ liệu mới khi người dùng tương tác Khi state thay đổi, ReactJS sẽ tự động cập nhật giao diện người dùng tương ứng State được tạo trong component, nó lấy dữ liệu ban đầu của nó trong phương thức constructor()State có thể thay đổi, React sử dụng phương thức setState() để cập nhật đối tượng của state State chỉ có thể được thay đổi bởi component chứa trạng thái.

Hình 26: Ví dụ khai báo và thay đổi state

Props (viết tắt của "properties") là cách truyền dữ liệu từ một thành phần cha (parent component) đến một thành phần con (child component) trong ReactJS Props giúp truyền thông tin từ nơi này sang nơi khác trong cây thành phần (component tree) và giữ cho các thành phần có thể tương tác và truyền dữ liệu cho nhau.

Hình 27: Ví dụ truyền props từ component cha

Hình 28: Ví dụ về nhận props từ component cha

ReactJS cung cấp các phương thức vòng đời cho các thành phần, cho phép chúng ta can thiệp vào các giai đoạn quan trọng trong quá trình của thành phần, như khi được khởi tạo, cập nhật hoặc huỷ bỏ Việc sử dụng lifecycle methods giúp kiểm soát logic ứng dụng và tương tác với các sự kiện xảy ra trong quá trình render.

Trong life cycle có 3 quá trình chính bao gồm Mouting(khởi tạo), Updating(cập nhật) và Unmouting(hủy bỏ)

2.7React route dom Đây là một thư viện bên thứ ba phổ biến trong cộng đồng ReactJS, được sử dụng để quản lý định tuyến trong ứng dụng web React Router cho phép chúng ta tạo các route (đường dẫn) và điều hướng giữa các thành phần React một cách dễ dàng.

Hình 29: Ví dụ về react route dom

SSR là quá trình tạo và render giao diện người dùng trên máy chủ trước khi gửi đến trình duyệt Khi yêu cầu được gửi từ trình duyệt, máy chủ sẽ tạo và trả về trang HTML đã được render hoàn chỉnh cho trình duyệt.

Với SSR, ReactJS được sử dụng để xây dựng giao diện người dùng trên máy chủ, thông qua thư viện như Next.js hoặc Gatsby.js React components được render thành HTML tĩnh, kèm theo dữ liệu ban đầu từ máy chủ.

SSR giúp tối ưu hóa SEO, tăng khả năng tương tác trên trình duyệt đầu tiên và cung cấp trải nghiệm nhanh hơn cho người dùng Tuy nhiên, nó có thể tốn nhiều tài nguyên máy chủ và thời gian render ban đầu.

CSR là quá trình tạo và render giao diện người dùng trên trình duyệt Khi yêu cầu được gửi từ trình duyệt, máy chủ chỉ trả về một tệp HTML trống và tập tin JavaScript của ứng dụng React.

Với CSR, ReactJS chạy trên trình duyệt và sử dụng Virtual DOM để tạo và cập nhật giao diện người dùng dựa trên dữ liệu được truy vấn từ máy chủ hoặc các API bên ngoài.

Spring boot

Một số component

- Khái niệm: Spring Boot starter là các module giúp đơn giản hóa việc cấu hình và sử dụng các dependencies trong ứng dụng Spring Boot Starter cung cấp một tập hợp các dependencies được cấu hình sẵn cho một loại ứng dụng cụ thể và các dependencies được tự động phát hiện và tự động cấu hình khi được thêm vào.

- Tính năng và ưu điểm:

 Giúp đơn giản hóa quá trình cấu hình các dependencies.

 Tự động cấu hình các dependencies một cách chuẩn xác và hiệu quả.

 Giảm thiểu thời gian và công sức khi phải cấu hình các dependencies một cách thủ công.

- Cách sử dụng: Để sử dụng Spring Boot starter, chỉ cần thêm dependency của starter vào file pom.xml của ứ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 đó, các dependencies liên quan đến RESTful web service sẽ được tự động cấu hình và sẵn sàng để sử dụng trong ứng dụng Spring Boot.

Hình 30: Ví dụ sử dụng springboot starter

- Khái niệm: Mybatis-Plus là một framework giúp đơn giản hóa việc sử dụng

Mybatis trong ứng dụng Spring Boot Mybatis-Plus cung cấp các tính năng hỗ trợ các hoạt động CRUD và pagination một cách dễ dàng và tiện lợi.

 Giúp đơn giản hóa quá trình tạo các truy vấn SQL cho việc thao tác với

 Cung cấp các tính năng hỗ trợ cho các hoạt động CRUD và pagination.

 Tự động cấu hình các truy vấn SQL cho các hoạt động CRUD.

- Cách sử dụng: Để sử dụng Mybatis-Plus, ta cần thêm dependency của Mybatis- Plus vào file pom.xml của ứng dụng Spring Boot Sau đó, ta sử dụng các interface được cung cấp bởi Mybatis-Plus để thực hiện các hoạt động CRUD và pagination trên các đối tượng trong ứng dụng.

- Ví dụ dưới đây là khởi tạo một nơi lưu trữ các đối tượng User extends từ interface của mybatis plus

Hình 31: Ví dụ sử dụng interface của mybatis plus

Sau khi sử dụng mybatis plus có thể truy vấn các kết quả cần thiết bằng cách sử dụng các hàm được cung cấp

Hình 32: Ví dụ code sử dụng mybatis plus

Kết quả của các hàm tương ứng với câu lệnh truy vấn dưới.

Hình 33: Câu lênh SQL tương ứng khi sử dung mybatis plus

- Khái niệm: Spring Cache là một framework cung cấp các tính năng hỗ trợ cho việc caching dữ liệu trong ứng dụng Spring Boot Spring Cache cung cấp một cách tiếp cận và giúp đơn giản hóa việc sử dụng caching trong ứng dụng.

 Giảm thời gian phản hồi của ứng dụng và tăng hiệu suất bằng cách cache dữ liệu.

 Tăng tính khả dụng và độ tin cậy của ứng dụng bằng cách giảm tải cho

 Cung cấp các tính năng hỗ trợ cho việc quản lý và điều chỉnh cache.

 @Cacheable: Được sử dụng để đánh dấu một phương thức hoặc một phần tử dữ liệu có thể được lưu trữ trong cache Khi phương thức được gọi hoặc dữ liệu được yêu cầu, Spring Boot sẽ kiểm tra cache trước để xem liệu giá trị tương ứng đã tồn tại hay không Nếu có, giá trị sẽ được lấy từ cache thay vì thực hiện lại phương thức hoặc truy vấn dữ liệu.

 @CacheEvict: Xóa giá trị tương ứng trong cache để đảm bảo dữ liệu mới nhất được truy xuất trong lần tiếp theo.

 @CachePut: Thay thế giá trị hiện có (nếu có) hoặc thêm mới vào cache.

- Cách sử dụng: Để sử dụng Spring Cache, ta cần sử dụng các annotation được cung cấp bởi Spring Cache, chẳng hạn như @Cacheable, @CachePut,

@CacheEvict, để áp dụng caching cho các phương thức trong ứng dụng Ta cũng có thể tùy chỉnh các cấu hình cho caching trong file application.properties của ứng dụng.

- Khái niệm: RabbitMQ là một message broker được sử dụng để xử lý và truyền tải các message giữa các ứng dụng Có thể giúp cho các hệ thống phần mềm khác nhau giao tiếp, trao đổi dữ liệu với nhau Spring Boot RabbitMQ cung cấp các tính năng hỗ trợ cho việc sử dụng RabbitMQ trong ứng dụng Spring Boot.

 Giúp đơn giản hóa việc sử dụng RabbitMQ trong ứng dụng Spring Boot.

 Cung cấp các tính năng hỗ trợ cho việc quản lý và điều chỉnh message queues.

 Một số các tính năng 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 của RabbitMQ và Spring Boot RabbitMQ vào file pom.xml của ứng dụng

Spring Boot Sau đó, ta sử dụng các annotation và các API được cung cấp bởi Spring Boot RabbitMQ để thực hiện các hoạt động như publish message, subscribe message và xử lý message trong ứng dụng.

- Khái niệm: Elasticsearch là một công cụ tìm kiếm và phân tích dữ liệu mã nguồn mở Nó cực kì mạnh mẽ trong việc phục vụ tìm kiếm dữ liệu nhưng lại yếu trong các thao tác CRUD cơ bản nên thường được sử dụng song song với các thao tác của Database chính Spring Boot Elasticsearch cung cấp các tính năng hỗ trợ cho việc sử dụng Elasticsearch trong ứng dụng Spring Boot.

 Giúp đơn giản hóa việc tìm kiếm và phân tích dữ liệu trong ứng dụng.

 Cung cấp các tính năng hỗ trợ cho việc tạo và quản lý các index và document trong Elasticsearch

- Cách sử dụng: Để sử dụng Spring Boot Elasticsearch, ta cần thêm dependency của Elasticsearch và Spring Boot Elasticsearch vào file pom.xml của ứng dụng Spring Boot

- Sau đó, ta sử dụng các API được cung cấp bởi Spring Boot Elasticsearch để thực hiện các hoạt động như tạo index, thêm document, tìm kiếm và xóa document trong Elasticsearch.

- Khái niệm: Docker là một nền 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ột môi trường nhẹ và tách biệt để chạy các ứng dụng và các thành phần liên quan của chúng Spring Boot

Docker cung cấp các tính năng hỗ trợ cho việc sử dụng Docker trong ứng dụng Spring Boot.

 Giúp đơn giản hóa việc triển khai ứng dụng trong môi trường container.

 Cung cấp các tính năng hỗ trợ cho việc quản lý và điều chỉnh container.

 Images: nơi để lưu trữ các containers, chúng được tạo từ các hướng dẫn viết trong dockerfile

 Dockerfile: Dockerfile là một tệp văn bản chứa một 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 của images và tự động hóa quá trình xây dựng Images.

- Cách sử dụng: Để sử dụng Spring Boot Docker, ta cần tạo một Dockerfile cho ứng dụng Spring Boot để build image Sau đó, ta có thể sử dụng các tính năng của Docker để triển khai và quản lý các container chạy ứng dụng Spring Boot.

- Khái niệm: ELK là một giải pháp mã nguồn mở được sử dụng để xử lý và phân tích log.ELK là từ viết tắt của Elaticsearch, Logstash và Kibana, đây là ba công cụ nguồn mở thường được sử dụng cùng nhau để phân tích và giám sát nhật ký Spring Boot ELK cung cấp các tính năng hỗ trợ cho việc sử dụng ELK trong ứng dụng Spring Boot.

 Giúp đơn giản hóa việc xử lý và phân tích log trong ứng dụng.

 Cung cấp các tính năng hỗ trợ cho việc quản lý và điều chỉnh ELK stack.

 Logstash: một kênh xử lý dữ liệu thu thập, xử lý và chuyển đổi logs cũng như các nguồn dữ liệu khác trước khi gửi chúng đến Elaticsearch để lưu trữ

 Elaticsearch: được sử dụng để lưu trữ và lập chỉ mục(index) các bản ghi được tạo bởi ứng dụng Spring Boot cung cấp từ logstash

Định dạng
Số trang	65
Dung lượng	8,94 MB