(Đồ á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

TỔNG QUAN

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è ngày càng trở nên thiết yếu, thúc đẩy sự ra đời và phát triển của các website và ứng dụng di động Hiện nay, hoạt động của các website và ứng dụng di động đang ngày càng mạnh mẽ; số lượng lượt truy cập và người đăng ký thành viên ngày càng tăng Ví dụ điển hình là một số website mạng xã hội như Facebook, Cooky, Pinterest, cùng với các ứng dụng di động tương ứng như Facebook, Cooky, Pinterest Tuy nhiên, dù đã có nhiều website và ứng dụng di động trên thị trường, nhu cầu của người dùng vẫn rất cao, vì vậy nhóm đã nghiên cứu xây dựng một website và ứng dụng di động chia sẻ hình ảnh nhằm đáp ứng nhu cầu và mang lại nhiều lựa chọn cho người dùng.

Mục tiêu

Thiết kế giao diện người dùng gần gũi và dễ sử dụng, giúp người dùng tiếp cận hệ thống một cách nhanh chóng và thuận tiện Với giao diện quản trị đơn giản, trực quan và dễ nhìn, hệ thống tích hợp đầy đủ các chức năng quản lý người dùng, cho phép quản trị viên tạo, chỉnh sửa, phân quyền và theo dõi hoạt động người dùng một cách hiệu quả.

Công nghệ sử dụng

- Front-end: Angular 9 có sử dụng HTML, CSS, JS, Boostrap 4.0 với ứng dụng mobile có sử dụng ionic

- Back-end: ASP.NET Core

CƠ SỞ LÝ THUYẾT

Angular Framework

Angular is a JavaScript framework developed by Google for building modern front-end web interfaces Put simply, Angular is a client-side JavaScript MVC framework that enables the development of dynamic web applications.

Angular là một framework JavaScript mạnh mẽ dành cho phát triển ứng dụng web, được thiết kế để tối ưu hóa tốc độ và khả năng mở rộng Nó tích hợp sẵn các tính năng cho hoạt hình (animation), dịch vụ HTTP (HTTP service) và cung cấp hàng loạt công cụ giao diện như auto-complete, điều hướng (navigation), thanh công cụ (toolbar) và menu, giúp xây dựng các ứng dụng phức tạp một cách hiệu quả Mã nguồn Angular được viết bằng TypeScript, được biên dịch thành JavaScript và hiển thị trong trình duyệt với hiệu suất ổn định Các ưu điểm của Angular tập trung vào khả năng tái sử dụng thành phần, tính module hóa cao, quản lý trạng thái và sự đồng bộ dữ liệu, từ đó rút ngắn thời gian phát triển và tăng độ tin cậy cho dự án.

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

ASP.NET Core

ASP.NET Core là một web framework mã nguồn mở được tối ưu hóa cho đám mây, cho phép phát triển các ứng dụng web chạy trên nhiều nền tảng như Windows, Linux và macOS Hiện tại, ASP.NET Core tích hợp MVC và Web API thành một framework duy nhất, mang lại sự nhất quán về kiến trúc và tối ưu hóa hiệu suất cho các dự án web Các ưu điểm khi sử dụng ASP.NET Core được giới thiệu trong tài liệu tham khảo, cho thấy framework này phù hợp cho phát triển các ứng dụng web hiện đại.

ASP.NET Core không phải là phiên bản tiếp theo của ASP.NET; đây là một tên gọi được xây dựng từ đầu và mang thay đổi lớn về kiến trúc, giúp hệ thống gọn nhẹ hơn và phân chia module tốt hơn.

ASP.NET Core không còn phụ thuộc vào System.Web.dll; thay vào đó, nó được xây dựng trên một tập hợp các gói NuGet modular Kiến trúc dựa trên NuGet cho phép tối ưu hóa ứng dụng bằng cách chỉ dùng những gói NuGet cần thiết, giúp giảm kích thước, tăng hiệu suất và cải thiện khả năng bảo trì của dự án.

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

Microsoft SQL Server 2017

Microsoft SQL Server là hệ quản trị cơ sở dữ liệu quan hệ được phát triển bởi Microsoft, đóng vai trò là máy chủ cơ sở dữ liệu cung cấp nền tảng lưu trữ và truy xuất dữ liệu cho các ứng dụng phần mềm Là sản phẩm phần mềm chuyên dụng cho quản lý dữ liệu, Microsoft SQL Server cho phép lưu trữ an toàn, tổ chức và quản lý dữ liệu, đồng thời thực thi các truy vấn SQL để đáp ứng yêu cầu của doanh nghiệp Với khả năng xử lý hiệu quả và khả năng mở rộng, SQL Server hỗ trợ các giải pháp CNTT từ quy mô nhỏ đến lớn, đảm bảo hiệu suất và tính tin cậy cho ứng dụng.

3 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 bằng Adaptive Query Processing, tự động tối ưu tốc độ truy vấn; giao dịch nhanh hơn nhờ bộ nhớ trong OLTP và phân tích dữ liệu nhanh tới 100 lần với Columnstore trong bộ nhớ.

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

Swagger UI

API ngày càng phổ biến; hầu hết các dịch vụ trên Internet sử dụng RESTful APIs để cung cấp tài nguyên cho đối tác Để đối tác biết được những tài nguyên được cung cấp và các thông tin cần thiết để truy cập chúng, ta cần một công cụ hỗ trợ tạo tài liệu API nhằm mô tả rõ ràng cách sử dụng tài nguyên thông qua API Swagger ra đời để phục vụ cho công việc này, giúp quá trình tạo và chia sẻ tài liệu API trở nên hiệu quả và dễ dàng cho việc tích hợp và khai thác tài nguyên.

Swagger is an open-source framework for developing, designing, building, and documenting RESTful web services, and it comprises tools such as Swagger Editor, Swagger Codegen, Swagger Inspector, and Swagger UI, with Swagger UI being the most widely used component.

Ionic Framework

Ionic Framework là bộ công cụ giao diện người dùng mã nguồn mở dùng để xây dựng các ứng dụng di động và máy tính để bàn chất lượng cao, tận dụng công nghệ web như HTML, CSS và JavaScript, và tích hợp với các khung phổ biến như Angular, React và Vue Đây là giải pháp đa nền tảng với một mã nguồn duy nhất giúp phát triển nhanh hơn và nhất quán trên nhiều nền tảng Ưu điểm của Ionic bao gồm khả năng tái sử dụng mã, giao diện người dùng nhất quán, hệ sinh thái plugin phong phú và cộng đồng phát triển lớn, mang lại hiệu suất và trải nghiệm người dùng tối ưu.

Đa nền tảng cho phép 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 để bàn và Progressive Web App (PWA) bằng một cơ sở mã duy nhất Mô hình phát triển đa nền tảng giúp tiết kiệm thời gian và chi phí, đồng thời mang lại trải nghiệm người dùng nhất quán trên mọi thiết bị và nền tảng.

Thiết kế đẹp và tối giản, vừa đầy đủ chức năng vừa dễ sử dụng, đảm bảo hoạt động mượt mà và hiển thị ấn tượng trên mọi nền tảng Các thành phần giao diện được chuẩn bị sẵn với kiểu chữ nhất quán, mẫu tương tác trực quan và chủ đề nền tinh tế, mang lại trải nghiệm người dùng đồng nhất, chuyên nghiệp và tối ưu cho SEO.

Ionic Framework được thiết kế với mục tiêu đơn giản và dễ sử dụng, giúp việc tạo ứng dụng di động trở nên nhanh chóng và dễ học đối với bất kỳ ai có kỹ năng phát triển web Với khung công cụ trực quan và cấu trúc đồng nhất, Ionic cho phép các nhà phát triển web chuyển đổi kiến thức của mình thành các ứng dụng di động chất lượng mà không phải trải qua quá nhiều khó khăn.

NỘI DUNG

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

Pinterest.com và ứng dụng Pinterest có nhiều ưu điểm đáng kể: giao diện đơn giản và dễ sử dụng, giúp người dùng tiếp cận nhanh chóng Nền tảng này áp dụng AI để phân tích thói quen người dùng và đưa ra gợi ý tìm kiếm phù hợp, tối ưu hóa quá trình khám phá nội dung Chất lượng tải lên hình ảnh trên Pinterest tương đối tốt, hỗ trợ người sáng tạo chia sẻ nội dung một cách trực quan và hiệu quả cho chiến lược SEO nội dung.

Trong giao diện người dùng, các biểu tượng thường thể hiện chức năng mà không có chú giải rõ ràng; khi người dùng không nhận biết ý nghĩa các biểu tượng này, họ phải nhấp vào để biết chức năng thực sự của chúng Thiếu chú giải có thể gây nhầm lẫn, khiến người dùng tốn thời gian và thao tác không cần thiết Để cải thiện trải nghiệm và tối ưu cho SEO, nên bổ sung chú thích ngắn gọn hoặc mô tả xuất hiện khi người dùng di chuột hoặc chạm vào biểu tượng, giúp nhận diện chức năng nhanh chóng và giảm rào cản cho người dùng.

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

 Facebook.com và ứng dụng Facebook Ưu điểm: Giao diện thiết kế đẹp, chi tiết Đầy đủ chức năng để đáp ứng mọi nhu cầu của người dùng

Nhược điểm: Hình ảnh/video khi tải lên chất lượng có thể bị giảm đi

 Cooky.vn và ứng dụng Cooky Ư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

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 người dùng đã xác thực:

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

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

- Xem danh sách tin nhắn

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

 Tương tác với hình ảnh:

- Xem chi tiết hình ảnh

- Thả tim, bình luận hình ảnh

- Thả tim, trả lời 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

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

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

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

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

 Chức năng của người dùng đã xác thực:

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

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

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

3.2.1 Thiết kế use case diagram

 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

10 a 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 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

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

- Cho phép người dùng đã xác thực có thể tìm kiếm hình ảnh trong hệ thống

- Người dùng đã xác thực có thể tìm hình ảnh thành công trong hệ thống

- Người dùng đã xác thực nhập chủ đề hình ảnh hoặc @ với tên tài khoản muốn tìm

- Người dùng đã xác thực gửi lệnh tìm kiếm bằng cách nhấn Enter trên bàn phím

- 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

- 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

Step Actor Action System Response

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

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

Hiện nay có 3 lỗi máy chủ gây gián đoạn một số chức năng của hệ thống Người dùng có thể thấy 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.” Đội ngũ kỹ thuật đang tích cực khắc phục sự cố, đảm bảo khôi phục hoạt động càng nhanh càng tốt và cập nhật trạng thái sửa lỗi để cải thiện sự ổn định và trải nghiệm người dùng.

- Tìm kiếm: không được để trống b 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

- Cho phép người dùng đã xác thực có thể xem thông báo mới nhất

- Người dùng đã xác thực có thể xem thành công các thông báo mới nhất trong hệ thống

- 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

- 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

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

Hiện tại hệ thống gặp 3 lỗi máy chủ khiến một số chức năng bị ảnh hưởng Hệ thống sẽ 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.' Chúng tôi đang khắc phục sự cố để khôi phục đầy đủ chức năng càng sớm có thể và mong bạn thông cảm cho sự cố này.

Business Rules: N/A 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

- 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

- 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 trong hệ thống

- 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

- 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

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

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

Hiện tại có 3 lỗi máy chủ gây ra sự cố cho hệ thống và 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.” Thông báo cho biết các lỗi này đang được khắc phục và hệ thống sẽ sớm trở lại hoạt động bình thường để đảm bảo trải nghiệm người dùng không bị gián đoạn.

14 d 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

- Cho phép người dùng đã xác thực có thể xem chi tiết khung chat tin nhắn của người dùng

- 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

- 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

- 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

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

Hiện tại hệ thống gặp 3 lỗi máy chủ khiến một số chức năng bị ảnh hưởng và hiển thị thông báo lỗi: Có một số lỗi với chức năng này Hệ thống sẽ sớm khắc phục sự cố và sửa chữa, xin lỗi bạn về sự bất tiện này.

Relationships: CSHA _UC_05, CSHA _UC_07

Business Rules: N/A e 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

- Cho phép người dùng đã xác thực có thể gửi tin nhắn cho người dùng khác

- Người dùng đã xác thực có thể gửi thành công tin nhắn cho người dùng khác

- Người dùng đã xác thực gửi lệnh Gửi tin nhắn bằng cách nhấn nút gửi ở khung nhập tin nhắn

- 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”

Hệ thống hiển thị kí tự tương ứng ở khung nhắn

2 Người dùng nhấn nút gửi để gửi tin nhắn

Hệ thống hiển thị tin nhắn người dùng vừa gửi trong khung chat

Hiện tại hệ thống gặp hai lỗi máy chủ khiến một số chức năng bị ảnh hưởng Khi sự cố xảy ra, hệ thống sẽ 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.' Chúng tôi đang khắc phục sự cố và cố gắng khôi phục chức năng để cải thiện trải nghiệm người dùng càng sớm càng tốt.

Business Rules: N/A f 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

- Cho phép người dùng đã xác thực có thể xem chi tiết bài viết

- Người dùng đã xác thực có thể xem thành công chi tiết của bài viết

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

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

- 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ó)

