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

Sử dụng phần mềm Android Studio để tạo ứng dụng hoàn chỉnh chạy trên các thiết bị di động dựa vào các API trả về từ back-end web server đã được đưa lên internet.. Sau khi cài đặt xong,

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

- -ĐỒ ÁN CƠ SỞ 3

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

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 3

MỞ ĐẦU

Trong thời đại công nghệ 4.0, xã hội ngày càng phát triển, cuộc sống củacon người ngày càng nâng cao Đi đôi với nền công nghiêp hiện đại là sự pháttriển của nền khoa học kĩ thuật kéo theo đó là sự phát triển vượt bậc của internet.Internet là hình thức truyền thông mới đang ngày càng thu hút đông đảo người sửdụng, bên cạnh những nhu cần ăn no, mặc đẹp thì nhu cầu giải trí của con ngườingày càng tăng cao và người dùng internet bắt đầu tìm kiếm một nơi thỏa mãncác nhu cầu về thông tin, giải trí,… Mạng xã hội đã ra đời đáp ứng những nhucầu đó Vì vậy em xin chọn đề tài xây dựng “ỨNG DỤNG MẠNG XÃ HỘI” để

có thể hoàn thiện và đáp ứng nhu cầu của con người hiện nay

Đồ án cơ sở 3 TS.Nguyễn Đức Hiển

MỤC LỤC

Trang

Chương 1 Giới thiệu 1

1.1 Tên dự án: 1

1.2 Sinh viên thực hiện: 1

1.3 Ý tưởng đề tài: 1

1.4 Mục tiêu của dự án: 1

1.5 Phương pháp thực hiện: 1

1.6 Kế hoạch thực hiện: 2

Chương 2 Nghiên Cứu Thiết Kế 3

2.1 Ngôn ngữ và công cụ lập trình được sử dụng: 3

2.1.1 Nodejs: 3

2.1.2 Express Framework: 6

2.1.3 Android Studio: 7

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 và phân tích chức năng: 21

2.2.2 Biểu đồ use case 22

2.3 Cơ sở dữ liệu: 24

2.3.1 Mô tả một số bảng chính của hệ thống: 24

2.3.2 Biểu đồ cơ sở dữ liệu: 25

2.4 Biểu đồ lớp: 25

2.5 Biểu đồ hoạt động: 26

Chương 3 Xây dựng Back-end và Restful API 28

3.1 Mục đích: 28

3.2 Thiết kế trang web: 28

3.3 Một số hình ảnh web Back-end: 28

3.4 Một số đoạn code web Back-end: 31

3.5 Resful API: 32

Chương 4 Xây dựng ứng dụng android 33

4.1 Mục tiêu và phân tích: 33

4.2 Xây dựng: 33

4.2.1 Sử dung thư viện retrofit 2 android 33

4.2.2 Sử dụng socket.io : 34

4.2.3 Cấu trúc thư mục android 35

4.3 Sản phẩm ứng dụng mạng xã hội: 37

4.3.1 Giao diện màng hình chờ splash screen: 37

4.3.2 Giao diện màn hình đăng nhập – đăng ký: 37

4.3.3 Giao diện chính 38

4.3.4 Giao diện màn hình cá nhân: 39

4.3.5 Màn hình stories: 40

4.3.6 Màn hình bình luận: 41 Đồ án cơ sở 3 TS.Nguyễn Đức Hiển

Chương 5 Kết luận 42 5.1 Kết quả đạt được: 42

TÀI LIỆU THAM KHẢO 43

Đồ án cơ sở 3 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 24

Bang 2-4 Cấu trúc bảng Friends 24

Đồ án cơ sở 3 TS.Nguyễn Đức Hiển

DANH MỤC CÁC HÌNH ẢNH

Trang

No table of figures entries found

Hình 2-1 Sơ đồ Use-case mô tả chức năng chính của hệ thống 22Hình 2-2 Sơ đồ use-case mô tả các chứng năng chi tiết trong trang homde 22Hình 2-3 Sơ đồ use-case mô tả chức năng chi tiết trong trang video 23Hình 2-4 Sơ đồ use-case mô tả chi tiết chức năng trang thông báo 23Hình 2-5 Biểu đồ cơ sở dữ liệu 25

Hình 2-7 Biểu đồ hoạt động đăng nhập 26Hình 2-8 Biểu đồ hoạt động đổi mật khẩu 26Hình 2-9 Biểu đồ hoạt động sửa thông tin cá nhân 26Hình 2-10 Biểu đồ hoạt động đăng bài 27Hình 2-11 Biểu đồ hoạt động đăng stories 27Hình 2-12 Biểu đồ hoạt động đăng ký tài khoảng 27

