Xây dựng ứng dụng chợ mua bán đồ cũ

109 Trang 15 DANH MỤC TỪ VIẾT TẮT STT Từ viết tắt Giải thích 1 HTML HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần c

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 ỨNG DỤNG CHỢ MUA BÁN ĐỒ CŨ GVHD: THS NGUYỄN ĐỨC KHOAN SVTH: PHÙNG VĨNH ĐỨC BÙI TRUNG HIẾU SKL009627 Tp Hồ Chí Minh, tháng 6/2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG CHỢ MUA BÁN ĐỒ CŨ SVTH1: SVTH2: Khóa : Ngành : GVHD : PHÙNG VĨNH ĐỨC MSSV: 18110100 BÙI TRUNG HIẾU MSSV: 18110105 K18 CÔNG NGHỆ THÔNG TIN ThS Nguyễn Đức Khoan TP Hồ Chí Minh, tháng năm 2022 Báo cáo khố luận tốt nghiệp Trang CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *********** Tp Hồ Chí Minh, ngày tháng năm 2022 NHIỆM VỤ THỰC HIỆN KHOÁ LUẬN TỐT NGHIỆP Họ tên sinh viên 1: Phùng Vĩnh Đức MSSV 1: 18110100 Họ tên sinh viên 2: Bùi Trung Hiếu MSSV 2: 18110105 Ngành: Công nghệ thông tin Lớp: 18110ST2 Giảng viên hướng dẫn: Th.S Ngyễn Đức Khoan Ngày nhận đề tài: 14/02/2022 ĐT: Ngày nộp đề tài: 18/06/2022 Tên đề tài: XÂY DỰNG ỨNG DỤNG MUA BÁN ĐỒ CŨ Nội dung thực đề tài: Đề tài Xây dựng ứng dụng bán đồ cũ đặt vấn đề trọng tâm mục tiêu mà sinh viên nghiên cứu cần thực bao gồm: Vấn đề yếu tố lý thuyết, sinh viên thực cần nghiên cứu chuyên môn, hiểu tổng quan khả ứng dụng cơng nghệ mà nhóm lựa chọn (MERN Stack, Flutter) Song song với công nghệ lựa chọn để sử dụng, nhóm sinh viên cần tìm hiểu thêm thư viện, mã nguồn module, template giúp ích cho trình xây dựng website app cách hiệu Bên cạnh đó, nhóm sinh viên cần tìm hiểu q trình hosting lên server để triển khai cho sản phẩm internet Vấn đề thứ hai mà đề tài đặt áp dụng kiến thức tìm hiểu để xây dựng sản phẩm cụ thể, App bán đồ cũ đáp ứng yêu cầu bản, phục vụ cho việc đăng tin rao bán đồ cũ bên cạnh đó, sản phẩm phải có khả nâng cấp mở rộng để tiếp tục phát triển nhiều tính làm tăng tính trải nghiệm người dùng Sản phẩm: Ứng dụng mua bán đồ cũ MarketPlaceHD TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN Báo cáo khoá luận tốt nghiệp Trang CỘNG HOÀ 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 1: Phùng Vĩnh Đức - MSSV 1: 18110100 Họ tên Sinh viên 2: Bùi Trung Hiếu Ngành: Công nghệ thông tin - MSSV 2: 18110105 Tên đề tài: XÂY DỰNG ỨNG DỤNG MUA BÁN ĐÔ CŨ Họ tên giáo viên hướng dẫn: ThS Nguyễn Đức Khoan Nhận Xét: Về nội dung đề tài & khối công việc thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằngchữ): Tp Hồ Chí Minh, ngày……tháng năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) Báo cáo khố luận tốt nghiệp Trang CỘNG HỒ 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 1: Phùng Vĩnh Đức - MSSV 1: 18110100 Họ tên Sinh viên 2: Bùi Trung Hiếu - MSSV 2: 18110105 Ngành: Công nghệ thông tin Tên đề tài: XÂY DỰNG ỨNG DỤNG MUA BÁN ĐỒ CŨ Họ tên giáo viên phản biện: Nhận Xét: Về nội dung đề tài & khối công việc thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằngchữ): Tp Hồ Chí Minh, ngày……tháng năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) Báo cáo khoá luận tốt nghiệp Trang LỜI CẢM ƠN Nhóm chúng em xin gửi lời cảm ơn chân thành đến Khoa, Trường tạo điều kiện thuận lợi cho chúng em hồn thành khóa luận tốt nghiệp Đặc biệt, chúng em xin bày tỏ lòng biết ơn sâu sắc đến thầy Nguyễn Đức Khoan thầy Trần Nhật Quang hướng dẫn em q trình thực khóa luận tốt nghiệp Nhóm chúng em cố gắng vận dụng kiến thức học học để hồn thành khóa luận tốt nghiệp Nhưng kiến thức hạn chế khơng có nhiều kinh nghiệm thực tiễn nên khó tránh khỏi thiếu sót q trình nghiên cứu trình bày Rất kính mong góp ý thầy để khóa luận chúng em hoàn thiện Một lần nữa, chúng em xin trân trọng cảm ơn quan tâm giúp đỡ thầy giúp đỡ q trình thực khóa luận tốt nghiệp Chúng Em xin chân thành cảm ơn! Nhóm thực Phùng Vĩnh Đức Bùi Trung Hiếu Báo cáo khố luận tốt nghiệp Trang TĨM TẮT Thế giới khơng ngừng phát triển kéo theo phát triển nhiều lĩnh vực, ngành nghề đặt biệt ngành công nghiệp Sự phát triển khoa học kĩ thuật mở kỉ nguyên đại chứng nhiều thiết bị, vật dụng ứng dụng công nghệ cao xe cộ, thiết bị điện tử ngày phát triển không mẫu mã mà cịn chất lượng Do nhu cầu mua sử dụng thiết bị công nghệ người ngày lớn điều dẫn đến thiết bị công nghệ trước họ mua khơng cịn sử dụng lâu ngày gây hư hỏng cho thiết bị vật dùng gây lãng phí tiền Từ ứng dụng bán đồ cũ MarketPlaceHD đời nhằm mục đích tạo khơng gian buôn bán, trao đổi vật dụng cũ qua mạng cho phép người dùng trao đổi bn bán thiết bị cũ qua phương thức đăng tin rao bán MarketPlaceHD nơi tham khảo giá cho vật dụng cũ chủ nhân có nhu cầu bán lại vật phẩm cũ Báo cáo khố luận tốt nghiệp Trang MỤC LỤC LỜI CẢM ƠN TÓM TẮT MỤC LỤC DANH MỤC BẢNG DANH MỤC HÌNH 11 DANH MỤC TỪ VIẾT TẮT 13 CHƯƠNG 1: TỔNG QUAN 14 1.1.Lý chọn đề tài 14 1.2.Mục đích 14 1.3.Công nghệ sử dụng 14 CHƯƠNG 2: CƠ SỞ LÍ THUYẾT 15 2.1.Tìm hiểu ngơn ngữ lập trình 15 2.1.1.HTML 15 2.1.2.CSS 15 2.1.3.JavaScript 16 2.1.4.Dart 16 2.2.Một số Framework hỗ trợ 17 2.2.1 Material UI 17 2.2.2 Flutter 17 2.2.3 ReactJS 18 2.3.Cơ sở liệu 18 2.3.1.Mongodb 18 2.4.Deploy lên sever 19 2.4.1 Deploy Firebase 19 2.4.2 Deploy Heroku 21 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 24 3.1.Khảo sát 24 3.1.1 App chợ tốt 24 3.1.2 App NamGiay 30 3.1.3 App Muaban24 32 3.2.Xác định yêu cầu 34 3.2.1.Yêu cầu chức 34 3.2.2.Yêu cầu phi chức 35 3.3.Đặc tả chức 35 Báo cáo khoá luận tốt nghiệp Trang 3.3.1.Bảng requirement dành cho use case 35 3.3.2.Đặc tả Usecase 37 3.4.Sơ đồ (Sequence Diagram) 54 3.4.1.Sequence User đăng nhập 54 3.4.2.Sequence user đăng xuất 54 3.4.3.Sequence user đăng ký 55 3.4.4.Sequence user đổi mật 55 3.4.5.Sequence user đổi thông tin cá nhân 56 3.4.6.Sequence user xem thông tin người đăng 56 3.4.7.Sequence user xem tin 57 3.4.8.Sequence user thích tin 57 3.4.9.Sequence user bình luận viết 58 3.4.10.Sequence user xóa bình luận 58 3.4.11.Sequence user tạo tin 59 3.4.12.Sequence user nâng cấp tin ưu tiên 59 3.4.13.Sequence user gia hạn tin 60 3.4.14.Sequence user yêu cầu duyệt lại 60 3.4.15.Sequence user quên mật 61 3.4.16.Sequence user đánh giá người đăng tin 61 3.4.17.Sequence user lọc sản phẩm 62 CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG 63 4.1.Thiết kế sở liệu 63 4.1.1.Sơ đồ thiết kế sở liệu 63 4.1.2.Mô tả sơ đồ thiết kế liệu 64 4.2.Thiết kế giao diện 71 4.2.1.Màn hình giao diện Admin 71 4.2.2.Màn hình giao diện User 80 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 101 5.1.Cài đặt ứng dụng 101 5.1.1.Front-end-web: 101 5.1.2.Front-end-app: 103 5.1.3.Back-end: 104 5.2.Kiểm thử 107 Báo cáo khoá luận tốt nghiệp Trang 5.2.1.Kiểm thử chức xem thông tin người dùng 107 CHƯƠNG 6: KẾT LUẬN 111 6.1.Kết đạt 111 6.2.Ưu điểm nhược điểm 112 6.2.1.Ưu điểm 112 6.2.2.Nhược điểm 112 6.3.Khó khăn: 112 6.4.Kinh nghiệm đạt 112 5.Hướng phát triển tương lai 112 TÀI LIỆU THAM KHẢO 113 DANH MỤC BẢNG Bảng Danh mục từ viết tắt 13 Bảng Requirement cho usecase 36 Bảng 3.Use case admin đăng xuất 38 Bảng 4.Use case admin xem thông tin cá nhân 38 Bảng 5.Use case admin quản lý tài khoản 39 Bảng Usecase admin mở khóa tài khoản 39 Bảng 7.Use case admin quản lý tin 40 Bảng Usecase admin từ chối tin 40 Bảng 9.Usecase admin khóa tin 41 Bảng 10.Use case admin xem doanh thu 41 Bảng 11 Usecase admin xem tất tài khoản kích hoạt 42 Bảng 12.Usecase admin xem tất tài khoản khóa 42 Bảng 13.Usecase admin xem tất tin hiển thị 43 Bảng 14 Usecase admin xem tất tin khóa 43 Bảng 15.Use case user đăng nhập 44 Bảng 16.Use case user đăng xuất 44 Bảng 17.Use case đăng ký 45 Bảng 18.Use case user đổi mật 46 Bảng 19.Use case user thay đổi thông tin cá nhân 46 Bảng 20.Use case user xem thông tin cá nhân 47 Bảng 21.Use case user xem tin 47 Bảng 22.Use case user thích tin 48 Báo cáo khố luận tốt nghiệp Trang 100 4.2.2.20.HD27.Màn hình trang lọc tin Hình 55.HD27.Màn hình trang lọc tin No Name Type Reference Note Search Post TextField Nhập tên post để tìm kiếm Location Selected Chọn khu vực đăng tin Filter Button Nhấn để hiển thị biểu mẫu lọc tin Price Range Bar Chọn giá tiền muốn lọc Brand Selected Chọn hãng laptop muốn lọc Done Button Nhấn để tiến hành lọc đăng theo tiêu chí chọn Bảng 77 Bảng mơ tả hình trang lọc tin Báo cáo khoá luận tốt nghiệp Trang 101 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.1.Cài đặt ứng dụng Để chạy chương trình cần cài đặt thành phần sau:  Front-end-web: React CLI, Npm, IDE VisualCode  Front-end-app: Flutter, IDE VisualCode  Back-end: NodeJS, ExpressJS, IDE VisualCode, MongoDB NoSQL 5.1.1.Front-end-web: Ta có cấu trúc project sau: Hình 56.Cấu trúc project front-end Báo cáo khố luận tốt nghiệp Trang 102 Bước 1: Để cài đặt sử dụng lệnh “yarn” Bước 2: Chạy project Visual Code lệnh “yarn dev”, mặc định url http://localhost:3000/ Hình 57.Chạy code visual code Hình 58.Kết front-end Báo cáo khố luận tốt nghiệp 5.1.2.Front-end-app: Ta có cấu trúc project sau: Hình 59.Chạy code visual code Bước 1: Cần cài đặt Flutter SDK Link cài đặt: Flutter - Build apps for any screen Bước 2: Cài đặt Android Studio Xcode để có máy ảo Bước 3: Tại terminal dùng lệnh flutter run để chạy chương trình Trang 103 Báo cáo khố luận tốt nghiệp Hình 60.Kết front-end App 5.1.3.Back-end: Ta có cấu trúc project sau: Hình 61.Cấu trúc project back-end Trang 104 Báo cáo khố luận tốt nghiệp Trang 105 Bước 1: Cài đặt NodeJS theo link Download | Node.js (nodejs.org) Bước 2: Cài đặt thư viện cần thiết Hình 62.Cài đặt gói thư viện để chạy project: Báo cáo khoá luận tốt nghiệp Lệnh: - yarn add npm i Bước 4: Chạy thử project thành quả: http://localhost:8081 Hình 63.Kết back-end Trang 106 Báo cáo khoá luận tốt nghiệp 5.2.Kiểm thử 5.2.1.Kiểm thử chức xem thơng tin người dùng Hình 64 Hình kiểm thử chức xem thơng tin người dùng Trang 107 Báo cáo khoá luận tốt nghiệp 5.2.2.Kiểm thử chức hủy đăng Hình 65 Hình kiểm thử chức hủy đăng Trang 108 Báo cáo khoá luận tốt nghiệp Trang 109 5.2.3.Kiểm thử chức thích đăng Test Case ID MS_03 Test Case Description Kiểm tra chức thích tin Created By Vĩnh Đức Reviewed By Trung Hiếu Version Trung Hiếu Date Tested June 10, 2021 Test Case (Pass/Fail/Not Executed) 1.2 QA Tester’s Log Tester's Name S# Prerequisites: S# Test Data Truy cập vào ứng dụng ChoTotHD tài khoản user Email = "phungvinhduc3@gmail.com" 2 Password = "123456aA" 3 Pass Test Scenario Step # Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended / Crashed Đăng nhập tài khoản user Thông báo đăng nhập thành Như mong đợi công chuyển hướng sang trang Home Pass Tại trang home chọn đăng "winner X can ban" bấm vào biểu tượng trái tim góc phải Biểu tượng trái tim góc phải Như mong đợi đăng tô đỏ có thơng báo thích đăng thành cơng Pass Hình 66 Hình kiểm thử chức thích đăng Báo cáo khoá luận tốt nghiệp Trang 110 5.2.4.Kiểm thử chức bình luận Test Case ID MS_04 Test Case Description Kiểm tra chức bình luận tin Created By Vĩnh Đức Reviewed By Trung Hiếu Version Trung Hiếu Date Tested June 10, 2021 Test Case (Pass/Fail/Not Executed) 1.2 QA Tester’s Log Tester's Name S# Prerequisites: S# Test Data Truy cập vào ứng dụng ChoTotHD tài khoản user comment = "hello" Đăng nhập với tài khoản user ( Email = "phungvinhduc3@gmail.com", Password = "123456aA" ) Pass Test Scenario Step # Step Details Expected Results Actual Results Pass / Fail / Not executed / Suspended / Crashed Tại trang Home nhấn chọn đăng "Phong tro Thu Duc" Chuyển đến trang chi tiết Như mong đợi đăng "Phong tro Thu Duc" Pass Tại trang chi tiết kéo xuống phần bình luận sau nhập "hello" vào bình luận bấm nút send Danh sách bình luận bên có thêm bình luận "trumBrnha" với nội dung "hello" Pass Như mong đợi Hình 67 Hình kiểm thử chức bình luận Báo cáo khố luận tốt nghiệp Trang 111 CHƯƠNG 6: KẾT LUẬN 6.1.Kết đạt  Về chức app làm được: o Xem thông tin cá nhân o Đổi thông tin cá nhân o Xem thông tin người đăng tin o Đăng xuất o Đổi mật o Quên mật o Bình luận tin o Xóa bình luận o o o o o Xem bình luận tin Thích tin Hủy thích tin Đánh giá tài khoản đăng tin Đăng tin bán sản phẩm o o o o o o o o o o Nâng cấp tin thành ưu tiên Hủy tin Yêu cầu duyệt lại tin Gia hạn tin Lọc tin Xem tin Duyệt tin Từ chối tin Khóa tin Xem biểu đồ doanh thu năm o o o o Xem tổng số tài khoản hệ thống Xem tổng số viết hệ thống Khóa tài khoản Mở khóa tài khoản  Về kỹ mềm: Học hỏi thêm cách làm việc nhóm, cách phân chia công việc ngày web Trello  Về kiến thức đạt được: Bổ sung kinh nghiệm tìm kiếm tài liệu, video để làm chức front-end, học code back-end nodejs, quản lý CSDL treen mongoDB, bổ sung kinh nghiệm code front-end Reacttypescript Flutter, cố lại kiến twhcs HTML, CSS, JS Báo cáo khoá luận tốt nghiệp Trang 112 6.2.Ưu điểm nhược điểm 6.2.1.Ưu điểm - Ứng dụng thiết kế với giao diện dễ nhìn, thân thiện với người dùng - Có đầy đủ chức để triển khai dự án vào thực 6.2.2.Nhược điểm - Về tính cịn thiếu số tính để nâng cao trải nghiệm người dùng 6.3.Khó khăn:  Kinh nghiệm thiếu nên thực code cịn nhiều khó khăn xử lý chức  Việc tìm kiếm tài liệu gặp khó khăn chủ yếu tài liệu tiếng anh 6.4.Kinh nghiệm đạt - Có thêm kinh nghiệm React Flutter - Có thêm kinh nghiệm xử lý upload ảnh lên server firebase Có thêm kinh nghiệm deploy code lên server heroku 6.5.Hướng phát triển tương lai - Mở rộng dự án chat trực tiếp app người mua người bán - Làm thêm tính chat qua bên thứ facebook zalo - Thanh tốn thêm phương thức “ví Momo” Tải lên video sản phẩm - Đăng nhập bên thứ “Google, Facebook” Báo cáo khoá luận tốt nghiệp Trang 113 TÀI LIỆU THAM KHẢO [1]Lý thuyết HTML HTML gì? Nền tảng lập trình web cho người bắt đầu (matbao.net) [2]Lý thuyết CSS CSS gì? | TopDev [3]Lý thuyết JavaScript [JavaScript Là Gì] Cách viết JavaScript | Vietnix [4] Lý thuyết Dart Dart documentation | Dart [5] Lý thuyết Material UI Tìm hiểu Material UI (viblo.asia) [6] Lý thuyết Flutter Flutter gì? Nó có ưu điểm vượt trội để làm ứng dụng mobile? (topdev.vn) [7] Lý thuyết ReactJS ReactJS gì? Những điều bạn chưa biết ReactJS (200lab.io) [8] Lý thuyết MongoDB MongoDB gì? Định nghĩa đầy đủ chi tiết MongoDB | TopDev [9] Lý thuyết Firebase cách deploy Firebase gì? Giải pháp lập trình khơng cần Backend từ Google (matbao.net), CÁCH DEPLOY MỘT PROJECT REACTJS LÊN FIREBASE (viblo.asia) [10] Lý thuyết Heroku cách deploy Heroku gì? Cách đưa ứng dụng lên Heroku | TopDev S K L 0