Đồ án ứng dụng trao đổi đồ dùng học tập

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐỒ ÁN ỨNG DỤNG TRAO ĐỔI ĐỒ DÙNG HỌC TẬP Giảng viên hướng dẫn : ThS Lê Thanh Trọng Sinh viên thực : Hà Nhật Linh Mã sinh viên 18520086 : Sinh viên thực : Phạm Vũ Lê Minh Mã sinh viên 18520103 : Tp HCM, 24 tháng 12 năm 2021 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Cơng nghệ Thơng tin – ĐHQG TP.HCM, nhóm trang bị kiến thức kỹ thực tế để hồn thành Đồ án Để hồn thành khóa luận này, với lòng biết ơn sâu sắc em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Cơng nghệ Thơng tin – ĐHQG TP.HCM tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thông tin đa dạng loại sách tài liệu Gần gũi lời tốt đẹp xin gửi đến đến thầy Lê Thanh Trọng tận tình giúp đỡ, định hướng cách tư hướng làm việc khoa học Đó góp ý q báu khơng q trình thực luận văn mà hành trang tiếp bước cho em trình học tập làm việc sau Sau cùng, xin chúc quý Thầy Cô khoa Cơng nghệ Phần mềm nói riêng giáo viên trường Cơng nghệ thơng tin nói chung thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp Sinh viên thực Hà Nhật Linh - Phạm Vũ Lê Minh NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp.HCM, ngày … tháng 12 năm 2021 GVHD ThS Lê Thanh Trọng MỤC LỤC LỜI CẢM ƠN NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN MỤC LỤC HÌNH ẢNH CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Lý chọn đề tài: 1.2 Đối tượng nghiên cứu: 1.4 Phương pháp thực hiện: 1.5 Kết mong đợi: CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 2.1 Flutter: 2.1.1 Khái niệm: 2.1.2 Lý chọn Flutter: 2.2 NodeJS MongoDB: 2.2.1 Khái niệm: 2.2.2 Lý chọn NodeJS MongoDB: 2.3 Firebase Authentication: 2.4 Cloud Firestore: 2.4.1 Khái niệm: 2.4.2 Lý chọn Cloud Firestore: 2.5 Github: 2.6 Trello: 2.6.1 Khái niệm: 2.6.2 Lý chọn Trello: CHƯƠNG 3: HƯỚNG TIẾP CẬN 3.1 Khảo sát trạng: 3.1.1 Khảo sát ứng dụng liên quan: 3.1.1.1 Ứng dụng Aladin: 3.1.1.2 Ứng dụng Udemy: 3.1.2 Khảo sát người dùng: 3.2 Định hướng xây dựng ứng dụng: 10 3.2.1 Định hướng công nghệ: 10 3.2.2 Định hướng mơ hình phát triển: 10 CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG 11 4.1 Mô tả ứng dụng: 11 4.1.1 Chức cần có ứng dụng: 11 4.1.2 Đối tượng người dùng: 11 4.1.3 Môi trường vận hành: 12 4.2 Phân tích yêu cầu: 12 4.2.1 Yêu cầu chức năng: 12 4.2.2 Danh sách quy định biểu mẫu: 14 4.2.3 Yêu cầu phi chức năng: 16 4.2.3.1 Yêu cầu tiến hoá: 16 4.2.3.2 Yêu cầu hiệu quả: 16 4.2.3.3 Yêu cầu tiện dụng: 18 4.2.4 Sơ đồ Usecase: 19 4.2.4.1 Danh sách Actor: 19 4.2.4.2 Danh sách Usecase: 20 4.2.5 Đặc tả Usecase: 22 4.2.5.1 UC01: Đăng ký ứng dụng: 22 4.2.5.2 UC02: Đăng giao dịch (mua, bán, chia sẻ) đồ dùng: 23 4.2.5.3 UC03: Lướt mua đồ dùng theo trend: 24 4.2.5.4 UC04: Thêm sản phẩm vào danh sách yêu thích: 24 4.2.5.5 UC05: Theo dõi sản phẩm yêu thích: 25 4.2.5.6 UC06: Nhận thông báo: 25 4.2.5.7 UC07: Thanh toán sản phẩm: 26 4.2.5.8 UC08: Chỉnh sửa trang cá nhân: 27 4.2.5.9 UC09: Nhắn tin: 27 4.2.5.10 UC10: Đăng nhập, đăng xuất: 28 4.2.5.11 UC11: Xem sản phẩm đăng bán: 29 4.2.5.12 UC12: Tìm kiếm sản phẩm: 29 4.2.5.13 UC13: Bình luận sản phẩm: 30 4.2.5.14 UC14: Xem trang cá nhân người khác: 30 4.2.5.15 UC15: Thêm sản phẩm vào giỏ hàng: 31 4.2.5.16 UC16: Đấu giá sản phẩm: 31 4.2.5.17 UC17: Theo dõi đơn hàng: 32 4.3 Thiết kế kiến trúc hệ thống phần mềm: 32 4.3.1 Tổng quan mơ hình hệ thống: 32 4.3.2 Mô tả luồng xử lý kiến trúc: 33 4.4 Thiết kế quy trình làm việc: 34 4.5 Thiết kế liệu: 35 4.5.1 Sơ đồ Logic: 35 4.5.2 Mô tả chi tiết liệu: 36 4.5.2.1 Bảng Profile: 36 4.5.2.2 Bảng Account: 36 4.5.2.3 Bảng TagShipping: 36 4.5.2.4 Bảng Review: 37 4.5.2.5 Bảng Cart: 37 4.5.2.6 Bảng Message: 37 4.5.2.7 Bảng Room: 37 4.5.2.8 Bảng Product: 38 4.5.2.9 Bảng Order: 38 4.5.2.10 Bảng Notification: 39 4.5.2.11 Các bảng liệu quản lý Firebase: 39 4.6 Thiết kế giao diện: 39 4.6.1 Sơ đồ hình: 39 4.6.2 Danh sách hình: 39 4.6.3 Giao diện hình: 41 4.6.3.1 Màn hình chờ: 41 a Giao diện: 41 b Mô tả đối tượng hình: 42 4.6.3.2 Màn hình đăng nhập 43 a Giao diện: 43 b Mô tả đối tượng hình: 44 4.6.3.3 Màn hình trang chủ: 45 a Giao diện: 45 b Mô tả đối tượng hình: 46 4.6.3.4 Màn hình u thích: 47 a Giao diện: 47 b Mô tả đối tượng hình: 48 4.6.3.5 Màn hình thơng báo: 49 a Giao diện: 49 b Mô tả đối tượng hình: 50 4.6.3.6 Màn hình cá nhân: 51 a Giao diện: 51 b Mô tả đối tượng hình: 52 4.6.3.7 a Màn hình tìm kiếm: 53 Giao diện: 53 b Mô tả đối tượng hình: 54 4.6.3.8 Màn hình giỏ hàng: 55 a Giao diện: 55 b Mô tả đối tượng hình: 56 4.6.3.9 Màn hình chi tiết sản phẩm: 57 a Giao diện: 57 b Mô tả đối tượng hình: 58 4.6.3.10 Màn hình người bán: 60 a Giao diện: 60 b Mô tả đối tượng hình: 61 4.6.3.11 Màn hình xác nhận: 62 a Giao diện: 62 b Mô tả đối tượng hình: 63 4.6.3.12 Màn hình giao dịch thành công: 64 a Giao diện: 64 b Mô tả đối tượng hình: 65 4.7 Một số diagram bổ sung ứng dụng: 66 4.7.1 Active Diagram: 66 4.7.2 State Diagram: 67 4.7.3 Sequence Diagram: 68 CHƯƠNG 5: THỰC NGHIỆM VÀ ĐÁNH GIÁ 69 5.1 Môi trường thử nghiệm: 69 5.2 Kết thử nghiệm: 69 5.3 Đánh giá sản phẩm: 69 CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 70 6.1 Kết luận: 70 6.2 Thuận lợi khó khăn: 70 6.2.1 Thuận lợi: 70 6.2.2 Khó khăn: 71 6.3 Hướng phát triển: 71 TÀI LIỆU THAM KHẢO 72 MỤC LỤC HÌNH ẢNH Hình 2.1 Flutter Hình 2.2 NodeJS MongoDB Hình 2.3 Firebase Authentication Hình 2.4 Cloud Firestore Hình 2.5 Github Hình 2.6 Trello Hình 4.1 Sơ đồ phân rã chức 11 Hình 4.2 UC Đăng ký ứng dụng 22 Hình 4.3 UC Đăng giao dịch đồ dùng 23 Hình 4.4 UC Lướt mua đồ dùng theo trend 24 Hình 4.5 UC Thêm sản phẩm vào danh sách yêu thích 25 Hình 4.6 UC Theo dõi sản phẩm yêu thích 25 Hình 4.7 UC Nhận thơng báo 26 Hình 4.8 UC Thanh tốn sản phẩm 26 Hình 4.9 UC Chỉnh sửa trang cá nhân 27 Hình 4.10 UC Nhắn tin 28 Hình 4.11 UC Đăng nhập, đăng xuất 28 Hình 4.12 UC Xem sản phẩm đăng bán 29 Hình 4.13 UC Tìm kiếm sản phẩm 29 Hình 4.14 UC Bình luận sản phẩm 30 Hình 4.15 UC Xem trang cá nhân người khác 30 Hình 4.16 UC Thêm sản phẩm vào giỏ hàng 31 Hình 4.17 UC Đấu giá sản phẩm 31 Hình 4.18 UC Theo dõi đơn hàng 32 Hình 4.19 Tổng quan mơ hình hệ thống 33 Hình 4.20 Quy trình làm việc Gitflow Workflow 34 Hình 4.31 Giao diện Màn hình chi tiết sản phẩm b Mơ tả đối tượng hình: 58 STT Nội dung Component Chức IconButton Quay lại Quay lại Màn hình trước IconButton Giỏ hàng Chuyển tới Màn hình giỏ hàng List Danh sách hình ảnh Text Tên IconButton Thêm yêu thích Text Giá giảm Text Giá Card Review Đánh giá Text Mô tả Mô tả chi tiết sản phẩm 10 TextButton Xem thêm Xem thêm rút gọn cho phần mơ tả 11 IconButton Người bán Chuyển tới Màn hình người bán 12 IconButton Thêm vào giỏ hàng Thêm sản phẩm vào giỏ hàng Danh sách hình ảnh sản phẩm Tên sản phẩm Thêm sản phẩm vào danh mục yêu thích Giá giảm xuất sản phẩm có giảm giá Giá sản phẩm Chuyển tới Màn hình đánh giá sản phẩm 59 13 Button Mua Chuyển tới Màn hình xác nhận 4.6.3.10 Màn hình người bán: a Giao diện: 60 Hình 4.32 Giao diện Màn hình người bán b Mơ tả đối tượng hình: 61 STT Nội dung Component Thông tin người Chức Chứa thông tin chi tiết người bán Card Profile Button Quan tâm Button Báo cáo Báo cáo tài khoản Navigator Điều hướng Điều hướng hình Card Info Thơng tin xác nhận Card Description Mô tả Card Transaction Thông tin giao dịch View Danh sách View Danh sách bán Thêm người bán vào danh sách quan tâm Chứa thông tin xác nhận người bán Mô tả người bán Tổng số lượng giao dịch sản phẩm mua bán Chứa danh sách mặt hàng người bán Chứa danh sách đánh giá người bán 4.6.3.11 Màn hình xác nhận: a Giao diện: 62 Hình 4.33 Giao diện Màn hình xác nhận b Mơ tả đối tượng hình: 63 STT Nội dung Component Chức IconButton Quay lại Quay lại Màn hình trước Card Address Thơng tin địa Thông tin chi tiết địa giao hàng Card Payment Card Price Thông tin tiền Card Total Tổng tiền Phương thức toán Chọn phương thức tốn Thơng tin chi tiết tiền (tiền hàng, vận chuyển, giá) Tổng tiền cần toán 4.6.3.12 Màn hình giao dịch thành cơng: a Giao diện: 64 Hình 4.34 Giao diện Màn hình giao dịch thành cơng b Mơ tả đối tượng hình: 65 STT Component Nội dung Chức Button Tiếp tục mua sắm Chuyển tới Màn hình giỏ hàng Button Trở trang chủ Chuyển tới hình trang chủ Text Lời cảm ơn Lời cảm ơn sử dụng ứng dụng Icon Thành công Xác nhận đặt hàng thành công 4.7 Một số diagram bổ sung ứng dụng: Vì chức ứng dụng nhiều phức tạp nên khn khổ ứng dụng nhóm sẻ trình bày chức ứng dụng 4.7.1 Active Diagram: 66 User System User Thêm sản phẩm vào giỏ hàng Kiểm tra tính hợp lệ sản phẩm Không hợp lệ Hợp lệ Thêm sản phẩm vào giỏ hàng Màn hình giỏ hàng Khơng tốn Thanh tốn Thanh toán sản phẩm Xử lý toán Thanh toán khơng hợp lệ Thanh tốn hợp lệ Màn hình order thành cơng order thành cơng Hình 4.35 (Ac.D) Sơ đồ thêm sản phẩm vào giỏ hàng order sản phẩm 4.7.2 State Diagram: 67 User Đăng nhập ứng dụng Chọn sản phẩm ưng ý thêm vào giỏ hàng Thanh toán sản phẩm Khơng tốn Thốt khỏi module order Thanh toán Chọn hạng mục toán, địa Thanh tốn Thanh tốn thất bại Thanh tốn thành cơng Tiếp tục đặt mua sản phẩm Hình 4.36 (St.D) Sơ đồ thêm sản phẩm vào giỏ hàng order sản phẩm 4.7.3 Sequence Diagram: User Flutter Database Thêm sản phẩm vào giỏ hàng Lưu sản phẩm vào giỏ hàng alt Thêm vào giỏ hàng lỗi Hiển thị thông báo lổi cho người dùng thông báo lỗi thêm vào giỏ hàng thất bại [condition] Màn hình giỏ hàng chứa sản phẩm Xử lý thơng tin thành cơng Thanh tốn sản phẩm Tạo order sản phẩm alt Thanh tốn thành cơng Xuất hình báo lỗi thơng báo tạo order thất bại Thanh tốn thất bại thơng báo tạo order thành cơng Xuất hình thơng báo thành cơng Hình 4.37 (Se.D) Sơ đồ thêm sản phẩm vào giỏ hàng order sản phẩm 68 CHƯƠNG 5: THỰC NGHIỆM VÀ ĐÁNH GIÁ 5.1 Môi trường thử nghiệm: Hệ điều hành: Windows 10 Visual studio code: 1.63.2 Flutter: 2.5.3 Thiết bị debug: Pixel 3a API29/ Android 11/ 8GB RAM 5.2 Kết thử nghiệm: - Chạy ứng dụng - Hoàn thành chức tốt module - Hiệu suất ổn - Đáp ứng đầy đủ yêu cầu app 5.3 Đánh giá sản phẩm: - Ứng dụng các chức đề cập Chương - Hiệu suất truy xuất thao tác liệu nhanh, cần số module cần phải hoàn thiện để mang hiệu suất tốt - Sản phẩm chạy hệ điều hành Android/ IOS - Ứng dụng đáp ứng chức - Giao diện cần cải tiến để nhìn bắt mắt - Giao diện chưa tương thích nhiều thiết bị có hình nhỏ 69 CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết luận: 6.1 Thông qua việc nghiên cứu tìm hiểu cơng nghệ, đặc biệt công nghệ mới, em phát triển ứng dụng hồn chỉnh Do giới hạn kinh phí đăng ký domain hosting, ứng dụng dừng lại giai đoạn chạy thử, chưa phổ biến tới người dùng Tuy nhiên kết chạy thử cho thấy hệ thống hoạt động tốt, mở rộng, phát triển thêm tương lai Về mặt kỹ thuật, nhóm em đạt kết sau: - Tìm hiểu, áp dụng framework NodeJS - Tìm hiểu Flutter, cơng nghệ lập trình giao diện Mobile - Học nhiều kiến thức, có thêm kinh nghiệm việc sử dụng Express triển khai ứng dụng Mobile - Tìm hiểu dịch vụ lưu trữ liệu MongoDB Cloud hiểu cách lưu trữ, tiện ích Firebase - Tìm hiểu mơ hình kinh doanh B2B, B2C,… ứng dụng thương mại điện tử, mua bán online Về mặt thực tiễn em đạt được: - Rèn luyện kĩ nhận dạng toán, nghiên cứu khảo sát thực tế, phân tích chức thực tài liệu mô tả - Nâng cao khả tìm hiểu nghiên cứu cơng nghệ, đặc biệt công nghệ - Phát triển kỹ mềm cá nhân lên kế hoạch, trình bày văn bản, dự trù thời gian, kỹ làm việc nhóm khả tranh luận, thuyết phục hỗ trợ lẫn - Hiểu sản phẩm thực có tác động đến thực tế Đại học quốc gia sinh viên thuộc KTX đại học quốc gia qua góp ý thầy cơ, bạn bè khoa Thuận lợi khó khăn: 6.2 6.2.1 Thuận lợi: - Có nhiều tài liệu tham khảo mặt công nghệ - Cả hai có kinh nghiệm việc phát triển ứng dụng Mobile - Đưa vấn đề giải nhanh chóng, khơng tốn nhiều thời gian - Được giảng viên quan tâm, cho lời khuyên đánh giá để ứng dụng ngày tốt 70 - Các bạn học chung khoa quan tâm đánh giá để cải thiện ứng dụng kịp thời 6.2.2 Khó khăn: - Dự án thực giai đoạn ngắn vào thời gian hai thực tập Nên thời gian khơng có q nhiều Cả hai chủ yếu meeting online để bàn dự án có đơi lúc khó giao tiếp với - Có số cơng nghệ nhóm lần đầu sử dụng Flutter, Firebase nên trình làm tốn nhiều thời gian tìm hiểu cơng nghệ Cùng với vấn đề nâng cấp hiệu xuất truy xuất phía BE, vấn đề nâng cao, nhóm chưa có kinh nghiệm thực tế giải nên tốn nhiều thời gian để tìm hiểu vấn đề - Các mơ hình kinh doanh trang buôn bán, thương mại điện tử, chia sẻ đồ dùng, phức tạp nặng mảng kinh tế nên nhóm cần phải tìm tài liệu chun ngành để hiểu rõ mặt lợi hại mơ hình để xây dựng giai đoạn phát triển ứng dụng Hướng phát triển: 6.3 Đề tài hồn thành đa số chức đặt Có thể cài đặt chạy thử nghiệm tốt thiết bị Android IOS Nhưng hiệu suất ứng dụng chưa tối ưu, số chức chưa hoàn thiện Về mặt tương lai đề tài nên tiến hành phát triển thêm: - Tiến hành nâng cao hiệu suất cho ứng dụng - Xây dựng module (đấu giá, give away) để phù hợp thị yếu người dùng - Phát triển, nâng cao tính xác thực thông tin người dùng, đảm bảo an tồn cho mơ hình phát triển B2B - Phát triển đề tài thành ứng dụng thương mại hóa 71 TÀI LIỆU THAM KHẢO [MongoDB] “Tổng quan MongoDB”, 2014, https://bigsonata.wordpress.com/, link truy cập: https://bigsonata.wordpress.com/2014/06/05/mongodb/ “MongoDB gì? Chia sẻ từ A-Z”, https://hostingviet.vn/, link truy cập: https://hostingviet.vn/mongodb-la-gi Nguyễn Dương (2016), “MongoDB (Phần 1)”, https://viblo.asia/, link truy cập: https://viblo.asia/p/mongodb-co-ban-phan-1-l5XRBVN3RqPe Hoàng Hùng (2018), “Mongoose cho MongoDB, NodeJS”, https://viblo.asia/, link truy cập: https://viblo.asia/p/mongoose-cho-mongodb-nodejs-Qbq5QWvJZD8 Vương Hương (2019), “MongoDB CRUD Operations”, https://viblo.asia/, link truy cập: https://viblo.asia/p/mongodb-crud-operations-Az45banqlxY [Firebase] Dương Tú Anh (2020), “Firebase gì? Giải thích chức Firebase”, https://viblo.asia/, link truy cập: https://viblo.asia/p/firebase-la-gi-giai-thich-nhung-chucnang-co-ban-cua-firebase-bWrZn0jQ5xw [NodeJS] Hiếu Trần (2020), “NodeJS gì? Hướng dẫn cài đặt viết chương trình NodeJS”, https://blog.itnavi.com.vn/, link truy cập: https://blog.itnavi.com.vn/nodejs-la-gi/ [Flutter] Học phát triển ứng dụng Flutter, link truy cập: https://docs.flutter.dev/development/ui/layout/tutorial 72 ... Đại học có nhu cầu đóng góp trao đổi đồ dùng học tập, khoá học 1.3 Mục tiêu đề tài: - Giao diện đơn giản, dễ sử dụng - Bỏ tính thừa - Cải thiện hiệu cho ứng dụng - Có thể trao đổi, mua bán đồ dùng. .. buôn bán, trao đổi Chỉ cần tạo lập tài khoản, đăng sản phẩm cần bán trao đổi thực việc trao đổi mua bán Nhận thấy hầu hết bạn sinh viên học xong mơn trường có nhiều sách vở, đồ dùng không cần dùng. .. đăng ký với ứng dụng Trado: - Cách 1: Đăng ký với ứng dụng thứ • Vào ứng dụng Trado thực đăng ký ứng dụng khác (các ứng dụng có hỗ trợ) • Đăng nhập tài khoản ứng dụng khác • Người dùng thực chờ