Hình 3-2 Trang quản lí user 29Hình 3-3 Trang quản lí bài viết 29Hình 3-4 Trang quản lí stories 30Hình 3-5 Trang quản lí theme bài viết 30Hình 3-6 Demo đoạn code web back-end 1 31Hình 3-7 Demo đoạn code web Back-end 2 31Hình 3-8 Đoạn code lấy dữ liệu bài viết 32Hình 3-9 Dữ liệu Api bài viết 32Hình 4-1 Android app – Màn hình chờ splash screen 37Hình 4-2 Android app –màn hình đăng nhập đăng ký 38Hình 4-3 Android app – Màn hình chính và video 38Hình 4-4 Android app –Màng hình thông báo và friend 39Hình 4-5 Android app: Màn hình cá nhân, ảnh 39Hình 4-6 Android app: Màn hình đăng, xem stories 40Hình 4-7 Android app – Màn hình bình luận 41

Đồ án cơ sở 3 TS.Nguyễn Đức Hiển

Chương 1 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 và thông tin của con người trở nên cực kìđược coi trọng Vì thế sự ra đời của Internet được coi là một trong những phát minh vĩ đạicủa con người, thay đổi cuộc sống nhân loại, kết nối con người trên khắp các châu lục Hiệnnay Internet trở nên cực kì quan trọng với đời sống của con người, đặc biệt là giới trẻ

Internet cho phép người dùng giao tiếp, kết nối với nhau bằng những thiết bị như máytính, điện thoại thông minh, ti vi… Hiện nay Internet gắn liền với sự phát triển của xã hội, làmột phần không thể thiếu trong cuộc sống của con người, gắn liền với tiến bộ xã hội, sựphát triển về kinh tế, an ninh, văn hóa, tôn giáo…

Đây là ứng dụng mạng xã hội, nơi người dùng có thể làm quen, kết bạn, giao lưu vớinhau, cập nhật thông tin, chia sẽ mọi điều trong cuộc sống với nhau

1.4 Mục tiêu của dự án:

Tạo ra một ứng dụng đơn giản, giao diện đẹp, dễ nhìn Giúp đáp ứng nhu cầu cập nhậtthông tin hằng ngày cũng như chia sẽ về cuộc sống bản thân và kết bạn bốn phương chongười sử dụng

1.5 Phương pháp thực hiện:

Tìm hiểu về các ứ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 năng nổi bật Từ đó, dựa vào những chức năng đã lên kế hoạch từđầu, đúc kết, và đưa ra các chức năng, yêu cầu hoàn chỉnh cho ứng dụng

Sử dụng các công cụ như Visual Studio Code, Nodejs, Express Framework,

Mongodb để tạo một web server back-end kiểm thử trên localhost Sau khi hoàn chỉnh sẽ

đưa lên internet

Sử dụng phần mềm Android Studio để tạo ứng dụng hoàn chỉnh chạy trên các thiết bị di

động dựa vào các API trả về từ back-end web server đã được đưa lên internet

Tuần thứ 1

Chọn đề tài , xây dựng dề cương báo cáoTuần thứ 2 Tìm hiểu Express framework

Tìm hiểu các công nghệ sử dụng cho ứng dụng

Tuần 3 Phân tích thiết kế hệ thống

Tuần thứ 4-6 Tạo web backend, lấy cơ sở dữ liệu trên mongodb atlas

Tuần thứ 7-9 Xây dựng giao diện android

Xây dựng các chức năng của ứng dụngTuần thứ 10 Chỉnh sửa lại ứng dung, viết báo cáo và làm slide

Chương 2 Nghiên Cứu Thiết Kế

2.1 Ngôn ngữ và công cụ lập trình được sử dụng:

2.1.1 Nodejs:

2.1.1.1 Nodejs là gì:

Nodejs là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả

năng mở rộng, đặc biệt là máy chủ web Chương trình được viết bằng JavaScript, sử dụng

kỹ thuật điều khiển theo sự kiện, nhập/xuất không đồng bộ để tối tiểu tổng chi phí và tốiđại khả năng mở rộng Node.js bao gồm có V8 JavaScript engine của Google, libUV, và vàithư viện khác

Sau khi cài đặt xong, bạn mở chương trình Windows Command Prompt lên và chạy

câu lệnh:

>node –help

Nếu theo đúng hướng dẫn trên bạn sẽ thấy màn hình hiển thị kết quả như sau:

Để kiểm tra phiên bản Node.js bạn đang sử dụng, chạy câu lệnh dưới đây:

>node –version

2.1.1.3 Tạo và chạy chương trình node.js:

Giống như các chương trình viết bằng những ngôn ngữ lập trình khác thì chương trìnhviết bằng Node.js cũng được lưu dưới dạng tệp tin văn bản đơn giản được tạo ra sử dụng cácchương trình viết mã lệnh như Nodepad hay Nodepad++ (chú ý: chúng ta không sử dụngchương trình Microsoft Office như Word để viết chương trình Node.js)

