Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE VÀ ỨNG DỤNG MOBILE KINH DOANH PHỤ KIỆN MÁY TÍNH GVHD: THS NGUYỄN TRẦN THI VĂN SVTH: LÊ VĂN HOÀN ĐẶNG QUỐC TRUNG SKL009620 Tp Hồ Chí Minh, tháng 6/2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN -🙦 🙦 🙦 - KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE VÀ ỨNG DỤNG MOBILE KINH DOANH PHỤ KIỆN MÁY TÍNH GVHD: ThS Nguyễn Trần Thi Văn Sinh viên thực MSSV Lê Văn Hoàn 18110111 Đặng Quốc Trung 18110220 Tp Hồ Chí Minh, tháng 06 năm 2022 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* NHIỆM VỤ THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP Họ tên Sinh viên: Lê Văn Hoàn MSSV: 18110111 Họ tên Sinh viên: Đặng Quốc Trung MSSV: 18110220 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website ứng dụng mobile kinh doanh phụ kiện máy tính Nội dung thực hiện: Lý thuyết: - Tìm hiểu MERN Stack: MongoDB, ExpressJS, ReactJS, NodeJS Tìm hiểu Flutter Tìm hiểu gắn API Tìm hiểu cách triển khai back-end với Heroku Thực hành: - Xây dựng website ứng dụng mobile kinh doanh phụ kiện máy tính, với tính sau: o Cho phép quản trị viên quản lý liệu hệ thống (doanh thu, người dùng, sản phẩm, đơn hàng, đánh giá) thêm, xóa, cập nhật liệu o Cho phép người dùng thực quyền lợi khách hàng bản: xem, tìm kiếm, chọn lọc sản phẩm theo ý muốn, đặt hàng có nhu cầu mua tốn với thẻ tín dụng (VnPay PayPal) o Cho phép người dùng quản trị viên tìm kiếm sản phẩm, hóa đơn để xem thông tin chi tiết sản phẩm, xem thơng tin chi tiết hóa đơn Thời gian thực hiện: 15 tuần (Bắt đầu từ 7/3/2022 đến 27/6/2022) Chữ ký SV: …………………………………………………………… Chữ ký SV: …………………………………………………………… TRƯỞNG NGÀNH CNTT (Ký ghi rõ họ tên) TP.HCM, Ngày… tháng… năm 2022 GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Lê Văn Hoàn MSSV: 18110111 Họ tên Sinh viên: Đặng Quốc Trung MSSV: 18110220 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website ứng dụng mobile kinh doanh phụ kiện máy tính Họ tên Giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: - Về lý thuyết: - Về thực hành: Ưu điểm: Khuyết điểm: Đánh giá loại: Điểm: (Bằng chữ: ) Tp Hồ Chí Minh, ngày… tháng … năm 2022 GIẢNG VIÊN HƯỚNG DẪN (Ký & ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Lê Văn Hoàn MSSV: 18110111 Họ tên Sinh viên: Đặng Quốc Trung MSSV: 18110220 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website ứng dụng mobile kinh doanh phụ kiện máy tính Họ tên Giảng viên phản biện: ThS Nguyễn Thanh Phước NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: - Về lý thuyết: - Về thực hành: Ưu điểm: Khuyết điểm: Đánh giá loại: Điểm: (Bằng chữ: ) Tp Hồ Chí Minh, ngày… tháng… năm 2022 GIẢNG VIÊN PHẢN BIỆN (Ký & ghi rõ họ tên) LỜI CAM ĐOAN Chúng em xin cam đoan đề tài tiểu luận chuyên ngành "Xây dựng website ứng dụng mobile kinh doanh phụ kiện máy tính" thành trình học, nghiên cứu kinh nghiệm đút kết nhóm hướng dẫn giáo viên hướng dẫn thầy Nguyễn Trần Thi Văn Mọi tham khảo nguồn tham khảo khóa luận chun ngành trích dẫn phần Tài liệu tham khảo TP.HCM, tháng 06 năm 2022 Nhóm sinh viên thực Lê Văn Hồn 18110111 Đặng Quốc Trung 18110220 LỜI CẢM ƠN Để hoàn thành tốt đề tài báo cáo này, chúng em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Trần Thi Văn, người trực tiếp hỗ trợ chúng em suốt trình làm đề tài Chúng em xin gửi lời cảm ơn chân thành quý thầy khoa Đào tạo Chất lượng cao nói chung ngành Cơng nghệ thơng tin nói riêng tận tình truyền đạt kiến thức cần thiết giúp chúng em có tảng để làm nên đề tài này, tạo điều kiện để chúng em tìm hiểu thực tốt đề tài Cùng với đó, chúng em xin gửi cảm ơn đến bạn khóa cung cấp nhiều thơng tin kiến thức hữu ích giúp chúng em hồn thiện đề tài Đề tài báo cáo chúng em thực khoảng thời gian ngắn, với kiến thức hạn chế nhiều hạn chế khác mặt kỹ thuật kinh nghiệm việc thực dự án phần mềm Do đó, q trình làm nên đề tài có thiếu sót điều khơng thể tránh khỏi nên chúng em mong nhận ý kiến đóng góp quý báu thầy để kiến thức chúng em hồn thiện chúng em làm tốt lần sau Chúng em xin chân thành cảm ơn Cuối lời, chúng em kính chúc thầy dồi sức khỏe thành công nghiệp trồng người Một lần chúng em xin chân thành cảm ơn TP.HCM, ngày tháng 06 năm 2022 Nhóm sinh viên thực Lê Văn Hồn 18110111 Đặng Quốc Trung 18110220 TĨM TẮT Trong hai mươi năm trở lại đây, giới trải qua nhiều phát triển, thay đổi chóng mặt Điều thể qua tất ngành nghề liên quan đến kỹ thuật, giáo dục, khoa học,… Nhưng đặc biệt đến với kỷ nguyên đột phá vượt bậc khoa học công nghệ ngày nay, vừa lợi ích đến lồi người, đặt khơng thử thách phát triển toàn diện thay đổi sống nhân loại Trước thời kỳ chưa phát triển, người có nhu cầu sinh hoạt tiêu dùng đơn giản, chẳng hạn ăn loại thú thực vật mà họ săn bắt được, dùng khố để giữ ấm che chắn thể, hay đại chút dùng trí thơng minh hình thành từ hàng nghìn năm trước để học tập đèn đom đóm Tuy nhiên, với phát triển vượt bậc, đặc biệt khoa học cơng nghệ, lồi người tạo nên thị trường buôn bán điện tử bên cạnh việc mua bán trực tiếp Điều giúp mua hàng tiện lợi nắm bắt hết tất thơng tin sản phẩm cần mua mua cú click chuột Cho đến nay, Việt Nam nước sử dụng nhiều nguồn tài nguyên Internet để phục vụ cho việc mua bán thương mại điện tử Bắt kịp xu hướng mua sắm ấy, thêm vào việc Việt Nam gánh phải hậu nặng nề đại dịch Covid-19, sinh viên - học sinh khó khăn việc tiếp cận sản phẩm công nghệ để học trực tuyến Đó lý để nhóm em chọn đề tài "Xây dựng website ứng dụng mobile kinh doanh phụ kiện máy tính" Nền tảng website app mobile kinh doanh phụ kiện máy tính hướng tới nhóm người dùng sinh viên - học sinh - giáo viên có nhu cầu sử dụng thiết bị cơng nghệ mức cao đại dịch Covid gây nên MỤC LỤC CHƯƠNG : TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Tính cấp thiết đề tài 1.3 Mục tiêu nghiên cứu .2 1.4 Kết dự kiến đạt 1.5 Môi trường hoạt động 1.6 Ràng buộc CHƯƠNG : CƠ SỞ LÝ THUYẾT .4 2.1 Cơ sở lý thuyết Front-end .4 2.2 Cơ sở lý thuyết Back-end 2.2.1 NodeJS 2.2.2 ExpressJS 2.3 Cơ sở lý thuyết Flutter 2.4 Cơ sở lý thuyết Database 2.5 Cơ sở lý thuyết Host .7 2.6 Các công cụ liên quan 2.6.1 Postman CHƯƠNG : KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 3.1 Khảo sát trạng .9 3.2 Xác định yêu cầu 3.2.1 Yêu cầu chức 3.2.2 Yêu cầu phi chức .10 CHƯƠNG : PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .11 4.1 Mơ hình hố u cầu 11 4.1.1 Usecase tổng quát 11 4.1.2 Chi tiết Usecase 11 4.1.2.1 Usecase Quản lý khách hàng 11 4.1.2.1.1 Usecase Xem thông tin khách hàng 11 4.1.2.2 Usecase Quản lý sản phẩm 12 4.1.2.2.1 Usecase Tạo sản phẩm 12 4.1.2.2.2 Usecase Update sản phẩm 12 4.1.2.3 Usecase Quản lý nhãn hiệu 13 4.1.2.3.1 Usecase Tạo nhãn hiệu 13 4.1.2.4 Usecase Quản lý đơn hàng 14 4.1.2.4.1 Usecase xác nhận đơn hàng .14 4.1.2.5 Usecase Quản lý sản phẩm (admin) 14 4.1.2.5.1 Usecase Xóa sản phẩm 15 4.1.2.6 Usecase Quản lý danh mục sản phẩm 15 4.1.2.6.1 Usecase Tạo danh mục 15 4.1.2.6.2 Usecase Xóa danh mục 16 4.1.2.7 Usecase Quản lý nhân viên 16 4.1.2.7.1 Usecase xóa nhân viên 16 4.1.2.8 Usecase Quản lý khách hàng 17 4.1.2.8.1 Usecase xóa khách hàng 17 4.1.2.9 Usecase Quản lý thống kê .18 4.1.2.9.1 Usecase Xem thống kê 18 4.1.2.10 Usecase Chỉnh sửa thông tin cá nhân 19 4.1.2.10.1 Usecase Update thông tin cá nhân 19 4.1.2.11 Usecase Đăng xuất .20 4.1.2.12 Usecase Quên mật Reset password 21 4.1.2.12.1 Usecase Reset password 21 4.1.2.13 Usecase Đăng nhập 22 4.1.2.14 Usecase Xem giỏ hàng 23 4.1.2.14.1 Usecase Thêm sản phẩm vào giỏ hàng 23 4.1.2.14.2 Usecase Xóa sản phẩm khỏi giỏ hàng 24 4.1.2.15 Usecase Thanh toán 24 4.1.2.16 Usecase Review sản phẩm 25 4.1.2.16.1 Usecase Tạo review 25 4.1.2.16.2 Usecase Xóa review 25 4.1.2.16.3 Usecase Update review 26 4.1.2.17 Usecase Tìm kiếm sản phẩm .26 4.1.2.18 Usecase Đăng ký 27 4.1.3 Đặc tả yêu cầu .27 4.1.3.1 Yêu cầu khách hàng 27 4.1.3.1.1 Khách hàng chưa có tài khoản 27 4.1.3.1.2 Khách hàng có tài khoản .28 4.1.3.2 Yêu cầu quản trị viên 28 Chương 5: Kiểm thử ứng dụng 5.2.5.9 Nhân viên chấp nhận đơn hàng hồn thành Hình 5.29 Hình nhân viên chấp nhận đơn hoàn thành 5.2.5.10 Nhân viên xem chi tiết đơn hàng khách hàng Hình 5.30 Hình nhân viên xem chi tiết đơn khách hàng 90 Chương 5: Kiểm thử ứng dụng 5.2.5.11 Nhân viên theo dõi đơn hàng khách hàng Hình 5.31 Hình nhân viên theo dõi đơn khách hàng 5.2.5.12 Nhân viên xem chi tiết hoá đơn Hình 5.32 Hình nhân viên xem chi tiết đơn khách hàng 91 Chương 5: Kiểm thử ứng dụng 5.2.6 Khách hàng 5.2.6.1 Xem danh sách sản phẩm Hình 5.33 Hình khách hàng xem danh sách sản phẩm 5.2.6.2 Tìm kiếm sản phẩm Hình 5.34 Hình khách hàng tìm kiếm sản phẩm 92 Chương 5: Kiểm thử ứng dụng 5.2.6.3 Sắp xếp sản phẩm Hình 5.35 Hình khách hàng xếp sản phẩm 5.2.6.4 Thay đổi bố cục Hình 5.36 Hình khách hàng thay đổi bố cục 93 Chương 5: Kiểm thử ứng dụng 5.2.6.5 Phân trang Hình 5.37 Hình khách hàng phân trang sản phẩm 5.2.6.6 Xem chi tiết sản phẩm Hình 5.38 Hình khách hàng xem chi tiết sản phẩm 94 Chương 5: Kiểm thử ứng dụng 5.2.6.7 Xem review Hình 5.39 Hình khách hàng xem review sản phẩm 5.2.6.8 Tạo review Hình 5.40 Hình khách hàng tạo review sản phẩm 95 Chương 5: Kiểm thử ứng dụng 5.2.6.9 Xố review Hình 5.41 Hình khách hàng xố review sản phẩm 5.2.6.10 Sửa review Hình 5.42 Hình khách hàng sửa review sản phẩm 96 Chương 5: Kiểm thử ứng dụng 5.2.6.11 Thêm vào giỏ hàng Hình 5.43 Hình khách hàng thêm vào giỏ hàng 5.2.6.12 Xoá sản phẩm giỏ hàng Hình 5.44 Hình khách hàng xố sản phẩm giỏ hàng 97 Chương 5: Kiểm thử ứng dụng 5.2.6.13 Thanh tốn (PayPal) Hình 5.45 Hình khách hàng tốn với PayPal 98 Chương 5: Kiểm thử ứng dụng 5.2.6.14 Khơng tốn Hình 5.46 Hình khách hàng khơng toán 99 Chương 6: Kết luận CHƯƠNG : KẾT LUẬN 6.1 Kết đạt Trong trình thực đồ án, từ thời điểm nhận đề tài nay, nhóm gặp nhiều khó khăn không tránh khỏi ý kiến thảo luận khác Bên cạnh đó, tình hình dịch bệnh diễn phức tạp đó, nên việc thực đề tài thảo luận họp nhóm diễn online Tuy có nhiều khó khăn nhờ vào tinh thần tự học, tinh thần làm việc nhóm, hỗ trợ tận tình thầy, mà nhóm em gần hồn thành đề tài định hướng ban đầu mà nhóm đưa 6.2 Ưu điểm - Giao diện website app mobile đơn giản, dễ thao tác sử dụng - Đầy đủ tính CRUD hệ thống - Các bước authorization (xác thực quyền người dùng) thực đáng tin cậy, kiểm soát kỹ lưỡng client-side server-side - Giỏ hàng hoạt động tốt (Khi quản trị viên thay đổi giá sản phẩm có giỏ hàng khách hàng trước đó, sau thay đổi giá xong giá sản phẩm giỏ hàng khách tự động cập nhật) - Phương thức toán (PayPal, VnPay) phù hợp với xu hướng - Hỗ trợ người dùng chat với admin 6.3 Nhược điểm - Tốc độ xử lí trang web cịn chậm (load hình) - Trang web sử dụng loại ngơn ngữ, tính đồng khơng cao - Chưa tích hợp API giao hàng giaohangtietkiem (như mong muốn ban đầu) 6.4 Hướng phát triển - Tích hợp chức giao hàng sử dụng API giao hàng giaohangtietkiem - Thêm chức quản lý kho cho hệ thống 100 TÀI NGUYÊN MÃ NGUỒN Github Front-end: https://github.com/lehoan1810/Web_Ecommerce_MERN Github Back-end: https://github.com/lehoan1810/BE_Ecommerce Github Mobile: https://github.com/trungdang29122000/KLTN 101 TÀI LIỆU THAM KHẢO [1] Node.js, Express, MongoDB & More: The Complete Bootcamp 2022, https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/, 20/12/2021 [2] Mongoose v6.1.4: API docs, https://mongoosejs.com/docs/api.html, 20/12/2021 [3] [PTUDW-16CNTN] Nhóm 06 - Liên kết Paypal api sử dụng NodeJS để toán, https://www.youtube.com/watch?v=sVSKtnZixJs, 20/12/2021 [4] Node and Express Tutorial, https://www.youtube.com/watch?v=TNV0_7QRDwY, 20/12/2021 [5] JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript, 20/12/2021 [6] Ant Design of React - Ant Design, https://ant.design/docs/react/introduce, 20/12/2021 [7] Get Started - React, https://reactjs.org/docs/getting-started.html, 22/12/2021 [8] React Router: Declarative Routing for React.js, https://v5.reactrouter.com/web/guides/quick-start, 23/12/2021 [9] ReactJS gì? Những điều cần biết ReactJSC, https://viblo.asia/p/reactjs-la-gi-nhung-dieu-can-biet-ve-reactjsc-djeZ1GJo5Wz, 22/12/2021 [10] Top Reasons Why React JS for Startups in 2021 | FortunesoftIT, https://www.fortunesoftit.com/top-9-reasons-why-react-js-for-startups-in-2021/, 30/12/2021 [11] Một nhìn tổng quan Nodejs, https://viblo.asia/p/mot-cai-nhin-tong-quan-nhat-ve-nodejs-Ljy5VeJ3lra, 31/12/2021 [12] MongoDB gì? Cơ sở liệu phi quan hệ, https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N, 31/12/2021 102 [13] Expressjs gì? Tất tần tật khái niệm Express.js | TopDev, https://topdev.vn/blog/express-js-la-gi/, 31/12/2021 [14] Hosting gì? Giải thích web hosting cho người bắt đầu, https://www.hostinger.vn/huong-dan/hosting-la-gi-giai-thich-web-hosting-chonguoi-moi-bat-dau, 31/12/2021 [15] Postman gì? | Gọi API chưa dễ dàng | TopDev, https://topdev.vn/blog/postman-la-gi/, 31/12/2021 103 S K L 0