Đang tải... (xem toàn văn)
(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại(Đồ án tốt nghiệp) Xây dựng website mạng xã hội về máy tính và điện thoại
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 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 4.1.1 Frontend 52 4.1.2 Backend 54 4.2 Thiết kế liệu 57 4.2.1 Database Schema 57 4.2.2 Mô tả sơ đồ quan hệ 59 4.3 Thiết kế lược đồ 68 4.3.1 Xác thực qua Token 68 4.3.2 Đăng nhập vào hệ thống 69 4.3.3 Người dùng tạo viết 70 4.3.4 Người dùng bình luận viết 71 CHƯƠNG THIẾT KẾ GIAO DIỆN 73 5.1 Đặc tả chi tiết hình 73 CHƯƠNG KẾT QUẢ, THỰC NGHIỆM, PHÂN TÍCH 116 6.1 Hệ thống Back-end 116 6.2 Hệ thống Front-end 116 6.3 Kiểm thử 116 6.3.1 Kiểm thức chức “Đăng nhập” 116 6.3.2 Kiểm thử chức “Đăng kí” 120 6.3.3 Kiểm thử chức trang chủ 121 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 126 7.1 Kết đạt 126 Trang - iv 7.2 Ưu điểm 127 7.3 Hạn chế 127 7.4 Hướng phát triển 127 Trang - v Danh mục hình Hình 2-1: Cấu trúc hoạt động Mern Stack Hình 2-2: Sơ đồ hoạt động Node.JS Hình 2-3: Hình Nền tảng Firebase 16 Hình 2-4: Các dịch vụ Firebase 17 Hình 2-5: Hình dịch vụ Sightengine 20 Hình 3-1: Giao diện trang newfeed Facebook 25 Hình 3-2: Giao diện trang cá nhân Facebook 25 Hình 3-3: Giao diện trang chủ trang TinhTe 27 Hình 3-4: Quy trình đăng nhập hệ thống 28 Hình 3-5: Quy trình đăng 31 Hình 3-6: Quy trình bình luận 32 Hình 3-7: Quy trình kết bạn 34 Hình 3-8: Sơ đồ Usecase 35 Hình 3-9: Sơ đồ usecase Khách 38 Hình 3-10: sơ đồ usecase người dùng 40 Hình 3-11: sơ đồ usecase Cộng tác viên 42 Hình 3-12: Sơ đồ usecase Quản trị viên 44 Hình 3-13:Đặc tả use case Đăng Bài 45 Trang - vi Hình 4-2: Sơ đồ kiến trúc 51 Hình 4-3: Cấu trúc thư mục Front-end 52 Hình 4-4: Cấu trúc thư mục Back-end 54 Hình 4-5: Database Schema 57 Hình 4-6: Xác thực qua Token 69 Hình 4-7: Đăng nhập vào hệ thông 70 Hình 4-8: Người dùng tạo viết 71 Hình 4-9: Người dùng bình luận viết 72 Hình 5-1: Giao diện header trang chủ 73 Hình 5-2: Giao diện Dropmenu 74 Hình 5-3: Giao diện Login 76 Hình 5-4: Giao diện Signup 77 Hình 5-5: Giao diện Home 79 Hình 5-6: Giao diện hình PC Specifications 82 Hình 5-7: Giao hinh Friends Request 83 Hình 5-8: Giao diện hình Group 85 Hình 5-9: Giao diện hình Notification 87 Hình 5-10: Giao diện hình Friends List 87 Hình 5-11: Giao diện hình Edit profile 89 Trang - vii Hình 5-12: Giao diện hình Change Password 91 Hình 5-13: Giao diện hình messages 93 Hình 5-14: Giao diện hình advertisements 95 Hình 5-15: Giao diện hình tạo quảng cáo 96 Hình 5-16: Giao diện hình tạo quảng cáo 97 Hình 5-17: Giao diện tạo quảng cáo 98 Hình 5-18: Giao diện tốn thơng qua PayPal 98 Hình 5-19: Giao diện hình tạo quảng cáo thành công 99 Hình 5-20: Giao diện hình Photo 101 Hình 5-21: Giao diện hình Admin Login 103 Hình 5-22: Giao diện hình Home admin 104 Hình 5-23: Giao diện hình User detail admin 106 Hình 5-24: Giao diện hình Create group 108 Hình 5-25: Giao diện hình Collaborator 110 Hình 5-26: Giao diện hình Add collaborator 111 Hình 5-27: Giao diện hình Report 112 Hình 5-28: Giao diện hình Report detail 113 Hình 5-29: Giao diện hình Report detail 114 Trang - viii 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 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 thoá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 xoá viết trang chủ Click chọn viết cần xoá 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 ... STACK xây dựng Website o Tìm hiểu cơng nghệ xây dựng Chat realtime - Về nghiệp vụ: Xây dựng website mạng xã hội máy tính điện thoại thơng minh o Tạo môi trường giúp kết nối người u thích cơng nghệ... Một số mạng xã hội phổ biến khắp giới Facebook 1.2 Mục tiêu nhiệm vụ đề tài 1.2.1 Mục tiêu - Về kỹ thuật: o Tìm hiểu cách thức sử dụng MERN STACK xây dựng Website o Tìm hiểu cơng nghệ xây dựng. .. nhau, hiểu biết lẫn dân tộc ta với dân tộc khác giới Ứng dụng mà nhóm phát triển website mạng xã hội máy tính điện thoại cho người có u thích cơng nghệ chia sẻ mà họ biết học hỏi lẫn nhau, chia