Bước 1: Mở chương trình viết mã lệnh

Trên Windows bạn có thể sử dụng Nodepad (hoặc Nodepad++ nếu như bạn đã cài đặt nó)

để viết mã lệnh cho các chương trình Node.js

Bước 2: Tạo tệp tin chương trình

Trên Nodepad (hoặc Nodepad++) bạn tạo tệp tin mới bằng cách sử dụng bấm tổ hợpphìm Ctrl + N (hoặc ở danh sách menu chọn File => New file)

Bước 3: Viết mã lệnh

Trong tệp tin mới tạo ra bạn nhập vào nội dung dưới đây

console.log( "Xin chào" );

Bấm tổ hợp phím Ctrl + S (hoặc ở danh sách menu chọn File => Save) và trong cửa sổbật lên bạn nhập tên tập tin là hello.js sau đó lưu lại

Bước 4: Chạy chương trình

Để chạy chương trình vừa mới tạo ở trên bạn hãy mở command prompt lên và chuyển tớithư mục chứa tệp hello.js ở trên Để di chuyển giữa các thư mục trên command prompt, bạn

sử dụng lệnh cd (viết tắt của cụm từ change directory) Ví dụ nếu bạn lưu tệp tin trên ở thưmục C:\nodejs\hello.js bạn có thể di chuyển tới thư mục này bằng cách nhập vào câu lệnhsau trên cửa sổ command prompt:

>node

Sau khi chạy câu lệnh trên, màn hình sẽ đợi bạn nhập vào mã lệnh javascript Sau khi

Tới đây tôi đã hoàn tất hướng dẫn giúp bạn có thể cài đặt và chạy chương trình đầu tiên

sử dụng Node.js

2.1.2 Express Framework:

2.1.2.1 Framework:

Framework là một thư viện các lớp đã được xây dựng hoàn chỉnh, bộ khung để phát

triển các Phần mềm ứng dụng Có thể ví Framework như các “Vật liệu” ở từng lĩnh vực chongười lập trình viên, thay vì họ phải mất nhiều thời gian để tự thiết kế trước khi dùng Dovậy,người lập trình viên chỉ cần tìm hiểu và khai thác các vật liệu này rồi thực hiện để gắnkết chúng lại với nhau, tạo ra sản phẩm

2.1.2.2 Express Framework:

Express là một framework giành cho nodejs Nó cung cấp cho chúng ta rất nhiều tính

năng mạnh mẽ trên nền tảng web cũng như trên các ứng dụng di động Express hỗ rợ các

phương thức HTTP và midleware tạo ra một API vô cùng mạnh mẽ và dễ sử dụng

2.1.2.3 Cài đặt Express Framework:

Bước 1: cài đặt NodeJs và npm:

Nếu bạn chưa cài đặt Node thì hãy vào đây để xem hướng dẫn Mặc định sau khi càiNodeJs thì bạn cũng đã cài npm

Bước 2: dùng npm để cài đặt ExpressJs

Mình sẽ đặt dự án tại thư mục D:\web_workshop\FreetusExpressJS nên trước tiên mìnhphải mở CMD lên và di chuyển đến thư mục này bằng, để di chuyển thì tùy thuộc vào hệđiều hành và trình command line mà bạn đang sử dụng, cái này quá căn bản nên mình sẽkhông hướng dẫn

