Xây dựng mạng xã hội chia sẻ khoảng khắc cho những người yêu động vật

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG THUẬT PHẦN MỀM Trần Diệu Bảo Trân – 17521150 Đoàn Thế Duy - 17520391 KHĨA LUẬN TỐT NGHIỆP Xây dựng mạng xã hợi chia sẻ khoảng khắc cho những người yêu động vật Social Networking for Animal Lovers KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS Nguyễn Thị Thanh Trúc TS Nguyễn Hà Giang TP HỒ CHÍ MINH, 2021 CỘNG HÒA XÃ HỘI CHỦ NGHĨ VIỆT NAM ĐẠI HỌC QUỐC GIA TP.HCM Độc lập – Tự – Hạnh phúc TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Ngày THÔNG TIN Tháng Năm 2021 NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN/PHẢN BIỆN) Tên khóa luận: Xây dựng mạng xã hội chia sẻ khoảnh khắc cho những người yêu đợng vật Nhóm SV thực hiện: Trần Diệu Bảo Trân Đồn Thế Duy 17521150 17520391 Cán bợ hướng dẫn/phản biện: ThS Nguyễn Thị Thanh Trúc TS Nguyễn Hà Giang Đánh giá Khóa luậ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: - Đánh giá chung: Khóa ḷn đạt/khơng đạt u cầu mợt khóa ḷn tốt nghiệp kỹ sư/, xếp loại Giỏi/ Khá/ Trung bình Điểm sinh viên: Đồn Thế Duy:……… /10 Trần Diệu Bảo Trân:……… /10 Người nhận xét (Ký tên ghi rõ họ tên) ĐẠI HỌC QUỐC GIA TP.HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨ VIỆT NAM TRƯỜNG ĐẠI HỌC CƠNG NGHỆ Đợc lập – Tự – Hạnh phúc THÔNG TIN Ngày Tháng Năm 2021 ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Xây dựng mạng xã hội chia sẻ khoảnh khắc cho những người yêu động vật Cán bộ hướng dẫn : ThS Nguyễn Thị Thanh Trúc - TS Nguyễn Hà Giang Sinh viên thực hiện: Trần Diệu Bảo Trân Đoàn Thế Duy 17521150 17520391 Nội dung đề tài: Đặt vấn đề Ngày nay, mạng xã hợi khơng cịn xa lạ với ngày phát triển mạnh mẽ Có thể nói nhu cầu chia sẽ, kết nối giữa người với người ngày tang mang đến cho người sử dụng mối quan hệ giúp ta giải tỏa cảm xúc… Hiện Facebook một những mạng xã hội lớn để người sử dụng kết nối bạn bè cợng đồng có mối quan tâm Chính mợt mạng xã hợi lớn vậy khó tìm những người bạn thật sự có chung sở thích tìm viết liên quan tới những mà ta quan tâm Ví dụ: mợt người u thích thú cưng họ muốn hịa vào mợt cợng đồng những người u thích thú cưng mà khơng bị chi phối những viết không liên quan khác Chính vậy Mạng xã hợi Petlove dành riêng cho những người yêu thích thú cưng giúp cho họ dễ dàng kết nối với những người bạn có đặc điểm chung u đợng vật Phạm vi đề tài 2.1 Phạm vi công nghệ • NodeJS (Back-end) • EJS engine (view) • AJAX (client) • MongoDB (database) 2.2 Phạm vi đối tượng Người dùng đợ tuổi có máy tính điện thoại thơng minh, có nhu cầu tìm kiếm những người bạn có chung sở thích tìm kiếm những hình ảnh thú vị giới dộng vật Mô tả yêu cầu đề tài 3.1 Các yêu cầu mặc chức năng: • • • • • • • • • • • • • Đăng kí tài khoản để sử dụng mạng xã hội Đăng nhập Thay đổi mật Cập nhật trang cá nhân (thông tin cá nhân, avatar, ảnh bìa) Viết Like bài, comment, share Kết bạn (gửi yêu cầu, hủy yêu cầu, chấp nhận, từ chối, hủy kết bạn) Chat với bạn bè Tìm kiếm người dùng, page, group Gợi ý bạn bè, page mới, group Tạo group thảo luận, bàn bạc Tạo page Load newfeed dựa viết user, friend, page đã like group đã join  3.2 Các yêu cầu phi chức năng: • Website chạy ổn định • Giao diện thân thiện, dể sử dụng • Thiết kế hợp xu hướng (trendy) • Có responsive cho thiết bị di đợng • Database có khả mở rộng, truy suất nhanh Nội dung thực 4.1 Cơng nghệ sử dụng • Front-end: EJS Engine Template : một template dựa HTML, CSS làm giao diện; AJAX dùng xử lí tương tác giữa người dùng với hệ thống • Back-end: NodeJS • Database: MongoDB 4.2 Lựa chọn cơng nghệ Về phần ngơn ngữ lập trình, nhóm chọn cơng nghệ liên quan đến Javascript nhằm tạo một trang web với một ngôn ngữ Javascript ngơn ngữ lập trình chun lập trình ứng dụng web hướng người dùng, quan tâm đến tương tác, dễ học có cợng đồng lập trình viên phong phú Về phần sở dữ liệu, với mục đích đề ban đầu, ưu tiên mặt tốc độ truy xuất khả mở rợng cực kì linh hoạt, MongoDB sự lựa chọn nhóm Qua tìm hiểu Internet, đáp ứng khả “thời gian thực” website, việc sử dụng No-SQL thực sự cần thiết Kết mong đợi Tạo một trang web kết nối những người có đam mê đợng vật, chia sẽ, lưu giữ những khoảnh khắc đẹp đáng nhớ Kế hoạch thực hiện: STT Nợi dung Thời gian Phân tích đề tài, yêu cầu, đề xuất danh sách chức Tìm hiểu HTML, CSS, Javascript, 15/03/2021 - 1/4/2021 Node JS Tìm hiểu JWT (Json Web Token), EJS 15/03/2021 - 1/4/2021 Template Xây dựng cấu trúc Database 15/03/2021 - 1/4/2021 Tìm hiểu chức mợt mạng xã 15/03/2021 - 1/4/2021 hội Dựng UI Mockup 15/03/2021 - 1/4/2021 Tìm hiểu Realtime Chat, SocketIO cho 8/4/2021 - 5/5/2021 tính Chat Notification Thiết kế giao diện trang wed người dùng 8/4/2021 - 5/5/2021 Thiết kế giao diện web Admin 8/4/2021 - 5/5/2021 Tạo kết nối database dùng MongDB 8/4/2021 - 5/5/2021 Compass MongDB Atlas 10 Hiện thực backend viết API cho trang 8/4/2021 - 5/5/2021 web 11 Gắn backend vào layout cho tính 8/4/2021 - 5/5/2021 12 Responsive, optimize performance 8/4/2021 - 5/5/2021 13 Kiểm tra, fix lỗi, kiểm thử 8/4/2021 - 5/5/2021 14 Triển khai môi trường Internet 8/4/2021 - 5/5/2021 15 Tiếp thu feedback, cải thiện website 8/4/2021 - 5/5/2021 16 Thu thập phân tích dữ liệu, tối ưu hiển thị 15/03/2021 - 1/4/2021 thông tin trang người dùng Xác nhận CBHD TP.HCM, ngày….tháng ….năm 2021 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Đầu tiên, chúng em xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công nghệ phần mềm đã giúp cho nhóm tác giả có những kiến thức bản làm tảng để thực đề tài Đặc biệt, chúng em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới Ths Nguyễn Thị Thanh Trúc Ts Nguyễn Hà Giang đã hướng dẫn, hỡ trợ nhóm hồn thành đồ khóa ḷn tốt nghiệp Trong thời gian mợt học kỳ thực đề tài, nhóm tác giả đã vận dụng những kiến thức tảng đã tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu những kiến thức Từ đó, nhóm vận dụng tối đa những đã thu thập để hồn thành mợt báo cáo đồ án tốt Tuy nhiên, trình thực hiện, chúng em khơng tránh khỏi những thiếu sót Chính vậy, chúng em giả mong nhận những sự góp ý từ phía Thầy Cơ nhằm hoàn thiện những kiến thức mà chúng em đã học tập hành trang để nhóm tác giả thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý Thầy Cô! MỤC LỤC Chương Mở đầu DANH MỤC HÌNH Hình 2.1 - NodeJS (Nguồn: https://jobpro.vn/bai-viet/node-js-la-gi/) Hình 2.2– Event-driven Hình 2.3 – Cách hoạt đợng mongoDB Hình 2.4 – Cách hoạt đợng ExpressJS Hình 2.5 – Cách hoạt đợng JWT Hình 2.6 – Sự tương tác socket.io Hình 2.7 socket.io hoạt động ChatApp profileImage Ảnh đại diện account bình luận Bảng 4.32 – class comment object 4.4.2.11 STT Tên Id Content User profileImage Bảng Reply object Kiểu String String string Ràng buộc Ý nghĩa Mỡi reply có id riêng Nợi dung phản hồi Account phản hồi Ảnh đại diện account phản hồi Bảng 4.33 – class reply object 4.5 Bảng ràng buộc ID BR-1 Rule Definition Bài viết User khác hiển thị lên newfeed user đã có kết bạn BR-2 Username nhất, thay đổi BR-3 E-mail đăng kí BR-4 Chỉ có admin group có quyền duyệt yêu cầu BR-5 Admin khơng thể rời group BR-6 Chỉ có member có quyền post group BR-7 Chỉ có chủ page có quyền post page BR - Cả user chat với đã kết bạn Bảng 4.34 – Các điều kiện ràng buộc 4.6 Giao diện 92 4.6.1 Đăng nhập Tiến hành đăng kí tài khoản mới, sau đăng nhập tài khoản Kết quả: Thơng tin đăng kí cập nhật lên server đăng nhập thành công Hình 4.37 – Giao diện đăng nhập 4.6.2 Đăng ký thành viên Hình 4.38 – Giao diện đăng ký thành viên 93 4.6.3 Newfeed (trang chủ ) Màn hình trang chủ thoe chiều hướng tối giản phù hợp xu hướng đại, hiển thị đầy đủ tính hỗ trợ người dùng dễ dàng thực thao tác sử dụng Hình 4.39 – Giao diện trang chủ 4.6.4 Đăng post Người dùng viết mợt blog chia hình ảnh, video Kết quả: Bài đăng hiển thị sau người dùng nhấn nút Post Các user khác tương tác cách nhấn Like, comment chia 94 Hình 4.40 – Giao diện đăng post 4.6.5 Thông tin chi tiết user Thông tin bản đầu tạo chưa đầy đủ, người dùng vào Edit Profile để thay đổi, cập nhật thông tin cá nhân Kết quả: Thông tin cá nhân người dùng cập nhật đầy đủ hiển thị xác thơng tin sau người dùng hồn tất việc cập nhật Hình 4.41– Giao diện thông tin user 95 4.6.6 Tạo trang Tạo trang với đầy đủ thông tin Kết quả: Trang người dùng cần nhấn Like hoạt động trang hiển thị lên newfeed người dùng Hình 4.42 – Giao diện tạo trang 4.6.7 Danh sách page đã like Nhấn vào icon Page menu phía Kết quả: Hiển thị danh sách page mà người dùng đã theo dõi 96 Hình 4.43 – Giao diện danh sách page 4.6.8 Trang fanpage Người quản lý trang (admin) tiến hành đăng Kết quả: Ai thấy tương tác với đăng trang Hình 4.44 – Giao diện trang 4.6.9 Tạo nhóm Tạo nhóm với đầy đủ thông tin 97 Kết quả: Trang người dùng cần nhấn Join hoạt đợng nhóm hiển thị lên newfeed người dùng Tuy nhiên có người tham gia vào nhóm xem hoạt đợng tương tác Hình 4.45 – Giao diện tạo nhóm 4.6.10 Danh sách nhóm đã tham gia Nhấn vào icon Nhóm menu phía Kết quả: Hiển thị danh sách nhóm mà người dùng đã tham gia Hình 4.46 – Giao diện tạo danh sách nhóm 98 4.6.11 Kết bạn Người dùng vào danh sách bạn bè mục Friends Kết quả: Hiển thị danh sách lời mời kết bạn Nhấn: • • Accept: trở thành bạn bè tương tác với Unfriend: hủy bỏ việc kết bạn, bây giờ người bạn khơng theo dõi người dùng nữa Hình 4.47 – Giao diện tạo danh sách gửi lời kết bạn 4.6.12 Chat Vào mục inbox, hình hiển thị danh sách bạn bè Người dùng chọn người mà muốn chat Kết quả: Hiển thị khung chat để hai người dùng chat với Tốc độ phản hồi tương đối nhanh, không xảy tình trạng bị delay nhiều 99 Hình 4.48 – Giao diện khung chat 4.6.13 Tìm kiếm bạn bè Tim kiếm bạn bè, người dùng nhập key word phần tìm kiếm Cách khác, người dùng vào mục Explore People để mở rộng mối quan hệ Kết quả: Danh sách bạn bè đề xuất dựa theo keyword đã tìm q khứ đợ tương tác thành viên chung nhóm Hình 4.49 – Giao diện tìm kiếm bạn bè 100 4.6.14 Trang cá nhân Trang cá nhân nơi quãn lý đăng Kết quả: Chỉ hiển thị đăng người dùng khác đăng vào trang Khơng hiển thị đăng trang khác hợi nhóm Hình 4.50 – Giao diện trang cá nhân 4.6.15 Thay đổi mật Người dùng cung cấp thông tin để thay đổi mật bao gồm : mật cũ, mật mới, xác nhận mật Kết quả: Thay đổi thành công người dùng nhập mật tại Mật trùng với mật tại 101 Hình 4.51 – Giao diện thay đổi mật 102 Chương Kết luận hướng phát triển 5.1 Kết luận Trong vòng gần tháng thực hiện, chúng em đã ứng dụng kiến thức học trường vào đồ án Đó thực xuyên suốt qua bước xây dựng một phần mềm, bao gồm việc phát biểu tốn, xác định u cầu, phân tích, đặc tả yêu cầu phần mềm, thiết kế dữ liệu, thiết kế mợt phần giao diện, viết mợt số hình ứng dụng Ngoài ra, chúng em đã rèn luyện cách tiếp cận công nghệ một cách nhanh Trong q trình thực hiện, nhóm chúng em đã thực đầy đủ bước mợt qui trình phát triển phần mềm bao gồm : - Phân tích yêu cầu đề - Thiết kế hệ thống, ứng dụng - Lập trình ứng dụng sử dụng NodeJS mongoDB - Kiểm thử đảm bảo ứng dụng không phát sinh lỗi - Triển khai ứng dụng môi trường Internet Kết quả đạt chúng em đã xây dựng gần hồn thiện ứng dụng mợt mạng xã hợi vốn có Cung cấp giao diện đơn giản, hợp mắt người nhìn phù hợp với xu hướng tối giản Các chức có mạng xã hợi thú cưng có sau: - Đăng ký thành viên Đăng nhập / Đăng xuất Hiển thị thơng tin người dùng Tìm kiếm thơng tin Tạo đăng Like / Comment / Chia Tạo fanpage / nhóm Tìm kiếm kết nối bạn bè Chat giữa người dùng người dùng 103 5.2 Định hướng phát triển Hiện xu hướng nhu cầu sở hữu thú cưng ngày lên một phần nhờ vào yêu tố công nghệ Nhưng phần lớn sự thay đổi lớn văn hóa Mạng xã hợi đã trở thành mợt văn hóa kỹ tḥt số, ứng dụng mang tính cợng đồng dành cho tất cả người Như vậy ngành dịch vụ tiện ích dành cho vật ni phát triển với dịch vụ dành cho người Cũng người, việc sở hưu thiết bị di đợng đã kích hoạt cho sự phát triển Chính thấy sự phát triển vậy tương lai, nhóm đã có định hướng phát triển áp dụng GoogleMap API vào việc xác định vị trí Petpedia tương lai một ứng dụng mợt cợng đồng dựa tên vị trí cho những người yêu động vật Hỗ trợ kết nối với những người bạn có chung sở thích tại địa phương cợng đồng khu vực sinh sống Khi áp dụng hướng phát triển này, những người có du nhầu việc mở dịch vụ cửa hang kinh doang mặt hang thú cưng trở nên dễ dàng Dựa vào vị trí chủ vật nuôi hiển thị map, nhà kinh doanh dịch vụ dựa vào mà xác định tiềm tiêu thụ lĩnh vực tại mợt vị trí định Điều mang lại nguồn thu nhập tói cho nhà kinh doanh mang lại sự tiện ích người dùng tìm kiếm ngành dịch vụ cho thú cưng TÀI LIỆU THAM KHẢO 104 [1] API with Jquery: “OpenJSWorld”, https://api.jquery.com/ [2] Bootstrap: “Bootstrap document”, https://getbootstrap.com/ [3] Fontawesome: “Fontawesome docs”, https://fontawesome.com/ [4] JSON: “JSON with Ajax”, https://www.tutorialspoint.com/json/json_ajax_example.htm [5] Git Tutorial: “Learn GIT simply easy learning”, https://www.tutorialspoint.com/git/index.htm [6] MongoDB: “MongoDB Node Driver”, https://docs.mongodb.com/drivers/node/current/ [7] NodeJS: “”NodeJS docs”, shttps://nodejs.org/en/docs/ [8] RESTful API: “RESTful API gì? Cách thiết kế RESTful API”, https://topdev.vn/blog/restful-api-la-gi/, https://jsonapi.org/ [9] SweetAlert2: “ A beautiful, Responsive, Customizable, accessible (Wai-Aria) replacement for javascript’s popup boxes ”, https://sweetalert2.github.io/ [10] Postman:” Use Postman to test API calls”,https://developer.mypurecloud.com/api/rest/postman/index.html Phụ lục – Hướng dẫn cài đặt • Tải project từ file đính kèm • Giải nén project mở project VS Code • Tiến hành update dependencies, package node_modules command đây, tại thư mục gốc project với terminal: npm install • Chạy command terminal: 105 nodemon server.js (Trường hợp khơng tìm thấy nodemon, chạy command npm install nodemon, sau chạy lại command nodemon server.js) • Sau hồn tất, mở trình duyệt truy cập địa http:localhost:3000 Trường hợp localhost:3000 chạy tiến trình khác, làm theo mợt hai cách sau: • Kill tiến trình, chạy lại command nodemon server.js • Đổi port 3000 thành mợt port khác file server.js chạy lại commend server.js Môi trường thực nghiệm Website triển khai thực tế môi trường Internet Microsoft Azure : VPS Database Hosting: MongoDB Atlas Tên miền truy cập: http://petpediavn.me/ Truy cập vào tên miền để sử dụng chức ứng dụng 106 ... THÔNG TIN Ngày Tháng Năm 2021 ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Xây dựng mạng xã hội chia sẻ khoảnh khắc cho những người yêu động vật Cán bộ hướng dẫn : ThS Nguyễn Thị Thanh Trúc - TS Nguyễn... TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN/PHẢN BIỆN) Tên khóa luận: Xây dựng mạng xã hội chia sẻ khoảnh khắc cho những người yêu đợng vật Nhóm SV thực hiện: Trần Diệu Bảo Trân Đồn Thế Duy 17521150... cấp chế để người đánh giá những đóng góp cho cợng đồng họ Khi người dùng sử dụng mạng xã hội Facebook để ghi lại mối quan hệ họ với những người khác mạng xã hội dành cho thú cưng