Đang tải... (xem toàn văn)
ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐH CNTT&TT VIỆT HÀN BÁO CÁO ĐỒ ÁN CHUYÊN ĐỀ ĐỀ TÀI MẠNG XÃ HỘI DÀNH CHO GIỚI TRẺ MỞ ĐẦU Mạng xã hội là công cụ phổ biến hiện nay và trong tương lai nó sẽ tiếp tục phát triển Vào[.]
ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐH CNTT&TT VIỆT - HÀN BÁO CÁO ĐỒ ÁN CHUYÊN ĐỀ ĐỀ TÀI: MẠNG XÃ HỘI DÀNH CHO GIỚI TRẺ MỞ ĐẦU Mạng xã hội công cụ phổ biến tương lai tiếp tục phát triển Vào đầu năm 2020, theo thống kê, lượng người dùng mạng xã hội toàn giới khoảng 3,3 tỉ người Tại Việt Nam có 69 triệu tài khoản Facebook, chiếm 2/3 dân số Việt Nam (96 triệu người_năm 2019) Với số liệu đủ cho thấy quan tâm người mạng xã hội Vì việc phát triển ứng dụng mạng xã hội riêng giành cho Việt Nam giúp có thêm nhiều lựa chọn tạo nên riêng cho người dùng Việt Nam Với học em chọn đề tài “mạng xã hội cho giới trẻ “để thực đồ án chuyên nghành với yêu cầu ứng dụng đa tảng Trong q trình làm đồ án, nhóm em có nhận hướng dẫn tận tình thầy Nguyễn Đức Hiển bạn lớp 17IT1 để hoàn thành tốt đồ án Trong trình thực đồ án khơng thể tránh khỏi sai xót, nhóm em mong nhận quan tâm bảo thầy Nhóm xin chân thành cảm ơn! MỤC LỤC Chương I: Tổng quan đề tài 1.1 Tổng quan 1.2 Phương pháp, kết 1.2.1 Phương pháp triển khai thực đề tài 1.3 Cấu trúc đồ án Chương II: Nghiên cứu tổng quan 2.1 Đối tượng phạm vi nghiên cứu 2.1.1 Đối tượng nghiên cứu 2.1.2 Phạm vi nghiên cứu 2.2 Cơ sở lí thuyết thực tiền 2.2.1 Cơ sở lí thuyết 2.2.2 Thực tiễn Chương III: Cơ sở lí thuyết phân tích thiết kế hệ thống 3.1 Ngơn ngữ lập trình 3.2 Mơ hình tổng quan 3.3 Phân tích thiết kế hệ thống 3.3.1 Biểu đồ UseCase ClassDiagram 3.3.1.1 Web 3.3.1.2 Mobile Chương IV: Xây dựng ứng dụng triển khai cài đặt 4.1 Cài đặt OpenCV công cụ phát triển 4.1.1 Cài đặt Visual Studio Code 4.1.2 Tiến hành cài đặt NodeJS 4.1.3 Cài đặt React React Native 4.1.4 Cài đặt mongooDB 4.2 Xây dựng ứng dụng 4.2.1 Mơ hình tổng quan 4.2.2 Xây dựng chi tiết ứng dụng 4.3 Chạy ứng dụng kiểm tra kết 4.3.1 Chạy ứng dụng 4.3.2 Kiểm tra kết Chương V: Kết luận định hướng phát triển 5.1 Kết luận 5.2 Định hướng phát triển DANH MỤC HÌNH Hình Biểu đồ UseCase cho Web App Hình Biểu đồ UseCase cho Mobile App Hình Biểu đồ UseCase Admin Hình Biểu đồ Class Diagram Hình NET Framework 4.5.2 Hình Cài đặt Visual Studio Code Hình Cài đặt Nodejs Hình Create project ReactJS Hình Cấu trúc thư mục ReactJS sau hồn thành cài đặt Hình 10 Tạo phần backend cho App Hình 11 Api tạo tài khoản user Hình 12 Web app UI Hình 13 Mobile app UI Hình 14 Đăng xuất Hình 15 Add post DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Model-Controller-View Viết tắt MVC Chương Tổng quan đề tài 1.1 Tổng quan Với phát triển khoa học-kĩ thuật,cách mạng công nghiệp 4.0, người tiếp cận với đồ cơng nghệ máy tính , điện thoại thông minh,… Với cách tiếp cận với thông tin cách nhanh chóng, tiện lợi trang báo điện tử phát triển tốt, ta thấy phát triển mạng xã hội, nơi giúp ta chia sẻ, lưu trữ thông tin thân, kiến thức, hay thông tin xã hội thú vị Mạng xã hội công cụ phổ biến tương lai tiếp tục phát triển Vào đầu năm 2020, theo thống kê, lượng người dùng mạng xã hội toàn giới khoảng 3,3 tỉ người Tại Việt Nam có 69 triệu tài khoản Facebook, chiếm 2/3 dân số Việt Nam (96 triệu người_năm 2019) Với số liệu đủ cho thấy quan tâm người mạng xã hội Vì việc phát triển ứng dụng mạng xã hội riêng giành cho Việt Nam giúp có thêm nhiều lựa chọn tạo nên riêng cho người dùng Việt Nam Với kiến thức mà học yêu cầu đồ án chuyên đề ứng dụng đa tảng, em chọn đề tài “Mạng xã hội dành cho giới trẻ”, em muốn tạo ý đến lượng người dùng đông đảo giới trẻ để tạo đà phát triển cho ứng dụng 1.2 Phương pháp, kết 1.2.1 Phương pháp triển khai thực đề tài: Với yêu cầu toán ứng dụng đa tảng em chọn viết web application ngơn ngữ ReactJs ReactJS thư viện viết javascript dùng để xây dụng giao diện người dùng (UI) facebook phát triển Với cộng đồng đông đảo phát triển với thư viện hỗ trợ phong phú React giúp chia thành component dễ dàng quản lí tái sử dụng Đối với phần mobile application, em chọn ngôn ngữ React Native Là ngôn ngữ mà chủ đạo ReacJS Sử dụng React Native để xây dựng ứng dụng IOS, Android Database dùng đồ án MongoDB in the cloud MongoDB database hướng tài liệu (document), dạng NoSQL database Vì thế, MongoDB tránh cấu trúc table-based relational database để thích ứng với tài liệu JSON có schema linh hoạt gọi BSON MongoDB sử dụng lưu trữ liệu dạng Document JSON nên collection các kích cỡ document khác Các liệu lưu trữ document kiểu JSON nên truy vấn nhanh Tại phần backend đồ án, em chọn NodeJS, để dễ dàng kết hợp với ngôn ngữ database 1.3 Cấu trúc đồ án Quá trình xây dựng hoàn thành đồ án tiến hành qua quy trình sau: -Nghiên cứu tổng quan -Phân tích thiết kế hệ thống triển khai -Kết luận hướng phát triển Chương Nghiên cứu tổng quan 2.1 Đối tượng phạm vi nghiên cứu 2.1.1 Đối tượng nghiên cứu Đề tài ứng dụng đa tảng giải vấn đề đồng hai tảng Web App Mobile App Nhằm tạo nên trải nghiệm tốt người dùng 2.1.2 Phạm vi nghiên cứu Phạm vi nghiên cứu đề tài “Mạng xã hội cho giới trẻ”: Tìm hiểu cách hoạt động Sử dụng ReactJs React Native để tạo giao diện tương tác với người dùng Sử dụng NodeJS để tạo phần backend cho ứng dụng Hiểu áp dụng mơ hình làm việc MVC để dễ dàng quản lí, sửa chữa 2.2 Cơ sở lí thuyết thực tiễn 2.2.1 Cơ sở lý thuyết Nhằm xây dựng ứng dụng phù hợp với vấn đề đặt ra, mặt lý thuyết đề tài tìm hiểu nghiên cứu lĩnh vực sau: -Tìm hiểu ngơn ngữ lập trình ReactJS, React Native, NodeJS, Javascript, -Tìm hiểu cách hoạt động MongoDB -Phân tích thiết kế hệ thống mạng xã hội -Thiết kế giao diện(UI) cách phù hợp quen thuộc dể dàng sử dụng cho người dùng -Nghiên cứu,tìm hiểu mơ hình Model-Controler-View(MVC) 2.2.2 Thực tiễn Từ sở lí thuyết đề tài xây dựng ứng dụng mạng xã hội với tính năng: -Login, Logout -Add Profile Edit Profile -Create Post, Edit Post , Delete Post, -New Feed -Add Friend, Un Friend, Show Friend - Create page/group, Edit page/group, Delete page/group -Tương tác với new Feed Like, Share, Comment Chương 3: CƠ SỞ LÍ THUYẾT Trong chương tập trung nghiên cứu tìm hiểu ngơn ngữ lập trình Python, kĩ thuật nhận diện với hỗ trợ thư viện Opencv 3.1 Ngơn ngữ lập trình Python ReactJS thư viện hỗ trợ code giao diện, lên năm gần với xu hướng Single Page Application React bật với đơn giản dễ dàng phối hợp với thư viện khác cửa javascript Nếu AngularJS Framework cho phép nhúng code javasscript code html thông qua attribute ng-model, ng-repeat với react library cho phép nhúng code html code javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu Một điểm hấp dẫn React thư viện không hoạt động phía client, mà cịn render server kết nối với React dùng Virtual DOM(DOM ảo) giúp tang hiệu cho ứng dụng React Native framework dùng để xây dụng ứng dụng đa tảng iOS, Android, Web, với tảng ReactJS NodeJS tảng xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript, giúp xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng Với ưu điểm như: có cộng đồng người dùng lớn mạnh, tốc độ xử lí nhanh xử lí bất đồng NodeJS dùng cho phát triển server web 3.2 Mơ hình tổng quan Tạo giao diện người dùng web app ReactJS mobile app React Native Tại server web ta dùng nodejs kết xử lí các kiện kết nối với database MongoDB 3.3 Phân tích thiết kế hệ thống 3.3.1 Biểu đồ useCase Biểu đồ mô tả chức mà người dùng thực hai tảng web mobile Hình 1: Biểu đồ UseCase cho Web App Hình 2: Biểu đồ UseCase cho Mobile App Dùng Expo CLI Sau hồn tất, ta có cấu trúc thư mục sau: 4.1.4 Cài đặt MongoDB cloud: Truy cập vào https://cloud.mongodb.com/ Đăng kí tài khoản login với tài khoản google Chọn cấu hình: Chọn server theo ý mình: Chở vài phút hoàn thành setup, thời gian cịn thuộc vào máy tính bạn nhanh hay chậm 4.2 Xây dựng ứng dụng 4.2.1 Mơ hình tổng quan Mơ hình tổng thể hệ thống bao gồm: -Giao diện web viết Reacjs -Giao diện mobile viết React Native -Server viết NodeJs, Express -Database mongoDB 4.2.2 Xây dựng chi tiết ứng dụng 4.2.2.1 Tạo server cho web app mobile app Nodejs: Hình 10: Tạo phần backend cho App Chia thành controller để dễ quản lí: