xây dựng website kết bạn hẹn hò finder

Nguyễn Trần Thi Văn Tên đề tài: Xây dựng website kết bạn, hẹn hò Finder Nội dung thực hiện: Nhiệm vụ của dự án "Phát triển website kết bạn, hẹn hò Finder" là thiết kế, phát triển và tr

Tổng quan về đề tài

Ngày nay công nghệ thông tin ngày càng phát triển mọi người cũng đã dần tiếp cận với hầu hết những công nghệ mới như smartphone, internet, Vì vậy việc mọi người tương tác trực tuyến không còn là việc gì quá khó khăn Vượt ra khỏi những quen biết thường ngày và kết nối với mọi người xa gần khắp nơi Giúp chúng ta có thể trải nghiệm kết bạn, hẹn hò trực tuyến Chat với mọi người dù gần nhà hay xa Gặp gỡ mọi người trên mạng là cả một hành trình, thứ chúng ta muốn chính là những người bạn đáng tin cậy cùng chúng ta đồng hành Finder tạo ra nhằm giúp mọi người hay đặc biệt là những ai ngại giao tiếp xã hội hoặc lười với những buổi gặp mặt mới, thoát khỏi kiếp độc thân hay đơn giản là tìm kiếm bạn bè hay những mối quan hệ bình thường đặc biệt là trong cuộc sống xô bồ trong hiện tại Nơi mà mọi người đang bận bịu với những công việc và không có nhiều thời gian để có thể đi giao lưu, tìm kiếm bạn bè và đặc biệt hơn là Internet ngày càng phát triển vì vậy mà mọi người cũng hay có thói quen sử dụng Internet nhiều hơn.

Mục tiêu của đề tài

Mục tiêu chính của đề tài nhằm tạo ra một nền tảng trực tuyến đa dạng và hiệu quả để kết nối mối quan hệ cá nhân Chú trọng vào sự thuận tiện và linh hoạt, ứng dụng này nhằm đáp ứng nhu cầu ngày càng phức tạp của người dùng trong việc tìm kiếm bạn bè, đối tác, và mối quan hệ lâu dài Đồng thời, đề tài hướng tới việc giải quyết những thách thức về tương tác và an toàn thông tin trong thị trường mạng xã hội và ứng dụng hẹn hò Bằng cách tích hợp công nghệ mới nhất và thiết kế giao diện thân thiện, đề tài này mong muốn tạo ra một trải nghiệm người dùng độc đáo và thoải mái, đồng thời mở ra tiềm năng kinh doanh và đóng góp tích cực cho xã hội thông qua việc xây dựng cộng đồng kết nối đa dạng và tích cực.

Phạm vi của đề tài

Đề tài bao gồm 3 module chính:

 Trang web client cho người dùng truy cập

 Trang web admin để quản lý thông số hoạt động của client

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

Để hoàn thành đề tài, nhóm áp dụng các phương pháp nghiên cứu dưới đây:

 Hiểu các yêu cầu của dự án và nghiên cứu quy trình nghiệp vụ

 Nghiên cứu các công nghệ và hệ thống hiện có trên thị trường

 Nghiên cứu và phát triển website

 Tinh chỉnh và tiến hành kiểm thử.

CƠ SỞ LÝ THUYẾT

Mô hình Client – Server

Mô hình Client – Server là một kiến trúc mạng và phân phối thông tin trong lĩnh vực công nghệ thông tin Trong mô hình này, các máy tính trên mạng được phân thành hai loại cơ bản: máy khách (Client) và máy chủ (Server) Máy khách là các thiết bị hoặc ứng dụng mà người dùng cuối cùng sử dụng để yêu cầu dịch vụ hoặc tài nguyên từ máy chủ Máy chủ là các máy tính hoặc hệ thống chịu trách nhiệm cung cấp dịch vụ hoặc tài nguyên được yêu cầu bởi các máy khách Trong quá trình này, máy khách và máy chủ trao đổi dữ liệu thông qua giao thức truyền thông như HTTP, TCP/IP, hoặc các giao thức khác Mô hình Client-Server cung cấp cơ sở cho truyền thông, tương tác, và phân phối thông tin hiệu quả trên mạng.

React

React là một thư viện JavaScript phát triển bởi Facebook, được sử dụng để xây dựng giao diện người dùng (UI) hiệu quả và tương tác trên các ứng dụng web Với khả năng quản lý các thành phần giao diện và cập nhật dữ liệu một cách hiệu quả, React đã trở thành một công cụ quan trọng cho việc phát triển các ứng dụng web động, nhanh chóng và dễ bảo trì React sử dụng cú pháp JSX để mô tả giao diện và tạo cảm giác như viết HTML trong mã JavaScript, giúp phát triển ứng dụng dễ dàng và dễ đọc.

NextJS

NextJS là một framework phát triển ứng dụng web phía máy chủ và phía máy khách, được xây dựng trên nền tảng React Điều đặc biệt về Next.js là khả năng cung cấp Server-Side Rendering (SSR), cho phép tạo ứng dụng web với hiệu suất cao và tối ưu hóa SEO Nó cung cấp hệ thống routing động, tối ưu hóa hiệu suất, tích hợp TypeScript và API Routes, giúp phát triển ứng dụng web mạnh mẽ và tối ưu hóa trải nghiệm người dùng Next.js là một công cụ quan trọng cho việc xây dựng ứng dụng web động và tĩnh, và nó tận dụng sức mạnh của React để giúp phát triển dễ dàng hơn và hiệu quả hơn.

MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) mã nguồn mở, phát triển để lưu trữ và quản lý dữ liệu trong hình dạng tài liệu JSON-like, gọi là BSON Nó được thiết kế để xử lý lượng dữ liệu lớn và linh hoạt, cho phép lưu trữ dữ liệu có cấu trúc và không có cấu trúc một cách dễ dàng MongoDB được sử dụng rộng rãi trong phát triển ứng dụng web và di động, với khả năng tìm kiếm nhanh chóng và cung cấp cơ sở cho các tính năng linh hoạt như lưu trữ tệp và tạo ứng dụng thời gian thực Điểm mạnh của MongoDB bao gồm khả năng mở rộng dễ dàng, khả năng chịu lỗi và tích hợp tốt với các ngôn ngữ lập trình khác nhau, giúp phát triển và quản lý dữ liệu một cách hiệu quả trong các ứng dụng phức tạp.

NestJS

NestJS là một framework NodeJS có cấu trúc và mô hình lập trình bậc cao, dựa trên nguyên lý của Angular, nhằm cung cấp một nền tảng linh hoạt cho việc xây dựng ứng dụng server-side hiện đại Sử dụng TypeScript và thiết kế theo hướng module, NestJS cho phép phát triển ứng dụng với cấu trúc rõ ràng, dễ bảo trì và mở rộng Framework này tích hợp các khái niệm của OOP (Object-Oriented Programming), FP (Functional Programming) và FRP (Functional Reactive Programming), giúp tạo ra mã nguồn rõ ràng, dễ đọc và linh hoạt NestJS cung cấp các tính năng mạnh mẽ như Dependency Injection, Middleware, Interceptors và Exception Filters, tạo điều kiện thuận lợi cho việc xây dựng các ứng dụng có tính tái sử dụng cao, đồng thời hỗ trợ kết nối với các cơ sở dữ liệu khác nhau và cung cấp API dễ sử dụng Tóm lại, NestJS là một framework server-side mạnh mẽ và dễ sử dụng, đặc biệt thích hợp cho việc xây dựng ứng dụng NodeJS có kích thước lớn và phức tạp.

Golang

Golang (hoặc Go) là một ngôn ngữ lập trình được thiết kế bởi Google, với mục tiêu đơn giản, hiệu quả và dễ đọc Được phát triển để giải quyết các vấn đề của các dự án lớn, Golang đã trở thành một lựa chọn phổ biến cho việc xây dựng các hệ thống phần mềm có hiệu suất cao và dễ bảo trì Một trong những điểm đặc biệt của Golang là hệ thống quản lý bộ rác tích hợp, giúp giảm bớt gánh nặng cho lập trình viên khi phát triển ứng dụng Ngôn ngữ này cũng hỗ trợ đồng thời và song song, giúp tối ưu hóa sức mạnh của các máy tính đa lõi và hệ thống phân tán Với cú pháp đơn giản và rõ ràng, Golang làm cho việc phát triển ứng dụng trở nên dễ dàng hơn Nó cung cấp một hệ thống gói (package) mạnh mẽ, hỗ trợ modularization và tái sử dụng mã nguồn, giúp tạo ra mã linh hoạt và dễ bảo trì.

Fiber

Fiber là một framework web hiệu suất cao cho Golang, được thiết kế để cung cấp trải nghiệm phát triển web nhanh chóng và hiệu quả Được xây dựng dựa trên triển khai tốt nhất của Golang, Fiber giúp tối ưu hóa việc xử lý HTTP và đồng thời giảm thiểu các nguy cơ quá tải Một trong những điểm đặc biệt của Fiber là cơ chế xử lý cực kỳ nhẹ và hiệu quả, giúp tăng cường khả năng đáp ứng và giảm thiểu thời gian phản hồi Nó sử dụng goroutines trong Golang để xử lý đồng thời các yêu cầu HTTP mà không tạo ra overhead đáng kể Fiber cung cấp một hệ thống định tuyến nhanh chóng và linh hoạt, cho phép bạn dễ dàng xác định các tuyến đường của ứng dụng và xử lý các yêu cầu HTTP tới chúng Nó tích hợp tốt với middleware, cho phép bạn mở rộng chức năng của ứng dụng một cách dễ dàng Đối với việc tối ưu hóa hiệu suất, Fiber hỗ trợ các tính năng như giữ kết nối (connection keep-alive) và HTTP/2, giúp tối ưu hóa việc gửi và nhận dữ liệu giữa máy chủ và máy khách.

Gocv

OpenCV (gocv là gói liên kết Golang cho OpenCV) là một thư viện mã nguồn mở rất mạnh mẽ trong lĩnh vực thị giác máy tính và xử lý ảnh Nó cung cấp nhiều công cụ và thuật toán để thực hiện các nhiệm vụ như nhận diện đối tượng, theo dõi chuyển động, xử lý hình ảnh, và nhiều ứng dụng khác Gocv, là một liên kết cho OpenCV trong Golang, mang lại sức mạnh của OpenCV vào ngôn ngữ lập trình Go Điều này giúp những người phát triển Go tận dụng các tính năng và thuật toán mạnh mẽ của OpenCV mà không cần chuyển sang ngôn ngữ khác Sử dụng gocv, bạn có thể thực hiện các nhiệm vụ xử lý ảnh phức tạp như lọc ảnh, nhận diện khuôn mặt, xác định đối tượng, và thậm chí là xử lý video Gocv cung cấp các hàm và cấu trúc dữ liệu phù hợp với Golang, giúp làm cho mã nguồn dễ đọc và dễ bảo trì.

