đồ án ứng dụng nestjs và flutter xây dựng ứng dụng e shoppingcart cho thương mại điện tử bán quần áo

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.21 MB, 121 trang )

Trang 1<div class="page_container" data-page="1">

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN

Sinh viên thực hiện:

Nguyễn Thái Tuấn – MSSV: 20522122Mai Phạm Quốc Hưng – MSSV: 20521366

</div>Trang 3<div class="page_container" data-page="3">

LỜI CẢM ƠN

Sau quãng thời gian học tập và rèn luyện tại trường Đại học Công nghệ Thông tin –

ĐHQG TP.HCM, trong môn học ĐỒ ÁN 2, nhóm chúng em quyết định chọn thựchiện đề tài: Ứng dụng NestJS và Flutter xây dựng ứng dụng E-ShoppingCart chothương mại điện tử bán quần áo. Nhằm củng cố, tổng kết, cũng như nâng cao những

kiến thức và kĩ năng mình đã học.

Để thực hiện được đồ án này, đầu tiên nhóm em xin được gửi lời cảm ơn chân thànhnhất đến thầy Nguyễn Tấn Toàn, giảng viên hướng dẫn của đồ án, đã tận tình hỗ trợ,đánh giá và định hướng cho em trong suốt q trình làm đồ án. Những gì nhóm họcđược qua q trình làm việc với thầy khơng chỉ có ý nghĩa lớn với sự hồn thành củađồ án mà cịn là những bài học quý báu cho quá trình học tập và làm việc sau này.Đồng thời, nhóm cũng xin gửi lời cảm ơn đến các quý thầy cô trường Đại học Cơngnghệ thơng tin nói chung và các q thầy cơ khoa Cơng nghệ phần mềm nói riêng đãgiảng dạy, bồi dưỡng kiến thức và kĩ năng cho em trong suốt quãng thời gian em họctại trường.

Trong quá trình làm đồ án khơng tránh khỏi được những sai sót, em kính mong nhậnđược sự chỉ dẫn và góp ý của q thầy cơ để hồn thiện và phát triển thêm.

Một lần nữa, nhóm chúng em xin chân thành cảm ơn!

Thành phố Hồ Chí Minh, 25 tháng 12 năm 2023

Nhóm sinh viên thực hiện

</div>Trang 4<div class="page_container" data-page="4">

Chương 1:GIỚI THIỆU TỔNG QUAN...1

1.1Thông tin người thực hiện...1

1.2Tổng quan đề tài...1

1.2.1 Lý do chọn đề tài...1

1.2.2 Phạm vi nghiên cứu...2

1.2.3 Đối tượng nghiên cứu...2

1.2.4 Kết quả hướng tới...2

1.3Công cụ sử dụng...3

Chương 2:KIẾN THỨC NỀN TẢNG...4

2.1.1 Định nghĩa...4

2.1.2 Tính năng nổi bật của Flutter...4

2.1.3 Ưu và nhược điểm...5

2.1.4 Pattern áp dụng trong dự án (Domain Driven Design)...6

2.2.1 Giới thiệu về NestJS...8

2.2.2 Các khái niệm cơ bản...9

2.2.3 Typescript và Decorator...13

2.2.4 Kết luận...13

2.3Amazon Web Service...14

2.3.1 Giới thiệu về AWS...14

2.3.2 Các dịch vụ AWS...14

2.3.3 Ưu điểm và ứng dụng thực tế...16

2.3.4 Kết luận...17

2.4.1 Giới thiệu về Flask...18

2.4.2 Các thông tin quan trọng...18

</div>Trang 5<div class="page_container" data-page="5">

2.4.3 Các tính năng chính của Flask...18

2.4.4 Ưu điểm và Nhược điểm...19

3.1Giới thiệu chung về bài toán...23

3.1.1 Phát biểu bài toán...23

3.1.2 Hướng giải quyết...24

3.1.3 Công cụ, công nghệ sử dụng...24

3.1.4 Mã nguồn...24

3.2Phân tích yêu cầu...25

3.2.1 Phân tích Use case...25

4.3.2 Nghiên cứu thêm các kiến trúc, công nghệ hiện đại...112

TÀI LIỆU THAM KHẢO...113

</div>Trang 6<div class="page_container" data-page="6">

DANH MỤC CÁC BẢ

Bảng 1. 1 Thông tin người thực hiện...1

YBảng 3. 1 Đặc tả Use Case Đăng nhập (Khách hàng)...26

Bảng 3. 2 Đặc tả Use Case Đăng ký...27

Bảng 3. 3 Đặc tả Use Case Quên mật khẩu...28

Bảng 3. 4 Đặc tả Use Case Xem danh sách loại sản phẩm...29

Bảng 3. 5 Đặc tả Use Case Xem danh sách sản phẩm...30

Bảng 3. 6 Đặc tả Use Case Thêm sản phẩm vào danh sách yêu thích...31

Bảng 3. 7 Đặc tả Use Case Xem chi tiết sản phẩm...32

Bảng 3. 8 Đặc tả Use Case Xem các sản phẩm được đề xuất...33

Bảng 3. 9 Đặc tả Use Case Thêm sản phẩm vào giỏ hàng...34

Bảng 3. 10 Đặc tả Use Case Xem giỏ hàng...35

Bảng 3. 11 Đặc tả Use Case Tạo đơn hàng...37

Bảng 3. 12 Đặc tả Use Case Thanh toán...38

Bảng 3. 13 Đặc tả Use Case Theo dõi đơn hàng...39

Bảng 3. 14 Đặc tả Use Case Quét mã QR sản phẩm...40

Bảng 3. 15 Đặc tả Use Case Chỉnh sửa Profile...41

Bảng 3. 16 Đặc tả Use Case Chỉnh sửa địa chỉ...42

Bảng 3. 17 Đặc tả Use Case Đăng nhập (Nhân viên)...43

Bảng 3. 18 Đặc tả Use Case Quản lý nhân viên...44

Bảng 3. 19 Đặc tả Use Case Quản lý nhóm quyền hạn...45

Bảng 3. 20 Đặc tả Use Case Quản lý chủng loại sản phẩm...46

