Đồ án tìm HIỂU REACT SPRING BOOT và xây DỰNG ỨNG DỤNG MINH họa

Kết quả hướng tới Với đề tài này, nhóm đề ra hai mục tiêu chính: ● Đối với cá nhân các thành viên trong nhóm: mở rộng kiến thứccủa thành viên trong nhóm về ReactJS và Spring Boot thôngqu

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

-BÁO CÁO ĐỒ ÁN 1

Đề 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:

Thành phố Hồ Chí Minh, ngày 1 tháng 7 năm 2021

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Để thực hiện tốt đề tài này, với tất cả sự kính trọng, nhóm em xinkính gửi lời cảm ơn đến thầy Mai Trọng Khang và thầy Nguyễn Công Hoan

đã trực tiếp giảng dạy, truyền đạt và hỗ trợ cho nhóm trong quá trìnhnghiên cứu để nhóm em hoàn thành đề tài này

Trong quá trình thực hiện, cũng như quá trình làm báo cáo, chúng

em khó tránh khỏi những sai sót, nhóm em hi vọng thầy bỏ qua cũng nhưchúng em rất mong nhận được ý kiến đóng góp của thầy để có thể họcthêm được nhiều kinh nghiệm để hoàn thành tốt những đồ án lần sau Mộtlần nữa 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 7 năm 2021

I GIỚI THIỆU TỔNG QUAN 1

5 Một số thư viện - package phổ biến được sử dụng trong ReactJS 9

3 Một số thư viện được sử dụng phổ biến với Spring Boot: 15

3.6 Swagger: 17

4 Xây dựng Codebase cho ứng dụng Spring Boot: 17

2.3.5 Tạo giỏ hàng và đặt hàng nhanh chóng 262.3.6 Tạo danh sách các sản phẩm yêu thích 272.3.7 Xem thông tin chi tiết sản phẩm 272.3.8 Cập nhật các loại thông tin cá nhân 282.3.9 Cập nhật các sản phẩm trending trong thời gian hiện tại 29

2.4.1 Tính năng gợi ý các dòng sản phẩm liên quan 292.4.2 Tính năng đánh giá chất lượng sản phẩm 292.4.3 Tính năng theo dõi các đơn hàng 302.4.4 Tính năng tạo giỏ hàng và thanh toán 302.4.5 Tính năng tạo danh sách sản phẩm yêu thích 30

I GIỚI THIỆU TỔNG QUAN

2.1 Giới thiệu đề tài

Với các doanh nghiệp trong thời đại công nghệ, website là công

cụ vô cùng cần thiết Nó mang lại hàng loạt tiện ích tuyệt vời, giúpviệc kinh doanh trở nên dễ dàng và nhanh chóng hơn bao giờ hết

Do đó, việc thiết kế, phát triển một ứng dụng web hỗ trợ cho cácdoanh nghiệp tăng trưởng mạnh mẽ

Hiện nay, có rất nhiều framework hoặc thư viện hỗ trợ việc pháttriển một ứng dụng web một cách nhanh chóng, tiện lợi nhưng vẫnđảm bảo tính bảo mật thông tin khách hàng

● Xét về mặt thiết kế bố cục: ReactJS giúp các nhà phát triển

tạo ra một giao diện website theo hệ thống các component dễdàng quản lý, bảo trì và mở rộng ứng dụng Các thư viện hỗ trợcho thư viện này có thể giúp các nhà phát triển tạo ra một trangweb thân thiện với người dùng, giao diện thu hút khách hàng

● Xét về phía máy chủ: Java là một ngôn ngữ lập trình phổ biến

được các nhà phát triển sử dụng Sử dụng Java, các nhà pháttriển có thể tận dụng rất nhiều điểm mạnh mà nó đem lại như

“viết một lần, thực thi ở khắp nơi" - đây là câu nói khiến Javavẫn còn phổ biến cho đến tận bây giờ Tuy nhiên, để cấu hình

một ứng dụng Java thì cần rất nhiều bước, do đó, Spring Boot

ra đời nhằm rút ngắn thời gian cài đặt ứng dụng, các nhà pháttriển sẽ tập trung hơn vào nghiệp vụ hơn là 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ứutổng quan cách thức hoạt động của ReactJS và Spring Boot Đồngthời, nhóm áp dụng các nghiên cứu trên vào một ứng dụng thực tế