Google Maps Platform

Google Maps Platform là một bộ công cụ và dịch vụ cung cấp bởi Google cho phép các nhà phát triển tích hợp và tận dụng dữ liệu bản đồ và địa lý trong ứng dụng của họ

Nó cung cấp các API cho việc hiển thị bản đồ, tìm kiếm địa điểm, điều hướng, và dữ liệu địa lý, mở ra nhiều cơ hội trong việc xây dựng các ứng dụng dựa trên vị trí Các API như Google Maps JavaScript API, Places API, Directions API, Geocoding API, giúp tích hợp bản đồ tương tác, hiển thị địa điểm gần nhất, tìm đường, xác định vị trí dựa trên địa chỉ và ngược lại Google Maps Platform cung cấp cho các nhà phát triển công cụ mạnh mẽ để cung cấp trải nghiệm địa lý tốt nhất trong các ứng dụng của họ, từ các ứng dụng điều hướng đến các nền tảng thương mại điện tử và các ứng dụng vị trí cụ thể.

XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU

Khảo sát thị trường

Trong quá trình triển khai, nhóm đã tham khảo một số ứng dụng/website có chức năng tương tự với dự án này:

 Tinder: Tinder là một ứng dụng và trang web kết bạn hẹn hò trực tuyến nổi tiếng trên toàn cầu, ra mắt lần đầu vào năm 2012 và nhanh chóng trở thành một trong những biểu tượng của cuộc cách mạng mọi người tìm kiếm mối quan hệ tình cảm và kết nối trực tuyến Với giao diện đơn giản và dễ sử dụng, Tinder cho phép người dùng duyệt qua các hồ sơ ảnh của người khác và thể hiện sự quan tâm bằng cách kéo hồ sơ sang trái hoặc phải Nếu cả hai người "thích" nhau, họ có cơ hội bắt đầu một cuộc trò chuyện trực tuyến Tinder có tích hợp định vị GPS, cho phép người dùng tìm kiếm và kết nối với người ở gần họ Các hồ sơ trên Tinder thường gồm một hoặc vài ảnh cá nhân cùng một mô tả ngắn gọn về bản thân Giao diện ứng dụng này thường tập trung vào hình ảnh, và người dùng thường đưa ra quyết định dựa trên giao diện trực quan này Tinder có phiên bản cơ bản miễn phí và phiên bản trả phí với các tính năng bổ sung, như khả năng "hoàn lại" một lần nhấn nhầm và tùy chọn đặt vị trí để kết nối với người dùng ở các khu vực khác Ngoài việc tạo cơ hội kết nối tình cảm, Tinder cũng đã trở thành nơi cho các dạng quan hệ khác nhau, từ tìm bạn thân đến kết nối ngắn hạn Tinder đã ảnh hưởng sâu rộng đối với cách mọi người gặp gỡ và tìm kiếm mối quan hệ, và trở thành một phần không thể thiếu của văn hóa xã hội và cuộc trò chuyện về tìm kiếm mối quan hệ trong thời đại số hóa

Hình 1 Tổng quan về Tinder

 Bumble: Bumble, một ứng dụng kết bạn hẹn hò trực tuyến thành lập vào năm 2014, đã nhanh chóng trở thành một trong những đối thủ lớn của Tinder trong lĩnh vực hẹn hò trực tuyến Nổi bật với sự cân bằng giới tính và mô hình quyền kiểm soát cuộc trò chuyện khá độc đáo, Bumble đã thu hút sự chú ý của hàng triệu người dùng trên khắp thế giới Một trong những điểm quan trọng nhất của Bumble là sự cân bằng giới tính trong quyền kiểm soát cuộc trò chuyện Trong trường hợp cả hai đối tượng đều là nam và nữ, chỉ phụ nữ được phép gửi tin nhắn trước sau khi có sự quan tâm từ phía nam Điều này đã được thiết lập để tạo ra một môi trường an toàn, tôn trọng và tạo động lực cho phụ nữ để tham gia tích cực trong việc tìm kiếm mối quan hệ Giao diện của Bumble là một sự kết hợp giữa đơn giản và trực quan Người dùng tạo hồ sơ cá nhân bằng cách tải lên ảnh cá nhân và cung cấp mô tả về bản thân Họ có thể duyệt qua các hồ sơ khác và thể hiện sự quan tâm bằng cách kéo sang trái hoặc phải Điều này đặt giao diện người dùng làm trung tâm, giúp họ tạo ra quyết định dựa trên sự quan tâm thị giác Điều này thúc đẩy việc tạo ra mối quan hệ xã hội ngoài quan hệ tình cảm truyền thống Bảo mật và quyền riêng tư là một phần quan trọng của triết lý Bumble Ứng dụng này tích hợp nhiều tính năng bảo mật, bao gồm tích hợp với các dịch vụ kiểm tra danh tính và cơ chế chặn người dùng gây phiền toái Bumble cung cấp phiên bản cơ bản miễn phí và phiên bản trả phí với các tính năng bổ sung, như khả năng "quay lại" một lần đánh giá và tích hợp với tính năng "Hội thoại" để có thể bắt đầu cuộc trò chuyện nếu đã có sự quan tâm

Hình 2 Tổng quan về Bumble

 Badoo: Badoo được biết đến với sự đa dạng trong việc kết nối người dùng Giao diện của ứng dụng cho phép người dùng tạo hồ sơ cá nhân bằng cách tải lên ảnh cá nhân và cung cấp thông tin về bản thân Một điểm đặc biệt là Badoo cho phép người dùng tìm kiếm cả mối quan hệ tình cảm và bạn bè, và họ có thể tương tác với người khác qua các tính năng như "Gần bạn" để tìm người ở gần hoặc "Chơi Đánh giá" để tìm kiếm người dựa trên sự quan tâm chung Badoo cũng nổi tiếng với tính năng

"Tin nhắn trực tiếp" cho phép người dùng bắt đầu cuộc trò chuyện với người dùng khác mà họ chưa kết nối hoặc trò chuyện với họ trực tiếp qua video Điều này tạo sự gần gũi hơn trong quá trình trò chuyện và giúp người dùng cảm thấy như họ đang tương tác trực tiếp Bảo mật và quyền riêng tư là một ưu tiên đối với Badoo Ứng dụng này cung cấp nhiều tùy chọn bảo mật, cho phép người dùng kiểm soát ai có thể thấy hồ sơ của họ và ai có thể liên hệ với họ Badoo có phiên bản cơ bản miễn phí và phiên bản trả phí với các tính năng bổ sung như khả năng kiểm tra người đã xem hồ sơ của mình và khả năng gửi tin nhắn cho người dùng không kết nối Với sự đa dạng trong cách kết nối và tính năng tương tác độc đáo, Badoo đã trở thành một trong những ứng dụng kết bạn hẹn hò phổ biến và thú vị trên toàn thế giới, thu hút một loạt người dùng với nhiều mục tiêu và mong muốn khác nhau

Hình 3 Tổng quan về Badoo

Dưới đây là bảng so sánh nêu rõ các đặc điểm chính của các ứng dụng/website:

Bảng 1 So sánh các đặc điểm chính giữa các ứng dụng tương tự

Tinder Bumble Badoo Đối tượng Tất cả mọi người Phụ nữ chủ động Tất cả mọi người

Thị trường Toàn cầu Toàn cầu Toàn cầu

Nền tảng Ứng dụng di động và web Ứng dụng di động và web Ứng dụng di động và web

Chi phí Miễn phí, có tính phí Miễn phí, có tính phí Miễn phí, có tính phí Bảng so sánh tính năng của các ứng dụng/web nêu trên và mục tiêu đạt được của khóa luận:

Bảng 2 So sánh chức năng các ứng dụng

Chức năng Tinder Bumble Badoo

Giao diện Đơn giản và trực quan Đơn giản và trực quan Đa dạng, tập trung vào hình ảnh

Quẹt để ghép đổi Có Có Không

Gửi tin nhắn Có Có (chỉ nữ có thể gửi trước) Có Định vị GPS Có Có Có

Mô tả ngắn gọn về bản thân Có Có Có

Tích hợp Mạng xã hội Có Có Có

Chế độ BFF (Tìm bạn thân) Không Có Có

Gọi video Không Có Có

Gửi ảnh Không Có Có

Quyền riêng tư Có Có Có

Phiên bản cơ bản và trả phí Có Có Có

Xác thực người dùng Có Có Có

Gợi ý địa điểm hẹn hò Không Không Không

Lời mời hẹn hò Không Không Không

Gợi ý tiến tới Không Không Không

Xác định yêu cầu

Sau khi khảo sát một số ứng dụng và website kết bạn, hẹn hò nhóm đã thảo luận và đưa các yêu cầu phi chức năng sau:

 Thiết kế giao diện thân thiện

 Đảm bảo an toàn và bảo mật người dùng

 Hỗ trợ trên nhiều thiết bị

 Hiệu năng cao và tốc độ tải trang nhanh

Sau khi khảo sát một số ứng dụng và website kết bạn, hẹn hò nhóm đã thảo luận xây dựng website kết bạn hẹn hò Finder gồm các chức năng chính sau đây:

 Xác thực người dùng bằng tài khoản Google, số điện thoại

 Cài đặt và chỉnh sửa thông tin cá nhân

 Gợi ý kết bạn hẹn hò

 Tương tác với người dùng được gợi ý: Thích, bỏ qua, tua lại người dùng đã bỏ qua

 Cài đặt và chỉnh sửa tiêu chí gợi ý

 Nhắn tin giữa những người dùng đã ghép đôi

 Gọi điện giữa những người dùng đã ghép đôi

 Tìm kiếm địa điểm hẹn hò và tạo lời mời hẹn hò

 Quản lý lời mời hẹn hò

 Tăng tốc tài khoản – Đẩy profile người dùng lên đầu giúp tăng tỉ lệ ghép đôi

Usecase

Bảng 3 Các actor trong hệ thống

Actor Mô tả Chức năng chính

User Người sử dụng cuối cùng của hệ thống, có thể tìm kiếm bạn bè và người hẹn hò

Tạo và quản lý hồ sơ cá nhân, tìm kiếm, kết nối và tương tác

Người có quyền hạn cao, thường là người quản lý hệ thống, giám sát và có khả năng can thiệp nếu cần thiết

Quản lý hoạt động, thông tin của hệ thống

Hình 4 Lược đồ use case

Đặc tả usecase

2.4.1 Đăng nhập với số điện thoại

Bảng 4 Đăng nhập với số điện thoại

Use case Đăng nhập với số điện thoại

Mô tả Người dùng đăng nhập vào website bằng số điện thoại Điều kiện tiên quyết

 Người dùng có số điện thoại đã đăng ký với hệ thống

 Người dùng có quyền truy cập vào số điện thoại được liên kết với tài khoản của họ Điều kiện sau khi thực hiện  Sau khi xác thực thành công, người dùng đăng nhập vào hệ thống

