ĐẠI HỌC ĐÀ NẴNGTRƯỜ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Ẻ

Giảng viên hướng dẫn : TS. Nguyễn Đức Hiển Sinh viên thực hiện : Đặng Công Hưng 17IT014 Lớp : 17IT1

Đà nẵng, tháng 12 năm 2020

ĐẠI HỌC ĐÀ NẴNGTRƯỜNG ĐH CNTT&TT VIỆT - HÀN

ĐỒ ÁN CHUYÊN ĐỀ

MẠNG XÃ HỘI GIÀNH CHO GIỚI TRẺ

Đà Nẵng, tháng 12 năm 2020

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 đầu năm 2020, theo thống kê, lượng người dùng mạng xã hội trên toàn thế giới khoảng 3,3 tỉ người. Tại Việt Nam có hơn 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 những số liệu trên cũng đủ cho thấy sự quan tâm của mọi người đối với mạng xã hội là như thế nào. Vì vậy việc phát triển một ứng dụng mạng xã hội riêng giành cho Việt Nam sẽ giúp có thêm nhiều lựa chọn hơn và tạo nên cái riêng cho người dùng Việt Nam.

Với những gì đã được học em chọn đề tài “mạng xã hội cho giới trẻ “để thực hiện đồ án chuyên nghành này với yêu cầu là 1 ứng dụng đa nền tảng.

Trong quá trình làm đồ án, nhóm em đã có nhận được sự hướng dẫn tận tình của thầy Nguyễn Đức Hiển cùng các bạn trong lớp 17IT1 để hoàn thành tốt đồ án này.

Trong quá trình thực hiện đồ án không thể tránh khỏi những sai xót, vì vậy nhóm em rất mong nhận được sự quan tâm chỉ bảo của các thầy cô.

Nhóm xin chân thành cảm ơn!

3

NHẬN XÉT (Của giảng viên hướng dẫn)

...………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………...………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………....………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………...………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………...………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………...……………………..…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

Chữ kí xác nhận của giảng viên

4

MỤC LỤC

Chương I: Tổng quan đề tài1.1 Tổng quan1.2 Phương pháp, kết quả

1.2.1 Phương pháp triển khai thực hiện đề tài1.3 Cấu trúc đồ án

Chương II: Nghiên cứu tổng quan2.1 Đối tượng và phạm vi nghiên cứu

2.1.1 Đối tượng nghiên cứu2.1.2 Phạm vi nghiên cứu

2.2 Cơ sở lí thuyết và thực tiền2.2.1 Cơ sở lí thuyết2.2.2 Thực tiễn

Chương III: Cơ sở lí thuyết và phân tích thiết kế hệ thống3.1 Ngôn ngữ lập trình3.2 Mô hình tổng quan3.3 Phân tích thiết kế hệ thống

3.3.1 Biểu đồ UseCase và ClassDiagram3.3.1.1 Web 3.3.1.2 Mobile

Chương IV: Xây dựng ứng dụng và triển khai cài đặt4.1 Cài đặt OpenCV và các công cụ phát triển

4.1.1 Cài đặt Visual Studio Code4.1.2 Tiến hành cài đặt NodeJS4.1.3 Cài đặt React và React Native4.1.4 Cài đặt mongooDB

4.2 Xây dựng ứng dụng4.2.1 Mô hình tổng quan4.2.2 Xây dựng chi tiết ứng dụng

4.3 Chạy ứng dụng và kiểm tra kết quả4.3.1 Chạy ứng dụng4.3.2 Kiểm tra kết quả

Chương V: Kết luận và định hướng phát triển5.1 Kết luận5.2 Định hướng phát triển

5

DANH MỤC HÌNH

Hình 1. Biểu đồ UseCase cho Web AppHình 2. Biểu đồ UseCase cho Mobile AppHình 3. Biểu đồ UseCase AdminHình 4. Biểu đồ Class DiagramHình 5. NET Framework 4.5.2Hình 6. Cài đặt Visual Studio CodeHình 7. Cài đặt NodejsHình 8. Create project ReactJSHình 9. Cấu trúc thư mục của ReactJS sau khi hoàn thành cài đặtHình 10. Tạo phần backend cho AppHình 11. Api tạo tài khoản userHình 12. Web app UIHình 13. Mobile app UIHình 14. Đăng xuấtHình 15. Add post

