Đồ án ứng dụng hỗ trợ mua bán đa nền tả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 VŨ ĐỨC MẠNH ĐINH QUANG MẠNH ĐỒ ÁN ỨNG DỤNG HỖ TRỢ MUA BÁN ĐA NỀN TẢNG The Application supports Cross-Platform Buying and Selling KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN Th.S TRẦN ANH DŨNG TP HỒ CHÍ MINH, 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 VŨ ĐỨC MẠNH ĐINH QUANG MẠNH ĐỒ ÁN ỨNG DỤNG HỖ TRỢ MUA BÁN ĐA NỀN TẢNG The Application supports Cross-Platform Buying and Selling KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN Th.S TRẦN ANH DŨNG TP HỒ CHÍ MINH, 2023 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp.HCM, ngày tháng năm 2023 Giảng Viên Hướng Dẫn Ths Trần Anh Dũng LỜI CẢM ƠN Trước hết, nhóm chúng em xin gửi lời cảm ơn đến Trường Đại học Công nghệ thông tin – ĐHQGTPHCM thầy cô giảng viên khoa Công nghệ phần mềm tạo điều kiện để nhóm chúng em hồn thành đồ án – Chủ đề Tìm hiểu React Native xây dựng ứng dụng Nhóm em xin gửi lời cảm ơn chân thành tri ân sâu sắc đến thầy Nguyễn Công Hoan giảng viên hướng dẫn trực tiếp trang bị cho chúng em kiến thức vững để thực đồ án Trong khoảng thời gian thực đồ án, chúng em học hỏi thêm nhiều kiến thức, kinh nghiệm, biết thêm nhiều công nghệ Nhóm em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, vận dụng tối đa học hỏi để hoàn thành báo cáo đồ án Mặc dù cố gắng hoàn thành báo cáo với tất nỗ lực song báo cáo nhóm chúng em chắn khơng tránh khỏi thiếu sót, chúng em mong nhận thơng cảm góp ý chân thành từ q thầy, Nhóm em xin chân thành cảm ơn Thành phố Hồ Chí Minh, 30 tháng năm 2023 Sinh viên Vũ Đức Mạnh Đinh Quang Mạnh MỤC LỤC NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN LỜI CẢM ƠN MỤC LỤC DANH MỤC HÌNH DANH MỤC BẢNG NỘI DUNG ĐỀ TÀI 16 CHƯƠNG 1: MỞ ĐẦU .16 1.1 Lý chọn đề tài 16 1.2 Mục đích nghiên cứu 17 1.2.1 Khách quan 17 1.2.2 Chủ quan .17 1.3 Đối tượng nghiên cứu 18 1.3.1 Các công nghệ nghiên cứu: 18 1.3.2 Đối tượng sử dụng đề tài hướng đến: 19 1.4 Phạm vi nghiên cứu 20 1.4.1 Phạm vi môi trường: .20 1.4.2 Phạm vi chức năng: .20 CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 21 2.1 React native 21 2.2 JavaScript 22 2.3 React Navigation 23 2.4 Expo Go 24 2.5 Firebase 25 CHƯƠNG 3: XÂY DỰNG HỆ THỐNG 26 3.1 Kiến trúc React Native: 26 3.1.1 Kiến trúc cũ 26 3.1.2 Kiến trúc 28 3.2 Cách thức hoạt động React Native .29 3.3 Sơ đồ Use case .30 3.3.1 Danh sách tác nhân .31 STT .31 Tác nhân .31 Mô tả/ Ghi .31 .31 Người dùng 31 Người dùng, người dùng không đăng nhập 31 .31 Khách hàng 31 Khách hàng, người dùng đăng nhập vào ứng dụng sử dụng chức ứng dụng .31 3.3.2 Danh sách Use case .31 3.3.3 Mô tả chi tiết Use case 33 3.4 Class Diagram .43 3.5 Sequence Diagram .44 3.5.1 Sequence Diagram Đăng nhập 44 3.5.2 Sequence Diagram Đăng ký 45 3.5.3 Sequence Diagram Cập nhật tài khoản 46 3.5.4 Sequence Diagram Đặt hàng 47 3.5.5 Sequence Diagram Đăng bán 48 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 49 4.1 Sơ đồ liên kết hình .49 4.2 Danh sách hình 50 4.3 Mô tả chi tiết hình 52 4.3.1 Màn hình Onboarding 52 4.3.2 Màn hình Home 53 4.3.3 Màn hình Shopping .54 4.3.4 Màn hình Detail Product .55 4.3.5 Màn hình Favorite 56 4.3.6 Màn hình Cart .57 4.3.7 Màn hình Payment 58 4.3.8 Màn hình Login .59 4.3.9 Màn hình Register 60 4.3.10 Màn hình Profile 61 4.3.11 Màn hình Information Account 62 4.3.12 Màn hình Secondhand 63 4.3.13 Màn hình Add Post 64 4.3.14 Màn hình My Order 65 4.3.15 Màn hình Detail Order 66 4.3.16 Màn hình Address .67 4.3.17 Màn hình Add Address 68 4.3.18 Màn hình Card 69 4.3.19 Màn hình Add Card .70 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 71 5.1 Môi trường cài đặt kiểm thử: 71 5.2 Kết kiểm thử 71 CHƯƠNG 6: TỔNG KẾT 72 6.1 Kết đạt 72 6.1.1 Thành 72 6.1.2 Hạn chế 72 6.2 Hướng phát triển 72 TÀI LIỆU THAM KHẢO 74 DANH MỤC HÌNH Hình 2.1: React Native 21 Hình 2.2: JavaScript .22 Hình 2.3: React Navigation 23 Hình 2.4: Expo Go 24 Hình 2.5: Firebase 25 Hình 3.1: Kiến trúc cũ React Native 26 Hình 3.2: Kiến trúc React Native 28 Hình 3.3: Sơ đồ Use case 30 Bảng 3.4: Danh sách tác nhân .31 Bảng 3.5: Danh sách Use case .32 Hình 3.6: Sequence Diagram Đăng nhập 44 Hình 3.7: Sequence Diagram Đăng ký 45 Hình 3.8: Sequence Diagram Cập nhật tài khoản .46 Hình 3.9: Sequence Diagram Đặt hàng .47 Hình 3.10: Sequence Diagram Đăng bán 48 Hình 4.1: Sơ đồ liên kết hình .49 Hình 4.2: Màn hình Onboarding 52 Hình 4.3: Màn hình Home 53 Hình 4.4: Màn hình Shopping 54 Hình 4.5: Màn hình Detail Product .55 Hình 4.6: Màn hình Favorite 56 Hình 4.7: Màn hình Cart 57 Hình 4.8: Màn hình Payment 58 Hình 4.9: Màn hình Login 59 Hình 4.10: Màn hình Register 60 Hình 4.11: Màn hình Profile 61 Hình 4.12: Màn hình Information Account 62 Hình 4.13: Màn hình Secondhand .63 Hình 4.14: Màn hình Add Post 64 Hình 4.15: Màn hình My Order 65 Hình 4.16: Màn hình Detail Order .66 Hình 4.17: Màn hình Address 67 Hình 4.18: Màn hình Add Address 68 Hình 4.19: Màn hình Card 69 Hình 4.20: Màn hình Add Card 70 4.3.10 Màn hình Profile • Giao diện: Hình 4.11: Màn hình Profile • Mơ tả tổng qt: Trong hình tài khoản thị tên người dùng danh mục chỉnh sửa profile, cài đặt tài khoản, yêu thích,… 4.3.11 Màn hình Information Account • Giao diện: Hình 4.12: Màn hình Information Account • Mơ tả tổng qt: Trong hình thơng tin tài khoản, người dùng cập nhật thông tin cá nhân tên, email, mật khẩu, mà người dùng muốn thay đổi 4.3.12 Màn hình Secondhand • Giao diện: Hình 4.13: Màn hình Secondhand • Mơ tả tổng qt: Trong hình này, người dùng xem sản phẩm người dùng khác đăng bán đặt hàng muốn 4.3.13 Màn hình Add Post • Giao diện: Hình 4.14: Màn hình Add Post • Mơ tả tổng qt: Màn hình giúp người dùng thêm thông tin cần thiết để đăng bán sản phẩm 4.3.14 Màn hình My Order • Giao diện: Hình 4.15: Màn hình My Order • Mơ tả tổng qt: Trong hình hóa đơn, người dùng coi lịch sử hóa đơn đặt tình trạng hóa đơn 4.3.15 Màn hình Detail Order • Giao diện: Hình 4.16: Màn hình Detail Order • Mơ tả tổng qt: Trong hình chi tiết hóa đơn sản phẩm hóa đơn, tổng giá trạng thái hóa đơn 4.3.16 Màn hình Address • Giao diện: Hình 4.17: Màn hình Address • Mơ tả tổng qt: Trong hình địa hiển thị địa giao hàng 4.3.17 Màn hình Add Address • Giao diện: Hình 4.18: Màn hình Add Address • Mơ tả tổng quát: Trong hình thêm địa chỉ, người dùng thêm địa giao hàng 4.3.18 Màn hình Card • Giao diện: Hình 4.19: Màn hình Card • Mơ tả tổng qt: tốn Trong hình card, danh sách thẻ tín dụng người dùng có để 4.3.19 Màn hình Add Card • Giao diện: Hình 4.20: Màn hình Add Card • Mơ tả tổng quát: Trong hình thêm card, người dùng thêm thơng tin card mà người dùng muốn thêm CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 5.1 Môi trường cài đặt kiểm thử: Môi trường cài đặt: Windows / Android 11.0 Thiết bị cài đặt: • Điện thoại cá nhân hệ điều hành Android API 30 • IOS Simulator ver 14 Macbook M1 5.2 Kết kiểm thử STT Tính Mức độ hồn thiện Xác thực người dùng 100% Tìm kiếm sản phẩm 100% Xem chi tiết sản phẩm 100% Đặt hàng 100% Tạo tài khoản 100% Quản lý hóa đơn đặt hàng 100% Đăng bán sản phẩm 100% Bảng 5.1: Kết kiểm thử Ghi CHƯƠNG 6: TỔNG KẾT 6.1 Kết đạt 6.1.1 Thành - Hoàn thành tất tính theo kế hoạch dự kiến đưa từ đầu - Học cách phát triển ứng dụng di động cho iOS Android từ mã nguồn nhất, có khả xây dựng ứng dụng di động đa tảng cách hiệu - Có khả sử dụng thư viện React Navigation, Redux, Axios nhiều thư viện khác để phát triển ứng dụng di động phức tạp cải thiện quy trình phát triển - Biết cách quản lý mã nguồn làm việc thông qua Github - Cải thiện kỹ lập trình, biết cách kiểm tra lỗi tự sửa lỗi - Cải thiện khả đọc tài liệu tiếng Anh - Cải thiện kỹ làm việc nhóm giao tiếp ứng xử 6.1.2 Hạn chế - Các tính chưa tối ưu tốt nên ứng dụng chạy chậm - Giao diện người dùng mức tạm - Còn nhiều tính chưa thiết thực, tiện dụng người dùng - Hệ thống gợi ý chưa thật tối ưu, liệu train/ test liệu giả - Vấn đề an nình, bảo mật liệu người dùng chưa giải 6.2 Hướng phát triển Qua q trình thực hiện, nhóm nhận thấy hạn chế đồ án cịn cải thiện mở rộng thêm Cụ thể hóa hướng phát triển sau đây: Cải thiện trải nghiệm người dùng: Tối ưu hóa giao diện người dùng, tăng tốc độ tải trang, cải thiện hiệu suất khả tương tác để đảm bảo trải nghiệm mua bán trực tuyến thuận lợi hấp dẫn Tích hợp chia sẻ xã hội: Cho phép người dùng chia sẻ sản phẩm yêu thích kết giao dịch mạng xã hội Facebook, Twitter, Instagram Điều giúp tăng khả tiếp cận quảng bá sản phẩm Tích hợp bình luận đánh giá: Cho phép người dùng bình luận đánh giá sản phẩm, cung cấp ý kiến đánh giá từ người dùng khác để giúp người dùng định mua hàng Tích hợp chat trực tiếp: Cung cấp tính chat trực tiếp người dùng nhà cung cấp người bán để trả lời câu hỏi hỗ trợ trực tiếp q trình mua hàng Tích hợp gợi ý sản phẩm trí tuệ nhân tạo: Sử dụng trí tuệ nhân tạo học máy để đề xuất sản phẩm dựa sở thích hành vi mua hàng người dùng TÀI LIỆU THAM KHẢO Các Thư viện sử dụng trình phát triển [1] axios: https://www.npmjs.com/package/axios [2] react-navigation: https://www.npmjs.com/package/@react-navigation/native [3] react-native-paper: https://www.npmjs.com/package/react-native-paper [4] expo-image-picker: https://www.npmjs.com/package/expo-image-picker [5] react-native-safe-area-context: https://www.npmjs.com/package/react-native-safe-area-context [6] react-native-vector-icons: https://www.npmjs.com/package/react-native-vector-icons [7] react-native-swipe-list-view: https://www.npmjs.com/package/react-native-swipe-listview?activeTab=readme [8] react-native-seoul/masonry-list: https://www.npmjs.com/package/@react-native-seoul/masonry-list [9] react-navigation/bottom-tab: https://www.npmjs.com/package/@react-navigation/bottom-tabs Tài liệu hướng dẫn ngơn ngữ lập trình [11] Code thao khảo: https://stackoverflow.com/ [12] JavaScrip: https://www.coursera.org