để giúp nhóm có thể hiểu sâu hơn các kiến thức đã tìm hiểu

2.3 Nội dung nghiên cứu

Nhóm sẽ tiến hành nghiên cứu chi tiết về cách thức hoạt động,

ưu - khuyết điểm cũng như các thư viện - tính năng - package liênquan đến ReactJS và Spring Boot

2.4 Kết quả hướng tới

Với đề tài này, nhóm đề ra hai mục tiêu chính:

● Đối với cá nhân các thành viên trong nhóm: mở rộng kiến thứccủa thành viên trong nhóm về ReactJS và Spring Boot thôngqua quá trình tìm hiểu và áp dụng vào ứng dụng thực tế Cáckiến thức tìm hiểu được thông qua đồ án thúc đẩy nhóm pháttriển thêm các ứng dụng khác bằng ReactJS và Spring Boot.Đồng thời, nhóm học được cách nghiên cứu và sử dụng mộtframework mới cần trải qua quá trình gì nhằm giúp nhóm dễdàng tiếp xúc với các công nghệ mới hơn trong tương lai

● Đối với các lập trình viên dùng đồ án nghiên cứu này làm tàiliệu tham khảo: thông qua tài liệu nghiên cứu và ứng dụngnhóm đã xây dựng, các lập trình viên khác có thể dễ dàng địnhhướng cần phải tìm hiểu gì khi sử dụng ReactJS và SpringBoot Đồng thời nhóm có ghi một số khái niệm, kiến thức cơbản và thư viện phổ biến được đề xuất bởi cộng đồng khi sửdụng ReactJS và Spring Boot, các lập trình viên khác có thểtham khảo và tìm hiểu sâu hơn

II REACT

1 Giới thiệu chung

React là một thư viện Javascript, được phát triển bởi 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 bằng React JS sẽ được tạo bởinhiều thành phần nhỏ (component), trong đó, output của mỗi component làmột đoạn code HTML nhỏ và có thể tái sử dụng xuyên suốt ứng dụng.Component được xem là từ khoá chính (key concept) khi nhắc đến React.Mỗi component có thể chứa các component nhỏ hơn, do đó, một ứng dụngvới cấu trúc phức tạp sẽ được hình thành từ nhiều component con Đồngthời, chỉ cần định nghĩa component con 1 lần và có thể sử dụng ở nhiềunơi

Một lợi thế khi tìm hiểu ReactJS chính là sau khi có đầy đủ kiến thức

cơ bản về ReactJS, lập trình viên có thể dễ dàng học tiếp React Native framework hỗ trợ xây dựng ứng dụng di động đa nền tảng

-2 Các từ khoá chính (key concepts)

2.1 Component-based approach

Đây là concept chính của React Ứng dụng được chia thànhcác component nhỏ, điều này giúp lập trình viên dễ dàng tái sử dụngcác component này và có thể quản lý, bảo trì và phát triển ứng dụngmột cách dễ dàng Concept này giúp đỡ rất nhiều trong việc quản lýmột ứng dụng lớn và phức tạp, bởi lẽ khi xảy ra lỗi, các lập trình viênchỉ cần thay đổi và chỉnh sửa trong một component nhỏ mà khôngảnh hưởng đến code của toàn bộ ứng dụng

● Ứng dụng React được tạo bởi rất nhiều component con, mỗicomponent này đều chứa một state và React sẽ theo dõi trạngthái của state Khi state của một component thay đổi, React sẽ

so sánh sự khác nhau giữa phiên bản hiện tại và trước đóthông qua thuật toán Diff, đồng thời thực hiện cập nhật trênvirtual DOM

● Một khi nắm được component nào thay đổi, React sẽ tiến hànhcập nhật duy nhất component đó trên DOM Điều này đã hạnchế được việc cập nhật toàn bộ component trên DOM một cáchthường xuyên, tăng hiệu năng của ứng dụng web

b State:

● Nếu props dùng để hứng dữ liệu từ component cha thì stateđược dùng để lưu dữ liệu của chính component đó với giá trị cóthể thay đổi phụ thuộc vào logic bên trong component đó

● Tuy nhiên, khi sử dụng thao tác cập nhật giá trị của state, lậptrình viên phải chú ý nguyên tắc mỗi khi state thay đổi,component sẽ được render lại Do đó, cần cân nhắc trong việcthay đổi giá trị state nhằm tránh việc render liên tục, giảm hiệusuất ứng dụng

Vòng đời của một component được chia làm 3 nhóm chính:

a Mounting: Khi một component được khởi tạo, nó sẽ thực thi các

câu lệnh dưới đây theo thứ tự nhằm thêm component đó vàoDOM để render

- constructor() được sử dụng để khởi tạo các state chocomponent, do đó, tránh cập nhật giá trị state tại hàm này

vì sẽ gây render liên tục

- render()

- componentDidMount() là nơi thực hiện các side effectnhư gọi api lấy dữ liệu, thực hiện một số thao tác lênDOM,

b Updating: Khi state hoặc props của component thay đổi, các

hàm trong nhóm này sẽ được thực thi và quyết định xem cócần phải render lại UI hay không Trường hợp UI không đượcre-render khi hàm shouldComponentUpdate() trả về giá trịfalse

c Unmounting: Khi một component bị xoá khỏi DOM, các hàm

thuộc nhóm này sẽ được thực thi Đây nơi là để xử lý các biếnthời gian như SetInterval, ngắt các network request

2.5 React Hook

Đối với các lập trình viên vừa tiếp xúc với JS, việc sử dụngclass component và các phương thức trong lifecycle rất dễ gây ra lỗi.Trong khi đó, các functional component thì không thể sử dụng state

và lifecycle nhưng lại dễ sử dụng và dễ học hơn class componentcho những người mới bắt đầu Do vậy, React Hook ra đời nhằm giảiquyết các vấn đề trên, các hooks cho phép kết nối state và cáclifecycle vào functional component

Ở đồ án này, nhóm đã sử dụng React Hook để các componenttrở nên gọn nhẹ, dễ đọc, dễ sửa chữa và mở rộng

3 Cách thức hoạt động của ReactJS

ReactJS thường được sử dụng để tạo ra giao diện cho các SPA single page application Khi sử dụng ReactJS, ứng dụng web được chiathành từng component nhỏ, mỗi component chứa hai thành phần chính làstate và props Dữ liệu được truyền từ component cha sang con gọi làprops, trong khi đó state được định nghĩa là dữ liệu của riêng component

-đó Component chỉ được re-render khi state của nó thay đổi, chính vì lý donày, ứng dụng không render lại toàn bộ trang web mà chỉ re-render

component mà người dùng thao tác lên Chính vì nguyên tắc hoạt độngtrên cùng với các component chỉ định nghĩa một lần mà có thể sử dụng ởnhiều nơi, ReactJS đã tăng hiệu suất của ứng dụng web và trở thành thưviện phát triển giao diện được nhiều người sử dụng.

4 Lý do ReactJS được ưa chuộng

Một số lợi ích của ReactJS khiến nhóm quyết định chọn thư viện này

để tìm hiểu trong đồ án

● So với đối thủ cạnh tranh là Angular, React có một số điểm nổi trộihơn khiến nhóm quyết định tìm hiểu và áp dụng React trong đồ ánnày

○ Về mặt hiệu suất: React sử dụng công nghệ DOM ảo còn

Angular thì sử dụng DOM thường Với DOM thường, Angular

sử dụng DOM API để tìm và cập nhật các element, hiệu suấtcủa ứng dụng sẽ giảm đi đáng kể khi phải liên tục tìm và cậpnhật DOM Chính vì thế, DOM ảo ra đời giải quyết bài toán cậpnhật DOM sao cho hiệu năng tốt nhất Tất cả thay đổi trongReact sẽ được cập nhật trong DOM ảo, React sử dụng thuậttoán Diff để kiểm tra sự khác biệt giữa DOM ảo và DOM gốc rồicập nhật những thay đổi tại những vị trí cần thiết

○ Về mặt cộng đồng hỗ trợ: Mặc dù còn non trẻ, React.js đã đạt

được 163 nghìn sao và 32,7 nghìn lần Fork trên Github và vượtqua AngularJS một cách rõ ràng khi nó xoay quanh 59,5 nghìnSao và 1,578 nghìn Người đóng góp Do đó, cộng đồng hỗ trợReactJS rất mạnh, điều này có thể hỗ trợ nhóm trong việc tìm

và sửa chữa lỗi

● JSX: Để tạo ra giao diện web bằng ReactJS, các nhà phát triển phải

