Báo cáo đồ án chuyên ngành (1) đề tài xây dựng ứng dụng mạng xã hội

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH (1) ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG MẠNG XÃ HỘI Sinh viên thực : Võ Văn Việt Lê Chí Nghĩa Giảng viên : TS Nguyễn Đức Hiển 20IT527 20IT624 Đà Nẵng, ngày tháng năm 2022 LỜI MỞ ĐẦU Trong năm gần đây, cơng nghệ thơng tin (CNTT) có phát triển mạnh mẽ đạt tiến vượt bậc, thành tựu CNTT mang lại sức sống cho nhiều mặt xã hội phạm vi toàn giới Ở nước ta, việc áp dụng thành tựu CNTT vào công tác quản lý điều hành cơng việc quan xí nghiệp triển khai rộng rãi Tin học hóa cơng việc văn phịng, cơng việc quản lý quan, quan có phạm vi quản lý rộng tiến hành ngày có quy mơ đáp ứng u cầu thực tiễn công việc, tạo điều kiện cho cơng tác hành chính, cơng tác quản lý ngày thuận lợi, thơng tin nhanh có hiệu Một điển hình ứng dụng cơng nghệ thông tin vào công tác quản lý quan xí nghiệp sử dụng hệ thống mạng máy tính để điều hành cơng việc Việc kết nối máy tính tạo thành mạng lưới cung cấp cho người sử dụng khả ưu việt hẳn so với việc sử dụng máy tính đơn lẻ Cơng việc máy tính khơng đơn thay cho máy đánh chữ mà sử dụng để nhập số liệu, xử lý số liệu sở thông tin nhập vào, đưa mẫu thống kê LỜI CẢM ƠN Công nghệ thông tin ngày phát triển, việc áp dụng thành tựu chúng mang lại hiệu lợi ích to lớn mặt đời sống xã hội Điện thoại chạy Android trở nên phổ biến giá thành ngày rẻ hồn tồn chạy ứng dụng cách nhanh chóng Nắm bắt nhu cầu đó, với giúp đỡ hướng dẫn tận tính Thạc sĩ – Giảng viên – thầy Nguyễn Văn Bình mà nhóm chúng em nghiên cứu, phát triển ứng dụng chat thông qua điện thoại android Do kiến thức thân hạn hẹp chưa có kinh nghiệm làm chương trình lớn có tính ứng dụng thực tế cao nên q trình thực nhóm em cịn phạm phải nhiều sai sót chương trình thành phẩm cịn tồn lỗi khơng mong muốn Rất mong nhận góp ý để chúng em hoàn thiện rút kinh nghiệm cho đồ án, dự án lớn tương lai Một lần nữa, chúng em xin chân thành cảm ơn thầy chúc thầy nhiều sức khỏe! NHẬN XÉT HƯỚNG DẪN (Của giảng viên) …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… Giáo viên hướng dẫn TS Nguyễn Đức Hiển MỤC LỤC CHƯƠNG I: GIỚI THIỆU Giới thiệu đề tài Công nghệ kĩ thuật 2.2 Sơ lược Android app với React Native 2.2 Kĩ thuật lập trình 10 2.2.1 Frontend 10 2.2.2 Backend 11 2.2.3 Công cụ phát triển 13 2.3 Khảo sát thực tế 14 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 15 Yêu cầu đặc tả yêu cầu 15 Kiến trúc ứng dựng 16 2.2.1 .Biểu đồ use case 16 2.2.2 Thiết kế Wireframe 20 3.Mô tả liệu 23 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG Các hình 27 27 2.Các kết 33 2.1 Các kết đạt 33 2.2.Hướng phát triền đề tài 33 TÀI LIỆU THAM KHẢO 34 DANH MỤC HÌNH ẢNH Hình Các gói use case Hình Use case đăng ký - đăng nhập Hình Use case quản lí thơng tin cá nhân Hình Use case quản lí danh sách bạn bè Hình 5.Quản lí danh sách thành viên Hình Use case gửi nhận tin nhắn Hình Báo cáo tài khoản Hình Wireframe lauching Hình Wireframe đăng nhập Hình 10 Wireframe đăng ký Hình 11 Wireframe danh sách phịng chat Hình 12 Wirefame trang cá nhân Hình 13 Wireframe khung chat Hình 14 Bảng user Hình 15 Bảng message Hình 16 Lưu trữ thơng tin user Firebase Hình 17 Bảng auth Hình 18 Quản lí thơng tin xác thực người dùng Firebase Hình 19 Biểu đồ quan hệ Hình 20 Lưu trữ tập tin Firebase Hình 21 Màn hình đăng ký Hình 22 Màn hình xác nhận sdt Hình 23 Màn hình đăng nhập Hình 24 Màn hình danh sách phịng chat Hình 25 Khung chat Hình 26 Trang cá nhân 14 14 15 15 16 16 17 17 18 18 19 19 20 21 21 22 22 23 23 24 25 26 27 28 29 30 CHƯƠNG I: GIỚI THIỆU Giới thiệu đề tài Công nghệ thông tin ngành mũi nhọn Việt Nam giới Ngày nay, tất ngành nghề thay đổi việc quản lý lạc hậu, cũ kỹ hệ thống công nghệ đại Chỉ cần sử dụng chương trình quản lý với máy tính nối mạng Internet thực cơng việc Bắt kịp xu hướng đại đó, chúng tơi sử dụng hệ thống máy tính kết nối mạng internet để xây dựng chương trình ứng dụng mạng xã hội tảng Website, Android việc thông tin liên lạc với nhiều chức Trò chuyện realtime qua internet số yêu cầu thiếu đời sống đại đem lại nhiều lợi ích to lớn giải trí, kinh doanh… Xây dựng ứng dụng mạng xã hội đề tài thú vị hứa hẹn lĩnh vực công nghệ đại Với phát triển nhanh chóng ReactJS, thư viện mã nguồn mở sử dụng để xây dựng giao diện người dùng, việc xây dựng ứng dụng mạng xã hội sử dụng ReactJS trở nên phổ biến hết Ứng dụng chúng tơi cịn có nhiều chức phục vụ nhu cầu khác đăng tải chia sẻ khoảnh khắc sống Với ứng dụng chúng tơi thông tin khách hàng bảo mật nhằm giúp đảm bảo an toàn khách hàng Hệ thống thực đầy đủ chức công việc cần có như: chat realtime, call video, đăng tải status sống…Giúp khách hàng thoải mái sử dụng ứng dụng Công nghệ kĩ thuật 2.1 Sơ lược Website sử dụng React Js Việc sử dụng ReactJS giúp cho việc phát triển ứng dụng trở nên đơn giản hơn, hiệu dễ bảo trì Nhờ vào cấu trúc Component-Based ReactJS, thành phần ứng dụng tách biệt quản lý độc lập, giúp cho việc phát triển bảo trì ứng dụng trở nên dễ dàng Để xây dựng ứng dụng mạng xã hội sử dụng ReactJS, sử dụng tính thư viện JSX để viết đoạn mã HTML CSS, sử dụng Redux để quản lý trạng thái ứng dụng Các tính giúp cho ứng dụng phát triển nhanh chóng, tối ưu hóa hiệu suất tương tác với người dùng cách tốt Với lợi ích vượt trội mà ReactJS mang lại, xây dựng ứng dụng mạng xã hội sử dụng ReactJS trở thành lựa chọn hàng đầu nhiều nhà phát triển ReactJS thư viện JavaScript mã nguồn mở sử dụng để xây dựng giao diện người dùng ứng dụng web ReactJS phát triển Facebook sử dụng rộng rãi dự án phát triển ứng dụng web đại ReactJS cho phép phân chia giao diện người dùng thành thành phần độc lập tái sử dụng được, giúp giảm thiểu thời gian phát triển tối ưu hóa hiệu suất ứng dụng Nó sử dụng ngơn ngữ định dạng HTML gọi JSX để xác định thành phần giao diện trang web, kết hợp với JavaScript để xử lý kiện liệu động trang web ReactJS hỗ trợ thư viện cơng cụ bổ sung để tăng tính khả mở rộng ứng dụng web Ví dụ, Redux thư viện quản lý trạng thái cho phép quản lý trạng thái ứng dụng lớn phức tạp Ngồi ra, cơng cụ Webpack, Babel ESLint sử dụng để tối ưu hóa mã quản lý phụ thuộc Website sử dụng ReactJS cho phép phát triển ứng dụng web nhanh chóng, hiệu dễ bảo trì Nó cung cấp cho nhà phát triển cách tiếp cận khác biệt để xây dựng ứng dụng web độc đáo phức tạp với tính tốt khả mở rộng cao 2.2 Sơ lược Android app với React Native Android hệ điều hành có mã nguồn mở dựa tảng Linux thiết kế dành riêng cho thiết bị di động có hình cảm ứng điện thoại thơng minh máy tính bảng Ban đầu, hệ điều này phát triển công ty Android, với hỗ trợ tài từ Google, sau Google mua lại công ty tiếp tục phát triển Android trở thành tảng hiệu * Ưu điểm - Android có khả tuỳ biến cao, cho phép tùy ý chỉnh sửa mà khơng có can thiệp hay ràng buộc pháp lý từ Google - Android xuất nhiều mẫu thiết bị từ phân khúc bình dân đến cao cấp, mang đến nhiều lựa chọn cho người dụng - Kho ứng dụng Google Play Store đồ sộ, nhiều ứng hữu ích - Giao diện thân thiện, dễ sử dụng * Nhược điểm - Do tính chất mã nguồn mở nên Android ln có nguy tiềm ẩn cao bị dính virus phần mềm độc hại - Android có phân mảnh lớn có mặt nhiều thiết bị khác nhau, gây nên số khó khăn cho nhà phát triển xây dựng ứng dụng - Không hỗ trợ cập nhật cho tất thiết bị, nhiều trường hợp, muốn trải nghiệm phiên Android mới, người dùng phải mua thiết bị 2.2 Kĩ thuật lập trình 2.2.1 Frontend Muốn lập trình di động android có ngơn ngữ : - JavaScript : Đây ngôn ngữ phổ biến tính cho đếnn thời điển Với cộng đồng developer lớn mạnh thành lập từ lâu, bạn dễ dàng nhận hỗ trợ giúp đỡ chun mơn Ngơn ngữ lập trình thức Web JavaScript JavaScript ngơn ngữ lập trình sử dụng rộng rãi giới với ước tính khoảng triệu nhàphát triển Hệ điều hành Website sử dụng JavaScript sở cho tất ứng dụng Website Trong ReactJS khơng hồn tồn giống java thơng thường, có nhiều điểm chung – học JavaScript giúp ích nhiều bạn phát triển ứng dụng cho android JavaScript thiết kế để tương thích với nhiều mơi trường phát triển nên xem linh hoạt ngơn ngữ lập trình hướng đối tượng C++ ngơn ngữ lập trình C Ngồi Java cịn có hiệu suất cao nhờ vào trình thu gom rác, giải phóng nhớ với đối tượng không dùng đến JavaScript nâng cao viết chương trình thực thi nhiều tác vụ lúc với tính đa luồng mình, đặc biệt lập trình game Khơng có vậy, JavaScript cịn hỗ trợ bảo mật tốt thuật tốn mã hóa public key mã one way hashing JavaScript ngôn ngữ miễn phí từ đầu, bạn khơng cần phải trả khoản chi phí để tạo ứng dụng Java Điều phù hợp cho việc đào tạo lập trình viên mà ưu tiên trước hết bạn sinh viên Khơng điều cịn giúp Java trở thành ngơn ngữ thơng dụng cộng đồng lập trình viên hay tổ chức lớn Sự dồi lập trình viên Java lợi đáng kể, giúp tổ chức dễ dàng lựa chọn Java cho chiến lược phát triển Vì ưu điểm JavaScript nên nhóm định sử dụng dự án 2.2.2 Backend Node.js tảng phát triển ứng dụng web dịch vụ máy chủ xây dựng động JavaScript V8 Google Với khả xử lý hàng nghìn kết nối đồng thời mà khơng ảnh hưởng đến hiệu suất, Node.js lựa chọn phổ biến việc xây dựng phần Backend cho ứng dụng web Trong đề tài chúng ta, việc sử dụng Node.js cho phần Backend mang lại nhiều ưu điểm Đầu tiên, Node.js có hiệu suất cao so với tảng phía server khác nhờ sử dụng động JavaScript V8 Điều cho phép ứng dụng xử lý lượng lớn u cầu từ phía người dùng cách nhanh chóng hiệu Thứ hai, Node.js cung cấp nhiều thư viện, công cụ hỗ trợ cho việc phát triển ứng dụng, giúp cho trình phát triển trở nên nhanh chóng tiết kiệm thời gian Với phát triển cộng đồng đời framework Express, Koa, NestJS, Node.js ngày sử dụng rộng rãi phát triển ứng dụng web +Docker tảng ảo hóa dùng để đóng gói, phân phối chạy ứng dụng container độc lập với môi trường hệ thống Docker sử dụng rộng rãi công nghiệp phần mềm để đơn giản hóa việc triển khai vận hành ứng dụng Một số đặc điểm Docker bao gồm: Đóng gói ứng dụng: Docker cho phép đóng gói ứng dụng thành phần liên quan chúng vào container độc lập Các container 10 Khả mở rộng: MongoDB mở rộng theo chiều ngang (horizontal scaling), tức thêm node vào hệ thống để tăng khả xử lý dung lượng lưu trữ Query mạnh mẽ: MongoDB hỗ trợ query phức tạp toán tử truy vấn, giúp truy xuất lọc liệu cách dễ dàng Indexing: MongoDB hỗ trợ loại index phức tạp cung cấp khả tối ưu truy vấn liệu Replication sharding: MongoDB hỗ trợ tính replica set sharding, giúp tăng tính sẵn sàng khả mở rộng hệ thống Tích hợp dễ dàng: MongoDB có driver cho nhiều ngơn ngữ lập trình tích hợp tốt với công nghệ khác Apache Hadoop, Spark Node.js Với tính trên, MongoDB thường sử dụng cho ứng dụng web, phân tích liệu ứng dụng lưu trữ liệu phân tán Ngồi ra, Node.js kết nối với nhiều sở liệu khác MongoDB, PostgreSQL, MySQL, có khả xử lý đa luồng, đồng thời xử lý hàng nghìn kết nối mà không ảnh hưởng đến hiệu suất server Với lợi ích trên, việc sử dụng Node.js docker mogodb cho phần Backend đề tài mang lại hiệu cao tiết kiệm thời gian cho q trình phát triển ứng dụng web 2.2.3 Cơng cụ phát triển Đối với công cụ phát triển, có lựa chọn, Visual Studio Code, phiên IntelliJ IDEA Trong năm gần đây, cơng cụ quản lí Google phát triển liên tục, vừa có tính dễ làm quen, vừa có giao diện 12 thân thiện, nên dự án nhóm sử dụng công cụ để phát triển ứng dụng 2.3 Khảo sát thực tế Trên thị trường có nhiều ứng dụng mạng xã hội internet Facebook, Zalo, Messenger , WhatApps , …Trong số , bật ứng dụng mạng xã hội Twitter Twitter tảng mạng xã hội cho phép người dùng đăng tải tin nhắn ngắn gọi "tweets" Twitter cho phép người dùng kết nối tương tác với thông qua việc theo dõi trả lời tweets Nền tảng trở thành công cụ quan trọng cho việc truyền thông, quảng cáo marketing mạng xã hội Các chức Twitter bao gồm: Đăng tải tweet: Người dùng đăng tải tin nhắn ngắn, hình ảnh, video liên kết đến trang web khác Theo dõi: Người dùng theo dõi tài khoản khác để xem tweet họ thông báo có tweet Thích (Like): Người dùng thích tweet cách nhấn vào nút "Thích" tweet Trả lời: Người dùng trả lời vào tweet cụ thể cách nhấn vào nút "Trả lời" đăng tải câu trả lời Retweet: Người dùng retweet (tức chia sẻ lại) tweet người khác cách nhấn vào nút "Retweet" Hashtag: Người dùng sử dụng hashtag (#) để phân loại tìm kiếm tweet theo chủ đề cụ thể Tin nhắn riêng (Direct Message): Người dùng gửi tin nhắn riêng cho mà không cần phải đăng tải Twitter Tìm kiếm: Người dùng tìm kiếm tweet tài khoản cụ thể cách sử dụng công cụ tìm kiếm Twitter =>Twitter ứng dụng đa năng, mang tính cộng đồng , có đầy đủ chức cần thiết cho chương trình giao tiếp qua internet.Với giao diện bắt mắt, có mặt nhiều chức chương trình đáng để học hỏi q trình xây dựng dự án nhóm 13 14 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Yêu cầu đặc tả yêu cầu Yêu cầu chức năng: - Người dùng cần phải đăng kí tài khoản , xác thực thông tin số điện thoại email - Người dùng đăng nhập nhớ tài khoản để phục vụ lần đăng nhập - Người dùng tìm kiếm người dùng khác thông qua tên , email số điện thoại - Người dùng thay đổi ảnh đại diện , email , số điện thoại - Người dùng chat realtime video call - Có thể tạo nhóm để chat - Người dùng đăng tải chia sẻ dòng trạng thái - Nhân viên quản lý đăng nhập tài khoản admin không nhớ tài khoản - Nhân viên quản lí hệ thống có quyền khóa tài khoản có dấu hiệu việc spam đưa thông tin nhạy cảm Yêu cầu phi chức năng: - Hệ thống có khả phục vụ 100 người dùng lúc - Thời gian thực thi u cầu phải nhanh chóng - Ngơn ngữ giao diện thân thiện , biểu tượng mang tính quán - Người dùng đăng nhập với tài khoản Không thể đăng nhập tài khoản khác - Hệ thống hoạt động tốt 24/24 - Nhân viên quản lý đọc hay chép thông tin cá nhân người dùng - Đảm bào khả backup liệu phục hồi hệ thống 15 Kiến trúc ứng dựng 2.2.1 .Biểu đồ use case Xác định tác nhân : -NGƯỜI DÙNG: Những người có nhu cầu trị chuyện thơng qua ứng dụng -QUẢN TRỊ NHĨM: Là người tạo nhóm chat người tạo nhóm phân quyền , có quyền thêm , bớt thành viên , quản lí hoạt động nhóm -QUẢN TRỊ VIÊN: Nhân viên vận hành ứng dụng , có quyền khóa mở tài khoản có dấu hiệu vi phạm nguyên tắc Xác định use case: -Tác nhân NGƯỜI DÙNG có nhứng use case sau: o o o o o o Đăng kí – Đăng nhập Xem, chỉnh sửa thông tin cá nhân Yêu cầu, xác nhân, hủy kết bạn Tìm kiếm người dùng khác Chat, video call với bạn bè Xóa tin nhắn -Tác nhân QUẢN TRỊ NHĨM có use case sau: o Quản lý danh sách thành viên o Phân quyền quản trị cho thành viên khác -Tác nhân QUẢN TRỊ VIÊN có use case sau: o Tiếp nhân xử lí báo cáo o Khóa mở tài khoản người dùng Xác định gói use case Từ việc phân tích use case tác nhân ta xây dựng gói use case sau: 16 Hnh Các gói use case Từ gói use case , ta xây dựng biểu đồ chi tiết cho gói: Hnh Use case đăng ký - đăng nhập 17  Chức Đăng xuất tài khoản Hnh Use case đăng xuất  Chức quản lý thơng tin cá nhân Hnh Use case quản lí thông tin cá nhân 18  Xem tài khoản người dùng Hnh Use case xem tài khoản người dùng  Tìm kiếm tài khoản người dùng Hnh Use case Tm kiếm tài khoản người dùng  Quản lý danh sách bạn bè 19 Hnh Use case quản lí danh sách bạn bè Hnh 8.Quản lí danh sách thành viên 20  Chức gửi Tin nhắn Hnh Use case gửi nhận tin nhắn  Chức kiểm duyệt tài khoản Hnh 10 Báo cáo tài khoản 21  Chức Follow Hnh 11.use case chức Follow  Post kèm chế độ công khai (private, follower, public) Hnh 12.post đăng 22  Post kèm chế độ cơng khai hội nhóm Hnh 13 Post kèm chế độ công khai hội nhóm Chức Năng Share viết Hnh 14 Use case share viét 23  Chức Like Bỏ like Hnh15 Use case chức liki, bỏ like  Chức Comment (bình luận) Hnh 16.Use case chức bnh luận 3.Mô tả liệu Database Hiển thị thông tin User UserInfo 24 Hiển thị thông tin user Thơng thường có chỗ hiển thị thơng tin user, là:  Trang cá nhân (profile) có chi tiết đầy đủ thơng tin  Ơ thơng tin vắn tắt trang news feed hay timeline - trang hiển thị thông tin đăng bạn bè, thân, trang public khác  Do user không hay vào profile mà thường vào trang news feed nên ta tách thành tables:  Table chứa thông tin vắn tắt table Users ln  Table chứa thông tin chi tiết nằm table UserInfo, cấu trúc lượng data nhiều hẳn table Users Hnh 17 Database User Chức Follow Ta mô tả quan hệ user cách tạo table với column:       user_0: đối tượng thứ user_1: đối tượng thứ relationship: kiểu quan hệ (enum): (0): user_0 follow user_1 (1): user_1 follow user_0 (2): user_0 user_1 follow lẫn 25 Hnh 18 Database Chức Follow  follower người theo dõi  following người theo dõi CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG Sau trình nghiên cứu thực đề tài nhóm hồn thành ứng dụng trị chuyện minh Nền tảng WebSite TÀI LIỆU THAM KHẢO - GitHub - https://legacy.reactjs.org/ - https://tailwindcss.com/ 26