Tải bản đầy đủ (.pdf) (56 trang)

Xây dựng ứng dụng bán mỹ phẩm trực tuyến và tích hợp phân tích thành phần hóa học trong mỹ phẩm

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 (2.51 MB, 56 trang )

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

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: Xây dựng ứng dụng bán mỹ phẩm trực tuyến và tích
hợp phân tích thành phần hóa học trong mỹ phẩm

Giảng viên hướng dẫn: Thầy Huỳnh Tuấn Anh
Nhóm thực hiện:
19521421 – Lâm Nguyễn Bửu Duy
19521880 – Nguyễn Thanh Nga

TP. HỒ CHÍ MINH, 2021


NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................


................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................
................................................................................................................................................

……., ngày……...tháng……năm 2021
Người nhận xét
(Ký tên và ghi rõ họ tên)

1


LỜI CẢM ƠN
Trong quá trình học tập, nghiên cứu và phát triển đề tài “Xây dựng ứng dụng bán mỹ phẩm
trực tuyến và tích hợp phân tích thành phần hóa học trong mỹ phẩm” chúng em đã nhận
được sự giúp đỡ, chỉ bảo nhiệt tình của thầy để hồn thành đồ án này.
Nhóm em xin chân thành gửi lời cảm ơn đến thầy Huỳnh Tuấn Anh – Giảng viên Khoa Công
nghệ phần mềm, Trường Đại học Công nghệ thông tin, Đại học Quốc gia Thành phố Hồ Chí
Minh – giảng viên dạy hướng dẫn môn Đồ án 1, đã tận tình hướng dẫn và giúp đỡ về kiến
thức, phương pháp cho chúng em trong suốt quá trình thực hiện và hoàn thành đồ án.
Hi vọng với sự chỉ bảo và góp ý từ thầy, nhóm đề tài có thể tiếp tục phát triển để ứng dụng
ngày càng được mở rộng và phục vụ được tốt hơn cho người dùng.
Mặc dù đã có nhiều cố gắng trong suốt q trình thực hiện đề tài, song không thể tránh khỏi
những hạn chế, thiếu sót. Chúng em mong rằng sẽ nhận được những đóng góp và nhận xét
chân thành từ thầy, các bạn sinh viên và người dùng trong quá trình sử dụng phần mềm để
phần mềm ngày càng hoàn thiện hơn nữa. Mọi đóng góp xin vui lịng gửi về địa chỉ email:

19521421@gm.uit.edu.vn.
Mỗi ý kiến đóng góp của thầy và các bạn sẽ là một nguồn động lực to lớn đối với chúng em
để chúng em có thể cải thiện phần mềm tốt hơn và xây dựng những phần mềm hữu ích đối
với người dùng hơn nữa.
Chúng em xin trân trọng cảm ơn.

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

2


Nộ i dung
Chương 1: GIỚI THIỆU ................................................................................................................7
1.1 Đặt vấn đề ..................................................................................................................................7
1.2 Giải pháp ....................................................................................................................................7
1.3 Mục tiêu ......................................................................................................................................7
Chương 2: TỔNG QUAN ...............................................................................................................8
2.1 Tổng quan về đồ án ..............................................................................................................8
2.1.1 Tên đồ án: ...................................................................................................................8
2.1.2 Link github quản lý source code ................................................................................8
2.2 Cơ sở lý thuyết .....................................................................................................................8
2.2.1 Nền tảng Cross Platform ............................................................................................8
2.2.2 Django Rest Framework.............................................................................................9
2.3 Cơng nghệ sử dụng .............................................................................................................10
2.3.1 Ngơn ngữ lập trình Java-scripts................................................................................10
2.3.2 React-Native .............................................................................................................12
2.3.3 Phần mềm lập trình VSCode ....................................................................................13
2.3.4 Dịch vụ GitHub ........................................................................................................15
Chương 3: PHÂN TÍCH, THIẾT KẾ ..........................................................................................16
3.1 Cơ sở dữ liệu ......................................................................................................................16

3.1.1 Sơ đồ lớp ..................................................................................................................16
3.1.2 Chi tiết các thuộc tính...............................................................................................16
3.2 Yêu cầu chức năng .............................................................................................................21
3.2.1 Sơ đồ use case ..........................................................................................................21
3.2.2 Mô tả tác nhân ..........................................................................................................23
3.2.3 Mô tả use case ..........................................................................................................23
3.3. Đặc tả use case ..................................................................................................................24
UC1_Đăng ký ....................................................................................................................24
UC2_Đăng nhập ................................................................................................................25
UC3_Đổi mật khẩu............................................................................................................26
UC4_Quên mật khẩu .........................................................................................................27
UC5_Thiết lập tài khoản ...................................................................................................28
UC6_Tìm kiếm sản phẩm .................................................................................................29
UC7_Thêm vào giỏ hàng ..................................................................................................30
UC8_CRUD địa chỉ nhận hàng .........................................................................................30
UC9_Đặt hàng ...................................................................................................................33
UC10_Thêm vào mục yêu thích........................................................................................34
UC11_Đánh giá sản phẩm.................................................................................................34
UC12_Theo dõi đơn hàng .................................................................................................35
UC13_Tra cứu thành phần ................................................................................................36
3