1 Người dùng nhập số điện thoại trên màn hình đăng nhập

2 Hệ thống kiểm tra định dạng số điện thoại

3 Hệ thống gửi mã một lần (OTP) đến số điện thoại đã nhập

4 Người dùng nhập OTP đã nhận được

5 Hệ thống kiểm tra tính hợp lệ của OTP

6 Nếu OTP hợp lệ, hệ thống đăng nhập người dùng

7 Người dùng có quyền truy cập vào website

Thay thế 1 ( Bước 3 ) o 3a Người dùng yêu cầu gửi lại OTP o 3b Hệ thống tạo và gửi lại OTP mới cho người dùng o 3c Người dùng nhập OTP để đăng nhập Thay thế 2 ( Bước 3 ) o 3a Người dùng muốn thay đổi số điện thoại o 3b Lặp lại từ bước 1

Ghi chú và vấn đề

Các biện pháp bảo mật bổ sung như giới hạn tần suất hoặc khóa tài khoản có thể được triển khai để ngăn chặn việc lạm dụng hoặc cố gắng truy cập trái phép

Bảng 5 Đăng nhập với Google

Use case Đăng nhập với Google

Mô tả Đăng nhập vào Finder bằng tài khoản Google Điều kiện tiên quyết Người dùng cần có tài khoản Google và đăng nhập vào tài khoản

Finder Điều kiện sau khi thực hiện

Người dùng được đăng nhập vào tài khoản Finder bằng tài khoản Google

1 Người dùng truy cập Finder trên thiết bị di động hoặc máy tính

2 Trong màn hình đăng nhập, người dùng chọn tùy chọn "Đăng nhập với Google "

3 Hệ thống chuyển người dùng đến trang đăng nhập Google, nơi họ sẽ nhập thông tin đăng nhập của mình hoặc xác nhận đăng nhập nếu đã đăng nhập trước đó

4 Người dùng cấp quyền cho Finder để truy cập thông tin từ tài khoản Google

5 Hệ thống xác nhận thông tin và quyền truy cập, sau đó chuyển người dùng trở lại ứng dụng Finder

6 Người dùng được đăng nhập tự động vào tài khoản Finder với thông tin từ tài khoản Google

Ghi chú và vấn đề Không

2.4.3 Đăng ký với số điện thoại

Bảng 6 Đăng ký với số điện thoại

Use case Đăng ký với số điện thoại

Mô tả Người dùng đăng ký bằng số điện thoại Điều kiện tiên quyết Người dùng không có tài khoản trước đó trong hệ thống Điều kiện sau khi thực hiện

Sau khi hoàn tất quá trình đăng ký, người dùng có quyền truy cập vào ứng dụng với tài khoản mới tạo

1 Người dùng chọn tùy chọn "Tạo tài khoản" trên giao diện chào mừng

2 Hệ thống hiển thị giao diện Đăng Ký và yêu cầu người dùng nhập số điện thoại

3 Người dùng nhập số điện thoại của mình

4 Hệ thống kiểm tra tính hợp lệ của số điện thoại

5 Nếu số điện thoại hợp lệ, hệ thống gửi mã OTP đến số điện thoại đã nhập

6 Người dùng nhập mã OTP đã nhận được

7 Hệ thống kiểm tra và xác nhận tính hợp lệ của mã OTP

8 Người dùng tiếp tục nhập thông tin cá nhân như tên, ngày sinh, giới tính, v.v

9 Hệ thống kiểm tra và lưu trữ thông tin người dùng mới

10 Người dùng được chuyển đến giao diện màn hình chính của website đã đăng nhập

Thay thế 1 ( Bước 6 ) o 6a Người dùng có thể yêu cầu gửi lại OTP o 6b Hệ thống tạo và gửi lại OTP mới cho người dùng o 6c Người dùng nhập OTP để đăng ký Thay thế 2: Người dùng có thể hủy bỏ đăng ký và quay lại giao diện đăng nhập

2.4.4 Cài đặt tiêu chí gợi ý

Bảng 7 Cài đặt tiêu chí gợi ý

Use case Cài đặt tiêu chí gợi ý

Mô tả Tùy chỉnh tiêu chí để nhận được các gợi ý hợp lý về người dùng trên

Finder Điều kiện tiên quyết Người dùng đã đăng nhập vào tài khoản Điều kiện sau khi thực hiện Tiêu chí gợi ý của người dùng được cập nhật và áp dụng

1 Trong trang cá nhân người dùng chọn “Cài đặt”

2 Hệ thống mở giao diện cài đặt tiêu chí, hiển thị danh sách các yếu tố mà người dùng có thể tùy chỉnh để tối ưu hóa trải nghiệm gợi ý

3 Người dùng tùy chỉnh các yếu tố như khoảng cách, độ tuổi, sở thích, giới tính, và bất kỳ yếu tố nào khác mà họ quan trọng

4 Hệ thống cập nhật và lưu lại các thay đổi trong tiêu chí gợi ý của người dùng

Use case Like người dùng

Mô tả Thực hiện hành động "Like" trên người dùng khác để thể hiện sự quan tâm Điều kiện tiên quyết Người dùng đã đăng nhập vào tài khoản Điều kiện sau khi thực hiện

Hệ thống lưu trữ hành động "Like" và cập nhật trạng thái tương ứng cho cả hai người dùng

1 Người dùng xem hình ảnh và thông tin cá nhân của người dùng khác trên website Finder

2 Người dùng chọn tùy chọn "Like" để thể hiện sự quan tâm đối với người đó

3 Hệ thống lưu trữ hành động "Like" và cập nhật trạng thái tương ứng cho cả hai người dùng

Mô tả Sử dụng tính năng Boost để tăng cơ hội xuất hiện trong danh sách gợi ý của người khác trong khoảng thời gian ngắn Điều kiện tiên quyết  Người dùng đã đăng nhập vào tài khoản

 Người dùng có sẵn lượt Boost Điều kiện sau khi thực hiện

Trạng thái boost được cập nhật Hồ sơ của người dùng được hệ thống làm nổi bật giúp tiếp cận được với nhiều người hơn

1 Trong giao diện chính người dùng chọn tùy chọn "Boost" bằng cách nhấn vào biểu tượng hoặc nút tương ứng

2 Người dùng xác nhận và kích hoạt Boost

3 Trong thời gian Boost, hồ sơ của người dùng sẽ được xuất hiện ở vị trí cao trong danh sách gợi ý của những người khác

4 Hệ thống cập nhật trạng thái khi thời gian Boost kết thúc

Bảng 10 Báo cáo người dùng

Use case Báo cáo người dùng

Mô tả Báo cáo hoạt động không phù hợp của người dùng trên Finder Điều kiện tiên quyết

 Người dùng có tài khoản Finder hợp lệ

 Người dùng có trải nghiệm không phù hợp từ một người dùng khác Điều kiện sau khi thực hiện Hệ thống nhận được báo cáo và xử lý theo quy trình quản lý vi phạm

1 Người dùng truy cập website Finder và đăng nhập vào tài khoản của mình

2 Trong giao diện chính, người dùng chọn hồ sơ của người họ muốn báo cáo

3 Người dùng chọn tùy chọn "Chặn và báo cáo" trên hồ sơ của người đó

4 Hệ thống hiển thị danh sách lựa chọn về lý do báo cá

5 Người dùng chọn lựa chọn phù hợp với lý do báo cáo

6 Người dùng có thể cung cấp thông tin bổ sung hoặc mô tả chi tiết về tình huống báo cáo

7 Người dùng xác nhận và gửi báo cáo

2.4.8 Nhắn tin với người dùng đã ghép đôi

Bảng 11 Nhắn tin với người dùng đã ghép đôi

Use case Nhắn tin với người dùng đã ghép đôi

Mô tả Gửi và nhận tin nhắn với người dùng đã được ghép đôi Điều kiện tiên quyết Người dùng đã có ít nhất một ghép đôi với người khác Điều kiện sau khi thực hiện

Người dùng có thể tiếp tục gửi và nhận tin nhắn trong cuộc trò chuyện với người đã ghép đôi

1 Người dùng truy cập vào Finder và đăng nhập vào tài khoản của mình

2 Hệ thống hiển thị danh sách các người dùng đã ghép đôi hiện có của người dùng

3 Người dùng chọn một trong số những người đã ghép đôi để bắt đầu cuộc trò chuyện

4 Hệ thống mở giao diện trò chuyện và hiển thị lịch sử tin nhắn nếu có

5 Người dùng nhập nội dung tin nhắn mới và gửi đi

6 Người dùng có thể nhận tin nhắn mới từ người đã ghép đôi

7 Quá trình trò chuyện có thể tiếp tục với việc gửi và nhận tin nhắn theo lượt

2.4.9 Gợi ý địa điểm hẹn hò

Bảng 12 Gợi ý địa điểm hẹn hò

Use case Gợi ý địa điểm hẹn hò

Mô tả Gợi ý các địa điểm hẹn hò dựa trên nhu cầu của người dùng Điều kiện tiên quyết Người dùng đã có ít nhất một ghép đôi với người khác Điều kiện sau khi thực hiện Hiển thị một danh sách các địa điểm được gợi ý

1 Người dùng chọn một người dùng đã tương hợp

2 Chọn lựa chọn “Tạo lịch hẹn”

3 Chọn “Giúp tôi tạo lịch hẹn” trên giao diện

4 Một số câu hỏi sẽ được liệt kê, người dùng chọn những lựa chọn phù hợp với mình

5 Hệ thống sử dụng AI tạo ra 1 danh sách địa điểm gợi ý

 Thay thế 1 ( Bước 3 ) o 3a Chọn “Tự tạo lịch hẹn” để tự chọn địa điểm mà không cần gợi ý

 Thay thế 2: Người dùng có thể thoát quá trình bất cứ lúc nào

2.4.10 Tạo lời mời hẹn hò

Bảng 13 Tạo lời mời hẹn hò

Use case Tạo lời mời hẹn hò

Mô tả Tạo một lời mời hẹn hò giữa những người đã được ghép đôi Điều kiện tiên quyết Người dùng đã có ít nhất một ghép đôi với người khác Điều kiện sau khi thực hiện

Nếu cả 2 đều đồng ý, hệ thống sẽ ghi nhận và thông báo nhắc nhở người dùng tham gia trước khi buổi hẹn diễn ra

1 Người dùng mở giao diện trò chuyện với người đã ghép đôi trên Finder

2 Trong giao diện trò chuyện, người dùng chọn tùy chọn "Tạo cuộc hẹn"

3 Hệ thống mở giao diện tạo lời mời, người dùng có thể tự chọn địa điểm hoặc chọn tiêu chí để hệ thống gợi ý địa điểm

4 Người dùng chọn địa điểm muốn đi cùng đối phương sau đó bấm “Tiếp tục”

5 Người dùng nhập thông tin như: Thời gian, lời nhắn