Hiện tại hệ thống gặp hai lỗi server gây gián đoạn một số chức năng Khi gặp sự cố, 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.” Đội ngũ kỹ thuật đang khẩn trương kiểm tra và khắc phục, nhằm đảm bảo dịch vụ được phục hồi nhanh chóng và giảm thiểu ảnh hưởng đến người dùng.

18 g 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

- Cho phép người dùng đã xác thực có thể bình luận bài viết

- Người dùng đã xác thực có thể bình luận bài viết thành công

- 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

- 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

1 Người dùng nhập bình luận vào ô “Viết nhận xét”

Hệ thống kiểm tra và hiển thị bình luận ở khung nhận xét của bài viết

Hiện tại hệ thống gặp 2 lỗi server khiến một số chức năng bị gián đoạn và hiển thị thông báo cho người dùng Nội dung thông báo ghi rõ: "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." Chúng tôi đang tích cực khắc phục để phục hồi dịch vụ nhanh chóng và đảm bảo trải nghiệm người dùng trở lại bình thường càng sớm càng tốt.

- Viết nhận xét: không được để trống h 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

- Cho phép người dùng đã xác thực có thể thả tim bài viết

- Người dùng đã xác thực có thể thả tim bài viết thành công

- 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

- 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 đỏ

Hiện tại hệ thống gặp một số lỗi máy chủ ảnh hưởng đến một chức năng và đang được khắc phục Thông báo trên màn hình cho biết: "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." Đội ngũ kỹ thuật đang làm việc để khôi phục dịch vụ nhanh nhất có thể và cập nhật tình trạng hệ thống để người dùng có thể tiếp tục sử dụng mà không gặp gián đoạn.

