BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG WEB QUẢN LÝ BÁN HÀNG (NESTJS)

Chương I : NestJS Chương II : Chuẩn JWT Chương III : Ant Design Trong ReactJS Chương IV : Cở Sở Dữ Liệu MongoDB Chương V: Thực Thi Chương Trình

TRƯỜNG ĐẠI HỌC GIA ĐỊNHKHOA: CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

XÂY DỰNG WEB QUẢN LÝ BÁN HÀNG (NESTJS)

Lớp: K15DCPM03

TP.Hồ Chí Minh, ngày 05, tháng 8, năm 2024

MỤC LỤC

LỜI MỞ ĐẦU 8

CHƯƠNG I : NESTJS 9

1.1Khái niệm frameword Nestjs 9

1.2 Khởi tạo một project bằng Nestjs 9

1.3Giải thích cấu trúc project NestJS 10

CHƯƠNG V: THỰC THI CHƯƠNG TRÌNH 31

5.1 Dùng công cụ POSTMAN 31

5.2 Call API bằng ReactJS 33

5.3 Kết quả 35

Giao diện người dùng: 35

Giao diện ADMIN 39

LỜI MỞ ĐẦU

Trong bối cảnh công nghệ ngày càng phát triển, việc xây dựng và phát triển các trangweb bán hàng trở thành một nhu cầu thiết yếu đối với các doanh nghiệp Các hệ thốngthương mại điện tử không chỉ giúp mở rộng thị trường mà còn tối ưu hóa quy trình kinhdoanh, nâng cao trải nghiệm khách hàng và gia tăng doanh thu Việc ứng dụng các côngnghệ hiện đại như NestJS, một framework mạnh mẽ dựa trên Node.js, giúp cho việc pháttriển các ứng dụng web trở nên hiệu quả và dễ dàng hơn Trong giai đoạn thực tập củatrường Đại Học Gia Định, tôi đã có cơ hội được tham gia vào dự án thực tế đó là xâydựng website bán hàng cho Công Ty TNHH Sparking Trong giai đoạn được thực tập tạicông ty, tôi đã có cơ hội được thực hiện việc phân tích các chức năng của một websitebán hàng, xây dựng các thực thể và các mối quan hệ của các thực thể Bên cạnh đó, tôicòn được tham gia việc xây dựng cơ sở dữ liệu, viết login phí backend và xây dựng giaodiện cho một số chức năng Báo cáo này được viết nhằm trình bày kết quả của quá trìnhthực tập của tôi đồng thời chia sẻ các kinh nghiệm và kiến thức mà tôi đã học được Báocáo này bao gồm các phần chính sau:

Chương I : NestJS

Chương II : Chuẩn JWT

Chương III : Ant Design Trong ReactJSChương IV : Cở Sở Dữ Liệu MongoDBChương V: Thực Thi Chương Trình

Tôi hy vọng rằng báo cáo này sẽ cung cấp cho các bạn đọc một cái nhìn tổng quan về quátrình thực tập của tôi tại Công Ty TNHH Sparking và đóng góp vào việc nâng cao kiếnthức và kỹ năng về xây dựng website.

Xin chân thành cảm ơn!

CHƯƠNG I : NESTJS

Nếu đã từng phát triển NodeJS Server App thì chắc các quý vị cũng không còn xa lạ gìvới 2 framwork nổi tiếng là Express và Fastify Về cơ bản thì tôi thấy 2 framework nàyđang thực hiện khá tốt trong việc phát triển server-side, tuy nhiên chúng cũng khiến chocác nhà phát triển phải suy nghĩ khá nhiều trong việc làm sao để xây dựng một projectvới clean structure, highly scalable, testable và dễ dàng maintaince Đặc biệt là một lậptrình viên mới bắt đầu với NodeJS thì chắc hẳn đây sẽ là một vấn đề Nếu build tốt ngaytừ đầu khi đến một giai đoạn nào đó chúng ta sẽ tốn khá nhiều chi phí phát triển cũng nhưmaintaince NestJS được tạo ra để giúp chúng ta phần nào đó giải quyết được vấn đề này.

1.1 Khái niệm frameword Nestjs