Riêng mình dùng Visual Studio Code nên chỉ cần tạo một Project và trỏ tới thư mục D:\web_workshop\FreetusExpressJS, sau đó mở CMD của VSCode bằng cách nhấn phím Ctrl+ ` thì mặc định nó đã trỏ tới đúng thư mục của dự án

Tại cửa sổ CMD bạn thực hiện lệnh sau: npm init

Lệnh npm init sẽ bắt đầu quá trình cài đặt một dự án NodeJs, trong quá trình cài đặt thì

cmd sẽ yêu cầu bạn nhập những thông tin liên quan tới dự án như: name, version,

description, bạn có thể nhập vào hoặc nhấn Enter để sử dụng giá trị mặc định Kết quả

bước này sẽ tạo ra file package.json, gồm các câu trả lời liên quan tới dự án, bạn hãy mở

file này lên và có thông tin tương tự như hình dưới đây tức là bạn đã thực hiện đúng

Tới đây là bạn mới chỉ tạo được khung sườn cho dự án chứ chưa cài đặt Express, bạn cầnchạy thêm lệnh sau để bắt đầu cài đặt

npm install save express

Vì Express bản chất là một module nên mình sử dụng lệnh npm install để tải về Thẻ

save dùng để đảm bảo ExpressJs được thêm vào package.json như là một dependency (một

package cần để ứng dụng chạy được) Sau này chúng ta có thể dùng npm install để tìm vài

cài đặt lên thư mục ứng dụng nếu như bạn không có

2.1.3 Android Studio:

2.1.3.1 Android Studio là gì?

Android Studio là một phầm mềm bao gồm các bộ công cụ khác nhau dùng để phát

triển ứng dụng chạy trên thiết bị sử dụng hệ điều hành Android như các loại điện thoại

smartphone, các tablet Android Studio được đóng gói với một bộ code editor, debugger,

các công cụ performance tool và một hệ thống build/deploy (trong đó có trình giả lậpsimulator để giả lập môi trường của thiết bị điện thoại hoặc tablet trên máy tính) cho phépcác lập trình viên có thể nhanh chóng phát triển các ứng dụng từ đơn giản tới phức tạp.

2.1.3.2 Cài đặt Android studio:

Bước trước tiên, ta cần tải Android Studio phiên bản mới nhất tại đây:

Bấm save để tải về, tùy tốc độ mà lâu hay mau, đợi chỗ này nó tải cho xong.

Sau khi tải xong thì bắt đầu cài đặt

Trước khi cài đặt thì nên tạo 1 thư mục Android trong ổ C, ví dụ:

Khi cài đặt sẽ có 2 thành phần mà ta nên cài vào bên trong thư mục Android, đó là:

 android-studio->công cụ lập trình

 sdk->các thư viện để hỗ trợ lập trình

Bây giờ double click vào file cài mới tải ở trên về để cài đặt:

Nhấn Next để tiếp tục:

Để mặc định như trên rồi tiếp tục nhấn Next:

Ở màn hình trên lưu ý cài vào thư mục C:\Android\android-studioSau đó nhấn Next để tiếp tục:

Sau đó nhấn “Install” để bắt đầu cài đặt

Ngồi chờ xíu cho nó cài đặt, khi cài đặt xong sẽ có thông báo như dưới đây:

Nếu như trước đó đã làm làm Android thì dĩ nhiên có SDK sẵn và phần mềm không yêucầu gì thêm cả, nếu chưa bao giờ cài thì sẽ tiếp tục được yêu cầu cài SDK:

Chương trình sẽ báo Missing SDK, ta tiếp tục nhấn Next

Lưu ý Android SDK Location ta chọn đúng nơi mà ta đã tạo thư mục trước đó: C:\Android\sdk

Sau đó nhấn Next để tiếp tục Màn hình Verify Settings sẽ xuất hiện như dưới đây:

Nhấn FINISH để cài, màn hình Downloading Components sẽ hiển thị như dưới đây, chờ:

Chờ cho tới khi nó báo hoàn tất:

Nhấn Finish để hoàn tất quá trình cài đặt SDK

Lúc này phần mềm Android Studio sẽ xuất hiện như dưới đây:

Nếu Android Studio yêu cầu chọn một số Setup Wizard, ví dụ như xuất hiện các mànhình dưới đây:

Ta bấm Next:

Chọn Standard rồi nhấn Next

Chọn giao diện là Light cho nó sáng sủa sau đó nhấn next để hoàn tất-> lúc này ra cáimàn hình Android studio bình thường

Dưới đây là một số hình ảnh khi cài đặt Android Studio hoàn tất:

Ta có thể chạy công cụ lập trình có tên “studio64.exe”, hoặc đưa ra desktop để chạy cholẹ

Còn đây là SDK:

 platforms-> là nơi chứa các API của từng phiên bản Android

 plarform-tools->các công cụ liên quan, trong đó có adb.exe rất quan trọng để chạyAndroid

2.1.4 Visual Studio Code (VS Code hay VSC):

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS,

Visual Studio Code được phát triển bởi Microsoft Nó được xem là một sự kết hợp hoàn

hảo giữa IDE và Code Editor

Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự

hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, VisualStudio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

2.1.5 Java (Android):

Java là ngôn ngữ chính thức để phát triển Android Đây là ngôn ngữ có sự hỗ trợ nhiều

nhất từ Google Nó cũng là ngôn ngữ mà hầu hết các ứng dụng trên Play Store được xâydựng Nó cũng là ngôn ngữ chính thức của Android Hệ điều hành Android của Google sử

dụng Java như là cơ sở cho tất cả các ứng dụng Android.

2.1.6 JS (JavaScript):

JavaScript là một ngôn ngữ lập trình website, được dùng rộng rãi cho các trang

web (phía người dùng) cũng như phía máy chủ (với Nodejs) JavaScript thường được

nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file js riêng Nó là ngôn ngữphía client, tức là script được tải về máy của khách truy cập và được xử lý tại đó thay vìphía server là xử lý trên server rồi mới đưa kết quả tới khách truy cập