21 i 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

- Cho phép người dùng đã xác thực có thể báo cáo bài viết

- Người dùng đã xác thực có thể báo cáo bài viết tới hệ thống thành công

- 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

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

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

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

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

4 Người dùng nhấn vào nút Báo cáo để gửi

Hệ thống kiểm tra và hiển thị thông báo “Báo cáo đã được gửi!” đồng thời đóng cửa sổ báo cáo

Hiện tại có hai lỗi máy chủ dẫn đến sự cố với chức năng này 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." Thông điệp này cho người dùng biết hệ thống đang gặp sự cố và sẽ được khắc phục sớm, đồng thời xin lỗi vì sự bất tiện.

- 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

23 j 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

- Cho phép người dùng đã xác thực có thể trả lời bình luận

- Người dùng đã xác thực có thể trả lời bình luận thành công

- 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

- 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

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”

3 Người dùng nhấn Enter trên bàn phím để gửi bình luận trả lời

Hệ thống kiểm tra và hiển thị bình luận ở dưới bình luận được trả lời tương ứng

Hiện tại hệ thống gặp hai lỗi máy chủ khiến người dùng thấy 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." Những sự cố này gây gián đoạn chức năng và hệ thống đang tích cực khắc phục để khôi phục hoạt động bình thường, đảm bảo trải nghiệm người dùng được trở lại ổn định.

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

