Đề tài mạng xã hội đồ ăn, thức uống

Từ những lý do trên nhóm chúng em quyết định bắt tay vào đề tài ứng dụng Mạng xã hội đồ ăn, thức uống gắn kết, kết nối mọi người ở khắp mọi nơi với chung một sở thích đam mê nào đó.. Tr

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO CUỐI KỲ

ĐỒ ÁN 2

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến Nhóm sinh viên thực hiện: Hồ Quang Linh – 19521750

Nguyễn Ngọc Thịnh – 19522283

Tp Hồ Chí Minh, tháng 12 năm 2020

I Giới thiệu 5

1 Lý do chọn đề tài 5

2 Mục đích 5

3 Phạm vi 5

4 Người dùng 5

5 Phương pháp nghiên cứu 6

II Cơ sở lý thuyết & tổng quan công nghệ 6

1 JavaScript 6

2 MongoDB 6

3 ReactJS 7

5 Kiến thúc hệ thống 8

a Kiến trúc hệ thống 8

b Mô hình kiến trúc hệ thống 8

6 Mô tả chi tiết thành phần trong hệ thống 9

III Phân tích thiết kế ứng dụng 11

1 Yêu cầu nghiệp vụ 11

2 Use case 11

2.1 Use case tổng quát 11

2.2 Use case đăng nhập 11

2.3 Use case quản lý bài đăng 12

2.4 Use case tin nhắn 13

3 Activity diagram 14

3.1 Đăng nhập/ Đăng ký 14

3.2 Tạo bài đăng 15

3.3 Chỉnh sửa bài đăng 16

3.4 Chỉnh sửa thông tin cá nhân 17

3.5 Nhắn tin 18

4 Các chức năng 20

• Đăng nhập, đăng ký tài khoản cho khách hàng: 20

• Thanh tìm kiếm 20

• Hiện thị thanh header 20

• Hiển thị text box đăng bài 20

• Hiển thị các bài đăng 20

• Hiển thị các người dùng gợi ý để follow 20

• Màn hình explore 20

• Hiển thị thông tin cá nhân (ảnh đại diện, mật khẩu, sđt, địa chỉ, email,…) 21

5 Sơ đồ lớp 22

5.1 Sơ đồ lớp (mức phân tích) 22

5.2 Danh sách các lớp đối tượng quan hệ 22

5.3 Mô tả chi tiết từng đối tượng 22

IV Tổng kết 30

1 Bảng phân chia công việc 31

2 Nhận xét 31

3 Kết quả và sản phẩm 31

4 Tài liệu tham khảo 32

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 5

I Giới thiệu

1 Lý do chọn đề tài

Sự phát triển mở rộng quy mô của mạng xã hội đang lớn dần lên, phù hợp với nhu cầu xã hội Việc chia sẻ những thông tin, kết bạn, nhắn tin, trao đổi công việc ngày càng phổ biến trên mạng xã hội Ngày nay, với sự phát triển của công nghệ thông tin mà điện thoại di động được sử dụng rộng rãi trong cơ quan, trường học, … giúp cho việc giao lưu kết bạn được tốt hơn Việc sử dụng điện thoại vào việc tham gia các là một yêu cầu cần thiết nhằm xóa bỏ những phương pháp lạc hậu lỗi thời gây tốn kém nhiều mặt

Từ những lý do trên nhóm chúng em quyết định bắt tay vào đề tài ứng dụng

Mạng xã hội đồ ăn, thức uống gắn kết, kết nối mọi người ở khắp mọi nơi với

chung một sở thích đam mê nào đó

Trong đồ án mà chúng em xây dựng là ứng dụng mạng xã hội, kết nối mọi người với chung sở thích, chia sẻ trải nghiệm ăn uống Phần mềm này giúp người quán lý nắm bắt được các chia sẻ về những đồ ăn, thức uống yêu thích và địa điểm hay những các nấu và chế biến

2 Mục đích

• Nghiên cứu tổng quan về các nghiệp vụ, hoạt động, các quy trình của mạng xã hội

• Nghiên cứu trên cơ sở lý thuyết việc phát triển ứng dụng mạng xã hội

• Xây dựng ứng dụng mạng xã hội, kết nối mọi người đáp ứng nhu cầu thực tế

3 Phạm vi

Quy trình quản lý thành viên, tài khoản, tin nhắn nhóm và cá nhân, quản lý thông báo của câu lạc bộ

Các vấn đề cần giải quyết trong ứng dụng, ví dụ như:

• Theo dõi, quản lý nội dung các bài đăng

• Chức năng upload ảnh

• Chức năng bình luận, react, share, chỉnh sửa bài đăng, comment

