Đang tải... (xem toàn văn)
ĐẠ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
Trang 3LỜ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 quá trình làm đồ án Những gì nhóm họcđược qua quá trình làm việc với thầy không chỉ có ý nghĩa lớn với sự hoà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 quý 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 quý thầy cô để hoà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
Trang 4Chươ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
Trang 52.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
Trang 6DANH 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 yê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 yê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
Trang 7Bả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
Trang 8DANH 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 toá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 toán qua ZaloPay 60
Hình 3 11 Sơ đồ Activity Quét mã sản phẩm 61
Trang 9Hì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
Trang 10DANH 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
Trang 11Chươ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 toá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.
Trang 12Vì 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 hoà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.
Trang 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.
Trang 14Chươ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 hoàn toà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 toà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.
Trang 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.
Trang 162.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 ngoà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.
Trang 17Hình 2.3 Thực tế cấu trúc dự án đối với Driven D
Trang 182.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
Trang 192.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.
Trang 212.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
Trang 222.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ề.
Trang 23Hì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.
Trang 242.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.
Trang 252.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.
Trang 262.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.
Trang 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.
Trang 282.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.
Trang 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 hoàn toà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 ngoà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 quát 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.
Trang 30Bở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 nguyên tính toán, khi một mô hình đã được đào tạo hoà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
Trang 31và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…
Trang 322.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.
Trang 33Bài toá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.
Trang 343.1.2 Hướng giải quyết
Để giải quyết bài toá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.
Trang 353.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
Trang 363.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)
Trang 373.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ý
Trang 383.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
Trang 393.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
Trang 403.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