Xây dựng website mạng xã hội về máy tính và điện thoại khoa đào tạo chất lượng cao ngành công nghệ thông tin

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 NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ MÁY TÍNH VÀ ĐIỆN THOẠI GVHD: ThS NGUYỄN THANH PHƯỚC SVTH: TRẦN ĐỨC KIỆT NGUYỄN TẤN ĐẠT S K L0 8 Tp Hồ Chí Minh, tháng 07/2021 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ MÁY TÍNH VÀ ĐIỆN THOẠI GHVD: THS NGUYỄN THANH PHƯỚC SVTH: TRẦN ĐỨC KIỆT 17110165 NGUYỄN TẤN ĐẠT 17110119 KHĨA: 2017 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng 07 năm 2021 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ MÁY TÍNH VÀ ĐIỆN THOẠI GHVD: THS NGUYỄN THANH PHƯỚC SVTH: TRẦN ĐỨC KIỆT 17110165 NGUYỄN TẤN ĐẠT 17110119 KHĨA: 2017 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ Chí Minh, tháng 07 năm 2021 CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -Tp Hồ Chí Minh, ngày 20 tháng 07 năm 2021 NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP Họ tên: Trần Đức Kiệt MSSV: 17110165 Lớp: 17110CLST3 Họ tên: Nguyễn Tấn Đạt MSSV: 17110119 Lớp: 17110CLST1 Ngành: Công nghệ thông tin Giảng viên hướng dẫn: ThS Nguyễn Thanh Phước Ngày nhận đề tài: 15/03/2021 Ngày nộp đề tài: 20/07/2021 Tên đề tài: XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ MÁY TÍNH VÀ ĐIỆN THOẠI Nội dung thực đề tài: • Tìm hiểu, tham khảo chức giao diện hệ thống tương tự • Tìm hiêủ chức nghiệp vụ mạng xã hội • Tìm hiểu Mern Stack để chỉnh sửa xây dựng tính • Xây dựng trang web thân thiện, có liên kết với mạng xã hội (đăng nhập FB, GG) Sản phẩm: Source code, ứng dụng deploy TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên: Trần Đức Kiệt MSSV: 17110165 Họ tên: Nguyễn Tấn Đạt MSSV: 17110119 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website mạng xã hội máy tính điện thoại Họ tên giáo viên hướng dẫn: ThS Nguyễn Thanh Phước 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: ……………………………Bằng chữ: Tp Hồ Chí Minh, ngày tháng năm 2021 Giảng viên hướng dẫn CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên: Trần Đức Kiệt MSSV: 17110165 Họ tên: Nguyễn Tấn Đạt MSSV: 17110119 Ngành: Công nghệ thông tin Tên đề tài: Xây dựng website mạng xã hội máy tính điện thoại Họ tên giáo viên phản biện: 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: ……………………………Bằng chữ: Tp Hồ Chí Minh, ngày tháng Giảng viên phản biện năm 2021 LỜI CẢM ƠN Nhóm xin chân thành cảm ơn Khoa Đào Tạo Chất Lượng Cao, Ngành Công Nghệ Thông Tin, Trường Đại Học Sư Phạm Kỹ Thuật TP Hồ Chí Minh tạo điều kiện tốt cho nhóm hồn thành đồ án Trong suốt q trình hồn thiện đồ án nhóm nhận kiến thức vơ bổ ích từ thầy Nguyễn Thanh Phước Thầy nhiệt tình hướng dẫn cho nhóm hồn thành đồ án tiểu luận Nhóm xin gửi lời cảm ơn đến thầy nhờ tận tâm thầy truyền đạt cho chúng em Nhóm xin gửi lời cảm ơn sâu sắc tới tất thầy cô, người giảng dạy, trang bị cho nhóm kiến thức quý báu suốt năm học vừa qua Mặc dù nhóm cố gắng hồn thiện thật tốt đồ án thời gian có hạn nên khơng thể tránh khỏi sai sót, nhóm mong nhận cảm thơng, ý kiến đóng góp q Thầy Cơ bạn! Nhóm xin chân thành cảm ơn! Nhóm sinh viên Mục lục CHƯƠNG TỔNG QUAN 1.1 Khảo sát trạng 1.2 Mục tiêu nhiệm vụ đề tài 1.2.1 Mục tiêu 1.2.2 Nhiệm vụ 1.3 Cơng nghệ lập trình 1.4 Phạm vi nghiên cứu CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Tổng quan MERN Stack 2.1.1 Khái niệm Mern Stack 2.1.2 Các thành phần MERN Stack 2.1.3 Cách thức MERN stack hoạt động 2.1.4 Lợi MERN stack 2.2 NodeJS 2.2.1 Tổng quan 2.2.2 Nguyên tắc hoạt động 2.2.3 Ưu điểm 2.2.4 Nhược điểm 10 2.3 ExpressJS 10 Trang - i 2.3.1 Tổng quan [1] 10 2.3.2 Công dụng 10 2.4 ReactJS 11 2.4.1 Tổng quan ReactJS [2] 11 2.4.2 Ưu điểm 12 2.4.3 Nhược điểm 12 2.5 MongoDB 12 2.5.1 Mơ hình 12 2.5.2 Đặc trưng 13 2.5.3 Ưu điểm 14 2.5.4 Nhược điểm 15 2.6 Firebase 15 2.6.1 Firebase gì? [6] 15 2.6.2 Những dịch vụ bật Firebase 16 2.6.3 Ưu nhược điểm firebase 18 2.7 Sightengine 19 2.7.1 Sightengine ? [7] 19 2.7.2 Những dịch vụ bật Sightengine 20 2.7.3 Ưu nhược điểm Sightengine 20 2.8 Heroku 21 2.8.1 Heroku gì? [8] 21 Trang - ii 2.8.2 Những dịch vụ Heroku 21 2.8.3 Ưu nhược điểm Heroku 22 2.9 Socket.io 22 2.9.1 Socket.io gì? [8] 22 2.9.2 Ưu nhược điểm Socket.io 23 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU BÀI TỐN 24 3.1 Phân tích tốn 24 3.1.1 3.2 Một số mạng xã hội khảo sát 25 Quy trình hoạt động 28 3.2.1 Quy trình đăng nhập vào hệ thống 28 3.2.2 Quy trình đăng viết 30 3.2.3 Quy trình trình bình luận 31 3.2.4 Quy trình kết bạn 33 3.3 Mô hình hóa chức 34 3.3.1 Danh sách Actor 34 3.3.2 Sơ đồ Usecase 35 3.3.3 Mô tả sơ đồ Usecase 36 3.3.4 Đặc tả số usecase 45 CHƯƠNG THIẾT KẾ PHẦN MỀM 51 4.1 Thiết kế kiến trúc 51 Trang - iii CHƯƠNG KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH 6.1 Hệ thống Back-end Hệ thống Back-end sử dụng framework express.js để phát triển Restful API Dù framework nhỏ linh hoạt giúp việc phát triển ứng dụng trở nên nhánh chóng hiệu Hệ thống Back-end triển khai Heroku sử dụng cấu hình free-dyno 6.2 Hệ thống Front-end Ứng dụng Front-end sử dụng công nghệ Single Page Application giúp ứng dụng thao tác liệu nhanh mà khơng yêu cầu tải lại trang Front-end triển khai Heroku sử dụng cấu hình free-dyno 6.3 Kiểm thử 6.3.1 Kiểm thức chức “Đăng nhập” ID Mô tả test Các bước case thực Dữ liệu test Kết mong muốn Kết test Kiểm tra UI DN_01 Kiểm tra vị trí thành phần Kiểm tra vị trí form đăng nhập Như giao diện Đạt Kiểm tra vị trí nhập Trang - 116 thông tin đăng nhập DN_02 Kiểm tra nút nhấn Kiểm tra nút modal đăng nhập Các nút nhấn nhấn modal đăng nhập Đạt Không chấp nhận để trống chấp nhận email hợp lệ Đạt Kiểm tra chức DN_01 Kiểm tra validate trường nhập liệu Kiểm tra validate ô nhập Username Email: ‘nguyendat123’ Mật khẩu: ‘’ Kiểm tra validate ô nhập Password DN_02 Kiểm tra chức đăng nhập nhập sai email mật Nhập thông tin đầy đủ ấn xác nhận Không chấp nhận password để trống Email: ‘nguyendat12’ Mật khẩu: ‘1234’ Hệ thống validate ô nhập liệu trả kết sai ô nhập liệu Đạt Trang - 117 DN_03 DN_04 DN_05 DN_06 Kiểm tra chức đăng nhập người dùng nhập đủ tên đăng nhập mật Nhập email mật Kiểm tra chức đăng nhập tài khoản ‘admin’ Nhập user mật Kiểm tra chức năng nhập tài khoản facebook Nhất nút đăng nhập tài khoản facebook Kiểm tra chức năng nhập Nhấn nút “Đăng nhập” Email: Nếu ‘nguyentandat123 thơng tin hợp 4’ lệ thông báo validate Mật khẩu: hiển thị ‘12345’ thông tin tài khoản đăng nhập Nếu thông tin hợp lệ khơng báo validate chuyển sang trang “Quản lý” Đạt Đạt Nhập tài khoản mật facebook Nếu tài khoản mật người dùng hợp lệ chuyển sang trang home web Nhất nút đăng nhập tài khoản google Nếu tài khoản mật người Đạt Nhấn nút “Đăng nhập’ User: ‘admin’ Đạt Mật khẩu: ‘admin123’ Trang - 118 tài khoản google Nhập tài khoản mật google dùng hợp lệ chuyển sang trang home web Bảng 6-1: Testcase hình đăng nhập Trang - 119 6.3.2 Kiểm thử chức “Đăng kí” ID Mơ tả Các bước thực test case Dữ liệu test Kết mong muốn Kết test Kiểm tra UI DK_01 DK_02 Kiểm tra vị trí thành phần Kiểm tra vị trí form đăng kí Kiểm tra nút nhấn Kiểm tra nút modal đăng kí Như giao diện Đạt Các nút nhấn nhấn modal đăng kí Đạt Yêu cầu nhập thơng tin cho trường liệu Đạt Kiểm tra vị trí nhập thơng tin đăng kí Kiểm tra nút Kiểm tra chức DK_01 Kiểm tra validate trường nhập liệu Kiểm tra thông tin ổ “Your full name” Kiểm tra thông tin ô “Email” Để trống trường liệu Trang - 120 Kiểm tra thông tin ô “Username” Kiểm tra thông tin ô “Password” DK_02 Kiểm tra thông tin nhập thơng tin đăng kí Nhập đầy đủ thơng tin ô theo yêu cầu - Full name: “Nguyễn Tấn Đạt” Nhấn nút “Signup” để tiến hành đăng kí - Email: Nguyendat1099@ gmail.com Tích vào “I accept” - Username: “nguyendat109” Thông báo hợp lệ vào tiến hành đến trang chủ Đạt - Password: “123456” Bảng 6-2: Testcase hình đăng kí 6.3.3 Kiểm thử chức trang chủ ID Mô tả test case Các bước thực Dữ liệu test Kết mong muốn Kết test Kiểm tra UI Trang - 121 TC_01 Kiểm tra vị trí thành phần trang chủ Kiểm tra vị trí logo Kiểm tra vị trí nút nhấn đăng nhập đăng kí Như mong muốn, kết giao diện hình chụp Đạt Kiểm tra khu vực tạo post Kiểm tra vị trí hiển thị đăng quảng cáo Kiểm tra chức TC_01 Kiểm tra Click vào chức tìm tìm kiếm kiếm có trang chủ trang chủ Nhập vào username user cần tìm kiếm Nhập vào Xuất username cần tìm: user có “tran kiet” liên quan đến liệu cần tìm Đạt Trang - 122 TC_02 Kiểm thức chức tạo viết cách thêm ảnh với Tag bạn bè Click vào ô “Create Post” tạo nhập liệu Chọn vào nút “Photo” chọn hình ảnh cần đăng - Nhập liệu: “Macm1” - Click vào ô “Tagfriends”: “TranKiet” - Bài viết đăng lên với hình ảnh Tag bạn bè Đạt Click vào ô “Tag Friends” lựa chọn người cần tag Click vào ô “Post” để đăng viết TC_03 Kiểm tra tính bình luận viết có trang chủ Click vào viết vừa đăng - Nhập bình luận viết “good” Chọn vào bình luận viết - Nhấn vào post bình luận Bình luận Đạt bên viết Nhập bình luận vào ô Nhấn vào ô post Trang - 123 TC_04 Kiểm tra tính xố viết trang chủ Click chọn viết cần xố Click vào nút bên phải phía viết chọn “Delete” Hộp thoại xuất hỏi người dùng có muốn xóa viết Đạt - Nhấn Ok viết xóa - Nhấn Cancel để huỷ bỏ TC_05 Kiểm thử tính share viết trang chủ Click chọn bìa viết cần share Nhấn vào “Share this post” bên phải viết Trên hình newsfeed bạn hiển thị viết vừa share Đạt Thêm thông tin cần share cho viết Nhấn vào nút “Share” Trang - 124 TC_05 Kiểm thử tính messages Click chọn vào Button messages Tin nhắn Chat lên giao diện Đạt Chọn vào user cần Chat Nhập nội dung chat nhấn vào nút “Send” để gửi tin Bảng 6-3: Testcase hình trang chủ Trang - 125 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 7.1 Kết đạt Về nhóm tìm hiểu đạt được: • • • • • • • Tìm hiểu xây dựng RESTFul API ngơn ngữ javascript sử dụng Node.js Tìm hiểu áp dụng ReactJS để xây dựng giao diện phía client Tìm hiểu Websocket để xây dựng ứng dụng real-time Tìm hiểu API Sightengine hỗ trợ việc phân tích nội dung ảnh Tìm hiểu sử dụng framework bootstrap để xây dựng giao diện Tìm hiểu deploy phía front-end, back-end Heroku Xây dựng website mạng xã hội máy tính điện thoại với số tính sau: Về người dùng: o Đăng ký o Đăng nhập (có thể đăng nhập social account) o Đăng xuất o Thay đổi thông tin cá nhân o Kết bạn o Theo dõi viết bạn bè o Tương tác viết o Tham gia nhóm o Đọc tin công nghệ o Tạo chiến dịch quảng cáo Về cơng tác viên: o Có chức giống người dùng o Đăng tin tức công nghệ, đăng nhóm cứng trang Về quản trị viên: Trang - 126 o o o o o o Đăng nhập Quản lý danh sách user Quản lý danh sách group Khóa mở khóa tài khoản user Quản lý cộng tác viên Quản lý danh sách người dùng bị báo cáo 7.2 Ưu điểm • • • • • • Giao diện đại, dễ nhìn, thân thiện với người dùng Ứng dụng đơn giản, dễ sử dụng Áp dụng cơng nghệ Khả bảo trì, mở rộng dễ dàng, nhanh chóng Có tính của mạng xã hội tương tác viết: kết bạn, tham gia group, theo dõi viết, like, comment, thông báo, chat người dùng với Tạo chiến dịch quảng cáo giúp tăng tương tác viết theo nhu cầu cá nhân 7.3 Hạn chế • • • • Hệ thống sử dụng MongoDB Cluster miễn phí nên không mang lại hiệu tối đa người dùng sử dụng Heroku sử dụng cấu hình free-dyno giới hạn tốc độ thời gian sử dụng nên hệ thống thời gian khởi động lại nhàn rỗi 30 phút Trang người quản lý chưa tối ưu Vẫn có khả tồn lỗi 7.4 Hướng phát triển Sau xây dựng phát triển tính khoảng tháng nhóm lên số ý tưởng để phát triển hệ thống lớn mạnh khắc phục số hạn chế hệ thống Tuy nhiên, khơng đủ thời gian nên nhóm lưu ý tưởng lại thực có thời gian Trang - 127 • • • Cải thiện thêm số tính đặc thù dành riêng cho mạng xã hội máy tính điện thoại Hỗ trợ nhiều ngôn ngữ Cải thiện logic hiển thị danh sách đăng trang web Trang - 128 TÀI LIỆU THAM KHẢO Tiếng Anh: [1] Express, Node.js web application framework https://expressjs.com/ [2] Reactjs, A JavaScript library for building user interfaces https://reactjs.org/docs/getting-started.html [3] MongoDB, Document-oriented database - NoSQL database https://docs.mongodb.com/manual/installation/ [5] How to set up Node.js App to server https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-jsapplication-for-production-on-ubuntu-16-04 [6] Firebase, Cloud-based database service https://firebase.google.com [7] Sightengine, Image and Video Moderation API https://sightengine.com [8] Heroku, Platform as a service (PaaS) https://www.heroku.com [9] Socket.io, JavaScript library for real time web applications https://socket.io Trang - 129 ... THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CƠNG NGHỆ THÔNG TIN  ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ MÁY TÍNH VÀ ĐIỆN THOẠI GHVD: THS NGUYỄN THANH... Ngành: Công nghệ thông tin Giảng viên hướng dẫn: ThS Nguyễn Thanh Phước Ngày nhận đề tài: 15/03/2021 Ngày nộp đề tài: 20/07/2021 Tên đề tài: XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ MÁY TÍNH VÀ ĐIỆN THOẠI... NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ MÁY TÍNH VÀ ĐIỆN THOẠI GHVD: THS NGUYỄN THANH PHƯỚC SVTH: TRẦN ĐỨC KIỆT 17110165 NGUYỄN TẤN ĐẠT 17110119 KHÓA: 2017 NGÀNH: CƠNG NGHỆ THƠNG TIN Tp Hồ