UC14_Khóa tài khoản .......................................................................................................37
UC15_CRUD sản phẩm ....................................................................................................38
UC16_Cập nhật trạng thái đơn hàng .................................................................................40
3.4 Thiết kế giao diện ...............................................................................................................41
Chương 4: BẢNG PHÂN CÔNG CÔNG VIỆC .........................................................................51
Chương 5: NHẬN XÉT VÀ HƯỚNG PHÁT TRIỂN ................................................................53
5.1 Nhận xét .............................................................................................................................53

5.1.1 Kết quả đạt được ......................................................................................................53
5.1.2 Đánh giá về ứng dụng ..............................................................................................53
5.2 Hướng phát triển và mở rộng .............................................................................................53
Chương 6: YÊU CẦU CÀI ĐẶT ..................................................................................................54
TÀI LIỆU THAM KHẢO ............................................................................................................55

4


DANH MỤC HÌNH
Hình 1 Cross Platform ...................................................................................................................................... 8
Hình 2 Ba framework phát triển mobile phổ biến ............................................................................................ 9
Hình 3 Django rest framework ....................................................................................................................... 10
Hình 4 Ngơn ngữ Javascript ........................................................................................................................... 11
Hình 5 Framework React Native .................................................................................................................... 12
Hình 6 Phần mềm lập trình VSCode............................................................................................................... 14
Hình 7 Sơ đồ lớp ............................................................................................................................................. 16
Hình 8 Sơ đồ use case ..................................................................................................................................... 22
Hình 9 Sơ đồ hoạt động UC1_Đăng ký .......................................................................................................... 25
Hình 10 Sơ đồ hoạt động UC2_Đăng nhập .................................................................................................... 26
Hình 11 Sơ đồ hoạt động UC3_Đổi mật khẩu ................................................................................................ 27
Hình 12 Sơ đồ hoạt động UC4_Quên mật khẩu ............................................................................................. 28
Hình 13 Sơ đồ hoạt động UC5_Thiết lập tài khoản ........................................................................................ 29
Hình 14 Sơ đồ hoạt động UC6_Tìm kiếm sản phẩm ...................................................................................... 29
Hình 15 Sơ đồ hoạt động UC7_Thêm vào giỏ hàng ....................................................................................... 30
Hình 16 Sơ đồ hoạt động UC8_CRUD địa chỉ nhận hàng ............................................................................. 32
Hình 17 Sơ đồ hoạt động UC9_Đặt hàng ....................................................................................................... 33
Hình 18 Sơ đồ hoạt động UC10_Thêm mục u thích ................................................................................... 34
Hình 19 Sơ đồ hoạt động UC11_Đánh giá ..................................................................................................... 35
Hình 20 Sơ đồ hoạt động UC12_Theo dõi đơn hàng ...................................................................................... 36

Hình 21 Sơ đồ hoạt động UC13_Tra cứu thành phần ..................................................................................... 36
Hình 22 Sơ đồ hoạt động UC14_Khóa tài khoản ........................................................................................... 37
Hình 23 Sơ đồ hoạt động UC15_CRUD sản phẩm......................................................................................... 39
Hình 24 Sơ đồ hoạt động UC16_Cập nhật trạng thái đơn hàng ..................................................................... 40
Hình 25 Giao diện đăng ký ............................................................................................................................. 41
Hình 26 Giao diện đăng nhập ......................................................................................................................... 41
Hình 27 Giao diện quên mật khẩu .................................................................................................................. 42
Hình 28 Giao diện thiết lập tài khoản ............................................................................................................. 42
Hình 29 Giao diện trang chủ của khách hàng ................................................................................................ 43
Hình 30 Giao diện tìm kiếm sản phâm ........................................................................................................... 43
Hình 31 Giao diện chi tiết sản phẩm ............................................................................................................... 44
Hình 32 Giao diện thêm vào giỏ hàng ........................................................................................................... 44
Hình 33 Giao diện giỏ hàng ............................................................................................................................ 45
Hình 34 Giao diện CRUD địa chỉ nhận hàng.................................................................................................. 45
Hình 35 Giao diện xác nhận đặt hàng ............................................................................................................. 46
Hình 36 Giao diện sản phẩm u thích ........................................................................................................... 46
Hình 37 Giao diện danh mục sản phẩm .......................................................................................................... 47
Hình 38 Giao diện đánh giá sản phẩm ............................................................................................................ 47
Hình 39 Giao diện tra cứu thành phẩn ............................................................................................................ 48
Hình 40 Giao diện trạng thái đơn hàng ........................................................................................................... 48
Hình 41 Giao diện trang chủ (admin) ............................................................................................................. 49
Hình 42 Giao diện danh sách sản phẩm .......................................................................................................... 49
Hình 43 Giao diện CRUD sản phẩm............................................................................................................... 50

5


DANH MỤC BẢNG
Bảng 1 Bảng chi tiết các thuộc tính của class User ........................................................................................ 17
Bảng 2 Bảng chi tiết các thuộc tính của class Product.................................................................................... 18