Bảng 3. 21 Đặc tả Use Case Quản lý loại sản phẩm...47

Bảng 3. 22 Đặc tả Use Case Quản lý sản phẩm...48

Bảng 3. 23 Đặc tả Use Case Quản lý thuộc tính sản phẩm...49

Bảng 3. 24 Đặc tả Use Case Quản lý giao dịch...50

Bảng 3. 25 Đặc tả Use Case Thống kê...51

Bảng 3. 26 Mô tả màn hình Đăng nhập (Khách hàng)...71

Bảng 3. 27 Mơ tả màn hình Đăng ký (Khách hàng)...71

Bảng 3. 28 Mơ tả màn hình Xác nhận tài khoản (Khách hàng)...72

Bảng 3. 29 Mơ tả màn hình Doanh mục loại sản phẩm (Khách hàng)...73

Bảng 3. 30 Mơ tả màn hình Danh sách sản phẩm (Khách hàng)...75

Bảng 3. 31 Mơ tả màn hình Lọc sản phẩm (Khách hàng)...76

Bảng 3. 32 Mô tả bottom sheet Sắp xếp sản phẩm (Khách hàng)...76

Bảng 3. 33 Mô tả màn hình Tìm kiếm sản phẩm (Khách hàng)...77

Bảng 3. 34 Mơ tả màn hình Kết quả tìm kiếm sản phẩm (Khách hàng)...78

Bảng 3. 35 Mơ tả màn hình Danh sách sản phẩm u thích (Khách hàng)...79

Bảng 3. 36 Mơ tả màn hình Danh sách sản phẩm u thích (Khách hàng)...80

Bảng 3. 37 Mơ tả màn hình Chi tiết sản phẩm (Khách hàng)...82

Bảng 3. 38 Mơ tả màn hình Giỏ hàng (Khách hàng)...82

Bảng 3. 39 Mơ tả màn hình Đặt hàng (Khách hàng)...83

Bảng 3. 40 Mơ tả màn hình Lịch sử đặt hàng (Khách hàng)...84

</div>Trang 7<div class="page_container" data-page="7">

Bảng 3. 41 Mô tả màn hình Chi tiết đơn hàng (Khách hàng)...85

Bảng 3. 42 Mơ tả màn hình Quản lý tài khoản (Khách hàng)...87

Bảng 3. 43 Mơ tả màn hình Danh sách địa chỉ (Khách hàng)...88

Bảng 3. 44 Mơ tả màn hình Thêm địa chỉ (Khách hàng)...89

Bảng 3. 45 Mơ tả màn hình chính (Nhân viên)...91

Bảng 3. 46 Mơ tả màn hình Danh sách chủng loại sản phẩm (Nhân viên)...92

Bảng 3. 47 Mô tả màn hình Thêm chủng loại sản phẩm (Nhân viên)...93

Bảng 3. 48 Mơ tả màn hình Danh sách loại sản phẩm (Nhân viên)...94

Bảng 3. 49 Mô tả dialog Thêm loại sản phẩm (Nhân viên)...95

Bảng 3. 50 Mơ tả màn hình Danh sách sản phẩm (Nhân viên)...96

Bảng 3. 51 Mô tả màn hình Thêm sản phẩm (Nhân viên)...97

Bảng 3. 52 Mơ tả màn hình Danh sách thuộc tính sản phẩm (Nhân viên)...98

Bảng 3. 53 Mơ tả dialog thêm thuộc tính sản phẩm (Nhân viên)...99

Bảng 3. 54 Mơ tả màn hình Danh sách quyền hạn (Nhân viên)...100

Bảng 3. 55 Mô tả màn hình Thêm nhóm quyền hạn (Nhân viên)...102

Bảng 3. 56 Mơ tả màn hình Danh sách nhân viên (Nhân viên)...103

Bảng 3. 57 Mô tả dialog Gửi lời mời đến nhân viên (Nhân viên)...104

Bảng 3. 58 Mơ tả màn hình Danh sách giao dịch (Nhân viên)...105

Bảng 3. 59 Mơ tả màn hình Chi tiết giao dịch (Nhân viên)...107

Bảng 3. 60 Mô tả màn hình Thống kê (Nhân viên)...108

Bảng 3. 61 Mơ tả màn hình Chi tiết thống kê (Nhân viên)...109

</div>Trang 8<div class="page_container" data-page="8">

DANH MỤC HÌNH ẢN

Hình 2. 1 Flutter...4

Hình 2. 2 Logo NestJS framework...8

Hình 2. 3 NestJS tổ chức theo module...9

Hình 2. 4 Minh họa về Controller...10

Hình 2. 5 Controller trong NestJS...11

Hình 2. 6 Đoạn code sử dụng prodvider...11

Hình 2. 7 Middleware minh họa...12

Hình 2. 8 Đoạn code minh họa sử dụng middeware...12

Hình 2. 9 Hình ảnh minh họa Interceptor...13

Hình 2. 10 Logo AWS...14

Hình 2. 11 Logo amazon...14

Hình 2. 12 Logo AWS ECS...15

Hình 2. 13 Logo AWS ECR...15

Hình 2. 14 Logo AWS Codebuild...16

Hình 2. 15 Logo AWS CodePipeline...16

Hình 2. 16 Flask...18

Hình 2. 17 Kiến trúc mơ hình ResNet-50...20

Hình 2. 18. Thư viện Keras...21

YHình 3. 1 Sơ đồ Use Case...25

Hình 3. 2 Sơ đồ Sequence Quên mật khẩu...52

Hình 3. 3 Sơ đồ Sequence Đề xuất sản phẩm tương tự...53

Hình 3. 4 Sơ đồ Sequence Tạo đơn hàng...54

Hình 3. 5 Sơ đồ Sequence Thanh tốn qua ZaloPay...55

Hình 3. 6 Sơ đồ Sequence Quét mã QR sản phẩm...56

Hình 3. 7 Sơ đồ Activity Quên mật khẩu...57

Hình 3. 8 Sơ đồ Activity Đề xuất sản phẩm tương tự...58

Hình 3. 9 Sơ đồ Activity Tạo đơn hàng...59

