Des lythuyet nhom03 tinder report

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN MÔN THIẾT KẾ HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ PHÂN TÍCH ỨNG DỤNG TINDER GVHD: ThS Trình Trọng Tín Nhóm sinh viên thực hiện: NHÓM 03 Trần Linh Đa Lê Thị Hoài Giang Lê Hữu Huy Phan Thị Liễu Lê Thị Xuân An MSSV: 19521305 MSSV: 19521447 MSSV: 19521615 MSSV: 19521749 MSSV: 19521177 TP Hồ Chí Minh, 06/2022 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2022 Người nhận xét (Ký tên ghi rõ họ tên) MỤC LỤC NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN 35 MỤC LỤC MỤC LỤC BẢNG MỤC LỤC HÌNH ẢNH Tổng quan đồ án 1.1 Lý chọn đề tài: 1.2 Mục tiêu đề tài 1.3 Phương pháp nghiên cứu 1.4 Cơ sở lý thuyết nghiên cứu liên quan Phân tích yêu cầu 10 2.1 Phân tích nghiệp vụ 10 2.2 Phân tích yêu cầu mặt chức 11 2.2.1 Sơ đồ UseCase tổng quát 11 2.2.2 Danh sách tác nhân hệ thống 11 2.2.3 Danh sách UseCase đặc tả UseCase 12 2.3 Phân tích yêu cầu mặt phi chức 15 2.3.1 Lý thuyết 15 2.3.2 Các yêu cầu phi chức Tinder 16 2.4 Giao diện mẫu cho chức 18 2.4.1 Wiframe 18 2.4.2 Giao diện mẫu 31 Thiết kế hệ thống 20 3.1 Kiến trúc hệ thống 20 3.2 Thiết kế chi tiết cho chức 22 3.2.1 Activity diagram 22 3.2.2 Class diagram 26 3.2.3 Sequence diagram 26 3.2.4 Database design 28 Triển khai hệ thống 31 Kết luận 31 5.1 Kết 32 5.2 Khó khăn 33 TÀI LIỆU THAM KHẢO Error! Bookmark not defined MỤC LỤC HÌNH ẢNH Hình - AWS Architecture Diagram Hình - Quy trình nghiệp vụ hẹn hò qua app Tinder 10 Hình - Sơ đồ usecase tổng quát 11 Hình - Log in 13 Hình - Log out 13 Hình - Super Like People 13 Hình - Unlimited Rewinds People 13 Hình - Boost People 14 Hình - Like people 14 Hình - Non People 14 Hình - 10 Message People 14 Hình - 11 View profile people 14 Hình - 12 Change profiles 15 Hình - 13 Upgrade account 15 Hình - 14 BMAT 17 Hình - 15 Đăng nhập 18 Hình - 16 Tìm kiếm partner 18 Hình - 17 Đăng ký 18 Hình - 18 Siêu thích 18 Hình - 19 Từ chối 18 Hình - 20 Đồng ý 18 Hình - 21 Xem lượt matches 19 Hình - 22 Nhắn tin với partner 19 Hình - 23 Cài đặt tài khoản 19 Hình - 24 Xem thông tin partner 19 Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình - Architecture Tinder (AWS 2.0) 20 Diagram-Activity Login 22 Diagram-Activity Manages matches 23 Diagram-Activity Manage pairings 24 Diagram-Activity View own profile 25 Class Diagram 26 Cấu trúc Redux React Native 26 Sequence Diagram - Match friend 27 Theo the app solution - thành phần hệ thống Tinder 28 10 Database - ERD Tinder 29 11 Database - Json Tinder 30 Hình - Trang chủ 31 Hình - Thao tác like 31 Hình - Thao tác Nope 31 Hình - Chi tiết khám phá 31 Hình - Profile 31 Hình - Khám phá 31 Hình - Quét tìm đối tượng 32 Hình - Chi tiết tin nhắn 32 Hình - Tin nhắn 32 Hình - 10 ReactNative - Dating app 32 MỤC LỤC BẢNG Bảng Phân công đánh giá thành viên 36 Bảng - Bảng danh sách tác nhân hệ thống 11 Bảng - Bảng danh sách Usecase đặc tả 12 Tổng quan đồ án 1.1 Lý chọn đề tài: Đi lên song song với phổ biến smartphone, công cụ hẹn hò trực tuyến ngày trở nên phổ biến Nó giúp người dễ dàng đến gần với hơn, nơi nào, thời điểm Cho dù biết đến Việt Nam năm gần đây, ứng dụng hẹn hò trực tuyến trở nên thu hút với người, độ tuổi từ sinh viên người trưởng thành chín chắn Các app hẹn hị thực cần thiết hữu ích thời đại mà vùi đầu vào công việc học tập, việc làm quen, kết nối hẹn hò để tìm nửa thân trở nên khó khăn Để giải bất cập cho người bận rộn, ứng dụng hẹn hò uy tín đời với nhiều điều độc đáo Hiểu xu hướng thời đại 4.0, nhóm em định tìm hiểu nghiên cứu ứng dụng Tinder - ứng dụng hẹn hò phổ biến Việt Nam Ngồi ra, sở thích thành viên nhóm mong muốn tìm hiểu khám phá điều mẻ, độc đáo 1.2 Mục tiêu đề tài Có kiến thức phân tích thiết kế hệ thống phần mềm nói chung ứng dụng hẹn hị nói riêng Hiểu quy trình phát triển phầm mềm, vẽ mơ hình phục vụ lập trình phần mềm Vận dụng kiến thức học để phát triền ứng dụng hẹn hò tương tự 1.3 Phương pháp nghiên cứu Các phương pháp nghiên cứu thực đồ án • Thực hành từ tổng thể đến chi tiết từ bên lẫn bên ngồi • So sánh phân tích ứng dụng khác chủ đề • Thu thập nhiều nguồn thơng tin từ Internet: Các video hướng dẫn thiết kế hệ thông youtube, Thông tin từ page Tinder, sơ đồ phân tích phần mềm,… Phương pháp làm việc dựa theo Aigle Cụ thể mơ hình scrum 1.4 Cơ sở lý thuyết nghiên cứu liên quan Cơ sở lý thuyết: khái niệm liên quan thiết kế hệ thống, lý thuyết học tài liệu công bố Tinder đối tác Dựa tổng hợp tài liệu liên quan nhóm trình bày lại hệ thống Tinder Và sở hoàn toàn dựa vào trải nghiệm, tra cứu Tóm lại, sở lý thuyết nhóm từ x nguồn sau: • Giáo trình Phân tích thiêt kế Hệ thống thơng tin – Đại học Công nghệ Thông tin – Đại học quốc gia thành phố Hồ Chí Minh • Giáo trình thầy Trần Đình Quế - Phân tích Hệ thống thơng tin • AWS Architecture Diagram: https://aws.amazon.com/vi/architecture Hình - AWS Architecture Diagram • Trải nghiệm thực tế nhóm ứng dụng Những nghiên cứu liên quan: Sau xác định sở lý thuyết đưa loại mơ hình mà Tinder sử dụng Từ tìm hiểu chun sâu theo mơ hình Ví dụ: sau đọc báo AWS nhóm biết Tinder sử dụng database Amazon DynamoDB • Blog Tinder Website: https://theappsolution.com • Page Tinder: https://help.tinder.com • Blog design tinder: http://highscalability.com/ Phân tích yêu cầu 2.1 Phân tích nghiệp vụ Hình - Quy trình nghiệp vụ hẹn hị qua app Tinder Trạng thái bắt đầu: Khi người dùng bắt đầu truy cập sử dụng ứng dụng Tinder Bộ phận tham gia: Người dùng Tinder, hệ thống ứng dụng Tinder Giải thích quy trình: • • • • Bước 1: Người dùng bật định vị cá nhân Bước 2: Người dùng tạo hồ sơ cá nhân Bước 3: Người dùng tạo thơng tin tìm kiếm hẹn hò phù hợp với thân Bước 4: Người dùng bắt đầu vuốt chọn “đối tượng ghép cặp” dựa đề xuất ứng dụng Tinder • Bước 5: Nếu “đối tượng ghép cặp” phù hợp đến bước 6, “đối tượng ghép cặp” không phù hợp quay lại bước • Bước 6: Người dùng trị chuyện với “đối tượng ghép cặp” → Kết thúc quy trình 3.2 Thiết kế chi tiết cho chức 3.2.1 Activity diagram Hình - Diagram-Activity Login Hình - Diagram-Activity Manages matches Hình - Diagram-Activity Manage boosting top profiles Hình - Diagram-Activity View own profile 3.2.2 Class diagram Hình - Class Diagram 3.2.3 Sequence diagram Sequence diagram thể match với đối tượng với react-native, redux: Hình - Cấu trúc Redux React Native • • Redux sử dụng kiến trúc chiều, tức có flow bên trên, vịng vòng chiều từ action → reducer → store → view State toàn ứng dụng lưu trong store Object mô hình tree: Single source of truth • • Redux state READ-ONLY: bạn thay đổi trực tiếp state được, có cách để update state phải dispatch action (là js object) Những thay đổi redux state thực Pure functions (reducer) Hình - Sequence Diagram - Match friend Đầu tiên, người dùng thích đối tượng quét qua phải (khi người thích lẫn hệ thống tự động thông báo match giữ đối tượng) Do sau quét sang phải, event gửi từ giao diện (view) dùng dispatch để thực action checkmatch() để kiểm tra người có match với hay khơng Mang thơng tin đến Store, mơ tả muốn lấy thơng tin match với store dispatch(getMatchInfo()).Action có nhiệm vụ mơ tả xảy lại không rõ phần state response thay đổi thay đổi → việc Reducer đảm nhiệm Reducer nhận tham số: state cũ thơng tin action gửi lên, sau biến đổi trả state mới, khơng làm thay đổi state cũ Và gửi request gọi api lấy thông tin từ database, backend xử lý data kiểm tra match controller, sau gửi respone reducer reducer return state về, rerender lại giao diện subscribe (), cập nhật tình hình thay đổi View gửi thơng báo cho người dùng 3.2.4 Database design Theo tổng hợp qua websiteThe App Solution [2] AWS Amazon [3] ứng dụng Tinder sửa dụng khoảng database: Amazon DynamoDB, PostgreSQL, MongoDB, Redis Và có cách biểu diễn cấu trúc database ERD json Hình - Theo the app solution - thành phần hệ thống Tinder Ngoài Cloud storage Amazon S3 (Amazon Simple Storage Service or S3 lưu trữ đối tượng với giao diện dịch vụ web đơn giản để lưu trữ truy xuất lượng liệu từ đâu web) Web servers: Nginx • Database Tinder dạng ERD [4] Hình - 10 Database - ERD Tinder • Database Tinder biểu diễn dạng Json [5] Hình - 11 Database - Json Tinder Triển khai hệ thống Hình - Trang chủ Hình - Khám phá Hình - Thao tác like Hình - Chi tiết khám phá Hình - Thao tác Nope Hình - Profile Hình - Tin nhắn Hình - Chi tiết tin nhắn Hình - Quét tìm đối tượng Hình - 10 ReactNative - Dating app Kết luận 5.1 Kết Hiểu quy trình phát triển phần mềm Hiểu cách hoạt động cách thiết kế hệ thống ứng dụng hẹn hò nói chung ứng dụng Tinder nói riêng Có thể thiết kế ứng dụng hẹn hò tương tự Biết cách triển khai sơ đồ, quy trình trước bắt đầu lập trình ứng dụng 5.2 Khó khăn Tất dựa đọc hiểu, nghiên cứu, độ xác tầm 80%, khơng có tính xác thực từ bên chủ Tinder TÀI LIỆU THAM KHẢO [1] “Tinder,” 13 06 2022 [Trực tuyến] Available: https://www.help.tinder.com/hc/enus/sections/115001014406-Premium-Features [2] “The App Solutions,” [Trực tuyến] Available: https://theappsolutions.com/blog/how-to/dating-app-like-tinder/ [Đã truy cập 13 06 2022] [3] "AWS," [Online] Available: https://aws.amazon.com/vi/blogs/database/buildingresiliency-at-scale-at-tinder-with-amazon-elasticache/ [Accessed 13 06 2022] [4] “Gen my model,” [Trực tuyến] Available: https://app.genmymodel.com/api/repository/simonbalean/Tinder [Đã truy cập 01 06 2022] [5] “Towards Datascience,” [Trực tuyến] Available: https://towardsdatascience.com/ianalyzed-hundreds-of-users-tinder-data-including-messages-so-you-dont-have-to14c6dc4a5fdd [Đã truy cập 15 05 2022] BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN Work Set up Detail Memeber Start day UML online Deadline Status Giang 06/04 10/04 10/10 Đa 06/04 13/04 10/10 Giang 06/04 10/04 10/10 Colloborate Đa 06/04 10/04 10/10 Figma An 06/04 10/04 10/10 1.1 Lý chọn đề tài Liễu 06/04 10/04 10/10 1.2 Mục tiêu đề tài Giang 06/04 10/04 10/10 1.3 Phương pháp nghiên cứu Huy 06/04 10/04 10/10 1.4 Cơ sở lý thuyết nghiên cứu liên quan Đa 06/04 10/04 10/10 Giang 06/04 10/04 10/10 An 06/04 13/04 10/10 Huy 06/04 13/04 10/10 Slide BPMN Chat: messenger Tổng quan đồ án Phân tích yêu cầu 2.1 Phân tích nghiệp vụ 2.2 Phân tích yêu cầu chức 2.3 Phân tích yêu cầu mặt phi chức usecas e Key 2.4 Giao diện mẫu cho chức vẽ wirefr ame Huy 06/04 13/04 10/10 vẽ figma An, Huy 06/04 21/04 10/10 Huy 20/04 26/04 10/10 - Activity diagram Liễu, Giang 06/04 26/04 10/10 - BPMN Liễu, Giang 06/04 26/04 10/10 - Class diagram Liễu, Giang 06/04 05/05 10/10 - Sequence diagram An 06/04 07/05 10/10 - Database design (ERD) Đa 06/04 05/05 10/10 Triển khai hệ thống Chụp giao diện An 12/06 15/06 10/10 Kết luận 5.1 Kết Huy 12/06 15/06 10/10 5.2 Khó khăn Huy 12/06 15/06 10/10 Thiết kế hệ thống 3.1 Kiến trúc hệ thống system design 3.2 Thiết kế chi tiết cho chức Bảng Phân công đánh giá thành viên react native sequence diagram