Bảng 3 Bảng chi tiết các thuộc tính của class ProductCategory ..................................................................... 18
Bảng 4 Chi tiết thuộc tính của class ProductType .......................................................................................... 18
Bảng 5 Bảng chi tiết các thuộc tính của class ProductImage.......................................................................... 18
Bảng 6 Bảng chi tiết các thuộc tính của class Rating ..................................................................................... 19
Bảng 7 Bảng chi tiết các thuộc tính của class LoveList.................................................................................. 19
Bảng 8 Bảng chi tiết các thuộc tính của class Ingedient ................................................................................. 19
Bảng 9 Bảng chi tiết các thuộc tính của class Provinces ................................................................................ 19
Bảng 10 Bảng chi tiết các thuộc tính của class Districts ................................................................................ 19
Bảng 11 Bảng chi tiết các thuộc tính của class Wards.................................................................................... 19
Bảng 12 Bảng chi tiết các thuộc tính của class Delivery ................................................................................ 20
Bảng 13 Bảng chi tiết các thuộc tính của class Order ..................................................................................... 20
Bảng 14 Bảng chi tiết các thuộc tính của class DetailOrder ........................................................................... 21
Bảng 15 Bảng chi tiết các thuộc tính của class Cart ....................................................................................... 21
Bảng 16 Bảng chi tiết các thuộc tính của class Banner .................................................................................. 21
Bảng 17 Mô tả use case .................................................................................................................................. 24
Bảng 18 Đặc tả UC1_Đăng ký........................................................................................................................ 24
Bảng 19 Đặc tả UC2_Đăng nhập .................................................................................................................... 25
Bảng 20 Đặc tả UC3_Đổi mật khẩu ............................................................................................................... 26
Bảng 21 Đặc tả UC4_Quên mật khẩu ............................................................................................................. 27
Bảng 22 Đặc tả UC5_Thiết lập tài khoản ....................................................................................................... 28
Bảng 23 Đặc tả UC6_Tìm kiếm sản phẩm ..................................................................................................... 29
Bảng 24 Đặc tả UC7_Thêm vào giỏ hàng ...................................................................................................... 30
Bảng 25 Đặc tả UC8_CRUD địa chỉ nhận hàng ............................................................................................. 31
Bảng 26 Đặc tả UC9_Đặt hàng....................................................................................................................... 33
Bảng 27 Đặc tả UC10_Thêm mục yêu thích .................................................................................................. 34
Bảng 28 Đặc tả UC11_Đánh giá..................................................................................................................... 35
Bảng 29 Đặc tả UC12_Theo dõi đơn hàng ..................................................................................................... 35
Bảng 30 Đặc tả UC13_Tra cứu thành phần .................................................................................................... 36
Bảng 31 Đặc tả UC14_Khóa tài khoản ........................................................................................................... 37
Bảng 32 Đặc tả UC15_CRUD sản phẩm ........................................................................................................ 38

Bảng 33 Đặc tả UC16_Cập nhật trạng thái đơn hàng ..................................................................................... 40
Bảng 34 Phân công công việc ......................................................................................................................... 51
Bảng 35 Yêu cầu cài đặt ................................................................................................................................. 54

6


Chương 1: GIỚI THIỆU
1.1 Đặt vấn đề
Ngày nay, nhiều cửa hàng kinh doanh hoạt động chủ yếu vẫn mang tính thủ công, dựa vào
kinh nghiệm của hệ thống nhân viên. Do đặc điểm lượng hàng hoá nhập xuất ngày càng lớn
nên cơng tác quản lí, mua bán mất rất nhiều thời gian, cơng sức mà độ chính xác khơng cao,
điều này nhiều khi gây thiệt hại cho cửa hàng.
1.2 Giải pháp
Nhận thấy tình hình trên, nhóm em đã lên ý tưởng xây dựng một ứng dụng hỗ trợ công tác
quản lý, bán hàng và mua hàng trực tuyến. “Xây dựng ứng dụng bán mỹ phẩm trực tuyến và
tích hợp phân tích thành phần hóa học trong mỹ phẩm” ra đời nhằm đáp ứng nhu cầu hiện
đại hóa hệ thống quản lý và bán hàng, đưa hệ thống phần mềm vào để thay thế công tác quản
lý thủ công, nâng cao trải nghiệm mua hàng trực tuyến cho người dùng.
1.3 Mục tiêu
Xây dựng một phần mềm hỗ trợ cửa hàng thực hiện công tác quản lý sản phẩm và trạng thái
đơn hàng, cung cấp một ứng dụng mua sắm đáp ứng các nhu cầu của khách hàng, cụ thể là
trong kinh doanh mỹ phẩm.
Xây dựng giao diện phần mềm một cách trực quan, sinh động, dễ sử dụng, thẩm mỹ.
Các xử lý thành phần hoạt động một cách mượt mà để mang đến trải nghiệm thú vị và tiện
ích cho người dùng.

7



Chương 2: TỔNG QUAN
2.1 Tổng quan về đồ án
2.1.1 Tên đồ án:


