Đồ án tìm hiểu về mô hình mern và xây dựng website mạng xã hội

MỤC TIÊU CỦA ĐỀ TÀI: - Xây dựng Website mạng xã hội cung cấp các chức năng cơ bản hỗ trợ trong quá trình giao tiếp từ xa giữa người với người với nhau, cụ thể là việc nhắn tin trao đổi

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

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

BÁO CÁO CUỐI KÌ

ĐỒ ÁN 2

ĐỀ TÀI: TÌM HIỂU VỀ MÔ HÌNH MERN VÀ XÂY DỰNG

WEBSITE MẠNG XÃ HỘI

Giảng viên hướng dẫn:

ThS THÁI THỤY HÀN UYỂN Sinh viên thực hiện:

 Tp Hồ Chí Minh, 6/2022 

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

……., ngày…… tháng……năm 2022

Người nhận xét

(Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN

Trước khi đi vào nội dung phần báo cáo đồ án, lời nói đầu tiên chúng em xin

chân thành gửi lời cảm ơn đến ThS THÁI THỤY HÀN UYỂN – Giảng viên môn ĐỒ

ÁN 2 – người đã truyền đạt các kiến thức trên lớp, hướng dẫn và cung cấp các yêu cầu

hướng về người dùng dựa trên thực tế, tạo điều kiện cho chúng em thực hiện và đồng thời nhận xét, góp ý để đồ án của chúng em trở nên hoàn thiện hơn Đây là những lời góp ý vô cùng sâu sắc, không chỉ liên quan về kiến thức mà còn là những yêu cầu về thực tế mà một ứng dụng mạng xã hội cần phải có để nhóm em có thể hoàn thiện được

đồ án này tốt nhất có thể Những lời chia sẻ, hướng dẫn đầy nhiệt tình của cô là động lực quý báu để nhóm chúng em có thể vượt qua những khó khăn khi tìm hiểu và thực hiện đề tài, khi mô hình MERN (bao gồm MongoDB, ExpressJS, ReactJS và NodeJS)

là kiến thức còn khá mới mẻ và tụi em vẫn đang trong quá trình tìm hiểu và tích lũy kiến thức

Đồng thời, nhóm chúng em cũng muốn gửi lời cảm ơn sâu sắc đến những người

đã hỗ trợ chúng em trong quá trình thực hiện đồ án này, không chỉ là những người bạn

đã tạo điều kiện thuận lợi và động viên chúng em rất nhiều, mà đặc biệt là những anh chị trong khoa Công Nghệ Phần Mềm vì đã góp ý, chia sẻ những kinh nghiệm quý báu

về môn học cũng như các kiến thức khác có liên quan

Trong quá trình thực hiện, do kiến thức và kinh nghiệm còn nhiều hạn chế, khó

có thể tránh khỏi những sai sót Vì vậy, chúng em rất mong nhận được những lời góp ý quý báu từ cô để nhóm chúng em có thể ngày càng hoàn thiện không chỉ là đồ án hiện tại, các đồ án môn học sắp tới, đồng thời đây cũng là những hành trang góp phần hoàn thiện bản thân chúng em trong tương lai

Một lần nữa xin chân thành cám ơn cô!

Nhóm thực hiện

Trường Đại học Công nghệ Thông tin, tháng 6 năm 2022

MỤC LỤC

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 2

LỜI CẢM ƠN 3

MỤC LỤC 4

CHƯƠNG I: GIỚI THIỆU CHUNG 8

I ĐỀ TÀI: 8

II LÝ DO CHỌN ĐỀ TÀI: 8

III TÓM TẮT ĐỀ TÀI: 9

IV MỤC TIÊU CỦA ĐỀ TÀI: 9

V PHƯƠNG PHÁP NGHIÊN CỨU: 9

VI Ý NGHĨA VÀ KẾT QUẢ CỦA HƯỚNG ĐỀ TÀI: 10

1 Về mặt sản phẩm: 10

2 Về mặt tài liệu: 10

CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN 11

I TÌM HIỂU VỀ MONGODB: 11

1 NoSQL là gì: 11

2 MongoDB là gì: 12

3 Ưu điểm của MongoDB: 12

4 Nhược điểm của MongoDB: 13

II TÌM HIỂU VỀ EXPRESSJS: 14

1 ExpressJS là gì: 14

2 Tại sao nên sử dụng ExpressJS trong lập trình web: 15

2.1 Sự phổ biến của Javasript: 15

2.2 Hỗ trợ xây dựng website một cách nhanh chóng: 15

2.3 ExpressJS hoàn toàn miễn phí: 15

3 Những tính năng của ExpressJS là gì? 16

III TÌM HIỂU VỀ REACTJS: 16

1 ReactJS là gì: 16

2 Các thành phần cơ bản của ReactJS: 17

3 Lợi ích khi sử dụng ReactJS: 17

IV TÌM HIỂU VỀ NODEJS: 18

1 NodeJS là gì: 18

2 Một số ứng dụng của NodeJS: 18

3 Ưu điểm của NodeJS: 18

4 Nhược điểm của NodeJS: 19

CHƯƠNG III: MÔ HÌNH USE CASE 20

I SƠ ĐỒ USE CASE MỨC TỔNG QUÁT: 20

II DANH SÁCH CÁC USE CASE: 21

III ĐẶC TẢ USE CASE: 22

1 Use case Đăng ký: 22

2 Use case Gửi email xác nhận: 23

3 Use case Đăng nhập: 23

4 Use case Nhớ mật khẩu: 24

5 Use case Quên mật khẩu: 25

6 Use case Thay đổi mật khẩu: 26

7 Use case Đăng xuất: 26

8 Use case Xem thông tin cá nhân: 27

9 Use case Thay đổi thông tin cá nhân: 28

10 Use case Xem danh sách bài đăng cá nhân: 28

11 Use case Chỉnh sửa bài viết đã đăng: 29

12 Use case Xóa bài viết: 30

13 Use case Đăng bài viết mới: 30

14 Use case Tìm kiếm người dùng: 31

15 Use case Theo dõi người dùng: 31

16 Use case Xem bài viết: 32

17 Use case Thích bài viết: 33

18 Use case Xem bình luận: 33

19 Use case Thêm bình luận: 34

20 Use case Sửa bình luận: 34

21 Use case Thích bình luận: 35

22 Use case Xóa bình luận: 35

23 Use case Phản hồi bình luận: 36

24 Use case Trò chuyện: 36

25 Use case Nhắn tin: 37

26 Use case Call: 38

CHƯƠNG IV: PHÂN TÍCH HỆ THỐNG 39

I SƠ ĐỒ LỚP: 39

1 Sơ đồ lớp mức phân tích: 39

2 Danh sách các lớp đối tượng: 39

3 Mô tả từng lớp đối tượng: 40

3.1 Lớp Province: 40

3.2 Lớp District: 40

3.3 Lớp Ward: 40

3.4 Lớp Address: 40

3.5 Lớp Users: 40

3.6 Lớp Post: 41

3.7 Lớp Comment: 42

3.8 Lớp Conversation: 42

3.9 Lớp Message: 42

II SƠ ĐỒ TUẦN TỰ: 43

1 Đăng ký / Gửi email xác nhận / Đăng nhập/ Nhớ mật khẩu/ Quên mật khẩu/ Thay đổi mật khẩu/ Đăng xuất: 43

2 Xem thông tin cá nhân/Thay đổi thông tin cá nhân: 45

3 Xem danh sách bài đăng cá nhân / Chỉnh sửa bài viết đã đăng/ Xóa bài viết/ Đăng bài viết mới: 45

4 Tìm kiếm người dùng – Theo dõi người dùng/Bỏ theo dõi người dùng: 47

5 Xem bài viết – Thích bài viết/Bỏ thích bài viết – Xem bình luận – Sửa bình luận đã viết – Thích bình luận/Bỏ thích bình luận – Xóa bình luận: 47

6 Nhắn tin – Gọi thường/video: 49

CHƯƠNG V: THIẾT KẾ GIAO DIỆN 50

I MÀN HÌNH GIỚI THIỆU: 50

II CÁC MÀN HÌNH QUẢN TRỊ TRUY CẬP: 51

1 Màn hình Đăng ký 51

2 Popup Gửi Email xác thực – Email xác thực 51

3 Màn hình Đăng nhập: 52

4 Popup Quên mật khẩu – Email Reset Password: 53

5 Màn hình Thay đổi mật khẩu: 54

III CÁC MÀN HÌNH CHỨC NĂNG: 54

1 Màn hình Trang chủ: 54

2 Màn hình Profile: 55

3 Màn hình Thay đổi thông tin cá nhân: 56

4 Màn hình Chi tiết bài viết: 57

5 Popup Thêm bài viết mới: 57

6 Giao diện Tìm kiếm người dùng: 58

7 Giao diện Bình luận: 58

8 Giao diện thông báo: 59

9 Màn hình Tin nhắn: 59

10 Màn hình Discover – Khám phá bài viết của người dùng khác: 60

CHƯƠNG VI: TỔNG KẾT 61

I CÔNG NGHỆ SỬ DỤNG: 61

II ĐỘ HOÀN THIỆN CHỨC NĂNG: 61

III KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN: 62

1 Kết quả đạt được: 62

1.1 Ưu điểm: 62

1.2 Nhược điểm: 62

2 Hướng phát triển: 62

CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC 63

CHƯƠNG VIII: TÀI LIỆU THAM KHẢO 64

CHƯƠNG I: GIỚI THIỆU CHUNG

I ĐỀ TÀI:

- Công nghệ tìm hiểu: MERN (MongoDB, ExpressJS, ReactJS, NodeJS)

- Ứng dụng xây dựng: Website Social Butterfly (Website mạng xã hội)

II LÝ DO CHỌN ĐỀ TÀI:

Những năm gần đây, mạng xã hội (MXH) đã có bước phát triển mạnh mẽ, tác động lớn đến đời sống xã hội ở hầu hết các quốc gia trên thế giới, trong đó có Việt Nam MXH đã trở thành một thuật ngữ phổ biến với những tính năng đa dạng cho phép người dùng kết nối, chia sẻ, tiếp nhận thông tin một cách nhanh chóng, hiệu quả

Nói chung, mạng xã hội đã và đang ảnh hưởng rất lớn (cả tích cực và tiêu cực) đến mọi hoạt động và sinh hoạt của con người, nhất là giới trẻ Với đặc điểm nổi trội là tính kết nối nhanh, chia sẻ rộng, chỉ cần một chiếc điện thoại hay một máy tính kết nối Internet, chúng ta có thể truy cập và tham gia vào rất nhiều trang mạng như: Facebook, Zalo, Youtube, Twitter… trong đó, phổ biến nhất là Facebook Mặc dù mục đích, cách thức, mức độ tham gia các trang mạng xã hội của mỗi người khác nhau nhưng có một điểm chung đó là xem nó như là một phần không thể thiếu trong đời sống tinh thần của con người

Đặc biệt, trong giai đoạn phòng và chống dịch Covid-19 vô cùng căng thẳng và khó khăn như hiện nay, dưới sự chỉ đạo của Nhà nước về các quy định giãn cách xã hội, hạn chế tụ tập đông người, cũng như hạn chế các hoạt động giao tiếp hằng ngày giữa người với người với nhau, điều này đã ảnh hưởng rất nhiều đến trải nghiệm của người dùng đối với các nhu cầu hằng ngày, trong đó có nhu cầu giao tiếp với người thân, bạn bè, bạn đồng nghiệp và các mối quan hệ khác

Nhận thấy điều đó, cùng với vị trí và vai trò của thời đại công nghệ 5.0, nhóm chúng

em quyết định làm WEBSITE MẠNG XÃ HỘI – SOCIAL BUTTERFLY để trở

thành phương tiện kết nối từ xa hỗ trợ quá trình giao tiếp giữa người với người Ứng dụng này không những có thể đảm bảo an toàn sức khỏe cho người dùng mà còn có thể đáp ứng được các nhu cầu cần thiết về quá trình giao tiếp như trò chuyện, chia sẻ những trải nghiệm cuộc sống thông qua những bài viết, tương tác trực tiếp qua các cuộc gọi

III TÓM TẮT ĐỀ TÀI:

Website mạng xã hội là cầu nối hỗ trợ việc giao tiếp giữa người với người dưới nhiều

hình thức đa dạng như là nhắn tin, tương tác hay bình luận bài viết, trò chuyện qua cuộc gọi, vv… Trong bối cảnh công nghệ đang ngày càng chiếm ưu thế và đóng vai trò to lớn trong các hoạt động kinh tế lẫn cuộc sống con người hiện nay, đặc biệt là tình hình dịch bệnh Covid, vì chủ trương hạn chế lây lan, bảo vệ sức khỏe và tính mạng con người, khi đó hoạt động giao tiếp hằng ngày không thể nào diễn ra một các trực tiếp với nhau được bởi vì các hoạt động tụ tập thành nhóm bị hạn chế, thậm chí là cấm Khi đó, một bài toán xã hội được đặt ra là làm thế nào để giữa người với người vẫn có thể giao tiếp được với nhau và vẫn có thể đảm bảo sức khỏe và tuân theo chủ trương phòng chống dịch bệnh của nhà nước Bên cạnh đó, một số người mắc phải hội chứng ngại giao tiếp mặt đối mặt, đối với các hoạt động giao tiếp trực tiếp họ thường lúng túng và không thể giao tiếp một cách trôi chảy như những người bình thường thường hay làm, ngược lại họ lại cảm thấy dễ dàng giao tiếp, bày tỏ thông qua các phương tiện thứ ba khác Mặt khác, rào cản về địa lý cũng là một điều gây cản trở quá trình giao tiếp Vì vậy, mạng xã hội ra đời với mục tiêu giải quyết được các vấn đề trên

IV MỤC TIÊU CỦA ĐỀ TÀI:

- Xây dựng Website mạng xã hội cung cấp các chức năng cơ bản hỗ trợ trong quá

trình giao tiếp từ xa giữa người với người với nhau, cụ thể là việc nhắn tin trao đổi, chia

sẽ cuộc sống hằng ngày thông qua các bài đăng, trò chuyện qua cuộc gọi, video call, tương tác bình luận giữa nhiều người dùng với nhau trên một bài viết, vv…

- Nghiên cứu các công nghệ liên quan để phát triển ứng dụng

- Đưa ra các báo cáo và tài liệu cho môn học

V PHƯƠNG PHÁP NGHIÊN CỨU:

- Nghiên cứu các tài liệu về nghiệp vụ liên quan cách xây dựng giao diện và các hoạt động của các trang mạng xã hội

- Tiến hình khảo sát lấy yêu cầu thực tế từ người dùng

- Tham khảo một số website mạng xã hội như: Facebook, Instagram, Zalo, Twitter, vv…

- Nghiên cứu các tài liệu, video hướng dẫn liên quan cách sử dụng các công nghệ mới vào quá trình xây dựng website, cụ thể là cách xây dựng theo MERN

VI Ý NGHĨA VÀ KẾT QUẢ CỦA HƯỚNG ĐỀ TÀI:

1 Về mặt sản phẩm:

- Tạo ra được website mạng xã hội, đảm bảo có thể kết nối giữa các người dùng

từ xa

- Các chức năng hướng về người dùng

- Cung cấp được các chức năng cơ bản của một website mạng xã hội cần có, đặc biệt là các vấn đề liên quan phản hồi, tương tác theo thời gian thực

CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN

- Với NoSQL bạn có thể mở rộng dữ liệu mà không lo tới những việc như tạo khóa ngoại, khóa chính, kiểm tra ràng buộc vv…

- NoSQL bỏ qua tính toàn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh

và khả năng mở rộng

- NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn, ví dụ như FaceBook sử dụng Cassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable, vv…

2 MongoDB là gì:

- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql

và được hàng triệu người sử dụng

- MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh

- Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng

ta sẽ dùng khái niệm là collection thay vì bảng

- 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

3 Ưu điểm của MongoDB:

- Do 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 kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ

dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái

- Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

- MongoDB rất dễ mở rộng (Horizontal Scalability) Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

- Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng

- Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp

100 lần so với MySQL

4 Nhược điểm của MongoDB:

- Một ưu điểm của MongoDB cũng chính là nhược điểm của nó MongoDB không

có các tính chất ràng buộc như trong RDBMS nên khi thao tác với mongoDB thì phải hết sức cẩn thận

- Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value

do đó key sẽ bị lặp lại Không hỗ trợ join nên dễ bị dữ thừa dữ liệu

- Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện

II TÌM HIỂU VỀ EXPRESSJS:

1 ExpressJS là gì:

- ExpressJS hay còn được viết là Express js, Express.js Đây là một framework mã nguồn mở miễn phí cho NodeJS Express.js được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng

- Vì ExpressJS chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát triển ExpressJS cũng là một khuôn khổ của NodeJS do đó hầu hết các mã code đã được viết sẵn cho các lập trình viên có thể làm việc

- Nhờ có ExpressJS mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web, nhiều web hoặc kết hợp Do có dung lượng khá nhẹ, ExpressJS giúp cho việc tổ chức các ứng dụng web thành một kiến trúc MVC có tổ chức hơn.Để có thể sử dụng được

mã nguồn này, chúng ta cần phải biết về Javascript và HTML

- Expressjs cũng là một phần của công nghệ giúp quản lý các ứng dụng web một cách dễ dàng hơn hay còn được gọi là ngăn xếp phần mềm MEAN.Nhờ có thư viện Javascript của ExpressJS đã giúp cho các nhà lập trình xây dựng nên các ứng dụng web hiệu quả và nhanh chóng hơn ExpressJS cũng được sử dụng để nâng cao các chức năng của NodeJS

- Trên thực tế, nếu không sử dụng ExpressJS, bạn sẽ phải thực hiện rất nhiều bước lập trình phức tạp để xây dựng nên một API hiệu quả ExpressJS đã giúp cho việc lập trình trong NodeJS trở nên dễ dàng hơn và có nhiều tính năng mới bổ sung

2 Tại sao nên sử dụng ExpressJS trong lập trình web:

2.1 Sự phổ biến của Javasript:

- Javascript là một ngôn ngữ lập trình được sử dụng rộng rãi hiện nay, dễ đọc

và được hỗ trợ ở mọi nơi Mà ExpressJS lại hỗ trợ Javascript, do đó nếu bạn đã biết đến Javascript thì chắc chắn việc lập trình bằng ExpressJS là vô cùng đơn giản Ngay cả những người mới bắt đầu tham gia vào lĩnh vực phát triển web này cũng có thể sử dụng ExpressJS

- Javascript là ngôn ngữ lập trình dễ học với cả những người không có bất kỳ kiến thức gì về ngôn ngữ lập trình khác Chính vì tính phổ biến, dễ học và dễ sử dụng này mà ExpressJS cho phép các tài năng trẻ tham gia và đạt được nhiều thành công trong phát triển ứng dụng web

2.2 Hỗ trợ xây dựng website một cách nhanh chóng:

- Thời gian chính là tài sản quý giá của bất kỳ doanh nghiệp nào Hơn thế, nhiều lập trình viên còn phải chịu áp lực xây dựng các ứng dụng web một cách hiệu quả trong thời gian ngắn Nhưng để thực hiện tốt công việc này cần rất nhiều thời gian

và ExpressJS chính là công cụ cứu cánh cho các nhà lập trình

- ExpressJS có thể giúp làm giảm một nửa thời gian viết mã mà vẫn xây dựng lên các ứng dụng web hiệu quả Không chỉ trợ giúp về mặt thời gian Expressjs còn làm giảm những áp lực cần thiết để xây dựng với sự trợ giúp của các tính năng khác nhau của nó.ExpressJS còn cung cấp một phần mềm trung gian đảm nhận nhiệm vụ đưa ra các quyết định để phản hồi chính xác những yêu cầu của khách hàng

- Nếu không có ExpressJS, các lập trình viên phải viết mã code riêng để xây dựng nên thành phần định tuyến Đó là một công việc vô cùng tẻ nhạt và tốn thời gian ExpressJS đã giúp cho công việc này trở nên đơn giản và hiệu quả hơn rất nhiều

2.3 ExpressJS hoàn toàn miễn phí:

Một trong những yếu tố để tổ chức, doanh nghiệp nên sử dụng công cụ, ứng dụng nào chính là chi phí Với một ứng dụng web với nhiều tính năng tuyệt vời như vậy mà lại không tốn một chút kinh phí nào thì không có lý do gì để không sử dụng nó

3 Những tính năng của ExpressJS là gì?

- Phát triển máy chủ nhanh chóng: ExpressJS cung cấp nhiều tính năng dưới dạng các hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này đã loại bỏ nhu cầu viết mã từ đó tiết kiệm được thời gian

- Phần mềm trung gian Middleware: Đây là phần mềm trung gian có quyền truy cập vào cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác Phần mềm Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của: ExpressJS

- Định tuyến - Routing: ExpressJS cung cấp cơ chế định tuyến giúp duy trì trạng thái của website với sự trợ giúp của URL

- Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được ExpressJS cung cấp cho phép các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ

- Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể thiết

đi việc gỡ lỗi Giờ đây với ExpressJS việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định chính xác các phần ứng dụng web có lỗi

III TÌM HIỂU VỀ REACTJS:

1 ReactJS là gì:

- ReactJS là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi Bình thường các lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute như AngularJS nhưng với ReactJS làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX

- Qua đó bạn có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn

- Trong ReactJS thường dùng javascript để thiết kế bố cục cho trang web, nhưng nhược điểm là cấu trúc khá là khó Thay vào đó sử dụng JSX và nhúng các đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu code khi biên soạn Vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch

2 Các thành phần cơ bản của ReactJS:

- Components: Thành phần cơ bản của React được gọi là components Syntax để viết HTML sử dụng Javascript để render Bạn có thể tạo ra một component bằng các

gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư

viện này Có thể lồng nhiều component vào nhau thông qua lệnh return của phương

thức render

- Redux: Trong một chương trình thì có rất nhiều các component, để đơn giản việc

quản lý các component đó người ta sử dụng redux, redux giống như 1 cái kho chứa

các component và khi dùng component nào thì chỉ cần gọi nó ra

- Virtual DOM: Virtual DOM không được tạo ra bởi Reactjs nhưng lại được sử dụng rất nhiều Đây là một chuẩn của W3C được dùng để truy xuất code HTML hoặc XML Các Virtual DOM sẽ được tạo ra khi chạy chương trình, đó là nơi chưa các component Sử dụng DOM sẽ tiết kiệm được hiệu suất làm việc, khi có thay đổi gì ReactJS đều tính toán trước và việc còn lại chỉ là thực hiện chúng lên DOM

3 Lợi ích khi sử dụng ReactJS:

- ReactJS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơn vì nó

sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX Thông qua JSX cho phép nhúng code HTML và Javascript

- ReactJS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những component độc lập Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn

- Đi kèm với ReactJS là rất nhiều các công cụ phát triển giúp cho việc debug code một cách dễ dàng hơn

- Một trong những ưu điểm nữa của ReactJS đó là sự thân thiện với SEO Hầu như các JS Frameworks không thân thiện với các tìm kiếm mặc dù đã được cải thiện nhiều nhưng dưới sự hỗ trợ của các render dữ liệu trả về dưới dạng web page giúp cho SEO chuẩn hơn

IV TÌM HIỂU VỀ NODEJS:

- NodeJS chứa một thư viện built-in cho phép các ứng dụng hoạt động như một Webserver mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS

- NodeJS cung cấp kiến trúc hướng sự kiện (event-driven) và non-blocking I/O API, tối ưu hóa thông lượng của ứng dụng và có khả năng mở rộng cao

- Mọi hàm trong NodeJS là không đồng bộ (asynchronous) Do đó, các tác vụ đều được xử lý và thực thi ở chế độ nền (background processing)

2 Một số ứng dụng của NodeJS:

- Xây dựng websocket server (Chat server)

- Hệ thống Notification (Giống như facebook hayTwitter)

- Ứng dụng upload file trên client

- Các máy chủ quảng cáo

- Các ứng dụng dữ liệu thời gian thực khác

3 Ưu điểm của NodeJS:

- Đặc điểm nổi bật của NodeJS là nó nhận và xử lý nhiều kết nối chỉ với một single-thread Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy vấn giống PHP Ngoài ra, tận dụng ưu điểm non-blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ như PHP

- JSON APIs: Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON

- Ứng dụng trên 1 trang (Single page Application): Nếu bạn định viết 1 ứng dụng thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh Các ứng dụng bạn định viết không muốn nó tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt động nhanh

để thể hiện sự chuyên nghiệp thì NodeJS sẽ là sự lựa chọn của bạn

- Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động Tức là NodeJS

có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất

- Streamming Data (Luồng dữ liệu): Các web thông thường gửi HTTP request và nhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác

- Ứng dụng Web thời gian thực: Với sự ra đời của các ứng dụng di động & HTML

5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter,…

4 Nhược điểm của NodeJS:

- Ứng dụng nặng tốn tài nguyên Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS (Lý do: NodeJS được viết bằng C++

& Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút) Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng hiệu suất tối đa!

- NodeJS và ngôn ngữ khác NodeJS, PHP, Ruby, Python NET …thì việc cuối cùng là phát triển các App Web NodeJS mới sơ khai như các ngôn ngữ lập trình khác Vậy nên bạn đừng hi vọng NodeJS sẽ không hơn PHP, Ruby, Python… ở thời điểm này Nhưng với NodeJS bạn có thể có 1 ứng dụng như mong đợi, điều đó là chắc chắn!

CHƯƠNG III: MÔ HÌNH USE CASE

I SƠ ĐỒ USE CASE MỨC TỔNG QUÁT:

II DANH SÁCH CÁC USE CASE:

2 Gửi email xác nhận Sau khi xác nhận email đăng ký thành công, tài khoản

Người dùng quên mật khẩu của tài khoản muốn đăng nhập, thông qua tên tài khoản (email) để tiến hành việc thay đổi mật khẩu

6 Thay đổi mật khẩu Thay đổi mật khẩu của tài khoản

7 Đăng xuất Đăng xuất tài khoản khỏi website

8 Xem thông tin cá nhân Xem các thông tin của tài khoản như là họ tên người

dùng, địa chỉ, ngày sinh, số điện thoại, vv…

9 Thay đổi thông tin cá nhân Chỉnh sửa và cập nhật thông tin cá nhân, thông tin tài

11 Chỉnh sửa bài viết đã đăng Chọn và cập nhật nội dung của bài viết đã đăng

12 Xóa bài viết Chọn và xóa bài viết đã đăng

13 Đăng bài viết mới Đăng một bài viết mới lên trang cá nhân

14 Tìm kiếm người dùng Nhập tên người dùng để thực hiện việc tìm kiếm những

người dùng (thành viên) của website

15 Theo dõi người dùng

Chọn theo dõi những người dùng khác, sau khi theo dõi thì các bài viết sẽ hiển thị lên news feed của người dùng

đã chọn theo dõi

16 Xem bài viết Chọn và xem nội dung của bài viết

17 Thích bài viết Chọn biểu tượng trái tim để thể hiện cảm xúc yêu thích

với bài viết

18 Xem bình luận Hiển thị toàn bộ bình luận của chính bài viết đang xem

19 Thêm bình luận Thêm một bình luận mới vào bài viết

20 Sửa bình luận Chọn và cập nhật nội dung của bình luận đó

21 Thích bình luận Chọn biểu tượng trái tim để thể hiện cảm xúc yêu thích

với bình luận đó

22 Xóa bình luận Chọn và xóa một bình luận người dùng muốn

23 Phản hồi bình luận Thêm một bình luận mới nằm trong một bình luận khác

24 Trò chuyện Xem danh sách các đoạn hội thoại với bạn bè

26 Call Gọi điện với một người dùng khác, có thể gọi thường

hoặc gọi video

III ĐẶC TẢ USE CASE:

1 Use case Đăng ký:

Mô tả Người dùng đăng ký tài khoản mới để sử dụng cho việc đăng nhập vào

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng chọn button Đăng ký ở màn hình Đăng nhập

Luồng thay

thế

A1 Sai định dạng các thông tin đã nhập

5 Yêu cầu nhập lại đúng định dạng các thông tin sai định dạng A2 Email đã được đăng ký cho một tài khoản khác

6 Hệ thống yêu cầu người dùng đăng ký bằng email khác

2 Use case Gửi email xác nhận:

Mô tả Người dùng xác nhận lại email nhập trong tài khoản đăng ký đúng với email dự định

đăng ký và chọn tiến hành việc gửi email xác nhận để tạo tài khoản

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng chọn button Gửi email xác thực ở popup Xác nhận email

2 Tạo một email có nội dung, trong đó chứa một link xác thực tài khoản có hiệu lực 5 phút gửi đến email của người dùng dùng để đăng ký tài khoản

3 Hiển thị popup Gửi lại email xác thực trong trường hợp người dùng vẫn chưa nhận được email xác thực đã gửi qua địa chỉ email

4 Người dùng truy cập hộp thư của email dự định đăng ký, tìm email xác thực vừa được website Social Butterfly gửi đến và chọn button Xác thực email

6 Hệ thống kiểm yêu cầu tạo tài khoản thông qua link xác thực

7 Hệ thống thông báo đã xác thực thành công và chuyển về màn hình Đăng nhập

Luồng thay

thế

A1 Chưa nhận được email xác thực

4 Chọn button Gửi lại email xác thực A2 Link xác thực hết hạn (quá 5 phút sau khi gửi người dùng vẫn chưa xác thực)

7 Hiển thị màn hình với nội dung link xác thực đã hết hạn

8 Chọn button Quay lại trang chủ để quay trở về trang chủ

Điều kiện

trước Đã qua bước điền thông tin để tạo tài khoản và popup Xác nhận email để hiện lên

Điều kiện

sau Tạo tài khoản thành công và chuyển tự động về màn hình Đăng nhập

3 Use case Đăng nhập:

Mô tả Người dùng đăng nhập vào website thông qua tài khoản đã tạo trước đó

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng truy cập vào website 2 Hiển thị màn hình đăng nhập

3 Nhập tên tài khoản, mật khẩu Chọn nút Đăng nhập

4 Kiểm tra tên tài khoản và mật khẩu

5 Chuyển đến màn hình Trang chủ

Luồng thay

thế

A1 Sai tài khoản, mật khẩu

5 Yêu cầu đăng nhập lại

6 Quay lại bước 2 A2 Đăng nhập bằng Google

1 Người dùng chọn button Goolge

2 Chọn tài khoản Google muốn đăng nhập

3 Chuyển đến màn hình Trang chủ A3 Phiên đăng nhập vẫn còn hạn

2 Hiển thị màn hình Trang chủ

Điều kiện

trước Đã đăng xuất khỏi hệ thống hoặc phiên đăng nhập đã hết hạn

Điều kiện

sau Truy cập vào trang chủ của website

4 Use case Nhớ mật khẩu:

Mô tả Người dùng lưu tên đăng nhập và mật khẩu vào cookie để tự động điền vào form đăng

nhập ở lần đăng nhập sau

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng truy cập vào website 2 Hiển thị màn hình đăng nhập

3 Nhập tên tài khoản, mật khẩu Chọn nút Nhớ mật khẩu

4 Chọn nút Đăng nhập 5 Kiểm tra tên tài khoản và mật khẩu

6 Lưu tên tài khoản và mật khẩu vào cookie

và chuyển đến màn hình Trang chủ

Luồng thay

thế

A1 Sai tài khoản, mật khẩu

6 Không lưu tên tài khoản và mật khẩu vào cookie

5 Use case Quên mật khẩu:

Mô tả Người dùng không nhớ mật khẩu tài khoản đã tạo và thực hiện chức năng thay đổi lại

mật khẩu để có thể sử dụng mật khẩu mới đó cho việc đăng nhập

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng truy cập vào website 2 Hiển thị màn hình đăng nhập

3 Người dùng chọn Quên mật khẩu trên màn hình Đăng nhập

4 Hệ thống xuất hiện popup Quên mật khẩu

5 Người dùng điền email đã đăng ký tài khoản

5 Kiểm tra tên tài khoản và mật khẩu

6 Người dùng chọn button Gửi email 7 Hệ thống kiểm tra tài khoản có tồn tại hay

không thông qua email người dùng đã nhập

8 Hệ thống gửi email thay đổi mật khẩu đến email đăng ký của người dùng có chứa link thay đổi mật khẩu và thông báo cho người dùng biết ở màn hình Link thay đổi mật khẩu có hiệu lực trong vòng 5 phút

9 Người dùng truy cập hộp thư điện tử với email đã nhập, và chọn vào đường link thay đổi mật khẩu ở email vừa được gửi từ website Social Butterfly

10 Chuyển người dùng tới trang thay đổi mật khẩu Hệ thống kiểm tra link thay đổi mật khẩu còn hiệu lực sử dụng hay không

11 Hiển thị đầy đủ giao diện thay đổi mật khẩu

Luồng thay

thế

A1 Email chưa được đăng ký (Tài khoản có email đó chưa tồn tại)

8 Website thông báo tài khoản chưa được đăng ký A2 Link thay đổi mật khẩu đã hết hạn

11 Hiển thị thông báo link đã hết hạn và không hiển thị trang thay đổi mật khẩu

6 Use case Thay đổi mật khẩu:

Mô tả Người dùng thực hiện việc thay đổi mật khẩu ở màn hình Thay đổi mật khẩu sau khi

truy cập thông qua link trong email

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở màn hình Thay đổi mật khẩu

2 Người dùng nhập mật khẩu mới, nhập lại mật khẩu mới

3 Người dùng chọn button Thay đổi mật khẩu

4 Hệ thống kiểm tra các điều kiện ràng buộc

về dữ liệu và kiểm tra xem link thay đổi mật khẩu vẫn còn hiệu lực hay không

5 Website thông báo đã thay đổi mật khẩu thành công và chuyển về màn hình Trang chủ

Luồng thay

thế

A1 Sai định dạng mật khẩu

5 Hệ thống thông báo sai định dạng mật khẩu và yêu cầu nhập lại

6 Quay lại bước 2 A2 Link thay đổi mật khẩu đã hết hạn

1 Hiển thị thông báo link đã hết hạn và không hiển thị trang thay đổi mật khẩu

Điều kiện

trước Đã đăng xuất khỏi hệ thống hoặc phiên đăng nhập đã hết hạn

Điều kiện

sau Thông báo thay đổi mật khẩu thành công và điều hướng đến màn hình Trang chủ

7 Use case Đăng xuất:

Mô tả Người dùng đăng xuất tài khoản khỏi trang web

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở màn hình trang chủ của trang web

2 Người dùng chọn mũi tên bên cạnh biểu tượng có hiển thị ảnh avatar ở góc phải màn hình

3 Hiển thị trang đăng nhập

3 Người dùng chọn Log Out 4 Hệ thống đăng xuất tài khoản Người dùng

và chuyển Người dùng về trang Đăng nhập

sau Đăng xuất tài khoản và điều hướng về trang Đăng nhập

8 Use case Xem thông tin cá nhân:

Mô tả Người dùng xem thông tin cá nhân của bản thân hoặc thông tin cá nhân được công

khai của Người dùng khác

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở màn hình trang chủ của trang web

2 Người dùng chọn mũi tên bên cạnh biểu tượng có hiển thị ảnh avatar ở góc phải màn hình

3 Người dùng chọn Profile 4 Hiển thị trang thông tin cá nhân của chính

Người dùng

Luồng thay

thế

A1 Xem trang cá nhân của bản thân thông qua avatar

2 Người dùng chọn biểu tượng avatar ở trang chủ

3 Hiển thị trang thông tin cá nhân của chính Người dùng A2 Xem trang cá nhân của Người dùng khác

1 Nhấp vào avatar hoặc tên của Người dùng khác muốn xem trang thông tin cá nhân của họ (ở danh sách sau khi tìm kiếm / dang sách những người đã theo dõi / danh sách những ai đang theo dõi mình / các bài post / các bình luận …)

2 Hiển thị trang thông tin cá nhân của Người dùng đã chọn A3 Xem trang cá nhân thông qua link

1 Nhập link ứng với trang thông tin cá nhân của Người dùng muốn xem

2 Hiển thị trang thông tin cá nhân của Người dùng ứng với link đã nhập

9 Use case Thay đổi thông tin cá nhân:

Mô tả Người dùng cập nhật một số thông tin cá nhân như avatar, họ tên, số điện thoại, địa

chỉ, vv…

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở trang cá nhân của mình Chọn Edit Profile

2 Hiển thị màn hình Thay đổi thông tin cá nhân

3 Điền, chọn, thay đổi các thông tin muốn cập nhật

4 Kiểm tra các giá trị xem có đúng định dạng, hợp lệ hay không

5 Cập nhật thông tin cá nhân ứng với tài khoản của Người dùng trên hệ thống Thông báo cập nhật thông tin cá nhân thành công

và quay trở lại trang cá nhân

Luồng thay

thế

A1 Nhập thông tin sai định dạng

5 Thông báo sai định dạng và yêu cầu nhập lại

6 Quay lại bước 3 A2 Thay đổi email

3 Chọn Change Email Xuất hiện popup Cập nhật email

4 Người dùng nhập email muốn thay đổi

5 Cập nhật email ứng với tài khoản của người dùng trên hệ thống và thông báo thành công Tắt popup Cập nhật email

A3 Sai định dạng email

5 Thông báo sai định dạng và yêu cầu nhập lại

6 Quay lại bước 4 ở A2

Điều kiện

trước Người dùng đã đăng nhập vào tài khoản thành công vào trang web

Điều kiện

sau Thông báo đã cập nhật thông tin cá nhân thành công và trở lại trang cá nhân

10 Use case Xem danh sách bài đăng cá nhân:

Mô tả Người dùng xem danh sách những bài viêt đã được bản thân đăng trên trang cá nhân

của họ

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở trang cá nhân của mình

2 Hệ thống hiển thị danh sách những bài viết đã được chính Người dùng đăng

sau Hiển thị những bài viết đã được đăng trên trang cá nhân của Người dùng

11 Use case Chỉnh sửa bài viết đã đăng:

Mô tả Người dùng chọn một bài viết đã đăng và cập nhật nội dung bài viết đã chọn

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở trang cá nhân của mình

2 Người dùng chọn bài viết muốn cập nhật lại nội dung Chọn biểu tượng ba chấm bên góc phải bài viết và chọn Edit Post

3 Hệ thống hiển thị màn hình Cập nhật bài viết

4 Người dùng cập nhật nội dung bài viết (chỉnh sửa text, thêm/xóa hình ảnh đăng kèm trong bài viết)

5 Người dùng chọn Post 6 Hệ thống cập nhật dữ liệu trên cơ sở dữ

liệu và cập nhật lại giao diện người dùng

12 Use case Xóa bài viết:

Mô tả Người dùng xóa bài viết đã chọn

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở trang cá nhân của mình

2 Người dùng chọn bài viết muốn xóa

Chọn biểu tượng ba chấm bên góc phải bài viết và chọn Remove Post

3 Hệ thống hiển thị popup Confirm để xác nhận người dùng liệu có muốn xóa bài viết này hay không

4 Người dùng chọn Yes 5 Hệ thống xóa bài viết trên cơ sở dữ liệu,

cập nhật lại giao diện người dùng và thông báo đã xóa bài viết thành công

Luồng thay

thế

A1 Xóa bài viết thông qua truy cập link bài viết hoặc trong danh sách bài viết ở trang chủ

Thực hiện từ bước 2 trong luồn chính

A2 Chọn No ở popup Confirm

5 Tắt popup Confim và không xảy ra việc xóa bài viết đã chọn

Điều kiện

trước Người dùng đã đăng nhập vào tài khoản thành công vào trang web

Điều kiện

sau Cập nhật dữ liệu của bài viết trên hệ thống và cập nhật lại giao diện

13 Use case Đăng bài viết mới:

Mô tả Người dùng đăng một bài viết mới

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở trang chủ

2 Người dùng chọn text box trên cùng màn hình có nội dung “…, what are you doing?”

3 Hệ thống hiển thị popup Create Post

4 Người dùng nhập nội dung bài viết mới, chọn hình ảnh và icon (nếu muốn)

5 Người dùng chọn Post 6 Hệ thống lưu nội dung bài viết mới vào

cơ sở dữ liệu, tắt popup và quay trở lại trang chủ với giao diện đã được cập nhật Thông báo đến các Người dùng đang theo dõi A1 Đăng bài viết mới không có hình ảnh

Luồng thay

thế 6 Thông báo yêu cầu Người dùng phải chọn ít nhất một hình ảnh đính kèm

7 Quay lại bước 4

Điều kiện

trước Người dùng đã đăng nhập vào tài khoản thành công vào trang web

Điều kiện

sau Thông báo tạo bài viết mới thành công và quay trở lại trang chủ

14 Use case Tìm kiếm người dùng:

Mô tả Người dùng tìm kiếm Người dùng khác

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở trang chủ

2 Người dùng chọn text box trên cùng màn hình có nội dung “Seach on Social Butterfly”

3 Người dùng nhập tên Người dùng khác muốn tìm kiếm sau đó nhấn Enter

4 Hệ thống hiển thị danh sách Người dùng khác thỏa mãn chuỗi kí tự tìm kiếm

5 Người dùng chọn một Người dùng bất kỳ trong danh sách hiển thị

6 Chuyển đến trang cá nhân của người dùng

Hiển thị danh sách Người dùng ứng với chuỗi ký tự tìm kiếm, có thể chuyển đến trang

cá nhân của Người dùng khác nếu chọn vào họ

15 Use case Theo dõi người dùng:

Mô tả Người dùng theo dõi Người dùng khác

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng đang ở trang cá nhân của Người dùng khác

2 Người dùng chọn button Follow

3 Hệ thống thông báo đã thêm Người dùng này vào danh sách người đang theo dõi và thông báo cho Người dùng được chọn theo dõi

4 Chuyển button Follow sang Unfollow

Luồng thay

thế

A1 Theo dõi Người dùng khác ở trang chủ

1 Chọn button Follow bên canh người dùng muốn theo dõi ở phần Suggestions for you ở bên phải màn hình

2 Tương tự như bước 3 trở đi trong luồng chính A2 Bỏ theo dõi người dùng

5 Chọn button Unfollow

6 Hệ thống thông báo đã xóa Người dùng này trong danh sách người đang theo dõi

và xóa thông báo đã theo dõi trước đó bên Người dùng được theo dõi

7 Chuyển button Unfollow sang Follow

Điều kiện

trước

- Người dùng đã đăng nhập vào tài khoản thành công vào trang web

- Cần chưa theo dõi người dùng này trước đó nếu như muốn theo dõi / cần đã theo dõi người này trước đó nếu như muốn hủy theo dõi

Điều kiện

sau Thông báo đã theo dõi / hủy theo dõi thành công

16 Use case Xem bài viết:

Mô tả Người dùng xem nội dung của một bài viết

Tác nhân Người dùng

Luồng

chính

Hành vi của tác nhân Hành vi của hệ thống

1 Người dùng click chọn một bài viết muốn xem ở trang chủ hoặc trang cá nhân (của bản thân/Người dùng khác)

2 Hệ thống hiển thị chi tiết nội dung của bài viết có kèm phần bình luận ở một giao diện khác

Luồng thay

thế

A1 Hiển thị đầy đủ nội dung một bài viết đã chọn ở trang chủ

1 Chọn phần See more ở bên cạnh nội dung của một bài viết muốn xem

2 Hệ thống hiển thị đầy đủ nội dung bài viết