Hình 3. 10 Sơ đồ Activity Thanh tốn qua ZaloPay...60

Hình 3. 11 Sơ đồ Activity Quét mã sản phẩm...61

</div>Trang 9<div class="page_container" data-page="9">

Hình 3. 29 Màn hình Chi tiết đơn hàng (Khách hàng)...85

Hình 3. 30 Màn hình Quản lý tài khoản (Khách hàng)...86

Hình 3. 31 Màn hình Danh sách địa chỉ (Khách hàng)...87

Hình 3. 32 Màn hình Thêm địa chỉ (Khách hàng)...88

Hình 3. 33 Màn hình chính (Nhân viên)...90

Hình 3. 34 Màn hình Danh sách chủng loại sản phẩm (Nhân viên)...91

Hình 3. 35 Màn hình Thêm chủng loại sản phẩm (Nhân viên)...92

Hình 3. 36 Màn hình Danh sách loại sản phẩm (Nhân viên)...93

Hình 3. 37. Dialog Thêm loại sản phẩm (Nhân viên)...94

Hình 3. 38 Màn hình Danh sách sản phẩm (Nhân viên)...95

Hình 3. 39 Màn hình Thêm sản phẩm (Nhân viên)...96

Hình 3. 40 Màn hình Danh sách thuộc tính sản phẩm (Nhân viên)...98

Hình 3. 41. Dialog Thêm thuộc tính sản phẩm (Nhân viên)...99

Hình 3. 42 Màn hình Danh sách thuộc tính sản phẩm (Nhân viên)...100

Hình 3. 43 Màn hình Thêm nhóm quyền hạn (Nhân viên)...101

Hình 3. 44 Màn hình Danh sách nhân viên (Nhân viên)...102

Hình 3. 45. Dialog Gửi lời mời đến nhân viên (Nhân viên)...103

Hình 3. 46 Màn hình Danh sách giao dịch (Nhân viên)...105

Hình 3. 47 Màn hình Chi tiết giao dịch (Nhân viên)...106

Hình 3. 48 Màn hình Thống kê (Nhân viên)...108

Hình 3. 49 Màn hình Chi tiết thống kê (Nhân viên)...109

</div>Trang 10<div class="page_container" data-page="10">

DANH MỤC TỪ VIẾT TẮT

Một nơi để các ứng dụng giao tiếpvới nhau

Mơi trường phát triển tích hợp

Ngơn ngữ mơ hình hóa thống nhất

</div>Trang 11<div class="page_container" data-page="11">

Chương 1: GIỚI THIỆU TỔNG QUAN

1.1 Thông tin người thực hiện

Bảng 1. 1 Thông tin người thực hiện

1.2 Tổng quan đề tài

1.2.1 Lý do chọn đề tài

Trong những năm gần đây, thương mại điện tử dần trở thành một xu thế, hay nói đúnghơn là một “lẽ thường”, một sự hiện diện rất thân thuộc với cuộc sống hiện đại. Mỗimột cơ sở kinh doanh mở ra thì đều gắn mình với ít nhất một nền tảng thương mại điệntử: cơ sở cung cấp các mặt hàng tiêu dùng thì mở cửa hàng trên Shopee, Lazada; cungcấp thức ăn đồ uống thì có mặt trên Grab Food; một số thì chọn TikTok Shop để bắtkịp xu hướng...

Riêng đối với các nhãn hàng thời trang như H&M hay Uniqlo thì thường lựa chọnthành lập các cửa hàng bán lẻ kết hợp với xây dựng kênh bán hàng online gồm websitevà ứng dụng di động thay vì tham gia vào một sàn thương mại điện tử có sẫn. Lý do cólẽ là vì các nhãn hàng trên đã có tệp khách hàng riêng và việc xây dựng một hệ thốngE-Commerce của riêng họ giúp tránh bị phụ thuộc không cần thiết vào các sàn thươngmại, giúp giảm chi phí, tăng lợi nhuận, cũng như cung cấp những tính năng, lợi ích,khuyến mãi riêng cho khách hàng của họ.

Đồng thời, với sự bùng nổ của công nghệ (AI, AR, VR,…) trong những năm gần đây,việc có một nền tảng thương mại điện tử riêng là cần thiết để nhãn hàng có thể pháttriển những tính năng mới dựa trên những công nghệ trên để thu hút khách hàng vềcho mình.

Như vậy, một hệ thống E-commerce được thiết kế và xây dựng riêng cho mộthãng thời trang thực chất khơng phải là bài tốn mới nhưng cũng khơng hề lỗithời, mà trái lại cịn là một bài toán rất thiết thực với nhiều tiềm năng cho tươnglai.

</div>Trang 12<div class="page_container" data-page="12">

Vì những lí do trên, nhóm quyết định chọn đề tài “Ứng dụng NestJS và Flutter xâydựng ứng dụng E-ShoppingCart cho thương mại điện tử bán quần áo” cho đồ án

của mình. Nhóm cho rằng để tài này là phù hợp trong việc giúp nhóm hệ thống hóanhững kiến thức và kĩ năng mình đã thu thập được thành một nền tảng vững chắc choviệc giải quyết các bài toán thực tế trong kỹ thuật phần mềm.

1.2.2 Phạm vi nghiên cứu

Trong đồ án lần này, nhóm sẽ tập trung nghiên cứu về các tính năng cần có đối vớiứng dụng thương mại điện tử bán quần áo cho người dùng cuối cũng như cho quản lý,nhân viên thuộc nhãn hãng. Đồng thời nhóm cũng nghiên cứu các công nghệ cần thiếtđể thực hiện các tính năng ấy ở phía Front-end (cụ thể là trong lập trình ứng dụngmobile), Back-end, Database, và Deployment.

1.2.3 Đối tượng nghiên cứu

Nhóm sẽ tiến hành nghiên cứu các tính năng cần có cho ứng dụng của mình bằng cáchtham khảo các ứng dụng hiện nay trên thị trường như Uniqlo, H&M (đối với ứng dụngcho người dùng cuối) và các nền tảng quản lý thương mại điện tử như Saleor (đối vớiứng dụng cho nhân viên của nhãn hàng). Đồng thời, nhóm đi vào nghiên cứu cách thiếtkế luồng chạy của hệ thống để thực hiện từng tính năng trên, cũng như các công cụ vàcách cài đặt, xử lý bằng các cơng nghệ mà nhóm sử dụng như Flutter, NestJS, Flask…

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

