Xây dựng hệ thống bán điện thoại và phụ kiện đa nền tảng

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 ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG HỆ THỐNG BÁN ĐIỆN THOẠI VÀ PHỤ KIỆN ĐA NỀN TẢNG GVHD: TS HUỲNH XUÂN PHỤNG SVTH: HỒ HUY HOÀNG LÂM QUỐC KHÁNH SKL009829 Tp Hồ Chí Minh - 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM HỒ HUY HOÀNG – 18110284 LÂM QUỐC KHÁNH – 18110304 ĐỀ TÀI: XÂY DỰNG HỆ THỐNG BÁN ĐIỆN THOẠI VÀ PHỤ KIỆN ĐA NỀN TẢNG KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CƠNG NGHỆ THÔNG TIN GIẢNG VIÊN HƯỚNG DẪN TS HUỲNH XUÂN PHỤNG KHÓA 2018 ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ******* CỘNG HÒA XHCN VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Hồ Huy Hoàng MSSV 1: 18110284 Họ tên Sinh viên 2: Lâm Quốc Khánh MSSV 2: 18110304 Ngành: Công nghệ thông tin Tên đề tài: XÂY DỰNG HỆ THỐNG BÁN ĐIỆN THOẠI VÀ PHỤ KIỆN ĐA NỀN TẢNG Họ tên Giảng viên hướng dẫn: TS Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài khối lượng thực Ưu điểm Khuyết điểm Đề nghị cho phản biện hay không ? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giảng viên hướng dẫn (Ký & ghi rõ họ tên) năm ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ******* CỘNG HÒA XHCN VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Hồ Huy Hoàng MSSV 1: 18110284 Họ tên Sinh viên 2: Lâm Quốc Khánh MSSV 2: 18110304 Ngành: Công nghệ thông tin Tên đề tài: XÂY DỰNG HỆ THỐNG BÁN ĐIỆN THOẠI VÀ PHỤ KIỆN ĐA NỀN TẢNG Họ tên Giảng viên phản biện: NHẬN XÉT Về nội dung đề tài khối lượng thực Ưu điểm Khuyết điểm Đề nghị cho bảo vệ hay không ? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giảng viên phản biện (Ký & ghi rõ họ tên) năm LỜI CÁM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Công nghệ thông tin – Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh tạo điều kiện cho nhóm chúng em học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh nhóm chúng em xin gửi đến thầy Huỳnh Xuân Phụng lời cảm ơn sâu sắc Trải qua trình dài học tập thực đề tài thời gian qua Thầy tận tâm bảo nhiệt tình nhóm chúng em suốt q trình từ lúc bắt đầu kết thúc đề tài Nhờ có tảng kiến thức chuyên ngành vững cộng thêm với kinh nghiệm yêu cầu thực tế ngồi xã hội thơng qua việc học trường chuyến thực tế thu thập ý kiến người dùng Tập thể thầy cô Khoa Công nghệ thông tin đặc biệt thầy Huỳnh Xuân Phụng tặng cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Đặc biệt điều giúp thơi thúc chúng em hồn thành đề tài Chúng em thật cảm ơn khắc ghi kiến thức Đây hành trang vơ lớn chúng em trước bước sống Tuy nhiên lượng kiến thức vô tận với khả hạn hẹp chúng em cố gắng để hoàn thành cách tốt Chính việc xảy thiếu sót điều khó tránh khỏi Chúng em hi vọng nhận góp ý tận tình q thầy(cơ) qua chúng em rút học kinh nghiệm hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt đẹp Cuối lần chúng em xin gửi lời cảm ơn sâu sắc đến với thầy Huỳnh Xuân Phụng tập thể quý thầy (cô) Khoa Công nghệ thông tin – Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh Chúc thầy có sức khỏe thật tốt Chúng em xin chân thành cảm ơn! MỤC LỤC LỜI CÁM ƠN MỤC LỤC DANH SÁCH HÌNH DANH SÁCH BẢNG BIỂU 13 DANH SÁCH TỪ VIẾT TẮT 16 GIỚI THIỆU ĐỀ TÀI 17 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 17 MỤC TIÊU CỦA ĐỀ TÀI 18 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 18 3.1 Đối tượng nghiên cứu 18 3.2 Phạm vi nghiên cứu 18 PHÂN TÍCH CÁC ỨNG DỤNG CĨ LIÊN QUAN 18 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 19 CHƯƠNG 1: KHẢO SÁT HIỆN TRẠNG 20 1.1 Khảo sát trạng số website 20 1.1.1 FPT Shop (https://fptshop.com.vn/) 20 1.1.2 CellphoneS (https://cellphones.com.vn/) 21 1.1.3 Điện thoại giá kho (https://dienthoaigiakho.vn/) 22 1.1.4 Viettel Store (https://viettelstore.vn/) 23 1.2 Kết luận tiêu chí cần đạt 24 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 25 2.1 MERN Stack 25 2.1.1 NodeJS 26 2.1.2 ExpressJS 27 2.1.3 ReactJS 28 2.1.4 Database - MongoDB 30 2.2 Flutter 31 2.3 Cách lưu trữ mật vào database 31 2.2.1 Nguyên tắc lưu trữ mật người dùng vào database 31 2.2.2 Băm mật liệu có an tồn ? 31 2.2.3 Kết hợp hash salt 33 Sử dụng thuật toán bcrypt 33 2.4 Json Web Token 34 2.5 Google Firebase 36 2.6 Heroku 38 2.7 FPT Recommendation Platform 38 2.8 Rasa 39 CHƯƠNG 3: TÀI LIỆU MÔ TẢ HỆ THỐNG CHỨC NĂNG 41 3.1 Mô tả yêu cầu 41 3.1.1 Yêu cầu đề tài 41 3.1.2 Thiết kế hệ thống 42 3.2 Các phụ lục 44 3.3 Tổng quan 45 3.3.1 Sơ đồ tổng quan 45 3.3.2 Lượt đồ Usecase 46 3.3.3 Danh sách chức 48 3.3.4 Ma trận quyền (Permission matrix) 50 3.3.5 Các yêu cầu phi chức 52 3.3.6 Các giả thiết, ràng buộc rủi ro 52 3.3.6 Quản lý delivery 53 3.4 Đặc tả chức 56 3.4.1 Tìm kiếm sản phẩm 56 3.4.2 Xem thông tin sản phẩm 60 3.4.3 Gợi ý sản phẩm 64 3.4.4 Đăng ký 74 3.4.5 Xem lịch sử mua hàng 78 3.4.6 Bình luận đánh giá 83 3.4.7 Thêm sản phẩm vào giỏ hàng 87 3.4.8 Chỉnh sửa thông tin cá nhân 90 3.4.9 Đăng nhập 97 3.4.10 Đăng xuất 102 3.4.11 Đổi mật 103 3.4.12 Quên mật 105 3.4.13 Quản lý danh mục 111 3.4.14 Quản lý thương hiệu 124 3.4.15 Quản lý khuyến 136 3.4.16 Quản lý sản phẩm 148 3.4.17 Quản lý đơn hàng 164 3.4.18 Thống kê 173 3.4.19 Thanh toán 177 3.4.20 Nhắn tin 187 3.4.21 Một số giao diện chung 189 CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 197 4.1 Kiến trúc hệ thống 197 4.2 Thiết kế sở liệu 199 4.2.1 Bảng Users 199 4.2.2 Bảng Refresh-token 200 4.2.3 Bảng Products 201 4.2.4 Bảng Payment 202 4.2.5 Bảng Order 203 4.2.6 Bảng Image 204 4.2.7 Bảng Discount 204 4.2.8 Bảng Comment 205 4.2.9 Bảng Category 206 4.2.10 Bảng Brand 206 CHƯƠNG 5: KIỂM THỬ PHẦN MỀM 207 5.1 Môi trường kiểm thử 207 5.2 Công cụ kiểm thử 207 5.3 Quy trình kiểm thử 207 5.4 Test case Kiểm thử thủ công 208 5.5 Test case Kiểm thử tự động 211 5.6 Quản lý test case thiết lập lịch thực thi test case 216 CHƯƠNG 6: HƯỚNG DẪN CÀI ĐẶT 220 6.1 Các biến môi trường 220 6.2 Chạy ứng dụng docker 222 6.3 Chạy node JS 222 6.4 Build ứng dụng di động 223 KẾT LUẬN 224 Kết đạt 224 Ưu điểm 225 Hạn chế 226 Hướng phát triển 226 TÀI LIỆU THAM KHẢO 227 DANH SÁCH HÌNH Hình 1: Website tham khảo 20 Hình 2: Website tham khảo 21 Hình 3: Website tham khảo 22 Hình 4: Website tham khảo 23 Hình 5: Hình minh họa MERN Stack 25 Hình 6: Một vài điều quan trọng NodeJs 26 Hình 7: Virtual DOM React 28 Hình 8: One-way binding 29 Hình 9: Bảng so sánh tốc độ Mongo hệ sở liệu quan hệ 30 Hình 10: Minh họa hash 32 Hình 11: Cấu trúc Json Web Token 34 Hình 12: Cách thức hoạt động Json Web Token 36 Hình 13: Các dịch vụ Google Firebase 36 Hình 14: Mơ tả Heroku 38 Hình 15: Thiết kế hệ thống 43 Hình 16: Lược đồ usecase tổng quan 46 Hình 17: Lược đồ usecase Quản lý Danh mục 46 Hình 18: Lược đồ usecase Quản lý Thương hiệu 47 Hình 19: Lược đồ usecase Quản lý sản phẩm 47 Hình 20: Lược đồ usecase Quản lý Khuyến 47 Hình 21: Lược đồ usecase Quản lý Đơn hàng 48 Hình 22: Lược đồ usecase Thanh toán 48 Hình 23: Sơ đồ “Tìm kiếm sản phẩm” 57 Hình 24: Sơ đồ hoạt động “Tìm kiếm sản phẩm” 57 Hình 25: Giao diện Tìm kiếm sản phẩm nhanh 58 Hình 26: Giao diện Tìm kiếm sản phẩm nâng cao 58 Hình 27: Màn hình Tìm kiếm sản phẩm ứng dụng di động 59 Hình 28: Sơ đồ “Xem thơng tin sản phẩm” 61 Hình 29: Sơ đồ hoạt động “Xem thơng tin sản phẩm” 61 Hình 30: Giao diện chi tiết sản phẩm 62 Hình 31: Màn hình Chi tiết sản phẩm ứng dụng di động 63 Hình 150: Quản lý testcase Test suite collection Katalon Studio Hình 151: Quản lý testcase Test suite Katalon Studio 213 Hình 152: Minh họa trình duyệt thực thi test case Katalon Studio 214 5.6 QUẢN LÝ TEST CASE VÀ THIẾT LẬP LỊCH THỰC THI TEST CASE Hình 153: Giao diện Katalon TestOps Katalon TestOps ứng dụng dựa web cung cấp liệu kiểm thử trực quan kết thực thi thông qua biểu đồ, đồ thị báo cáo Các tính bao gồm lưới thực thi, báo cáo nâng cao, giám sát cảnh báo, phân tích AI Hình 154: Quản lý Test Run Katalon TestOps 215 Hình 155: Tạo project link với github repository Katalon TestOps Hình 156: Lưu test case project Katalon TestOps 216 Hình 157: Quản lý test suite Katalon TestOps Hình 158: Quản lý test case Katalon TestOps 217 Hình 159: Kết sau chạy test case Katalon TestOps Hình 160: Quản lý thời gian thực thi test case Katalon TestOps 218 CHƯƠNG 6: HƯỚNG DẪN CÀI ĐẶT 6.1 CÁC BIẾN MÔI TRƯỜNG 6.1.1 Server Api Bảng 90: Biến mơi trường cho server api TÊN BIẾN PORT BẮT MƠ TẢ BUỘC Khơng MONGO_URI Có JWT_SECRET Có Port để listen (lắng nghe) server api Connection string để kết nối tới MongoDb Khóa bí mật (secret key), dùng Json Web token Thời gian có hiệu lực JWT_EXPIRES_IN Có jsonWebToken VD: 15m, 1d, 30d Thời gian có hiệu lực JWT_REFRESH_EXPIRES_IN Có refreshToken VD: 15d, 30d VNPAY_SECRET Có VNpay Secret VNPAY_TMN_CODE Có VNPay TMN Code VNPAY_URL Có VNPay Url FIREBASE_PROJECT_ID Có Firebase project Id FIREBASE_PRIVATE_KEY Có Firebase private key FIREBASE_CLIENT_EMAIL Có Firebase client email 219 MẶC ĐỊNH 3001 6.1.2 Client app Bảng 91: Biến môi trường cho client app TÊN BIẾN BẮT BUỘC PORT Khơng REACT_APP_API_BASE_URL Có REACT_APP_FIREBASE_CONFIG Có MƠ TẢ Port để listen (lắng nghe) client app MẶC ĐINH 3000 Base URL api Firebase config (*) (*) REACT_APP_FIREBASE_CONFIG có dạng chuỗi JSON.stringify từ object config Ví dụ: => REACT_APP_FIREBASE_CONFIG={“databaseURL”:”gs://fb-pro10.appspot.com”,”apiKey”:”xxx”,”authDomain”:”fb-pro10.firebaseapp.com”,”projectId”:”fb-pro-10”,”storageBucket”:”fb-pro10.appspot.com”,”messagingSenderId”:”111”,”appId”:”1:11:web:abcd”,”measurementId”: ”G-HJJH”} 220 6.2 CHẠY ỨNG DỤNG BẰNG DOCKER • Tạo file env chứa biến mơi trường cho server api thư mục server • Tạo file env chứa biến môi trường cho client app thư mục client • Dùng lệnh docker-compose up để chạy ứng dụng 6.3 CHẠY BẰNG NODE JS 6.3.1 Yêu cầu • NodeJS, nên dùng phiên LTS (Long Term Support) Có thể https://nodejs.org/en/download/ 6.3.2 Hướng dẫn • Server api o Mở command line (terminal) thư mục server o Dùng lệnh sau để cài đặt package project: npm install o Có thể tạo file nodemon.json thư mục server với nội dung sau để khởi tạo biến mơi trường: Hình 161: Nội dung file nodemon.json o Dùng lệnh để chạy server với biến file nodemon.json: npm run dev o Dùng lệnh sau để chạy server môi trường production, biến môi trường cần phải setup riêng, không dùng file nodemon.json: npm run start 221 • Client app o Mở command line (terminal) thư mục client o Dùng lệnh sau để cài đặt package project: npm ci o Tạo file env thư mục client với giá trị biến môi trường o Dùng lệnh sau để build ứng dụng: npm run build o Dùng lệnh sau để cài thư viện serve chạy ứng dụng vừa build npm install –g serve && serve –d build 6.4 BUILD ỨNG DỤNG DI ĐỘNG 6.4.1 Yêu cầu Flutter: version 3+ 6.4.2 Chạy ứng dụng Dùng lệnh sau: flutter clean && flutter pub get && flutter pub run flutter_native_splash:create && flutter run 6.4.3 Build app Dùng lệnh sau flutter build apk –release 222 KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC • Ứng dụng công nghệ MERN Stack xây dựng thành công website bán điện thoại di động • Tìm hiểu vận dụng sở liệu NoSQL, đem lại hiệu cao • Quản lý mã nguồn Github, kết hợp CI/CD để tự động deploy hệ thống Heroku Firebase o Mã nguồn: https://github.com/quockhanhtn/mern-ecommerce o Địa trang web: https://mern-ecommerce-b848d.web.app/ • Thực kiểm thử phần mềm thủ cơng tự động • Áp dụng full text search (gọi tắt FTS) để tìm kiếm sản phẩm thơng qua tên, danh mục, thương hiệu, mơ tả,… • Ứng dụng Flutter xây dựng ứng dụng cho thiết bị di động • Tích hợp hệ thống gợi ý sản phẩm dựa theo nội dung dựa theo người dùng • Tích hợp chatbot giúp tương tác, hỗ trợ trả lời khách hàng 24/7 223 ƯU ĐIỂM Sau khảo sát trạng trang web kinh doanh điện thoại phụ kiện chúng em rút ưu điểm khuyết điểm trang web có xây dựng trang web chúng em với tính bật sau: Bảng 92: Bảng so sánh tính với trang web ĐIỆN TÍNH NĂNG FPT CELL THOẠI SHOP PHONES GIÁ TRANG VIETTEL WEB STORE KHO CỦA NHĨM Hỗ trợ đa ngơn ngữ Khơng Khơng Khơng Khơng Có Xem lịch sử đơn hàng Khơng Khơng Khơng Khơng Có Tra cứu đơn hàng Khơng Có Khơng Khơng Có Khơng Có Có Có Có Khơng Khơng Khơng Khơng Có Có Có Khơng Có Có Khơng Khơng Có Khơng Có Có Có Có Có Có Thanh tốn trực tuyến Có Có Có Có Có Trả góp Có Có Có Có Khơng Tổng đài hổ trợ Có Có Có Có Khơng Nhanh Nhanh Trung bình Nhanh Nhắn tin trực tiếp với nhân viên Đăng ký thành viên tài khoản mạng xã hội Giao diện trang web đơn giản, dễ sử dụng Hỗ trợ Responsive Hoàn thiện trang web bán hàng Tốc độ tìm kiếm sản phẩm 224 Trung bình HẠN CHẾ Trong trình thực đề tài, nhóm hồn thành tốt cịn vài hạn chế sau: • Chưa tính tốn số lượng truy cập lúc lượng băng thơng cần thiết đến hệ thống • Nghiệp vụ quản lý vài chức chưa hồn thiện • Hệ thống phân quyền chưa linh hoạt • Chưa hỗ trợ đa ngôn ngữ server (database) • Chưa viết unit test (kiểm thử đơn vị) cho hệ thống • Ứng dụng thiết bị di động chưa có nhiều tính so với phiên web • Chatbot chưa linh hoạt số hạn chế định HƯỚNG PHÁT TRIỂN • Chuyển đổi sang mơ hình microservice, chia nhỏ module, api Các module chạy độc lập Khi phát module bị lỗi lập trình viên sửa, tester cần test lại chức module đó, khơng cần test lại tồn hệ thống • Chuyển sang Typescript - dự án mã nguồn mở phát triển Microsoft, coi phiên nâng cao Javascript việc bổ sung tùy chọn kiểu tĩnh lớp hướng đối tượng mà điều khơng có Javascript Việc giúp code trở nên clean dễ phát triển • Tích hợp thêm tốn qua ví Momo, ZaloPay • Hỗ trợ đa ngơn ngữ phía server (database) Hiện đề tài hỗ trợ đa ngôn ngữ giao diện, chưa hỗ trợ đa ngôn ngữ database 225 TÀI LIỆU THAM KHẢO [1] React – A JavaScript library for building user interfaces, https://reactjs.org [2] HocWeb VN NodeJS gì? ExpressJS ? Từng bước tạo ứng dụng chat NodeJS Truy cập từ https://hocweb.vn/nodejs-la-gi-express-js-la-gi-tung-buoc-taoung-dung-chat-tren-nodejs [3] Trung Quân (23/04/2018) Một nhìn tổng quan Nodejs Viblo Truy cập từ https://viblo.asia/p/mot-cai-nhin-tong-quan-nhat-ve-nodejs-Ljy5VeJ3lra [4] Ngáo (26/07/2017) CI, CD DevOps ??? Viblo Truy cập từ https://viblo.asia/p/ci-cd-va-devops-07LKXYXDZV4 [5] Corey Cleary, Project structure for an Express REST API when there is no “standard way”, Truy cập từ https://www.coreycleary.me/project-structure-for-anexpress-rest-api-when-there-is-no-standard-way [6] niviki.com (29/06/2017), Giới thiệu MERN Stack, Truy cập từ https://www.niviki.com/gioi-thieu-mern-stack/ [7] CryptoViet.com (21/08/2021) Hash (hàm băm) cách thức hoạt động ? Truy cập từ: https://cryptoviet.com/hash-la-gi [8] Nguyễn Huy Hoang (2018), Các cách lưu trữ mật Kipalog Kaopiz Truy cập từ https://kipalog.kaopiz.com/posts/Cac-cach-luu-tru-mat-khau [9] GitHub Docs, Workflow syntax for GitHub Actions, Truy cập từ https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-githubactions 226 S K L 0