25 k 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

- Cho phép người dùng đã xác thực có thể báo cáo bình luận tới hệ thống

- Người dùng đã xác thực có thể gửi báo cáo bình luận thành công

- 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

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

2 Người dùng nhấn vào nút báo cáo bình luận trong tuỳ chọn

Hiện tại hệ thống gặp hai lỗi máy chủ khiến một số chức năng bị gián đoạn và 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.” Thông điệp cho thấy tình trạng lỗi máy chủ đang được xử lý và đội ngũ kỹ thuật đang nỗ lực khắc phục để khôi phục hoạt động bình thường càng sớm càng tốt Bạn có thể theo dõi cập nhật trạng thái hệ thống và thử lại sau khi nhận thông báo sửa chữa thành công.

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

27 l 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

- Cho phép người dùng đã xác thực có thể xem trang cá nhân của mình

- Người dùng đã xác thực có thể xem trang cá nhân thành công

- 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

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

- Tổng số người theo dõi và người đang theo dõi

- Danh sách tất cả các bài viết (nếu có)

Hai lỗi máy chủ gây ra sự cố cho chức năng này và làm gián đoạn trải nghiệm người dùng 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." Dịch vụ dự kiến sẽ được khắc phục sớm để quay lại hoạt động ổn định.

Business Rules: N/A m 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

- Cho phép người dùng đã xác thực có thể tạo bài viết mới

- Người dùng đã xác thực tạo bài viết mới thành công

- 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 (+)

- 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

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

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

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

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

Hiện có hai lỗi máy chủ đang ảnh hưởng đến chức năng trên hệ thống Thông báo cho người dùng cho biết có một số lỗi với chức năng này và hệ thống sẽ sớm khắc phục Chúng tôi xin lỗi về sự bất tiện này.

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

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

30 n 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

- Cho phép người dùng đã xác thực có thể xem trang cá nhân của người dùng tương ứng

- Người dùng đã xác thực có thể xem trang cá nhân của người dùng tương ứng thành công

- 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 đó

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

- Tổng số người theo dõi và người đang theo dõi

- Nút theo dõi hoặc huỷ theo dõi

- Danh sách tất cả các bài viết (nếu có)

Hiện tại có hai lỗi máy chủ ảnh hưởng đến chức năng này Hệ thống hiển thị thông báo lỗi: "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." Chúng tôi đang khẩn trương khắc phục sự cố và sẽ cập nhật khi dịch vụ được khôi phục.

Business Rules: N/A o Báo cáo người dùng

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

Use Case Name Báo cáo người dùng

- Cho phép người dùng đã xác thực có thể báo cáo tài khoản người dùng khác tới hệ thống

- Người dùng đã xác thực có thể gửi báo cáo tài khoản thành công

- Người dùng đã xác thực gửi lệnh Báo cáo tài khoản bằng cách nhấn nút báo cáo trong trang cá nhân tương ứng

1 Người dùng nhấn nút báo cáo ở trang cá nhân người dùng tương ứng

Hiện tại hệ thống gặp hai lỗi máy chủ ảnh hưởng đến chức năng này và 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.' Chúng tôi xin lỗi về sự bất tiện và đang tích cực khắc phục để phục hồi dịch vụ nhanh nhất có thể.

33 p Theo dõi

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

Use Case Name Theo dõi

- Cho phép người dùng đã xác thực có thể theo dõi các hoạt động của người dùng khác trên hệ thống

- Người dùng đã xác thực có thể theo dõi người dùng thành công

- Người dùng đã xác thực gửi lệnh Theo dõi người dùng bằng cách nhấn nút theo dõi tương ứng với tên người dùng

- Thành công: Hệ thống chuyển nút theo dõi sang thành nút huỷ theo dõi

1 Người dùng nhấn nút theo dõi tương ứng với tên người dùng

Hệ thống kiểm tra và chuyển nút theo dõi sang thành nút huỷ theo dõi

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

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

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

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

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

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

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

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

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

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

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

Thiết kế giao diện

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

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

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

CÀI ĐẶT SẢN PHẨM

Front-end

Sau khi tạo project thành công thì ở thư mục root có cấu trúc như hình dưới:

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

Mục đích của các thư mục và tập tin này như sau:

 e2e: Thư mục này dùng để chứa các tập tin dành cho mục đích kiểm thử

 node_modules: Chứa các Node.js module cần thiết cho ứng dụng

 src: Đây là thư mục sẽ chứa toàn bộ source code của ứng dụng

 edittorconfig: Chứa các cấu hình liên quan đến phần Editor để chỉnh sửa source code như: indent_size, max_line_length,…

 gitignore: Đây là tập tin metadata của Git, chứa thông tin những tập tin hoặc thư mục sẽ bị bỏ qua (ignore) không được commit lên Git Repository

 angular-cli.json: Đây là tập tin chứa cấu hình cho Angular CLI, giúp chúng ta có thể build ứng dụng Angular

 karma.conf.js: Tập tin cấu hình cho Karma, liên quan nhiều đến phần testing

 package-lock.json: Dùng để lock version cho các Node.js module dependencies

 package.json: Tập tin cấu hình cho Node.js module dependencies

 protractor.conf.js: Tập tin cấu hình cho Protractor, liên quan nhiều đến phần testing

 README.md: Tập tin này thường được sử dụng để cho các hệ thống

Git hiển thị thông tin về Git Repository của chúng ta

 tsconfig.json: Tập tin định nghĩa việc compile cho TypeScript

 tslint.json: Tập tin cấu hình để kiểm tra lỗi cho các tập tin ts

Trong danh sách các tập tin và thư mục được liệt kê ở trên, thư mục src đóng vai trò quan trọng nhất vì là nơi ta có thể thêm và chỉnh sửa mã nguồn để phát triển ứng dụng Angular của mình Thư mục này chứa các thành phần và cấu hình cần thiết để xây dựng ứng dụng, cho phép quản lý logic nghiệp vụ, dịch vụ và mô-đun, cùng với tài nguyên và môi trường để đảm bảo hoạt động ổn định giữa các môi trường Việc làm việc với thư mục src hiệu quả góp phần tối ưu hóa quy trình phát triển và giúp ứng dụng Angular của bạn có cấu trúc rõ ràng và dễ bảo trì.

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

Mục đích của các thư mục, tập tin trong thư mục này như sau:

 app: Đây là thư mục sẽ chứa toàn bộ code của ứng dụng Angular

 assets: Thư mục này sẽ chứa các file ảnh, CSS, custom JavaScript của ứng dụng Angular

Environments là khái niệm cho phép một ứng dụng chạy trên nhiều môi trường khác nhau bằng cách quản lý tập tin cấu hình riêng cho từng môi trường Thư mục environments chứa các cấu hình cho từng môi trường (phát triển, thử nghiệm, staging, sản xuất), giúp chuẩn hóa tham số và đảm bảo ứng dụng nhận đúng cấu hình ở mỗi môi trường khi triển khai Việc tách biệt cấu hình theo môi trường tối ưu cho quy trình CI/CD, giảm thiểu sai lệch cấu hình và tăng tính linh hoạt khi di chuyển giữa các môi trường berbeda.

 favicon.ico: Icon của ứng dụng Angular

 index.html: Trang chủ của ứng dụng Angular

 main.ts: Chứa code bootstrapping cho ứng dụng Angular

 polyfill.ts: Dùng để định nghĩa các chuẩn để ứng dụng của chúng ta có thể chạy được trên mọi trình duyệt

 style.css: Định nghĩa style CSS cho ứng dụng Angular

 test.ts: Code để chạy test

