Tìm hiểu spring boot và xây dựng trang web mạng xã hội

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP CƠNG NGHỆ THƠNG TIN TÌM HIỂU SPRING BOOT VÀ XÂY DỰNG TRANG WEB MẠNG XÃ HỘI GVHD: ThS NGUYỄN HỮU TRUNG SVTH : NGUYỄN TẤN KIỆT PHẠM QUI TÂM S K L0 1 Tp Hồ Chí Minh, năm 2023 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM KHOA CÔNG NGHỆ THÔNG TIN NGUYỄN TẤN KIỆT - 19110386 PHẠM QUI TÂM – 19110453 TÌM HIỂU SPRING BOOT VÀ XÂY DỰNG TRANG WEB MẠNG XÃ HỘI KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN HỮU TRUNG KHOÁ 2019 - 2023 ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HÒA XHCN VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Nguyễn Tấn Kiệt MSSV 1: 19110386 Họ tên Sinh viên 2: Phạm Qui Tâm MSSV 2: 19110453 Ngành: Công nghệ thơng tin Tên đề tài: Tìm hiểu Spring Boot xây dựng trang web mạng xã hội Họ tên giảng viên hướng dẫn: ThS Nguyễn Hữu Trung NHẬN XÉT Về nội dung đề tài khối lượng thực hiện:…………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… Ưu điểm:……………………………………………………………………………… ……………………………………………………………………………………………… …………………………………………………………………………………………… Khuyết điểm: ………………………………………………………………………… ……………………………………………………………………………………………… …………………………………………………………………………………………… Đề nghị cho bảo vệ hay không? ……………………………………………………… Đánh giá loại: ………………………………………………………………………… Điểm: ………………………………………………………………………………… TP Hồ Chí Minh, tháng 07 năm 2023 Giảng viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM CỘNG HÒA XHCN VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc ****** ****** PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Nguyễn Tấn Kiệt MSSV 1: 19110386 Họ tên Sinh viên 2: Phạm Qui Tâm MSSV 2: 19110453 Ngành: Công nghệ thơng tin Tên đề tài: Tìm hiểu Spring Boot xây dựng trang web mạng xã hội Họ tên giảng viên phản biện: ThS Nguyễn Minh Đạo NHẬN XÉT Về nội dung đề tài khối lượng thực hiện:…………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… …………………………………………………………………………………………… Ưu điểm:……………………………………………………………………………… ……………………………………………………………………………………………… …………………………………………………………………………………………… Khuyết điểm: ………………………………………………………………………… ……………………………………………………………………………………………… …………………………………………………………………………………………… Đề nghị cho bảo vệ hay không? ……………………………………………………… Đánh giá loại: ………………………………………………………………………… Điểm: ………………………………………………………………………………… TP Hồ Chí Minh, tháng 07 năm 2023 Giảng viên hướng dẫn (Ký & ghi rõ họ tên) LỜI CẢM ƠN Để hoàn thành đồ án này, chúng em xin gửi lời cảm ơn chân thành đến Ban giám hiệu trường Đại Học Sư phạm kỹ thuật Thành phố Hồ Chí Minh tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thơng tin Bên cạnh chúng em xin gửi lời cảm ơn sâu sắc đến thầy Nguyễn Hữu Trung vô biết ơn thầy hỗ trợ nhóm chúng em xun suốt q trình thực khóa luận tốt nghiệp Thầy ln tận tình giúp đỡ chúng em, đưa lời khuyên, nhận xét giải đáp thắc mắc chúng em để chúng em có thể hồn thiện sản phẩm Chúng em xin gửi lời cảm ơn chân thành đến quý thầy (cô) khoa Công Nghệ Thông Tin Với kiến thức kinh nghiệm từ thầy (cô) tận tình việc truyền đạt cho chúng em, nguồn kiến thức to lớn, tảng giúp cho chúng em có thể thực tốt khóa luận tốt nghiệp Vì khả kiến thức chun mơn chúng em nhiều hạn chế, chúng em thiếu kinh nghiệm việc thực dự án phần mềm, thêm vào thời gian thực đề tài có giới hạn Do đó, q trình thực khơng thể khơng cố điều thiếu sót Chúng em hi vọng nhận thông cảm nhận xét, góp ý q báo từ q thầy (cơ) để có thể hồn thiện nâng cấp sản phẩm tốt Cuối cùng, chúng em xin kính chúc thầy (cơ) ln có sức khỏe thật tốt thành công sống Một lần xin chân thành cảm ơn ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên thực 1: Nguyễn Tấn Kiệt MSSV 1: 19110386 Họ tên sinh viên thực 2: Phạm Qui Tâm MSSV 2: 19110453 Thời gian làm luận văn từ: 23/08/2022 đến 12/07/2023 Ngành: Cơng nghệ thơng tin Tên đề tài: Tìm hiểu Spring Boot xây dựng trang web mạng xã hội Giáo viên hướng dẫn: ThS Nguyễn Hữu Trung Nhiệm vụ luận văn: Lý thuyết: ● Web MVC, RESTful API ● Java Spring Boot, Reactjs ● Java JPA, MySQL ● Firebase ● Collaborative filtering Thực hành: ● Thiết kế trang web theo mơ hình MVC (Model - Controller - View) ● Sử dụng Java Spring Boot cài đặt Back-end ● Sử dụng Reactjs cài đặt Front-end ● Sử dụng Firebase Storage để lưu file upload ● Sử dụng Reactjs Firebase real-time database để thực chức chat real-time ● API sử dụng để giao tiếp Back-end Front-end ● Java JPA giao tiếp với Database quản lý MySQL ● Sử dụng thuật toán AI Collaborative filtering để xây dựng Recommendation System gợi ý người dùng viết MỤC LỤC PHẦN MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Phương pháp thực PHẦN NỘI DUNG Chương Cơ sở lý thuyết Chương Khảo sát phân tích trạng Chương Mơ hình hố u cầu Chương Thiết kế phần mềm Chương Thiết kế giao diện xử lý Chương Cài đặt kiểm thử ứng dụng PHẦN KẾT LUẬN Những kết đạt Ưu điểm Nhược điểm Hướng phát triển TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN Thời gian STT Cơng việc 23/08/2022 - Tìm hiểu Java Spring Bắt đến Boot, Reactjs 04/09/2022 - Tham khảo tài liệu điện tử 05/09/2022 đến - Thảo luận đề 11/09/2022 chức năng, giao diện ứng dụng - Từ đó, lên kế hoạch cho luận văn Tiến hành viết đề cương luận văn 12/09/2022 đến - Khảo sát trạng nhu 18/09/2022 cầu sử dụng mạng xã hội Tham khảo trang mạng xã hội tiếng như: Facebook, Instagram, Twitter, - Đánh giá mức độ khả thi đồ án dựa theo khả thân - Từ xác định yêu cầu đề tài Viết khảo sát yêu cầu đầu tiểu chuyên ngành xây dựng trang thương mại Ghi luận 19/09/2022 đến - Thực mơ hình hố 25/9/2022 u cầu, thiết kế diagram, đặc tả chi tiết - Từ xây dựng database phù hợp với chức năng, liệt kê giao diện chức năng, API cần sử dụng 26/09/2022 đến - Cài đặt database tìm 06/10/2022 kiếm liệu - Thực xây dựng thiết kế giao diện trang web cách chi tiết Thiết kế API cần sử dụng 07/10/2022 đến 27/10/2022 - Front-End: + Cài đặt giao diện thiết kế + Tạo liên kết trang với - Back-End: + Thực kết nối với database, xây dựng trang web theo mơ hình MVC + Cài đặt API 28/10/2022 đến - Back-End: Tiếp tục cài đặt 23/11/2022 API liệt kê thiết kế - Front-End: Thực gọi API để tạo web động - Liên tục kiểm tra giao tiếp Back-end Frontend - Kiểm tra luồng hoạt động trang web 24/11/2022 đến - Tiến hành test toàn hệ 04/12/2022 thống để hồn thiện trang web - Chỉnh sửa tính cài đặt thêm tính để tối ưu - Tiến hành viết báo cáo 05/12/2022 - Hoàn thành báo cáo đến 11/12/2022 10 chuyên ngành 13/03/2023 đến - Xem lại code kiểm thử Bắt đầu khóa luận tốt 19/03/2023 lại hệ thống, thảo luận xác nghiệp định phần cần chỉnh sửa, chức cịn thiếu 11 20/03/2023 đến - Bảo trì hệ thống, tối ưu hóa 23/04/2023 API, điều chỉnh lại giao diện - Tổ chức lại thư mục, tệp 12 Kết thúc tiểu luận 24/04/2023 đến - Thực chức 24/05/2023 thiếu Thiết kế cài đặt API, giao diện cho chức 10 Đổi trạng - Hover vào Đổi thành Đổi thành thái tài avatar công, cập nhật công, cập khoản navbar lại thông tin cá nhật lại người - Nhấn nút nhân dùng Profile trang cá nhân thông tin cá nhân - Nhấn nút trang cá EDIT nhân PROFILE - Chuyển trạng thái người dùng sang PUBLIC/PRIV ATE 132 Pass 6.2.2 Kiểm thử chức quản lý viết: Bảng 6.2: Kiểm thử chức quản lý viết STT Testcase Các bước thược Kết mong đợi Kết Trạng thái Pass Xem danh - Đăng nhập Hiển thị Hiển thị sách thành công vào viết liên viết liên quan trang web quan - Truy cập trang chủ Đăng - Đăng nhập Đăng Đăng viết viết thành công vào viết thành thành công, cập trang web công, cập nhật lại giao - Truy cập trang nhật lại giao diện, hiển thị chủ diện, hiển viết vừa đăng - Nhấn nút thị viết CREATE POST vừa đăng navbar - Nhập nội dung viết - Upload ảnh/video viết - Chọn trạng thái viết, - Nhấn nút SHARE 133 Pass Bình luận - Đăng nhập Bình luận Bình luận thành thành cơng vào thành công, công, cập nhật trang web cập nhật lại lại - Truy cập trang danh sách bình luận chủ bình luận viết - Chọn viết viết danh Pass sách - Nhập nội dung bình luận - Nhấn POST Trả lời - Đăng nhập Trả lời Trả lời thành bình luận thành cơng vào thành công, công, cập nhật trang web cập nhật lại lại danh sách - Truy cập trang danh sách bình luận chủ bình luận viết - Chọn viết viết Pass - Nhấn REPLY bình luận - Nhập nội dung bình luận - Nhấn POST Ẩn viết - Đăng nhập Ẩn thành Ẩn thành công, thành công vào công, cập cập nhật lại giao trang web nhật lại giao diện, ẩn - Truy cập trang diện, ẩn viết vừa bị ẩn chủ viết vừa - Chọn viết bị ẩn 134 Pass - Nhấn HIDDEN viết Ẩn bình - Đăng nhập Ẩn thành Ẩn thành công, luận thành công vào công, cập cập nhật lại giao trang web nhật lại giao diện, ẩn bình - Truy cập trang diện, ẩn luận vừa bị ẩn chủ bình luận - Chọn viết vừa bị ẩn Pass - Nhấn HIDDEN bình luận Xem chi - Đăng nhập Hiển thị chi Hiển thị chi tiết tiết viết thành công vào tiết viết viết Pass trang web - Truy cập trang chủ - Chọn viết - Nhấn VIEW ALL COMMENT Đổi trạng - Đăng nhập Đổi thành Đổi thành công, thái thành công vào công, trở trở trang chủ viết trang web trang chủ 135 Pass - Truy cập trang chủ - Chọn viết - Nhấn nút EDIT - Chuyển trạng thái viết Thả cảm - Đăng nhập Thả cảm xúc Thả cảm xúc xúc thành công vào thành công, thành công, cập viết trang web cập nhật nhật viết - Truy cập trang viết Pass chủ - Chọn viết - Hover icon cảm xúc - Nhấn chọn cảm xúc 10 Đổi cảm - Đăng nhập Đổi cảm xúc Đổi xúc thành công vào thành công, thành công, cập viết trang web cập nhật nhật viết - Truy cập trang viết chủ - Chọn viết - Hover icon cảm xúc 136 cảm xúc Pass - Nhấn chọn cảm xúc khác 11 Bỏ thả cảm - Đăng nhập Bỏ cảm xúc Bỏ xúc thành công vào thành công, thành công, cập viết trang web cập nhật nhật viết - Truy cập trang viết chủ - Chọn viết - Nhấn icon cảm xúc 137 cảm xúc Pass 6.2.3 Kiểm thử chức quản lý quan hệ: Bảng 6.3: Kiểm thử chức quản lý quan hệ STT Testcase Các bước Kết mong thực đợi Kết Trạng thái Pass Tìm kiếm - Đăng nhập Tìm kiếm Tìm kiếm thành người thành cơng thành cơng công trả danh dùng vào trang trả danh sách kết Nếu web sách kết khơng tìm thấy - Truy cập Nếu không thông báo trang chủ tìm thấy - Nhập tên thơng báo người dùng vào ô input navbar Xem trang - Đăng nhập Truy cập Truy cập thành cá nhân thành công thành công công vào trang người vào trang vào trang người dùng khác, dùng web người dùng hiển thị thông tin - Truy cập khác, hiển thị người dùng trang chủ thông tin danh sách - Nhập tên người dùng đăng người người dùng danh sách dùng vào input đăng navbar người dùng - Chọn người dùng 138 Pass Xem - Đăng nhập Hiển thị Hiển thị đăng đăng thành công đăng được chọn, hiển người vào trang chọn, hiển thị thị dùng web danh sách tương tác bình - Truy cập tương tác luận viết trang chủ bình luận - Nhập tên viết danh Pass sách người dùng vào ô input navbar - Chọn người dùng - Chọn viết Gửi lời - Đăng nhập Gửi lời mời Gửi lời mời kết mời kết thành công kết bạn thành bạn thành công, bạn vào trang công, cập cập nhật lại giao web nhật lại giao diện chuyển sang - Truy cập diện chuyển trạng thái chờ kết trang chủ sang trạng bạn, gửi thông báo - Nhập tên thái chờ kết cho người nhận người dùng bạn, gửi vào ô input thông báo cho navbar người nhận - Chọn người dùng 139 Pass - Nhấn nút ADD FRIEND Huỷ kết - Đăng nhập Huỷ kết bạn Huỷ kết bạn bạn thành công thành công, thành công, cập vào trang cập nhật lại nhật lại giao diện web giao diện chuyển sang trạng - Truy cập chuyển sang thái có thể kết trang chủ trạng thái có bạn - Nhập tên thể kết bạn Pass người dùng vào ô input navbar - Chọn người dùng - Nhấn nút UN FRIEND Chấp nhận - Đăng nhập Chấp nhận Chấp nhận thành kết bạn thành công thành công, công, cập nhật lại vào trang cập nhật lại giao diện chuyển web giao diện sang trạng thái - Truy cập chuyển sang bạn bè, gửi thông trang chủ trạng thái bạn báo - Nhấn icon bè, gửi thông nhận trái tim báo cho người nhận 140 cho người Pass navbar - Nhấn ACCEPT Nhắn tin - Đăng nhập Nhắn tin Nhắn tin thành thành công thành công, công, gửi thông vào trang gửi thông báo báo tin nhắn web tin nhắn cho người nhận - Truy cập cho người trang chủ nhận - Nhấn icon tin nhắn navbar - Tìm kiếm người dùng - Nhập tin nhắn vào ô input - Nhấn SEND 141 Pass PHẦN KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC: Về kiến thức: 1.1 Trong q trình thực khóa luận tốt nghiệp, thành viên nhóm chúng em đạt thành công mặt kiến thức chuyên môn như: ● Cách phát triển sản phẩm phần mềm Java Spring Boot để thiết kế API, Reactjs để thiết kế giao diện gọi API, Firebase để lưu trữ file thực tính chat real-time ● Hiểu cách vận dụng thuật toán AI để xây dựng hệ thống gợi ý ● Hiểu quy trình thực dự án phần mềm ● Học hỏi khả giải vấn đề, debug, fixbug ● Rèn luyện kỹ làm việc nhóm, tranh luận, phản biện, giải vấn đề tập thể ● Nâng cao kỹ đọc tài liệu tiếng Anh khả tự học ● Rèn luyện kỹ quản lý thời gian phân chia công việc Về đề tài: 1.2 Tạo trang mạng xã hội với chức cốt lõi như: ● Tạo tài khoản người dùng ● Quản lý trang cá nhân ● Đăng bình luận ● Kết bạn nhắn tin ● Tạo tài liệu báo cáo cho thống với sơ đồ lược đồ Về kinh nghiệm: 1.3 ● Kinh nghiệm việc phát triển án phần mềm 142 ● Kinh nghiệm làm việc với Google Cloud ● King nghiệm làm việc với Spring Boot, Reactjs ● Kinh nghiệm triển khai kiểm thử phần mềm ƯU ĐIỂM VÀ NHƯỢC ĐIỂM: Ưu điểm: 2.1 ● Ý tưởng sáng tạo, có khả mở rộng phát triển cao tương lai ● Ứng dụng có thể hoạt động ổn định với tính ● Sử dụng thư viện, framework mạnh việc phát triển sau ● Sử dụng thuật toán AI hệ thống Nhược điểm: 2.2 ● Giao diện chưa bắt mắt, sáng tạo ● Còn thiếu nhiều chức trang mạng xã hội ● Các chức chi tiết bên chức chưa hoàn thiện tỉ mỉ, chỉnh chu ● Database bị chia nhỏ, gây khó khăn cho việc lưu trữ ● Các tính chưa xử lý tối ưu mặt logic hiệu THUẬN LỢI: ● Nhóm trang bị kiến thức việc phát triển án phần mềm kĩ chuyên môn ● Nhận nhiều hỗ trỡ tận tình thầy Nguyễn Hữu Trung trình thực đề tài 143 KHĨ KHĂN: ● Tiếp xúc tìm hiểu cơng nghệ mới, ngơn ngữ q trình thực đề tài ● Những thay đổi sách Firebase Google gây trở ngại cho nhóm trình lưu trữ ● Đề tài nhóm, việc thiết kế database diễn khơng thuận lợi, nhóm phải trải qua nhiều lần cập nhật database để hoàn thiện ● Việc chia nhỏ database trở ngại việc quản lý lưu trữ liệu người dùng ● Việc ứng dụng AI vào hệ thống khó khăn việc lưu trữ lợi khơng thuận tiện ● Có nhiều chức chi tiết bên mà nhóm chúng em khơng thể phân tích đưa hướng giải hợp lí HƯỚNG PHÁT TRIỂN: Với vốn kiến thức kỹ chun mơn cịn nhiều hạn chế, với việc khơng có nhiều kinh nghiệm việc phát triển trang mạng xã hội Nhóm khơng thể khai thác hết tìm đề tài phạm vi khóa luận tốt nghiệp Tuy nhiên, với đề tài sáng tạo này, nhóm xác định tiềm phát triển tương lai sản phẩm: ● Điều chỉnh cập nhật lại toàn giao diện ứng dụng ● Bộ sung chức thiếu ứng dụng ● Phát triển phân hệ Admin để có thể thống kê liệu hệ thống ● Cập nhật tính real-time để nâng cấp trải nghiệm người dùng ● Phát triển ứng dụng với phiên mobile cho thiết bị di động ● Tạo tính sáng tạo mới, phù hợp với xu hướng ● Cải thiện mặt logic hiểu tính hệ thống 144 TÀI LIỆU THAM KHẢO [1] Spring Boot gì? Ưu điểm đặc tính Spring Boot, Thuỷ Nguyễn https://bizfly.vn/techblog/spring-boot-la-gi.html [2] Reactjs Là Gì? Những Điều Bạn Chưa Biết Về Reactjs, ITNavi https://itnavi.com.vn/blog/reactjs-la-gi-tong-quan-ve-reactjs [3] Firebase gì? Giới thiệu Firebase tính Firebase, ITNavi https://itnavi.com.vn/blog/firebase-la-gi [4] Facebook https://www.facebook.com/ [5] Instagram https://www.instagram.com/ [6] Tìm hiểu Firebase Realtime Database, Tran Gia Nhuan https://viblo.asia/p/tim-hieu-ve-firebase-realtime-database-Az45bxzVZxY [7] Firebase gì? Tại nên dùng Firebase ?, Bùi Cường https://hocspringboot.net/2020/11/11/firebase-la-gi/ [8] Giới thiệu ReactJS - Phần I (Các khái niệm bản), Do Khanh Toan https://viblo.asia/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7 [9] Bài 19: Thuật Toán Collaborative Filtering, Dat Hoang’s Blog https://www.dathoangblog.com/2019/01/collaborative-filtering.html [10] Matrix Factorization: Phương pháp gợi ý dựa kỹ thuật phân rã ma trận, Hải Hà https://viblo.asia/p/matrix-factorization-phuong-phap-goi-y-dua-tren-ky-thuat-phan-rama-tran-p1-Az45bapNlxY [11] Neighborhood-based Collaborative Filtering: Phương pháp gợi ý dựa láng giềng gần nhất, Hải Hà https://viblo.asia/p/neighborhood-based-collaborative-filtering-phuong-phap-goi-y-duatren-lang-gieng-gan-nhat-p1-4dbZNpvn5YM [10] Báo Cáo Mẫu, Nguyễn Trường An – Gian Thiệu Quân https://docs.google.com/document/d/1oc1vsIUwo7cDvZgSDYI2h0B3T511E6iI/edit?usp=sharing &ouid=106910716433953849962&rtpof=true&sd=true 145