Tên tiếng việt: Xây dựng ứng dụng bán mỹ phẩm trực tuyến và tích hợp phân tích
thành phần hóa học trong mỹ phẩm.

2.1.2 Link github quản lý source code
- Link github ứng dụng dành cho khách hàng:
https://github.com/thanhnga0104/GreenBeauty.git
- Link github ứng dụng dành cho quản trị viên:
https://github.com/Lamduy0807/AdminGreenBeauty.git
- Link github Backend: https://github.com/Lamduy0807/GreenBeautyBackend.git
2.2 Cơ sở lý thuyết
Đồ án được xây dựng trên những cơ sở lý thuyết sau:

2.2.1 Nền tảng Cross Platform
2.2.1.1 Cross Platform là gì
“Trong cơng nghệ điện tốn, đa nền tảng (tiếng Anh: cross-platform hay multiplatform) là một thuật ngữ chỉ các phần mềm máy tính hay các phương thức điện toán và các
khái niệm được thực thi đầy đủ và vận hành cùng nhau trên nhiều nền tảng máy tính. Phần
mềm đa nền tảng có thể được chia thành hai loại; một loại yêu cầu phải thiết kế hoặc biên
dịch từng phiên bản cho mỗi nền tảng nó hỗ trợ; loại kia có thể chạy trực tiếp trên bất cứ nền
tảng nào mà không cần sự chuẩn bị thêm đặc biệt nào - chẳng hạn như phần mềm được viết
bằng một ngôn ngữ thông dịch hay được biên dịch trước sang mã bytecode có khả năng di
động bằng một trình thơng dịch hay các gói run-time thường dùng hoặc là thành phần tiêu
chuẩn trên mọi nền tảng”.

Hình 1 Cross Platform


Cross platform hay Multi Platform là một nền tảng đa ứng dụng. Hiểu đơn giản hơn
là chỉ với một bản code, bạn có thể phiên dịch và sử dụng nó trên nhiều nền tảng ứng dụng
8


khác nhau, giúp bạn tiết kiệm được công sức và thời gian đáng kể.
Chính vì lợi thế đó mà Cross platform được ưa chuộng bởi rất nhiều lập trình viên
hiện nay. Ngồi ra, khi lập trình, bạn cần phải lựa chọn tuỳ theo ưu, nhược điểm của một
Framework bởi Cross platform sử dụng Framework đa nền tảng.
Đến thời điểm hiện tại, React-Native, Xamarin và Flutter theo thứ tự được xem là 3
frameworks phổ biến nhất cho phép phát triển app trên smartphone sử dụng các hệ điều hành,
hay nền tảng khác nhau (cross-platform mobile development), mà thông dụng nhất là iOS và
Android. Với các frameworks này, một chương trình được viết có thể chạy trên tất cả các nền
tảng; cụ thể hơn, chỉ cần phát triển 1 project nhưng có thể tạo ra các apps chạy trên
smartphone sử dụng iOS, Android.

Hình 2 Ba framework phát triển mobile phổ biến

Sự xuất hiện các frameworks nói trên đã hình thành các trường phái và cộng đồng phát
triển app, kèm theo là những tranh luận về việc đánh giá xếp hạng cho các frameworks này.

2.2.1.2 Ưu điểm, hạn chế Cross Platform
Ưu điểm
• Có thể sử dụng một bản code trên nhiều phiên bản khác nhau.
• Sử dụng Cross platform sẽ giúp tiết kiệm được lượng lớn chi phí và cơng sức viết
code.
• Cross platform thích hợp với những dự án lớn, địi hỏi tính linh hoạt và đa dạng.
Nhược điểm
• Chưa có khả năng khai thác thư viện của những nền tảng lớn như Android hoặc iOS
dù nó tiết kiệm được chi phí và có tính linh hoạt cao.

• Q trình cấp phép cho công nghệ của ứng dụng Cross platform gặp nhiều khó khăn
và phức tạp.
2.2.2 Django Rest Framework