Như đã đề cập, thư mục app chứa toàn bộ mã nguồn của ứng dụng; khi bạn tạo một dự án trong thư mục này, các tập tin sẽ thể hiện mẫu cho một module, giúp chuẩn hóa việc thiết kế và triển khai các module một cách nhanh chóng và nhất quán Thư mục app có cấu trúc được mô tả chi tiết nhằm giúp bạn nắm bắt cách tổ chức mã nguồn và các thành phần liên quan của dự án.

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

 _components: Dùng để chứa các component dùng chung cho toàn ứng dụng như alert

 _helpers: Nơi để các file TypeScript phục vụ cho việc kiểm tra, xác thực

 _models: Chứa các file khai báo model tương ứng với database

 account: Là module với các component phục vụ cho bước đăng ký đăng nhập, còn có thể gọi là giao diện cho Khách

 admin: Là module với các component cho Người quản trị

 home: Là module với các component cho Người dùng đã xác thực

 app-routing.module.ts: Dùng để định nghĩa routing cho module

 app-module.ts: Dùng để nhóm các component, directive, pipe, và service có trong module

 app-component.html: Dùng để viết giao diện cho component bằng ngôn ngữ html

 app-component.ts: Dùng để khai báo cho component

Với app mobile thi sau khi tạo project ionic thành công thì ở thư mục root có cấu trúc như hình dưới:

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

Trong dự án ứng dụng di động, cấu trúc thư mục thường giống với dự án website để quản lý mã nguồn và tài nguyên một cách hiệu quả Đồng thời, có thêm các file cấu hình cho Ionic và Capacitor, như ionic.config.json và capacitor.config.json, nhằm thiết lập môi trường và cho phép chạy dự án trên máy ảo hoặc thiết bị thực.

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

 Xử lý khi upload hình ảnh:

Hình 4.5 HTML – Input upload file

Hình 4.6 Xử lý file upload

Input nhận đầu vào ở dạng file (hình 4.1) Khi người dùng nhấp và chọn tải lên hình ảnh, hệ thống sẽ đọc nội dung file bằng FileReader() và ép về dạng chuỗi (string) Chuỗi này được dùng để hiển thị hình ảnh lên màn hình theo hình 4.2, mang lại trải nghiệm người dùng trực quan và nhanh chóng.

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

Khi người dùng đăng bài hệ thống sẽ tải hình lên fisebase và nhận link hình ảnh trên fisebase về lưu vào form dữ liệu

 Xử lý khi nhắn tin:

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

Khi nhấn vào tin nhắn để mở khung chat, hệ thống sẽ khởi tạo một HubConnection nhằm nhận danh sách tin nhắn trả về từ Hub và lưu danh sách này vào asObservable() Khi gửi hoặc nhận một tin nhắn mới, Hub sẽ trả về dữ liệu của tin nhắn đó và hệ thống sẽ thêm tin nhắn này vào cuối danh sách đã lưu Khi hai đầu kết nối đồng thời với Hub, hệ thống sẽ cập nhật tin nhắn tương ứng trong danh sách đã lưu thành trạng thái đã đọc và gán thời gian đọc bằng thời gian hiện tại (trước đó là null).

 Xử lý danh sách tin nhắn khi có tin nhắn mới:

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

Khi người dùng đăng nhập, hệ thống sẽ kết nối với hub và nhận danh sách các tin nhắn mới nhất giữa người dùng đang nhắn tin mà hub trả về, đồng thời lưu vào asObservable() Khi gửi hoặc nhận một tin nhắn mới, Hub sẽ trả về dữ liệu của tin nhắn đó; hệ thống sẽ xóa tin nhắn trước đó bằng hàm filter() của asObservable() và thêm tin nhắn mới nhận vào danh sách.

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

Khi người dùng nhấn xem tin nhắn mới, hệ thống sẽ tìm tin nhắn trong danh sách đã lưu bằng ID và lưu thời gian xem tin nhắn vào bảng read để ghi nhận hành động.

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

Hình 4.11 Website - Giao diện Trang chủ

Hình 4.12 App Mobile - Giao diện Trang chủ

Hình 4.13 Website - Giao diện Chi tiết bài viết

Hình 4.14 App Mobile – Giao diện Chi tiết bài viết

Hình 4.15 Website - Giao diện Tìm kiếm

Hình 4.16 App Mobile – Giao diện Tìm kiếm

Hình 4.17 Website - Giao diện Thông báo

Hình 4.18 App Mobile – Giao diện thông báo

Hình 4.19 Website - Giao diện Danh sách tin nhắn

Hình 4.20 App Mobile – Giao diện Danh sách tin nhắn

Hình 4.21 Website - Giao diện Trang cá nhân

Hình 4.22 App Mobile – Giao diện trang cá nhân

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

Hình 4.23 Website - Giao diện Thay đổi ảnh đại diện

Hình 4.24 App Mobile – Giao diện Thay đổi ảnh đại diện

Hình 4.25 Website - Giao diện Chỉnh sửa bài viết

Hình 4.26 App Mobile – Giao diện Sửa bài viết