Về kết quả, nhóm mong muốn có được một hệ thống tương đối hồn chỉnh với cácthành phần cần thiết của một hệ thống thương mại điện tử. Đồng thời, nhóm hi vọnggặt hái được cho mình nhiều kiến thức ở khía cạnh xây dựng hệ thống cũng như cóđược một góc nhìn tổng thể đối với các bài toán trong kỹ thuật phần mềm. Nhóm cũngmong muốn sau đồ án này, kỹ năng của mỗi thành viên trong lập trình, sử dụng cácnền tảng, dịch vụ trong kỹ thuật phần mềm, sử dụng các cơng cụ hỗ trợ nói chung,cũng như đối với các cơng nghệ sở trường của mình nói riêng cũng được cải thiện vàtrở nên vững vàng.

</div>Trang 13<div class="page_container" data-page="13">

 PgAdmin4: là một công cụ quản lý CSDL mã nguồn mở được phát triển để

quản lý và tương tác với CSDL PostgreSQL. pgAdmin4 cung cấp một giao diệnđồ họa dễ sử dụng để quản lý các CSDL PostgreSQL.

 Docker: Cơng cụ đóng gói các stack của ứng dụng.

 Miniconda3: Phiên bản nhỏ gọn hơn của Anaconda – Nền tảng quản lý

package và môi trường ảo cho Python chuyên dụng cho việc phát triển các phầnmềm Học máy và Khoa học Dữ liệu.

 Mermaid: Công cụ chuyên dụng cho việc vẽ các sơ đồ, bảng biểu bằng cách

render các đoạn text Markdown.

 StarUML: Công cụ chuyên dụng cho việc vẽ các sơ đồ UML.

 Notion: Quản lý công việc, Ghi chép thông tin, thảo luận.

</div>Trang 14<div class="page_container" data-page="14">

Chương 2: KIẾN THỨC NỀN TẢNG2.1

Flutter

2.1.1 Định nghĩa

Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trêniOS và Android trong khoảng thời gian ngắn. Flutter hoạt động với những code sẵn cóđược sử dụng bởi các lập trình viên, các tổ chức. Ngày càng phát triển, ngày nayFlutter còn có thể xây dựng các ứng dụng có thể hoạt động trên cả nền tảng nhúng vàweb một cách nhanh chóng. Flutter hồn tồn miễn phí và là mã nguồn mở nên ngàycàng được tin dung bởi các doanh nghiệp và lập trình viên trên tồn thế giới, tạo nênmột cộng đồng phát triển đi cùng với hệ sinh thái hỗ trợ framework tốt, hứa hẹn sẽ làmột trong những framework được ưu tiên lựa chọn bởi lập trình viên di động trongtương lai gần.

Hình 2. 1 Flutter

2.1.2 Tính năng nổi bật của Flutter

 Flutter là một cross platform framework, sử dụng ngơn ngữ lập trình Dart đơngiản, dễ học.

 Hỗ trợ phát triển ứng dụng di động nhanh chóng. Giao diện người dùng đẹp, có thể biến đổi linh hoạt. Flutter hỗ trợ cho nhiều widget khác nhau.

 Trên nhiều nền tảng có thể thể hiện nhiều UI khác nhau.

</div>Trang 15<div class="page_container" data-page="15">

 Hiệu năng của ứng dụng cao, đáp ứng nhu cầu của người dùng.

2.1.3 Ưu và nhược điểm2.1.3.1 Ưu điểm

 Flutter là bộ Open-Source SDK nên cộng đồng Developer có thể cùng tham giađể phát triển ứng dụng.

 Giao diện đẹp, sắc nét, cung cấp nhiều widget với nhiều sự lựa chọn.

 Viết code ứng dụng nhanh hơn với hỗ trợ Hot Reload trong quá trình viết, cóthể cập nhật ứng dụng rất nhanh khi source code của bạn thay đổi mà không cầnbuild lại.

 Trải nghiệm Native hay độ mượt ứng dụng tốt như Native nhờ có ngơn ngữDart hỗ trợ AOT, compile nhanh hơn, cải thiện startup time và performance. Code một lần chạy được trên cả hai hệ điều hành iOS và Android với cùng một

2.1.3.2 Nhược điểm

 Cộng đồng hỗ trợ và thư viện hạn chế hơn so với Native SDK do Flutter mớiđược phát hành vào năm 2017 nên cộng đồng của nó chưa mở rộng bằng cácnền tảng Native.

 Kích thước file lớn do cấu trúc của Flutter SDK có chứa các thư viện xử lý trêncả iOS và Android.

</div>Trang 16<div class="page_container" data-page="16">

2.1.4 Pattern áp dụng trong dự án (Domain Driven Design)

Hình 2. 2. Cấu trúc phân lớp trong D.D.D

Được phát triển bởi Eric Evans vào những năm 2000 và được xuất bản trong cuốn sách"Domain-Driven Design: Tackling Complexity in the Heart of Software" [2]. DDDđược sinh ra để giải quyết những thách thức trong việc phát triển các ứng dụng phứctạp, đặc biệt là những ứng dụng có yêu cầu về kỹ thuật cao và khả năng mở rộng.Khi phát triển các dự án có độ phức tạp cao, lập trình viên và các chuyên gia về lĩnhvực của dự án có thể gặp những khó khăn trong việc trao đổi và đọc kiến trúc dự án.Do đó, D.D.D đề xuất việc lấy domain model làm tiêu chuẩn, hay được hiểu là lấykiến trúc chức năng dự án làm tiêu chuẩn. Sẽ đồng nhất trong cách gọi tên, đặt tên giữathực tế và việc code; đưa ngôn ngữ lập trình gần nhất với cách hiểu ngồi thực tế.Trong D.D.D, Entity được xem như một Object Model nhưng có thể thay đổi một vàithứ (kiểu dữ liệu, biến, hàm…) để có thể phù hợp với giao diện và logic sử dụng ở ứngdụng. Không giống với Object Model sẽ là phản ánh hoàn toàn lại những giá trị (kiểudữ liệu, tên biến, giá trị…) nhận từ api, bộ nhớ cache... Các đối tượng cũng được yêucầu tuân thủ quy tắc bất biến - Immutable, không được sửa đổi các giá trị trong mộtđối tượng, thay vào đó là tạo ra đối tượng mới thông qua hàm copyWith (…) với mộtvài tham số đầu vào tương ứng giá trị cần thay đổi.

