Đồ án xây dựng ứng dụng mạng xã hội chia sẽ văn hóa ẩm thực

ĐẠ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 ĐỒ ÁN XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI CHIA SẼ VĂN HÓA ẨM THỰC BUILDING A SOCIAL APP TO SHARE CUISINE SVTH : ĐẶNG DUY BẰNG NGUYỄN NHỰT TÂN GVHD : ThS THÁI THỤY HÀN UYỂN TP Hồ Chí Minh, tháng 12 năm 2022 ĐẠ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 ĐỒ ÁN XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI CHIA SẼ VĂN HÓA ẨM THỰC BUILDING A SOCIAL APP TO SHARE CUISINE SVTH : ĐẶNG DUY BẰNG NGUYỄN NHỰT TÂN GVHD : ThS THÁI THỤY HÀN UYỂN NGÀNH : KỸ THUẬT PHẦN MỀM TP Hồ Chí Minh, 2022 - 19521234 - 19520923 THƠNG TIN HỘI ĐỒNG CHẤM ĐỒ ÁN Hội đồng chấm đồ án 2, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin ……………………………… – Chủ tịch …………………….………… – Thư ký ……………………………… – Ủy viên …………………….………… – Ủy viên ĐHQG TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày…tháng…năm 2022 NHẬN XÉT ĐỒ ÁN (Của cán hướng dẫn) Tên đề tài: XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI CHIA SẼ VĂN HÓA ẨM THỰC Nhóm sinh viên thực hiện: Họ Tên: Đặng Duy Bằng MSSV: 19521234 Họ Tên: Nguyễn Nhựt Tân MSSV: 19520923 Đánh giá Đồ án: Về báo cáo: Số trang : Số chương : Số bảng số liệu : Số hình vẽ : Số tài liệu tham khảo : Sản phẩm : Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về chương trình ứng dụng …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về thái độ làm việc sinh viên …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Điểm sinh viên: Đặng Duy Bằng : ……… /10 Nguyễn Nhựt Tân : ……… /10 Người nhận xét (Ký tên ghi rõ họ tên) ĐHQG TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày…tháng…năm 2022 NHẬN XÉT ĐỒ ÁN (Của cán phản biện) Tên đề tài: XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI CHIA SẼ VĂN HĨA ẨM THỰC Nhóm sinh viên thực hiện: Họ Tên: Đặng Duy Bằng MSSV: 19521234 Họ Tên: Nguyễn Nhựt Tân MSSV: 19520923 Đánh giá Đồ án: Về báo cáo: Số trang : Số chương : Số bảng : Số hình vẽ : Số tài liệu tham khảo : Sản phẩm : Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về chương trình ứng dụng …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Về thái độ làm việc sinh viên …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… Điểm sinh viên: Đặng Duy Bằng : ……… /10 Nguyễn Nhựt Tân : ……… /10 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Trong trình học tập, nghiên cứu phát triền đề tài “Ứng dụng mạng xã hội chia văn hóa ẩm thực” chúng em nhận giúp đỡ, bảo nhiệt tình Cơ để hồn thành đồ án Chúng em xin bày tỏ biết ơn đặc biệt đến Cô Thái Thụy Hàn Uyển người trực tiếp hướng dẫn, giúp đỡ kiến thức, tài liệu phương pháp để chúng em hoàn thành đề tài Chúng em xin chân thành cảm ơn thời gian quý báu Cô dành để kiểm tra, đưa ý kiến nhận xét đóng góp nhiều vào tính năng, hướng phát triển cho đề tài Hi vọng với báo góp ý từ Cơ, nhóm đề tài tiếp tục phát triển để ứng dụng ngày mở rộng phục vụ tốt cho người dùng Mặc dù có nhiều cố gắng suốt q trình thực đề tài, song cịn có mặt hạn chế, thiếu sót Chúng em mong nhận ý kiến đóng góp dẫn Cô bạn để đề tài chúng em hoàn thiện Chúng em xin trân trọng cảm ơn! TP Hồ Chí Minh, Tháng 12 năm 2022 i ĐHQG TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày…tháng…năm 2022 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI CHIA SẼ VĂN HÓA ẨM THỰC Cán hướng dẫn: ThS Thái Thụy Hàn Uyển Thời gian thực hiện: Từ ngày 20/09/2022 đến ngày 30/12/2022 Nhóm sinh viên thực hiện: Đặng Duy Bằng - 19521234 Nguyễn Nhựt Tân - 19520923 Nội dung đề tài: Mục tiêu:  Ứng dụng xây dựng với mục đích kết nối người yêu ăn uống nấu ăn, tạo môi trường chia sẻ, học hỏi văn hóa ăn chia sẻ địa điểm, hàng quán với ăn ngon, chia sẻ, hướng dẫn nấu ăn  Thông qua chức chia sẻ hướng dẫn nấu ăn, khuyến khích việc nấu ăn nhà, hạn chế tiếp xúc nơi hàng quán đông người thời kỳ dịch bệnh  Bên cạnh đó, đề tài tạo hội để nghiên cứu, học hỏi để nâng cao chuyên môn lĩnh vực phát triển phần mềm Năm bắt công nghệ xu hướng phát triển ứng dụng thị trường Phạm vi: Đề tài tập trung vào xây dứng ứng dụng di động tảng Android với chức chính:  Khởi tạo tài khoản: Khơng cần đăng ký, tích hợp đăng nhập qua tài khoản Google, Facebook  Mạng xã hội: Chia sẻ, bình luận thể cảm xúc thời gian thực ăn/hàng qn/địa điểm  Nhận xét, đánh gía: Bất kỳ người dùng để lại đánh giá nhận xét tiêu chí, giúp người dùng khác chọn ăn/hàng quán/địa điểm phù hợp ii  Trò chuyện: Nhắn tin với bạn bè hỗ trợ định dạng văn bản, biểu tượng cảm xúc, nhãn dán, hình ảnh  Thơng báo: Ln nhận thông báo thời gian thực kể không mở ứng dụng  Feedback/Report: Tiếp nhận Feedback, report từ người dùng để cải thiện môi trường mạng xã hội ứng dụng Đối tượng sử dụng: Là người sử dụng thiết bị di động (Android) có nhu cầu như:  Người có sở thích nấu ăn ăn uống  Người có nhu cầu tìm hiểu đồ ăn, đồ uống đa dạng ẩm thực  Người muốn chia bí nhiệt đam mê với người sở thích Phương pháp thực hiện:  Tìm hiểu đánh giá giải pháp có  Đề xuất, cải thiện tính cần thiết  Áp dụng mơ hình thác nước vào xây dựng ứng dụng Kết mong đợi:  Hiểu rõ framework, công nghệ công cụ liên quan (Figma, React Native, Websocket, Nodejs, Mongodb, heroku, Postman …) để ứng dụng vào xây dựng ứng dụng mạng xã hội chia văn hóa ẩm thực  Hồn thành ứng dụng chạy tảng Android với đầy đủ yêu cầu chức đề  Ứng dụng có độ hồn thiện cao, có khả đưa vào thực tiễn Kế hoạch thực hiện: Đồ án thực 15 tuần, thời gian mô tả nội dung công việc thể bảng bên dưới: Giai đoạn Công việc thực     Khảo sát ứng dụng tương tự Phát biểu tốn Phân tích, xác định chức Tìm hiểu công nghệ công cụ sử dụng đồ án (React Native, Nodejs, Figma, mongodb WebSocket, …)  Tìm hiểu thuật tốn Phân tích u cầu, nghiên cứu kỹ thuật (09/2022)  Đọc tài liệu ngôn ngữ  Cài đặt mơi trường cơng cụ Tìm hiểu học ngôn ngữ (09/2022 – 10/2022) iii 3.5.1.18 Lược đồ thao tác “Xóa cơng thức ăn” Hình 3-21 Sơ đồ thao tác Tìm kiếm cơng thức ăn 3.5.1.19 Lược đồ thao tác “Đánh giá cơng thức” Hình 3-22 Sơ đồ thao tác Đánh giá công thức 3.5.1.20 Lược đồ thao tác “Tìm cơng thức ăn” Hình 3-23 Sơ đồ thao tác Tìm kiếm cơng thức ăn 47 3.5.1.21 Lược đồ thao tác “Tìm quán ăn gần đây” Hình 3-24 Sơ đồ Tìm quán ăn gần 3.5.1.22 Lược đồ thao tác “Nhắn tin” Hình 3-25 Sơ đồ thao tác Nhắn tin 48 3.5.2 Thiết kế sỡ liệu 3.5.2.1 Lược đồ sỡ liệu Hình 3-26 Sơ đồ thiết kế sỡ liệu 3.5.2.2 Mô tả bảng liệu Bảng liệu User: Lưu thơng tin người dùng STT Tên thuộc tính Kiểu liệu id first_name last_name Ràng buộc Ý nghĩa Phân biệt người dùng ObjectId Là khóa String Khơng rỗng, khơng chứa số ký tự Họ người dùng đặc biệt String Không rỗng, không chứa số ký tự Tên người dùng đặc biệt 49 username email Không rỗng, không chứa số ký tự đặc biệt, String Không rỗng, Email người dùng, Là Gmail đăng Email đăng nhập String nhập Google avatar_url String link ảnh đại diện cover_url String Link ảnh bìa about String Thông tin thêm người dùng is_current Boolean Mặc định False Người dùng đăng nhập hệ thống 10 is_verified Boolean Mặc định False Trạng thái kích hoạt tài khoản 11 is_active Boolean Mặc định True Trạng thái hoạt động tài khoản 12 create_at Date Tự động tạo tạo Thời gian tài khoản khoản 13 following Array User of Tài khoản người dùng theo dõi 14 follower Array User of Những tài khoản theo dõi tạo tài Bảng liệu Food: Lưu thông tin đăng hướng dẫn nấu ăn STT Tên thuộc tính Kiểu liệu Ràng buộc Ý nghĩa Phân biệt hướng dẫn ăn Id ObjectId Là name String Là nhất, Tên ăn khơng rỗng 50 ingredients Array Danh sách tên nguyên liệu recipe String Hướng dẫn nấu ăn avg_score Number Mặc định Điểm bình author ObjectId Khơng rỗng Tác giả đăng rating trung Bảng liệu FoodRate: Lưu thông tin đánh giá ăn STT Tên thuộc tính Kiểu liệu Ý nghĩa Ràng buộc id ObjectId Khơng rỗng Nhận diện đánh giá ăn food ObjectID Khơng rỗng Bài đăng ăn author ObjectId Khơng rỗng Tác giả đánh giá ăn score Number Mặc định 10 Điểm đánh giá create_at Date Tự động tạo Thời gian tạo đánh giá Bảng liệu Post: Lưu thông tin đăng STT Tên tính thuộc Kiểu liệu Ràng buộc Ý nghĩa Không rỗng Nhận diện đăng id ObjectId foods Array of Food Danh sách ăn đính kèm content String Nội dung đăng photos Array of String Danh sách link hình ảnh Location String Tọa độ điểm check in is_public Boolean Mặc định True num_heart Number Mặc định 51 Số cảm xúc author ObjectId Không rỗng Tác giả đăng create_at Date Tự động tạo Thời gian tạo viết Bảng liệu PostComment: Lưu thông tin bình luận STT Tên thuộc tính Kiểu liệu Ràng buộc Ý nghĩa id ObjectId Không rỗng Nhận diện bình luận author ObjectId Khơng rỗng Tác giả bình luận post ObjectId Khơng rỗng Nhận diện đăng content String parent ObjectId create_at Date Nội dung bình luận Tự động tạo Ngày tạo bình luận Bảng liệu Notify: Lưu thơng tin Thơng báo STT Tên thuộc tính Kiểu liệu Ràng buộc Ý nghĩa id ObjectId Không rỗng Nhận diện thông báo notify_type String Không rỗng Loại thông báo author ObjectId Không rỗng Tác giả tạo thông báo receiver ObjectId Không rỗng Người nhận thông báo detination String is_seen Boolean Mặc định False Trạng thái xem thông báo create_at Date Tự động tạo Thời gian tạo thông báo Đường dẫn thông báo Bảng liệu Chat: Lưu thông tin Chat STT Tên thuộc tính Kiểu liệu Ràng buộc Ý nghĩa id ObjectId Khơng rỗng Nhận diện phịng Chat user1 ObjectId Không rỗng Người dùng 52 user2 ObjectId Không rỗng Người dùng create_at Date Tự động tạo Thời gian tạo phòng ch firstUserSeen Boolean Mặc định False secondUserSeen Boolean Mặc định False Bảng liệu Message: Lưu thông tin tin nhắn STT Tên thuộc tính Kiểu liệu Ràng buộc Ý nghĩa id ObjectId Không rỗng Nhận diện tin nhắn author ObjectId Không rỗng Tác giả tin nhắn chat ObjectId Khơng rỗng Phịng chat content String Khơng rỗng Nội dung tin nhắn create_at Date Tự động tạo Thời gian tạo tin nhắn 53 3.5.3 Thiết kế kiến trúc hệ thống 3.5.3.1 Kiến trúc tổng thể Hình 3-27 Sơ đồ kiến trúc tổng thể hệ thống  Node.js Server: Máy chủ ứng dụng sử dụng Express.js Framework viết ngôn ngữ JavaScript với kiến trúc RESTful API triển khai tảng đám mây Heroku  SMTP Server: Máy chủ giao tiếp SMTP Server thông qua giao thức SMTP cần gửi mail đến người dùng  MongoDB: MongoDB sở liệu mã nguồn mở sở liệu NoSQL hàng đầu, hàng triệu người sử dụng Ngoài ra, MongoDB sở liệu đa tảng, hoạt động khái niệm Collection Document, cung cấp hiệu suất cao, tính khả dụng cao khả mở rộng dễ dàng  Google Server: Cung cấp tùy chọn đăng nhập mạng xã hội nhờ APIs hỗ trợ khởi tạo tài khoản xác nhận người dùng  Google Map: Được sử dụng để cập nhật hiển thị vị trí người dùng, cung cấp thông tin để xử lý khoảng cách thực chức checkin  Firebase: Nền tảng đám mây phát triển Google dùng để lưu trữ tất hình ảnh ứng dụng ảnh người dùng tải lên 54 3.5.3.2 Kiến trúc ứng dụng di động Hình 3-28 Sơ đồ kiến trúc ứng dụng di động  Tầng giao diện (Presentation): Có chức cập nhật hiển thị thông tin, nhận liệu, kiểm tra tính đắn liệu trước gọi xuống tầng xử lý nghiệp vụ Bao gồm thành phần chính: o View: Gồm có Screen - Chứa hình hiển thị ứng dụng Component Các thành phần giao diện thiết kế để tái sử dụng nhiều hình o ViewModel: Phần logic trung gian View Model o Model: Đại diện cho đối tượng nghiệp vụ cần xử lý  Tầng nghiệp vụ (Business): Kiểm tra ràng buộc, tính đắn liệu theo nghiệp vụ trước lưu trữ Ở chiều ngược lại, xử lý chuyển đổi liệu thô thành đối tượng nghiệp vụ đẩy lên tầng giao diện  Tầng liệu (Data Access): Có chức giao tiếp với sở liệu lưu trữ, cập nhật, truy vấn 55 3.5.4 Thiết kế giao diện số hình Hình 3-29 Màn hình đăng nhập Hình 3-30 Màn hình đăng ký Hình 3-31 Màn hình home Hình 3-32 Màn hình quên mật 56 Hình 3-32 Màn hình profile Hình 3-33 Màn hình tìm kiếm Hình 3-34 Màn hình thơng báo Hình 3-35 Màn hình tạo viết 57 Hình 3-36 Màn hình cài đặt 3.6 Hình 3-37 Màn hình tạo ăn Triển khai hệ thống 3.6.1 Máy chủ Máy chủ triển khai hệ thống đám mây Heroku Đây RESTful API server phục vụ nhu cầu truy vấn, cập nhật liệu hệ thống thông qua phương thức HTTP Cung cấp API cần thiết khác để lắng nghe thay đổi liệu thông qua WebSocket Ứng dụng tạo quản lý thông qua Heroku CLI31, sử dụng trực tiếp terminal Sử dụng gói triển khai miễn phí tài khoản xác thực, hoạt động 1000 tháng Sau 30 phút khơng có truy cập hệ thống tự động chuyển trạng thái ngủ phải chờ khoảng thời gian nhỏ đánh thức để sử dụng 58 Database ứng dụng sử dụng MongoDB Atlas, với miễn phí Starter Clusters cung cấp cho 512MB Storage, Shared RAM, 100 max connections Low network performance 3.6.2 Ứng dụng di động Ứng dụng cài đặt chạy máy thật sử dụng hệ điều hành android thông qua SDK Expo - công cụ giúp dễ dàng viết ứng dụng React Native Expo cung cấp lớp nằm React Native API để giúp chúng dễ sử dụng quản lý Trong test, tận dụng môi trường gần giống với môi trường phát triển React Ứng dụng chạy ổn định hầu hết thiết bị, phiên hệ điều điều hành khuyến nghị android trở lên 59 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt Sau thời gian thực đề tài, ứng dụng hoàn thiện đạt số kết sau:  Hiểu nắm cách xây dựng ứng dụng di động React Native,  Nắm rõ React, React Native, Redux, thiết kế giao diện ứng dụng di động,  Đảm bảo độ hoàn thiện chức đề ra,  Giao diện thân thiện với người dùng, có khả mở rộng Thuận lợi khó khăn 4.2 4.2.1 Thuận lợi  Các cơng nghệ có cú pháp thân thiện, dễ dàng tiếp cận để hiểu mức độ  Giảng viên hướng dẫn có nhiều kiến thức kinh nghiệm giúp đỡ em nhiều việc định hướng giải đáp vướng mắc q trình thực khố luận  Nhóm có làm việc chung qua môn học khác nên dễ dàng trao đổi tiếp thu kiến  Khối lượng công việc phân chia hợp lý nhiệm vụ từ ban đầu nên có hướng cụ thể 4.2.2 Khó khăn  Các cơng nghệ cịn chưa hồn thiện, khó khăn việc tối ưu sản phẩm để ứng dụng chạy mượt mà  Do vừa học vừa phát triển ứng dụng công nghệ nên khó khăn việc áp dụng triển khai cách hợp lí  Vẫn cịn số lỗi vặt trình phát triển  Nhiều thành phần giao diện chưa hỗ trợ, phải tự phát triển từ đầu  Khó khăn việc gặp trực tiếp để trao đổi đồ án, nên có số vấn đề hiểu sai không đồng Hướng phát triển 4.3        Mở rộng ứng dụng theo hướng phát triển mà nhóm đề Thêm vào chức tạo video để ứng dụng trở nên sinh động Thêm vào livestream giúp người dùng giao lưu trực tiếp với Cải thiện phát triển chức chat giúp người dùng trò chuyện dễ dàng Thêm tính liên quan đến AI để bắt kịp xu hướng công nghệ Nâng cao bảo mật tài khoản để đảm bảo thông tin người dùng Phát triển ứng dụng nhiều tảng khác để tiếp cận nhiều đối tượng người dùng  Cải thiện nâng cấp giao diện ứng dụng trở nên đa dạng 60 TÀI LIỆU THAM KHẢO Trang web chích thức React Native: https://reactnative.dev/ Trang web thức thư viện hỗ quản lý state: https://mobx-state-tree.js.org/intro/welcome Cách xây dựng cấu trúc source code https://bradfrost.com/blog/post/atomic-web-design/ Trang web thức thư viện hỗ việc giao tiếp với backend: https://axios-http.com/vi/docs/intro Trang web cung cấp tài liệu WebAPI: https://developer.mozilla.org/en-US/docs/Web/API/Window/open Trang web cung cấp giao diện mẫu miễn phí: https://www.figma.com/community/tag/mobile https://freefrontend.com/ Icon Finder API: https://www.iconfinder.com/api-solution Trang web chích thức Expo: https://expo.io/ 61 ... …) để ứng dụng vào xây dựng ứng dụng mạng xã hội chia văn hóa ẩm thực  Hoàn thành ứng dụng chạy tảng Android với đầy đủ yêu cầu chức đề  Ứng dụng có độ hồn thiện cao, có khả đưa vào thực tiễn... trúc mạng nơ-ron xử lý, phân tích tìm giống nhiều vec-tơ đầu vào ix TÓM TẮT ĐỒ ÁN Đồ án với đề tài ? ?Xây dựng ứng dụng mạng xã hội chia văn hóa ẩm thực? ?? tập trung vào nghiên cứu, phân tích thực. .. Postman …) để ứng dụng vào xây dựng ứng dụng mạng xã hội chia văn hóa ẩm thực Cuối cùng, sản phẩm có độ hồn thiện cao, giao diện thân thiện với người dùng, có khả mở rộng Hồn thành ứng dụng chạy