Đề tài mạng xã hội đồ ăn, thức uống

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO CUỐI KỲ ĐỒ ÁN ĐỀ TÀI : MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Nhóm sinh viên thực hiện: Hồ Quang Linh – 19521750 Nguyễn Ngọc Thịnh – 19522283 Tp Hồ Chí Minh, tháng 12 năm 2020 NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC I Giới thiệu Lý chọn đề tài Mục đích Phạm vi Người dùng 5 Phương pháp nghiên cứu II Cơ sở lý thuyết & tổng quan công nghệ JavaScript MongoDB ReactJS a b Kiến thúc hệ thống Kiến trúc hệ thống Mơ hình kiến trúc hệ thống Mô tả chi tiết thành phần hệ thống III Phân tích thiết kế ứng dụng 11 Yêu cầu nghiệp vụ 11 Use case 11 2.1 2.2 2.3 2.4 Use case tổng quát 11 Use case đăng nhập 11 Use case quản lý đăng 12 Use case tin nhắn 13 Activity diagram 14 3.1 3.2 3.3 3.4 3.5 • • • • • • • • Các chức 20 Đăng nhập, đăng ký tài khoản cho khách hàng: 20 Thanh tìm kiếm 20 Hiện thị header 20 Hiển thị text box đăng 20 Hiển thị đăng 20 Hiển thị người dùng gợi ý để follow 20 Màn hình explore 20 Hiển thị thông tin cá nhân (ảnh đại diện, mật khẩu, sđt, địa chỉ, email,…) 21 Sơ đồ lớp 22 5.1 5.2 5.3 IV Đăng nhập/ Đăng ký 14 Tạo đăng 15 Chỉnh sửa đăng 16 Chỉnh sửa thông tin cá nhân 17 Nhắn tin 18 Sơ đồ lớp (mức phân tích) 22 Danh sách lớp đối tượng quan hệ 22 Mô tả chi tiết đối tượng 22 Tổng kết 30 Bảng phân chia công việc 31 Nhận xét 31 Kết sản phẩm 31 Tài liệu tham khảo 32 I Giới thiệu Lý chọn đề tài Sự phát triển mở rộng quy mô mạng xã hội lớn dần lên, phù hợp với nhu cầu xã hội Việc chia sẻ thông tin, kết bạn, nhắn tin, trao đổi công việc ngày càngphổ biến mạng xã hội Ngày nay, với phát triển công nghệ thông tin mà điệnthoại di động sử dụng rộng rãi quan, trường học, … giúp cho việc giao lưu kết bạn tốt Việc sử dụng điện thoại vào việc tham gia yêu cầu cầnthiết nhằm xóa bỏ phương pháp lạc hậu lỗi thời gây tốn nhiều mặt Từ lý nhóm chúng em định bắt tay vào đề tài ứng dụng Mạng xã hội đồ ăn, thức uống gắn kết, kết nối người khắp nơi với chung sở thích đam mê Trong đồ án mà chúng em xây dựng ứng dụng mạng xã hội, kết nối người vớichung sở thích, chia sẻ trải nghiệm ăn uống Phần mềm giúp người quán lý nắm bắt chia sẻ đồ ăn, thức uống yêu thích địa điểm hay nấu chế biến Mục đích • Nghiên cứu tổng quan nghiệp vụ, hoạt động, quy trình mạng xã hội • Nghiên cứu sở lý thuyết việc phát triển ứng dụng mạng xã hội • Xây dựng ứng dụng mạng xã hội, kết nối người đáp ứng nhu cầu thực tế Phạm vi Quy trình quản lý thành viên, tài khoản, tin nhắn nhóm cá nhân, quản lý thông báo câu lạc Các vấn đề cần giải ứng dụng, ví dụ như: • Theo dõi, quản lý nội dung đăng • Chức upload ảnh • Chức bình luận, react, share, chỉnh sửa đăng, comment • Chức video call Người dùng MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG Ứng dụng hướng phía người dùng giúp người dùng tiết kiệm nhiều công sức thời gian, mang lại nhiều thông tin đồ ăn, thức uống Phương pháp nghiên cứu • Phương pháp hệ thống, phương pháp tư • Phương pháp phân tích, tổng hợp • Phương pháp tin học hóa cơng cụ lập trình để giải vấn đề II Cơ sở lý thuyết & tổng quan công nghệ JavaScript Giới thiệu: - JavaScript theo phiên ngôn ngữ thông dịch phát triển bởiBrendan Eich hãng truyền thông Netscape JavaScript xuất lầnđầu tháng năm 1995 với tên gọi ban đầu Mocha, sau đổi tên thành LiveScriptvà cuối JavasScript - Phiên JavaScript ECMAScript ECMAScript phiên chuẩn hóa JavaScript, quy chuẩn để sử dụng JavaScript tốt cho lập trình viên Phiên ECMAScript quy chuẩn sử dụng rộng rãi lập trình viên sử dụng JavaScript dành cho phát triển sản phẩm framework Lí sử dụng đồ án: - JavaScript ngôn ngữ phổ biến việc phát triển ứng dụng web, ứng dụng di động, làm việc với server, thông qua việc sử dụng thư viện,framework mã nguồn mở - Vì JavaScript sử dụng việc phát triển ứng dụng phía khách hàngvàsử dụng để làm việc với server nên nhóm đồ án sử dụng chung ngơnđể phát triển dự án hỗ trợ tốt - JavaScript dùng để phát triển nhiều thư viện, framework mã nguồn mở,vì cộng đồng sử dụng JavaScript lớn nhóm thực đồ án dễ dàng việc phát triển đồ án MongoDB MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG Giới thiệu: - MongoDB hệ quản trị sở liệu mã nguồn mở, CSDL thuộc NoSqlvà hàng triệu người sử dụng - NoSQL dạng CSDL mã nguồn mở viết tắt bởi: NoneRelational SQL hay có nơi thường gọi Not-Only SQL - MongoDB database hướng tài liệu (document), liệu lưu trữ document kiểu JSON thay dạng bảng CSDL quan hệ nên truy vấn nhanh - So với RDBMS MongoDB collection ứng với table, document ứng với row, MongoDB dùng document thay cho row RDBMS - Các collection MongoDB cấu trúc linh hoạt, cho phép dữliệu lưu trữ không cần tuân theo cấu trúc định - Thông tin liên quan lưu trữ để truy cập truy vấn nhanh thôngqua ngôn ngữ truy vấn MongoDB - MongoDB cho phép việc đọc, ghi liệu cách nhanh chóng hệ quản trị sở liệu thuộc NoSQL, MongoDB phù hợp với ứng dụng Chat realtime hướng đồ án - NodeJS có thư viện hỗ trợ tốt cho việc giao tiếp, truy vấn với MongoDB - Ngoài ra, liệu MongoDB lưu trữ theo dạng JSON hay BSON rấtquen thuộc phổ biến với lập trình viên web ReactJS Giới thiệu: - ReactJS framework tạo Facebook - Hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại - ReactJS sử dụng Facebook production, mạng xã hội Instagram viết hoàn toàn React Lí sử dụng đồ án: MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG - ReactJS cho phép lập trình viên viết ứng dụng trực tiếp Javasript - Dễ tiếp cận người kiến thức lập trình Javascript - Do react native cung cấp cấu trúc dựa component, tức componentlà mảnh ghép ghép lại thành ứng dụng Mỗi component tự định render logic riêng bên - Có thể tái sử dụng lại component nơi - Bộ cơng cụ phát triển cho lập trình yếu tố quan trọng chọn tảng phát triển SocketIO Giới thiệu: - Để xây dựng ứng dụng realtime cần sử dụng socketio - Socketio giúp bên địa điểm khác kết nối với nhau, truyền liệu thông qua server trung gian - Socketio sử dụng nhiều ứng dụng chat, game online, cập nhật kết trận đấu xảy ra, Lí sử dụng đồ án: - Chức gọi điện ứng dụng cần cơng cụ giúp dự án chạy realtime - SocketIO hỗ trợ cài trực tiếp server nodejs dễ dàng sử dụng server client Kiến thúc hệ thống a Kiến trúc hệ thống • Ứng dụng xây dựng MERN STACK • Sử dụng API để kết nối với MongoDB b Mơ hình kiến trúc hệ thống - Kiến trúc hệ thống theo mơ hình Client – Sever + Tầng Client (là máy tính (Host)): Tầng có khả nhận thông tin sửdụng dịch vụ cụ thể từ nhà cung cấp dịch vụ (Server) + Tầng Sever: Tầng cung cấp thông tin (dữ liệu) quyền truy cập vào cácdịch vụ cụ thể MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG + Tầng Web (sẽ kết nối với tầng Sever & Client): Thành phần giao diện củachương trình tương tác với người sử dụng Hình Mơ hình Client-Server Mơ tả chi tiết thành phần hệ thống • Mơ hình client-server mơ hình tiếng mạng máy tính, áp dụng rộng rãi mơ hình trang web có Ý tưởng mơ hìnhnày máy (đóng vài trị máy khách) gửi u cầu (request) để máychủ (đóng vai trị người cung ứng dịch vụ), máy chủ xử lý trả kết vềcho máy khách Trong mơ hình này, chương trình ứng dụng chia thành thành phần: Server Client Client hay gọi máy khách, bao gồm máy tính thiết bị điện tử nói chung Server hay cịn gọi máy chủ, nơi cài đặt chương trình dịch vụ lưu trữ tài nguyên MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG Hình Chi tiết thành phần hệ thống Việc yêu cầu máy khách, đáp ứng, xử lý, phản hồi máy chủ tạo thành dịch vụ Dịch vụ hoạt động web nên gọi dịch vụ web(hay web service) Ngoài ra, việc giao tiếp Client với Server phải dựa giao thức chuẩn Các giao thức chuẩn sử dụng phổ biến : giao thức TCP/IP, giao thức SNA IBM, OSI, ISDN, X.25 hay giao thức LAN-to-LAN NetBIOS • Client Khi nói đến Client (khách hàng), có nghĩa người hay tổ chức sử dụng dịch vụ cụ thể Trong giới kỹ thuật số tương tự vậy.Client máy tính (Host), tức có khả nhận thơng tin sử dụng mộtdịch vụ cụ thể từ nhà cung cấp dịch vụ (Server) • Sever Tương tự vậy, nói đến Server có nghĩa máy chủ hay phương tiện phục vụ dịch vụ Trong lĩnh vực cơng nghệ Server máy tính từ xa Nó cung cấp thơng tin (dữ liệu) quyền truy cập vào dịch vụ cụ thể Vì vậy, mơ hình Client Server, Client đối tượng u cầu thứ Server phục vụ nó, miễn có mặt cơsở liệu MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 10 3.4.2 Bảng mô tả trạng thái STT Trạng thái Trang cá nhân Nhấn button Edit Profile Ý nghĩa Chuyển sang trang cá nhân Click vào Edit Profile trang cá nhân Nhập thông tin chỉnh sửa Thông tin không hợp lệ Nhập thông tin cá nhân cần chỉnh sửa Thông tin chỉnh bị sai Chỉnh sửa thông tin thành cong Xác nhận chỉnh sửa thông tin Xử lý liên Ghi quan Cần phải đăng nhập Sau ấn Save Hệ thống thơng báo chỉnh sửa thơng tin không thành công Hệ thống thông báo chỉnh sửa thông tin thành công 3.5 Nhắn tin 3.5.1 Sơ đồ trạng thái MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 18 Hình 11 Sơ đồ trạng thái nhắn tin 3.5.2 Bảng mô tả trạng thái STT Trạng thái Chọn người nhắn tin Soạn tin nhắn MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG Ý nghĩa Xử lý liên Ghi quan Chọn người Cần chuyển nhắn tin qua hình messager Sau chọn hội thoại nhập vào tìm kiếm người muốn nhắn tin Nhập nội dung cần gửi Nhập nội dung sau nhấn biểu tượng gửi 19 Thông tin không hợp lệ Gửi tin nhắn thành công Thông tin chưa nhập không hợp lệ Xác nhận gửi tin nhắn Sau ấn Save Hội thoại xuất tin nhắn vừa nhập Các chức • Đăng nhập, đăng ký tài khoản cho khách hàng: - Khi khởi động ứng dụng hiển thị giao diện đăng nhập cho người dùng,trong trường hợp người dùng chưa có tài khoản nhấn vào nút đăng ký để qua hình đăng ký tạo tài khoản - Nếu có tài khoản vào hình app • Thanh tìm kiếm - Thanh địa xuất đầu hình có chức tìm kiếm người dùng • Hiện thị header - Thanh header gồm có search , trang chủ, tin nhắn , thơng báo profile • Hiển thị text box đăng - Người dùng nhập nội dung đăng tải ảnh kèm theo • Hiển thị đăng - Màn hính hiển thị đăng người follow Người dùng like, share, lưu comment viết • Hiển thị người dùng gợi ý để follow - Hiển thị người dùng gợi ý, bên cạnh nút follow • Màn hình explore - Mục tìm kiếm, để tìm kiếm tên nhóm, tên kiện MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 20 - Hiển thị thẻ kiện diễn - Nhấn vào thẻ kiện đó, dẫn tới trang chi tiết kiện • Hiển thị thông tin cá nhân (ảnh đại diện, mật khẩu, sđt, địa chỉ, email,…) - Ở trang home, chọn ảnh góc bên phải hình để tới trang thôngtin cá nhân - Trang thông tin cá nhân hiển thị nhóm tham gia, số lượngnhóm tham gia, button chỉnh sửa, đăng xuất - Chọn icon chỉnh sửa, để thay đổi thông tin cá nhân - Chọn button logout để đăng xuất MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 21 Sơ đồ lớp 5.1 Sơ đồ lớp (mức phân tích) Hình 12 Sơ đồ lớp (mức phân tích) 5.2 Danh sách lớp đối tượng quan hệ STT Tên lớp/quan hệ Ý nghĩa/Ghi User Người dùng Post Bài đăng Comment Bình luận Notify Thơng báo Conversation Cuộc trị chuyện Message Tin nhắn 5.3 Mơ tả chi tiết đối tượng 5.3.1 User 5.3.1.1 Danh sách thuộc tính MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 22 STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi email String public Email user String Public Tên đăng nhập password String public Mật fullname String public Tên người dùng imageUrl Number public Đường dẫn ảnh address String public Địa mobile String public Số điện thoại gender String public Giới tính birthday Date Public Ngày sinh 10 following userID Public Người theo dõi 11 follower userID Public Người theo dõi 12 saved postID Public Bài đăng lưu 13 story String Public Giới thiệu Ràng buộc Ý nghĩa/ghi 5.3.2 Post STT Tên thuộc tính Loại Image String public Đường dẫn ảnh đăng Likes Array public Những người like đăng Comment String public Bình luận User userID public Người đăng Loại Ràng buộc Ý nghĩa/ghi 5.3.3 Conversation STT Tên thuộc tính Recipients Array public Những người nhận Text String public Văn Media Array public Phương tiện Call Object public Cuộc gọi MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 23 5.3.4 Message STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi Conversation String public Mã hội thoại Sender String public Người gửi Recipient userID public Người nhận Text String public Văn Media Array public Phương tiện Call Object public Cuộc gọi Ràng buộc Ý nghĩa/ghi 5.3.5 Comment STT Tên thuộc tính Loại User String public Người bình luận Content String public Nội dung Tag Object public Gắn thẻ Reply String public Trả lời Likes Array public Người thích bình luận postId postID public Người đăng Ràng buộc Ý nghĩa/ghi 5.3.6 Notify STT Tên thuộc tính Loại User String public Người tạo thông báo Recipients Array public Những người nhận thông báo Url String public Đường dẫn Text String public Tiêu đề thông báo Content String public Nội dung thông báo Image String public Đường dẫn ảnh Cài đặt demo giải thích chức 6.1 Cài đặt • Các thiết bị có hỗ trợ duyệt web trình duyệt Edga, Firefox, Chrome, Safari, v.v MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 24 6.2 Demo giải thích chức 6.2.1 Đăng nhập - Sau chạy chương trình lên ta có hình đăng nhập, người dùng đăngnhập tài khoản mật đăng ký Khi đăng nhập thành cơngchương trình hiển thị tác vụ thực tùy theo quyền mà tài khoản đăng nhập có Hình 13 Màn hình đăng nhập - Email: tên đăng nhập vào hệ thống - Password: mật truy cập - Nút Log In: thực đăng nhập vào hệ thống - Nút Register Now: chuyển trang đăng kí MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 25 6.2.2 Đăng ký (Khách hàng tạo tài khoản) Hình 14 Màn hình đăng kí - Bạn quay lại hình đăng nhập nhấn nút “Login Now” cótài khoản - Full name: tên người dùng - User Name: tên đăng nhập Email address: tài khoản đăng nhập Password: mật Confirm password: xác nhận mật Nút Register : chọn để tạo tài khoản - Nút Sign In : chọn để quay trang đăng nhập 6.2.3 Trang Mơ tả: Trong hình home hiển thị đăng từ người mà người dùng follow, gợi ý người dùng khác header tìm kiếm chuyển qua trang tuỳ chỉnh khác MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 26 Hình 15 Màn hình trang Home - Thanh header: • Enter to Search: tìm kiếm người dùng khác • Button Home: trang khác chuyển trang chủ • Button Message: chuyển sang trang tin nhắn • Button Notify: hiện thơng báo Hình 15a Notify • Button Profile: tuỳ chọn Profile/Dark mode/ Logout MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 27 Hình 15b Profile menu - Text box đăng bài: nhấn vào chức đăng viết, người dùng viết nội dung tải ảnh - Nút tuỳ chọn trong: hiển thị tuỳ chọn copy link viết - Các chức khác viết like, comment, chia sẻ, lưu viết hay vào trang người đăng cách nhấn vào tên người dùng avatar người dùng viết 6.2.4 Trang tin nhắn Hình 16 Trang tin nhắn MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 28 - Sau nhấn nút Message Header chuyển sang trang nhắn tin - Enter to search: Search người dùng để nhắn tin, tìm người mà người dùng follow - Ô hội thoại: nhấn vào hội thoại người dùng cần xem - Sau nhấn vào người để nhắn tin ô hội thoại, tin nhắn bên phải - Nút Call: chức gọi điện - Nút Video Call: chức gọi video call Nút Xoá: xoá hội thoại Nút Icon: icon cho soạn tin nhắn Nút Ảnh: chọn ảnh để gửi Nút Gửi: gửi tin nhắn soạn 6.2.5 Trang Profile Hình 17 Trang Profile Mơ tả: Màn hình hiển thị thơng tin gồm thơng tin cá nhân đăng, lưu kèm chức liên quan - Button Edit Profile: người chỉnh sửa thơng tin, sau ấn Save để lưu MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 29 Hình 18 Chỉnh sửa thơng tin cá nhân - Button Post/ Save: chuyển sang đăng/ lưu tương ứng - Sau ấn vào viết chuyển hướng trang sang viết Hình 19 Bài viết IV Tổng kết MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 30 Bảng phân chia công việc Tên thành viên Hồ Quang Linh Nguyễn Ngọc Thịnh Mssv Công việc thực 19521750 Thiết kế Database, 19522283 Code Backend, Frontend Thiết kế Database, Code Backend, Frontend Đóng góp 100% 100% Nhận xét a Ưu điểm - Hệ thống thực chức ứng mạng xã hội Thời gian phản hồi ứng dụng tương đối nhanh - Giao diện phù hợp với xu hướng UI/UX - Hệ thống dễ dàng mở rộng thông qua việc phát triển module nhỏ b Khuyết điểm - Việc tích hợp thư viện mã nguồn mở khiến ứng dụng khơng hồn tồnổn định cần update theo thời gian thư viện mã nguồn mở mở rộng - Các chức lạ độc đáo khơng có nhiều, khó thu hút người dùng - Cơ sở liệu thiết kế rời rạc, dễ dàng cho việc mở rộng gây cản trởhơn cho việc thống kê tổng hợp thông tin Kết sản phẩm Sau thời gian thực đề tài, chương trình hồn thành đạt số kết sau: - Hiểu rõ quy trình ứng dụng mạng xã hội - Xây dựng thành công ứng dụng mạng xã hội, đáp ứng nhu cầu người dùng - Giao diện ứng dụng thân thiện, dễ sử dụng, - Hiểu nắm kiến thức mơ hình Client - Server, MERN Stack Luyện tập Javascript, ReactJS, SocketIO - Link source code: https://github.com/HoQuangLinh/FoodSocialNetwork MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 31 Tài liệu tham khảo - Bách khoa tồn thử mở: https://vi.wikipedia.org/wiki/Wikipedia - Trang web thức tổng hợp thư viện mã nguồn mở lập trìnhviên: https://www.npmjs.com/ - Tài liệu mongoDB https://www.mongodb.com/ - Trang web hướng dẫn lập trình web tổ chức W3C – tổ chức World WideWeb: https://www.w3schools.com/ - Trang web thức React Native: https://reactjs.org/ - Trang web cung cấp tài liệu WebAPI: https://developer.mozilla.org/en-S/docs/Web/API/Window/open - Trang web thảo luận dành cho lập trình viên https://stackoverflow.com/ MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 32 ... 3.5.1 Sơ đồ trạng thái MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 18 Hình 11 Sơ đồ trạng thái nhắn tin 3.5.2 Bảng mô tả trạng thái STT Trạng thái Chọn người nhắn tin Soạn tin nhắn MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG... nhập MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 11 Hình Use case đăng nhập 2.3 Use case quản lý đăng Hình Use case quản lý đăng MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 12 2.4 Use case tin nhắn Hình Use case tin nhắn MẠNG... em định bắt tay vào đề tài ứng dụng Mạng xã hội đồ ăn, thức uống gắn kết, kết nối người khắp nơi với chung sở thích đam mê Trong đồ án mà chúng em xây dựng ứng dụng mạng xã hội, kết nối người