</div>Trang 17<div class="page_container" data-page="17">

Hình 2.3 Thực tế cấu trúc dự án đối với Driven D

</div>Trang 18<div class="page_container" data-page="18">

2.2

NestJS2.2.1 Giới thiệu về NestJS

NestJS là một framework Node.js hiện đại và mạnh mẽ, được xây dựng trên cơ sởTypeScript và lấy cảm hứng từ Angular. Với cấu trúc modular và sự linh hoạt, NestJSgiúp xây dựng ứng dụng server-side hiệu quả và dễ bảo trì. Trong báo cáo này, em sẽtìm hiểu về các khái niệm cơ bản, các thành phần chính và ưu điểm của NestJS.

Hình 2. 2 Logo NestJS framework

</div>Trang 19<div class="page_container" data-page="19">

2.2.2 Các khái niệm cơ bản2.2.2.1 Module (Mô đun)

NestJS sử dụng khái niệm mô-đun để tổ chức mã nguồn. Một ứng dụng NestJS có thểbao gồm nhiều mơ-đun, giúp tạo ra một cấu trúc rõ ràng và dễ quản lý.

Hình 2. 3 NestJS tổ chức theo module

Mỗi mô-đun tập trung vào một phần cụ thể của ứng dụng, đóng gói controllers,providers và các thành phần khác. Điều này tạo ra một cấu trúc rõ ràng, giúp quản lýmã nguồn dễ dàng và tăng tính tái sử dụng. Mơ-đun cịn cho phép thiết lập cácdependency và liên kết chúng, giúp xây dựng ứng dụng với sự tổ chức và mở rộng dễdàng.

</div>Trang 21<div class="page_container" data-page="21">

2.2.2.3 Provider

Providers là các thành phần chịu trách nhiệm xử lý business logic. Chúng có thể làservice, repository hoặc bất kỳ đối tượng nào khác cần thiết.

Hình 2. 5 Controller trong NestJS

Hình 2. 6 Đoạn code sử dụng prodvider

</div>Trang 22<div class="page_container" data-page="22">

2.2.2.4 Middleware

NestJS hỗ trợ middleware, giúp thực hiện các chức năng trung gian trước khi yêu cầuđến controller.

Hình 2. 7 Middleware minh họa

Hình 2. 8 Đoạn code minh họa sử dụng middeware

2.2.2.5 Interceptor

Interceptors là các đoạn mã thực hiện trước hoặc sau khi controller xử lý yêu cầu.Chúng có thể được sử dụng để ghi log, thêm xác thực, hay thậm chí biến đổi dữ liệutrả về.

</div>Trang 23<div class="page_container" data-page="23">

Hình 2. 9 Hình ảnh minh họa Interceptor

Trong đồ án lần này, chúng em sử dụng Interceptor để biến đổi tất cả các dữ liệu trả vềthành một dạng đồng nhất.

</div>Trang 24<div class="page_container" data-page="24">

2.3

Amazon Web Service2.3.1 Giới thiệu về AWS

Amazon Web Services (AWS) là một nền tảng đám mây hàng đầu, cung cấp các dịchvụ đa dạng giúp phát triển, triển khai và quản lý ứng dụng một cách linh hoạt và hiệuquả. Trong báo cáo này, chúng ta sẽ tập trung vào một số dịch vụ quan trọng nhưAmazon S3, ECS (Elastic Container Service), ECR (Elastic Container Registry),CodeBuild và CodePipeline.

</div>Trang 25<div class="page_container" data-page="25">

2.3.2.2 Amazon ECS (Elastic Container Service)

Hình 2. 12 Logo AWS ECS

ECS là dịch vụ quản lý và triển khai các container Docker trên AWS. Với ECS, ngườiphát triển có thể dễ dàng xây dựng, chạy và quản lý ứng dụng containerized một cáchlinh hoạt và hiệu quả.

2.3.2.3 Amazon ECR (Elastic Container Registry)

Hình 2. 13 Logo AWS ECR

ECR cung cấp một registry quản lý container cho việc lưu trữ, quản lý và triển khaihình ảnh Docker. Nó tích hợp chặt chẽ với ECS, tạo ra một luồng làm việc liền mạchtừ việc xây dựng container đến triển khai chúng.

</div>Trang 26<div class="page_container" data-page="26">

2.3.2.4 Amazon CodeBuild

Hình 2. 14 Logo AWS Codebuild

CodeBuild là dịch vụ xây dựng tự động giúp tự động hóa quy trình xây dựng mãnguồn từ mã nguồn (source) đến gói triển khai có thể triển khai trên nền tảng AWShoặc các mơi trường khác.

2.3.2.5 Amazon CodePipeline

Hình 2. 15 Logo AWS CodePipeline

CodePipeline là dịch vụ liên tục triển khai và triển khai tự động. Nó cho phép tạo racác ống dẫn (pipelines) để tự động hóa quy trình tích hợp mã nguồn, kiểm thử và triểnkhai ứng dụng.

 Bảo Mật và Tuân Thủ: AWS đảm bảo môi trường đám mây an toàn và tuân thủ

các tiêu chuẩn bảo mật hàng đầu.

</div>Trang 27<div class="page_container" data-page="27">

 Tích Hợp Liền Mạch: Các dịch vụ như S3, ECS, ECR, CodeBuild và

CodePipeline tích hợp chặt chẽ, tạo ra một quy trình làm việc hiệu quả và liềnmạch.

2.3.4 Kết luận