6

DANH MỤC CỤM TỪ VIẾT TẮT

STT Cụm từ Viết tắt1 Model-Controller-View MVC2

7

Chương 1 Tổng quan đề tài

1.1 Tổng quan

Với sự phát triển của khoa học-kĩ thuật,cách mạng công nghiệp 4.0, mọi người hầu như được tiếp cận với những đồ công nghệ như máy tính , điện thoại thông minh,…Với cách tiếp cận với thông tin một cách nhanh chóng, tiện lợi thì những trang báo điện tử phát triển rất tốt, trong đó ta thấy được sự phát triển của các mạng xã hội, nơi giúp ta chia sẻ, lưu trữ thông tin về bản thân, kiến thức, hay những thông tin xã hội thú vị.

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 đầu năm 2020, theo thống kê, lượng người dùng mạng xã hội trên toàn thế giới khoảng 3,3 tỉ người. Tại Việt Nam có hơn 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 những số liệu trên cũng đủ cho thấy sự quan tâm của mọi người đối với mạng xã hội là như thế nào. Vì vậy việc phát triển một ứng dụng mạng xã hội riêng giành cho Việt Nam sẽ giúp có thêm nhiều lựa chọn hơn và tạo nên cái riêng cho người dùng Việt Nam.

Với kiến thức mà mình đã được học và yêu cầu của đồ án chuyên đề là một ứng dụng đa nền tảng, em chọn đề tài “Mạng xã hội dành cho giới trẻ”, em muốn tạo sự chú ý đến lượng người dùng đông đảo là giới trẻ để tạo đà phát triển cho ứng dụng.

1.2 Phương pháp, kết quả1.2.1 Phương pháp triển khai thực hiện đề tài:

Với yêu cầu bài toán là ứng dụng đa nền tảng thì em chọn viết web application là ngôn ngữ ReactJs. ReactJS là thư viện được viết bằng javascript dùng để xây dụng giao diện người dùng (UI) do facebook phát triển. Với cộng đồng đông đảo và phát triển với các thư viện hỗ trợ phong phú. React giúp chia thành các component dễ dàng quản lí và 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 của nó là ReacJS. Sử dụng React Native để xây dựng ứng dụng IOS, Android.

Database được dùng trong đồ án chính là MongoDB in the cloud. MongoDB là một database hướng tài liệu (document), một dạng NoSQL database. Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON. MongoDB sử dụng lưu

8

trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau. Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.

Tại phần backend của đồ án, em chọn NodeJS, để dễ dàng kết hợp với những ngôn ngữ và database ở trên. 1.3 Cấu trúc đồ án

Quá trình xây dựng và hoàn thành đồ án tiến hành qua các quy trình sau:-Nghiên cứu tổng quan-Phân tích thiết kế hệ thống và triển khai-Kết luận và hướng phát triển

Chương 2 Nghiên cứu tổng quan

2.1 Đối tượng và phạm vi nghiên cứu2.1.1 Đối tượng nghiên cứu

Đề tài về một ứng dụng đa nền tảng và giải quyết được vấn đề đồng bộ giữa hai nền tảng là Web App và Mobile App. Nhằm tạo nên trải nghiệm tốt nhất đối với người dùng.2.1.2 Phạm vi nghiên cứuPhạm vi nghiên cứu của đề tài “Mạng xã hội cho giới trẻ”:

Tìm hiểu về cách hoạt động Sử dụng ReactJs và 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 và áp dụng các mô hình làm việc như MVC để dễ dàng quản lí, sửa chữa.

2.2 Cơ sở lí thuyết và thực tiễn2.2.1 Cơ sở lý thuyếtNhằm xây dựng một ứng dụng phù hợp với vấn đề đặt ra, về mặt lý thuyết đề tài sẽ tìm hiểu và nghiên cứu các 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 về cách hoạt động của MongoDB-Phân tích và thiết kế hệ thống mạng xã hội.-Thiết kế giao diện(UI) một cách phù hợp và quen thuộc dể dàng sử dụng cho người dùng.-Nghiên cứu,tìm hiểu về mô hình Model-Controler-View(MVC)

2.2.2 Thực tiễnTừ cơ sở lí thuyết đề tài sẽ xây dựng ứng dụng mạng xã hội với các tính năng:-Login, Logout-Add Profile. Edit Profile-Create Post, Edit Post , Delete Post, -New Feed-Add Friend, Un Friend, Show Friend.

9

- Create page/group, Edit page/group, Delete page/group.-Tương tác với new Feed như Like, Share, Comment.

Chương 3: CƠ SỞ LÍ THUYẾT

Trong chương này sẽ tập trung nghiên cứu tìm hiểu về ngôn ngữ lập trình Python, các kĩ thuật nhận diện cùng với sự hỗ trợ của thư viện Opencv

3.1 Ngôn ngữ lập trình Python ReactJS là 1 thư viện hỗ trợ code giao diện, nổi lên trong những năm gần đây với xu hướng Single Page Application. React nổi bật với sự đơn giản và dễ dàng phối hợp với các thư viện khác cửa javascript. Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React dùng Virtual DOM(DOM ảo) giúp tang hiệu năng cho ứng dụng.

React Native là framework dùng để xây dụng ứng dụng đa nền tảng như iOS, Android, Web, với nền tảng là ReactJS.

NodeJS là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript, giúp xây dựng các ứng dụng web một cách đơn giản và dễ dàng mở rộng. Với các ưu điểm như: có cộng đồng người dùng lớn mạnh, tốc độ xử lí nhanh và xử lí bất đồng bộ. NodeJS được dùng cho phát triển server web.

3.2 Mô hình tổng quanTạo giao diện người dùng trên web app bằng ReactJS và trên mobile app bằng

React Native. Tại server web ta dùng nodejs kết xử lí các các sự kiện và kết nối với database là MongoDB.3.3 Phân tích thiết kế hệ thống3.3.1 Biểu đồ useCase

Biểu đồ mô tả các chức năng mà người dùng có thể thực hiện trên hai nền tảng là web và mobile.

10

Hình 1: Biểu đồ UseCase cho Web App

11

Hình 2: Biểu đồ UseCase cho Mobile App

12

Hình 3: Biểu đồ UseCase Admin3.3.2 Biểu đồ Class Diagram

Class diagram mô tả kiểu của các đối tượng trong hệ thống và các loại quan hệ khác nhau tồn tại giữa chúng. Là một kỹ thuật mô hình hóa tồn tại ở tất cả các phương pháp phát triển hướng đối tượng. Với các thuộc tính là tên Class, Attribute, Operation.

13

Hình 4: Biểu đồ Class Diagram

Chương 4 Xây dựng ứng dụng và triển khai cài đặt14

4.1 Cài đặt OpenCV và các công cụ phát triển4.1.1 Cài đặt công cụ Visual Studio Code: Visual Studio Code là một trình biên soạn mã nguồn nhẹ nhưng mạnh mẽ, tích hợp các tính năng của một môi trường phát triển chuyên nghiệp như tự gợi ý, trình gỡ lỗi ... cùng với một hệ sinh thái các extensions cho phép mở rộng hơn các tính năng có sẵn. Hiện Visual Studio Code hỗ trợ cho cả Windows, macOS và LinuxVisual Studio Code yêu cầu máy tính phải được cài đặt sẵn .NET Framework 4.5.2. Ta có thể kiểm tra bằng cách vào Control Panel > Programs and Features.

Hình 5:. .NET Framework 4.5.2

Tải Visual Studio Code 1.12 theo đường dẫn: https://code.visualstudio.com

15

Hình 6: Cài đặt Visual Studio Code

Sau khi tải xong và tiến hành cài đặt, ta sẽ dùng Visual Code Studio để xây dựng ứng dụng

4.1.2 Tiến hành cài đặt Nodejs Nodejs là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine. Nodejs sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới. NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Windows cho tới Linux, MacOs nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất. Các bạn truy cập trang web download bộ cài đặt:https://nodejs.org/en/download

Hình 7: Cài đặt Nodejs

Nếu đã hoàn thành cài đặt thì sẽ có thông tin như trên.

4.1.3 Cài đặt thư viện ReactJS và React Native

16

Hình 8: Create project ReactJS

Với projectName chính là tên project của bạn. sau khi hoàn thành thì ta có cấu trúc thư mục:

Hình 9: Cấu trúc thư mục của ReactJS sau khi hoàn thành cài đặt

Sau đó ta trỏ vào thư mục bằng câu lệnh: cd projectName và npm start để run project.