sử dụng câu lệnh React.createElement, tuy nhiên điều này làm chofile thiết kế giao diện trở nên khó quản lý, sửa lỗi và mở rộng Do đó,JSX ra đời, cho phép viết mã code HTML trong ứng dụng React vàbiển đổi các HTML tags thành các React elements Chính vì thế, JSX

đã hỗ trợ các lập trình viên rất tốt trong việc xây dựng giao diện ứngdụng web.

● Để khởi tạo 1 ứng dụng React chỉ cần dùng lệnh “create-react-app"

mà không cần tốn quá nhiều thời gian cho việc config

● Component: các component được tách thành từng file nhỏ và có thểtái sử dụng, vì vậy có thể tránh được việc code bị trùng nhau, dễ sửachữa, duy trì và phát triển ứng dụng

5 Một số thư viện - package phổ biến được sử dụng trong ReactJS

5.1 React Hook

5.1.1 Khái niệm: Hooks là những hàm cho phép kết nối React

state và lifecycle vào các components sử dụng hàm Với Hooks cóthể sử dụng state và lifecycles mà không cần dùng ES6 class Sự rađời này đã giúp các lập trình viên tránh sự nhập nhằng về con trỏ this

5.1.2 Các hook phổ biến: useState, useEffect, useRef.

a useState: cập nhật giá trị của state, trong class component

để thay đổi state phải dùng cú pháp this.state Tuy nhiên với cú phápnày sẽ bị nhập nhằng con trỏ this, do đó, hook useState ra đời đểgiảm bớt sự nhập nhằng trên Để thay đổi state trong functionalcomponent chỉ cần dùng hàm setState()

b useEffect: là nơi thích hợp để xử lý các side effect như gọi

api lấy dữ liệu từ server, các thao tác liên quan đến DOM cũng nhưcác vấn đề liên quan đến setInterval, network request

Một useEffect sẽ gồm 3 thành phần: side effect, dependencies

○ Truyền filter vào mảng dependencies: chỉ chạy useeffect khi filter thay đổi Ví dụ thanh search, gọi apitheo filter của thanh search, filter thay đổi thì sẽ gọi

api (chạy lại use effect), còn filter ko đổi thì ko gọiapi (ko chạy use effect).

c useRef: dùng để lưu trữ giá trị của một biến qua các lần

render Sau mỗi lần render, giá trị của một số biến trong component

sẽ quay lại giá trị ban đầu, sử dụng useRef để lưu trữ các giá trị này

5.2 React Router

5.2.1 Khái niệm: là một thư viện định tuyến, với Url này sẽ

tương đương với Route này và render ra giao diện tương ứng

5.2.2 Các tính năng - tiện ích: <Link>, <NavLink>, <Redirect>,

useLocation, useParams

a <Link> <NavLink>: đối với HTML, cặp thẻ để chuyển hướng

là <a></a>, còn ở React thì dùng <Link>, <NavLink>

b.<Redirect>: dùng để chuyển trang, có thể lấy thông tin các

trang trước để sử dụng thông qua useLocation

c useParams (chỉ có ở React router v5): dùng để lấy thông tin

các params trên url

d useLocation (chỉ có ở React router v5): với react router v4,

để lấy được thông tin từ url (params, pathname, …) thì phải dùng đốitượng location được truyền như props vào component Tuy nhiên, ởv5, chỉ cần dùng hook useLocation thì vấn đề này có thể giải quyết

mà không cần truyền đối tượng location

5.3 React Redux - Redux toolkit

5.3.1 Khái niệm Redux và Redux Toolkit

a Redux: là công cụ dùng để quản lý state của ứng dụng Ứng

dụng có thể truy xuất state này ở mọi nơi thông qua store mà khôngcần truyền state từ component cha sang con

b Redux toolkit: là một package được sinh ra để tiết kiệm thời

gian trong việc cấu hình store, các file action hay reducer trong reduxkhá tách biệt và code lặp lại khá nhiều Tuy nhiên, đến với reduxtoolkit, việc config store, action, reducer trở nên dễ dàng, nhanhchóng và ngắn gọn

5.3.2 Các tính năng - tiện ích: store, action, reducer và nguyên

lý hoạt động

a Store là nơi lưu trạng thái của ứng dụng và là duy nhất, có

thể lưu trữ, truy xuất hoặc cập nhật giá trị state trong store thông quacác action

b Action: là các event, các event này bao gồm type (để

reducer biết đây là loại action gì, từ đó thực hiện các hành động cậpnhật state thích hợp) và payload (chứa thông tin state mới)