Tổng kết, kiến thức về nền tảng AWS, đặc biệt là các dịch vụ như S3, ECS, ECR,CodeBuild và CodePipeline, là quan trọng để xây dựng và quản lý các ứng dụng đámmây một cách hiệu quả. Với sự linh hoạt, mở rộng và tích hợp sâu rộng, AWS là lựachọn hàng đầu cho việc phát triển và triển khai ứng dụng trong môi trường đám mây.

</div>Trang 28<div class="page_container" data-page="28">

2.4

Flask2.4.1 Giới thiệu về Flask

Flask là một “microframework” cho việc xây dựng các ứng dụng web bằng Python. Sovới các framework khác thì Flask cực kỳ gọn nhẹ vì chỉ bao gồm các thành phần cốtlõi nhất cho việc xây dựng một ứng dụng web. Như vậy Flask sẽ không bao gồm cácthành phần thường thấy trong các framework khác như lớp abstraction để giao tiếp vớiDatabase, ORM.

2.4.2.2 Flask cực kỳ linh hoạt

Flask có đưa ra gợi ý nhưng khơng gị bó lập trình viên phải sử dụng một kiến trúc haythư viện cụ thể nào. Đồng thời, cộng đồng của Flask cũng cực kỳ lớn mạnh và lậptrình viên có thể tìm được rất nhiều extension để cài đặt thêm vào và sử dụng vớiFlask.

2.4.2.3 Flask là web framework phổ biến nhất cho Python

Theo khảo sát của Stack Overflow năm 2023, thì Flask vẫn là web framework phổbiến nhất trong số các web framework cho Python, phổ biến hơn Django và FastAPI.

2.4.3 Các tính năng chính của Flask

- Môi trường development với debugger.- Hỗ trợ unit testing.

- Xử lý các RESTFUL requests.

- Sử dụng các Jinja template để xây dựng ứng dụng web.

</div>Trang 29<div class="page_container" data-page="29">

- Hỗ trợ bảo mật cookie.

- 100% tuân thủ theo WSGI 1.0.

- Tương thích với Google App Engine.

- Có nhiều Extensions để thêm vào Flask nhằm thêm tính năng.

2.4.4 Ưu điểm và Nhược điểm2.4.4.1 Ưu điểm

 Linh hoạt: Flask chỉ cung cấp những phần cốt lõi nhất cho lập trình ứng dụng web

nên không bị phụ thuộc vào thư viện cụ thể nào. Lập trình viên hồn tồn có thể sửdụng Flask chung với nhiều thư viện, công cụ tùy biến khác nhau

 Đơn giản và dễ học: Flask tương đối dễ học và dễ sử dụng vì framework gần như

khơng có dependencies nào, và tài liệu chính cho Flask thì cực kỳ đầy đủ.

 Dễ mở rộng: Dù Flask chỉ cung cấp các phần cốt lỗi, vẫn có rất nhiều extension

được cộng đồng Flask cung cấp để lập trình viên mở rộng ứng dụng của họ

2.4.4.2 Nhược điểm

 Ít tính năng mặc định: Điểm mạnh cũng là điểm yếu của Flask, vì Flask thiếu

nhiều tính năng mặc định mà các framework khác có, lập trình viên cũng phải tự đitìm các extension và thư viện ngồi để bù vào

 Khơng phù hợp với hệ thống lớn, phức tạp: Vì Flask chỉ là một

microframework, việc sử dụng Flask trong một hệ thống sẽ đòi hỏi phía lập trìnhviên phải tự config và tinh chỉnh rất nhiều

2.4.5 Kết luận

Flask là một framework gọn nhẹ và dễ dàng sử dụng khi cần xây dựng một webapplication cho Python. Với sự linh hoạt cũng như khả năng mở rộng, Flask là một lựachọn tốt khi lập trình viên cần một web application không quá phức tạp.

2.5

Pre-trained ResNet-502.5.1 Pre-trained Model

Pre-trained model là một mơ hình máy học đã được huấn luyện trước trên một tập dữ liệu lớn. Thơng thường, các mơ hình này được đào tạo trên tập dữ liệu có tính tổng qt cao, thường rất lớn và đa dạng, để học các đặc trưng tổng quát và phức tạp.

</div>Trang 30<div class="page_container" data-page="30">

Bởi vì quá trình huấn luyện một mơ hình có thể mất rất nhiều thời gian và tài ngun tính tốn, khi một mơ hình đã được đào tạo hồn chỉnh, trạng thái của nó, hay cịn gọi là "trọng số" (weights), được lưu trữ. Sau đó, các mơ hình này có thể được sử dụng trực tiếp cho nhiều tác vụ khác nhau: có thể là bản thân tác vụ ban đầu mà mơ hình được huấn luyện, hoặc nó có thể được fine-tuned (tinh chỉnh) trên một tập dữ liệu kháccho một tác vụ cụ thể.

Một số ưu điểm của việc sử dụng pre-trained models bao gồm:

 Transfer Learning (Học chuyển giao): Lập trình viên có thể sử dụng pre-trained

model để áp dụng vào các tác vụ khác mà họ cần xử lý => Đặc biệt hữu ích khi cóít dữ liệu huấn luyện cho tác vụ mới.

 Tiết kiệm thời gian và tài nguyên: Việc sử dụng pre-trained models giúp tiết

kiệm thời gian và tài nguyên so với việc huấn luyện mơ hình từ đầu.

 Hiệu suất cao ngay từ đầu: Pre-trained models thường đã học được nhiều đặc

trưng phức tạp từ dữ liệu lớn, giúp chúng có khả năng đưa ra dự đoán chất lượngcao ngay từ khi đầu, chứ không cần phải đợi đến huấn luyện cho tác vụ cụ thể. Ứng dụng trong nhiều tác vụ: Pre-trained models thường được huấn luyện trên

tập dữ liệu tổng quát, đa dạng, khiến cho các model này rất linh hoạt và có thểđược sử dụng trong nhiều tác vụ khác nhau.

Các pre-trained model phổ biến bao gồm các mơ hình như ResNet, VGG, Inception, vàcác mơ hình trong lĩnh vực xử lý ngôn ngữ tự nhiên như BERT, GPT.

2.5.2 ResNet-50

Hình 2. 17 Kiến trúc mơ hình ResNet-50

