Đồ Án Cơ Sở 1 Đề Tài Showroom Trưng Bày Sản Phẩm Tạo Kiểu Và Chăm Sóc Tóc Nam The Family.docx

ĐẠ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

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áttriể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ànthế 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ếm2/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 đủ chothấ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áttriể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ựachọ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ựchiệ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ìnhcủ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ậynhó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!

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

2.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ứu2.2 Cơ sở lí thuyết và thực tiền

2.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ống

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

4.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ụng

4.2.1 Mô hình tổng quan4.2.2 Xây dựng chi tiết ứng dụng4.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ển

5.1 Kết luận

5.2 Định hướng phát triển

DANH MỤC HÌNH

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

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

Hình 3 Biểu đồ UseCase Admin

Hình 4 Biểu đồ Class Diagram

Hình 5 NET Framework 4.5.2

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

Hình 7 Cài đặt Nodejs

Hình 8 Create project ReactJS

Hình 9 Cấu trúc thư mục của ReactJS sau khi hoà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

2

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

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áttriể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ànthế 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ếm2/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 đủ chothấ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áttriể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ựachọ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 ứngdụ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ụnggiao diện người dùng (UI) do facebook phát triển Với cộng đồng đông đảo và pháttriể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áctài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu 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ácdocument khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truyvấ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ữngngô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ứu

2.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ứu

Phạ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ễn

2.2.1 Cơ sở lý thuyết

Nhằ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ễn

Từ 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

- 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 đâyvới xu hướng Single Page Application React nổi bật với sự đơn giản và dễ dàng phốihợp với các thư viện khác cửa javascript Nếu như AngularJS là một Framework chophé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 codejavascript 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ợpgiữ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 độngtrên phía client, mà còn được render trên server và có thể kết nối với nhau Reactdù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ôngdị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 quan

Tạ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ống

3.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

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

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

Hình 3: Biểu đồ UseCase Admin

3.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ácphươ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

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

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

4.1 Cài đặt OpenCV và các công cụ phát triển

4.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ợpcá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à Linux

Visual 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

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 ứngdụ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, MacOsnên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng JavascriptModule 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ấpnhấ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 NodejsNế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

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ấutrú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

 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:

Đă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:

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

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ụng

4.2.1 Mô hình tổng quan

Mô 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ụng

4.2.2.1 Tạo server cho cả web app và mobile app bằng Nodejs:

Hình 10: Tạo phần backend cho AppChia thành các controller để dễ quản lí:

Hình 11: Api tạo tài khoản userCấ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.

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

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

Hình 12: Web app UI

Hình 13: Mobile app UI

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 :

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

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

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

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

Hình 15: Add post

Chương 5 Kết luận và định hướng phát triể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 thaotá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

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

https://reactjs.org/

https://reactnative.dev/

Learn React Hooks by Building a Paint App

mongo_file_uploads/app.js at master · bradtraversy/mongo_file_uploads · GitHub