đồ án xây dựng website bán mỹ phẩm 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 website bán mỹ phẩm 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, 2022 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2022 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 website mua bán mỹ phẩm 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 hướng dẫn mơn Đồ án 2, 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 để website 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, từ bạn sinh viên người dùng trình sử dụng phần mềm để phần mềm ngày hồ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 10 tháng năm 2022 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 .7 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ông nghệ sử dụng .8 2.2.1 Ngôn ngữ lập trình Java-scripts 2.2.2 ReactJs Framework 10 2.2.3 Django Rest Framework 11 2.2.4 Phần mềm lập trình VSCode 13 2.2.5 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 .23 3.2.1 Sơ đồ use case 23 3.2.2 Mô tả tác nhân 24 3.2.3 Mô tả use case 24 3.3 Đặc tả use case 25 UC1_Đăng ký 25 UC2_Đăng nhập 26 UC3_Đổi mật 27 UC4_Quên mật 28 UC5_Thiết lập tài khoản 29 UC6_Tìm kiếm sản phẩm 30 UC7_Thêm vào giỏ hàng 31 UC8_CRUD địa nhận hàng 32 UC9_Đặt hàng 34 UC10_Thêm vào mục yêu thích 35 UC11_Đánh giá sản phẩm .36 UC12_Theo dõi đơn hàng 37 UC13_Tra cứu thành phần 38 UC14_Khóa tài khoản .39 UC15_CRUD sản phẩm 40 UC16_Cập nhật trạng thái đơn hàng 42 3.4 Thiết kế giao diện .43 Chương 4: BẢNG PHÂN CÔNG CÔNG VIỆC 53 Chương 5: NHẬN XÉT VÀ HƯỚNG PHÁT TRIỂN 55 5.1 Nhận xét .55 5.1.1 Kết đạt 55 5.1.2 Đánh giá ứng dụng 55 5.2 Hướng phát triển mở rộng .56 Chương 6: YÊU CẦU CÀI ĐẶT 57 TÀI LIỆU THAM KHẢO 58 DANH MỤC HÌNH Hình Ngôn ngữ Javascript Hình Django rest framework 12 Hình Phần mềm lập trình VSCode 13 Hình Sơ đồ lớp 16 Hình Sơ đồ use case 23 Hình Sơ đồ hoạt động UC1_Đăng ký 26 Hình Sơ đồ hoạt động UC2_Đăng nhập 27 Hình Sơ đồ hoạt động UC3_Đổi mật 28 Hình Sơ đồ hoạt động UC4_Quên mật 29 Hình 10 Sơ đồ hoạt động UC5_Thiết lập tài khoản 30 Hình 11 Sơ đồ hoạt động UC6_Tìm kiếm sản phẩm 30 Hình 12 Sơ đồ hoạt động UC7_Thêm vào giỏ hàng 31 Hình 13 Sơ đồ hoạt động UC8_CRUD địa nhận hàng 33 Hình 14 Sơ đồ hoạt động UC9_Đặt hàng 34 Hình 15 Sơ đồ hoạt động UC10_Thêm mục u thích 35 Hình 16 Sơ đồ hoạt động UC11_Đánh giá 36 Hình 17 Sơ đồ hoạt động UC12_Theo dõi đơn hàng 37 Hình 18 Sơ đồ hoạt động UC13_Tra cứu thành phần 38 Hình 19 Sơ đồ hoạt động UC14_Khóa tài khoản 39 Hình 20 Sơ đồ hoạt động UC15_CRUD sản phẩm 41 Hình 21 Sơ đồ hoạt động UC16_Cập nhật trạng thái đơn hàng 42 Hình 22 Giao diện đăng ký 43 Hình 23 Giao diện đăng nhập 43 Hình 24 Giao diện quên mật 44 Hình 25 Giao diện thiết lập tài khoản 44 Hình 26 Giao diện trang chủ khách hàng 45 Hình 27 Giao diện tìm kiếm sản phâm 45 Hình 28 Giao diện chi tiết sản phẩm 46 Hình 29 Giao diện thêm vào giỏ hàng 46 Hình 30 Giao diện giỏ hàng 47 Hình 31 Giao diện CRUD địa nhận hàng 47 Hình 32 Giao diện xác nhận đặt hàng 48 Hình 33 Giao diện sản phẩm u thích 48 Hình 34 Giao diện danh mục sản phẩm 49 Hình 35 Giao diện đánh giá sản phẩm 49 Hình 36 Giao diện tra cứu thành phần 50 Hình 37 Giao diện trạng thái đơn hàng 50 Hình 38 Giao diện trang chủ (admin) 51 Hình 39 Giao diện danh sách sản phẩm 51 Hình 40 Giao diện CRUD sản phẩm 52 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 19 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 20 Bảng Bảng chi tiết thuộc tính class Provinces 20 Bảng 10 Bảng chi tiết thuộc tính class Districts 20 Bảng 11 Bảng chi tiết thuộc tính class Wards 20 Bảng 12 Bảng chi tiết thuộc tính class Delivery 21 Bảng 13 Bảng chi tiết thuộc tính class Order 21 Bảng 14 Bảng chi tiết thuộc tính class DetailOrder 22 Bảng 15 Bảng chi tiết thuộc tính class Cart 22 Bảng 16 Bảng chi tiết thuộc tính class Banner 22 Bảng 17 Mô tả tác nhân 24 Bảng 18 Mô tả use case 25 Bảng 19 Đặc tả UC1_Đăng ký 25 Bảng 20 Đặc tả UC2_Đăng nhập 26 Bảng 21 Đặc tả UC3_Đổi mật 27 Bảng 22 Đặc tả UC4_Quên mật 28 Bảng 23 Đặc tả UC5_Thiết lập tài khoản 29 Bảng 24 Đặc tả UC6_Tìm kiếm sản phẩm 30 Bảng 25 Đặc tả UC7_Thêm vào giỏ hàng 31 Bảng 26 Đặc tả UC8_CRUD địa nhận hàng 32 Bảng 27 Đặc tả UC9_Đặt hàng 34 Bảng 28 Đặc tả UC10_Thêm mục yêu thích 35 Bảng 29 Đặc tả UC11_Đánh giá 36 Bảng 30 Đặc tả UC12_Theo dõi đơn hàng 37 Bảng 31 Đặc tả UC13_Tra cứu thành phần 38 Bảng 32 Đặc tả UC14_Khóa tài khoản 39 Bảng 33 Đặc tả UC15_CRUD sản phẩm 40 Bảng 34 Đặc tả UC16_Cập nhật trạng thái đơn hàng 42 Bảng 35 Phân công công việc 54 Bảng 36 Yêu cầu cài đặt 57 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 sản phẩm phần mềm hỗ trợ công tác quản lý, bán hàng mua hàng trực tuyến Với kết đạt “Ứ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” thiết bị di động, nhóm chúng em tiếp tục mở rộng phần mềm sang hoạt động tảng website với đề tài “Xây dựng website mua bán mỹ phẩm tích hợp phân tích thành phần hóa học mỹ phẩm” Phần mềm đời tảng website cộng tác với phiên thiết bị di động tăng mức độ đá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 nhiều tả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 Phần mềm hoạt động đa tảng với phiên thiết bị di động website 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 website mua bán mỹ phẩm 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 website dành cho khách hàng: https://github.com/Lamduy0807/Website-GreenBeauty.git - Link github ứng dụng dành cho quản trị viên: https://github.com/Lamduy0807/Website-admin-greenbeauty.git - Link github Backend: https://github.com/Lamduy0807/GreenBeautyBackend.git 2.2 Công nghệ sử dụng Quá trình xây dựng đồ án sử dụng cơng nghệ sau: 2.2.1 Ngơn ngữ lập trình Java-scripts JavaScript ngơn ngữ lập trình phổ biến giới suốt 20 năm qua Nó số ngơn ngữ 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ề trang web • JavaScript: Cải thiện cách hoạt động trang web JavaScript học nhanh dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính website đến việc chạy game tạo phần mềm web Hơn nữa, có hàng ngàn mẫu template JavaScript ứng dụng kia, nhờ vào cống hiến cộng đồng, đặc biệt Github Hình Ngôn ngữ Javascript 2.2.1.1 Lịch sử hình thành javaScripts JavaScript tạo mười ngày Brandan Eich, nhân viên Netscape, vào tháng năm 1995 Được đặt tên Mocha, tên đổi thành Mona LiveScript trước thật trở thành JavaScript tiếng Phiên ngôn ngữ bị giới hạn độc quyền Netscape có tính hạn chế, tiếp tục phát triển theo thời gian, nhờ phần vào cộng đồng lập trình viên liên tục làm việc với Trong năm 1996, JavaScript thức đặt tên ECMAScript ECMAScript phát hành năm 1998 ECMAScript tiếp tục mắt vào năm 1999 Nó liên tục phát triển thành JavaScript ngày nay, hoạt động khắp trình duyệt khắp 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 sử dụng JavaScript vào năm 2016 Chỉ 20 năm, từ ngơn ngữ lập trình riêng trở thành cơng cụ quan trọng công cụ chuyên viên lập trình web Nếu bạn dùng internet, chắn bạn sử dụng JavaScript 2.2.1.2 Ưu nhược điểm javaScripts Ưu điểm Javascript • Javascript giúp thao tác với người dùng phía client tách biệt client Ví dụ người truy cập vào trình duyệt khác hai có phiên xử lý Javascript khác nhau, khơng ảnh hưởng lẫn • Javascript hoạt động nhiều tảng khác nhau, từ Windows, macOS hệ điều hành mobile • Javascript ngôn ngữ dễ tiếp cận, bạn dễ dàng học mà khơng cần phải cài đặt q nhiều phần mềm Nhược điểm Javascript Vì ngôn ngữ dễ dàng bị lộ code nên dễ bị khai thác Hacker nhập đoạn code vào khung console trình duyệt, lúc trình duyệt hiểu đoạn code thống, nên hacker gửi nhửng request lên server cách dễ dàng 2.2.1.3 JavaScripts framework Javascript Framework thư viện xây dựng dựa vào ngôn ngữ lập trình Javascript Mỗi framework thường tạo để phục vụ cho lĩnh vực Ví dụ với Angular React chuyên xử lý frontend, NodeJS chuyên xử lý backend, jQuery 3.4.3 Quên mật Hình 24 Giao diện quên mật 3.4.4 Thiết lập tài khoản Hình 25 Giao diện thiết lập tài khoản 44 3.4.5 Trang chủ (Khách hàng) Hình 26 Giao diện trang chủ khách hàng 3.4.6 Tìm kiếm sản phẩm Hình 27 Giao diện tìm kiếm sản phâm 45 3.4.7 Chi tiết sản phẩm Hình 28 Giao diện chi tiết sản phẩm 3.4.8 Thêm vào giỏ hàng Hình 29 Giao diện thêm vào giỏ hàng 46 3.4.9 Giỏ hàng Hình 30 Giao diện giỏ hàng 3.4.10 CRUD địa nhận hàng Hình 31 Giao diện CRUD địa nhận hàng 47 3.4.11 Đặt hàng Hình 32 Giao diện xác nhận đặt hàng 3.4.12 Sản phẩm yêu thích Hình 33 Giao diện sản phẩm yêu thích 48 3.4.13 Danh mục sản phẩm Hình 34 Giao diện danh mục sản phẩm 3.4.14 Đánh giá sản phẩm Hình 35 Giao diện đánh giá sản phẩm 49 3.4.15 Tra cứu thành phần Hình 36 Giao diện tra cứu thành phần 3.4.16 Trạng thái đơn hàng Hình 37 Giao diện trạng thái đơn hàng 50 3.4.17 Trang chủ admin Hình 38 Giao diện trang chủ (admin) 3.4.18 Danh sách sản phẩm Hình 39 Giao diện danh sách sản phẩm 51 3.4.19 CRUD sản phẩm Hình 40 Giao diện CRUD sản phẩm 52 Chương 4: BẢNG 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 53 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 Bảng 35 Phân công công việc 54 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 Nhóm đề tài chúng em tìm hiểu vận dụng ReactJs vào trình xây dựng đồ án cách thục Kết mang lại website có nhiều chức hữu ích hỗ trợ cho người dùng việc lựa 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 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: • Website có giao diện đơn giản, bố cục rõ ràng, trực quan, dễ tiếp cận, kết hợp animation sinh động với người dùng • Trang web với tốc độ tải trang nhanh • Thơng tin sản phẩm đầy đủ, rõ ràng, giúp người truy cập tìm hiểu thơng tin cách dễ dàng • 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 • 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: • Website 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 hạn chế 55 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 56 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 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 Bảng 36 Yêu cầu cài đặt 57 TÀI LIỆU THAM KHẢO [1] ReactJs – Ưu nhược điểm https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7 [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 58 ... tháng……năm 2022 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 website mua bán mỹ phẩm tích hợp phân tích thành phần hóa học mỹ phẩm? ??... mở rộng phần mềm sang hoạt động tảng website với đề tài ? ?Xây dựng website mua bán mỹ phẩm tích hợp phân tích thành phần hóa học mỹ phẩm? ?? Phần mềm đời tảng website cộng tác với phiên thiết bị di... tác quản lý, bán hàng mua hàng trực tuyến Với kết đạt “Ứ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? ?? thiết bị di động, nhóm chúng em tiếp tục mở rộng phần mềm sang