ResNet-50 là một mơ hình mạng CNN (Convolutional Neural Network – Mạng tíchchập) thuộc họ ResNet (Residual Networks), được giới thiệu bởi Microsoft Research

</div>Trang 31<div class="page_container" data-page="31">

vào năm 2015. ResNet-50 là một trong những mơ hình nổi tiếng trong lĩnh vực thị giácmáy tính và nhận diện hình ảnh, đặc biệt là trong các tác vụ như nhận diện vật thể,phân loại ảnh.

ResNet-50 được huấn luyện trên tập dữ liệu ImageNet nổi tiếng gồm trên 14 triệu tấmảnh được gắn nhãn thuộc nhiều phân loại khác nhau (Động vật, Đồ dùng cá nhân, Sảnphẩm thời trang…).

Theo nghiên cứu, ResNet-50 mang lại độ chính xác cao hơn các mơ hình tương tự nhưAlexNet, VGG19 khi sử dụng trong các hệ thống khuyến nghị sản phẩm thời trang.Khi đưa đầu vào là một (hoặc nhiều) hình ảnh sản phẩm thời trang vào mơ hìnhResNet-50 thì đầu ra là các vector đặc trưng thể hiện các đặc trưng của từng sản phẩm.Tổng hợp tất các vector đặc trưng của tất cả các sản phẩm tạo thành một khơng gianvector mà ở đó, các sản phẩm tương đồng với nhau sẽ có các vector đặc trưng nằm“gần” nhau trong khơng gian vector. Khi đó ta có thể lấy ra được danh sách các sảnphẩm tương đồng với một sản phẩm bất kỳ bằng cách sử dụng một số cơng thức tínhkhoảng cách giữa các vector đặc trưng như Euclidean Distance, Cosine Similarity,Jaccard Similarity.

2.5.3 Keras

Hình 2. 18. Thư viện Keras

Keras là một thư viện mã nguồn mở dành cho ngơn ngữ lập trình Python, được sửdụng để xây dựng và huấn luyện mơ hình neural network. Keras phổ biến vì Kerascung cấp nhiều API ở mức high-level cho người dùng, cho phép xây dựng và huấnluyện các mơ hình neural network nhanh hơn và dễ dàng hơn một số thư viện khác nhưTensorFlow hay PyTorch. Keras cũng bao gồm nhiều pre-trained models như VGG19,ResNet-50…

</div>Trang 32<div class="page_container" data-page="32">

2.5.4 Kết luận

Việc sử dụng một pre-trained model, cụ thể ở đây là ResNet-50 mang lại nhiều lợi íchnhư giảm thời gian chi phí xây dựng một mơ hình từ đầu nhưng vẫn mang lại hiệu quảtốt. Trong đó, Keras là một thư viện mạnh mẽ hỗ trợ việc xây dựng và sử dụng các mơhình pre-trained như ResNet-50.

</div>Trang 33<div class="page_container" data-page="33">

Bài tốn có thể chia ra làm 2 bài toán nhỏ:

- Xây dựng ứng dụng cho người dùng cuối nhằm quảng bá, thu hút và phục vụcác khách hãng của hãng thời trang.

- Xây dựng ứng dụng quản lý thương mại điện tử giành cho nhân viên thuộc nhãnhàng ấy sử dụng.

Đối với ứng dụng giành cho phía khách hàng, hệ thống phải đáp ứng được các yêu cầucủa một ứng dụng E-Commerce: Cho phép người xem các danh mục sản phẩm, Xemdanh sách sản phẩm, Tìm kiếm sản phẩm, Xem chi tiết sản phẩm, Thêm sản phẩm vàodanh sách yêu thích, Thêm sản phẩm vào giỏ hàng, Xem giỏ hàng, Đặt hàng, Thanhtoán, Nhận thông báo, và Theo dõi đơn hàng. Đồng thời, ứng dụng cần có thêm một sốtính năng tiện ích để thu hút khách hàng sử dụng ứng dụng.

Đối với ứng dụng giành cho phía nhân viên, hệ thống cần đáp ứng yêu cầu của mộtứng dụng quản lý thương mại điện tử: Quản lý nhân viên, Quản lý sản phẩm, Quản lýphân loại sản phẩm, Quản lý biến thể sản phẩm, Quản lý quyền hạn, Quản lý nhómquyền hạn, Quản lý đơn hàng. Đồng thời, vì nhãn hàng thời trang thường có cửa hàngoffline, ứng dụng cũng cần cấp cung tính năng để tạo đơn hàng khi khách đến muahàng trực tiếp tại cửa hàng.

</div>Trang 34<div class="page_container" data-page="34">

3.1.2 Hướng giải quyết

Để giải quyết bài tốn trên, nhóm quyết định chọn:

- Flutter để xây dựng ứng dụng (frontend) cho khách hàng và ứng dụng cho nhânviên nhãn hàng.

- NestJS để xây dựng backend cho hệ thống.- PostgreSQL làm cơ sở dữ liệu của hệ thống.

- Flask, Keras để xây dựng hệ khuyến nghị đơn giản cho hệ thống.

3.1.3 Công cụ, công nghệ sử dụng

 Front-end: Flutter, Dart.

 Back-end: NestJS, TypeScript, JWT, Mailer, AWS S3, ECS, ECR, Codebuild,CodePipeline, Python, Flask, Keras.

</div>Trang 35<div class="page_container" data-page="35">

3.2

Phân tích yêu cầu3.2.1 Phân tích Use case

3.2.1.1 Sơ đồ Use Case

Hình 3. 1 Sơ đồ Use Case

</div>Trang 36<div class="page_container" data-page="36">

3.2.1.2 Đặc tả Use Case

3.2.1.2.1 Đăng nhập (Khách hàng)

Tên use-case Đăng nhập (Khách hàng)

Mô tả Người dùng đăng nhập vào hệ thống để quản lý giỏ hàng, tài khoản và mua hàng

Sự kiện kích hoạt Người dùng mở ứng dụng

Điều kiện trước Khơng có

Điều kiện sau Người dùng đăng nhập thành công vào ứng dụng

Luồng chính 1. Người dùng nhập email, mật khẩu2. Người dùng nhấn Sign in

