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

ĐẠ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 Đề tài: Xây dựng ứng dụng bán mỹ phẩm trực tuyến tích hợp phân tích thành phần hóa học 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 ghi rõ họ tên) LỜI CẢM ƠN Trong trình học tập, nghiên cứu phát triển đề tài “Xây dựng ứng dụng bán mỹ phẩm trực tuyến tích hợp phân tích thành phần hóa học mỹ phẩm” chúng em nhận giúp đỡ, bảo nhiệt tình thầy để hồn thành đồ án 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 giúp đỡ kiến thức, phương pháp cho chúng em suốt q trình thực hồn thành đồ án Hi vọng với bảo góp ý từ thầy, nhóm đề tài tiếp tục phát triển để ứng dụng ngày mở rộng phục vụ tốt cho người dùng Mặc dù có nhiều cố gắng suốt q trình thực đề tài, song tránh khỏi hạn chế, thiếu sót Chúng em mong nhận đóng góp nhận xét chân thành từ thầy, bạn sinh viên người dùng trình sử dụng phần mềm để phần mềm ngày hoàn thiện Mọi đóng góp xin vui lịng gửi địa email: 19521421@gm.uit.edu.vn Mỗi ý kiến đóng góp thầy bạn nguồn động lực to lớn chúng em để chúng em cải thiện phần mềm tốt xây dựng phần mềm hữu ích người dùng 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 Nộ i dung Chương 1: GIỚI THIỆU 1.1 Đặt vấn đề 1.2 Giải pháp 1.3 Mục tiêu Chương 2: TỔNG QUAN .8 2.1 Tổng quan đồ án 2.1.1 Tên đồ án: 2.1.2 Link github quản lý source code 2.2 Cơ sở lý thuyết .8 2.2.1 Nền tảng Cross Platform 2.2.2 Django Rest Framework 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ở liệu 16 3.1.1 Sơ đồ lớp 16 3.1.2 Chi tiết thuộc tính .16 3.2 Yêu cầu chức .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 26 UC4_Quên mật 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 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 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 đạt 53 5.1.2 Đánh giá ứng dụng 53 5.2 Hướng phát triển mở rộng .53 Chương 6: YÊU CẦU CÀI ĐẶT 54 TÀI LIỆU THAM KHẢO 55 DANH MỤC HÌNH Hình Cross Platform Hình Ba framework phát triển mobile phổ biến Hình Django rest framework 10 Hình Ngơn ngữ Javascript 11 Hình Framework React Native 12 Hình Phần mềm lập trình VSCode 14 Hình Sơ đồ lớp 16 Hình Sơ đồ use case 22 Hình 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 27 Hình 12 Sơ đồ hoạt động UC4_Quên mật 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 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 yê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 42 Hình 28 Giao diện thiết lập tài khoản 42 Hình 29 Giao diện trang chủ 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 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 DANH MỤC BẢNG Bảng Bảng chi tiết thuộc tính class User 17 Bảng Bảng chi tiết thuộc tính class Product 18 Bảng Bảng chi tiết thuộc tính class ProductCategory 18 Bảng Chi tiết thuộc tính class ProductType 18 Bảng Bảng chi tiết thuộc tính class ProductImage 18 Bảng Bảng chi tiết thuộc tính class Rating 19 Bảng Bảng chi tiết thuộc tính class LoveList 19 Bảng Bảng chi tiết thuộc tính class Ingedient 19 Bảng Bảng chi tiết thuộc tính class Provinces 19 Bảng 10 Bảng chi tiết thuộc tính class Districts 19 Bảng 11 Bảng chi tiết thuộc tính class Wards 19 Bảng 12 Bảng chi tiết thuộc tính class Delivery 20 Bảng 13 Bảng chi tiết thuộc tính class Order 20 Bảng 14 Bảng chi tiết thuộc tính class DetailOrder 21 Bảng 15 Bảng chi tiết thuộc tính class Cart 21 Bảng 16 Bảng chi tiết thuộc tính 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 26 Bảng 21 Đặc tả UC4_Quên mật 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 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 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 mang tính thủ cơng, dựa vào kinh nghiệm hệ thống nhân viên Do đặc điểm lượng hàng hoá nhập xuất ngày lớn nên cơng tác quản lí, mua bán nhiều thời gian, cơng sức mà độ xác khơng cao, điều nhiều 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 ứng dụng hỗ trợ công tác quản lý, bán hàng mua hàng trực tuyến “Xây dựng ứng dụng bán mỹ phẩm trực tuyến tích hợp phân tích thành phần hóa học mỹ phẩm” đời nhằm đáp ứng nhu cầu đại hóa hệ thống quản lý bán hàng, đưa hệ thống phần mềm vào để thay 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 phần mềm hỗ trợ cửa hàng thực công tác quản lý sản phẩm trạng thái đơn hàng, cung cấp ứng dụng mua sắm đáp ứng nhu cầu khách hàng, cụ thể kinh doanh mỹ phẩm Xây dựng giao diện phần mềm 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 cách mượt mà để mang đến trải nghiệm thú vị tiện ích cho người dùng Chương 2: TỔNG QUAN 2.1 Tổng quan đồ á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 tích hợp phân tích thành phần hóa học 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 xây dựng sở lý thuyết sau: 2.2.1 Nền tảng Cross Platform 2.2.1.1 Cross Platform “Trong cơng nghệ điện tốn, đa tảng (tiếng Anh: cross-platform hay multiplatform) thuật ngữ phần mềm máy tính hay phương thức điện toán khái niệm thực thi đầy đủ vận hành nhiều tảng máy tính Phần mềm đa tảng chia thành hai loại; loại yêu cầu phải thiết kế biên dịch phiên cho tảng hỗ trợ; loại chạy trực tiếp tảng mà không cần chuẩn bị thêm đặc biệt - chẳng hạn phần mềm viết ngôn ngữ thông dịch hay biên dịch trước sang mã bytecode có khả di động trình thơng dịch hay gói run-time thường dùng thành phần tiêu chuẩn tảng” Hình Cross Platform Cross platform hay Multi Platform tảng đa ứng dụng Hiểu đơn giản với code, bạn phiên dịch sử dụng nhiều tảng ứng dụng khác nhau, giúp bạn tiết kiệm công sức thời gian đáng kể Chính lợi mà Cross platform ưa chuộng nhiều lập trình viên Ngồi ra, lập trình, bạn cần phải lựa chọn tuỳ theo ưu, nhược điểm Framework Cross platform sử dụng Framework đa tảng Đến thời điểm tại, React-Native, Xamarin Flutter theo thứ tự xem frameworks phổ biến cho phép phát triển app smartphone sử dụng hệ điều hành, hay tảng khác (cross-platform mobile development), mà thông dụng iOS Android Với frameworks này, chương trình viết chạy tất tảng; cụ thể hơn, cần phát triển project tạo apps chạy smartphone sử dụng iOS, Android Hình Ba framework phát triển mobile phổ biến Sự xuất frameworks nói hình thành trường phái cộng đồng phát triển app, kèm theo tranh luận việc đánh giá xếp hạng cho frameworks 2.2.1.2 Ưu điểm, hạn chế Cross Platform Ưu điểm • Có thể sử dụng code nhiều phiên khác • Sử dụng Cross platform giúp tiết kiệm lượng lớn chi phí cơng sức viết code • Cross platform thích hợp với dự án lớn, địi hỏi tính linh hoạt đa dạng Nhược điểm • Chưa có khả khai thác thư viện tảng lớn Android iOS dù tiết kiệm chi phí có tính linh hoạt cao • Q trình cấp phép cho công nghệ ứng dụng Cross platform gặp nhiều khó khăn phức tạp 2.2.2 Django Rest Framework 2.2.2.1 Khái niệm Restful API (Application Programming Interface) tập quy tắc chế mà theo đó, ứng dụng hay thành phần tương tác với ứng dụng hay thành phần khác API trả liệu kiểu liệu phổ biến JSON hay XML Restful (REpresentational State Transfer) dạng chuyển đổi cấu trúc liệu, 3.4 Thiết kế giao diện 3.4.1 Đăng ký Hình 25 Giao diện đăng ký 3.4.2 Đăng nhập Hình 26 Giao diện đăng nhập 41 3.4.3 Quên mật Hình 27 Giao diện quên mật 3.4.4 Thiết lập tài khoản Hình 28 Giao diện thiết lập tài khoản 42 3.4.5 Trang chủ (Khách hàng) Hình 29 Giao diện trang chủ khách hàng 3.4.6 Tìm kiếm sản phẩm Hình 30 Giao diện tìm kiếm sản phâm 43 3.4.7 Chi tiết sản phẩm Hình 31 Giao diện chi tiết sản phẩm 3.4.8 Thêm vào giỏ hàng Hình 32 Giao diện thêm vào giỏ hàng 44 3.4.9 Giỏ hàng Hình 33 Giao diện giỏ hàng 3.4.10 CRUD địa nhận hàng Hình 34 Giao diện CRUD địa nhận hàng 45 3.4.11 Đặt hàng Hình 35 Giao diện xác nhận đặt hàng 3.4.12 Sản phẩm yêu thích Hình 36 Giao diện sản phẩm yêu thích 46 3.4.13 Danh mục sản phẩm Hình 37 Giao diện danh mục sản phẩm 3.4.14 Đánh giá sản phẩm Hình 38 Giao diện đánh giá sản phẩm 47 3.4.15 Tra cứu thành phần Hình 39 Giao diện tra cứu thành phẩn 3.4.16 Trạng thái đơn hàng Hình 40 Giao diện trạng thái đơn hàng 48 3.4.17 Trang chủ admin Hình 41 Giao diện trang chủ (admin) 3.4.18 Danh sách sản phẩm Hình 42 Giao diện danh sách sản phẩm 49 3.4.19 CRUD sản phẩm Hình 43 Giao diện CRUD sản phẩm 50 Chương 4: BẢNG PHÂN CÔNG CƠNG VIỆC Bảng 35 Phân cơng cơng việc Tên MSSS Cơng việc thực Lâm Nguyễn Bửu • Chức đăng nhập Duy – 19521421 • Chức đăng xuất Mức độ Đánh đóng góp giá 50% Hồn thành • Chức đăng ký • Chức quên mật • Màn hình profile • Chức Chỉnh sửa tài khoản • Chức theo dõi đơn hàng • Chức tra cứu thành phần • Chức đánh giá sản phẩm • App admin (CRUD sản phẩm, banner, trạng thái đơn hàng) • Xây dựng backend • Xây dựng app Admin Nguyễn Thanh Nga - • Thiết kế sở liệu 19521880 • Chức xem sản phẩm • Màn hình Trang chủ • Chức Thêm vào giỏ hàng • Chức Đặt hàng • CRUD địa • Chức Thêm vào mục u thích • Chức tìm kiếm sản 51 50% Hồn thành phẩm • Chức lọc sản phẩm • Xây dựng backend • Xây dựng app Admin 52 Chương 5: NHẬN XÉT VÀ HƯỚNG PHÁT TRIỂN 5.1 Nhận xét 5.1.1 Kết đạt Phần mềm đạt mục tiêu đề xây dựng ứng dụng mua hàng trực tuyến tảng Cross Platform Ứng đụng có nhiều chức hữu ích hỗ trợ cho người dùng việc lực chọn hàng hóa phù hợp theo nhu cầu cá nhân gợi ý sản phẩm, phân chia sản phẩm theo mục, tìm kiếm sản phẩm… Ngồi ra, người dùng cịn có nhìn trực quan sản phẩm thơng qua bình luận người dùng mua trải nghiệm cảm giác sử dụng sản phẩm thông qua mục Đánh giá sản phẩm Mặt khác, nhằm hỗ trợ người dùng việc lựa chọn sản phẩm phù hợp với da, tránh kích ứng tránh hoạt chất gây dị ứng cho da, đặc biệt da nhạy cảm, chức phân tích thành phần xem điểm nhấn quan trọng ứng dụng 5.1.2 Đánh giá ứng dụng ❖ Ưu điểm: • Giao diện đơn giản, trực quan, dễ tiếp cận, dễ sử dụng • Ứng dụng có dung lượng nhỏ, tốn nhớ • Tích hợp chức đánh giá sản phẩm, người dùng dễ dàng chia sẻ tiếp nhận thơng tin sản phẩm • Thơng tin sản phẩm cụ thể, súc tích chi tiết • Tích hợp khả phân tích thành phần, giảm thiểu rủi ro sử dụng sản phẩm • Tích hợp cơng cụ cho người quản trị liệu thêm liệu ❖ Khuyết điểm: • Ứng dụng cịn giai đoạn hồn thiện mặt trải nghiệm người dùng • Dữ liệu hình ảnh cịn hạn chế 5.2 Hướng phát triển mở rộng - Tiếp tục phát triển ứng dụng theo hướng thương mại hóa - Khảo sát người dùng để hồn thiện chức có phát triển thêm chức - Phát triển công cụ hỗ trợ người quản trị sở liệu - Phát triển giao diện nâng cao trải nghiệm người dùng - Tối ưu hóa code 53 Chương 6: YÊU CẦU CÀI ĐẶT Nhằm đảm bảo phần mềm hoạt động cách hiệu nhất, điện thoại người dùng cần phải đạt tối thiểu yêu cầu sau Bảng 36 Yêu cầu cài đặt Phương diện Yêu cầu Hệ điều hành (Android) Tối thiểu Android trở lên RAM Tối thiểu 512MB trở lên Dung lượng nhớ (Memory) Tối thiểu 256MB trở lên Tốc độ xử lý (Processor) Tối thiểu 1.00 GHz trở lên 54 TÀI LIỆU THAM KHẢO [1] Cross platform gì? Phân biệt Cross Platform với Native App https://bizfly.vn/techblog/cross-platform-lagi.html?fbclid=IwAR2yDXHnYnuPSf2bQRMhTd6ZQvZEZ9lHEWROAx73gsq_NdUA5q pMwFATAIo [2] Home - Django REST framework https://www.django-rest-framework.org/?fbclid=IwAR0U2GTiPElvYA7NJSIPWur_GyrAd3LJHodms2gaDvq7IMG4t8k7rckYng [3] JavaScript gì? Giới thiệu JS cho người bắt đầu https://www.django-rest-framework.org/?fbclid=IwAR0U2GTiPElvYA7NJSIPWur_GyrAd3LJHodms2gaDvq7IMG4t8k7rckYng [4] Visual Studio Code gì? Tính bật Visual Studio Code - Technology Diver: https://cuongquach.com/visual-studio-code-la-gi.html 55 ... xây dựng ứng dụng hỗ trợ công tác quản lý, bán hàng mua hàng trực tuyến ? ?Xây dựng ứng dụng bán mỹ phẩm trực tuyến tích hợp phân tích thành phần hóa học mỹ phẩm? ?? đời nhằm đáp ứng nhu cầu đại hóa. .. ƠN Trong trình học tập, nghiên cứu phát triển đề tài ? ?Xây dựng ứng dụng bán mỹ phẩm trực tuyến tích hợp phân tích thành phần hóa học mỹ phẩm? ?? chúng em nhận giúp đỡ, bảo nhiệt tình thầy để hồn thành. .. tiếng việt: Xây dựng ứng dụng bán mỹ phẩm trực tuyến tích hợp phân tích thành phần hóa học 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