c Reducer: là các pure function, các hàm này lấy state hiện

tại, kết hợp với loại action, state mới và logic được khai báo trongreducer để cho một state có giá trị khác state ban đầu

5.3.3 Các tính năng - tiện ích của redux được thay thế bởi redux toolkit:

a Slice: Với redux, khi định nghĩa action và reducer phải tách

ra thành các file khác nhau, trong khi đó đối với slice, reducer vàaction được kết hợp lại trong cùng 1 file

5.4 Redux Thunk

5.4.1 Khái niệm

Đối với Redux, Action chỉ nhận vào POJO rồi chuyển qua choreducer Tuy nhiên, 1 số trường hợp action cần truyền vào function(Async Action) cho các tác vụ bất đồng bộ (như gọi api, settimeout)

Khi cần thực hiện các thao tác kể trên, middleware giúp actionthực hiện thao tác bất động bộ xong mới chuyển cho reducer Một số

loại middleware có thể giải quyết bài toán trên như redux thunk,redux saga Nhóm quyết định chọn redux thunk vì dễ sử dụng, cấuhình dễ dàng và phù hợp với những ứng dụng vừa và nhỏ

Redux Thunk là một Middleware cho phép viết các Action trả vềmột function thay vì một plain javascript object bằng cách trì hoãnviệc đưa action đến reducer

Redux Thunk được sử dụng để xử lý các logic bất đồng bộphức tạp cần truy cập đến Store hoặc đơn giản là việc lấy dữ liệunhư Ajax request

III SPRING BOOT

1 Giới thiệu chung:

Spring Boot là một module của Spring Framework, cung cấp tínhnăng RAD (Rapid Application Development - Phát triển ứng dụng nhanh)

Spring Boot ra đời nhằm rút ngắn thời gian cài đặt và cấu hình SpringMVC Project Giúp các lập trình viên tập trung hơn vào việc phát triển

nghiệp vụ thay vì tốn nhiều thời gian cho việc cấu hình dự án

Spring Boot dễ dàng trong việc tích hợp với các hệ sinh thái của

Spring như: Spring JDBC, Spring ORM, Spring Security,

2 Ưu điểm của Spring Boot:

Spring Boot hỗ trợ nhúng trực tiếp các file Server như Tomcat, Jettyhoặc Undertow (Do đó, khi sử dụng Spring Boot không cần phải deploy rafile war) Điều này hỗ trợ cho lập trình viên rất nhiều trong việc phát triểnứng dụng nhanh và đặc biệt là tiết kiệm được rất nhiều thời gian trong việcdeploy ứng dụng Spring

Khác với Spring Framework đơn thuần, Spring Boot hỗ trợ việc tựđộng cấu hình Spring khi cần thiết Và đặc biệt Spring Boot không sinh racode cấu hình và cũng không cần cấu hình bằng XML Những việc cấuhình thường rất tốn thời gian trong việc phát triển một ứng dụng Với tiêuchí phát triển một ứng dụng nhanh, Spring Boot đã giúp cho người dùnggiảm thiểu lượng thời gian đáng kể cho việc cấu hình

Spring Boot còn được biết đến là chuẩn cho Microservices (Cloudsupport, giảm việc setup, config các thư viện hỗ trợ) Do đó, việc triển khaiMicroservices trên các ứng dụng Spring Boot là rất dễ dàng

3 Một số thư viện được sử dụng phổ biến với Spring Boot:

3.1 Hibernate:

3.1.1 Khái niệm:

● ORM là gì ? ORM là viết tắt củaobject-relational-mapping, công nghệ cho phép chuyểnđổi từ các object trong ngôn ngữ hướng đối tượng sangdatabase quan hệ và ngược lại

● Hibernate là một ORM framework mã nguồn mở giúp cáclập trình viên viết các ứng dụng Java có thể tham chiếucác đối tượng (entity) với bảng (table) trong hệ quản trị

○ Giúp giảm thiểu công sức khi thay đổi từ hệ quản trị

cơ sở dữ liệu này sang hệ quản trị cơ sở dữ liệukhác (Hibernate viết một lần chạy mọi loại cơ sở dữliệu)

3.2 Spring Data JPA:

● JPA (Java Persistence API) là một module nhỏ của Spring

● Cần phải có một cài đặt ORM để hoạt động Các ORM