6 Người dùng bấm “Tạo” để tạo lời mời

7 Hệ thống lưu lời mời và thông báo tới đối phương

2.4.11 Tìm kiếm địa điểm hẹn hò

Bảng 14 Tìm kiếm địa điểm hẹn hò

Use case Tìm kiếm địa điểm hẹn hò

Mô tả Tìm kiếm một địa điểm cụ thể Điều kiện tiên quyết Người dùng đã có ít nhất một ghép đôi với người khác Điều kiện sau khi thực hiện

Hiển thị kết quả tìm được, người dùng chọn địa điểm từ kết quả tìm kiếm để tạo lời mời hẹn hò

1 Người dùng mở giao diện trò chuyện với người đã ghép đôi trên Finder

2 Trong giao diện trò chuyện, người dùng chọn tùy chọn "Tạo cuộc hẹn"

3 Hệ thống mở giao diện tạo lời mời, người dùng có thể tự chọn địa điểm hoặc chọn tiêu chí để hệ thống gợi ý địa điểm

4 Hệ thống hiển thị map cho người dùng tìm kiếm địa điểm

5 Người dùng tìm kiếm tên địa điểm trên thanh tìm kiếm

6 Hệ thống hiển thị kết quả tìm được

2.4.12 Liên kết tài khoản Instagram

Bảng 15 Liên kết tài khoản Instagram

Use case Liên kết tài khoản Instagram

THIẾT KẾ HỆ THỐNG

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

Hình 5 Cơ sở dữ liệu

Dưới đây là các bảng mô tả cơ sở dữ liệu của đề tài:

STT Thuộc tính Kiểu Mô tả

1 _id string Mã định danh của user

3 phoneNumber string Số điện thoại

6 bio string Mô tả về user

8 school string Trường học mà user học

9 company string Công ty mà user làm

10 job string Công việc mà user làm

Danh sách hình ảnh Thông tin trong mỗi image có các thông tin như:

 url: Đường link của hình ảnh

 blur: Hình ảnh dưới dạng base64

 isVerifiedSuccess: Trạng thái verify của hình ảnh

Thông tin bộ lọc của user Trong object setting có các thông tin sau:

 minAge: Độ tuổi nhỏ nhất muốn tìm kiếm

 maxAge: Độ tuổi lớn nhất muốn tìm kiếm

 distance: Khoảng cách muốn tìm kiếm

 lookingFor: Giới tính quan tâm

 onlyShowThisRange: Cho phép áp dụng bộ lọc tìm kiếm theo khoảng cách

 onlyShowThisAge: Cho phép áp dụng bộ lọc tìm kiếm theo tuổi

 recentActive: Những user online gần đây

16 geoLocation number[] Tọa độ mà user đang ở, bao gồm longitude và latitude

17 address object Địa chỉ hiện tại của user Trong object address có các thông tin sau:

18 homeTown string Quê quán của user

19 liveAt string Nơi ở hiện tại của user

20 blurAvatar string Link ảnh của user sau khi được làm mờ

21 totalFinishProfi le number Tổng profile đã hoàn thành

22 lastActiveDate Date Thời gian cuối cùng mà user đã online

23 isBlocked boolean Trạng thái user đang bị khóa tài khoản

24 blockedAt Date Ngày user bị khóa

25 unBlockedAt Date Ngày user đã mở khóa

26 isDeletedAt boolean Trạng thái tài khoản của user

27 createdAt Date Ngày tạo tài khoản

28 updatedAt Date Ngày cập nhật tài khoản

Tất cả các tính năng mà user có thể sử dụng Trong mỗi phần tử sẽ có các thông tin sau:

 unlimited: Có phải sử dụng không giới hạn hay không

 amount: Số lượng còn lại

Thông tin về chức năng boosts Bao gồm các thông tin sau:

 amount: Số lượng còn lại

 expiredDate: Thời gian hết boosts

1 _id string Mã định danh của conversation

2 members string[] Danh sách _id của user có trong conversation

3 lastMessage string _id của message cuối cùng trong conversation

4 type string Được tạo ra bằng action nào (Matched hay Super like)

5 createdBy string _id của user sử dụng Super like

6 isDeleted boolean Trạng thái của conversation

7 createdDate Date Ngày tạo conversation

8 updatedDate Date Ngày cập nhật conversation

9 enableSafeMod e string[] Danh sách _id user đã bật chế độ an toàn trong conversation

1 _id string Mã định danh của Message

2 text string Nội dung của message

3 sender string _id user của người gửi

4 receiver string _id user của người nhận

5 type string Dạng message, có thể là Text, Image, CallVideo

6 status boolean Trạng thái message, có thể là Seen, Sent, Received

7 seenAt Date Ngày xem message

Danh sách hình ảnh Thông tin trong mỗi image có các thông tin như:

 url: Đường link của hình ảnh

 blur: Hình ảnh dưới dạng base64

 isVerifiedSuccess: Trạng thái verify của hình ảnh

9 startTime Date Thời gian bắt đầu cuộc gọi sau khi call video

10 endTime Date Thời gian kết thúc cuộc gọi sau khi kết thúc call video

Thông tin review cuộc gọi Trong mỗi review có chứa các thông tin sau:

 rating: số sao được vote

 content: Nội dung được review

12 isDeleted boolean Trạng thái của message

14 updatedAt Date Ngày cập nhật

1 _id string Mã định danh của Match request

2 sender string _id user của người nhận

3 receiver string _id user của người gửi

4 status string Trạng thái của match request

5 isBoosts string Trạng thái sử dụng boosts khi like

6 expiredDate Date Ngày hết hạn thời gian boosts

7 isDeleted boolean Trạng thái của match request

1 _id string Mã định danh của Schedule

2 sender string _id user của người nhận

3 receiver string _id user của người gửi

4 description string Nội dung lời mời

5 appointmentDate Date Ngày cuộc hẹn diễn ra

6 locationDating string[] Danh sách id google map diễn ra cuộc hẹn

7 isShowLocationDating boolean Show nơi hẹn hò

8 updatedBy string _id user chỉnh sửa cuộc hẹn

9 reviews object Reviews về cuộc hẹn đã diễn ra

10 reviewDatingStatus string Trang thái review của cuộc hẹn bao gồm: Success,

Wait for review, Failed, Notjoining

11 status string Trạng thái của cuộc hẹn bao gồm: Accept, Decline,

12 isDeleted boolean Cuộc hẹn đã bị xóa hay chưa

1 _id string Mã định danh của Tag

3 description string Mô tả của tag

4 type string Type của tag

5 isDeleted boolean Tag đã bị xóa hay chưa

1 _id string Mã định danh của Relationship

3 description string Mô tả của relationship

4 type string Type của Relationship

5 isDeleted boolean Relationship đã bị xóa hay chưa

1 _id string Mã định danh của Report

2 reportedUser string _id user bị báo cáo

3 reportBy string _id user báo cáo

4 reason string Lý do report

5 images string[] Danh sách link hình ảnh

6 isVerified boolean Đã được verifed của admin hay chưa

1 _id string Mã định danh của Billing

2 offering string _id của offering

4 createdBy string _id user đã mua gói offering

5 lastPackage object Package đã mua, trong package có các thông tin sau:

 price: Giá tiền khi mua

 originalPrice: Giá gốc khi mua

 refreshInterval: Thời gian hết hạn

 refreshIntervalUnit: Đơn vị thời gian bao gồm Minutes, Week, Month, Year

 currency: Đơn vị tiền tệ bao gồm vnd, usd

6 discount int Phần trăm giảm giá

Danh sách các quyền mà user có thể sử khi mua gói offering Trong mỗi merchandising sẽ có các thông tin sau:

 type: Dạng sử dụng, sẽ có 2 giá trị là Unlimited và Renewable

 refreshInterval: Thời gian làm mới

 refreshIntervalUnit: Đơn vị thời gian làm mới bao gồm Minutes, Week, Month, Year

 amount: Số lượng sử dụng

1 _id string Mã định danh của Notification

2 description string Mô tả của Notification

3 sender string _id user của người gửi

4 receiver string _id user của người nhận

8 type string Loại notification bao gồm Message, Like, Super like,

9 status string Trạng thái của notification bao gồm Seen, Not seen,

1 _id string Mã định danh

2 iconUrl string Link hình ảnh

4 type string Dạng offering, có 3 dạng Premium, Gold, Super like,

Trong package có các thông tin sau:

 price: Giá tiền khi mua

 originalPrice: Giá gốc khi mua

 refreshInterval: Thời gian hết hạn

 refreshIntervalUnit: Đơn vị thời gian bao gồm Minutes, Week, Month, Year

 currency: Đơn vị tiền tệ bao gồm vnd, usd

Danh sách các quyền mà user có thể sử khi mua gói offering Trong mỗi merchandising sẽ có các thông tin sau:

 type: Dạng sử dụng, sẽ có 2 giá trị là Unlimited và Renewable

 refreshInterval: Thời gian làm mới

 refreshIntervalUnit: Đơn vị thời gian làm mới bao gồm Minutes, Week, Month, Year

 amount: Số lượng sử dụng

7 amount int Số lượng sử dụng

8 isRetail boolean Offering có phải dạng bán lẻ hay không

9 isDeleted boolean Relationship đã bị xóa hay chưa

Thiết kế giao diện

Hình 6 Giao diện trang chủ Bảng 30 Giao diện trang chủ

STT Loại Chức năng Sự kiện

1 Button Mở chế độ sáng / tối của trang web

Mở chế độ sáng / tối của trang web

2 Button Đăng nhập Mở dialog để người dùng đăng nhập

3 Button Đăng ký Mở dialog để người dùng đăng ký

Hình 7 Giao diện đăng nhập Bảng 31 Giao diện đăng nhập

1 Combobox Người dùng chọn số điện thoại tương ứng với quốc gia của mình

Mở danh sách tiền tố số điện thoại của các quốc gia để người dùng chọn

2 Input Người dùng nhập số điện thoại

Người dùng xác nhận số điện thoại

Kiểm tra số điện thoại hợp lệ Nếu không hợp lệ thông báo lỗi Nếu hợp lệ hiện OTP input

4 Button Đăng nhập bằng Facebook Chuyển hướng người dùng đến trang đăng nhập Facebook

5 Button Đăng nhập bằng Google Chuyển hướng người dùng đến trang đăng nhập Google

6 Button Đăng ký Chuyển đến giao diện đăng ký

Hình 8 Giao diện người dùng mới Bảng 32 Giao người dùng mới

1 Button Tiếp tục truy cập Chuyển đến trang nhập hình ảnh

Hình 9 Giao diện nhập hình ảnh Bảng 33 Giao diện nhập hình ảnh

1 Input Cho người dùng chọn ảnh Mở dialog cho người dùng chọn ảnh

Tiếp tục truy cập Chuyển đến trang nhập thông tin Nếu người dùng chưa chọn ảnh sẽ hiện thông báo nhắc người dùng chọn ảnh

3 Button Quay lại trang trước đó Quay lại trang chào mừng

Hình 10 Giao diện nhập thông tin Bảng 34 Giao diện nhập thông tin

1 Input Nhập tên Hiển thị trạng thái lỗi khi người dùng không nhập đúng thông tin

2 Combobox Nhập ngày sinh Hiển thị các option cho người dùng lựa chọn

Hiển thị trạng thái lỗi khi người dùng bỏ trống

3 Combobox Nhập tháng sinh Hiển thị các option cho người dùng lựa chọn

4 Combobox Nhập năm sinh Hiển thị các option cho người dùng lựa chọn

6 Combobox Chọn quê quán Hiển thị các option cho người dùng lựa chọn

7 Button Tiếp tục qua bước tiếp theo

Kiểm tra các thông tin người dùng nhập

8 Button Quay lại bước trước đó

Quay lại bước trước đó

Hình 11 Giao diện chọn tiêu chí Bảng 35 Giao diện chọn tiêu chí

1 Radio button Người dùng chọn giới tính quan tâm

2 Radio button Người dùng chọn mối quan hệ muốn tìm kiếm

3 Button Hoàn tất quá trình nhập thông tin

4 Button Quay lại bước trước đó Quay lại bước trước đó

3.2.4 Yêu cầu quyền truy cập vị trí

Hình 12 Giao diện yêu cầu quyền truy cập vị trí Bảng 36 Giao diện yêu cầu quyền truy cập vị trí

1 Button Người dùng cho phép quyền truy cập vị trí

3.2.5.Màn hình chính – Gợi ý người dùng

Hình 13 Giao diện gợi ý người dùng Bảng 37 Giao diện gợi ý người dùng

1 Button Người dùng quay lại slide trước Chuyển slide trước

2 Button Người dùng xem slide sau Chuyển slide sau

3 Button Báo cáo người dùng Hiển thị giao diện báo cáo

4 Button Người dùng xem lại gợi ý đã bỏ qua trước đó

Hiển thị gợi ý đã bỏ qua trước đó

5 Button Người dùng bỏ qua người dùng được gợi ý

Bỏ qua gợi ý Hiển thị gợi ý tiếp theo

6 Button Người dùng gửi siêu thích tới người dùng được gợi ý

Gửi siêu thích và hiển thị gợi ý tiếp theo

7 Button Người dùng gửi thích tới người dùng được gợi ý

Gửi thích và hiển thị gợi ý tiếp theo

8 Button Làm nổi bật hồ sơ của người dùng

Tiến hành sử dụng lượt boost nếu có Nếu không sẽ hiển thị giao diện để người dùng mua lượt thích

9 Button Người dùng cài đặt tiêu chí gợi ý Hiển thị giao diện cài đặt tiêu chí gợi ý

10 Anchor Tên và ảnh đại diện của người dùng Điều hướng đến trang thông tin người dùng

11 Button Người dùng cấu hình theme giao diện Đóng / mở dark mode

12 Button Thông báo mới Hiển thị thông báo mới Bấm vào hiển thị giao diện thông báo

13 Anchor Mở giao diện hiển thị người dùng đã ghép đôi

Mở giao diện hiển thị người dùng đã ghép đôi

14 Anchor Mở giao diện hiển thị danh sách cuộc hội thoại

Mở giao diện hiển thị danh sách cuộc hội thoại

Hình 14 Giao diện cài đặt tiêu chí

Bảng 38 Giao diện cài đặt tiêu chí

1 Radio button Người dùng chọn giới tính quan tâm

2 Slider Người dùng chọn khoảng tuổi quan tâm

3 Checkbox Người dùng cài đặt bắt buộc phải hiển thị độ tuổi trên

4 Slider Người dùng chọn khoảng cách

5 Checkbox Người dùng cài đặt bắt buộc phải hiển thị khoảng cách trên

6 Button Lưu cài đặt tiêu chí Lưu cài đặt tiêu chí

7 Button Đóng cài đặt tiêu chí Đóng cài đặt tiêu chí

Hình 15 Giao diện chọn lý do báo cáo Bảng 39 Giao diện chọn lý do báo cáo

1 Select Người dùng chọn lý do báo cáo

2 Button Chuyển qua bước tiếp theo Chuyển qua bước tiếp theo

Hình 16 Giao diện nhập thông tin Bảng 40 Giao diện nhập thông tin

1 Text area Người dùng nhập mô tả về hành vi vi phạm của đối tượng

2 Input Người dùng chọn ảnh làm bằng chứng

Hiển thị dialog để người dùng chọn ảnh

3 Button Chuyển sang bước tiếp theo Chuyển sang bước tiếp theo

Hình 17 Giao diện xác nhận báo cáo Bảng 41 Giao diện xác nhận báo cáo

1 Text Hiển thị lý do báo cáo đã chọn

Hiển thị mô tả về hành vi vi phạm của đối tượng Người dùng có thể chỉnh sửa ngay tại đây

Hiển thị ảnh đã chọn Người dùng có thể chỉnh sửa ngay tại đây

4 Button Báo cáo Tắt giao diện báo cáo Chuyển sang đối tượng tiếp theo

3.2.8 Cài đặt thông tin cá nhân

Hình 18 Giao diện cài đặt thông tin cá nhân Bảng 42 Giao diện cài đặt thông tin cá nhân

1 Button Xóa ảnh Xóa ảnh tương ứng

2 Button Thêm ảnh Mở dialog chọn ảnh

3 Button Hiển thị thông tin cá nhân Hiển thị thông tin cá nhân

4 Button Cài đặt xác thực tài khoản Mở cài đặt xác thực tài khoản

5 Button Cài đặt mô tả Mở cài đặt mô tả

6 Button Cài đặt công việc và học vấn Mở cài đặt công việc và học vấn

7 Button Cài đặt thông tin cơ bản Mở cài đặt thông tin cơ bản

8 Button Cài đặt liên kết tài khoản Mở cài đặt liên kết tài khoản

Hình 19 Giao diện xác thực tài khoản Bảng 43 Giao diện xác thực tài khoản

1 Button Tắt modal xác thực khuôn mặt Trở lại trang sửa thông tin

2 Button Ghi hình xác thực khuôn mặt Bật ghi hình để xác thực khuôn mặt

3 Button Tắt modal xác thực khuôn mặt Trở lại trang sửa thông tin

Hình 20 Giao diện nhắn tin Bảng 44 Giao diện nhắn tin

1 Anchor Hiển thị thông tin tổng quát cuộc hội thoại

Truy cập tới cuộc hội thoại tương ứng

2 Text Hiển thị thông tin ngày ghép đôi thành công

3 Button Gọi video Mở giao diện gọi video

4 Button Cài đặt thêm Mở giao diện cài đặt thêm

5 Button Quay về màn hình chính Quay về màn hình chính

6 Button Tắt chế độ an toàn Tắt chế độ an toàn

7 Button Tắt thông báo chế độ an toàn Tắt thông báo chế độ an toàn

8 Input Người dùng chọn ảnh Mở dialog để người dùng chọn ảnh

9 Text area Người dùng soạn tin nhắn văn bản

10 Button Chọn emoji Mở dialog cho người dùng chọn emoji

11 Button Gửi tin nhắn Gửi tin nhắn

12 Div Trạng thái tin nhắn đã được đọc

13 Text Thời gian tin nhắn được gửi

Hình 21 Giao diện màn hình chờ Bảng 45 Giao diện màn hình chờ

1 View Hiển thị hình ảnh của người gọi

2 Text Hiển thị tên của người gọi

3 Text Hiển thị thông báo cho biết hành động của sự kiện của button

4 Button Từ chối cuộc gọi Tắt cuộc gọi gọi tới từ người gọi

5 Button Chấp nhận cuộc gọi Hiển thị popup call video

Hình 22 Giao diện cấp quyền camera và microphone Bảng 46 Giao diện cấp quyền camera và microphone

Cấp quyền cho trình duyệt sử dụng video và audio

Cho phép trình duyệt sử dụng dụng video và audio

Từ chối cấp quyền cho trình duyệt sử dụng video và audio

Không cho phép trình duyệt sử dụng video và audio

Thông báo cho người dùng biết trình duyệt chưa được quyền truy cập vào video và audio

Hình 23 Giao diện gọi video Bảng 47 Giao diện gọi video

1 Button Chuyển đổi bật/tắt mic Tắt/bật mic

2 Button Tắt cuộc gọi Kết thúc cuộc gọi

3 Button Chuyển đổi bật/tắt video Tắt/bật video

4 View Hiển thị hình ảnh hoặc video của người gọi

5 View Hiển thị hình ảnh hoặc video của người nghe

Hình 24 Giao diện đánh giá chất lượng cuộc gọi Bảng 48 Giao diện đánh giá chất lượng cuộc gọi

1 Button Tắt popup call video Tắt popup call video

2 View Hiển thị hình ảnh của đối phương

3 Text Hiển thị tiêu đề của form

4 Component Người dùng đánh giá chất lượng của cuộc gọi theo thang số 5

Hiển thị số sao tương ứng với số sao người dùng chọn

5 Input Người dùng ghi nội dung đánh giá

6 Button Gửi đánh giá Hiển thị màn hình gửi đánh giá thành công

Hình 25 Giao diện tìm kiếm địa điểm Bảng 49 Giao diện tìm kiếm địa điểm

1 Input Người dùng nhập tên địa điểm

2 Button Tìm kiếm nhanh Tìm kiếm nhanh với từ khóa tương ứng

3 Button Hủy tạo lời mời Quay về trang cuộc trò

4 Button Tiếp tục tạo lời mời Mở dialog tạo lời mời

Hình 26 Giao diện tạo lời mời Bảng 50 Giao diện tạo lời mời

1 Combobox Người dùng chọn giờ hẹn Mở dialog để người dùng chọn giờ

2 Combobox Người dùng chọn phút hẹn Mở dialog để người dùng chọn phút

3 Combobox Người dùng chọn ngày hẹn Mở dialog để người dùng chọn ngày

4 Text area Người dùng nhập lời mời

5 Button Hủy tạo lời mời Hủy tạo lời mời

6 Button Tạo lời mời Tạo lời mời và quay lại trang nhắn tin

Thiết kế xử lý

3.3.1 Đăng nhập với số điện thoại

Hình 27 Lược đồ sequence đăng nhập với số điện thoại

Hình 28 Lược đồ sequence đăng nhập với Google

3.3.3 Đăng ký với số điện thoại

Hình 29 Lược đồ sequence đăng ký với số điện thoại

3.3.4 Cài đặt tiêu chí gợi ý

Hình 30 Lược đồ sequence cài đặt tiêu chí gợi ý

Hình 31 Lược đồ sequence like

Hình 32 Lược đồ sequence boost

Hình 33 Lược đồ sequence báo cáo người dùng