Hình 4.27 Website - Giao diện Tạo bài viết

Hình 4.28 App Mobile – Giao diện Tạo bài viết

 Trang cá nhân của người dùng khác

Hình 4.29 Website - Giao diện trang cá nhân của người dùng khác

Hình 4.30 App Mobile – Giao diện Trang cá nhân của người dùng khác

Back-end

Project được chia thành các thư mục sau:

Xác định các end points / routes cho web api, controllers là đầu vào cho web api từ client applications thông qua http requests

Trong kiến trúc API, việc tách biệt giữa Request Model và Response Model cho Controller mang lại sự rõ ràng và tối ưu hóa quá trình phát triển Request Model định nghĩa và khai báo đầy đủ các tham số cho mọi yêu cầu gửi đến API, giúp kiểm soát, xác thực và làm sạch dữ liệu đầu vào, từ đó giảm thiểu lỗi và nâng cao tính bảo mật Ngược lại, Response Model mô tả cấu trúc dữ liệu sẽ trả về cho client, đảm bảo tính nhất quán và dễ xử lý ở phía người dùng hoặc hệ thống phía ngoài Việc này hỗ trợ thiết kế, kiểm thử và bảo trì bằng cách cung cấp các giao diện dữ liệu rõ ràng cho Controller, tăng khả năng mở rộng và tối ưu hóa quá trình tích hợp với các hệ thống khác cũng như cải thiện hiệu quả SEO nhờ định dạng dữ liệu chuẩn Tổng thể, hai loại mô hình này giúp API trở nên dễ bảo trì, an toàn và linh hoạt hơn, đồng thời nâng cao trải nghiệm phát triển và tích hợp với các tài nguyên và dịch vụ bên ngoài.

Chứa code cho business logic chính, xác thực và truy cập dữ liệu

Dữ liệu được lưu trữ trong cơ sở dữ liệu được đại diện và quản lý thông qua các thực thể trong ứng dụng Entity Framework Core thực hiện ánh xạ dữ liệu quan hệ từ cơ sở dữ liệu sang các lớp đối tượng thực thể C#, đồng thời đồng bộ hóa giữa bảng dữ liệu và mô hình đối tượng Nhờ ORM này, việc truy xuất, cập nhật và quản lý dữ liệu trở nên tự động và nhất quán thông qua các phiên bản của đối tượng C#.

Database migration files, generated from Entity classes, are used to automatically create the SQL Server database for the API and to update the schema whenever the Entities change These migrations are created via the Package Manager Console, and in this example they were generated with the Add-Migration InitialCreate command.

Các class Middleware được dùng để tạo các yêu cầu pipeline để xử lý các tác vụ như xử lí global error và xác thực token

Một số class hỗ trợ cho việc ánh xạ dữ liệu, xác thực,…

Việc dùng AutoMapper để ánh xạ từ Entity sang Model cho phép xử lý dữ liệu một cách tự do mà không ảnh hưởng tới cấu trúc của Entity cũng như các quan hệ giữa chúng Model phản ánh cấu trúc dữ liệu trả về cho client và không nhất thiết phải giống hẳn Entity, mà có thể chứa thuộc tính từ nhiều Entity khác nhau để phục vụ nhu cầu hiển thị dữ liệu Nhờ đó ta tách bạch giữa tầng xử lý dữ liệu và tầng trình diễn, tối ưu hóa dữ liệu trả về và tăng tính linh hoạt trong việc mở rộng sau này.

Sử dụng các lớp service để xử lý dữ liệu trước khi trả về cho client thông qua HttpRequest Nhờ việc ánh xạ các thuộc tính của entity sang model, ta có thể đơn giản hóa dữ liệu trả về mà vẫn đảm bảo đầy đủ thông tin cần thiết cho mỗi request.

Sử dụng các service khác nhau để hỗ trợ việc lấy các thuộc tính của các entity khác nhau sau đó map vào Response Model

Ngoài ra ta còn có thể dùng các service để xử lý dữ liệu một cách tự động mỗi khi cần mà không cần tạo request mới

Các Request model giúp định dạng dữ liệu truyền vào cho các hàm xử lý của service, đảm bảo tính đúng đắn của dữ liệu và giảm thiểu việc xuất hiện các exception Việc chuẩn hóa dữ liệu đầu vào thông qua Request model cho phép kiểm tra kiểu dữ liệu, ràng buộc các trường bắt buộc và giới hạn giá trị trước khi gọi logic xử lý, từ đó tăng tính ổn định của hệ thống, cải thiện bảo trì mã nguồn và tối ưu hóa hiệu suất xử lý trên các API.

