(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh

(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh

Trang 1

ĐỒ ÁN TỐT NGHIỆP

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

TP.HCM, tháng 7 năm 2021

XÂY DỰNG WEBSITE VÀ ỨNG DỤNG MOBILE

ĐỂ CHIA SẺ HÌNH ẢNH

Khoá 2017 - 2021 Ngành CÔNG NGHỆ THÔNG TIN GVHD ThS TRẦN CÔNG TÚ

NGÔ THỊ TRANG 17110241

LÊ HUY HIỆP 17110137

Trang 2

LỜI CẢM ƠN

Lời đầu tiên, nhóm thực hiện xin được phép gửi lời cảm ơn chân thành đến khoa Đào tạo Chất Lượng Cao – Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh đã tạo mọi điều kiện thuận lợi nhất cho nhóm thực hiện có cơ hội được tự do tiếp cận, tham khảo, mở rộng thêm kiến thức trong lĩnh vực Công nghệ thông tin nói chung và môn Đồ Án Tốt Nghiệp nói riêng!

Lời cảm ơn trân trọng nhất nhóm thực hiện xin chân thành gửi đến Thầy Trần Công Tú – người đã dùng mọi tâm huyết và tri thức của người Thầy, cùng đồng hành

và trực tiếp giảng dạy, hướng dẫn và tạo mọi điều kiện thuận lợi giúp đỡ cho nhóm phát huy hết khả năng cũng như nâng cao kiến thức trong suốt quá trình đồ án! Cảm

ơn sự nhiệt tình của Thầy, là động lực vô cùng to lớn giúp nhóm thực hiện kiên trì trong suốt quá trình thực hiện đề tài và khám phá ra những kiến thức mới đầy thú vị

và bổ ích liên quan đến đề tài mà cụ thể là đề tài Xây dựng website và app mobile để Chia Sẻ Hình Ảnh

TPHCM, ngày 20 tháng 7 năm 2021

Nhóm sinh viên thực hiện

Trang 3

LỜI MỞ ĐẦU

Hiện nay internet đã trở nên thông dụng và không thể thiếu trong cuộc sống Và

sự ra đời của website đã đóng vai trò rất quan trọng trong việc đưa mọi người đến với những thông tin mà họ đang cần Website mang đến cho người dùng những thông tin cần thiết, những vấn đề khác nhau trong cuộc sống đều có thể tìm kiếm trên website, giải đáp mọi thắc mắc với thời gian cực nhanh chóng và cực kỳ hiệu quả

Vào những năm gần đây, website phát triển ngày càng đa dạng trong đó có website theo hướng mạng xã hội Có thể kể ra một số website phổ biến nhất hiện nay như Facebook, Youtube, Instagram, Pinterest,… Rất khó để người dùng cưỡng lại sự thu hút của các website này, nhất là khi được dùng miễn phí Thậm chí Facebook, Gmail đã trở thành một phần không thể thiếu trong cuộc sống của nhiều người

Từ đó thấy được website theo hướng mạng xã hội đã dần trở nên vô cùng quan trọng trong cuộc sống Dựa trên điều đó nhóm quyết định xây dựng một website chia

sẻ hình ảnh để tạo điều kiện cho mọi người giao lưu, liên kết, chia sẻ những sở thích,

sự quan tâm, những ý tưởng dễ dàng với nhau Website này sẽ là một kho ảnh cực kỳ lớn với vô số các hình ảnh đẹp, thú vị, độc đáo; người dùng có thể thoải mái xem và tải miễn phí bất cứ hình ảnh nào; và có thể tìm kiếm các ý tưởng thông qua các hình ảnh theo chủ đề mà họ muốn

Trang 4

MỤC LỤC

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP I LỜI CẢM ƠN II LỜI MỞ ĐẦU III MỤC LỤC IV DANH MỤC CÁC CHỮ VIẾT TẮT VI DANH MỤC CÁC BẢNG BIỂU VII DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ VIII

CHƯƠNG 1: TỔNG QUAN 1

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

1.2 Mục tiêu 1

1.3 Công nghệ sử dụng 1

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2

2.1 Angular Framework 2

2.2 ASP.NET Core 2

2.3 Microsoft SQL Server 2017 2

2.4 Swagger UI 3

2.5 Ionic Framework 3

CHƯƠNG 3: NỘI DUNG 5

3.1 Chức năng sản phẩm 5

3.1.1 Khảo sát 5

3.1.4 Công việc đã thực hiện khi báo cáo tiến độ: 7

3.2 Mô hình hoá yêu cầu 8

3.2.1 Thiết kế use case diagram 8

3.2.2 Đặc tả use case 9

3.3 Sơ đồ trình tự (Sequence diagram) 38

3.3.1 Tìm bài viết 38

3.3.2 Bình luận 39

Trang 5

3.3.3 Đăng nhập 40

3.3.3 Tìm kiếm 41

3.3.4 Nhắn tin 42

3.4 Thiết kế cơ sở dữ liệu 43

3.4.1 Mô hình liên kết thực thể 43

3.4.2 Mô hình quan hệ các bảng trong cơ sở dữ liệu 44

3.5 Thiết kế giao diện: 45

3.5.1 Giao diện tìm kiếm 45

3.5.2 Giao diện thông báo 45

3.5.3 Giao diện tin nhắn 46

CHƯƠNG 4: CÀI ĐẶT SẢN PHẨM 47

4.1 Front-end 47

4.1.1 Cấu trúc ứng dụng 47

4.1.2 Các đoạn xử lý chính trong front-end 50

4.1.3 Một số giao diện của sản phẩm 53

4.2 Back-end 63

4.2.1 Cấu trúc project API 63

4.2.2 Một số Function 64

4.2.3 Giao diện Swagger UI 69

CHƯƠNG 5: TỔNG KẾT 75

5.1 Kết quả đạt được 75

5.2 Ưu điểm 76

5.3 Nhược điểm 76

5.4 Khó khăn 76

5.5 Bài học kinh nghiệm 76

5.6 Hướng phát triển 77

TÀI LIỆU THAM KHẢO 78

PHỤ LỤC 79

Trang 6

DANH MỤC CÁC CHỮ VIẾT TẮT

HTML: Hypertext Markup Language

CSS: Cascading Style Sheets

JS: JavaScript

ASP-NET: Active Server Pages - Network Enabled Technologies

SQL: Structured Query Language

MVC: Model-View-Controller

SPA: Single Page Application

DOM: Document Object Model

API: Application Programming Interface

UI: User Interface

DI: Dependency Injection

IIS: Internet Information Services

OLTP: On-line Transactional Processing

APIs: Application Programming Interfaces

AI: Artificial Intelligence

OTP: One Time Password

CLI: Command Line Interface

SDK: Software Development Kit

Trang 7

DANH MỤC CÁC BẢNG BIỂU

Bảng 3.3 Đặc tả usecase Tìm kiếm hình ảnh hoặc người dùng 10

Bảng 3.4 Đặc tả usecase Xem thông báo 11

Bảng 3.5 Đặc tả usecase Xem danh sách tin nhắn 12

Bảng 3.6 Đặc tả usecase Xem chi tiết khung chat 14

Bảng 3.7 Đặc tả usecase Gửi tin nhắn 15

Bảng 3.8 Đặc tả usecase Xem chi tiết bài viết 16

Bảng 3.9 Đặc tả usecase Bình luận bài viết 18

Bảng 3.10 Đặc tả usecase Thả tim bài viết 19

Bảng 3.11 Đặc tả usecase Báo cáo bài viết 21

Bảng 3.12 Đặc tả usecase Trả lời bình luận 23

Bảng 3.13 Đặc tả usecase Báo cáo bình luận 25

Bảng 3.14 Đặc tả usecase Xem trang cá nhân 27

Bảng 3.15 Đặc tả usecase Tạo bài viết 28

Bảng 3.16 Đặc tả usecase Xem trang cá nhân của người dùng khác 30

Bảng 3.17 Đặc tả usecase Báo cáo người dùng 31

Bảng 3.18 Đặc tả usecase Theo dõi 33

Bảng 3.19 Đặc tả usecase Xem danh sách người theo dõi 34

Bảng 3.20 Đặc tả usecase Xem danh sách người đang theo dõi 36

Trang 8

DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ

Hình 3.1 Usecase Diagram 8

Hình 3.2 Usecase tổng quát của Người dùng đã xác thực 9

Hình 3.3 Usecase bình luận bài viết 18

Hình 3.4 Usecase Thả tim bài viết 19

Hình 3.5 Usecase Báo cáo bài viết 21

Hình 3.6 Usecase Trả lời bình luận 23

Hình 3.7 Usecase báo cáo bình luận 25

Hình 3.8 Usecase Xem danh sách người theo dõi 34

Hình 3.9 Usecase Xem danh sách người đang theo dõi 35

Hình 3.10 Sơ đồ trình tự - Tìm bài viết 38

Hình 3.11 Sơ đồ trình tự - Bình luận 39

Hình 3.12 Sơ đồ trình tự - Đăng nhập 40

Hình 3.13 Sơ đồ trình tự - Tìm kiếm 41

Hình 3.14 Sơ đồ trình tự - Nhắn tin 42

Hình 3.15 Mô hình liên kết thực thể 43

Hình 3.16 Mô hình quan hệ 44

Hình 3.17 Giao diện thiết kế - Tìm kiếm 45

Hình 3.18 Giao diện thiết kế - Thông báo 45

Hình 3.19 Giao diện thiết kế - Tin nhắn 46

Hình 3.20 Giao diện Swagger – Bài viết 70

Hình 3.21 Giao diện Swagger – Bình luận 71

Hình 3.22 Giao diện Swagger – Theo dõi 71

Hình 3.23 Giao diện Swagger – Thả tim 72

Hình 3.24 Giao diện Swagger – Báo cáo 72

Hình 3.25 Giao diện Swagger - Thông báo 73

Hình 3.26 Giao diện Swagger – Tin nhắn 73

Hình 3.27 Giao diện Swagger - Tìm kiếm 74

Trang 9

Hình 4.1 Cấu trúc tổng quát của Angular Project 47

Hình 4.2 Cấu trúc thư mục src 48

Hình 4.3 Cấu trúc thư mục app 49

Hình 4.4 Cấu trúc tổng quát của Ionic Angular Project 50

Hình 4.5 HTML – Input upload file 50

Hình 4.6 Xử lý file upload 51

Hình 4.8 Xử lý file trước khi gửi xuống server 51

Hình 4.9 Xử lý dữ liệu tin nhắn trả về từ hub 52

Hình 4.10 Xử lý dữ liệu tin nhắn mới trả về từ hub 52

Hình 4.11 Thay đổi đổi trang thái cho tin nhắn mới 53

Hình 4.12 <Người dùng đã xác thực> Website - Giao diện Trang chủ 53

Hình 4.13 <Người dùng đã xác thực> App Mobile - Giao diện Trang chủ 54

Hình 4.14 <Người dùng đã xác thực> Website - Giao diện Chi tiết bài viết 54

Hình 4.15 <Người dùng đã xác thực> App Mobile – Giao diện Chi tiết bài viết 55

Hình 4.16 <Người dùng đã xác thực> Website - Giao diện Tìm kiếm 55

Hình 4.17 <Người dùng đã xác thực> App Mobile – Giao diện Tìm kiếm 56

Hình 4.18 <Người dùng đã xác thực> Website - Giao diện Thông báo 56

Hình 4.19 <Người dùng đã xác thực> App Mobile – Giao diện thông báo 57

Hình 4.20 <Người dùng đã xác thực> Website - Giao diện Danh sách tin nhắn 57

Hình 4.21 <Người dùng đã xác thực> App Mobile – Giao diện Danh sách tin nhắn 58

Hình 4.22 <Người dùng đã xác thực> Website - Giao diện Trang cá nhân 58

Hình 4.23 <Người dùng đã xác thực> App Mobile – Giao diện trang cá nhân 59

Hình 4.24 <Người dùng đã xác thực> Website - Giao diện Thay đổi ảnh đại diện 59 Hình 4.25 <Người dùng đã xác thực> App Mobile – Giao diện Thay đổi ảnh đại diện 60

Hình 4.26 <Người dùng đã xác thực> Website - Giao diện Chỉnh sửa bài viết 60

Hình 4.27 <Người dùng đã xác thực> App Mobile – Giao diện Sửa bài viết 61

Hình 4.28 <Người dùng đã xác thực> Website - Giao diện Tạo bài viết 61

Trang 10

Hình 4.29 <Người dùng đã xác thực> App Mobile – Giao diện Tạo bài viết 62

Hình 4.30 <Người dùng đã xác thực> Website - Giao diện trang cá nhân của người dùng khác 62

Hình 4.31 <Người dùng đã xác thực> App Mobile – Giao diện Trang cá nhân của người dùng khác 63

Hình 4.32 AutoMapperProfile.cs 64

Hình 4.33 Post.cs 65

Hình 4.34 PostReponse.cs 65

Hình 4.35 PostController.cs 65

Hình 4.36 PostService.cs 66

Hình 4.37 PostService.cs 67

Hình 4.38 CreateNotificationRequest.cs 67

Hình 4.39 PresenceHub.ts 68

Hình 4.40 PresenceTracker.ts 68

Hình 4.41 Giao diện Swagger – Tài khoản 69

Trang 11

Chương 1: TỔNG QUAN

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

Cùng với quá trình toàn cầu hóa và sự phát triển của công nghệ thông tin, mạng internet trên thế giới và Việt Nam ngày càng phát triển mạnh mẽ Sự tham gia của các cá nhân trên mạng ngày càng tích cực và nhu cầu chia sẻ thông tin, kết nối bạn

bè là nhu cầu thiết yếu thúc đẩy sự ra đời, phát triển của các website và ứng dụng mobile Hiện nay, tình hình phát triển của các website và ứng dụng mobile đang ngày trở nên mạnh mẽ Số lượng người truy cập và đăng ký thành viên ở các website và ứng dụng mobile ngày càng tăng Điển hình như một số website mạng xã hội: facebook.com, cooky.vn, pinterest.com,…tương ứng là các ứng dụng mobile như Facebook, Cooky, Pinterest,… Tuy nhiên, dù đã có rất nhiều website và ứng dụng mobile trên thị trường như thế nhưng nhu cầu của người dùng vẫn rất cao nên nhóm

đã nghiên cứu xây dựng website và ứng dụng mobile chia sẻ hình ảnh nhằm chia sẻ nhu cầu và tạo nhiều lựa chọn cho người dùng

1.2 Mục tiêu

Thiết kế và xây dựng được website và ứng dụng mobile Chia Sẻ Hình Ảnh với đầy đủ các tính năng như: đăng tải hình ảnh, tìm kiếm và xem các hình ảnh của nhiều người,…

Thiết kế giao diện người dùng gần gũi, dễ sử dụng Với giao diện người quản trị đơn giản trực quan có các chức năng để quản lí người dùng

Trang 12

Chương 2: CƠ SỞ LÝ THUYẾT

2.1 Angular Framework

Angular là một JavaScript framework dùng để viết giao diện web (Front-end)

do google phát triển Hiểu đơn giản thì Angular là một khung làm việc của JavaScript MVC phía máy khách (client) nhằm phát triển ứng dụng web động [1]

Angular là một JavaScript framework rất mạnh Angular cung cấp các tính năng tích hợp cho animation, http service và có các tính năng như auto-complete, navigation, toolbar, menus,… Code được viết bằng TypeScript, biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt [2]

Ưu điểm khi sử dụng Angular: [1]

 Code HTML mạnh mẽ hơn với những đặc trưng như IF, FOR, LOCAL VARIABLES,…

 Xây dựng và tái sử dụng nhờ vào những khối module độc lập

 Nhanh chóng giải quyết các bài toán logic nhờ back-end service hỗ trợ giao tiếp

2.2 ASP.NET Core

ASP.NET Core là một web framework mã nguồn và được tối ưu hóa cho cloud

để phát triển các ứng dụng web chạy trên nhiều nền tảng như Windows, Linux và Mac Hiện tại, nó bao gồm MVC framework được kết hợp các tính năng của MVC

và Web API thành một web framework duy nhất [3]

Ưu điểm khi sử dụng ASP.NET Core: [3]

 ASP.NET Core không phải là phiên bản tiếp theo của ASP.NET Nó là một cái tên mới được xây dựng từ đầu Nó có một sự thay đổi lớn về kiến trúc và kết quả là nó gọn hơn, phân chia module tốt hơn

 ASP.NET Core không còn dựa trên System.Web.dll Nó dựa trên một tập hợp nhiều yếu tố của Nuget packages Điều này cho phép bạn tối ưu ứng dụng của mình chỉ cần những NuGet packages cần thiết

 ASP.NET Core có thể chạy trên cả NET Core hoặc full NET Framework

 Xây dựng và chạy được các ứng dụng ASP.NET Core trên nhiều nền

 Có khả năng host trên IIS hoặc self-host

2.3 Microsoft SQL Server 2017

Microsoft SQL Server là một hệ quản trị cơ sở dữ liệu quan hệ được phát triển bởi Microsoft Là một máy chủ cơ sở dữ liệu, nó là một sản phẩm phần mềm có chức năng chính là lưu trữ và truy xuất dữ liệu theo yêu cầu của các ứng dụng phần mềm

Trang 13

khác Có thể chạy trên cùng một máy tính hoặc trên một máy tính khác trên mạng (bao gồm cả Internet) [4]

Microsoft SQL Server có nhiều phiên bản khác nhau, ở phiên bản SQL Server

2017 có các tính năng đột phá sau: [4]

 Tăng cường hiệu suất mà không cần điều chỉnh: Tăng hiệu suất tốc độ truy vấn bằng cách sử dụng Adaptive Query Processing, giao dịch nhanh hơn với bộ nhớ trong OLTP và phân tích nhanh hơn 100x với Columnstore bộ nhớ trong

 Bảo vệ dữ liệu với Luôn luôn Mã hóa

 Truy vấn bất kỳ dữ liệu nào có hỗ trợ đồ thị

 Hỗ trợ bất kỳ nền tảng, bất kỳ đám mây

2.4 Swagger UI

APIs (Application Programming Interfaces) đang ngày càng trở nên phổ biến, các dịch vụ trên Internet hầu hết đều sử dụng chuẩn RESTfull APIs để cung cấp cho các đối tác 1 phần tài nguyên của mình sử dụng Để cho các đối tác biết mình được cung cấp những tài nguyên gì và sử dụng những thông tin nào để có thể lấy được tài nguyên đó, ta cần phải có 1 công cụ hỗ trợ việc tạo document APIs giúp thuận tiện cho việc cung cấp về cách sử dụng tài nguyên thông qua APIs 1 cách hiệu quả và Swagger ra đời nhằm phục vụ cho công việc đó [5]

Swagger là 1 open source dùng để phát triển, thiết kế, xây dựng và làm tài liệu cho các hệ thống RESTfull Web Service Có một số phần mềm swagger như Swagger Editor, Swagger Codegen, Swagger Inspector, Swagger UI Trong đó swagger UI được sử dụng nhiều nhất [5]

2.5 Ionic Framework

Ionic Framework là bộ công cụ giao diện người dùng mã nguồn mở để xây dựng các ứng dụng dành cho thiết bị di động và máy tính có chất lượng cao, hiệu quả sử dụng công nghệ web như HTML CSS và JavaScript – với tích hợp các khung phổ biến như Angular, React và Vue [6]

Ưu điểm: [6]

 Đa nền tảng: Xây dựng và triển khai các ứng dụng hoạt động trên nhiều nền tảng như IOS, Android, máy tính và Progressive Web App - ứng dụng web tiến bộ với cùng một cơ sở mã

 Thiết kế đẹp: Thiết kế đơn giản, đầy đủ chức năng, có thể hoạt động và hiển thị đẹp mắt trên tất cả các nền tảng Các thành phần được thiết kế trước với kiểu chữ, mô hình tương tác và chủ đề cơ sở tuyệt đẹp

Trang 14

 Dễ sử dụng: Ionic Framework được thiết kế với mục đích đơn giản nên việc tạo ra các ứng dụng trở nên dễ học đối với bất kì ai có kỹ năng phát triển web

Trang 15

Chương 3: NỘI DUNG

Nhược điểm:

 Các biểu tượng cho chức năng không có chú giải, trong trường hợp người dùng không biết về các biểu tượng đó thì phải click vô mới biết đó chức năng gì

 Ở bước đăng ký bằng email không có xác thực tài khoản email có phải chính chủ không

Ưu điểm: Giao diện thân thiện, đầy đủ chức năng để sử dụng

Nhược điểm: Chưa có chế độ bảo mật cho tài khoản Ở bước đăng ký bằng email không có xác thực tài khoản email có phải chính chủ không

Kết luận:

Qua khảo sát các sản phẩm trên nhóm rút ra được các chức năng cần có:

 Chức năng của website:

 Tìm kiếm người dùng hoặc hình ảnh theo chủ đề

 Xem thông báo

 Quản lý tin nhắn:

- Xem danh sách tin nhắn

Trang 16

- Xem chi tiết khung chat của tin nhắn

- Thả tim, trả lời bình luận

- Báo cáo bình luận

 Tương tác với trang cá nhân:

- Xem chi tiết trang cá nhân với các hình ảnh đã đăng tải

- Xem danh sách các bài viết yêu thích

- Thay đổi ảnh đại diện

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

- Xem danh sách người theo dõi hoặc đang theo dõi

 Tương tác với trang cá nhân của người dùng khác:

- Xem chi tiết trang cá nhân của người dùng khác

- Theo dõi hoặc huỷ theo dõi người dùng

- Báo cáo người dùng

Chức năng của người quản trị:

 Đăng nhập

 Đăng xuất

 Quản lý các tài khoản

 Quản lý các bài viết (hình ảnh)

 Quản lý các bình luận

 Quản lý các báo cáo

 Chức năng của ứng dụng mobile:

Trang 17

 Xem thông báo

 Quản lý tin nhắn:

- Xem danh sách tin nhắn

- Xem chi tiết khung chat của tin nhắn

- Thả tim, trả lời bình luận

- Báo cáo bình luận

 Tương tác với trang cá nhân:

- Xem chi tiết trang cá nhân với các hình ảnh đã đăng tải

- Thay đổi ảnh đại diện

 Tương tác với trang cá nhân của người dùng khác:

- Xem chi tiết trang cá nhân với các hình ảnh đã đăng tải của người dùng đó

- Theo dõi hoặc huỷ theo dõi người dùng

- Báo cáo người dùng

3.1.4 Công việc đã thực hiện khi báo cáo tiến độ:

 Tiểu luận chuyên ngành:

Chức năng cho website:

- Xem hình ảnh với nhiều chủ đề đa dạng

- Xem chi tiết hình ảnh

- Đăng hình ảnh

Trang 18

- Thay đổi mật khẩu

 Chức năng của người quản trị:

- Quản lý tài khoản

- Quản lý bài viết

- Đăng nhập

- Đăng xuất

3.2 Mô hình hoá yêu cầu

3.2.1 Thiết kế use case diagram

Hình 3.1 Usecase Diagram

Trang 19

3.2.2 Đặc tả use case

 Người dùng đã xác thực

Hình 3.2 Usecase tổng quát của Người dùng đã xác thực

Trang 20

a <Người dùng đã xác thực> Tìm kiếm hình ảnh hoặc người dùng

Bảng 3.1 Đặc tả usecase Tìm kiếm hình ảnh hoặc người dùng

USE CASE – CSHA_UC_03

Use Case No CSHA _UC_03 Use Case Version 1.0

Use Case Name Tìm kiếm hình ảnh hoặc người dùng

- Thiết bị của người dùng đã xác thực phải có kết nối Internet

- Tài khoản người dùng ở trạng thái đang hoạt động

Post Conditions:

- Thành công: Hệ thống hiển thị tất cả hình ảnh với chủ đề tương ứng hoặc

danh sách các tài khoản mà người dùng nhập

- Thất bại: Hệ thống hiển thị thông báo lỗi

Main Success Scenario:

1 Người dùng nhập chủ đề hình

ảnh hoặc @ với tên tài khoản

vào ô tìm kiếm trên thanh Menu,

rồi nhấn Enter

Hệ thống kiểm tra và hiển thị danh sách tương ứng có trong hệ thống

Trang 21

1 Mất kết nối internet Hệ thống hiển thị thông báo

“Vui lòng kiểm tra kết nối internet của bạn”

2 Không có hình ảnh nào trong hệ

thống có chứa các từ người dùng

nhập

Hệ thống hiển thị thông báo

“Không có kết quả phù hợp.”

3 Lỗi server Hệ thống hiển thị thông báo “Có

một số lỗi với chức năng này Hệ thống sẽ sớm sửa chữa Xin lỗi bạn về sự bất tiện này.”

Relationships: N/A

Business Rules:

- Tìm kiếm: không được để trống

b <Người dùng đã xác thực> Xem thông báo

Bảng 3.2 Đặc tả usecase Xem thông báo

Use Case Name Xem thông báo

- Người dùng đã xác thực gửi lệnh Xem thông báo bằng cách nhấn vào biểu

tượng thông báo trên thanh Menu

Preconditions:

Trang 22

- Thành công: Hệ thống hiển thị tất cả thông báo mới nhất của người dùng

1 Người dùng nhấn vào biểu tượng

thông báo trên thanh Menu

Hệ thống kiểm tra và hiển thị danh sách tất cả các thông báo mới nhất của người dùng

[Exception 2] [Exception 1]

[Exception 3]

Alternative Scenario: N/A

Exceptions:

2 Không có thông báo từ hệ thống

tới người dùng

Hệ thống hiển thị thông báo

“Không có thông báo.”

Relationships: N/A

Business Rules: N/A

c <Người dùng đã xác thực> Xem danh sách tin nhắn

Bảng 3.3 Đặc tả usecase Xem danh sách tin nhắn

Use Case Name Xem danh sách tin nhắn

Actor:

- Người dùng đã xác thực

Summary:

Trang 23

- Cho phép người dùng đã xác thực có thể xem danh sách các tin nhắn của

- Người dùng đã xác thực gửi lệnh Xem danh sách tin nhắn bằng cách nhấn

vào biểu tượng tin nhắn trên thanh Menu

Preconditions:

- Thành công: Hệ thống hiển thị tất cả tin nhắn của người dùng

1 Người dùng nhấn vào biểu

tượng tin nhắn trên thanh

Menu

Hệ thống kiểm tra và hiển thị danh sách tất cả các tin nhắn của người dùng

[Exception 3]

Exceptions:

1 Mất kết nối internet Hệ thống hiển thị thông báo “Vui

lòng kiểm tra kết nối internet của bạn”

2 Người dùng không có tin

nhắn nào trong hệ thống

Hệ thống hiển thị thông báo “Bạn chưa có cuộc trò chuyện nào trong

hệ thống.”

một số lỗi với chức năng này Hệ thống sẽ sớm sửa chữa Xin lỗi bạn

về sự bất tiện này.”

Relationships: CSHA _UC_06

Trang 24

d <Người dùng đã xác thực> Xem chi tiết khung chat

Bảng 3.4 Đặc tả usecase Xem chi tiết khung chat

Use Case Name Xem chi tiết khung chat

- Người dùng đã xác thực có thể xem thành công xem các tin nhắn của

người dùng với người dùng khác trong hệ thống

Triggers:

- Người dùng đã xác thực gửi lệnh Xem khung chat bằng cách nhấn vào

khung tin nhắn tương ứng trong danh sách tin nhắn

Preconditions:

- Thành công: Hệ thống hiển thị tất cả tin nhắn của người dùng

1 Người dùng nhấn vào khung tin

nhắn tương ứng trong danh

sách tin nhắn

Hệ thống kiểm tra và hiển thị khung chat có tất cả các tin nhắn của người dùng với người dùng khác

[Exception 3]

Exceptions:

Trang 25

No Cause System Response

2 Người dùng không có tin nhắn

nào với người dùng đó trong hệ

thống

Hệ thống hiển thị thông báo ở khung chat “Bạn chưa nhắn tin với đối phương trước đó Hãy gửi tin nhắn để bắt đầu cuộc trò chuyện.”

Relationships: CSHA _UC_05, CSHA _UC_07

e <Người dùng đã xác thực> Gửi tin nhắn

Bảng 3.5 Đặc tả usecase Gửi tin nhắn

Use Case Name Gửi tin nhắn

Trang 26

- Thành công: Hệ thống hiển thị tin nhắn người dùng gửi ở khung chat

1 Người dùng nhập tin nhắn vào

khung “Soạn tin nhắn”

f <Người dùng đã xác thực> Xem chi tiết bài viết

Bảng 3.6 Đặc tả usecase Xem chi tiết bài viết

Use Case Name Xem chi tiết bài viết

Actor:

Trang 27

- Thành công: Hệ thống hiển thị chi tiết của bài viết tương ứng với hình ảnh

người dùng nhấn

1 Người dùng nhấn hình ảnh

muốn xem chi tiết

Hệ thống kiểm tra và hiển thị chi tiết của hình ảnh gồm các thông tin sau:

- Tiêu đề(nếu có)

- Mô tả (nếu có)

- Avatar và Tên người tạo

- Danh sách các bình luận của bài viết (nếu có)

Exceptions:

2 Lỗi server Hệ thống hiển thị thông báo “Có một

số lỗi với chức năng này Hệ thống

sẽ sớm sửa chữa Xin lỗi bạn về sự bất tiện này.”

Trang 28

g <Người dùng đã xác thực> Bình luận bài viết

Hình 3.3 Usecase bình luận bài viết Bảng 3.7 Đặc tả usecase Bình luận bài viết

Use Case Name Bình luận bài viết

- Người dùng đã xác thực nhập nội dung bình luận

- Người dùng đã xác thực gửi lệnh Bình luận bài viết bằng cách nhấn vào

Enter trên bàn phím

Preconditions:

- Thành công: Hệ thống hiển thị bình luận vừa đăng ở khung danh sách bình

luận của bài viết

Trang 29

Business Rules:

- Viết nhận xét: không được để trống

h <Người dùng đã xác thực> Thả tim bài viết

Hình 3.4 Usecase Thả tim bài viết Bảng 3.8 Đặc tả usecase Thả tim bài viết

Use Case Name Thả tim bài viết

Actor:

Trang 30

- Người dùng đã xác thực gửi lệnh Thả tim bài viết bằng cách nhấn vào biểu

tưởng trái tim màu xám ở bài viết

Preconditions:

- Thành công: Hệ thống hiển thị biểu tượng trái tim màu đỏ ở bài viết tương

ứng

1 Người dùng nhấn vào biểu

tượng trái tim màu xám ở bài

viết muốn thả tim

Hệ thống kiểm tra và hiển thị chuyển biểu tượng trái tim sang màu đỏ

Exceptions:

Trang 31

i <Người dùng đã xác thực> Báo cáo bài viết

Hình 3.5 Usecase Báo cáo bài viết Bảng 3.9 Đặc tả usecase Báo cáo bài viết

Use Case Name Báo cáo bài viết

- Người dùng đã xác thực gửi lệnh Báo cáo bài viết bằng cách nhấn nút báo

cáo bài viết ở tuỳ chọn của bài viết tương ứng

Preconditions:

- Thành công: Hệ thống hiển thị thông báo báo cáo thành công

Trang 32

1 Người dùng nhấn nút báo cáo

bài viết ở tuỳ chọn của bài

viết tương ứng

Hệ thống kiểm tra và hiển thị cửa

sổ với danh sách các tuỳ chọn nội dung báo cáo, ô nhập mô tả chi tiết

và nút Báo cáo

[Exception 1]

2 Người dùng nhấn vào nút với

nội dung tương ứng muốn báo

cáo

Hệ thống chuyển nút sang màu đen

[Exception 1]

3 Người dùng nhập mô tả chi

tiết lý do báo cáo ở ô “Mô tả

chi tiết lý do báo cáo”

Hệ thống hiển thị nội dung tương ứng

Exceptions:

Business Rules:

- Nút lý do báo cáo: không được để trống

- Ô nhập mô tả chi tiết lý do: không được để trống

Trang 33

j <Người dùng đã xác thực> Trả lời bình luận

Hình 3.6 Usecase Trả lời bình luận Bảng 3.10 Đặc tả usecase Trả lời bình luận

Use Case Name Trả lời bình luận

- Người dùng đã xác thực gửi lệnh Trả lời bình luận bằng cách nhấn biểu

tượng bình luận ở bình luận tương ứng

Preconditions:

- Thành công: Hệ thống hiển thị bình luận ở dưới bình luận được trả lời

tương ứng

Trang 34

1 Người dùng nhấn biểu tượng

bình luận ở bình luận tương

ứng

Hệ thống hiển thị danh sách bình luận trả lời (nếu có) và ô“Soạn bình luận”

2 Người dùng nhập nội dung

vào ô “Soạn bình luận”

Hệ thống hiển thị nội dung tương ứng

Exceptions:

Trang 35

k <Người dùng đã xác thực> Báo cáo bình luận

Hình 3.7 Usecase báo cáo bình luận Bảng 3.11 Đặc tả usecase Báo cáo bình luận

Use Case Name Báo cáo bình luận

- Người dùng đã xác thực gửi lệnh Báo cáo bình luận bằng cách nhấn nút

báo cáo bình luận trong tuỳ chọn ở bình luận tương ứng

Preconditions:

- Thành công: Hệ thống hiển thị thông báo báo cáo thành công

Trang 36

Step Actor Action System Response

1 Người dùng nhấn biểu tượng tuỳ

chọn ở bình luận tương ứng

Hệ thống hiển thị các tuỳ chọn đối với bình luận tương ứng

[Exception 1]

2 Người dùng nhấn vào nút báo

cáo bình luận trong tuỳ chọn

Hệ thống kiểm tra và hiển thị cửa sổ với danh sách các tuỳ chọn nội dung báo cáo, ô nhập

mô tả chi tiết và nút Báo cáo

3 Người dùng nhấn vào nút với nội

dung tương ứng muốn báo cáo

Hệ thống chuyển nút sang màu đen

[Exception 1]

4 Người dùng nhập mô tả chi tiết

lý do báo cáo ở ô “Mô tả chi tiết

Exceptions:

Business Rules:

- Viết nhận xét: không được để trống

Trang 37

l <Người dùng đã xác thực> Xem trang cá nhân

Bảng 3.12 Đặc tả usecase Xem trang cá nhân

Use Case Name Xem trang cá nhân

- Người dùng đã xác thực gửi lệnh Xem trang cá nhân bằng cách nhấn vào

hình đại diện hoặc tên của mình

Preconditions:

- Thành công: Hệ thống hiển thị trang cá nhân của người dùng

1 Người dùng nhấn vào hình

đại diện hoặc tên của mình

Hệ thống kiểm tra và chuyển hướng sang trang cá nhân với các thông tin sau:

Trang 38

No Cause System Response

2 Lỗi server Hệ thống hiển thị thông báo “Có một

số lỗi với chức năng này Hệ thống

sẽ sớm sửa chữa Xin lỗi bạn về sự bất tiện này.”

m <Người dùng đã xác thực> Tạo bài viết

Bảng 3.13 Đặc tả usecase Tạo bài viết

Use Case Name Tạo bài viết

- Người dùng đã xác thực gửi lệnh Tạo bài viết bằng cách nhấn vào biểu

tượng Tạo bài viết (+)

Preconditions:

- Thành công: Hệ thống hiển thị bài viết trong trang cá nhân của người dùng

Trang 39

1 Người dùng nhấn vào biểu tượng

Tạo bài viết (+) ở góc dưới bên

phải của trang chủ hoặc ở dưới

hình đại diện ở trang cá nhân

Hệ thống chuyển hướng sang trang tạo bài viết có:

2 Người dùng nhập tiêu đề và mô

tả rồi nhấn vào biểu tượng tải lên

để tải hình ảnh lên

Hệ thống xuất hiện khung File Explorer để người dùng chọn hình ảnh muốn tải lên

[Exception 1]

3 Người dùng điều hướng đến tệp

hình ảnh muốn tải lên rồi nhấn

Open

Hệ thống kiểm tra và hiển thị hình ảnh người dùng vừa chọn ở khung hình

[Exception 1]

4 Người dùng nhấn nút “Đăng” để

đăng tải bài viết

Hệ thống kiểm tra thành công và điều hướng quay lại trang cá nhân và hiển thị bài viết ở đầu danh sách các bài viết của người dùng

Exceptions:

Business Rules:

- Tiêu đề: không được để trống

- Tệp hình: không được để trống

Trang 40

n <Người dùng đã xác thực> Xem trang cá nhân của người dùng khác

Bảng 3.14 Đặc tả usecase Xem trang cá nhân của người dùng khác

Use Case Name Xem trang cá nhân của người dùng khác

- Người dùng đã xác thực gửi lệnh Xem trang cá nhân của người dùng khác

bằng cách nhấn vào hình đại diện hoặc tên của người dùng đó

Preconditions:

- Thành công: Hệ thống hiển thị trang cá nhân của người dùng tương ứng

1 Người dùng nhấn vào hình đại

diện hoặc tên của người dùng

muốn xem

Hệ thống kiểm tra và chuyển hướng sang trang cá nhân tương ứng với các thông tin sau:

- Hình đại diện

- Tổng số người theo dõi

và người đang theo dõi

- Nút báo cáo

- Nút nhắn tin

Định dạng
Số trang	90
Dung lượng	4,66 MB