cổng thông tin đào tạo - trường Đại học công nghệ thông...
TRANSCRIPT
ĐẠ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