• Chức năng video call

4 Người dùng

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 6

Ứng dụng hướng về phía người dùng là giúp người dùng tiết kiệm được

nhiều công sức và thời gian, mang lại nhiều thông tin về đồ ăn, thức uống

5 Phương pháp nghiên cứu

• Phương pháp hệ thống, phương pháp tư duy

• Phương pháp phân tích, tổng hợp

• Phương pháp tin học hóa bằng công cụ lập trình để giải quyết vấn đề

1 JavaScript

Giới thiệu:

- JavaScript theo phiên bản hiện tại là một ngôn ngữ thông dịch được phát triển bởi Brendan Eich tại hãng truyền thông Netscape JavaScript xuất hiện lầnđầu và

tháng 5 năm 1995 với tên gọi ban đầu là Mocha, sau đó đổi tên thành

LiveScript và cuối cùng là JavasScript

- Phiên bản mới nhất của JavaScript là ECMAScript 7 ECMAScript là phiên bản chuẩn hóa của JavaScript, là quy chuẩn để sử dụng JavaScript tốt nhất cho các lập trình viên Phiên bản ECMAScript 6 hiện đang là quy chuẩn sử dụng rộng rãi nhất đối với các lập trình viên sử dụng JavaScript dành cho phát triển sản phẩm và framework

- JavaScript được dùng để phát triển rất nhiều thư viện, framework mã nguồn mở, vì vậy cộng đồng sử dụng JavaScript cũng rất lớn và nhóm thực đồ án cũng dễ dàng hơn trong việc phát triển đồ án

2 MongoDB

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 7

hệ nên truy vấn sẽ rất nhanh

- So với RDBMS thì trong MongoDB collection ứng với table, còn

document

sẽ ứng với row, MongoDB sẽ dùng các document thay cho row trong

RDBMS

- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép

các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn

nhanh thông qua ngôn ngữ truy vấn MongoDB

- MongoDB cho phép việc đọc, ghi dữ liệu một cách nhanh chóng vì là một hệ quản trị cơ sở dữ liệu thuộc NoSQL, vì vậy MongoDB sẽ phù hợp với các ứng dụng Chat realtime như hướng đi của đồ án

- NodeJS có các thư viện hỗ trợ rất tốt cho việc giao tiếp, truy vấn với MongoDB

- Ngoài ra, các dữ liệu của MongoDB được lưu trữ theo dạng JSON hay BSON rất quen thuộc và phổ biến với các lập trình viên web

3 ReactJS

Giới thiệu:

- ReactJS là một framework được tạo bởi Facebook

- Hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được

- ReactJS được sử dụng tại Facebook trong production, và mạng xã

hội Instagram được viết hoàn toàn trên React

Lí do sử dụng trong đồ án:

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 8

- ReactJS cho phép lập trình viên viết ứng dụng trực tiếp trên Javasript

- Dễ tiếp cận đối với người đã kiến thức lập trình căn bản về Javascript

- Do react native cung cấp một cấu trúc dựa trên component, tức là các component là những mảnh ghép được ghép lại thành một ứng dụng Mỗi component sẽ tự quyết định nó render như thế nào và logic riêng bên trong đó

- Có thể tái sử dụng lại các component này tại bất kì nơi nào

- Bộ công cụ phát triển cho lập trình là một yếu tố quan trọng khi

chọn nền tảng phát triển

Giới thiệu:

- Để xây dựng một ứng dụng realtime cần sử dụng socketio

- Socketio sẽ giúp các bên ở những địa điểm khác nhau kết nối với nhau, truyền dữ liệu ngay lập tức thông qua server trung gian

- Socketio có thể được sử dụng trong nhiều ứng dụng như chat, game online, cập nhật kết quả của một trận đấu đang xảy ra,

• Ứng dụng được xây dựng trên nền MERN STACK

• Sử dụng API để kết nối với MongoDB

b Mô hình kiến trúc hệ thống

- Kiến trúc hệ thống theo mô hình Client – Sever

+ Tầng Client (là một máy tính (Host)): Tầng có khả năng nhận thông tin

hoặc sử dụng một dịch vụ cụ thể từ các nhà cung cấp dịch vụ (Server)

+ Tầng Sever: Tầng cung cấp các thông tin (dữ liệu) hoặc quyền truy cập

vào các dịch vụ cụ thể

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 9

+ Tầng Web (sẽ kết nối với tầng Sever & Client): Thành phần giao

diện của chương trình tương tác với người sử dụng

Hình 1 Mô hình Client-Server

6 Mô tả chi tiết thành phần trong hệ thống