NMP là viết tắt của Node package manager là một công cụ tạo và quản lý các thư viện lập trình Javascript cho Node.js. Trong cộng đồng Javascript, các lập trình viên chia sẻ hàng trăm nghìn các thư viện với các đoạn code đã thực hiện sẵn một chức năng nào đó. Nó giúp cho các dự án mới tránh phải viết lại các thành phần cơ bản, các thư viện lập trình hay thậm chí cả các framework.

Tiếp theo ta cài đặt cho React Native với 2 cách: Dùng React-native-cli

17

Dùng Expo CLI

Sau khi hoàn tất, ta có cấu trúc thư mục như sau:

4.1.4 Cài đặt MongoDB trên cloud:

Truy cập vào https://cloud.mongodb.com/

18

Đăng kí tài khoản hoặc có thể login với tài khoản google.Chọn và cấu hình như trong hình:

19

Chọn server theo ý của mình:

20

Chở một vài phút sẽ hoàn thành setup, thời gian còn tuy thuộc vào máy tính của bạn nhanh hay chậm.

4.2 Xây dựng ứng dụng4.2.1 Mô hình tổng quanMô hình tổng thể của hệ thống bao gồm:-Giao diện web được viết bằng Reacjs-Giao diện mobile được viết bằng React Native-Server được viết bằng NodeJs, Express-Database là mongoDB

4.2.2 Xây dựng chi tiết ứng dụng4.2.2.1 Tạo server cho cả web app và mobile app bằng Nodejs:

21

Hình 10: Tạo phần backend cho App

Chia thành các controller để dễ quản lí:

22

Hình 11: Api tạo tài khoản user

Cấu trúc thư mục được chia ra theo mô hình MCV dễ dàng quản lí, sửa chữa và nâng cấp.

23

Sau đó sẽ dùng Postman để kiểm thử.

Tiếp theo thiết kế giao diện trên web và mobile

24

Hình 12: Web app UI

Hình 13: Mobile app UI

25

Sử dụng thư viện axios để get api từ server:

Chia các thành phần thành các component khác nhau :

26

Khi yêu cầu được gửi từ client

Sẽ được đưa vào action để gửi đến server

27

Sau khi response từ server nó sẽ được đưa vào store_là phần redux giúp cho các biến trong state được các component khác truy suất dễ dàng. Và đây là vòng đời của Redux.

28

Với các initialState(các trạng thái ban đầu), nó sẽ được update khi có một hành động nào đó. 4.3.2 Kết quả thu được:

Đăng kí, đăng nhập, đăng xuất, tạo bài viết, like, comment.

Hình 14: Đăng xuất

29

Hình 15: Add post

30

Chương 5 Kết luận và định hướng phát triển

5.1 Kết luận: Sau một thời gian tìm hiểu bằng kiến thức tích lũy của mình thì em cũng đã có bước đầu xây dựng một ứng dụng đa nền tảng của mình với các chức năng cơ bản.

Vì kiến thức không được nhiều nên ứng dụng vẫn còn khá nhiều hạn chế và cần được phát triển tiếp tục trong thời gian tới.Một số hạn chế:

Các chức năng vận còn chưa đáp ứng đủ Giao diện người dùng vẫn chưa hoàn thiện tuyệt đối, nhằm đem lại trải nghiệm

tốt nhất đối với user. Ứng dụng hoạt động còn chậm, chưa được mượt mà.

5.2 Định hướng phát triển: Nhằm giải quyết các vấn đề hạn chế trên thì cần phải có những nghiên cứu tìm hiểu thêm về các kĩ thuật nhằm giúp tối ưa code cách tốt nhất, giúp cho hệ thống của mình trở nên ổn định hơn.

Hoàn thiện phần thiết kế giao diện người dùng phù hợp và tạo cho user thao tác đơn giản, dễ sử dụng và quen thuộc vì nó sẽ quyết định phần lớn người dùng có dùng ứng dụng hay không.

Tìm hiểu và hoàn thiện các chức năng của ứng dụng.

31

DANH MỤC TÀI LIỆU THAM KHẢO:

https://reactjs.org/https://reactnative.dev/Learn React Hooks by Building a Paint Appmongo_file_uploads/app.js at master · bradtraversy/mongo_file_uploads · GitHub

32