3.3.8 Nhắn tin với người dùng đã ghép đôi

Hình 34 Lược đồ sequence nhắn tin với người dùng đã ghép đôi

3.3.9 Gợi ý địa điểm hẹn hò

Hình 35 Lược đồ sequence gợi ý địa điểm hẹn hò

Hình 36 Lược đồ sequence tạo lời mời hẹn hò

3.3.11 Tìm kiếm địa điểm hẹn hò

Hình 37 Lược đồ sequence tìm kiếm địa điểm hẹn hò

3.3.12 Liên kết tài khoản Instagram

Hình 38 Lược đồ sequence liên kết tài khoản Instagram

Hình 39 Lược đồ sequence gọi Video

Hình 40 Lược đồ sequence xác thực tài khoản

Hình 41 Lược đồ sequence mua gói bổ sung

CÀI ĐẶT VÀ THỬ NGHIỆM

Cài đặt

4.1.1 Cài đặt backend Để cài đặt thành công backend hệ thống yêu cầu:

Clone code từ github với repository tại branch master

Sau đó truy cập vào source code bằng câu lệnh cd dating-api

Bước 2: Chạy câu lệnh docker docker compose up –build -d

Hình 42 Kết quả sau khi chạy câu lệnh

Bước 3: Kiểm tra trạng thái của các container

Sau khi chạy ở bước 2, chạy câu lệnh docker ps -a để xem status của các container Nếu tất cả các service đều là up thì các container đã chạy thành công

Hình 43 Container Để xem log của container chạy câu lệnh docker logs -f container_id

Ví dụ: docker logs -f 2ce (id của container dating-backend)

Mở trình duyệt và truy cập vào http://localhost:4000/docs Url này sẽ có swagger của tất cả các API

4.1.2 Cài đặt frontend client Để cài đặt frontend client thành công hệ thống yêu cầu:

Tiến hành clone source code từ Github về máy

Vào source code vừa clone về bằng câu lệnh cd finder-next sau đó chạy npm install để cài các thư viện cần thiết

Tạo file env trong source và copy các giá trị dưới đây

BACKEND_URL=https://finder.sohe.in

NEXT_PUBLIC_BACKEND_URL=$BACKEND_URL