• Mô hình client-server là một mô hình nổi tiếng trong mạng máy tính,

được áp dụng rất rộng rãi và là mô hình của mọi trang web hiện có Ý

tưởng của mô hình này là máy con (đóng vài trò là máy khách) gửi

một yêu cầu (request) để máy chủ (đóng vai trò người cung ứng dịch

vụ), máy chủ sẽ xử lý và trả kết quả về cho máy khách Trong mô hình

này, chương trình ứng dụng được chia thành 2 thành phần: Server và

Client Client hay còn gọi là máy khách, nó bao gồm máy tính và các

thiết bị điện tử nói chung Server hay còn gọi là máy chủ, là nơi cài đặt

các chương trình dịch vụ và lưu trữ tài nguyên

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 10

Hình 2 Chi tiết thành phần trong hệ thống

Việc yêu cầu của máy khách, đáp ứng, xử lý, và phản hồi của máy chủ tạo thành một dịch vụ Dịch vụ này hoạt động trên nền web nên nó được gọi là dịch vụ web (hay web service)

Ngoài ra, việc giao tiếp giữa Client với Server phải dựa trên các giao thức chuẩn Các giao thức chuẩn được sử dụng phổ biến nhất hiện nay là : giao thức TCP/IP, giao thức SNA của IBM, OSI, ISDN, X.25 hay giao thức

LAN-to-LAN NetBIOS

• Client

Khi nói đến Client (khách hàng), thì nó có nghĩa là một người hay một tổ chức sử dụng một dịch vụ cụ thể nào đó Trong thế giới kỹ thuật số cũng tương tự như vậy Client là một máy tính (Host), tức là có khả năng nhận thông tin hoặc sử dụng một dịch vụ cụ thể từ các nhà cung cấp dịch vụ

(Server)

• Sever

Tương tự như vậy, khi nói đến Server thì nó có nghĩa là một máy chủ

hay một phương tiện phục vụ các dịch vụ nào đó Trong lĩnh vực công

nghệ thì Server là một máy tính từ xa Nó cung cấp các thông tin (dữ

liệu) hoặc quyền truy cập vào các dịch vụ cụ thể Vì vậy, về cơ bản thì

trong mô hình Client và Server, Client là

đối tượng yêu cầu một thứ gì đó Server thì phục vụ nó, miễn là nó có mặt trong cơ sở dữ liệu

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 11

III Phân tích thiết kế ứng dụng

1 Yêu cầu nghiệp vụ

Phát triển một ứng dụng chạy trên nền tảng web thực hiện các chức năng sau:

o Đăng kí, đăng nhập cho thành viên

o Chức năng nhắn tin thời gian thực

o Chức năng đăng bài

o Kết bạn, follow thành viên trong hệ thống

o Chức năng hiển thị bảng tin

o Chức năng bình luận, react cảm xúc, share bài, chỉnh sửa các comment, bài viết

o Chức năng gọi điện có video call

o Chức năng chỉnh sửa thông tin cá nhân

o Ứng dụng cloud để upload ảnh

o Chức năng thông báo các hoạt động

2 Use case

2.1 Use case tổng quát

Hình 3 Use case tổng quát

2.2 Use case đăng nhập

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 12

Hình 4 Use case đăng nhập

2.3 Use case quản lý bài đăng

Hình 5 Use case quản lý bài đăng

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 13 2.4 Use case tin nhắn

Hình 6 Use case tin nhắn

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 14

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 15

5 Đăng nhập thành

công

Chuyển sang màn hình trang chủ 3.2 Tạo bài đăng

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 16

1 Trang chủ Vào trang chủ Đăng nhập

hoàn tất

2 Nhấn thêm

đăng bài

Nhập thông tin nhóm cần tạo

Click vào dòng chữ có ô

“what are you thinking?”

3

Nhập nội dung và tải

ảnh lên Nhập nội dung và tải ảnh lên

Sau đó nhấn nút post

4 Đăng bài thành công Bài đã được đăng Xác nhận

đăng bài thành công 3.3 Chỉnh sửa bài đăng

3.3.1 Sơ đồ trạng thái

Hình 9 Sơ đồ trạng thái chỉnh sửa nhóm

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 17

3.3.2 Bảng mô tả trạng thái

3.4 Chỉnh sửa thông tin cá nhân

3.4.1 Sơ đồ trạng thái

Hình 10 Sơ đồ trạng thái Chỉnh sửa thông tin cá nhân

STT Trạng thái Ý nghĩa Xử lý liên

3 Nhấn mục chỉnh sửa Lệnh chỉnh sửa bài

đăng

Click vào mục tuỳ chọn, chọn Edit Post

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 18

