TỔNG QUAN VỀ ĐỀ TÀI
Đặt vấn đề
Dịch Covid-19 đã giảm bớt, nhưng hậu quả để lại rất nặng nề, khiến nhiều người đối mặt với trầm cảm và sợ hãi khi tiếp xúc xã hội Mặc dù tỷ lệ lây nhiễm và tử vong đã giảm, chúng ta vẫn cần tuân thủ nghiêm ngặt các quy định giãn cách xã hội và quy tắc 5K được cập nhật Khi không gian sinh hoạt bị thu hẹp và việc giao tiếp trở nên khó khăn, internet và các ứng dụng mạng xã hội trở thành cầu nối quan trọng giúp mọi người kết nối và chia sẻ cảm xúc.
Hiện nay, các ứng dụng nhắn tin đang phát triển mạnh mẽ, kết nối mọi người dù ở xa hay gần Đồng thời, Flutter cũng ngày càng trở nên phổ biến và được cải tiến liên tục.
Chúng em đã phát triển ứng dụng Familiar Stranger với mục tiêu tạo ra một không gian an toàn và văn minh cho mọi người, nơi họ có thể lắng nghe và chia sẻ nỗi niềm với nhau Ứng dụng này giúp giải tỏa tâm lý và mang lại những lời khuyên hữu ích cho người dùng.
Mục tiêu chính của nhóm là nghiên cứu Flutter và áp dụng kiến thức đã học để phát triển một ứng dụng trò chuyện ẩn danh trực tuyến Chúng tôi sẽ thu thập trải nghiệm từ người dùng các ứng dụng tương tự như Messenger và Zalo thông qua khảo sát, nhằm tạo ra một sản phẩm tối ưu, tiện lợi và bảo vệ quyền lợi của người dùng.
Với thời gian tìm hiểu hạn chế, nhóm sẽ tập trung vào việc hoàn thiện ứng dụng trò chuyện ẩn danh, bao gồm các chức năng ghép cặp, kết bạn và quản lý.
Chúng tôi sẽ cung cấp thông tin cá nhân và cho phép người dùng nghe nhạc trong phòng chat Tiếp theo, chúng tôi sẽ nỗ lực phát triển một trang web quản lý dành cho quản trị viên, hướng tới việc tạo ra một mạng xã hội thu nhỏ cho đồ án 2 và khóa luận tốt nghiệp.
Công cụ sử dụng
Công cụ phân tích và thiết kế Database : Draw.io, MongoDB
Công cụ thiết kế giao diện : Figma
Công cụ lập trình : Visual Studio Code
Công cụ quản lý dự án : Github, Messger, Trello, Discord
Công cụ lưu trữ các tài liệu liên quan : Google Drive, Github
CƠ SỞ LÝ THUYẾT
NodeJS
NodeJS là nền tảng mã nguồn mở được phát triển vào năm 2009 bởi Ryan Lienhart Dahl, dựa trên động cơ V8 Javascript viết bằng C++ và Javascript Nó cung cấp môi trường cho các máy chủ và ứng dụng mạng, giúp tăng cường hiệu suất và khả năng mở rộng.
NodeJS được phát triển bởi những lập trình viên tiên phong trong lĩnh vực JavaScript, nhằm mở rộng khả năng của ngôn ngữ này từ việc chỉ chạy trên trình duyệt thành một ứng dụng độc lập có thể hoạt động trên máy tính cá nhân.
NodeJS chứa một thư viện built-in cho phép các ứng dụng hoạt động như một
Webserver mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS
NodeJS cung cấp kiến trúc hướng sự kiện (event-driven) và non-blocking I/O
API, tối ưu hóa thông lượng của ứng dụng và có khả năng mở rộng cao
Mọi hàm trong NodeJS là không đồng bộ (asynchronous) Do đó, các tác vụ đều được xử lý và thực thi ở chế độ nền (background processing)
- Kết hợp tốt với NoSQL, cụ thể là MongoDB cho đồ án lần này
- Thường được sử dụng để build websocket sever (Chat Sever)
- Ứng dụng Web thực: Dùng để xây dựng 1 ứng dụng chat, feed Facebook, Twitter là điển hình cho Web thực NodeJS làm khá tốt điều đó!
Luồng dữ liệu trong các ứng dụng web thường được xử lý qua các yêu cầu HTTP, nhưng khi cần quản lý một luồng dữ liệu lớn, NodeJS có khả năng xây dựng các Proxy để phân vùng và tối ưu hóa hiệu suất cho từng luồng Điều này giúp đảm bảo rằng các luồng dữ liệu khác vẫn hoạt động hiệu quả, trong khi phản hồi từ các yêu cầu được trả về sẽ được sử dụng để tích hợp vào ứng dụng di động.
NodeJS tối ưu hóa hoạt động dựa trên nền tảng Unix, cho phép xử lý hàng nghìn tiến trình đồng thời Nhờ vào khả năng này, NodeJS đạt hiệu suất hoạt động tối đa và mang lại trải nghiệm tuyệt vời cho người dùng.
MongoDB
MongoDB là một loại cơ sở dữ liệu NoSQL, được thiết kế dưới dạng tài liệu Đây là hệ quản trị cơ sở dữ liệu mã nguồn mở, cho phép lưu trữ dữ liệu dưới dạng tài liệu JSON Khác với các cơ sở dữ liệu quan hệ truyền thống sử dụng bảng, MongoDB giúp tối ưu hóa quá trình truy vấn dữ liệu, giảm thiểu thời gian và số bước cần thực hiện.
Khi làm việc với cơ sở dữ liệu SQL, chúng ta cần nắm vững các khái niệm về bảng và cơ sở dữ liệu quan hệ, vì dữ liệu thường được lưu trữ trong các bảng Tuy nhiên, khi chuyển sang sử dụng MongoDB, bạn sẽ chỉ cần hiểu các khái niệm khác biệt liên quan đến cơ sở dữ liệu phi quan hệ.
Collection thay vì bảng như trước
MongoDB sử dụng lưu trữ dữ liệu dưới dạng JSON, cho phép mỗi collection có kích cỡ và các Document khác nhau Sự linh hoạt trong việc lưu trữ dữ liệu của MongoDB rất hữu ích, giúp chúng ta có thể dễ dàng thêm dữ liệu bất kỳ lúc nào.
- Không có sự ràng buộc lẫn nhau trong dữ liệu: Không cần kiểm tra thoả mãn ràng buộc để thêm/xoá/sửa dữ liệu, đặc trưng của NoSQL
MongoDB nổi bật với tốc độ truy vấn cực kỳ cao, được tối ưu hóa nhanh hơn so với các hệ thống quản trị dữ liệu quan hệ khác Các thử nghiệm cho thấy, tốc độ của MongoDB có thể nhanh gấp 100 lần so với MySQL, mang lại hiệu suất vượt trội cho người dùng.
Trong MongoDB, khái niệm thay đổi từ bảng và cột sang Collection và document, cho phép cấu trúc dữ liệu linh hoạt hơn Người dùng có thể lưu trữ dữ liệu mà không cần tuân theo một cấu trúc cố định, giúp tối ưu hóa việc truy vấn thông tin liên quan Nhờ vào ngôn ngữ truy vấn MongoDB, việc truy xuất dữ liệu trở nên nhanh chóng và hiệu quả hơn.
7 bạn có thể thực hiện những điều này Đây chính là lý do vì sao, nhiều người muốn tìm hiểu về cách sử dụng MongoDB.
Flutter
Flutter là framework UI di động do Google phát triển, cho phép tạo ra giao diện chất lượng cao trên cả iOS và Android một cách nhanh chóng Nó sử dụng mã nguồn có sẵn, giúp lập trình viên và tổ chức tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng.
Flutter là một framework hoàn toàn miễn phí và mã nguồn mở, được xây dựng dựa trên ngôn ngữ lập trình Dart - một ngôn ngữ lập trình hướng đối tượng dễ học và phát triển.
Flutter có thể xây dựng ứng dụng đa nền tảng , và ngày càng được cập nhật nhiều hơn, hiện đại hơn (Web, Desktop App, Mobile App)
Flutter tương thích với nhiều IDE, bao gồm Android Studio, IntelliJ IDEA và Visual Studio Code Tuy nhiên, để sử dụng Visual Studio Code, bạn cần xây dựng máy ảo trong một trong hai IDE đầu tiên.
Hot Reload cho phép lập trình viên không cần phải xây dựng lại ứng dụng, chỉ cần nhấn tổ hợp phím Ctrl + S để lưu các thay đổi và áp dụng ngay lập tức trên thiết bị ảo hoặc điện thoại đang sử dụng để debug Tính năng này rất tiện lợi cho việc kiểm tra độ tương thích, khả năng hoạt động và hiệu suất của Flutter.
Flutter cung cấp một thành phần UI phong phú với mọi thứ được xây dựng dưới dạng Widget, bao gồm hai bộ Widget phổ biến là Material Design và Cupertino, hỗ trợ trên tất cả các nền tảng lập trình như Web và Mobile App Điều này giúp lập trình viên dễ dàng tạo ra các ứng dụng đồng bộ trên nhiều thiết bị, bao gồm cả Android và iOS Hơn nữa, việc sử dụng Widget cho phép người dùng tùy chỉnh và thừa kế, từ đó tinh chỉnh lại các thành phần giao diện theo ý muốn.
Flutter được ưa chuộng trong phát triển ứng dụng di động đa nền tảng nhờ vào số lượng lớn package hỗ trợ cho cả Android và iOS Sự đơn giản, linh hoạt và tốc độ phản hồi nhanh chóng của Flutter cũng là những yếu tố quan trọng góp phần vào sự phổ biến của nó.
TÌM HIỂU VỀ FLUTTER
Giới thiệu chung
Flutter là SDK phát triển ứng dụng di động của Google, giúp tạo ra các ứng dụng chất lượng cao trên cả iOS và Android Được phát triển bởi cộng đồng lập trình viên toàn cầu, Flutter là mã nguồn mở và miễn phí Sự phổ biến ngày càng tăng của Flutter không phải ngẫu nhiên, mà nhờ vào tính tiện lợi, tốc độ phát triển nhanh chóng và khả năng đa nền tảng mà nó mang lại.
Phiên bản đầu tiên của Flutter, mang tên ‘Sky’, được phát triển cho hệ điều hành Android Nó lần đầu tiên được giới thiệu tại hội nghị thượng đỉnh dành cho các nhà phát triển Dart, với mục tiêu chính là tối ưu hóa tốc độ hiển thị khung hình.
Vào tháng 9 năm 2018, tại Thượng Hải, Trung Quốc, Google đã công bố bản xem trước phát hành Flutter 2.0, đánh dấu phiên bản chính thức cuối cùng từ Google kể từ khi phát hành Flutter 1.0 vào ngày 4 tháng 12 năm đó tại sự kiện Flutter Live.
Vào ngày 6 tháng 5 năm 2020, Dart SDK phiên bản 2.8 và Flutter 1.17.0 được phát hành, mang đến hỗ trợ cho API Metal, cải thiện hiệu suất trên thiết bị iOS lên đến 50% Phiên bản này cũng bổ sung các tiện ích Material mới và công cụ theo dõi mạng, nâng cao trải nghiệm phát triển ứng dụng.
Vào ngày 3 tháng 3 năm 2021, Google đã ra mắt Flutter 2.0 trong sự kiện Flutter Engage Online, đánh dấu một bước tiến lớn với việc sử dụng Dart 2.0 Bản phát hành này mang đến nhiều thay đổi đột phá, đồng thời gây ra một số vấn đề với các gói bên ngoài Để hỗ trợ người dùng, nhóm Flutter đã cung cấp hướng dẫn và công cụ nhằm giảm thiểu những khó khăn này.
Vào ngày 8 tháng 9 năm 2021, Google đã phát hành Dart 2.14 và Flutter 2.5, mang đến những cải tiến đáng kể cho Android Đồng thời, Dart cũng đã nhận được hai bản cập nhật mới.
Phiên bản ổn định mới nhất của Flutter là 3.0.1, vừa được cập nhật vào năm nay -
2022 và phiên bản Dart là 2.17.1
Flutter hướng tới 3 đối tượng chính:
Flutter giúp các developer rút ngắn thời gian phát triển ứng dụng, đồng thời tăng tốc độ và giảm chi phí cũng như nguồn nhân lực, nhờ khả năng chạy trên cả hai nền tảng iOS và Android Hơn nữa, Flutter đang mở rộng sang các nền tảng Desktop và Web, mặc dù hiện tại Web vẫn chỉ đang trong giai đoạn debug với một số thư viện cơ bản, chưa hỗ trợ các thư viện riêng của Android và iOS như Vibration.
Flutter là một framework UI di động do Google phát triển, nổi bật với các thành phần UI đẹp mắt và đa dạng, giúp các designer dễ dàng thay đổi thiết kế ứng dụng mà không gặp khó khăn Khái niệm "Mọi thứ đều là Widget" thể hiện rõ đặc tính nổi bật của Flutter, cho phép người dùng định hình giao diện ứng dụng thông qua việc kết nối các widget cha con một cách linh hoạt Với mã nguồn mở miễn phí và các thư viện cơ bản, Flutter mang đến cho designer một công cụ mạnh mẽ để sáng tạo và phát triển ứng dụng một cách hiệu quả.
- Với các User: Flutter giúp giao diện trở nên sinh động, bắt mắt, tương tác và hiệu năng cũng rất đáng để ý
Flutter sử dụng ngôn ngữ Dart – một ngôn ngữ lập trình đa mục đích, được phát triển bởi Google
Dart chịu ảnh hưởng mạnh mẽ từ Java, vì vậy nếu bạn đã quen thuộc với ngôn ngữ lập trình Java, việc học và sử dụng Dart sẽ trở nên dễ dàng hơn nhờ vào tính tương đồng giữa hai ngôn ngữ này Cả Dart và Java đều là ngôn ngữ lập trình hướng đối tượng (OOP), sở hữu các đặc tính như đóng gói (Encapsulation), đa hình (Polymorphism), kế thừa (Inheritance) và trừu tượng (Abstraction) Hơn nữa, Dart sử dụng cú pháp kiểu C (C-style syntax), giúp lập trình viên dễ dàng tiếp cận và làm quen với ngôn ngữ này.
Công dụng của Flutter
Flutter cung cấp nhiều module tính năng cho phép người dùng tùy chỉnh theo nhu cầu cá nhân Nền tảng này giúp tăng năng suất làm việc, cho phép phát triển phần mềm nhanh chóng và dễ dàng Sau khi sửa đổi mã nguồn, người dùng chỉ cần chờ một thời gian ngắn để xem kết quả và cập nhật ứng dụng Đặc biệt, với tính năng HotReload, việc cập nhật thay đổi giao diện diễn ra ngay lập tức sau khi hoàn tất quá trình build.
Giao diện người dùng của Flutter nổi bật với tính đẹp mắt và linh hoạt, cho phép tạo ra nhiều loại widget khác nhau cũng như kết hợp chúng thành các widget phức hợp Nhờ vào hai thành phần quan trọng là SDK và Framework, các ứng dụng phát triển từ Flutter đạt hiệu suất làm việc nhanh chóng và hiệu quả.
Flutter hoàn toàn miễn phí, mang lại lợi ích lớn cho người dùng Với các tính năng đa dạng, Flutter phù hợp cho cả người mới bắt đầu và những lập trình viên đã có kinh nghiệm với các nền tảng khác.
Điểm khác biệt của Flutter
Flutter không sử dụng Webview và OEM widget để hiển thị Thay vào đó, Flutter sử dụng engine render riêng để vẽ các widget với độ tối ưu cao
Thêm 1 điểm cộng nữa là, Flutter chỉ có 1 lớp mã code C/C++ nhưng hầu hết các thành phần systems lại được viết bằng Dart nên Devloper dễ dàng đoc và sửa đổi chúng Điều này giúp developer có thể truy cập nhiều hơn trong system
Hình 3.3-1 Cấu trúc Engine của Flutter
Cấu trúc cơ bản của một ứng dụng Flutter
Một ứng dụng Flutter sẽ bao gồm các khái niệm chính sau :
3.4.1.1 Widget Đầu tiên, cũng là thứ quan trọng và cốt lõi nhất của Flutter, là Widget Mọi thứ trong Flutter đều là Widget Nó cũng tương tự như view trong Android
Widget là thành phần cơ bản nhất trong giao diện người dùng của ứng dụng Flutter, tạo nên toàn bộ trải nghiệm người dùng Ứng dụng được xem như một Widget cấp cao, hay còn gọi là top-level Widget, bao gồm một hoặc nhiều widget con Mỗi widget con lại có thể chứa các widget khác, tạo nên cấu trúc phức tạp cho giao diện.
14 nhiều widget con khác nữa Cấu trúc của một ứng dụng Flutter, thực chất là hình dạng cây với rễ và nhánh đều là những widget
Hình 3.4-1 Cấu trúc Flutter theo Widget Ở sơ đồ trên, ta có thể hiểu như sau:
▪ MyApp : một widget được tạo ra bằng widget gốc của Flutter – Material Appp
▪ Material App : có các thược tính của màn hình Home và mô tả giao diện của người dùng Nó được tạo ra bởi một widget khác nữa, là MyHomePage
▪ MyHomePage : được tạo bởi một widget khác của Flutter – Scalfold
▪ Scalfold có 2 thuộc tính – body(Center) và appBar
• body : chứa giao diện chính
• appBar : chứa header – phần đầu của ứng dụng
Trong Flutter, có 4 nhóm widget chính :
▪ Các widget giao diện đặc thù theo từng nền tảng -Platform widgets
▪ Các widget hỗ trợ bố trí giao diện - Layout widgets
▪ Các widget quản lý trạng thái - State maintenance widgets
▪ Các widget cơ bản độc lập với nền tảng - Platform independent / basic widgets
▪ Ngoài ra còn có cách phân nhóm widget riêng cho Android (Material widgets) và widget riêng cho iOS(Cupertino widgets)
Một widget có thể được tạo ra từ một hoặc nhiều widget khác thông qua việc sử dụng các layout widget.
Một số layout phổ biến:
▪ Container : Một hình chủ nhật sử dụng BoxDecoration widgets với background, border và shadow
▪ Center : căn giữa các widget
▪ Row : Sắp xếp widget theo hàng ngang
▪ Column : Sắp xếp các widget theo hàng dọc
▪ Stack : Sắp xếp các widget lên trên cùng
Trong Flutter, mọi widget đều kế thừa từ Stateless hoặc Stateful Widget
▪ Stateless : không cập nhật thay đổi giao diện
▪ Stateful : cập nhật thay đổi giao diện, tráng thái đồng thời
Gesture trong Flutter cho phép xử lý các cử chỉ của người dùng trên thiết bị di động, bao gồm các hành động như vuốt, chạm và lắc, tương tự như cách bắt sự kiện trong Android.
Một số loại Gesture phổ biến : o Tap o Double-Tap o Drag o Press o Click
StatelessWidget và StatefulWidget của Flutter đều xuất phát từ việc quản lý State – trạng thái của ứng dụng
Việc quản lý trạng thái của ứng dụng là vô cùng cần thiết
State-Trạng thái của ứng dụng chia làm hai loại dựa vào thời gian tồn tại trong ứng dụng :
Ephemeral (trạng thái ngắn hạn) là những trạng thái chỉ tồn tại trong chốc lát, như animation hoặc trạng thái của một trang tìm kiếm sản phẩm, và được quản lý qua StatefulWidget của Flutter Ngược lại, App State (trạng thái ứng dụng) kéo dài trong suốt thời gian sử dụng ứng dụng, bao gồm các bài báo và thông tin tài khoản Flutter hỗ trợ quản lý App State thông qua scoped_model, cho phép truyền tải dữ liệu từ widget cha đến các widget con và cháu để hiển thị và lấy thông tin.
Hình 3.4-3 Layout trong FLutter Phần này được tách riêng ra với Widget để nói rõ hơn về Layout
Layout là một loại widget, nhưng nhiệm vụ của chúng là nơi để bố trí, sắp xếp các widget con, từ đó cấu thành nên giao diện cho Flutter
Flutter offers a variety of layout options, including Center, Align, and Container The primary layout types are categorized into two groups: Single Child Widgets, which contain only one child widget, and Multiple Child Widgets, which can hold multiple child widgets.
Hình 3.4-4 Sing Child Widget trong FLutter
Loại layout chỉ có duy nhất một widget con, với chức năng bố trí bố cục nhất định
Thích hợp cho một số widget có tính ứng dụng cao và mang một chức năng duy nhất như Button, Label, …
Một số loại phổ biến như :
Hình 3.4-5 Multiple Child Widget trong Flutter Loại widget layout này sẽ cho phép có nhiều hơn một widget con
Một số widget layout dạng này được sử dụng phổ biến
3.4.5 Một số phần quan trọng khác
Trong đồ án lần này, chúng em đã nghiên cứu và áp dụng nhiều phần quan trọng, trong đó có Navigator & Routing, giúp điều hướng và chuyển hướng giữa các màn hình một cách hiệu quả.
20 o Animation : Chuyển động trong ứng dụng Flutter o Các Package, các Dependencies : Gói, thư viện cùng phiên bản phụ thuộc của chúng o RestAPI với các giao thức HTTP, lệnh Future, ……
KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU
Nhu cầu thực tế
Hiện nay, sự phát triển của công nghệ đã dẫn đến sự bùng nổ của các ứng dụng mạng xã hội trên cả nền tảng web và di động Mỗi ứng dụng được thiết kế để kết nối mọi người, giúp họ kết bạn, liên lạc với bạn bè và gia đình, đồng thời thu hẹp khoảng cách giữa những người xa lạ chỉ qua một màn hình điện thoại.
Ngày nay, nhu cầu tìm kiếm bạn bè, người tâm sự hoặc bạn đời thông qua các ứng dụng di động ngày càng tăng Nhiều ứng dụng như Tinder đã ra đời để đáp ứng nhu cầu này, nhưng không ít bạn trẻ vẫn sử dụng chúng một cách sai lệch.
Chúng em đã phát triển ứng dụng Familiar Stranger – Người Lạ Thân Quen để đáp ứng nhu cầu kết bạn và chia sẻ những vấn đề khó nói với những người sẵn sàng lắng nghe và cảm thông Thông tin của người dùng được bảo mật hoàn toàn cho đến khi họ chủ động chia sẻ UID với người khác Ứng dụng còn tích hợp tính năng nghe nhạc trong phòng chat, giúp người dùng thư giãn và bộc lộ cảm xúc Dù một số chức năng vẫn còn chưa hoàn thiện, chúng em cam kết sẽ tiếp tục cải tiến và phát triển ứng dụng này.
Khảo sát bằng Google Form
Kết thúc khảo sát diễn ra vào 22:00 ngày 01 tháng 4 năm 2022
- Số lượng người tham gia khảo sát : 36 người (thấp hơn so với dự kiến)
- Link khảo sát : Khảo sát các ứng dụng trò chuyện
Bài khảo sát chủ yếu tập trung vào đối tượng sinh viên, với độ tuổi từ 18 đến 24 chiếm ưu thế Đặc biệt, số lượng nam sinh tham gia khảo sát chiếm đa số, cho thấy sự quan tâm lớn từ nhóm này.
Hình 4.2-3 Tỷ lệ giới tính khảo sát Hình 4.2-2sasdfsdsdfasadfsdafsd Hình 4.2-1 Độ tuổi khảo sát
22 o Câu 3: Messenger của Facebook(Meta) vẫn đang là nền tảng được sử dụng để trò chuyện nhiều nhất giữa những người bạn với nhau
Các ứng dụng nhắn tin phổ biến thường được chia thành hai luồng ý kiến rõ rệt về giao diện: một số người thích và một số người không thích Sự phân chia này chủ yếu dựa trên những lý do cá nhân khác nhau.
Khảo sát cho thấy nhiều người vẫn hoài nghi về độ bảo mật của các ứng dụng trò chuyện hiện nay Nhiều người lo ngại rằng các tin nhắn riêng tư, mặc dù không vi phạm chuẩn mực đạo đức và xã hội, vẫn có khả năng bị lộ ra hoặc tài khoản bị hack.
Khảo sát cho thấy có nhu cầu cao về một ứng dụng bảo mật hơn, không bị lạm dụng như Tinder Người dùng mong muốn giao diện có thể chuyển đổi giữa chế độ sáng và tối để phù hợp với sở thích cá nhân Nhóm phát triển sẽ ghi nhớ ý kiến này để cải thiện sản phẩm.
24 triển giao diện tối và sáng song song Trước mắt nhóm sẽ chỉ hướng đến xây dựng một app hoàn chỉnh trước
Khảo sát cho thấy 2/3 người tham gia ủng hộ việc bổ sung phần nhạc cho phòng chat của ứng dụng, cho phép âm nhạc phát đồng bộ trên hai thiết bị.
Trong khảo sát về tính năng báo cáo và khiếu nại người dùng của ứng dụng, mọi người đều đồng ý rằng việc này rất cần thiết để ngăn chặn các hành vi tiêu cực, phá hoại và xúc phạm Việc kết hợp giữa trò chuyện và phát nhạc trong ứng dụng cũng được xem là một cách hiệu quả để tạo ra môi trường tích cực hơn cho người dùng.
25 phạm danh dự nhân phẩm hay vi phạm các chuẩn mực đạo đức xã hội được diễn ra
Hình 4.2-9 Độ tin cậy của ứng dụng
Usecase , đặc tả usecase
STT Tên nhóm Tên usecase
Nhóm chức năng ‘Đăng nhập, đăng ký’ Đăng nhập
4 Nhóm chức năng ‘Hồ sơ người dùng’ Chỉnh sửa hồ sơ
Nhóm chức năng ‘Bạn bè’
7 Mời bạn bè vào phòng chat
10 Xem hồ sơ bạn bè
Nhóm chức năng ‘Chat ẩn danh’
13 Báo cáo bạn ghép cặp
15 Nhóm chức năng ‘Cài đặt’ Chỉnh sửa cài đặt
Bảng 4-1 Danh sách chức năng
4.3.3 Đặc tả chi tiết (Activity, Sequence Diagram)
Tên chức năng Đăng nhập
Mô tả Đăng nhập cho User
Dòng sự kiện 1 User khởi động app, tiến hành vào trang đăng nhập
2 Hệ thống hiển thị màn hình đăng nhập
3 User nhập thông tin nhấn SIGN IN
4 Hệ thống kiểm tra thông tin hợp lệ, thông báo đăng nhập thành công, hiển thị màn hình chính của app
Dòng sự kiện khác 1 Hệ thống kiểm tra thông tin không hợp lệ, thông báo đăng nhập không thành công Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : chưa đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User đăng nhập và sử dụng tính năng của app Điểm mở rộng Không
Bảng 4-2 Đặc tả 'Đăng nhập'
Hình 4.3-2 Sơ đồ hoạt động 'Đăng nhập'
Hình 4.3-3 Sơ đồ tuần tự 'Đăng nhập'
Tên chức năng Đăng ký
Mô tả Đăng ký cho User mới sử dụng
Dòng sự kiện 1 User nhấn vào phím SIGN UP để hiển thị màn hình đăng ký
2 Hệ thống hiển thị màn hình /đăng ký
3 User nhập thông tinmuốn đăng ký, nhấn REGISTER
4 Hệ thống kiểm tra thông tin hợp lệ, thông báo đăng ký/ đăng nhập thành công, hiển thị màn hình chính của app
Dòng sự kiện khác 2 Hệ thống kiểm tra thông tin không hợp lệ, thông báo đăng ký không thành công Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : chưa đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User đăng ký và sử dụng tính năng của app Điểm mở rộng Không
Bảng 4-3 Đặc tả 'Đăng ký'
Hình 4.3-4 Sơ đồ hoạt động 'Đăng ký'
Hình 4.3-5 Sơ đồ tuần tự 'Đăng ký'
Tên chức năng Quên mật khẩu
Mô tả Reset mật khẩu và đnagw nhập vào app khi User quên mật khẩu
Dòng sự kiện 1 User nhấn vào Forgot Password để hiển thị màn hình quên mật khẩu
2 Hệ thống hiển thị màn hình quên mật khẩu
3 User SĐT đã đăng ký, muốn đăng ký để reset mật khẩu
4 Hệ thống kiểm tra SĐT hợp lệ, gửi mã xác minh, yêu cầu nhập mã
5 User nhập mã xác minh
6 Hệ thống kiểm tra mã xác minh hợp lệ, thống báo đnagw nhập thành công, reset mật khẩu về 000000
Dòng sự kiện khác 3 Hệ thống kiểm tra SĐT không hợp lệ, thông báo sai thông tin
4 Hệ thống kiểm tra mã xác minh không trùng khớp, thông báo sai mã xác minh
Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : chưa đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User đăng nhập và sử dụng tính năng của app Điểm mở rộng Không
Bảng 4-4 Đặc tả 'Quên mật khẩu'
Hình 4.3-6 Sơ đồ hoạt động 'Quên mật khẩu'
Hình 4.3-7 Sơ đồ hoạt động 'Quên mật khẩu'
Tên chức năng Chỉnh sửa hồ sơ
Mô tả Chỉnh sửa hồ sơ cho User
Dòng sự kiện 1 User chọn mục Profile bên Slider menu để vào giao diện Hồ sơ
2 Hệ thống hiển thị giao diện hồ sơ người dùng
3 Người dùng thực hiện các thay đổi : Avatar, tên, tuổi, giới tính, nhấn SAVE
4 Hệ thống kiểm tra thông tin hợp lệ, cập nhật thông tin người dùng, cập nhật lại giao diện Hồ sơ
Dòng sự kiện khác 5 Hệ thống kiểm tra thông tin không hợp lệ, thông báo lỗi Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận thay đổi của User về hồ sơ của mình Điểm mở rộng Không
Bảng 4-5 Đặc tả 'Chỉnh sửa hồ sơ'
Hình 4.3-8 Sơ đồ hoạt động 'Chỉnh sửa hồ sơ'
Hình 4.3-9 Sơ đồ tuần tự 'Chỉnh sửa hồ sơ'
Tên chức năng Chỉnh sửa cài đặt
Mô tả Chỉnh sửa cài đặt App cho User
Dòng sự kiện 5 User chọn mục Setting bên Slider menu để vào giao diện Cài đặt
6 Hệ thống hiển thị giao diện cài đặt
7 Người dùng thực hiện các thay đổi
8 Hệ thống cập nhật cài đặt của người dùng cho App
Dòng sự kiện khác Không
Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận thay đổi của User về cài đặt của App Điểm mở rộng Không
Bảng 4-6 Đặc tả 'Chỉnh sửa cài đặt'
Hình 4.3-10 Sơ đồ hoạt động 'Chỉnh sửa cài đặt'
Hình 4.3-11 Sơ đồ tuần tự 'Chỉnh sửa cài đặt'
Tên chức năng Ghép cặp
Mô tả Ghép cặp cho hai User với nhau vào phòng chat
Dòng sự kiện 1 User bấm vào biểu tượng PLAY trên màn hình để bắt đầu ghép cặp
2 Hệ thống bắt đầu đếm giờ, đưa User vào hàng chờ 1 1
3 Hệ thống thông báo tìm thấy người ghép cặp, xác nhận ghép cặp?
4 User xác nhận ghép cặp
5 Hệ thống đưa hai người vào một phòng chat
Dòng sự kiện khác 6 User từ chối ghép cặp
7 Hệ thống dừng đếm giờ, huỷ ghép cặp, đẩy người dùng ra khỏi hàng đợi
Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User đăng nhập và sử dụng tính năng của app Điểm mở rộng Không
Bảng 4-7 Đặc tả ' Ghép cặp'
Hình 4.3-12 Sơ đồ hoạt động 'Ghép cặp'
Hình 4.3-13 Sơ đồ tuần tự 'Ghép cặp'
Mô tả Chat giữa hai User với nhau trong phòng chat
Dòng sự kiện 1 User nhập tin nhắn/hình ảnh để gửi cho người được ghép cặp
2 Hệ thống tải hình ảnh và tin nhắn lên, lấy URL từ sever để load hình ảnh nếu có
3 Hệ thống hiển thị tin nhắn của User cho người được ghép cặp
Dòng sự kiện khác Không
Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User gửi tin nhắn cho người được ghép cặp Điểm mở rộng Không
Hình 4.3-14 Sơ đồ hoạt động 'Chat'
Hình 4.3-15 Sơ đồ tuần tự 'Chat'
Tên chức năng Nghe nhạc
Mô tả Nghe nhạc cho cả hai bên User
Dòng sự kiện 1 User chuyển snag giao diện Media, chọn bài hát thêm vào danh sách phát từ danh sách bài hát có sẵn
2 User bấm Play để bắt đầu phát nhạc
3 Hệ thống ghi nhận, phát bản nhạc ở đầu danh sách cho cả hai
5 Hệ thống tạm ngừng phát nhạc
7 Hệ thống chuyển snag bài kế tiếp, xoá bài hát đầu tiên khỏi hàng đợi
Dòng sự kiện khác Không
Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép 2 user nghe nhạc đồng bộ trên điện thoại Điểm mở rộng Không
Bảng 4-9 Đặc tả 'Nghe nhạc'
Hình 4.3-16 Sơ đồ hoạt động 'Nghe nhạc'
Hình 4.3-17 Sơ đồ tuần tự 'Nghe nhạc'
Tên chức năng Khiếu nại
Mô tả Khiếu nại Người được ghép cặp cùng vì một lý do nào đó
Dòng sự kiện 1 User nhấn vào mục Report ở menu bên góc màn hình
2 Hệ thống hiển thị giao diện Khiếu nại
3 User chọn lý do khiếu nại, bấm SEND
4 Hệ thống ghi nhận, lưu đoạn chat lên sever, đồng thời đá cả hai ra ngoài màn hình chính, chính thức xoá phòng chat
1 User huỷ khiếu nại, bấm CANCEL
2 Hệ thống trở về màn hình ChatRoom Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận đơn khiếu nại, đưa User thoát khỏi phòng chat về màn hình chính Điểm mở rộng Không
Bảng 4-10 Đặc tả 'Khiếu nại'
Hình 4.3-18 Sơ đồ hoạt động 'Khiếu nại'
Hình 4.3-19 Sơ đồ tuần tự 'Khiếu nại'
Tên chức năng Thêm bạn bè
Mô tả Thêm bạn bè cho User
Dòng sự kiện 1 User bấm vào mục Add Friend
2 Hệ thống hiển thị hộp thoại thêm bạn bè bằng UID
3 User nhập UID của bẹn bè
4 Hệ thống kiểm tra tồn tại, thông báo thêm bạn bè thành công
Dòng sự kiện khác 1 Hệ thôg skieemr tra không tồn tại, thông báo
54 lỗi Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User thêm bạn bè bằng UID Điểm mở rộng Không
Bảng 4-11 Đặc tả 'Thêm bạn bè'
Hình 4.3-20 Sơ đồ hoạt động 'Thêm bạn bè'
Hình 4.3-21 Sơ đồ tuần tự 'Thêm bạn bè'
Tên chức năng Tìm kiếm bạn bè
Mô tả Tìm kiếm bạn bè cho User
Dòng sự kiện 1 User chọn mục Friend List ở menu Slider bên
2 Hệ thống hiển thị giao diện danh sách bạn bè
3 User nhập UID/Tên muốn tìm kiếm, nhấn biểu tượng kính lúp
4 Hệ thống ghi nhận, kiểm tra, lọc ra danh sách bạn bè trùng khớp với từ khoá cần tìm
Dòng sự kiện khác 8 Hệ thống không tìm thấy ai trúng khớp, không hiển thị bạn bè nào cả
9 Tìm kiếm rỗng -> Hệ thống hiển thị danh sách tất cả bạn bè
Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User tìm kiếm bạn bè Điểm mở rộng Không
Bảng 4-12 Đặc tả 'Tìm kiếm bạn bè'
Hình 4.3-22 Sơ đồ hoạt động 'Tìm kiếm bạn bè'
Hình 4.3-23 Sơ đồ tuần tự 'Tìm kiếm bạn bè'
4.3.3.12 Xem hồ sơ bạn bè
Tên chức năng Xem hồ sơ bạn bè
Mô tả Xem hồ sơ bạn bè của User
Dòng sự kiện 5 User chọn mục Friend List ở menu Slider bên
6 Hệ thống hiển thị giao diện danh sách bạn bè
7 User bấm vào một người bạn bất kỳ
8 Hệ thống chuyển sang giao diện chi tiết bạn bè Dòng sự kiện khác Không
Yêu cầu đặc biệt Đã kết bạn với ít nhất một người
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User xem thông tin của bạn bè Điểm mở rộng Không
Bảng 4-13 Đặc tả 'Xem hồ sơ bạn bè'
Hình 4.3-24 Sơ đồ hoạt động 'Xem thông tin bạn bè' Sequence Diagram
Hình 4.3-25 Sơ đồ hoạt động 'Xem thông tin bạn bè'
Tên chức năng Khiếu nại bạn bè
Mô tả Khiếu nại bạn bè của User
Dòng sự kiện 1 User bấm vào mục số 3 – Report trong màn hình chi tiết hồ sơ bạn bè
2 Hệ thống hiển thị giao diện Khiếu nại
3 User chọn lý do khiếu nại, bấm SEND
4 Hệ thống ghi nhận, lưu phiếu khiếu nại lên sever, đồng thời unfriend người bạn đó
Dòng sự kiện khác Không
Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User khiếu nại và xoá bạn bè Điểm mở rộng Không
Bảng 4-14 Đặc tả 'Khiếu nại bạn bè'
Hình 4.3-26 Sơ đồ hoạt động 'Khiếu nại bạn bè'
Hình 4.3-27 Sơ đồ tuần tự 'Khiếu nại bạn bè'
Tên chức năng Đăng ký
Mô tả Đăng ký cho User mới sử dụng
Dòng sự kiện 1 User bấm vào mục số 2 – Delete trong màn hình chi tiết hồ sơ bạn bè
2 Hệ thống hiển thị hộp thoại Xác nhận xoá bạn
3 User xác nhận xoá bạn bè
4 Hệ thống ghi nhận, xoá người đó khỏi danh sách bạn bè, trở về màn hình danh sách bạn bè, tải lại danh sách bạn bè
1 User huỷ xoá bạn bè
2 Hệ thống tắt hộp thoiaj, không thay đổi gì cả Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User xoá bạn bè Điểm mở rộng Không
Bảng 4-15 Đặc tả 'Xoá bạn bè'
Hình 4.3-28 Sơ đồ hoạt động 'Xoá bạn bè'
Hình 4.3-29 Sơ đồ tuần tự 'Xoá bạn bè'
4.3.3.15 Mời bạn bè vào phòng chat
Tên chức năng Mời bạn bè vào phòng chat
Mô tả Mời bạn vào phòng chat cho User
Dòng sự kiện 1 User bấm mục số 1 – Invite để mời bạn bè vào phòng chat
2 Hệ thống hiển thị thông báo chờ, đồng thời bên bạn bè nhận được một htoong báo đồng ý lời mời
3 Bạn của User xác nhận lời mời
4 Hệ thống thông báo thành công, đẩy hai người vào phòng chat
Dòng sự kiện khác 10 Bạn của User từ chối lời mời
11 Hệ thống báo không đồng ý
12 Hệ thống báo hết thời gian yêu cầu Yêu cầu đặc biệt Không
Tình trạng hệ thống trước khi thực hiện
Actor : User Condition : đã đăng nhập vào App
Tình trạng hệ thống sau khi thực hiện
Hệ thống xác nhận , cho phép User mời bạn của mình vào phòng chat Điểm mở rộng Không
Bảng 4-16 Đặc tả 'Mời bạn bè vào phòng chat'
Hình 4.3-30 Sơ đồ hoạt động 'Mời bạn bè vào phòng chat'
Hình 4.3-31 Sơ đồ tuần tự 'Mời bạn bè vào phòng chat’
Sơ đồ lớp
4.4.1 Danh sách chi tiết đối tượng và quan hệ
STT Tên Collection Ý nghĩa/Ghi chú
1 User Người dùng ứng dụng
2 Setting Cài đặt cho từng người dùng
3 Media Các bài nhạc của ứng dụng
4 Friend Bạn bè của người dùng
5 Message Tin nhắn giữa các người dùng với nhau
6 Report Phiếu Report giữa các người dùng với nhau Bảng 4-17 Danh sách chi tiết các Collection trong MongoDB
4.4.2 Mô tả chi tiết từng lớp đối tượng
STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú
1 id String ObjectId ID người dùng
2 phoneNumber String Số điện thoại đăng ký tài khoản
3 password String Mật khẩu tài khoản
4 listfriend ArrayList Danh sách bạn bè
5 avatarID String Avatar của người dùng
6 age String Tuổi của người dùng
7 sex String Giới tính của người dùng
STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú
1 userID String ObjectId ID người dùng
2 sound Boolean Cài đặt âm thanh
3 notification Boolean Cài đặt thông báo
4 vibration Boolean Cài đặt rung
5 status Boolean Cài đặt trạng thái tài khoản
STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú
1 id String ObjectId ID của bài nhạc
2 name String Tên bài nhạc
3 avatarUrl String Ảnh bìa của bài nhạc
4 link String Đường dẫn của bài nhạc
5 singer String Ca sĩ của bài nhạc
6 select Boolean Xác nhận bài nhạc đã được thêm vào danh sách ph Bảng 4-20 Collection 'Media'
STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú
1 senderId String ObjectId ID người gửi
2 avatar String Avatar người gửi
3 time String Thời gian gửi
4 isImage Boolean Xác nhận là hình ảnh hoặc không
5 text String Chi tiết tin nhắn
STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú
1 userId String ObjectId ID bạn bè
2 username String Tên bạn bè
3 avatarUrl String Đường dẫn avatar của bạn bè
4 age String Tuổi của bạn bè
5 sex String Giới tính của bạn bè
STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú
1 id String ObjectId Id của phiếu khiếu nại
2 userId String Id của người tố cáo
3 friendId String Id của người bị tố cáo
4 content String Nội dung tố cáo
THIẾT KẾ HỆ THỐNG
Kiến trúc hệ thống
App Familiar Stranger tuân theo mô hình Client-Sever
Trong mô hình Client-Server, Client là bên gửi yêu cầu, trong khi Server đáp ứng yêu cầu đó nếu thông tin có sẵn trong cơ sở dữ liệu.
Mô hình Client-Server cho phép máy chủ chấp nhận các yêu cầu hợp lệ từ nhiều nguồn khác nhau trên Internet và gửi kết quả về máy khách Máy tính hoặc điện thoại hoạt động như máy khách khi gửi yêu cầu và chờ phản hồi Để đảm bảo giao tiếp giữa máy khách và máy chủ, cần có một giao thức nhất định, ví dụ như HTTPS, TCP/IP, FTP Trong ứng dụng Familiar Stranger, giao thức HTTP được sử dụng thông qua NodeJS Server.
Hình 5.1-1 Kiến trúc hệ thống
Server được xây dựng từ NodeJS Server và WebSocket Socket.IO, một module của NodeJS, nhằm phát triển ứng dụng NodeJS real-time Socket.IO cung cấp hai thành phần chính: socket server để quản lý các chức năng phía server và socket client để điều khiển phía client Khi client muốn kết nối tới Socket.IO server, nó sẽ gửi yêu cầu tới server để thiết lập kết nối.
Khi thực hiện "handshake HTTP request", server sẽ phân tích yêu cầu với các thông tin cần thiết trong quá trình kết nối Nó tìm cấu hình của middleware đã được đăng ký và thực thi chúng trước khi phát sinh sự kiện kết nối Khi kết nối thành công, listener cho sự kiện kết nối sẽ được kích hoạt, tạo ra một instance mới của socket, đóng vai trò như định danh cho từng client kết nối.
Giao diện tổng quan
Hình 5.2-1 Màn hình đăng nhập
Hình 5.2-2 Màn hình đăng ký
5.2.3 Màn hình quên mật khẩu
Hình 5.2-3 Màn hình quên mật khẩu
Hình 5.2-5 Màn hình hồ sơ cá nhân
Hình 5.2-6 Màn hình cài đặt
Hình 5.2-7 Màn hình danh sách bạn bè
Hình 5.2-8 Màn hình thông tin bạn bè
Hình 5.2-9 Màn hình Phòng chat
Hình 5.2-10 Màn hình nghe nhạc
Hình 5.2-11 Màn hình khiếu nại
PHÁT TRIỂN VÀ CÀI ĐẶT ỨNG DỤNG
Môi trường phát triển ứng dụng
- Hệ quản trị cơ sở dữ liệu: MongoDB
- Công cụ chạy ứng dụng: Visual Studio Code
- Công cụ khởi tạo và kiểm soát máy ảo : Android Studio – Android 8.1 Oreo, Smartphone Techno Pova 2
Môi trường triển khai ứng dụng
- Yêu cầu có kết nối internet và đã cài đặt app để sử dụng
