ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI ỨNG DỤNG MẠNG XÃ HỘI

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG - - ĐỒ ÁN CƠ SỞ ĐỀ TÀI ỨNG DỤNG MẠNG XÃ HỘI Giảng Viên Hướng Dẫn: TS Nguyễn Đức Hiển Sinh Viên Thực Hiện: Nguyễn Minh Thắng 18IT2 Đà Nẵng, tháng năm 2020 ĐẠI HỌC ĐÀ NẴNG Đồ án sở TS.Nguyễn Đức Hiển KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI ỨNG DỤNG MẠNG XÃ HỘI Đà Nẵng, tháng năm 2020 Đồ án sở TS.Nguyễn Đức Hiển MỞ ĐẦU Trong thời đại công nghệ 4.0, xã hội ngày phát triển, sống người ngày nâng cao Đi đôi với công nghiêp hiện đại sự phát triển khoa học kĩ thuật kéo theo sự phát triển vượt bậc internet Internet hình thức truyền thơng mới ngày thu hút đông đảo người sử dụng, bên cạnh nhu cần ăn no, mặc đẹp nhu cầu giải trí người ngày tăng cao người dùng internet bắt đầu tìm kiếm nơi thỏa mãn nhu cầu thơng tin, giải trí,… Mạng xã hội đời đáp ứng nhu cầu Vì em xin chọn đề tài xây dựng “ỨNG DỤNG MẠNG XÃ HỘI” để hồn thiện đáp ứng nhu cầu người hiện Đồ án sở TS.Nguyễn Đức Hiển MỤC LỤC Trang Chương Giới thiệu 1.1 Tên dự án: 1.2 Sinh viên thực hiện: 1.3 Ý tưởng đề tài: 1.4 Mục tiêu dự án: 1.5 Phương pháp thực hiện: 1.6 Kế hoạch thực hiện: Chương Nghiên Cứu Thiết Kế .3 2.1 Ngôn ngữ cơng cụ lập trình sử dụng: .3 2.1.1 Nodejs: 2.1.2 Express Framework: 2.1.3 Android Studio: 2.1.4 Visual Studio Code (VS Code hay VSC): 19 2.1.5 Java (Android): 20 2.1.6 JS (JavaScript): 20 2.1.7 Restful API: 21 2.2 Phân tích thiết kệ hệ thống website: .21 2.2.1 Các actor phân tích chức năng: .21 2.2.2 Biểu đồ use case 22 2.3 Cơ sở liệu: 24 2.3.1 Mô tả số bảng hệ thống: .24 2.3.2 Biểu đồ sở liệu: .25 2.4 Biểu đồ lớp: .26 26 2.5 Biểu đồ hoạt động: 26 Chương Xây dựng Back-end Restful API 29 3.1 Mục đích: 29 3.2 Thiết kế trang web: 29 3.3 Một sớ hình ảnh web Back-end: 29 3.4 Một số đoạn code web Back-end: 32 3.5 Resful API: 33 Chương Xây dựng ứng dụng android 34 4.1 Mục tiêu phân tích: 34 4.2 Xây dựng: .34 4.2.1 Sử dung thư viện retrofit android 34 4.2.2 Sử dụng socket.io : 35 4.2.3 Cấu trúc thư mục android 36 4.3 Sản phẩm ứng dụng mạng xã hội: 38 4.3.1 Giao diện màng hình chờ splash screen: 38 4.3.2 Giao diện hình đăng nhập – đăng ký: 39 4.3.3 Giao diện 39 4.3.4 Giao diện hình cá nhân: .41 4.3.5 Màn hình stories: 41 Đồ án sở TS.Nguyễn Đức Hiển 4.3.6 Màn hình bình luận: 42 Chương Kết luận 44 5.1 Kết đạt được: 44 TÀI LIỆU THAM KHẢO 45 Đồ án sở TS.Nguyễn Đức Hiển DANH MỤC CÁC BẢNG Trang Bang 2-1 Cấu trúc bảng Users 24 Bang 2-2 Cấu trúc bảng Posts 24 Bang 2-3 Cấu trúc bảng Story 25 Bang 2-4 Cấu trúc bảng Friends .25 Đồ án sở TS.Nguyễn Đức Hiển DANH MỤC CÁC HÌNH ẢNH Trang Hình 2-1 Sơ đồ Use-case mơ tả chức chính hệ thớng .22 Hình 2-2 Sơ đồ use-case mô tả các chứng chi tiết trang homde .23 Hình 2-3 Sơ đồ use-case mơ tả chức chi tiết trang video 23 Hình 2-4 Sơ đồ use-case mô tả chi tiết chức trang thơng báo 24 Hình 2-5 Biểu đồ sở liệu 25 Hình 2-6 Biểu đồ lớp 26 Hình 2-7 Biểu đồ hoạt động đăng nhập 26 Hình 2-8 Biểu đồ hoạt động đổi mật .27 Hình 2-9 Biểu đồ hoạt động sửa thơng tin cá nhân .27 Hình 2-10 Biểu đồ hoạt động đăng 27 Hình 2-11 Biểu đồ hoạt động đăng stories 28 Hình 2-12 Biểu đồ hoạt động đăng ký tài khoảng 28 Hình 3-13 Trang login 29 Hình 3-14 Trang quản lí user 30 Hình 3-15 Trang quản lí viết .30 Hình 3-16 Trang quản lí stories 31 Hình 3-17 Trang quản lí theme viết 31 Hình 3-18 Demo đoạn code web back-end 32 Hình 3-19 Demo đoạn code web Back-end 32 Hình 3-20 Đoạn code lấy liệu viết 33 Hình 3-21 Dữ liệu Api viết 33 Hình 4-22 Android app – Màn hình chờ splash screen 38 Hình 4-23 Android app –màn hình đăng nhập đăng ký 39 Hình 4-24 Android app – Màn hình chính video 40 Hình 4-25 Android app –Màng hình thơng báo friend .40 Hình 4-26 Android app: Màn hình cá nhân, ảnh 41 Hình 4-27 Android app: Màn hình đăng, xem stories 42 Hình 4-28 Android app – Màn hình bình luận 43 Đồ án sở TS.Nguyễn Đức Hiển Chương Giới thiệu 1.1 Tên dự án: Ứng dụng mạng xã hội 1.2 Sinh viên thực hiện:  Nguyễn Minh Thắng - 18IT103 1.3 Ý tưởng đề tài: Trong thời đại công nghệ 4.0, nhu cầu giao tiếp thông tin người trở nên cực kì coi trọng Vì sự đời Internet coi phát minh vĩ đại người, thay đổi sống nhân loại, kết nối người khắp châu lục Hiện Internet trở nên cực kì quan trọng với đời sống người, đặc biệt giới trẻ Internet cho phép người dùng giao tiếp, kết nối với thiết bị máy tính, điện thoại thơng minh, ti vi… Hiện Internet gắn liền với sự phát triển xã hội, phần thiếu sống người, gắn liền với tiến xã hội, sự phát triển kinh tế, an ninh, văn hóa, tôn giáo… Đây ứng dụng mạng xã hội, nơi người dùng làm quen, kết bạn, giao lưu với nhau, cập nhật thông tin, chia điều sống với 1.4 Mục tiêu dự án: Tạo ứng dụng đơn giản, giao diện đẹp, dễ nhìn Giúp đáp ứng nhu cầu cập nhật thông tin ngày chia sống bản thân kết bạn bốn phương cho người sử dụng 1.5 Phương pháp thực hiện: Tìm hiểu ứng dụng mạng xã hội có sẵn (Facebook, Instagram, Twitter, v.v) Phân tích giao diện, chức bật Từ đó, dựa vào chức lên kế hoạch từ đầu, đúc kết, đưa chức năng, yêu cầu hoàn chỉnh cho ứng dụng Sử dụng công cụ Visual Studio Code, Nodejs, Express Framework, Mongodb để tạo web server back-end kiểm thử localhost Sau hoàn chỉnh đưa lên internet Sử dụng phần mềm Android Studio để tạo ứng dụng hoàn chỉnh chạy thiết bị di động dựa vào API trả từ back-end web server đưa lên internet 1.6 Kế hoạch thực hiện: Thời gian Tuần thứ Nội dung thực Chọn đề tài , xây dựng dề cương báo cáo Tuần thứ Tìm hiểu Express framework Tìm hiểu cơng nghệ sử dụng cho ứng dụng Tuần Phân tích thiết kế hệ thống Tuần thứ 4-6 Tuần thứ 7-9 Tuần thứ 10 … Tạo web backend, lấy sở liệu mongodb atlas Xây dựng giao diện android Xây dựng chức ứng dụng Chỉnh sửa lại ứng dung, viết báo cáo làm slide … Chương Nghiên Cứu Thiết Kế 2.1 Ngôn ngữ cơng cụ lập trình sử dụng: 2.1.1 Nodejs: 2.1.1.1 Nodejs gì: Nodejs hệ thống phần mềm thiết kế để viết ứng dụng internet có khả mở rộng, đặc biệt máy chủ web Chương trình viết JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng để tối tiểu tổng chi phí tối đại khả mở rộng Node.js bao gờm có V8 JavaScript engine Google, libUV, vài thư viện khác 2.1.1.2 Cách cài đặt: Đầu tiên, bạn truy cập vào liên kết tải Node.js để tải phiên bản Node.js tương thích với hệ điều hành mà bạn sử dụng Sau tải bạn click đúp vào file cài đặt tiến hành tiến trình cài đặt Trong cài đặt bạn nên chọn thơng số mặc định sẵn có mà trình cài đặt đưa cho bạn Khi hỏi xem tính bạn muốn cài đặt bạn nên chọn cài đặt tất cả bao gồm cài đặt Node Package Manager - NPM: Sau cài đặt xong, bạn mở chương trình Windows Command Prompt lên chạy câu lệnh: >node –help Nếu theo hướng dẫn bạn thấy hình hiển thị kết quả sau:  Trang quản lí stories: Hình 3-16  Trang quản lí stories Trang quản lí viết: Hình 3-17 Trang quản lí theme viết 3.4 Một số đoạn code web Back-end:  Đoạn code lấy danh sách viết: Hình 3-18  Demo đoạn code web back-end Đoạn code hiển thị danh sách viết: Hình 3-19 Demo đoạn code web Back-end 3.5 Resful API:  Đoạn code lấy liệu: Hình 3-20  Đoạn code lấy liệu viết Dữ liệu lấy : Hình 3-21 Dữ liệu Api viết Chương Xây dựng ứng dụng android 4.1 Mục tiêu phân tích:  Xây dựng sản phẩm ứng dụng android hoàn chỉnh cho người dùng  Sản phẩm dành cho người dùng không dành cho quản trị viên thực hiện thao tác quản lí hệ thống  Ứng dụng có nhiều chức đa dạng dễ sử dụng  Quản trị viên dùng ứng dụng để đăng sửa xóa viết đăng lên  Ứng dụng sử dụng restful api để thực hiện tác vụ lấy thông tin từ sở liệu 4.2 Xây dựng: 4.2.1 Sử dung thư viện retrofit android  Cài đặt Retrofit Gson cho dự án (project) android:  Đưa implementation sau vào file build.gradle (app) project:  Các implementation bao gồm:  Thư viện Retrofit  Thư viện Gson  Thư viện okhttp3  Lớp (Class) hổ trợ kết nối đến serve thực hiện yêu cầu restful api từ app đến web services  Tạo model nhận,xử lí lưu trữ thơng tin trả  Api Login sử dụng model LoginModel để đưa lên email mật khẩu đăng nhập, đăng nhập thành công trả token lưu trữ model LoginResponse  Tạo đối tượng Retrofit (Retrofit client): 4.2.2 Sử dụng socket.io :  Cài đặt Socket.io cho dự án (project) android:  Khởi tạo socket.io android:  Sử dụng socket.io để gửi liệu thời gian thực lên serve lấy  Sử dụng like viết, comment viết, thông báo  Đoan code nhận thông báo thời gian thực : 4.2.3 Cấu trúc thư mục android 4.2.3.1 Các activity :       Màn hình chờ Đăng nhập Đăng ký Màn hình Màn hình hiển thị danh sách lời mời kết bạn Màn hình tìm kiếm        Màn hình đăng viết Màn hình đăng stories Màn hình hiển thị hình ảnh cá nhân Màn hình hiển thị danh sách followers Màn hình hiển thị danh sách following Màn hình cá nhân Màn hình chỉnh sữa, xem thông tin cá nhân 4.2.3.2 Các fragment :      Màn hình xem Màn hình xem video Màn hình hiển thị thơng báo Màn hình hiển thị danh sách bạn bè Màn hình menu 4.2.3.3 Các dialog     Dialog bình luận Dialog xem hình ảnh viết Dialog xem hình ảnh cá nhân Dialog menu 4.2.3.4 Adapter package :          Adapter danh sách viết Adapter danh sách stories Adapter danh sách comment Adapter danh sách video Adapter danh sách thông báo Adapter danh sách bạn bè Adapter danh sách follower Adapter danh sách following Adapter danh sách hình ảnh cá nhân 4.2.3.5 Model package :  Các model chịu trách nhiệm lưu trữ thơng tin, xử lí thơng tin trả đưa lên  Bao gồm :  User : thông tin đăng nhập  Profile : thông tin cá nhân  Posts: thông tin viết  Comment: thông tin bình luận 4.2.3.6 Thư mục resources:  Anim folder: animation (Hoạt hình động)  Drawble folder: hình ảnh, icon cho giao diện  Layout folder: giao diện activity, item recycler view  Menu folder: giao diện menu  Values folder: giá trị màu sắc, phong cách biến string lưu trữ 4.3 Sản phẩm ứng dụng mạng xã hội: 4.3.1 Giao diện màng hình chờ splash screen: Hình 4-22 Android app – Màn hình chờ splash screen  Màn hình splash hiện mở ứng dụng  Quá trình chạy hình splash screen thực hiện tác vụ ngầm Ứng dụng lấy token lần đăng nhập trước kiểm tra xem phiên đăng nhập hiệu lực hay không Nếu thành công lấy thông tin người dùng chuyển đến MainActivity, cịn thất bại chuyển đến hình Đăng nhập để người dùng đăng nhập lại 4.3.2 Giao diện hình đăng nhập – đăng ký:  Ở giao diện đăng nhập, người dùng cần nhập vào email mật khẩu tài khoản họ có tài khoản, hệ thống kiểm tra xem tài khoản mật khẩu có hợp lệ hay khơng, hợp lệ chuyển vào hình chính, thất bại in thơng báo  Trong trường hợp người dùng chưa có tài khoản hệ thống, cần nhấp vào nút “Register” chuyển đến giao diện đăng ký tài khoản Hình 4-23     Android app –màn hình đăng nhập đăng ký 4.3.3 Giao diện chính Giao diện gờm fragment : home, video, notification, friend, menu Giao diện Home chứa viết, stories Ngoài toolbar có nút tìm kiếm Bình luận, like, xem chi tiết viết, Hình 4-24 Hình 4-25 Android app – Màn hình chính video Android app –Màng hình thơng báo friend  Màn hình thơng báo xem thơng báo có người dùng like viết mình, bình luận viết viết theo dõi, bạn bè người theo dõi đăng mới, stories mới, kèm theo lời mời kết bạn  Click vào thông báo chuyển đến trang xem chi tiết, trả lời lời mời kết bạn 4.3.4 Giao diện hình cá nhân: Hình 4-26 Android app: Màn hình cá nhân, ảnh  Màn hình cá nhân lưu viết cá nhân, thông tin cá nhân, hình ảnh người dùng tải lên  Có thể thay đỗi ảnh đại diện, ảnh nền, thơng tin cá nhân 4.3.5 Màn hình stories: Hình 4-27 4.3.6 Android app: Màn hình đăng, xem stories Màn hình bình luận: Hình 4-28 Android app – Màn hình bình luận  Màn hình bình luận cho phép bình luận viết  Bình luận gửi lên văn bản, file hình ảnh Chương Kết luận 5.1 Kết đạt được:  Qua trình tìm hiểu, xây dựng thực hiện dự án, chúng em rút đúc kết lại kết quả mà bản thân thực hiện được:  Tạo ứng dụng đơn giản, giao diện đẹp, dễ nhìn,  Hỗ trợ người chia sẽ, lưu trữ hình ảnh đẹp,  Tận dụng kiến thức học lập trình web lập trình android  Tích lũy kinh nghiệm trải nghiệm trình thực hiện dự án, làm việc nhóm  Củng cố thêm kiến thức lập trình, phân tích thiết kế hệ thống TÀI LIỆU THAM KHẢO Node js: https://nodejs.org/en/ JWT Document: https://jwt-auth.readthedocs.io/en/docs/ Android Document: https://developer.android.com/docs Retrofit Android: https://square.github.io/retrofit/ …