Sau đó ấn Save

4 Thông tin

không hợp lệ

Thông tin chỉnh bị sai

Hệ thống thông báo chỉnh sửa thông tin không thành công

5 Chỉnh sửa

thông tin thành

cong

Xác nhận chỉnh sửa thông tin

Hệ thống thông báo chỉnh sửa thông tin thành công 3.5 Nhắn tin

3.5.1 Sơ đồ trạng thái

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 19

Hình 11 Sơ đồ trạng thái nhắn tin

Cần chuyển qua màn hình messager

Sau đó chọn

1 ô hội thoại hoặc nhập vào ô tìm kiếm người muốn nhắn tin

2 Soạn tin nhắn Nhập nội dung cần gửi Nhập nội dung

sau đó nhấn biểu tượng gửi

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 20

Hội thoại xuất hiện tin nhắn vừa nhập

4 Các chức năng

• Đăng nhập, đăng ký tài khoản cho khách hàng:

- Khi khởi động ứng dụng sẽ hiển thị giao diện đăng nhập cho người

dùng, trong trường hợp người dùng chưa có tài khoản có thể nhấn

vào nút đăng ký để qua màn hình đăng ký và tạo tài khoản

- Nếu đã có tài khoản thì sẽ được vào màn hình chính của app

• Thanh tìm kiếm

- Thanh địa chỉ xuất hiện đầu màn hình chính có chức năng tìm kiếm người dùng

• Hiện thị thanh header

- Thanh header gồm có thanh search , trang chủ, tin nhắn , thông báo và profile

• Hiển thị text box đăng bài

- Người dùng có thể nhập nội dung bài đăng và tải ảnh kèm theo

• Hiển thị các bài đăng

- Màn hính chính sẽ hiển thị bài đăng của những người mình đã follow.

- Người dùng có thể like, share, lưu hoặc comment bài viết

• Hiển thị các người dùng gợi ý để follow

- Hiển thị các người dùng gợi ý, bên cạnh là nút follow

• Màn hình explore

- Mục tìm kiếm, để tìm kiếm tên nhóm, tên sự kiện

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 21

- Hiển thị các thẻ sự kiện sắp diễn ra

- Nhấn vào các thẻ sự kiện đó, dẫn tới trang chi tiết sự kiện

• Hiển thị thông tin cá nhân (ảnh đại diện, mật khẩu, sđt, địa chỉ, email,…)

- Ở trang home, chọn ảnh ở góc trên bên phải màn hình để tới trang thông tin cá nhân

- Trang thông tin cá nhân hiển thị các nhóm mình đã tham gia,

số lượng nhóm đã tham gia, các button chỉnh sửa, đăng xuất

- Chọn icon chỉnh sửa, để thay đổi các thông tin cá nhân

- Chọn button logout để đăng xuất

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 22

5 Sơ đồ lớp

5.1 Sơ đồ lớp (mức phân tích)

Hình 12 Sơ đồ lớp (mức phân tích)

5.2 Danh sách các lớp đối tượng quan hệ

STT Tên lớp/quan hệ Ý nghĩa/Ghi chú

5 Conversation Cuộc trò chuyện

5.3 Mô tả chi tiết từng đối tượng

5.3.1 User

5.3.1.1 Danh sách thuộc tính

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 23

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

3 password String public Mật khẩu

4 fullname String public Tên người dùng

5 imageUrl Number public Đường dẫn ảnh

6 address String public Địa chỉ

7 mobile String public Số điện thoại

10 following userID Public Người theo dõi

11 follower userID Public Người đang theo dõi

12 saved postID Public Bài đăng đã lưu

13 story String Public Giới thiệu

5.3.2 Post

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 Image String public Đường dẫn ảnh bài đăng

2 Likes Array public Những người like bài đăng

3 Comment String public Bình luận

5.3.3 Conversation

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 Recipients Array public Những người nhận

MẠNG XÃ HỘI ĐỒ ĂN, THỨC UỐNG 24

5.3.4 Message

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 Conversation String public Mã hội thoại

3 Recipient userID public Người nhận

5.3.5 Comment

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 User String public Người bình luận

2 Content String public Nội dung

5 Likes Array public Người thích bình luận

6 postId postID public Người đăng bài

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 User String public Người tạo thông báo

2 Recipients Array public Những người nhận thông báo

4 Text String public Tiêu đề thông báo

5 Content String public Nội dung thông báo

6 Cài đặt và demo giải thích các chức năng chính

6.1 Cài đặt

• Các thiết bị có hỗ trợ duyệt web trên các trình duyệt như Edga, Firefox,

Chrome, Safari, v.v