Đồ án SOCIAL DATING

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 SOCIAL DATING ĐỀ TÀI: Giảng viên hướng dẫn: ThS.Trần Anh Dũng Sinh viên thực hiện: Võ Minh Quý 18521316 Ngô Hiếu Tín 18521498 TP Hồ Chí Minh, ngày 30 tháng năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ………………………………………………………………………………………………… …… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… LỜI CẢM ƠN Chúng em xin cảm ơn thầy – Ths Trần Anh Dũng giúp đỡ chúng em trình thực giải đáp thắc mắc đồ án Qua chúng em có đủ kiến thức để hồn thành đồ án Dù cố gắng hoàn thành đề tài phạm vi khả cho phép chắn khơng tránh khỏi thiếu sót Chúng em mong nhận thơng cảm, góp ý tận tình bảo từ Thầy nhằm hồn thiện kiến thức mà nhóm chúng em học tập hành trang để nhóm chúng em thực tiếp đề tài tương lai Chúng em xin chân thành cảm ơn Nhóm thực Thành phố Thủ Đức, tháng 06 năm 2021 Mục lục Chương Giới thiệu đề tài Đề tài 1.1.Bối cảnh chọn đề tài 1.1.1 Giới thiệu Website đặt lịch, hẹn ăn chung website cho phép người c ó ý muốn nhu cầu thỏa mãn ngắn tinh thần ăn bên ngồi mà có họ có nhu cầu ăn uống quán ăn hay m ới có Chính website tạo để liên kết người cô độc chung ý tưởng lại với họp thành mối liên kết Nếu xa mối quan hệ Có thể nói website giống với app hẹn hị có mạng (Tinder, Blue,…) website hướng tới tập trung vào việc xây dựng mối quan hệ từ việc nhỏ khơng có xây dựng mối quan hệ cần người ăn chung để thỏa mãn đam mê ăn uống Mối quan hệ mở rộng nhờ giúp sức công nghệ xu hướng phát triển Ngồi cịn mang lại điểm xấu mối quan hệ " mì ăn liền " Nên nhóm em muốn xây dựng mạng xã hội uy tín chúng em trú trọng vào chủ đề để phát triển mối quan hệ có bền vững 1.1.2 Lí Nhận thấy nhu cầu ăn uống sở thích hầu hết người Bên Trung Quốc có Quán lẩu gõ cửa " gần giống với ý tưởng Và nhận thấy q uán ăn hay có người ăn nên chúng em định chọn đề tài để tăng tính tương tác xây dựng mối quan hệ cho người Tạo thành mơi trường lành mạnh qua kết nối với quán ăn tăng thêm lợi nhuận Website tăng tình cảm người người thơng qua sở thích ăn uống T phát triển cộng đồng Việt Nam thân thiện cởi mở Ngoài với việc kết nối với địa điểm ẩm thực, giúp cho người sử dụng có thêm địa điểm ăn uống dễ dàng tương tác dễ dàng địa điểm ăn uố ng nhờ tương tác website với địa điểm ăn uống Vì vấn đề em rút nên chúng em định chọn "Website đặt lịch, hẹn ăn" để làm Giúp tăng tương tác người kết nối người lại với thơng qua sở thích ăn uống nhu cầu tinh thần ăn chung 1.2.Mục đích đề tài Website hẹn đặt lịch ăn chung có mục đích sau: Thứ nghiên cứu cơng nghệ lập trình: lập trình web theo Client-Side-Rendering, thuật toán gợi ý, Google API, Thứ hai, phát triển website đáp ứng nhu cầu thực tiễn thực tế Giúp người dễ dàng tương tác với thông qua sở thích giản dị ăn uố ng Thứ ba, nhờ việc liên kết với địa điểm ăn uống giải số nhu cầu người chủ ăn uống người ăn uống Giúp tăng doanh thu cho điểm ăn uống 1.3.Đối tượng nghiên cứu - Frontend: Reactjs + Typescript Backend: Nodejs xử dụng thư viện Express để restAPI Database: NoSQL MongoDB Others: + Thư viên Socket.io hỗ trợ xử lý real time + Search engine hộ trợ tìm kiếm + Postman: Giúp việc test quản lý API môt cách dễ dàng Chương Khảo sát trạng Phương pháp lựa chọn khảo sát 1.1.Phương Pháp tham khảo tài liệu mạng: Nhóm thực cách tìm hiểu tham khảo mạng xã hội phổ biến internet từ rút điểm thuận lợi mà ứng dụng mang lại Cho nên dễ dàng kết hợp đặc tính vào sản phẩm loại bỏ thứ bất tiện khỏi ứng dụng 1.2.Người khảo sát: Hầu hết bạn sinh viên người từ độ tuổi 18 – 30 Hiện trạng nghiệp vụ 2.1.Quản lý 2.1.1 Quản lý tài khoản  Mơ tả:  Tình huống: quản lý muốn thêm/ xóa / chỉnh sửa thơng tin tài khoản người dùng  Thực hiện: quản lý thực phần mềm  Sơ đồ trạng:  Bảng mô tả công việc Điều kiện khởi động Vị trí làm việc Tần suất Thời lượng STT Mô tả công việc Yêu cầu xem tài khoản có, chỉnh sửa xóa tài khoản Quản lý muốn thêm, xóa, sửa thơng tin tài Quản lý khoản phút Tiến hành thêm, xóa, sửa thơng tin tài khoản Đã đăng nhập Quản lý phút Cập nhật lưu trữ liệu Sau thay đổi thành công Quản lý phút 2.1.2 Quản lý địa điểm ăn uống  Mô tả:  Tình huống: quản lý muốn đồng ý thêm hàng đợi chủ qn ăn, sửa thơng tin xóa quán ăn  Thực hiện: quản lý thực phần mềm  Sơ đồ trạng:  Bảng mô tả công việc: Điều kiện khởi động Vị trí làm việc xem, chỉnh sửa, xóa quán ăn có Quản lý muốn thêm, xóa, sửa quán ăn có Quản lý phút Tiến hành xem, chỉnh sửa xóa quán ăn Đã đăng nhập Quản lý phút Cập nhật lưu trữ liệu Sau thay đổi thành công Quản lý phút STT Mô tả công việc 2.1.3 Quản lý dịch vụ ưu đãi website  Mô tả: Tần suất Thời lượng  Tình huống: quản lý muốn thêm sửa hay xóa dịch vụ ưu đãi website  Thực hiện: quản lý thực phần mềm  Sơ đồ trạng  Bảng mô tả công việc STT Mô tả cơng việc Điều kiện khởi động Vị trí làm việc Xem, chỉnh sửa, xóa dịch vụ có Tiến hành thêm, xóa, sửa thơng tin dịch vụ Cập nhật lưu trữ liệu Quản lý muốn thêm, xóa, sửa thơng tin dịch vụ Quản lý phút Đã đăng nhập Quản lý phút Sau thay đổi thành công Quản lý phút Tần suất Thời lượng Client – Server mơ hình mạng máy tính bao gồm thành phần máy khách (Client) máy chủ (Server) Trong mơ hình này, server nơi lưu trữ liệu, cài đặt chương trình dịch vụ thực yêu cầu client Client có vai trị gửi u cầu đến server - - Website phía Front-end đóng vai trị máy khách – Client: Với vai trò máy khách, chúng không cung cấp mà sử dụng liệu cung cấp từ máy chủ Một client mơ hình server cho mơ hình khác, tùy thuộc vào nhu cầu sử dụng người dùng Back-end sử dụng môi trường thứ để server front-end kết nối liệu với thông qua tương tác Back-end database Cung cấp liệu cho client mong muốn 2.2.Công nghệ sử dụng - Sử dụng ReactJs kết hợp Typescript để tạo giao diên handle tính FrontEnd Dùng Nodejs để restAPI bên server Sử dụng Mongodb để lưu trữ data Dừng thư viện socket.io để sử lý realtime nhắn tin Thiết kế giao diện 3.1.Danh sách hình STT Màn hình Đăng nhập / Đăng ký Cập nhật thông tin Trang chủ Cài đặt thông tin Chỉnh sửa giới tính Chỉnh sửa sở thích Chỉnh sửa trường Danh sách tin nhắn 3.2.Sơ đồ liên kết hình 3.3.Mơ tả đối tượng hình 3.3.1 Đăng nhập/Đăng ký Hình: hình đăng nhập  Đây hình đăng nhập đăng ký tích hợp chung Nếu user đăng ký tự động tạo tài khoản đăng nhập Còn đăng nhập thực hình Có button trang: - Button Login With Facebook : thực tác vụ đăng nhập thông qua tài khoản facebook Sau click vào có hộp thoại xuất cho phép người dùng nhập tài khoản mật tài khoản facebook để tiến hành đăng nhập đăng ký Hình: Hộp thoại đăng nhập facebook  Button Connect With Google: Thực tác vụ đăng nhập / đăng ký thông qua tài khoản google Khi click vào xuất hộp thoại đăng nhập qua tài khoản google Hình: Hộp thoại đăng nhập google 3.3.2 Cập nhật thơng tin Hình: Màn hình cập nhật thơng tin cá nhân  Đây hình cập nhật thơng tin, xuất user vừa thao tác đăng nhập dạng đăng ký ( đăng nhập lần đầu) qua hình để điền thêm thơng tin cho tài khoản Màn hình gồm thành phần: - Thành phần Label Tên riêng Input Tên riêng user mong muốn thay đổi tên hiển thị website nhập vào tên họ mong muốn Input tên riêng - Thành phần Label Sinh nhật DatePicker: User click vào icon lịch bên góc phải để Khi xuất giao diện lịch để người dùng chọn ngày tháng năm phù hợp - Thành phần Label Gender Group Radio button: User click vào radio button tương ứng giới tính Khi click vào trịn lắp đầy màu hồng - Thành phần Label Địa email Input Email: input khơng thể chỉnh sửa, user kiểm tra - Thành phần Các BoxImage Button Thêm : Đây nơi người dùng tải hình ảnh thân lên website Nhấn vào Thêm media xuất hộp thoại cho user chọn file ảnh sau chọn ảnh xuất Modal để người dùng xem trước ảnh tải lên sau: Hình: Giao diện review ảnh upload  Đây giao diện upload ảnh thành công, Nếu file chọn nhấn vào Button Submit để hồn tất việc tải ảnh lên Ta có kết quả: Hình: Màn hình ảnh sau upload thành cơng  Tiếp theo Label Sở thích Icon Dấu cộng : Khi người dùng click vào Icon cho phép người dùng chọn sở thích thân thơng qua Modal xuất sau: Hình : Modal tất sở thích  Hiển thị Button Sở thích: user nhấn vào Button Button chọn trở thành màu hồng xung quanh  Chọn sở thích khơng vượt q sau hồn thành click vào Button Xong gốc hình để hồn thành thao tác Sau ta có kết hiển thị Icon Hình: Kết sau chọn sở thích  Thành phần Button Tiếp tục: người dùng click vào sau hoàn tất việc thêm thông tin, website tiến hành lưu thông tin vào sở liệu 3.3.3 Trang chủ Hình : Trang chủ  Đây hình trang chủ user thực tính kết nối với dùng khác thơng qua việc quét trái phải Card Thông tin người dùng gồm thành phần: - Icon avatar Label Thơng tin tơi: Hiển thị avatar ngồi người dùng click vào điều hướng sang cài đặt thông tin người dùng - Tab gồm: Matches Messenger: Tab Matches hiển thị user tương tác thích với bạn Tab Messenger hiển thị tin nhắn user khác nhắn cho bạn Khi click vào Tab Messenger Hình: Tab Messenger  Thành phần Card User: tương tác với người dùng, lướt phải trái để thực tác vụ thích khơng thích  Các Button: tải lại, khơng thích, thích ,siêu thích, flash like 3.3.4 Cài đặt thơng tin Hình : Cài đặt thơng tin Đây hình cài đặt thông tin, gồm thành phần:  Gồm Label Label Thông tin: Bao gồm email, số điện thoại, sách,  Các Thanh chỉnh sửa gồm: - Địa điểm: quét bạn bè theo địa điểm - Phạm vi: quét theo khoảng cách - Độ tuổi: quét theo độ tuổi  Ngồi cịn có đăng xuất: Để khỏi tài khoản  Tiếp theo phần giao diện chính: Chỉnh sửa cài đặt cho tài khoản - Các ô BoxImage Button Thêm: giống giao diện tải file có giải thích - Ngoài lăn xuống phần cài đặt xuất Hình : Phần cài đặt tài khoản Hình : Phần cài đặt tài khoản (thêm)  Gồm thành phần : - Label Giới thiệu bạn TextArea: dùng để nhập thêm thông, miêu tả thân - Label Sở thích Arrow Icon: click vào điều hướng sang trang chọn sở thích - Label Chức Danh Input Chức danh: nhập vào chức danh user Label Công ty Input Công ty: nhập vào tên công ty Label Trường Arrow Icon: click vào điều hướng sang trang tìm kiếm chọn trường Label Đang sống Arrow Icon: click vào chuyển sang trang chọn nơi ( phát triển sau ) Label Nhạc hiệu Arrow Icon: click vào chuyển sang trang chọn nhạc Label Giới tính Arrow Icon: click vào chuyển sang trang chọn giới tính 3.3.5 Chỉnh sửa giới tính Hình : Chỉnh sửa giới tính  Trang chỉnh sửa giới tính gồm thành phần: - Label Giới tính Button Xong: Button Xong thực tác vụ lưu thao tác vừa thực - Các Selected Button: click vào để chọn giới tính 3.3.6 Chỉnh sửa sở thích Hình: Chỉnh sửa sở thích  Đây trang chỉnh sửa sở thích thành phần cách thức thực nêu phần cập nhật thông tin user phần thêm sở thích 3.3.7 Chỉnh sửa trường Hình : chỉnh sửa tên trường  Gồm thành phần - Label Tên Trường Button Xong : Button có tác dụng lưu lại tên trường chọn, khỏi hình chỉnh sửa - Input Search : nhập vào tên trường cần tìm kiếm - Màn hình hiển thị kết cho kết theo từ khóa search  Kết : - Các Button tên trường : click vào lưu tên trường cho người dùng Chương Kết Luận Kết đạt - Nắm cách thức làm ứng dụng realtime MERN stack Tốc độ phản hồi ứng dụng tốt Giao diện hoàn thiện, đơn giản, dể sử dụng Hiểu cách thức tổ chức code Cách thức làm việc cho Hạn chế: - Tiến độ làm việc cịn chậm Chưa tích hợp đủ tính mà đề tài yêu cầu Khả teamwork Một số feature chưa làm được: + Quét người dùng khoảng cách Google API + Data crawl cịn hạn chế + Tính tốn tiền + Tính gợi ý người dùng Hướng phát triển - Hoàn thiện chức chưa làm Tích hợp thêm đặt quán ăn Kết nối quán ăn với hai người dung kết nối với Upload ảnh phần chat ... có 1.4.16 Đánh giá qn ăn Tên chức Đánh giá quán ăn Tóm tắt Đánh giá quán ăn thông qua việc cho yêu thích để lại bình luận Dịng kiện Từ trang chi tiết quán ăn Thêm yêu thích cho quán ăn 3 Hoặc... việc chủ quán ăn muốn Chủ xem, chỉnh sửa, xóa quán ăn thôn ting quán ăn Đã đăng nhập Chủ Tần suất Thời lượng phút phút tác Cập nhật lưu trữ Sau thay đổi liệu thành công quán ăn Chủ quán ăn phút... chủ quán muốn tham khảo số liệu Đã đăng nhập Sau thay đổi thành công Chủ quán ăn Chủ quán ăn Chủ quán ăn lượng phút phút phút 2.3.4 Quản lý viết (quảng cáo)  Mô tả:  Tình huống: chủ quán thêm