Đồ án xây dựng website quản lý bán đĩa than

ĐẠ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 QUẢN LÝ BÁN ĐĨA THAN Giảng viên hướng dẫn : Trần Thị Hồng Yến Sinh viên thực : Hà Văn Dương - 19520480 TP HỒ CHÍ MINH, THÁNG 06 NĂM 2023 ĐẠ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 QUẢN LÝ BÁN ĐĨA THAN Giảng viên hướng dẫn: Trần Thị Hồng Yến Sinh viên thực : Hà Văn Dương - 19520480 TP HỒ CHÍ MINH, THÁNG 06 NĂM 2023 LỜI CẢM ƠN Lời đầu tiên, Em xin cảm ơn Giảng viên Trần Thị Hồng Yến tạo điều kiện tốt cung cấp kiến thức cần thiết để hoàn thành môn Đồ Án Em xin gửi lời cảm ơn sâu sắc đến Giảng viên Trần Thị Hồng Yến, người hỗ trợ, hướng dẫn nhóm tạo điều kiện tốt để nhóm hồn thành đề tài nghiên cứu Với hỗ trợ nhiệt tình cơ, cuối nhóm em hồn thiện kiến thức cần thiết thông qua việc nghiên cứu học hỏi kiến thức Em cố gắng ngày hồn thiện tương lai tiếp tục học tập chăm để đạt kết tốt Em xin gửi lời cảm ơn đến gia đình, tất thầy khoa, bạn bè, tập thể lớp PMCL2019 người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Trong q trình làm Đồ án em khơng tránh khỏi sai sót, em kính mong nhận dẫn góp ý quý thầy để hồn thiện phát triển đồ án Khóa luận tốt nghiệp tương lai Cuối cùng, xin kính chúc thầy giảng viên mơn Cơng nghệ Phần mềm cô Thái Thuỵ Hàn Uyển có sức khỏe dồi dào, sống hạnh phúc, tiếp tục hoàn thành sứ mệnh cao truyền thụ tri thức cho hệ mai sau Em xin chân thành cảm ơn Xin chúc điều tốt đẹp đồng hành người Thành phố Hồ Chí Minh, tháng 06 năm 2022 Hà Văn Dương NHẬN XÉT (Của giáo viên hướng dẫn) LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT (Của giáo viên hướng dẫn) CHƯƠNG I: GIỚI THIỆU CHUNG 1.1 Tổng quan đề tài 1.2 Lý chọn đề tài 1.3 Đối tượng sử dụng 1.4 Phạm vi nghiên cứu 1.4.1 Phạm vi môi trường: 1.4.2 Phạm vi thiết kế 1.4.3 Phạm vi chức 1.5 Yêu cầu 1.6 Công cụ áp dụng 1.7 Nền tảng công nghệ 1.8 Kế hoạch thực CHƯƠNG II: CƠ SỞ LÝ THUYẾT & CÔNG NGHỆ 2.1 Dart 2.2 Flutter 2.3 Firebase Firestore CHƯƠNG III: THIẾT KẾ HỆ THỐNG 3.1 Kiến trúc hệ thống: Mơ hình Client – Server 3.1.1 Sơ đồ tổng quan giới thiệu 3.1.2 Chi tiết thành phần hệ thống 3.2 Yêu cầu chức 3.2.1 Sơ đồ Usecase 3.2.2 Danh sách tác nhân 3.2.3 Danh sách Use Case 3.2.4 Mô tả chi tiết Use Case CHƯƠNG IV: THIẾT KẾ CƠ SỞ DỮ LIỆU 4.1 Bảng User 4.2 Bảng Product 4.2 Bảng Brand 4.3 Bảng Cart 4.5 Bảng Policy 4.6 Bảng Banner CHƯƠNG V: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 5.1 Screen Flow 5.2 Danh sách hình 5.3 Mơ tả chi tiết hình 5.3.1 Trang đích (chưa đăng nhập) 5.3.2 Trang đăng nhập 5.3.3 Trang đăng ký 5.3.4 Màn hình tạo mật 5 8 9 9 10 10 11 11 11 12 12 14 16 19 19 19 20 21 21 21 22 23 37 38 38 39 39 39 39 40 41 41 42 42 45 46 47 5.3.5 Trang danh mục 5.3.6 Trang giỏ hàng 5.3.7 Trang tốn 5.3.8 Trang đơn hàng tơi 5.3.9 Trang đánh giá sản phẩm 5.3.10 Trang hồ sơ cá nhân 5.3.11 Trang chi tiết sản phẩm 5.3.12 Trang sản phẩm yêu thích 5.3.13 Trang giới thiệu doanh nghiệp 5.3.14 Trang phương thức liên lạc CHƯƠNG VII KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết 6.2 Hạn chế 6.3 Hướng phát triển 6.4 Kết luận CHƯƠNG VIII TÀI LIỆU THAM KHẢO 48 49 50 51 52 52 54 56 57 58 59 59 59 59 59 60 CHƯƠNG I: GIỚI THIỆU CHUNG 1.1 Tổng quan đề tài - Tên trang web: The Nuon - Chủ đề chính: Website quản lý bán đĩa than - Nền tảng phát triển: Webapp - Kiến trúc phát triển: Client – Server 1.2 Lý chọn đề tài Trang web quản lý bán đĩa than tảng tuyệt vời để người dùng khám phá, tìm kiếm mua sắm đĩa than Với phát triển công nghệ yêu thích với âm nhạc cổ điển, đĩa than trở thành biểu tượng văn hóa thu hút quan tâm từ người yêu nhạc Trang web cung cấp danh mục đa dạng đĩa than, bao gồm nhiều thể loại âm nhạc khác nhau, từ nhạc rock, pop, jazz, blues đến thể loại độc Khách hàng dễ dàng tìm kiếm khám phá ghi âm phù hợp với sở thích Mỗi ghi âm cung cấp thông tin chi tiết nghệ sĩ, album, mô tả nội dung âm nhạc Điều giúp khách hàng hiểu rõ sản phẩm trước định mua Ngoài giao diện thân thiện dễ sử dụng giúp khách hàng duyệt qua sản phẩm dễ dàng thêm vào giỏ hàng Q trình tốn đơn giản hóa linh hoạt, với nhiều phương thức toán khác để thuận tiện cho người dùng Tổng quan, trang web quản lý bán đĩa than tảng trực tuyến tuyệt vời để khách hàng tìm kiếm mua sắm ghi âm độc đáo chất lượng Với kết hợp niềm đam mê âm nhạc tiện ích mua sắm trực tuyến, trang web mang đến trải nghiệm tuyệt vời cho người yêu thích đĩa than Định hướng ứng dụng nhóm Nhóm xây dựng ứng dụng mua sắm trực tuyến đáp ứng đầy đủ yêu cầu ứng dụng mua sắm mà khắc phục vấn đề tồn đọng đối thủ cạnh tranh Vấn đề ứng dụng đối thủ Giải pháp Giao diện người dùng thân thiện Cải thiện UI/UX trang hình chi tiết sản phẩm giỏ hàng Khách hàng khơng có nguồn thơng tin Xây dựng tính đánh giá sản phẩm để kiểm chứng sản phẩm sau mua hàng xem đánh giá sản phẩm trang Chi tiết sản phẩm Khách hàng khó khăn việc tìm Xây dựng hệ tìm kiếm văn kiếm lọc sản phẩm hình ảnh 1.3 Đối tượng sử dụng - Người dùng có mong muốn mua sắm trực tuyến - Quản trị viên kiểm sốt đơn hàng thơng tin liên quan đến sản phẩm, người dùng - Chủ doanh nghiệp 1.4 Phạm vi nghiên cứu 1.4.1 Phạm vi môi trường: Ứng dụng web 1.4.2 Phạm vi thiết kế - Đối với mặt UI/UX: + Trang web phải đạt chuẩn WCAG2.0 + Trang web phải đạt chuẩn design dựa chuẩn design Figma Google khuyến nghị + Cho phép khách hàng thực hành động cách dễ dàng mà khơng cần có hướng dẫn 1.4.3 Phạm vi chức - Đối với ứng dụng: + Cho phép phía nhân viên quản lý thơng tin sản phẩm (thêm, xóa, sửa) + Cho phép khách hàng thêm sản phẩm mong muốn vào giỏ hàng với số lượng linh hoạt điều chỉnh + Cho phép khách hàng thực trình toán với nhiều phương thức khác + Cho phép khách hàng tiếp cận với thông tin sản phẩm dạng văn + Cho phép khách hàng tiếp cận với thơng báo q trình giao dịch, thông báo đơn đặt hàng + Cho phép khách hàng thực chức đăng xuất, đăng nhập, đăng ký, quên mật khẩu, chỉnh sửa hồ sơ cá nhân (chỉnh sửa ảnh đại diện thông tin cá nhân), thay đổi mật khẩu, thiết lập phương thức toán mặc định 1.5 Yêu cầu - Tính thân thiện: Ứng dụng phải dễ sử dụng, UI/UX thân thiện với người dùng - Tính đắn: Ứng dụng chạy khơng lỗi - Tính thích nghi: Ứng dụng chạy tốt nhiều trình duyệt, nhiều thiết bị cấu hình phần cứng khác thiết kế kiến trúc thiết bị khác - Tính tiến hóa: Ứng dụng phải dễ dàng phát triển thêm tính mà khơng gây ảnh hưởng đến tính phát triển trước - Tính bảo trì: Ứng dụng thay đổi, chỉnh sửa chức mà không gây ảnh hưởng đến chức khác - Tính tương tác: Ứng dụng tạo môi trường tương tác hệ thống người dùng 1.6 Công cụ áp dụng - Công cụ phát triển: Visual Studio Code - Cơng cụ dùng để phân tích, thiết kế: Canva, Figma, Adobe Photoshop - Công cụ quản lý dự án: Github - Công cụ soạn thảo báo cáo: Microsoft Word 1.7 Nền tảng công nghệ - Front-end: Dart, Flutter - Back-end: Dart, Flutter - Database: Firebase Firestore 1.8 Kế hoạch thực Thời gian thực dự án ngày 05/03/2023 đến ngày 30/06/2023, chia thành giai đoạn: Giai đoạn 1: Chuẩn bị (05/03/2023 - 19/03/2023): - Nghiên cứu đề tài - Tìm hiểu thị trường, đối thủ cạnh tranh - Thiết kế chức năng, yêu cầu dự án - Xác định công nghệ, thiết kế sở liệu - Phân chia công việc - Chuẩn bị báo cáo - Thiết kế giao diện Giai đoạn 2: Phát triển (20/03/2023 - 30/06/2023): - Khởi tạo dự án - Hiện thực hoá chức hệ thống - Kiểm thử - Fix bugs Basic flow Người dùng nhấn vào ảnh đại diện người dùng => Nhấn “Đăng ký” Hệ thống trả lại trang “Đăng ký” Người dùng nhập thông tin “Mail”, “Mật khẩu”, “Xác nhận mật khẩu” Hệ thống kiếm tra xem “Mail” có tồn hệ thống chưa, “Mật khẩu” với “Xác nhận mật khẩu” có giống khơng Hệ thống trả lại trang “Thông tin người dùng” Người dùng chọn ảnh đại diện, nhập thông tin “Tên người dùng”, “Tuổi”, “Số điện thoại”, “Địa chỉ”, “Vị trí” Hệ thống xác nhận trường người dùng điền 10 Xác nhận người dùng đăng ký, hệ thống trả lại “Trang chủ” Alternative flow Không Post-condition Hệ thống sẵn sàng cho hoạt động Extend point Không 3.2.4.17 Use-case “Tìm kiếm thơng tin” Use case Tìm kiếm thông tin Actor All Pre-condition Không Basic flow Người dùng nhấn vào icon “Tìm kiếm” Hệ thống xác nhận yêu cầu người dùng trả lại popup “Tìm kiếm” Người dùng nhập thơng tin họ muốn tìm kiếm Hệ thống trả lại thơng tin liên quan đến nội dung người dùng nhập vào Người dùng chọn thơng tin cần tìm Alternative flow Không Post-condition Hệ thống sẵn sàng cho hoạt động Extend point Không ​ ​ ​ ​ ​CHƯƠNG IV: THIẾT KẾ CƠ SỞ DỮ LIỆU 4.1 Quản lý liệu Firebase 4.1.1 Tổng quan Firebase Firebase tảng phát triển ứng dụng di động web Google, cung cấp nhiều dịch vụ khác để phát triển ứng dụng dựa đám mây Trong việc quản lý liệu, Firebase cung cấp dịch vụ lưu trữ liệu theo sở liệu NoSQL cung cấp chế đồng hóa liệu thời gian thực 4.1.2 NoSQL NoSQL (non-relational) dạng sở liệu khơng tn theo mơ hình quan hệ (relational) sở liệu truyền thống (SQL) Thay sử dụng bảng, hàng cột, NoSQL lưu trữ liệu theo dạng khác tài liệu (document), cột gia tăng (column family), đồ thời gian (time series) đồ đồ (graph) Đây thay đổi đáng kể so với hệ quản trị sở liệu quan hệ truyền thống, NoSQL phát triển để đáp ứng yêu cầu quy mô, hiệu suất linh hoạt việc lưu trữ truy xuất liệu Một số đặc điểm chung sở liệu NoSQL bao gồm: - Mơ hình liệu linh hoạt: Cơ sở liệu NoSQL cho phép lưu trữ liệu theo cấu trúc không cố định không đồng Điều cho phép liệu mô linh hoạt thay đổi dễ dàng theo nhu cầu ứng dụng - Khả mở rộng ngang: Cơ sở liệu NoSQL thiết kế để mở rộng ngang, tức xử lý lưu trữ liệu nhiều máy chủ nút mạng Điều cho phép mở rộng dễ dàng để đáp ứng yêu cầu tải cao khả mở rộng ứng dụng - Hiệu suất cao: Vì NoSQL khơng áp dụng ràng buộc quan hệ, đạt hiệu suất cao việc truy vấn xử lý liệu Cơ sở liệu NoSQL thường tối ưu hóa để cung cấp hiệu suất tốt cho tác vụ truy xuất liệu, ghi cập nhật - Khả chịu lỗi: Cơ sở liệu NoSQL thường có khả chịu lỗi cao so với sở liệu SQL truyền thống Với khả mở rộng ngang tính phân tán, xử lý cố lỗi cách linh hoạt tự động - Hỗ trợ cho mơ hình liệu đặc biệt: Cơ sở liệu NoSQL cung cấp hỗ trợ cho mơ hình liệu đặc biệt tài liệu, đồ thời gian đồ đồ Điều cho phép lưu trữ truy xuất liệu hiệu cho loại ứng dụng khác mạng xã hội, hệ thống gợi ý hệ thống phân tích liệu 4.2 Bảng User STT Tên thuộc tính Loại address List age Int avatarImageLink String name String mail String password String uid String phone Int 10 role String STT Tên thuộc tính Loại uid String image String productName String artist String brand String featured Bool 4.3 Bảng Product versions [price, stock, versionName] Map [Int, Int, String] description String tags List[String] 10 sale Int 11 shippingPolicyID String 12 returnPolicyID String 13 changedTime DateTime STT Tên thuộc tính Loại uid String brandName String brandImage String brandDescription String changedTime DateTime STT Tên thuộc tính Loại uid String changedTime DateTime cartProduct[productUID, productName, Map[String, String, 4.4 Bảng Brand 4.5 Bảng Cart productImage, versionName, price, String, String, double, amount] Int] 4.6 Bảng Policy STT Tên thuộc tính Loại uid String policyName String policyType String policyContent String changedTime DateTime 4.7 Bảng Banner STT Tên thuộc tính Loại uid String bannerName String bannerLink String bannerStatus Bool bannerPriority Bool changedTime DateTime ​CHƯƠNG V: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 5.1 Screen flow 5.2 Mô tả chi tiết số hình 5.2.1 Trang chủ (Đã đăng nhập) ● Mô tả tổng quát: Trang chủ trang web tối giản hóa nhằm thuyết phục người đọc thực mục tiêu chuyển đổi định mua hàng Nội dung chi tiết sản phẩm dịch vụ bao gồm lợi ích khách hàng, đặc điểm bật, phản hồi khách hàng bảng giá, cung cấp để khách hàng có đầy đủ thông tin tự tin đưa định mua hàng Trang chủ thiết kế đơn giản hấp dẫn, tạo lòng tin động lực cho khách hàng để thực hành động mua hàng trang web Hình 5.2.1 5.2.2 Chi tiết sản phẩm ● Mô tả tổng quát: Trang cung cấp mơ tả chi tiết sản phẩm, giải thích rõ ràng cách sản phẩm hoạt động vấn đề mà giải Bên cạnh đó, hình ảnh sống động chất lượng cao sản phẩm hiển thị từ nhiều góc độ khác nhau, giúp người dùng có nhìn trực quan thực tế sản phẩm Thơng tin giá cả, sách bảo hành ưu đãi đặc biệt cung cấp trang Điều giúp người dùng có nhìn tổng quan giá trị hấp dẫn sản phẩm, từ giúp họ đưa định mua hàng thơng qua trang web Hình 5.2.2 5.2.3 Trang About Us ● Mô tả tổng quát: Trang "About Us" (Về chúng tôi) trang trang web cung cấp thông tin chi tiết tổ chức, công ty, doanh nghiệp đứng sau trang web Mục đích trang giới thiệu lịch sử, sứ mệnh, giá trị cốt lõi mục tiêu tổ chức, nhằm tạo dựng lòng tin gắn kết với khách hàng Trang "About Us" thường bắt đầu phần giới thiệu ngắn gọn tổ chức, với câu chủ đề súc tích lịch sử thành lập, phát triển thành tựu quan trọng Nó cung cấp nhìn tổng quan trình hình thành tiến tổ chức, giúp người đọc hiểu rõ đẳng cấp kinh nghiệm Hình 5.2.3 5.2.4 Trang đăng nhập ● Mô tả tổng quát: Trang "Đăng nhập" phần quan trọng trang web, cho phép người dùng truy cập vào tài khoản cá nhân Trang cung cấp giao diện chức cho phép người dùng nhập thông tin đăng nhập, tên đăng nhập mật khẩu, để xác thực truy cập vào tính dịch vụ khác trang web Giao diện trang "Đăng nhập" thường bao gồm trường nhập thông tin tên đăng nhập địa email mật Người dùng điền thông tin dựa tài khoản đăng ký trước Ngồi ra, trang cung cấp tùy chọn khác "Ghi nhớ đăng nhập" để giữ phiên đăng nhập lâu dài "Quên mật khẩu" để khôi phục mật trường hợp người dùng qn Hình 5.2.4 5.2.5 Trang tốn đơn hàng ● Mơ tả tổng qt: Trang "Checkout" (Thanh tốn) phần quan trọng trang web mua sắm, nơi người dùng hồn tất q trình mua hàng thực toán Trang cung cấp giao diện chức cho phép người dùng xem lại đơn hàng, cung cấp thơng tin tốn hồn tất giao dịch mua hàng Giao diện trang "Checkout" thường bao gồm tóm tắt đơn hàng, bao gồm mặt hàng chọn, số lượng tổng cộng giá trị đơn hàng Người dùng xem lại thông tin thực chỉnh sửa cần thiết, thay đổi số lượng loại bỏ mặt hàng khỏi đơn hàng Hình 5.2.5 CHƯƠNG VII KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết - Ứng dụng thực đáp ứng chức hệ thống thương mại điện tử - Xây dựng ứng dụng có UI/UX thân thiện với người dùng, dễ dàng sử dụng phù hợp với lứa tuổi - Việc sử dụng ứng dụng dễ dàng, có mơ tả chi tiết lúc dùng - Quản lý liệu, thông tin cá nhân cách dễ dàng - Tối ưu hoá khả sàng lọc thông tin - Ứng dụng chế gợi ý người dùng thơng minh 6.2 Hạn chế - Chưa có mạng lưới liên kết người dùng - Dữ liệu hạn chế - Một số nghiệp vụ cần thời gian để hoàn thiện 6.3 Hướng phát triển Trong tương lai, em hoàn thiện chức chưa đáp ứng tốt yêu cầu người dùng, mở rộng thêm số tính trang blog để theo dõi tin tức, chức nhắc nhở có giảm giá, hệ thống recommending Ngồi cịn xây dựng tảng di động để mở rộng phạm vi người dùng 6.4 Kết luận Phần mềm em đáp ứng đầy đủ chức Bên cạnh đó, em học thêm kỹ mềm kỹ giao tiếp trình học online, khả quản lý kỹ khác để giúp ích cho em tương lai CHƯƠNG VIII TÀI LIỆU THAM KHẢO - Dart: https://dart.dev/ - Flutter: https://flutter.dev/ - Firebase: https://firebase.google.com/ - Figma: https://www.figma.com/ - UI/UX: - https://www.coursera.org/professional-certificates/google-ux-design - https://www.designsystems.com/ - https://m3.material.io/ - https://uxfoundation.vn/pages/khoa-hoc-psychology-in-ux-design