2.2.2.1 Khái niệm Restful
API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo
đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác.
API có thể trả về dữ liệu ở những kiểu dữ liệu phổ biến như JSON hay XML.
Restful (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu,
9


một kiểu kiến trúc để viết API. Nó sử dụng phương thức HTTP đơn giản để tạo giao tiếp giữa
các máy. Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST
gửi một yêu cầu HTTP như GET, POST, DELETE,… đến một URL để xử lý dữ liệu.
RestAPI là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để
quản lý các resource. RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến
ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau.
Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method
(như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản
các resource. RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ
lập trình ứng dụng, bất kỳ ngơn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một
RESTful API.

2.2.2.2 Hoạt động của Restful
REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên sẽ sử
dụng những phương thức HTTP riêng.
• GET (SELECT): Trả về một Resource hoặc một danh sách Resource.
• POST (CREATE): Tạo mới một Resource.
• PUT (UPDATE): Cập nhật thơng tin cho Resource.

• DELETE (DELETE): Xố một Resource.
Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create,
Read, Update, Delete – Tạo, Đọc, Sửa, Xóa.

2.2.2.3 Django Rest Framework

Hình 3 Django rest framework

Django Rest framework là một công cụ mạnh mẽ và linh hoạt trong việc xây dựng
Web APIs
Một vài lý do nên sử dụng django rest framework:
- API rất hữu dụng cho developers
- Quyền xác thực trong django Rest framework gồm hai package OAuth1 và OAuth2
- Serialization hỗ trợ cả ORM và non-ORM data-sources
- Khả năng tùy chỉnh
- Tài liệu phong phú và hỗ trợ cộng đồng
- Được sử dụng và tin cậy bởi các công ty được quốc tế công nhận bao gồm Mozilla,
Red Hat, Heroku và Eventbrite.
2.3 Công nghệ sử dụng
2.3.1 Ngôn ngữ lập trình Java-scripts
10


JavaScript là ngơn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó
cũng là một trong số 3 ngơn ngữ chính của lập trình web:
• HTML: Giúp bạn thêm nội dung cho trang web.
• CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.
• JavaScript: Cải thiện cách hoạt động của trang web.
JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ
việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web. Hơn nữa,

có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng
đồng, đặc biệt là Github.

Hình 4 Ngôn ngữ Javascript

2.3.1.1 Lịch sử hình thành javaScripts
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của Netscape,
vào tháng 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên của nó được đổi thành Mona rồi
LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như bây giờ. Phiên bản đầu tiên
của ngôn ngữ này bị giới hạn độc quyền bởi Netscape và chỉ có các tính năng hạn chế, nhưng
nó tiếp tục phát triển theo thời gian, nhờ một phần vào cộng đồng các lập trình viên đã liên
tục làm việc với nó.
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript. ECMAScript 2
phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm 1999. Nó liên tục phát triển
thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và trên khắp các thiết
bị từ di động đến máy tính bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụng
JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngơn ngữ lập trình riêng trở thành
công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trình web. Nếu bạn đang
dùng internet, vậy chắc chắn bạn đã từng sử dụng JavaScript rồi.

2.3.1.2 Ưu nhược điểm của javaScripts
Ưu điểm của Javascript
• Javascript giúp thao tác với người dùng ở phía client và tách biệt giữa các client. Ví
dụ 2 người đang truy cập vào 2 trình duyệt khác nhau thì cả hai đều có những phiên
xử lý Javascript khác nhau, khơng ảnh hưởng lẫn nhau.
• Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho
đến các hệ điều hành trên mobile.
• Javascript là một ngơn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài
đặt quá nhiều phần mềm.

11


Nhược điểm của Javascript
Vì là một ngơn ngữ rất dễ dàng bị lộ code nên dễ bị khai thác. Hacker có thể nhập một
đoạn code bất kì vào khung console của trình duyệt, lúc này trình duyệt sẽ hiểu rằng đoạn
code đó là chính thống, nên hacker có thể gửi nhửng request lên server một cách dễ dàng.

2.3.1.3 JavaScripts framework
Javascript Framework là một bộ thư viện được xây dựng dựa vào ngơn ngữ lập trình
Javascript. Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó. Ví dụ
với Angular và React thì chun xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là
một thư viện rất mạnh khi xử lý DOM HTML và CSS.
Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều
libraries và framework được viết bằng Javascript ra đời như:
• Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.
• NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng
realtime.
• Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.
• ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications).
• jQuery: Một thư viện rất mạnh về hiệu ứng.
• ReactJS: Một thư viện viết ứng dụng web.
• Và cịn nhiều thư viện khác.
2.3.2 React-Native

2.3.2.1 Tổng quan về React-native
Được phát triển bởi Facebook, React Native là một framework hướng đến phát triển
ứng dụng di động đa nền tảng. Với sự trợ giúp của React Native, lập trình viên (developer)
có thể sử dụng JavaScript để tạo ra mobile apps (ứng dụng di động) hỗ trợ cho cả nền tảng
Android và iOS. Instagram, Facebook, Skype,… là những ứng dụng nổi bật sử dụng React

Native.

Hình 5 Framework React Native

React Native chính thức trở thành mã nguồn mở vào tháng 3 năm 2015. Cho đến nay,
React Native được áp dụng trong nhiều ứng dụng của ta và cả nước ngoài

2.3.2.2 Các thức hoạt động của React native
React Native hoạt động được nhờ tích hợp 2 thread là Main Thread và JS Thread cho ứng
12


dụng mobile. Trong đó:
• Main Thread: cập nhật giao diện người dùng(UI) và xử lý tương tác người dùng.
• JS Thread: thực thi và xử lý code Javascript.
Hai luồng Main Thread và JS Thread này hoạt động độc lập với nhau. Hai Thread sẽ
tương tác với nhau nhờ một Bridge(cầu nối). Chiếc cầu này sẽ chuyển đổi dữ liệu qua lại
giữa các Thread.

2.3.2.3 Ưu điểm của React native
Có thể tái sử dụng code
React Native cho phép các developer có thể tái sử dụng code trong khi phát triển các
ứng dụng đa nền tảng. Đặc biệt, developer có thể tái sử dụng hầu như 80-90% các đoạn code
thay vì phải viết và tạo các ứng dụng riêng biệt cho các nền tảng khác nhau. Ưu điểm này
giúp người dùng:
• Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng.
• Tận dụng nguồn nhân lực tốt hơn
• Duy trì ít code hơn, ít bugs hơn
• Các tính năng trong cả 2 platforms cũng tương tự nhau.
Cộng đồng người dùng lớn

React Native được đánh giá là một trong những Framework được yêu thích nhất (khảo
sát của stack overflow vào năm 2019). Nhờ cộng đồng người dùng rất lớn trên tồn thế giới,
bạn có thể tìm sự hỗ trợ nếu gặp phải bugs.
Tính ổn định và tối ưu
Được phát triển bởi Facebook, React Native có hiệu năng ổn định khá cao.
• Mã React Native giúp đơn giản hóa q trình xử lý dữ liệu.
• Đội ngũ phát triển ứng dụng khơng q lớn.
• Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau.
• Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid.

2.3.2.4 Nhược điểm của React native
Yêu cầu Native code.
Hiệu năng kém hơn so với Native App.
• Bảo mật chưa thật sự tốt do dùng JavaScript. Do sử dụng JavaScript, người dùng
cũng sẽ bị ảnh hưởng bởi những đặc điểm của JavaScript: dễ làm dễ sai, dẫn đến khó
duy trì về sau.
• Quản lý bộ nhớ.
• Tùy biến chưa thật sự tốt ở một số module.
• Khơng thích hợp cho các app cần năng lực tính tốn cao (hash, crypto, etc).
2.3.3 Phần mềm lập trình VSCode



2.3.3.1 Tổng quan về VSCode
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã nguồn phổ
biến nhất được sử dụng bởi các lập trình viên. Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính
năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được
ứng dụng rộng rãi.

13



Hình 6 Phần mềm lập trình VSCode

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS, Visual
Studio Code được phát triển bởi Microsoft. Nó được xem là một sự kết hợp hoàn hảo giữa
IDE và Code Editor.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hồn
thành mã thơng minh, snippets, và cải tiến mã nguồn. Nhờ tính năng tùy chỉnh, Visual
Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác.

2.3.3.2 Ưu điểm của VSCode
Hỗ trợ nhiều ngơn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình như C/C++, C#, F#, Visual Basic,
HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thơng báo nếu chương
chương trình có lỗi.
Hỗ trợ đa nền tảng
Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows hoặc Linux
hoặc Mac Systems. Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên.
Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngơn ngữ lập trình khơng nằm
trong số các ngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng. Điều này
vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần mở rộng này hoạt động như
một chương trình độc lập.
Kho lưu trữ an toàn
Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an tồn. Với Visual Studio
Code, người dùng có thể hồn tồn n tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu
trữ hiện có nào.
Hỗ trợ web
Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngoài ra, nó cũng có một trình soạn

thảo và thiết kế website.
Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau. Ngồi
ra, Visual Studio Code cịn cung cấp các thư mục cho một số tệp đặc biệt quan trọng.
Hỗ trợ viết Code
Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng. Visual Studio
Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.
Hỗ trợ thiết bị đầu cuối
Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển
14


đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác.
Màn hình đa nhiệm
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục – mặc
dù chúng không hề liên quan với nhau.
Hầu hết các trình viết mã đều có tính năng nhắc mã Intellisense, nhưng ít chương trình
nào chuyên nghiệp bằng Visual Studio Code. Nó có thể phát hiện nếu bất kỳ đoạn mã nào
không đầy đủ. Thậm chí, khi lập trình viên qn khơng khai báo biến, Intellisense sẽ tự động
giúp họ bổ sung các cú pháp còn thiếu.
Hỗ trợ Git
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub. Mã này sau đó
có thể được thay đổi và lưu lại trên phần mềm.

2.3.3.3 Nhược điểm của Vscode




Tương tự như tất cả các ứng dụng electron khác, bộ nhớ và mức sử dụng pin của

VSCode khá tệ.
Khơng có git merge, điều mà nhiều người mong đợi, vì ST3 và Atom có khả năng
làm điều đó.
Các phím tắt mặc định khơng có ý nghĩa và người dùng phải cấu hình lại gần như tất
cả chúng.

2.3.4 Dịch vụ GitHub
GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn Git dựa trên nền tảng web cho các dự
án phát triển phần mềm. GitHub cung cấp cả phiên bản trả tiền lẫn miễn phí cho các tài khoản.
Các dự án mã nguồn mở sẽ được cung cấp kho lưu trữ miễn phí. Tính đến tháng 4 năm 2016,
GitHub có hơn 14 triệu người sử dụng với hơn 35 triệu kho mã nguồn, làm cho nó trở thành
máy chủ chứa mã nguồn lớn trên thế giới.
Github đã trở thành một yếu tố có sức ảnh hưởng trong cộng đồng phát triển mã nguồn mở.
Thậm chí nhiều nhà phát triển đã bắt đầu xem nó là một sự thay thế cho sơ yếu lý lịch và một
số nhà tuyển dụng yêu cầu các ứng viên cung cấp một liên kết đến tài khoản Github để đánh
giá ứng viên.
Dự án trên Github có thể được truy cập và thao tác sử dụng một giao diện dòng lệnh và làm
việc với tất cả các lệnh Git tiêu chuẩn. Github cũng cho phép người dùng đăng ký và không
đăng ký để duyệt kho công cộng trên trang web. Github cũng tạo ra nhiều client và plugin
cho máy tính để bàn.

15


Chương 3: PHÂN TÍCH, THIẾT KẾ
3.1 Cơ sở dữ liệu
3.1.1 Sơ đồ lớp

Hình 7 Sơ đồ lớp


3.1.2 Chi tiết các thuộc tính
1.
User
STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

ID của từng người dùng

2

Email

String

Email đăng ký tài khoản của người dùng

3

Password


String

Password của tài khoản người dùng

4

Is_verified

Boolean

Người dùng đã xác nhận email đăng ký
hay chưa
16


5

Is_active

Boolean

Tài khoản người dùng có hoạt động hay
khơng

6

Is_staff

Boolean


Phân quyền tài khoản người dùng

7

Create_at

DateTime

Thời gian tạo tài khoản

8

Update_at

DateTime

Thời gian update thông tin

9

Avt

Image

Avatar người dùng

10

Name


String

Tên người dùng

11

Phone

String

Số điện thoại người dùng

12

Sex

String

Giới tính

13

Orders

Int

Số lượng đơn hàng đã đặt

14


Dateofbirth

DateTime

Ngày sinh

Bảng 1 Bảng chi tiết các thuộc tính của class User

2.

Product

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id của sản phẩm

2


Name

String

Tên sản phẩm

3

Description

String

Mô tả sản phẩm

4

Price

Float

Giá sản phẩm

5

Sold

Int

Số lượng đã bán


6

Quantity

Int

Số lượng sản phẩm trong kho

7

Instruction

String

Hướng dẫn sử dụng sản phẩm

8

Ingredients

String

Thành phần sản phẩm

9

Origin

String


Xuất xứ sản phẩm

10

isActive

Boolean

Sản phẩm có đang hoạt động hay khơng

11

Category

Int

Loại sản phẩm

12

isFlashsale

Boolean

Sản phẩm có đang giảm giá hay không

13

Pricesale


Float

Giá sản phẩm khi đang được giảm giá
17


14

Imagepresent

Image

Hình ảnh đại diện sản phẩm

Bảng 2 Bảng chi tiết các thuộc tính của class Product

3.

ProductCategory

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1


Id

String

Id Loại sản phẩm

2

Name

String

Tên loại sản phẩm

3

Producttype

String

Loại hình sản phẩm

4

Imagecategory

Image

Hình ảnh của loại sản phẩm


Bảng 3 Bảng chi tiết các thuộc tính của class ProductCategory

4.

ProductType

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id Loại sản phẩm

2

Name

String

Tên loại sản phẩm


Bảng 4 Chi tiết thuộc tính của class ProductType

5.

ProductImage

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id Loại sản phẩm

2

img

Image

Hình ảnh sản phẩm


3

Product

Int

Id sản phẩm

Bảng 5 Bảng chi tiết các thuộc tính của class ProductImage

6.

Rating

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id đánh giá


2

Dayandtime

DateTime

Thời gian đánh giá

3

Rattingpoint

Int

Điểm đánh giá

4

Rattingcomment

String

Nội dung đánh giá

5

Img

Image


Hình ảnh đính kèm

6

Product

Int

Id sản phẩm

7

User

Int

ID người dùng
18


Bảng 6 Bảng chi tiết các thuộc tính của class Rating

7.

LoveList

STT

Thuộc tính


Kiểu dữ liệu

Diễn giải

1

Id

String

Id yêu thích

2

Product_id

Int

Id sản phẩm yêu thích

3

Customer_id

Int

Id người dùng

Bảng 7 Bảng chi tiết các thuộc tính của class LoveList


8.

Ingredient

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id chất hóa học

2

name

String

Tên chất

3


Levelofsafe

Int

Chỉ số an tồn

4

Description

String

Mơ tả cơng dụng của chất

5

Slug

String

Slug của tên chất

Bảng 8 Bảng chi tiết các thuộc tính của class Ingedient

9.

Provinces

STT


Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id tỉnh

2

Name

String

Tên tỉnh

Bảng 9 Bảng chi tiết các thuộc tính của class Provinces

10.

Districts

STT


Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id huyện

2

Name

String

Tên huyện

Bảng 10 Bảng chi tiết các thuộc tính của class Districts

11.

Wards

STT


Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id quận/ xã

2

Name

String

Tên quận/ xã

Bảng 11 Bảng chi tiết các thuộc tính của class Wards

19


12.


Delivery

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id thơng tin vận chuyện

2

User

Int

Id người dùng

3

Province


Int

Id tỉnh

4

District

Int

Id huyện

5

Ward

Int

Id quận/ xã

6

Address

String

Địa chỉ chi tiết nơi ở như số nhà/tên
đường

7


Fulladdress

String

Địa chỉ đầy đủ bao gồm số nhà/tên
đường + xã/phường + quận/huyện +
tỉnh/thành

8

Defauladdress

String

Địa chỉ mà người dùng chọn làm mặc
định

9

Phone

String

Số điện thoại người nhận

10

Receivename


String

Tên người nhận

11

Receivegender

String

Giới tính người nhận

Bảng 12 Bảng chi tiết các thuộc tính của class Delivery

13.

Order

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id


String

Id đơn hàng

2

Datecreate

DateTime

Ngày khởi tạo đơn hàng

3

Daterecieve

DateTime

Ngày nhận hàng

4

Status

String

Trạng thái đơn hàng

5


cancelationReason String

Nguyên nhân hủy đơn

6

User

Int

Id người dùng

7

Delivery

Int

Id thông tin vận chuyển

Bảng 13 Bảng chi tiết các thuộc tính của class Order

14.

DetailOrder
20


STT


Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id chi tiết đơn hàng

2

Order

Int

Id đơn hàng

3

Product

Int

Id sản phẩm


4

Quantities

Int

Số lượng sản phẩm

5

isRating

Boolean

Đơn hàng đã được đánh giá chưa

Bảng 14 Bảng chi tiết các thuộc tính của class DetailOrder

15.

Cart

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải


1

Id

String

Id giỏ hàng

2

Product

Int

Id sản phẩm

3

isSelections

Boolean

Có được chọn không

4

Quantities

Int


Số lượng sản phẩm được chọn

Bảng 15 Bảng chi tiết các thuộc tính của class Cart

16.

Banner

STT

Thuộc tính

Kiểu dữ liệu

Diễn giải

1

Id

String

Id banner

2

Img

Image


Hình ảnh của banner

Bảng 16 Bảng chi tiết các thuộc tính của class Banner

3.2 Yêu cầu chức năng
3.2.1 Sơ đồ use case

21


Hình 8 Sơ đồ use case

22


3.2.2 Mô tả tác nhân
STT

Mô tả

Tên tác nhân

1

Khách hàng

Khách hàng sử dụng ứng dụng mua mỹ phẩm

2


Admin

Quản trị viên của hệ thống, xử lý các nghiệp vụ của phía
người bán
Bảng 176 Mô tả tác nhân

3.2.3 Mô tả use case
STT

Tên Chức Năng

Mô tả

1

Đăng ký

Đăng ký tài khoản mới

2

Đăng nhập

Đăng nhập vào ứng dụng

3

Đổi mật khẩu

Đổi mật khẩu đăng nhập tài khoản ứng dụng


4

Quên mật khẩu

Cho phép người dùng gửi yêu cầu đặt lại mật khẩu mới

5

Thiết lập tài khoản

Người dùng cập nhật các thơng tin như họ tên, ngày
sinh, giới tính, ảnh đại diện

6

Tìm kiếm sản phẩm

Chức năng cho phép khách hàng tìm kiếm sản phẩm
theo tên

7

Thêm vào giỏ hàng

Thêm sản phẩm muốn mua vào giỏ hàng

8

CRUD địa chỉ nhận


Hỗ trợ các thao tác thêm, đọc, sửa, xóa địa chỉ giao hàng

hàng
9

Đặt hàng

Người dùng chọn mua sản phẩm

10

Thêm vào mục yêu

Chức năng cho phép người dùng thêm sản phẩm vào

thích

mục yêu thích và có thể xem lại vào những lần truy cập
sau

11

Đánh giá

Chức năng cho phép khách hàng đánh giá về chất lượng
và trải nghiệm về sản phẩm
23



12

Theo dõi đơn hàng

Người dùng có thể theo dõi trạng thái của đơn hàng như
chờ xác nhận, đang lấy hàng, đang giao…

13

Tra cứu thành phần

Tra cứu mức độ an toàn của thành phần hóa học trong
mỹ phẩm đối với da

14

Khóa tài khoản

Chức năng cho phép quản trị viên khóa một tài khoản
khi tỉ lệ hủy đơn cao

15

CRUD sản phẩm

Hỗ trợ các thao tác thêm, đọc, sửa, xóa thơng tin sản
phẩm

16


Cập nhật trạng thái

Quản trị viên có thể cập nhật trạng thái của đơn hàng

đơn hàng

như chờ xác nhận, đang lấy hàng, đang giao…
Bảng 18 Mô tả use case

3.3. Đặc tả use case
UC1_Đăng ký
Tên use case

Đăng ký

Mô tả

Use case cho phép khách hàng đăng ký tài khoản ứng dụng

Tác nhân

Khách hàng

Điều kiện trước

Truy cập vào ứng dụng

Điều kiện sau

Một tài khoản mới được tạo và lưu vào DB

Email xác nhận được gửi đến khách hàng

Ngoại lệ

Khơng có

Các u cầu đặc biệt

Email phải đúng định dạng
Password có ít nhất 6 ký tự, gồm các chữ cái từ A-Z ,các số và
có thể chứa kí tự đặc biệt
Retype Password phải giống với Password vừa nhập
Bảng 19 Đặc tả UC1_Đăng ký

24


×