Khi người dùng đăng nhập, hệ thống tự động tạo các hub và đẩy dữ liệu tới Client theo thời gian thực Dữ liệu truyền qua hub gồm trạng thái đăng nhập, thông báo và tin nhắn mới, giúp đồng bộ thông tin giữa máy chủ và người dùng một cách nhanh chóng và đáng tin cậy Quá trình này tối ưu hóa trải nghiệm người dùng và cải thiện khả năng phản hồi của hệ thống.

Thông tin của người dùng sẽ được thu thập và phân tích để có thể đưa ra các đề xuất vài viết cũng như tìm kiếm phù hợp

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

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

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

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

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

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

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

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

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

TỔNG KẾT

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

Nhóm đã xây dựng được một trang website và ứng dụng chia sẻ hình ảnh với các chức năng cơ bản mà nhóm đã đề ra lúc đầu như:

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

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

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

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

Ưu điểm

Có áp dụng học máy để phân loại ảnh

Sử dụng dữ liệu hoạt động của người dùng để đưa bài viết cũng như đề xuất tìm kiếm phù hợp

Chức năng nhắn tin thời gian thực cho phép hai người dùng bất kỳ có thể trò chuyện với nhau ngay khi cả hai đăng nhập vào hệ thống Tin nhắn được gửi và nhận tức thì, được đồng bộ trên mọi thiết bị và không cần làm mới trang, mang lại trải nghiệm trò chuyện liền mạch Với tính năng nhắn tin thời gian thực, người dùng có thể trao đổi thông tin nhanh chóng, an toàn và tiện lợi ở bất cứ đâu.

Người dùng có thể nhận tin nhắn hoặc thông báo ngay lập tức khi đang đăng nhập vào hệ thống.

Nhược điểm

Chưa có xác thực hai lớp

Người dùng phải đăng nhập mới sử dụng được sản phẩm

Còn thiếu các chức năng thương mại

Chưa có chức năng gửi tin nhắn là hình ảnh

Phân loại ảnh hơi tốn thời gian dẫn đến đăng bài viết chưa nhanh chóng

Hiện tại nền tảng chưa có một số tính năng quan trọng như chia sẻ bài viết sang các ứng dụng khác, lưu ảnh vào bộ sưu tập và lọc hình ảnh đã đăng tải theo ngày tháng năm Điều này ảnh hưởng đến trải nghiệm người dùng và khả năng quản lý nội dung trên hệ thống Để cải thiện SEO và tăng tính tiện ích, cần bổ sung tính năng chia sẻ bài viết đến các nền tảng xã hội, cho phép lưu ảnh vào từng bộ sưu tập và cung cấp bộ lọc hình ảnh theo ngày tháng năm để người dùng có thể tìm kiếm và sàng lọc nội dung một cách dễ dàng.

Khó khăn

Không có nhiều thời gian để website trở nên hoàn hảo hơn

Thiếu kiến thức và kỹ năng cần thiết khiến tiến độ hoàn thành công việc bị trễ so với kế hoạch, đồng thời thiếu thông tin cài đặt môi trường dẫn đến chậm tiến độ phát triển một số tính năng trên nền tảng di động.

Thiếu dữ liệu người dùng mẫu

Trong bối cảnh dịch bệnh đang diễn biến phức tạp, quá trình trao đổi thông tin, điều tra nguyên nhân và đề xuất giải pháp xử lý lỗi phát sinh trong quá trình phát triển gặp nhiều khó khăn Thiếu thông tin kịp thời, sự phối hợp giữa các bộ phận chưa đồng bộ và áp lực thời gian làm chậm quá trình phân tích nguyên nhân và quyết định biện pháp khắc phục Để giảm thiểu rủi ro và duy trì tiến độ, cần tăng cường giao tiếp, chuẩn hóa quy trình điều tra lỗi, và áp dụng các giải pháp kỹ thuật hiệu quả, đồng thời tối ưu quản trị dự án để cải thiện khả năng ứng phó với dịch bệnh và đảm bảo chất lượng sản phẩm.

Bài học kinh nghiệm

Nên phân chia thời gian thực hiện công việc tốt hơn

Hướng phát triển

Trong tương lai gần nhóm sẽ phát triển:

Chúng tôi bổ sung thêm một số chức năng tiện ích nhằm nâng cao trải nghiệm người dùng, bao gồm chia sẻ bài viết sang các ứng dụng khác, lưu ảnh theo bộ sưu tập và lọc hình ảnh đã đăng tải theo ngày tháng năm.

 Thêm các cơ chế xác thực hai lớp cho hệ thống

 Giới hạn chất lượng ảnh của người dùng, người dùng có thể tăng chất lượng bằng cách trả phí định kì

 Cho phép người dùng trải nghiệm sản phẩm mà không cần đăng nhập

Tiêu đề	Xây Dựng Website Và Ứng Dụng Mobile Để Chia Sẻ Hình Ảnh
Tác giả	Ngô Thị Trang, Lê Huy Hiệp
Người hướng dẫn	ThS. Trần Công Tú
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2021
Thành phố	TP.HCM

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