3. Hệ thống xác thực người dùng4. Người dùng đăng nhập thành công

Luồng thay thế 1a. Người dùng nhấn chọn Automation Login

2a. Người dùng được tự động đăng nhập vào lần tới mở ứng dụng

Luồng ngoại lệ 3b. Hệ thống trả về kết quả không thành công vì người dùng nhập sai mật khẩu hoặc vì tài khoản không tồn tại4b. Người dùng nhận được thông báo đăng nhập thất bại

Bảng 3. 1 Đặc tả Use Case Đăng nhập (Khách hàng)

</div>Trang 37<div class="page_container" data-page="37">

3.2.1.2.2 Đăng ký

Mô tả Người dùng đăng ký tài khoản để quản lý giỏ hàng, tài khoản và mua hàng

Sự kiện kích hoạt Người dùng di chuyển đến màn hình “Đăng ký”

Điều kiện trước Khơng có

Điều kiện sau Người dùng đăng ký tài khoản thành cơng

Luồng chính 1. Người dùng nhập họ tên, email, mật khẩu2. Người dùng nhấn Sign up

3. Hệ thống gửi mã xác nhận về email4. Người dùng nhập mã xác nhận5. Người dùng đăng ký thành công

Luồng thay thế 4a. Mã xác nhận hết hạn sử dụng5a. Người dùng nhấn Gửi lại mã6a. Người dùng nhập mã xác nhận7a. Người dùng đăng ký thành công

Luồng ngoại lệ 3b. Hệ thống trả về kết quả khơng thành cơng vì đã có tài khoản với email tương tự

4b. Người dùng nhận được thông báo đăng ký thất bại

Bảng 3. 2 Đặc tả Use Case Đăng ký

</div>Trang 38<div class="page_container" data-page="38">

3.2.1.2.3 Quên mật khẩu

Mô tả Người dùng quên mật khẩu và cần lấy lại mật khẩu

Sự kiện kích hoạt Người dùng nhấn “Forgot Password”

Điều kiện trước Khơng có

Điều kiện sau Người dùng cài đặt lại mật khẩu thành công

2. Hệ thống gửi mã xác nhận về email3. Người dùng nhập mã xác nhận4. Người dùng xác nhận thành công5. Người dùng nhập mật khẩu mới

6. Hệ thống reset mật khẩu cho người dùng

Luồng thay thế 3a. Mã xác nhận hết hạn sử dụng4a. Người dùng nhấn Gửi lại mã5a. Người dùng nhập mã xác nhận6a. Người dùng xác nhận thành công

Luồng ngoại lệ 1b. Hệ thống trả về lỗi vì tài khoản chưa được đăng ký2b. Người dùng nhận được thông báo cài đặt lại mật khẩuthất bại

Bảng 3. 3 Đặc tả Use Case Quên mật khẩu

</div>Trang 39<div class="page_container" data-page="39">

3.2.1.2.4 Xem danh sách loại sản phẩm

Tên use-case Xem danh sách loại sản phẩm

Mô tả Người dùng cần xem danh sách các loại sản phẩm (quần, áo, mũ, giày….)

Sự kiện kích hoạt - Người dùng đăng nhập thành công

- Người dùng nhấn “Use without sign in” ở màn hình “Đăng nhập”

Điều kiện trước Khơng có

Điều kiện sau Danh sách các loại sản phẩm được hiển thị cho người dùng

Luồng chính 1. Người dùng đăng nhập thành công

2. Hệ thống trả về danh sách tất cả các loại sản phẩm có trong hệ thống

3. Hệ thống trả về danh sách các phân loại con của phân loại mặc định

4. Ứng dụng hiển thị danh sách các loại sản phẩm và các phân loại con của loại sản phẩm mặc định được hiển thị đầu tiên

Bảng 3. 4 Đặc tả Use Case Xem danh sách loại sản phẩm

</div>Trang 40<div class="page_container" data-page="40">

3.2.1.2.5 Xem danh sách sản phẩm

Tên use-case Xem danh sách sản phẩm

Mô tả Người dùng cần xem danh sách các sản phẩm thuộc một phân loại nhất định

Sự kiện kích hoạt Người dùng chọn một phân loại sản phẩm

Điều kiện trước Khơng có

Điều kiện sau Danh sách các sản phẩm thuộc một phân loại được hiển thị cho người dùng

Luồng chính 1. Người dùng chọn một loại sản phẩm

2. Hệ thống trả về danh sách các sản phẩm thuộc loại sản phẩm trên

3. Ứng dụng hiển thị danh sách các sản phẩm thuộc loại sản phẩm tương ứng

Bảng 3. 5 Đặc tả Use Case Xem danh sách sản phẩm

</div>

đồ án ứng dụng nestjs và flutter xây dựng ứng dụng e shoppingcart cho thương mại điện tử bán quần áo

<b>Sinh viên thực hiện:</b>

<b>Nguyễn Thái Tuấn – MSSV: 20522122Mai Phạm Quốc Hưng – MSSV: 20521366</b>

<b>LỜI CẢM ƠN</b>

<b>Chương 1:GIỚI THIỆU TỔNG QUAN...1</b>

1.1Thông tin người thực hiện...1

1.2Tổng quan đề tài...1

1.3Công cụ sử dụng...3

<b>Chương 2:KIẾN THỨC NỀN TẢNG...4</b>

2.3Amazon Web Service...14

3.1Giới thiệu chung về bài toán...23

3.2Phân tích yêu cầu...25

<b>TÀI LIỆU THAM KHẢO...113</b>

<b>DANH MỤC CÁC BẢ</b>

<b>DANH MỤC HÌNH ẢN</b>

<b>DANH MỤC TỪ VIẾT TẮT</b>

Chương 1: <b>GIỚI THIỆU TỔNG QUAN </b>

<b>1.1 Thông tin người thực hiện</b>

<b>1.2 Tổng quan đề tài</b>

<b>Chương 2: KIẾN THỨC NỀN TẢNG2.1</b>

<b>2.2</b>

<b>2.3</b>

<b>2.4</b>

<b>2.5</b>

<b>3.2</b>

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về