GOOGLE_CLIENT_ID`3665562518- h2d7j9pl9totm99jpc00vamcjo2q08mh.apps.googleusercontent.com

GOOGLE_CLIENT_SECRET=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

SPOTIFY_CLIENT_ID\13b947e98842cf8927cdc2dc7c59a7

SPOTIFY_CLIENT_SECRETa48bff4fe4f8cb46c9bf5f2e755ff

INSTAGRAM_CLIENT_SECRET10f129c8ca4a83e6f8ebd3996f5e03

FACEBOOK_CLIENT_SECRET332b70c6a3c5b08d074214bd8dcf77

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=finder-next

NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=w5olals0

NEXT_PUBLIC_CLOUDINARY_API_BASE_URL=https://api.cloudinary.com/v1_1/$NEX T_PUBLIC_CLOUDINARY_CLOUD_NAME

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=AIzaSyAh0z4tj8B8sGPHgp2ASIqxZ_wQn4Gf9UA

Thay đường dẫn backend vào giá trị của BACKEND_URL

Lưu ý: Các env dưới đây phục vụ cho khóa luận, sau khi kết thúc khóa luận các env sẽ không còn giá trị

Chạy lệnh npm run build sau đó chạy lệnh npm run start

Hình 45 Chạy server Finder client thành công

Truy cập theo đường dẫn hiển trị trong terminal

4.1.3 Cài đặt frontend admin Để cài đặt frontend admin thành công hệ thống yêu cầu:

Tiến hành clone source code từ Github về máy

Vào source code vừa clone về bằng câu lệnh cd finder-admin sau đó chạy yarn để cài các thư viện cần thiết

Tạo file env trong source và copy các giá trị dưới đây

VITE_BACKEND_URL=https://finder.sohe.in/api/v1

VITE_CLOUDINARY_CLOUD_NAME=finder-next

VITE_CLOUDINARY_UPLOAD_PRESET=w5olals0

VITE_CLOUDINARY_API_BASE_URL=https://api.cloudinary.com/v1_1/finder-next

Thay đường dẫn backend vào giá trị của VITE_BACKEND_URL

Lưu ý: Các env dưới đây phục vụ cho khóa luận, sau khi kết thúc khóa luận các env sẽ không còn giá trị

Chạy lệnh yarn build sau đó chạy lệnh yarn run preview

Hình 46 Chạy server admin thành công

Truy cập theo đường dẫn hiển trị trong terminal.

Thử nghiệm

Dự án sử dụng phương pháp kiểm thử hộp đen để tiến hành kiểm thử các chức năng chính của trang web Dưới đây là các bước nhóm thực hiện và kết quả sau khi kiểm thử

Bước 1: Truy cập https://finder-next.vercel.app Sau khi truy cập sẽ hiển thị trang Home của website

Bước 2: Click button Đăng nhập (1) Sau khi click button (1) sẽ hiển thị popup dùng để đăng nhập

Hình 48 Giao diện đăng nhập

Bước 3: Nhập số điện thoại vào ô input (1) với dữ liệu +84344329446

Bước 4: Click button Tiếp tục (2) Sau khi click button (2), sẽ chuyển qua popup verify OTP (kiểm tra OTP được gửi vào số +84344329446 và sử dụng OTP vừa nhận được để sử dụng đăng nhập)

Hình 49 Giao diện nhập OTP

Bước 5: Nhập OTP vào ô input (1) với dữ liệu là OTPh2436

Bước 6: Click button Xác thực (2), hệ thống xác thực OTP Nếu đúng sẽ redirect qua trang chủ của website Chuyển đến trang chính sau khi đăng nhập

Bước 7: Kiểm tra các yếu tố hiển thị như các thông tin, (1) lượt like mới, (2) user đã siêu thích, (3) user đã matched, (4) thông báo mới, (5) user được đề xuất

Hình 50 Kết quả sau khi đăng nhập thành công

Bước 1 Click vào tab Nhắn tin (1)

Bước 2 Click vào user Nguyễn Ngọc Phước (2) để nhắn tin

Bước 3 Kiểm tra các yếu tố hiển thị như các thông tin, (3) thông tin của user được chọn để nhắn tin, (4) danh sách tin nhắn đã nhắn trước đó, màn hình tin nhắn sẽ scroll xuống tin nhắn mới nhất

Bước 4: Nhập đoạn text với nội dung “Hello” vào ô input chat (5)

Bước 5: Click button “Gửi tin nhắn” (6)

Hình 52 Kết quả sau khi gửi tin nhắn thành công

Bước 6: Kiểm tra các yếu tố hiển thị như các thông tin, (1) tin nhắn vừa được gửi sẽ được hiển thị trên màn hình tin nhắn của người gửi, (2) khoảng thời gian đã gửi tin nhắn, (3) tin nhắn vừa gửi sẽ được xóa trong ô input “Soạn tin nhắn”

4.2.3 Các chức năng khác Để tránh báo cáo quá dài nhóm đã thực hiện thử nghiệm các chức năng chính như các bước được trình bày ở trên và tổng hợp kết quả thành 2 bảng dưới đây:

Bảng 51 Tổng hợp thử nghiệm trang client

STT Mô tả Các bước thực hiện Kết quả mong đợi

1 Kiểm thử chức năng đăng ký tài khoản bằng google

- Truy cập trang client và bấm vào button đăng nhập

- Click nút "Đăng nhập với google"

- Chọn tài khoản gmail để đăng ký

- Sau khi google xác minh tài khoản, chuyển người dùng đến trang thiết lập thông tin Đăng ký thành công

2 Kiểm thử chức năng cập nhật profile

- Truy cập https://finder- next.vercel.app/en/app/profile

- Click button "Sửa thông tin"

- Nhập các thông tin cần thay đổi

Thông tin mới của user sẽ được lưu lại

Và UI sẽ hiển thị các thông tin mới lên màn hình

3 Thay đổi bộ lọc tìm kiếm

- Truy cập https://finder- next.vercel.app/en/app/profile

- Chọn các thông tin cần thay đổi

- Quay lại màn hình chính để kiểm tra thông tin user có phù hợp với bộ lọc tìm kiếm mới hay chưa

Hiển thị danh sách User mới theo bộ lọc vừa mới thay đổi

- Truy cập https://finder- next.vercel.app/en/app/profile và chọn gói premium

- Nhập thông tin thẻ vào ô input tương ứng

- Stripe sẽ xác thực thông tin thẻ, sau khi xác thực thành công và đủ điều kiện thì sẽ nâng cấp tài khoản user lên premium

Số tiền tương ứng sẽ được cộng vào tài khoản Stripe và tài khoản user sẽ được nâng cấp lên premium

5 Đăng nhập với số điện thoại

- Truy cập https://finder- next.vercel.app và click vào button “Đăng nhập”

- Nhập số điện thoại vào ô input

- Click button "Tiếp tục" để hệ thống gửi đến số điện thoại vừa nhập

- Nhập OTP vừa nhận được vào từng ô input

- Click button "Xác thực" Đăng nhập thành công

- User đăng nhập vào hệ thống và đang ở trang giao diện chính

- Hiển thị trạng thái loading khi đang trong quá trình lấy dữ liệu từ API

Danh sách user gợi ý phù hợp với bộ lọc tìm kiếm mà người dùng đã cài đặt

- Những thông tin cơ bản của user được hiển thị dưới dạng thẻ

7 Thích người dùng được gợi ý

- User vừa được like sẽ không xuất hiện nữa và hiển thị user tiếp theo

Gửi 1 yêu cầu ghép cặp (thời gian thực) đến user vừa được like

8 Bỏ qua người dùng được gợi ý

User vừa bỏ qua sẽ không hiển nữa và hiển thị user tiếp theo

Bảng 52 Tổng hợp thử nghiệm trang admin

STT Mô tả Các bước thực hiện Kết quả mong đợi Kết quả thực tế Trạng thái

- Truy cập https://finder-admin- navy.vercel.app/login

- Nhập tài khoản admin@gmail.com

- Chuyển người dùng đến trang dashboard Đăng nhập thành công

2 Filter của view “Số người đăng

- Truy cập https://finder-admin- navy.vercel.app

Hiển thị 4 cột dữ liệu

Như mong đợi Đạt ký mới” có hoạt động

3 Filter của view “Bảng xếp hạng người dùng” có hoạt động

4 Filter của view “Thống kê doanh thu” có hoạt động

5 Filter của view “Số lượt thích” có hoạt động

6 Chặn người dùng vi phạm báo cáo

- Bấm vào dấu thao tác (3 chấm) chọn chặn người dùng

- Bấm vào xác nhận chặn người dùng

-Hiển thị thông báo chặn thành công và đổi trạng thái sang đã xử lý

Ưu điểm

4 Đề nghị cho bảo vệ hay không:

Tp Hồ Chí Minh, ngày tháng năm 2023

Giảng viên hướng dẫn ( Ký và ghi rõ họ tên ) ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên sinh viên: Nguyễn Đắc Thắng MSSV: 19110293

Họ và tên sinh viên: Nguyễn Trường Giang MSSV: 19110354

Họ và tên sinh viên: Phạm Minh Phát MSSV: 19110260

Chuyên ngành: Công nghệ phần mềm

Giảng viên phản biện: ThS Nguyễn Minh Đạo

Tên đề tài: Xây dựng website kết bạn, hẹn hò Finder

1 Về nội dung đề tài & khối lượng thực hiện:

4 Đề nghị cho bảo vệ hay không:

Tp Hồ Chí Minh, ngày tháng năm 2023

Giảng viên phản biện ( Ký và ghi rõ họ tên )

Nhóm chân thành cảm ơn Khoa Công Nghệ Thông Tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh đã cung cấp cho nhóm môi trường học tập lý tưởng để nhóm theo đuổi con đường học vấn và hoàn thành khóa luận tốt nghiệp này Nhóm đặc biệt xin bày tỏ lòng biết ơn chân thành tới ThS Nguyễn Trần Thi Văn đã chia sẻ kiến thức và giúp đỡ nhóm trong quá trình viết khóa luận

Nhóm đã nỗ lực hoàn thành đề tài bằng cách sử dụng những kiến thức đã thu được Tuy nhiên, vì hạn chế về kiến thức và ít kinh nghiệm thực tế thể gặp sai sót trong quá trình nghiên cứu và phát triển Nhóm mong nhận được phản hồi để có thể cải thiện bài báo cáo của nhóm

Một lần nữa nhóm xin cảm ơn thầy đã quan tâm và giúp đỡ nhóm trong quá trình thực hiện khóa luận

Nhóm xin chân thành cảm ơn

NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP 3

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 5

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN 6

1 Tổng quan về đề tài 15

2 Lý do chọn đề tài 15

3 Mục tiêu của đề tài 15

4 Phạm vi của đề tài 16

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 17

CHƯƠNG 2 XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU 21

2.4.1 Đăng nhập với số điện thoại 29

2.4.3 Đăng ký với số điện thoại 31

2.4.4 Cài đặt tiêu chí gợi ý 32

2.4.8 Nhắn tin với người dùng đã ghép đôi 35

2.4.9 Gợi ý địa điểm hẹn hò 36

2.4.10 Tạo lời mời hẹn hò 37

2.4.11 Tìm kiếm địa điểm hẹn hò 38

2.4.12 Liên kết tài khoản Instagram 39

CHƯƠNG 3 THIẾT KẾ HỆ THỐNG 44

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

3.2.4 Yêu cầu quyền truy cập vị trí 59

3.2.5 Màn hình chính – Gợi ý người dùng 60

3.2.8 Cài đặt thông tin cá nhân 65

3.3.1 Đăng nhập với số điện thoại 74

3.3.3 Đăng ký với số điện thoại 75

3.3.4 Cài đặt tiêu chí gợi ý 75

3.3.8 Nhắn tin với người dùng đã ghép đôi 77

3.3.9 Gợi ý địa điểm hẹn hò 78

3.3.11 Tìm kiếm địa điểm hẹn hò 79

3.3.12 Liên kết tài khoản Instagram 79

CHƯƠNG 4 CÀI ĐẶT VÀ THỬ NGHIỆM 83

Hình 1 Tổng quan về Tinder 22

Hình 2 Tổng quan về Bumble 23

Hình 3 Tổng quan về Badoo 24

Hình 4 Lược đồ use case 28

Hình 5 Cơ sở dữ liệu 44

Hình 6 Giao diện trang chủ 53

Hình 7 Giao diện đăng nhập 54

Hình 8 Giao diện người dùng mới 55

Hình 9 Giao diện nhập hình ảnh 56

Hình 10 Giao diện nhập thông tin 57

Hình 11 Giao diện chọn tiêu chí 58

Hình 12 Giao diện yêu cầu quyền truy cập vị trí 59

Hình 13 Giao diện gợi ý người dùng 60

Hình 14 Giao diện cài đặt tiêu chí 61

Hình 15 Giao diện chọn lý do báo cáo 62

Hình 16 Giao diện nhập thông tin 63

Hình 17 Giao diện xác nhận báo cáo 64

Hình 18 Giao diện cài đặt thông tin cá nhân 65

Hình 19 Giao diện xác thực tài khoản 66

Hình 20 Giao diện nhắn tin 67

Hình 21 Giao diện màn hình chờ 68

Hình 22 Giao diện cấp quyền camera và microphone 69

Hình 23 Giao diện gọi video 70

Hình 24 Giao diện đánh giá chất lượng cuộc gọi 71

Hình 25 Giao diện tìm kiếm địa điểm 72

Hình 26 Giao diện tạo lời mời 73

Hình 27 Lược đồ sequence đăng nhập với số điện thoại 74

Hình 28 Lược đồ sequence đăng nhập với Google 74

Hình 29 Lược đồ sequence đăng ký với số điện thoại 75

Hình 30 Lược đồ sequence cài đặt tiêu chí gợi ý 75

Hình 31 Lược đồ sequence like 76

Hình 32 Lược đồ sequence boost 76

Hình 33 Lược đồ sequence báo cáo người dùng 77

Hình 34 Lược đồ sequence nhắn tin với người dùng đã ghép đôi 77

Hình 35 Lược đồ sequence gợi ý địa điểm hẹn hò 78

Hình 36 Lược đồ sequence tạo lời mời hẹn hò 78

Hình 37 Lược đồ sequence tìm kiếm địa điểm hẹn hò 79

Hình 38 Lược đồ sequence liên kết tài khoản Instagram 79

Hình 39 Lược đồ sequence gọi Video 80

Hình 40 Lược đồ sequence xác thực tài khoản 81

Hình 41 Lược đồ sequence mua gói bổ sung 82

Hình 42 Kết quả sau khi chạy câu lệnh 83

Hình 45 Chạy server Finder client thành công 85

Hình 46 Chạy server admin thành công 86

Hình 48 Giao diện đăng nhập 87

Hình 49 Giao diện nhập OTP 88

Hình 50 Kết quả sau khi đăng nhập thành công 89

Hình 51 Giao diện nhắn tin 89

Hình 52 Kết quả sau khi gửi tin nhắn thành công 90

Bảng 1 So sánh các đặc điểm chính giữa các ứng dụng tương tự 24

Bảng 2 So sánh chức năng các ứng dụng 25

Bảng 3 Các actor trong hệ thống 27

Bảng 4 Đăng nhập với số điện thoại 29

Bảng 5 Đăng nhập với Google 30

Bảng 6 Đăng ký với số điện thoại 31

Bảng 7 Cài đặt tiêu chí gợi ý 32

Bảng 10 Báo cáo người dùng 34

Bảng 11 Nhắn tin với người dùng đã ghép đôi 35

Bảng 12 Gợi ý địa điểm hẹn hò 36

Bảng 13 Tạo lời mời hẹn hò 37

Bảng 14 Tìm kiếm địa điểm hẹn hò 38

Bảng 15 Liên kết tài khoản Instagram 39

Bảng 17 Xác thực tài khoản 41

Bảng 18 Mua gói bổ sung 42

Bảng 30 Giao diện trang chủ 53

Bảng 31 Giao diện đăng nhập 54

Bảng 32 Giao người dùng mới 55

Bảng 33 Giao diện nhập hình ảnh 56

Bảng 34 Giao diện nhập thông tin 57

Bảng 35 Giao diện chọn tiêu chí 58

Bảng 36 Giao diện yêu cầu quyền truy cập vị trí 59

Bảng 37 Giao diện gợi ý người dùng 60

Bảng 38 Giao diện cài đặt tiêu chí 62

Bảng 39 Giao diện chọn lý do báo cáo 62

Bảng 40 Giao diện nhập thông tin 63

Bảng 41 Giao diện xác nhận báo cáo 64

Bảng 42 Giao diện cài đặt thông tin cá nhân 65

Bảng 43 Giao diện xác thực tài khoản 66

Bảng 44 Giao diện nhắn tin 67

Bảng 45 Giao diện màn hình chờ 68

Bảng 46 Giao diện cấp quyền camera và microphone 69

Bảng 47 Giao diện gọi video 70

Bảng 48 Giao diện đánh giá chất lượng cuộc gọi 71

Bảng 49 Giao diện tìm kiếm địa điểm 72

Bảng 50 Giao diện tạo lời mời 73

Bảng 51 Tổng hợp thử nghiệm trang client 91

Bảng 52 Tổng hợp thử nghiệm trang admin 93

1 Tổng quan về đề tài

Ngày nay công nghệ thông tin ngày càng phát triển mọi người cũng đã dần tiếp cận với hầu hết những công nghệ mới như smartphone, internet, Vì vậy việc mọi người tương tác trực tuyến không còn là việc gì quá khó khăn Vượt ra khỏi những quen biết thường ngày và kết nối với mọi người xa gần khắp nơi Giúp chúng ta có thể trải nghiệm kết bạn, hẹn hò trực tuyến Chat với mọi người dù gần nhà hay xa Gặp gỡ mọi người trên mạng là cả một hành trình, thứ chúng ta muốn chính là những người bạn đáng tin cậy cùng chúng ta đồng hành Finder tạo ra nhằm giúp mọi người hay đặc biệt là những ai ngại giao tiếp xã hội hoặc lười với những buổi gặp mặt mới, thoát khỏi kiếp độc thân hay đơn giản là tìm kiếm bạn bè hay những mối quan hệ bình thường đặc biệt là trong cuộc sống xô bồ trong hiện tại Nơi mà mọi người đang bận bịu với những công việc và không có nhiều thời gian để có thể đi giao lưu, tìm kiếm bạn bè và đặc biệt hơn là Internet ngày càng phát triển vì vậy mà mọi người cũng hay có thói quen sử dụng Internet nhiều hơn

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

Trong thời đại ngày nay, nhu cầu kết nối cá nhân ngày càng trở nên quan trọng và phức tạp Thị trường mạng xã hội và ứng dụng hẹn hò ngày càng tăng, tuy nhiên, vẫn còn khá nhiều thách thức liên quan đến tính tương tác, an toàn thông tin, và đa dạng trong cách kết nối Đề tài này mang lại cơ hội để xây dựng một nền tảng linh hoạt, thân thiện với người dùng, và sử dụng công nghệ mới nhất Ngoài ra, việc đóng góp tích cực cho xã hội thông qua việc tạo ra một môi trường kết nối mang lại sự hứa hẹn về tương lai và tiềm năng kinh doanh Hơn nữa, quá trình nghiên cứu và phát triển dự án không chỉ là cơ hội để học hỏi sâu sắc về phát triển phần mềm mà còn làm phong phú và phát triển kỹ năng quản lý dự án và thiết kế giao diện Đề tài này không chỉ là một dự án kỹ thuật, mà còn là một khám phá về cách chúng ta kết nối và giao tiếp trong thế giới số hóa ngày nay

3 Mục tiêu của đề tài

Mục tiêu chính của đề tài nhằm tạo ra một nền tảng trực tuyến đa dạng và hiệu quả để kết nối mối quan hệ cá nhân Chú trọng vào sự thuận tiện và linh hoạt, ứng dụng này nhằm đáp ứng nhu cầu ngày càng phức tạp của người dùng trong việc tìm kiếm bạn bè, đối tác, và mối quan hệ lâu dài Đồng thời, đề tài hướng tới việc giải quyết những thách thức về tương tác và an toàn thông tin trong thị trường mạng xã hội và ứng dụng hẹn hò Bằng cách tích hợp công nghệ mới nhất và thiết kế giao diện thân thiện, đề tài này mong muốn tạo ra một trải nghiệm người dùng độc đáo và thoải mái, đồng thời mở ra tiềm năng kinh doanh và đóng góp tích cực cho xã hội thông qua việc xây dựng cộng đồng kết nối đa dạng và tích cực

4 Phạm vi của đề tài Đề tài bao gồm 3 module chính:

 Trang web client cho người dùng truy cập

 Trang web admin để quản lý thông số hoạt động của client

5 Phương pháp nghiên cứu Để hoàn thành đề tài, nhóm áp dụng các phương pháp nghiên cứu dưới đây:

 Hiểu các yêu cầu của dự án và nghiên cứu quy trình nghiệp vụ

 Nghiên cứu các công nghệ và hệ thống hiện có trên thị trường

 Nghiên cứu và phát triển website

 Tinh chỉnh và tiến hành kiểm thử

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

Mô hình Client – Server là một kiến trúc mạng và phân phối thông tin trong lĩnh vực công nghệ thông tin Trong mô hình này, các máy tính trên mạng được phân thành hai loại cơ bản: máy khách (Client) và máy chủ (Server) Máy khách là các thiết bị hoặc ứng dụng mà người dùng cuối cùng sử dụng để yêu cầu dịch vụ hoặc tài nguyên từ máy chủ Máy chủ là các máy tính hoặc hệ thống chịu trách nhiệm cung cấp dịch vụ hoặc tài nguyên được yêu cầu bởi các máy khách Trong quá trình này, máy khách và máy chủ trao đổi dữ liệu thông qua giao thức truyền thông như HTTP, TCP/IP, hoặc các giao thức khác Mô hình Client-Server cung cấp cơ sở cho truyền thông, tương tác, và phân phối thông tin hiệu quả trên mạng

React là một thư viện JavaScript phát triển bởi Facebook, được sử dụng để xây dựng giao diện người dùng (UI) hiệu quả và tương tác trên các ứng dụng web Với khả năng quản lý các thành phần giao diện và cập nhật dữ liệu một cách hiệu quả, React đã trở thành một công cụ quan trọng cho việc phát triển các ứng dụng web động, nhanh chóng và dễ bảo trì React sử dụng cú pháp JSX để mô tả giao diện và tạo cảm giác như viết HTML trong mã JavaScript, giúp phát triển ứng dụng dễ dàng và dễ đọc

NextJS là một framework phát triển ứng dụng web phía máy chủ và phía máy khách, được xây dựng trên nền tảng React Điều đặc biệt về Next.js là khả năng cung cấp Server-Side Rendering (SSR), cho phép tạo ứng dụng web với hiệu suất cao và tối ưu hóa SEO Nó cung cấp hệ thống routing động, tối ưu hóa hiệu suất, tích hợp TypeScript và API Routes, giúp phát triển ứng dụng web mạnh mẽ và tối ưu hóa trải nghiệm người dùng Next.js là một công cụ quan trọng cho việc xây dựng ứng dụng web động và tĩnh, và nó tận dụng sức mạnh của React để giúp phát triển dễ dàng hơn và hiệu quả hơn

MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) mã nguồn mở, phát triển để lưu trữ và quản lý dữ liệu trong hình dạng tài liệu JSON-like, gọi là BSON Nó được thiết kế để xử lý lượng dữ liệu lớn và linh hoạt, cho phép lưu trữ dữ liệu có cấu trúc và không có cấu trúc một cách dễ dàng MongoDB được sử dụng rộng rãi trong phát triển ứng dụng web và di động, với khả năng tìm kiếm nhanh chóng và cung cấp cơ sở cho các tính năng linh hoạt như lưu trữ tệp và tạo ứng dụng thời gian thực Điểm mạnh của MongoDB bao gồm khả năng mở rộng dễ dàng, khả năng chịu lỗi và tích hợp tốt với các ngôn ngữ lập trình khác nhau, giúp phát triển và quản lý dữ liệu một cách hiệu quả trong các ứng dụng phức tạp

NestJS là một framework NodeJS có cấu trúc và mô hình lập trình bậc cao, dựa trên nguyên lý của Angular, nhằm cung cấp một nền tảng linh hoạt cho việc xây dựng ứng dụng server-side hiện đại Sử dụng TypeScript và thiết kế theo hướng module, NestJS cho phép phát triển ứng dụng với cấu trúc rõ ràng, dễ bảo trì và mở rộng Framework này tích hợp các khái niệm của OOP (Object-Oriented Programming), FP (Functional Programming) và FRP (Functional Reactive Programming), giúp tạo ra mã nguồn rõ ràng, dễ đọc và linh hoạt NestJS cung cấp các tính năng mạnh mẽ như Dependency Injection, Middleware, Interceptors và Exception Filters, tạo điều kiện thuận lợi cho việc xây dựng các ứng dụng có tính tái sử dụng cao, đồng thời hỗ trợ kết nối với các cơ sở dữ liệu khác nhau và cung cấp API dễ sử dụng Tóm lại, NestJS là một framework server-side mạnh mẽ và dễ sử dụng, đặc biệt thích hợp cho việc xây dựng ứng dụng NodeJS có kích thước lớn và phức tạp

Golang (hoặc Go) là một ngôn ngữ lập trình được thiết kế bởi Google, với mục tiêu đơn giản, hiệu quả và dễ đọc Được phát triển để giải quyết các vấn đề của các dự án lớn, Golang đã trở thành một lựa chọn phổ biến cho việc xây dựng các hệ thống phần mềm có hiệu suất cao và dễ bảo trì Một trong những điểm đặc biệt của Golang là hệ thống quản lý bộ rác tích hợp, giúp giảm bớt gánh nặng cho lập trình viên khi phát triển ứng dụng Ngôn ngữ này cũng hỗ trợ đồng thời và song song, giúp tối ưu hóa sức mạnh của các máy tính đa lõi và hệ thống phân tán Với cú pháp đơn giản và rõ ràng, Golang làm cho việc phát triển ứng dụng trở nên dễ dàng hơn Nó cung cấp một hệ thống gói (package) mạnh mẽ, hỗ trợ modularization và tái sử dụng mã nguồn, giúp tạo ra mã linh hoạt và dễ bảo trì

Fiber là một framework web hiệu suất cao cho Golang, được thiết kế để cung cấp trải nghiệm phát triển web nhanh chóng và hiệu quả Được xây dựng dựa trên triển khai tốt nhất của Golang, Fiber giúp tối ưu hóa việc xử lý HTTP và đồng thời giảm thiểu các nguy cơ quá tải Một trong những điểm đặc biệt của Fiber là cơ chế xử lý cực kỳ nhẹ và hiệu quả, giúp tăng cường khả năng đáp ứng và giảm thiểu thời gian phản hồi Nó sử dụng goroutines trong Golang để xử lý đồng thời các yêu cầu HTTP mà không tạo ra overhead đáng kể Fiber cung cấp một hệ thống định tuyến nhanh chóng và linh hoạt, cho phép bạn dễ dàng xác định các tuyến đường của ứng dụng và xử lý các yêu cầu HTTP tới chúng Nó tích hợp tốt với middleware, cho phép bạn mở rộng chức năng của ứng dụng một cách dễ dàng Đối với việc tối ưu hóa hiệu suất, Fiber hỗ trợ các tính năng như giữ kết nối (connection keep-alive) và HTTP/2, giúp tối ưu hóa việc gửi và nhận dữ liệu giữa máy chủ và máy khách

OpenCV (gocv là gói liên kết Golang cho OpenCV) là một thư viện mã nguồn mở rất mạnh mẽ trong lĩnh vực thị giác máy tính và xử lý ảnh Nó cung cấp nhiều công cụ và thuật toán để thực hiện các nhiệm vụ như nhận diện đối tượng, theo dõi chuyển động, xử lý hình ảnh, và nhiều ứng dụng khác Gocv, là một liên kết cho OpenCV trong Golang, mang lại sức mạnh của OpenCV vào ngôn ngữ lập trình Go Điều này giúp những người phát triển Go tận dụng các tính năng và thuật toán mạnh mẽ của OpenCV mà không cần chuyển sang ngôn ngữ khác Sử dụng gocv, bạn có thể thực hiện các nhiệm vụ xử lý ảnh phức tạp như lọc ảnh, nhận diện khuôn mặt, xác định đối tượng, và thậm chí là xử lý video Gocv cung cấp các hàm và cấu trúc dữ liệu phù hợp với Golang, giúp làm cho mã nguồn dễ đọc và dễ bảo trì

Google Maps Platform là một bộ công cụ và dịch vụ cung cấp bởi Google cho phép các nhà phát triển tích hợp và tận dụng dữ liệu bản đồ và địa lý trong ứng dụng của họ

Nhược điểm

Bên cạnh những ưu điểm hệ thống cũng có những nhược điểm sau:

 Tin nhắn chưa được mã hoá

 Hệ thống xác thực tài khoản bằng khuôn mặt với độ chính xác chưa cao

 Chưa hỗ trợ đa ngôn ngữ.

Hướng phát triển

Để sản phẩm hoàn thiện hơn nhóm em hướng đến phát triển thêm:

 Tìm hiểu và áp dụng thuật toán mã hoá phù hợp để mã hoá tin nhắn

 Nâng cấp chức năng xác thực tài khoản bằng khuôn mặt

 Hỗ trợ đa ngôn ngữ

 Phát triển chức năng Quick match – Chức năng cho phép người dùng được ghép đôi ẩn danh trong một khoảng thời gian ngắn để tìm hiểu sau đó đưa ra quyết định có ghép đôi hay không.

Tiêu đề	Xây dựng website kết bạn, hẹn hò Finder
Tác giả	Nguyễn Đắc Thắng, Nguyễn Trường Giang, Phạm Minh Phát
Người hướng dẫn	THS. Nguyễn Trần Thi Văn
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	Khóa luận tốt nghiệp
Năm xuất bản	2023
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	101
Dung lượng	7,52 MB