NestJS là một framework mã nguồn mở để phát triển ứng dụng server-side(backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript Nó được xâydựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript để tạo ra mộtmôi trường phát triển hiện đại và mạnh mẽ cho việc xây dựng các ứng dụng webvà API.

Mục tiêu chính của NestJS là cung cấp một cấu trúc ứng dụng rõ ràng và dễ quảnlý, giúp tăng tính bảo trì và sự tổ chức trong mã nguồn Để đạt được điều này,NestJS triển khai mô hình kiến trúc lõi (core architecture) dựa trên các nguyên tắccủa Angular, đặc biệt là sử dụng Dependency Injection (DI) và Modules (Cácmodule).

1.2 Khởi tạo một project bằng Nestjs

Đầu tiền để có thể khởi tạo ra một project NestJS quý vị cần thực hiện các bướcsau:

 Và ngay tại thời điểm này quý vị có thể khởi chạy ngay project NestJS vừa

1.3 Giải thích cấu trúc project NestJS

 app.controller.ts: Chứa các router để xử lý các request và trả về response choclient.

 app.controller.spec.ts: Có nhiệm vụ viết unit-test cho các controller.

 app.service.ts: Service chứa các logic mà controller sẽ dùng đến.

1.4 Các thành phần chính của NestJS

@Module () @Module () sẽ cung cấp metadata mà Nest sử dụng để tổ chức cấutrúc ứng dụng Một file module cơ bản sẽ như sau:

Trong một module sẽ bao gồm các thành phần chính sau đây:

providers: Có nhiệm vụ khởi tạo và cung cấp các service mà sẽ được controllertrong module sẽ sử dụng đến.

controllers: Có nhiệm vụ khởi tạo những controller đã được xác định trongmodule

imports: Có nhiệm vụ import những thành phần của một module khác mà modulesẽ sử dụng.

exports: Có nhiệm vụ export các thành phần của provider và các module khác sẻimport để sử dụng.

Nest cũng hỗ trợ tạo ra các module, controller, provider bằng CLI Để tạo ra một

Sau khi define module, việc tiếp theo của quý vị cần làm bây giờ là import vàoroot module của project là app.module.ts

Ngoài ra, Nest còn một tính năng khác đó là Share Module Bạn có thể chia sẻ

bất kì provider nào trong module hiện tại cho các module khác Ví dụ bạn có thểchia sẻ UserService cho các module khác sử dụng bằng cách thêm nó vào mảngexports trong acount.module.ts như sau.

Sau khi export, các module khác đều có thể import AccountModule và truy cập

phép bạn sử một module từ module khác mà không cần import Như vậy chúng tacó thể sử dụng service của các module khác rất dễ dàng phải không Chỉ cầnthêm @Global() như dưới đây là có thể biến nó trở thành global module.

Nest cũng hỗ trợ mạnh mẽ trong việc cấu hình các module động đó là Dynamicmodules Việc cấu hình module động này giúp ta có thể thực hiện các thao táckhác nhau trước khi export một module.

1.4.5 Controller

Như quý vị đã biết, controller là nơi xử lý các request và trả về response chongười dùng Mỗi controller sẽ chứa các router thực hiện hành động và nhiệm vụkhác nhau được yêu cầu từ client Để tạo ra một controller chúng ta sử dụng mộtvà @Controller() @Controller() sẽ có nhiệm vụ liên kết class Controller đó vớirequest tương ứng Chúng ta sẽ tạo một controller cơ bản như sau, quý vị cũng cóthể tạo controller bằng cmd:$ nest g controller account

có sử dụng tiền tố account làm route path, việc sử dụng như vậy sẽ tập hợp cácroute liên quan và giảm thiểu code lặp lại Để xác định method cụ thể cho mộtrequest chúng ta sẽ define@GET() trên function nào đó ví dụ như findAll() Việc

findAll() này để xử lý và response lại cho client Ngoài Get() thì Nest cũng cung

@PUT(), …

Không những thế NestJS còn cung cấp một bộ decorator khá đầy đủ để ta có thểthực hiện truy vấn vào các request cũng như xử lý các response data về cho client

@Request(), @Req() req

Sau đó chúng ta sẽ sử dụng singDTO trong controller đẻ thực hiện ràng buộc datatype gửi lên Trong controller của account ta hãy thêm như sau:

1.4.6 Provider

Provider là nơi cung cấp các serivce, repositories, factories, helpers, chocontroller trong một module sử dụng Đây cũng là nơi sẽ chứa những logic xử lýđã được tách biệt với controller Để tạo ra một provider chúng ta chỉ cần khai báo@Injectable() trước một class đã định nghĩa Việc sử dụng @Injectable() sẽ choNest biết đây là một class thuộc provider Để tạo ra một service nơi mà chứa cáclogic xử lý của một controller, chúng ta hãy tạo ra một class trong file service.ts

Và cuối cùng việc làm là sử dụng nó bên trong các route của controller Các Service ởtrên đều được Nest sử dụng Singleton của Design Pattern để khởi tạo Vì vậy nếu đã đượcsử dụng ở một module hoặc controller khác thì nó sẽ trả về instance đã khởi tạo trước đó.

CHƯƠNG II : CHUẨN JWT2.1 Khái niệm

JSON WEB TOKEN (JWT) là một tiêu chuẩn mở (RFC 7519) xác định một cáchnhỏ gọn và khép kín để truyền thông tin một cách an toàn giữa các bên dưới dạngđối tượng JSON Thông tin này có thể được xác minh và tin cậy vì nó được kýđiện tử JWT có thể được ký bằng bí mật (bằng thuật toán HMAC) hoặc cặp khóacông khai/riêng bằng RSA hoặc ECDSA.

Mặc dù JWT có thể được mã hóa để cung cấp bí mật giữa các bên nhưng chúngtôi sẽ tập trung vào các token đã ký Mã thông báo đã ký có thể xác minh tính toànvẹn của các xác nhận quyền sở hữu trong đó, trong khi mã thông báo được mã hóasẽ ẩn các xác nhận quyền sở hữu đó khỏi các bên khác Khi mã thông báo được kýbằng cặp khóa chung/riêng, chữ ký cũng xác nhận rằng chỉ bên giữ khóa riêngmới là người đã ký nó.

Sau đó, JSON này được mã hóa Base64Url để tạo thành phần đầu tiên của JWT.

2.2.2 Payload

Phần thứ hai của mã thông báo là payload, chứa các xác nhận quyền sở hữu Khiếunại là các tuyên bố về một thực thể (thường là người dùng) và dữ liệu bổ sung Có

ba loại claims: registered, public, and private claims.

định trước, không bắt buộc nhưng được khuyến nghị nhằm cung cấp mộttập hợp các xác nhận quyền sở hữu hữu ích, có thể tương tác Một số trongsố đó là: iss (nhà phát hành), exp (thời gian hết hạn), sub (chủ đề), aud(khán giả) và những thứ khác.

theo ý muốn Nhưng để tránh xung đột, chúng phải được xác định JSONIANA Web Token Registry hoặc được xác định là URI chứa không giantên chống xung đột.

chia sẻ thông tin giữa các bên đồng ý sử dụng chúng và không phải là xácnhận quyền sở hữu đã được đăng ký hoặc công khai.

Ví dụ:

Sau đó, tải trọng được mã hóa Base64Url để tạo thành phần thứ hai của Mãthông báo Web JSON.

2.2.3 Signature

Signature là phần cuối cùng của JWT, có chức nâng xác thực danh tính người gửi.Để tạo ra một signature chính xác, ta cần encode phần header, phần payload, chọncryptography (mật mã hóa) thích hợp đã được xác định ở header kèm secret keyvà thực hiện sign.

Ví dụ:

Cả bên gửi và bên nhận JWT đều sẽ xử dụng hàm này để xác định phần signature,nếu thông tin này của cả 2 bên khác nhau, JWT này được coi là không hợp lệ.

Lưu ý: Chỉ có người có secret key mới có thể sign được một signature phù hợp.

Do đó, danh tính của bên gửi được đảm bảo nhờ có signature.

2.3 Lý do nên chọn JWT

 Authentication (Xác thực): JWT được sử dụng để xác thực người dùng trước khi

họ truy cập đến tài nguyên trên server.

 Authorization (Uỷ quyền): Khi người dùng đăng nhập thành công, application có

thể truy cập vào các tài nguyên thay mặt người dùng đó Các ứng dụng đăng nhập

2.4 Ưu điểm

 Gọn nhẹ: JWT nhỏ gọn, chi phí truyền tải thấp giúp tăng hiệu suốt của các ứng

 Bảo mật: JWT sử dụng các mật mã khoá để tiến hành xác thực người danh tính

người dùng Ngoài ra, cấu trúc của JWT cho phép chống giả mạo nên thông tin

được đảm bảo an toan trong quá trình trao đổi.

 Phổ thông: JWT được sử dụng dựa trên JSON, là một dạng dữ liệu phổ biến, có

thể sử dụng ở hầu hết các ngôn ngữ lập trình Ngoài ra, triển khai JWT tương đốidễ dàng và tích hợp được với nhiều thiết bị, vì JWT đã tương đối phổ biến.

2.5 Khuyết điểm

 Kích thước: Mặc dù trong tài liệu không ghi cụ thể giới hạn, nhưng do được

truyền trên HTTP Header, vì thế, JWT có giới hạn tương đương với HTTPHeader (khoảng 8KB).

 Rủi ro bảo mật: Khi sử dụng JWT không đúng cách, ví dụ như không kiểm tra

tính hợp lệ của signature, không kiểm tra expire time, kẻ tấn công có thể lợi dụng

sơ hở để truy cập vào các thông tin trải phép Ngoài ra, việc thờ gian hết hạn của

JWT quá dài cũng có thể tạo ra kẽ hở tương tự.

2.6 Một số ứng dụng JWT

 Single Sign-On (SSO): JWT có thể được sử dụng để cung cấp single sign-on cho

người dùng Điều này cho phép họ đăng nhập vào nhiều ứng dụng chỉ với một tàikhoản duy nhất.

 API Authorization: JWT thường được sử dụng để phân quyền cho người dùng

đến những tài nguyên cụ thể, từ những claims chứa trong JWT đó.

 User Authentication: JWT cung cấp khả năng xác thực người dùng và cấp quyền

 Microservices Communication: JWT còn có thể sử dụng cho việc giao tiếp giữa

các service nhỏ trong hệ thống microservices.

PHẦN III: ANT DESIGN TRONG REACTJS

React căn bản là một thư viện giúp xây dựng giao diện người dùng trong ứng dụng web.Nhờ vào khả năng chia nhỏ tính năng thành từng component, React giúp cho việc xâydựng các thành phần giao diện trở nên độc lập, dễ chia sẻ và sử dụng hơn Bên cạnh đó,cộng đồng React cũng phát triển một số thư viện UI độc lập, giúp bạn có thể nhanh chóngcài đặt vào dự án mà không cần phải dựa vào một đội thiết kế riêng Điều này đặc biệtphù hợp với những dự án nhỏ có ngân sách giới hạn Và trong báo cáo này tôi sẽ nói vềmột thư viện khá phổ biến trong React đó là Ant Design.

3.1 Khái niệm

Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của AntUED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các componentthông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, …Bêncạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạnthay đổi ngôn ngữ trên toàn ứng dụng.

Có thẻ xem Ant Design cho React là tập hợp của hầu hết các thư viện về React Nó đápứng được hầu hết các yêu cầu của project của bạn mà ban không phải cài thêm bất cứ thưviện nào nữa Dưới đây là danh sách các component mà nó cung cấp:

Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer,

 Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover,Tree, Tooltip, Timeline, Tag, Tabs, Table

CHƯƠNG IV: CƠ SỞ DỮ LIỆU MONGODB4.1 Khái niệm

đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++.

niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao vàkhả năng mở rộng dễ dàng.

vấn thông tin NoSQL viết tắt bởi: None-Relational SQL, hay có nơi thường gọi làNot-Only SQL CSDL này được phát triển trên Javascript Framework với kiểu dữliệu JSON (Cú pháp của JSON là “key:value”) NoSQL ra đời như là 1 mảnh vácho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quanhệ RDBMS về tốc độ, tính năng, khả năng mở rộng, memory cache,

4.2 Các thuật ngữ dùng trong MongoDB

 _id – Là trường bắt buộc có trong mỗi document Trường _id đại diện cho một giá

trị duy nhất trong document MongoDB Trường _id cũng có thể được hiểu là khóachính trong document Nếu bạn thêm mới một document thì MongoDB sẽ tự độngsinh ra một _id đại diện cho document đó và là duy nhất trong cơ sở dữ liệuMongoDB.

 Collection – Là nhóm của nhiều document trong MongoDB Collection có thể

được hiểu là một bảng tương ứng trong cơ sở dữ liệu RDBMS (RelationalDatabase Management System) Collection nằm trong một cơ sở dữ liệu duy nhất.Các collection không phải định nghĩa các cột, các hàng hay kiểu dữ liệu trước.

 Database – Nơi chứa các Collection, giống với cơ sở dữ liệu RDMS chúng chứa

các bảng Mỗi Database có một tập tin riêng lưu trữ trên bộ nhớ vật lý Một mấychủ MongoDB có thể chứa nhiều Database.

 Document – Một bản ghi thuộc một Collection thì được gọi là một Document.

Các Document lần lượt bao gồm các trường tên và giá trị.

 Field – Là một cặp name – value trong một document Một document có thể có

không hoặc nhiều trường Các trường giống các cột ở cơ sở dữ liệu quan hệ.

 JSON – Viết tắt của JavaScript Object Notation Con người có thể đọc được ở

định dạng văn bản đơn giản thể hiện cho các dữ liệu có cấu trúc Hiện tại JSONđang hỗ trợ rất nhiều ngôn ngữ lập trình.

 Index – Là những cấu trúc dữ liệu đặc biệt, dùng để chứa một phần nhỏ của các

tập dữ liệu một cách dễ dàng để quét Chỉ số lưu trữ giá trị của một fields cụ thểhoặc thiết lập các fields, sắp xếp theo giá trị của các fields này Index hỗ trợ độphân tích một cách hiệu quả các truy vấn Nếu không có chỉ mục, MongoDB sẽphải quét tất cả các documents của collection để chọn ra những document phù hợpvới câu truy vấn Quá trình quét này là không hiệu quả và yêu cầu MongoDB đểxử lý một khối lượng lớn dữ liệu.

Hãy lưu ý sự khác biệt của các trường và _id trong một document Một _id được dùng đểđại diện cho một document và chúng được sinh ra khi thêm một Document vàoCollection.

Hình ảnh minh hoạt một Collection trong MogoDB