framework có thể sử dụng cho JPA như: Hibernate, iBatis,Eclipse Link, OpenJPA, Trong đồ án 1, chúng em tìm hiểu và

sử dụng Hibernate là ORM framework cho đồ án

● Có thể hiểu nôm na JPA là một interface và Hibernate chính làngười hiện thực cái interface đó

3.3 Spring Security:

● Là một framework của Spring được cung cấp để xử lý các vấn

đề liên quan đến bảo mật

● Spring Security cung cấp 2 cơ chế cơ bản:

○ Authentication (Xác thực): Là tiến trình xác thực (kiểmtra) danh tính của một người dùng hoặc một hệ thốngkhác đang truy cập vào hệ thống hiện tại

○ Authorization (Phân quyền): Là tiến trình quyết định xemngười dùng hoặc hệ thống sau khi xác thực có đượcquyền thực hiện một hành động nào đó trong ứng dụnghay không

3.4 Bcrypt:

● Là một thuật toán hỗ trợ việc mã hóa các thông tin quan trọng

● Bcrypt được đánh giá là bảo mật và an toàn hơn so với MD5 vàSHA

3.5 Jjwt:

● Là một thư viện hỗ trợ các tác vụ và thao tác với Json WebToken như việc tạo ra các token, cấu hình token, đọc cáctoken,

○ Json Web Token là một chuẩn để truyền tải thông tin mộtcách an toàn giữa các bên bằng đối tượng Json

○ Json Web Token thường được dùng để xác thực và phânquyền người dùng( authentication và authorization), chuỗitoken sẽ được gửi kèm trong phần header của request vàserver sẽ thông qua token đó xác thực request

4 Xây dựng Codebase cho ứng dụng Spring Boot:

Trong đồ án 1, nhóm chúng em đã tìm hiểu và xây dựng một

Codebase hoàn chỉnh để triển khai một ứng dụng Spring Boot tiêu chuẩn.Codebase này khá hoàn chỉnh, rõ ràng và phù hợp trong việc phát triểnmột ứng dụng Spring Boot thực tế Từ đó, các lập trình viên có nhu cầu sửdụng bản báo cáo này để làm tài liệu tham khảo, hoàn toàn có thể áp dụngCodebase này để làm nền tảng phát triển các ứng dụng Spring Boot saunày

Hình ảnh Codebase (chụp từ ứng dụng):

Mô tả Codebase:

● com.techshopbe: chứa file SpringBootApplication để

chạy ứng dụng Spring Boot (có thể hiểuSpringBootApplication là file main dùng để khởi chạychương trình)

● com.techshopbe.config: chứa các class dùng để Config

hệ thống (VD: CorsConfig, ) hoặc Config những thư viện,framework sử dụng (VD: SwaggerConfig, )

● com.techshopbe.controller: chức các class Controller (

ở đây là các RestController trong Spring Boot), cácController giúp điều hướng và mapping các request đếnserver

● com.techshopbe.dto: chứa các class được định nghĩa là

dto (data transfer object) (Vd: AuthenticationDTO là mộtdata transfer object chứa những thông tin nhỏ của userdùng để xác thực đăng nhập, )

● com.techshopbe.entity: chứa các class là entity của dự

án, các entity có khả năng mapping với các table dưới cơ

sở dữ liệu (sử dụng ORM framework)

● com.techshopbe.repository: chứa các repository của

dự án, các repository này được kế thừa từ JPARepository(được cung cấp bởi Spring JPA)

● com.techshopbe.security: chứa các class dùng để

secure hệ thống, các class có tính năng bảo mật như xácthực và phân quyền và các cấu hình security cho ứngdụng

● com.techshopbe.service: chứa các Service Interface

của ứng dụng, các Service Interface này sinh ra giúp choviệc định nghĩa và liệt kê các phương thức trở nên linhhoạt hơn Giúp cho dự án dễ bảo trì và nâng cấp về sau

● com.techshopbe.service.impl: chứa các class Service,

các class Service này sẽ implements những ServiceInterface và định nghĩa những phương thức của ServiceInterface đó

● File pom.xml: file này chứa các thông tin cần thiết định

nghĩa một dự án, phiên bản, nhóm phát triển, các thư

viện hoặc plugins được sử dụng Để sử dụng một thưviện - plugins bất kỳ trong dự án Spring Boot chỉ cần khai

báo dependency với pom.xml.