Đồ án xây dựng website bán điện thoại di động

ĐẠ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 ĐỒ ÁN XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI DI ĐỘNG GV HƯỚNG DẪN: ThS TRẦN THỊ HỒNG YẾN SV THỰC HIỆN: LÊ TRỊNH VIỆT TIẾN – 20520801 TP HỒ CHÍ MINH, THÁNG NĂM 2023 LỜI CẢM ƠN Em xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người hướng dẫn nhóm em suốt trình thực đồ án Em vơ biết ơn tận tình dẫn q trình nhóm thực đề tài Bước đầu tiếp cận cơng nghệ mới, nhóm cịn nhiều thiếu sót mặt kiến thức kinh nghiệm thực tiễn nên khơng tránh khỏi nhiều sai sót Những nhận xét, góp ý chân tình sở để nhóm cải tiến hồn thiện đề tài cách tốt Đề tài nhóm thực khoảng thời gian tháng, lần đầu tiếp cận công nghệ mới, bước đầu vào thực tế nên nhiều hạn chế kiến thức kinh nghiệm thực tiễn Do vậy, chắn tránh khỏi sai sót, nhóm mong nhận bảo, ý kiến đóng góp quý báu cô bạn học lớp để nhóm bổ sung, cải tiến sản phẩm nâng cao kiến thức, hoàn thiện thân tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Lời cuối, em xin kính chúc dồi sức khỏe, niềm tin để tiếp tục truyền đạt kiến thức cho bạn sinh viên TP Hồ Chí Minh, ngày 24 tháng năm 2023 Sinh viên thực Lê Trịnh Việt Tiến MỤC LỤC Chương TỔNG QUAN VỀ ĐỀ TÀI 1.1 Giới thiệu đề tài 1.2 Phạm vi nghiên cứu .8 1.3 Phương pháp nghiên cứu .9 1.4 Mục tiêu đề tài .9 Chương CƠ SỞ LÝ THUYẾT 10 2.1 Tổng quan Javascript 10 2.1.1 Giới thiệu 10 2.1.2 Ưu điểm .11 2.1.3 Nhược điểm .12 2.2 Tổng quan ReactJS 12 2.2.1 Giới thiệu 12 2.2.2 Ưu điểm .13 2.2.3 Nhược điểm .14 2.3 Tổng quan NodeJS 14 2.3.1 Giới thiệu 14 2.3.2 Ưu điểm .14 2.3.3 Nhược điểm .15 2.4 Tổng quan MongoDB .15 2.4.1 Giới thiệu 15 2.4.2 Ưu điểm .16 2.4.3 Nhược điểm .16 Chương PHÂN TÍCH THIẾT KẾ HỆ THỐNG .17 3.1 Phân tích yêu cầu đề 17 3.1.1 Phát biểu toán 17 3.1.2 Yêu cầu toán 18 3.2 Nghiên cứu trạng 19 3.3 Đặc tả hệ thống 20 Chương HIỆN THỰC HỆ THỐNG 21 4.1 Sơ đồ Use Case 21 4.1.1 Sơ đồ Use Case khách hàng 21 4.1.2 Sơ đồ Use Case khách hàng – thành viên 22 4.1.3 Sơ đồ Use Case quản lý 23 4.2 Biều đồ phân rã chức 23 4.3 Biểu đồ 24 4.3.1 Biểu đồ đăng nhập 24 4.3.2 Biểu đồ đăng ký thành viên 25 4.3.3 Biểu đồ tìm kiếm điện thoại 26 4.3.4 Biểu đồ đặt hàng 27 4.3.5 Biểu đồ xem thông tin điện thoại 28 4.3.6 Biểu đồ bình luận 29 4.3.7 Biểu đồ hiển thị danh sách điện thoại 30 4.3.8 Biểu đồ thêm điện thoại 31 4.3.9 Biểu đồ xóa điện thoại 32 4.3.10 Biểu đồ xem đơn hàng 33 4.3.11 Biểu đồ xóa thành viên 34 4.3.12 Biểu đồ xóa đơn hàng 35 4.4 Thiết kế sở liệu 35 4.4.1 Bảng liệu Phone 36 4.4.2 Bảng liệu User 37 4.4.3 Bảng liệu Order 37 4.5 Thiết kế giao diện người dùng .38 4.5.1 Giao diện trang chủ 38 4.5.2 Giao diện chi tiết điện thoại 40 4.5.3 Giao diện đăng ký, đăng nhập 42 4.5.4 Giao diện tìm kiếm điện thoại 44 4.5.5 Giao diện đặt hàng .44 4.5.6 Giao diện quản lý điện thoại 46 4.5.7 Giao diện quản lý thành viên .47 4.5.8 Giao diện quản lý đơn hàng .48 KẾT LUẬN .49 TÀI LIỆU THAM KHẢO 50 DANH MỤC HÌNH ẢNH Hình 4.1 – Sơ đồ Use Case khách hàng .21 Hình 4.2 – Sơ đồ Use Case khách hàng thành viên 22 Hình 4.3 – Sơ đồ Use Case quản lý 23 Hình 4.4 – Biểu đồ phân rã chức 24 Hình 4.5 – Biểu đồ đăng nhập 24 Hình 4.6 – Biểu đồ đăng ký thành viên 25 Hình 4.7 – Biểu đồ tìm kiếm điện thoại 26 Hình 4.8 – Biểu đồ đặt hàng 27 Hình 4.9 – Biểu đồ xem thơng tin điện thoại 28 Hình 4.10 – Biểu đồ bình luận 29 Hình 4.11 – Biểu đồ hiển thị danh sách điện thoại .30 Hình 4.12 – Biểu đồ thêm điện thoại 31 Hình 4.13 – Biểu đồ xóa điện thoại 32 Hình 4.14 – Biểu đồ xem đơn hàng 33 Hình 4.15 – Biểu đồ xóa thành viên .34 Hình 4.16 – Biểu đồ xóa đơn hàng .35 Hình 4.17 – Giao diện trang chủ .39 Hình 4.18 – Giao diện chi tiết điện thoại 41 Hình 4.20 – Giao diện đăng nhập 42 Hình 4.21 – Giao diện đăng ký 43 Hình 4.22 – Giao diện tìm kiếm sản phẩm .44 Hình 4.23 – Giao diện đặt hàng 45 Hình 4.24 – Giao diện quản lý điện thoại (1) 46 Hình 4.25 – Giao diện quản lý điện thoại (2) 47 Hình 4.26 – Giao diện quản lý điện thoại (3) 47 Hình 4.27 – Giao diện quản lý thành viên 48 Hình 4.28 – Giao diện quản lý đơn hàng 48 DANH MỤC BẢNG Bảng 3.1 – Đặc tả hệ thống .20 Bảng 4.1 – Bảng liệu Phone 36 Bảng 4.2 – Bảng liệu User 37 Bảng 4.3 – Bảng liệu Order 37 TÓM TẮT ĐỒ ÁN Đồ án “Xây dựng website bán điện thoại di động” tập trung vào khảo sát thực trạng cửa hàng kinh doanh điện thoại di động để từ xây dựng website đáp ứng nhu cầu cần thiết cửa hàng bán điện thoại di động Đề tài việc tìm hiểu thực trạng, đưa vấn đề tồn đọng cần cải thiện Xác định phạm vi, toán, mục tiêu đề tài Từ đưa chức cần có ứng dụng Ngồi việc xử lý nghiệp vụ cho ứng dụng, em tìm hiểu, so sánh lựa chọn công nghệ phù hợp giúp nâng cao trải nghiệm người dùng, tối ưu chi phí phát triển, triển khai, bảo trì nâng cấp Vì ứng dụng mang tính thực tiễn cao, việc yêu cầu thay đổi thường xuyên thời gian phát triển ngắn, trình phát triển sản phẩm vận dụng mơ hình Agile làm phương pháp luận cho qui trình phát triển phần mềm Kết thu giai đoạn phân tích, thiết kế mơ hình hóa UML thơng qua cơng cụ PlantUML giao diện thiết kế Figma Ở giai đoạn thực hiện, thư viện ReactJS sử dụng cho client NodeJS sử dụng cho server, sử dụng Visual Studio Code làm IDE Phần cuối đồ án trình bày kết thực lên báo cáo, đưa kết luận hướng phát triển cho ứng dụng tương lai Nội dung đồ án trình bày chương, sau: • Chương 01 – Tổng quan đề tài: Xác định mục tiêu, nội dung nghiên cứu, phạm vi đề tài • Chương 02 – Cơ sở lý thuyết: Giới thiệu công nghệ sử dụng, cách thức hoạt động, ưu điểm, nhược điểm công nghệ • Chương 03 – Phân tích thiết kế hệ thống: Phân tích yêu cầu chức năng, yêu cầu phi chức • Chương 04 – Hiện thực hệ thống: Mô tả sơ đồ đặc tả Use Case, quy trình sử dụng, trình tự hệ thống, thiết kế liệu, thiết kế giao diện người dùng Chương TỔNG QUAN VỀ ĐỀ TÀI Giới thiệu đề tài 1.1 Trong sống đại với tác động đại dịch, nhu cầu mua sắm online người tiêu dùng tăng cao nhờ tiện lợi, rõ ràng Đặc biệt hàng bán điện thoại di động, tác động việc cách ly mà nhu cầu sử dụng điện thoại để giải trí, học tập, làm việc… người dùng lớn Nhận thấy nhu cầu cửa hàng tiềm việc kinh doanh online, nhóm em định xây dựng Website bán điện thoại di động nhằm thúc đẩy doanh thu cho cửa hàng tạo tiện lợi cho người mua thông qua việc bán hàng online Website cung cấp thơng tin xác sản phẩm cho người mua Ngồi cịn giúp cửa hàng quản lý đơn hàng doanh thu 1.2 Phạm vi nghiên cứu • Phạm vi mơi trường: o Triển khai sản phẩm mơi trường web • Phạm vi chức năng: o Đối với phía admin: ▪ Quản lý sản phẩm ▪ Quản lý đơn hàng ▪ Quản lý tài khoản ▪ Thống kê o Đối với phía website: ▪ Đăng nhập, đăng ký ▪ Hiển thị danh sách sản phẩm ▪ Hiển thị chi tiết sản phẩm ▪ Tìm kiếm sản phẩm ▪ Bộ lọc chi tiết sản phẩm ▪ Chức giỏ hàng ▪ Chức đặt hàng 1.3 Phương pháp nghiên cứu • Tham khảo website liên quan để hiểu rõ nghiệp vụ • Lên kế hoạch • Tìm hiểu cơng nghệ sử dụng cho đề tài • Triển khai theo kế hoạch sẵn có • Kiểm thử sửa lỗi (nếu có) 1.4 Mục tiêu đề tài • Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài • Hiểu rõ nghiệp vụ, chức website bán điện thoại di động • Xây dựng website bán điện thoại di động đáp ứng yêu cầu giao diện chức đề 4.4.1 Bảng liệu Phone Bảng 4.1- Bảng liệu Phone STT Tên thuộc tính Kiểu liệu Khóa Not Null Id String Name String Price number salePrice number Image string Os String Ram String Battery String Rom String 10 Camera String 11 Screen String 12 Comments Array 13 Rate Number X 36 X Khóa ngoại 4.4.2 Bảng liệu User Bảng 4.2 – Bảng liệu User STT Tên thuộc tính Kiểu liệu Khóa Not Null Khóa ngoại Id String Name String Email String Password string Address String isAdmin Boolean Phone String X X 4.4.3 Bảng liệu Order Bảng 4.3 – Bảng liệu Order STT Tên thuộc tính Kiểu liệu Khóa Not Null Khóa ngoại Id String Province String District String Ward String Phone String X 37 X User String Price String paymentMethod String Status Status 10 Items Array 4.5 X X Thiết kế giao diện người dùng 4.5.1 Giao diện trang chủ Đây giao diện trang chủ trang web Với trang người quản lí, khách hàng kể thành viên hay chưa thành viên truy cập Trang web cung cấp thơng tin điện thoại giá bán, hãng, thông tin giảm giá 38 Hình 4.17 – Giao diện trang chủ 39 4.5.2 Giao diện chi tiết điện thoại Đây trang web cung cấp tên điện thoại, hãng, pin, hình,… giá bán, đánh giá người mua khác, xem số đánh giá,… nhằm đáp ứng nhu cầu tìm điện thoại người dùng 40 Hình 4.18 – Giao diện chi tiết điện thoại 41 4.5.3 Giao diện đăng ký, đăng nhập Người dùng đăng nhập đăng kí tài khoản để đảm bảo việc mua hàng toán Hình 4.19 – Giao diện đăng nhập 42 Hình 4.20 – Giao diện đăng ký 43 4.5.4 Giao diện tìm kiếm điện thoại Người dùng tìm kiếm điện thoại theo ý muốn Hình 4.21 – Giao diện tìm kiếm sản phẩm 4.5.5 Giao diện đặt hàng Người dùng chọn điện thoại mà muốn, hệ thống chuyển tiếp đến trang đặt hàng Trong trang này, người dùng nắm giá tiền sản phẩm mà khách hàng thêm vào giỏ hàng Ứng với số lượng điện thoại chọn, tổng giá tiền thay đổi để tiện cho người dùng theo dõi 44 Hình 4.22 – Giao diện đặt hàng 45 4.5.6 Giao diện quản lý điện thoại Trong trang này, người quản lí kiểm sốt tồn thơng tin điện thoại Hình 4.23 – Giao diện quản lý điện thoại (1) Với chức năng, xem thông tin chi tiết, thêm, chỉnh sửa, xóa điện thoại Khi click vào nút exit bên phải điện thoại, trang thông tin điện thoại Khi muốn thêm điện thoại mới, người quản lí chọn vào icon “Add” phía trang quản lí điện thoại phim Hệ thống trang sản phẩm để người quản lí nhập thông tin điện thoại vào Sau điền đầy đủ thông tin, người dùng chọn “Save” để lưu thông tin vào hệ thống Người dùng muốn chỉnh sửa thông tin phim, click vào nút chỉnh sửa điện thoại, hệ thống trang thông tin để phục vụ việc chỉnh sửa Sau chỉnh sửa thông tin cần thiết, người dùng nhấn nút Save để lưu thông tin vào hệ thống Đối với chức Xóa điện thoại, người dùng nhấn vào nút xóa bên phải để thực tiến trình xóa 46 Hình 4.24 – Giao diện quản lý điện thoại (2) Hình 4.25 – Giao diện quản lý điện thoại (3) 4.5.7 Giao diện quản lý thành viên Trong trang này, người quản lí xem tồn thơng tin tài khoản thành viên 47 Hình 4.26 – Giao diện quản lý thành viên 4.5.8 Giao diện quản lý đơn hàng Trong trang này, người quản lí kiểm sốt tồn thông tin đơn đặt hàng Hình 4.27 – Giao diện quản lý đơn hàng 48 KẾT LUẬN • Đánh giá o Thuận lợi ▪ Giảng viên hướng dẫn tận tình, có hỗ trợ, định hướng nghiên cứu thực đề tài cho nhóm ▪ Thời gian thực đồ án tương đối dài, kế hoạch thực cách dễ dàng, khơng có áp lực nặng nề o Khó khăn ▪ Bước đầu tiếp cận với cơng nghệ nên q trình tìm hiểu gặp nhiều khó khăn thời gian ▪ Có nhiều vấn đề công nghệ phát sinh không theo kế hoạch trình thực đồ án dẫn đến nhiều thời gian so với dự kiến • Kết đạt o Ưu điểm ▪ Hoàn thành yêu cầu đặt ban đầu, đáp ứng đầy đủ tính cần thiết Website bán điện thoại di động ▪ Tốc độ phản hồi nhanh, trải nghiệm người dùng tối ưu ▪ Sinh viên có thêm kiến thức cơng nghệ Web, móng tốt cho tương lai o Nhược điểm ▪ Chưa có hướng dẫn sử dụng cho người dùng ▪ Ứng dụng đơn giản, làm dựa kinh nghiệm thân nên thiếu sót tính • Hướng phát triển o Phát triển tính liên hệ với admin thơng qua chatbot o Phát triển tính đặt hàng khơng cần tài khoản o Phát triển tính gợi ý, khuyến nghị sản phẩm o Hoàn thiện chức có 49 TÀI LIỆU THAM KHẢO [1] “Javascript gì? Kiến thức tổng quan Javascript từ A – Z” https://fptcloud.com/javascript/ (truy cập lần cuối vào ngày 24/6/2023) [2] “Reactjs gì? Dùng để làm gì? Tìm hiểu Reactjs từ A – Z” https://fptcloud.com/reactjs/ (truy cập lần cuối vào ngày 24/6/2023) [3] “ReactJS - Ưu điểm nhược điểm” https://viblo.asia/p/reactjs-uu-diem-vanhuoc-diem-V3m5WzexlO7 (truy cập lần cuối vào ngày 24/6/2023) [4] “NodeJS gì? Tổng quan kiến thức Node.JS” https://vietnix.vn/nodejs-la-gi/ (truy cập lần cuối vào ngày 24/6/2023) [5] “MongoDB gì? Định nghĩa đầy đủ chi tiết MongoDB” https://topdev.vn/blog/mongodb-la-gi/ (truy cập lần cuối vào ngày 24/6/2023) [6] “Stack Overflow - Where Developers Learn, Share, & Build Careers” https://stackoverflow.com/ (truy cập lần cuối vào ngày 24/6/2023) 50