Đồ án tìm hiểu flutter và xây dựng ứng dụng nghe nhạc và chia sẻ bài hát

GIỚI THIỆU VỀ FLUTTER

Giới thiệu về framework Flutter

Flutter was developed to address common challenges in app development, specifically Fast Development and Native Performance While React Native focuses solely on fast development and native languages ensure optimal performance for each platform, Flutter successfully combines both capabilities.

Phiên bản đầu tiên của Flutter, mang tên "Sky", được giới thiệu tại hội nghị nhà phát triển Dart 2015 và hoạt động trên hệ điều hành Android Flutter hỗ trợ các ứng dụng chạy với hiệu suất 120 khung hình trên giây.

Tại hội nghị Google Developer Days diễn ra ở Thượng Hải, Google đã chính thức công bố phiên bản Flutter Release Preview 2, đánh dấu phiên bản lớn cuối cùng trước khi phát hành Flutter 1.0.

- Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự kiện

- Flutter Live, là phiên bản "ổn định" đầu tiên framework này

Flutter được viết chia làm hai tầng:

Tầng Framework trong ứng dụng Flutter sử dụng ngôn ngữ Dart, cho phép lập trình viên xây dựng và tùy chỉnh mã nguồn một cách linh hoạt Các đoạn mã này có thể được chỉnh sửa, giúp ứng dụng được cá nhân hóa theo nhu cầu của người phát triển Quan trọng hơn, tầng này hỗ trợ thay đổi mã nguồn ngay tại thời điểm biên dịch, nâng cao khả năng tùy biến cho ứng dụng.

Tầng thứ hai của Flutter, được viết bằng ngôn ngữ C++, chứa các công cụ hỗ trợ ứng dụng trong quá trình chạy Tại đây cũng có máy ảo Dart VM, cho phép ứng dụng chạy song song với mã nguồn.

13 chính như một phần của ứng dụng Máy ảo Dart VM có ba nhiệm vụ chính bao gồm:

Ứng dụng trung gian giữa mã nguồn Dart và thiết bị phần cứng hoặc phần mềm bên ngoài giúp tối ưu hóa hiệu suất Nó thực hiện việc thông dịch mã Dart thông qua hai phương thức chính: JIT (Just in Time) và AOT (Ahead of Time), mang lại sự linh hoạt và hiệu quả cho quá trình phát triển ứng dụng.

Thực thi mã đã được thông dịch hoặc biên dịch là một phần quan trọng trong việc cung cấp hệ thống runtime, bao gồm bộ thu gom rác (garbage collector) và các thư viện cần thiết khác.

→ Máy ảo Dart VM chịu trách nhiệm lớn nhất trong việc quản lý các runtime system, hỗ trợ debugging hoặc hot reload cho các ứng dụng viết bằng Flutter

2.2.3 Ưu điểm của Flutter so với các framework khác:

- Flutter là bộ SDK đa nền tảng, hỗ trợ cả Android, iOS và web

Flutter hỗ trợ tính năng hot reload, cho phép các sửa đổi trong mã nguồn được cập nhật trực tiếp lên ứng dụng đang chạy Đặc biệt, tính năng stateful hot reload giúp cập nhật ngay lập tức các thay đổi mà không cần khởi động lại ứng dụng, đồng thời giữ nguyên trạng thái hiện tại Tính năng này mang lại lợi ích lớn, giúp các nhà phát triển tiết kiệm thời gian đáng kể trong quá trình phát triển ứng dụng.

Ứng dụng phát triển bằng Flutter có khả năng hiển thị lên đến 60FPS hoặc 120FPS tùy thuộc vào thiết bị, mang lại hiệu ứng chuyển cảnh mượt mà và cải thiện trải nghiệm người dùng.

Một đối thủ đáng chú ý của Flutter là React Native, một framework do Facebook phát triển Giống như Flutter, React Native cho phép lập trình viên sử dụng JavaScript để xây dựng ứng dụng di động đa nền tảng cho cả Android và iOS.

So sánh Flutter và React Native

Khả năng tái sử dụng

Flutter cho phép Overwriting code Hỗ trợ tốt cho việc tái sử dụng về sau

React Native cho phép bạn sử dụng lại code, nhưng điều này lại bị giới hạn trong một vài components cơ bản

Sử dụng Flutter, các nhà phát triển có thể thực hiện mọi tác vụ trên cùng một màn hình mà không cần chuyển đổi giữa mã và chế độ thiết kế, giúp tiết kiệm thời gian và cải thiện trải nghiệm phát triển.

Sử dụng React Native cần có thêm JSX hoặc XML để tạo giao diện hay các công cụ đặc biệt để tạo layout

Cài đặt môi trường phát triển

Việc cài đặt Flutter diễn ra nhanh chóng, tiện lợi với sự hỗ trợ của câu lệnh flutter doctor -v giúp chẩn đoán lỗi trong quá trình cài đặt

Cài đặt môi trường phát triển React Native trông khá loằng ngoằng và khó khăn đối với các lập trình viên mới

Các thư viện hỗ trợ

Có nhiều các third-party packages đang được sử dụng và đang ngày càng được phát triển, và chúng thực sự rất hữu dụng

Kể từ khi React Native trở nên phổ biến, nhiều gói thư viện bên thứ ba đã được phát triển và được sử dụng rộng rãi trong các ứng dụng Sự phổ biến này thể hiện qua số lượng người dùng ngày càng tăng.

Flutter đang ngày càng gia tăng Đặc biệt nhờ sự hậu

React Native có lượng developer sử dụng đang nhiều hơn bởi vì lượng developer sử

15 thuẫn tích cực từ phía Google dụng JavaScript rất dễ dàng để sử dụng với các thư viện của React

Cách viết tài liệu của Google đơn giản, dễ hiểu nên việc tài liệu hóa cho Flutter cơ bản là hiệu quả

Việc tìm kiếm tài liệu có thể gặp khó khăn do phụ thuộc vào các công cụ phát triển bên ngoài, yêu cầu người dùng phải tìm kiếm tài liệu cho từng bộ riêng lẻ Mặc dù Facebook đã nỗ lực xây dựng một kho tài liệu trực quan, nhưng vẫn còn nhiều thách thức trong việc truy cập thông tin.

Bảng 2.1 So sánh giữa Flutter và React Native

CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER

Yêu cầu cấu hình phần cứng

- Hệ điều hành: Windows 7, Windows 8.1, Windows 10

- Công cụ: Visual Studio Code, Android Studio, IntelliJ,…

Hướng dẫn cài đặt Futter

- Tải Flutter tại đường dẫn: https://flutter.dev/docs/get-started/install rồi giải nén Tránh giải nén thư mục flutter vào ổ C:\Program Files\

- Sau khi giải nén xong, thiết lập biến môi trường, vào Control Panel tìm kiếm từ khóa System và chọn vào mục Edit the system environment variables

Hình 3.1 Chỉnh sửa biến môi trường

Để cấu hình biến môi trường, bạn hãy chọn "Environment Variables", sau đó trong mục "System Variables", tìm và chọn "PATH" rồi nhấn "Edit" Trong cửa sổ "Edit System Variable", chọn "New" và dán đường dẫn tới thư mục Flutter đã giải nén Tiếp theo, trong thư mục vừa giải nén, tìm tập tin "flutter_console.bat", khởi chạy nó và nhập lệnh "flutter doctor -v" để kiểm tra cài đặt.

Hình 3.2 Chuẩn đoán Flutter với flutter doctor

- Cài đặt extension/plugin hỗ trợ cho IDE Ví dụ như extension Flutter (sẽ tự động cài thêm Dart) trên Visual Studio Code

Hình 3.3 Extension Flutter trên Visual Studio

3.3 Tạo project Flutter đầu tiên với Visual Studio Code:

- Mở Visual Studio Code, nhấn tổ hợp phím Ctrl + Shift + P sau đó gõ

“new project” và ấn Enter để tạo project mới

Hình 3.4 Tạo project Flutter mới trong Visual Studio Code

- Sau đó chọn thư mục đích nơi chứa project, và nhập tên project

Hình 3.5 Nhập tên project Flutter mới

- Sau khi hoàn tất quá trình tạo project mới Chúng ta sẽ thấy Visual Studio Code có giao diện tương như sau

Hình 3.6 Giao diện Visual Studio Code sau khi tạo thành công project Flutter

CÀI ĐẶT FIREBASE LƯU TRỮ CƠ SỞ DỮ LIỆU

Thêm Android vào project Firebase

Chọn vào icon Android để thêm Android vào project Firebase mới

Hình 4.5 Thêm Firebase vào app android

Sau khi lấy thông tin từ dự án Flutter, bạn cần điền các thông tin như package, SHA1 và nickname của dự án Sau khi hoàn tất, hãy nhấn vào nút Register app Tiếp theo, bạn cần tải file google-services.json và nhập nó vào dự án Flutter của mình như trong hình minh họa bên dưới.

Hình 4.6 Điền thông tin đăng ký

Cấu hình build.gradle theo hướng dẫn

Hình 4.7 Cấu hình file build gradle

Chọn Next và Continue ở màn hình sau đó, thế là xong phần cấu hình cho

Thêm IOS vào project Firebase

Bước đầu cũng giống như Android Click vào icon iOS thay vì icon Android

To add Firebase to your iOS app, retrieve the Bundle ID by opening Android Studio (if using it for Flutter development), right-clicking on the iOS folder, and selecting Flutter -> Open module in Xcode.

To obtain the iOS Bundle ID in Xcode, navigate to the Runner folder at the root, and under the General tab, locate the bundle identifier Then, return to the Firebase console, enter the bundle ID, and click "Register App." Finally, download the GoogleService-Info.plist file in the next step.

Hình 4.10 Tải và di chuyển file GoogleService.json

File tải về phải được bỏ vào thư mục Runner/Runner

Để cấu hình Firebase, hãy tham khảo hình 4.11 Trong bước thêm SDK, cần xây dựng ứng dụng trên điện thoại để kết nối giữa iOS và Firebase diễn ra Nếu quá trình kết nối thành công, kết quả sẽ được hiển thị như hình minh họa bên dưới.

Hình 4.12 Giao diện thiết lập Firebase với IOS thành công

NGHIÊN CỨU TIỀN DỰ ÁN

Mô hình kinh doanh

Ứng dụng hoạt động theo mô hình kinh doanh freemium, cung cấp dịch vụ cơ bản miễn phí cho người dùng, đồng thời có các phiên bản trả phí với tính năng nâng cao và không có quảng cáo.

- Lợi nhuận chính tới từ việc kết hợp với quảng cáo hoặc nâng cấp thêm gói premium với những tính năng nâng cao (dự kiến).

Đối tượng sử dụng

Ứng dụng này chủ yếu phục vụ cho các nghệ sĩ, nhạc sĩ và những người yêu âm nhạc, đặc biệt là những ai không quá bận tâm về vấn đề bản quyền và chi phí.

- Ứng dụng cung cấp các dịch vụ, chức năng cơ bản của một ứng dụng nghe nhạc một cách hoàn toàn miễn phí

SoundHouse là ứng dụng giúp nghệ sĩ và nhạc sĩ dễ dàng tải lên và chia sẻ âm nhạc của họ, mở ra cơ hội quảng bá rộng rãi đến khán giả Trước đây, việc đăng tải ca khúc trên các hệ thống nghe nhạc thường tốn thời gian và chi phí xác minh cao Sự ra đời của SoundHouse mang lại trải nghiệm mới, cho phép người dùng tự do hơn trong việc chia sẻ âm nhạc.

Rủi ro

Bản quyền và vi phạm sở hữu trí tuệ là một trong những rủi ro lớn nhất mà SoundHouse phải đối mặt, khi người dùng có thể tải lên và chia sẻ âm nhạc mà họ không có quyền sở hữu hoặc không được sự cho phép của chủ sở hữu bản quyền Hành động này có thể dẫn đến vi phạm sở hữu trí tuệ và gây ra các tranh chấp pháp lý nghiêm trọng.

SoundHouse có thể gặp phải vấn đề về an toàn và uy tín do người dùng tải lên nội dung không phù hợp, bao gồm các nội dung vi phạm pháp luật, đồi trụy hoặc gây hại cho người khác.

Người dùng SoundHouse có thể gặp khó khăn trong việc tìm kiếm âm nhạc chất lượng, thường phải đối mặt với các bản sao, bản rip hoặc nội dung không đạt tiêu chuẩn Tình trạng này không chỉ làm giảm trải nghiệm người dùng mà còn ảnh hưởng tiêu cực đến hình ảnh của SoundHouse như một nền tảng âm nhạc chất lượng.

SoundHouse đang phải đối mặt với sự cạnh tranh gay gắt từ các dịch vụ phát nhạc trực tuyến khác như Spotify, Apple Music và YouTube Sự cạnh tranh này có thể ảnh hưởng đến khả năng thu hút và giữ chân người dùng của nền tảng.

Tiêu chí thành công

Số lượng và sự đa dạng của người dùng là yếu tố then chốt đánh giá thành công của SoundHouse, bao gồm nghệ sĩ, nhạc sĩ và người yêu âm nhạc Sự gia tăng liên tục và đa dạng hóa người dùng phản ánh sự phát triển và sức hấp dẫn của nền tảng này.

Sự thành công của SoundHouse được xác định bởi chất lượng và sự đa dạng của nội dung âm nhạc trên nền tảng Một bộ sưu tập phong phú cùng với các phong cách âm nhạc đa dạng và sự góp mặt của nghệ sĩ nổi tiếng sẽ thu hút người dùng, tạo nên một cộng đồng năng động trên SoundHouse.

SoundHouse đã thành công trong việc xây dựng một môi trường tương tác mạnh mẽ giữa người dùng và nghệ sĩ Sự kết nối này được thể hiện qua các hoạt động như theo dõi, bình luận, chia sẻ và tạo danh sách phát cá nhân, cho thấy mức độ tham gia và tương tác tích cực của người dùng trên nền tảng.

Khả năng phân phối và tiếp cận là yếu tố then chốt giúp SoundHouse thành công, cho phép tiếp cận đối tượng khán giả rộng lớn Điều này được thực hiện thông qua việc tích hợp và chia sẻ âm nhạc trên các nền tảng khác nhau, cùng với việc tương tác hiệu quả với mạng xã hội và các đối tác trong ngành âm nhạc.

Để tạo lợi thế cạnh tranh, SoundHouse cần phát triển các yếu tố phân biệt so với các dịch vụ phát sóng âm nhạc khác Điều này bao gồm việc cung cấp tính năng độc đáo, mang đến trải nghiệm người dùng tốt, hỗ trợ nghệ sĩ độc lập, và cải thiện khả năng tìm kiếm và khám phá âm nhạc một cách dễ dàng.

Thành công của SoundHouse được đánh giá qua số lượng và sự đa dạng của người dùng, chất lượng và phong phú của nội dung âm nhạc, mức độ tương tác và kết nối giữa người dùng, khả năng phân phối và tiếp cận nội dung, khả năng cạnh tranh và tạo ra lợi thế, cùng với sự bền vững và tình hình tài chính của nền tảng.

PHÁT TRIỂN ỨNG DỤNG NGHE NHẠC VÀ CHIA SẺ BÀI HÁT 33 6.1 Đặt vấn đề

Mô tả bài toán

Phần mềm nghe nhạc cơ bản cho phép người dùng truy cập thông tin về bài hát, nghệ sĩ và album, với khả năng tìm kiếm theo tên, nghệ sĩ, thể loại hoặc lời bài hát Ứng dụng cung cấp thông tin chi tiết như tên nghệ sĩ, album, năm phát hành, lời bài hát và đánh giá Người dùng có thể tạo danh sách phát cá nhân, lưu trữ bài hát yêu thích và chia sẻ những bài hát đang nghe với bạn bè qua mạng xã hội.

Phần mềm cần đáp ứng các yêu cầu phi chức năng như khả năng tương thích với kích cỡ màn hình của các thiết bị di động phổ biến, giao diện trực quan và sinh động, thao tác đơn giản, cùng với tốc độ phản hồi ở mức khá để tạo cảm giác thân thiện cho người sử dụng.

Các chức năng chính

- Chức năng đăng nhập, đăng kí tạo tài khoản, thay đổi thông tin tài khoản

- Chức năng khám phá các bài hát, danh sách bài hát, nghệ sĩ mới, nổi bật, top trending,…

- Chức năng tìm kiếm (tìm kiếm các bài hát, danh sách bài hát, nghệ sĩ theo danh mục, thể loại và theo tên tương ứng)

- Chức năng thêm các bài hát, danh sách bài hát, nghệ sĩ yêu thích vào thư viện lưu trữ

- Chức năng thư viện lưu trữ (lưu trữ các bài hát, danh sách bài hát, nghệ sĩ yêu thích)

- Chức năng đề xuất các các bài hát, danh sách bài hát, nghệ sĩ dựa vào sở thích của người dùng

- Chức năng nghe nhạc, phát nhạc trực tuyến khi không có internet.

Phân tích thiết kế

6.5.1 Sơ đồ use case và đặc tả use case:

Hình 5.1 Sơ đồ use case tổng quát

- Danh sách các use case:

STT Tên Use case Tác nhân Ý nghĩa

Người dùng Đăng nhập vào ứng dụng

2 Đăng kí Đăng kí tài khoản để đăng nhập vào ứng dụng

Khám phá bài hát, danh sách bài hát, nghệ sĩ

Khám phá các bài hát, danh sách bài hát, nghệ sĩ mới, nổi bật, top trending

4 Tìm kiếm theo tên bài hát

Tìm kiếm các bài hát liên quan theo tên người dùng nhập

Tìm kiếm theo danh mục, thể loại

Tìm kiếm các bài hát, danh sách bài hát theo các danh mục, thể loại

6 Xem chi tiết danh sách bài hát

Xem thông tin chi tiết về danh sách bài hát

7 Xem chi tiết bài hát

Xem thông tin chi tiết về bài hát

8 Phát nhạc, phát bài hát

Người dùng nghe nhạc, bài hát

9 Thêm bài hát yêu thích

Thêm bài hát yêu thích vào thư viện

10 Thêm danh sách bài hát yêu thích

Thêm danh sách bài hát yêu thích vào thư viện

11 Thêm nghệ sĩ yêu thích

Thêm nghệ sĩ yêu thích vào thư viện

Lưu trữ bài hát, danh sách bài hát, nghệ sĩ yêu thích

Người dùng xem thư viện lưu trữ bài hát, danh sách bài hát, nghệ sĩ yêu thích đã thêm

13 Đề xuất Gợi ý các bài hát, danh sách bài hát, nghệ sĩ theo sở thích của người dùng

Bảng 5.1 Danh sách các use case a) Use case Đăng nhập:

Tên Use-case Đăng nhập

Người dùng chính Người dùng

Để đăng nhập vào hệ thống, người dùng cần sử dụng tài khoản đã đăng ký hoặc tài khoản Google, Facebook, hoặc Instagram Lưu ý rằng người dùng phải chưa đăng nhập vào ứng dụng trước đó.

38 Điều kiện sau Nếu tài khoản hợp lệ, người dùng đăng nhập vào hệ thống

Nếu không, trạng thái hệ thống không thay đổi

1 Người dùng truy cập vào ứng dụng

2 Người dùng nhấn vào đăng nhập

3 Người dùng nhập email và mật khẩu

4 Người dùng bấm đăng nhập Luồng thay thế

1 Người dùng truy cập vào ứng dụng

2 Người dùng lựa chọn phương thức đăng nhập bằng Google, Facebook hoặc Instagram

4a Hệ thống báo đăng nhập không thành công 4a1 Người dùng nhập lại Email và mật khẩu 4a2 Người dùng bấm đăng nhập b) Use case Đăng kí:

Tên Use-case Đăng kí

Để đăng ký tài khoản trên ứng dụng, người dùng cần có số điện thoại hoặc email xác định Nếu thông tin cung cấp hợp lệ, quá trình đăng ký sẽ thành công và tài khoản sẽ được tạo.

Nếu không, hệ thống không thay đổi

Luồng chính 1 Người dùng truy cập vào ứng dụng

2 Người dùng chọn đăng ký tài khoản

3 Người dùng nhập thông tin bao gồm Tên, Số điện thoại hoặc Email, Mật khẩu

5 Người dùng nhấn Đăng ký Luồng thay thế

Luồng ngoại lệ 3a Hệ thống báo Email hoặc số điện thoại không hợp lệ

3b Người dùng nhập lại Email hoặc Số điện thoại hợp lệ 4a Hệ thống thông báo Mật khẩu xác nhận không trùng khớp với mật khẩu khẩu đã nhập

4b Nhập lại mật khẩu xác nhận trùng khớp với mật khẩu c) Use case Khám phá bài hát, danh sách bài hát, nghệ sĩ:

Tên Use-case Khám phá bài hát, danh sách bài hát, nghệ sĩ

Người dùng đã đăng nhập vào ứng dụng có thể khám phá bài hát, danh sách bài hát và nghệ sĩ trên trang chủ Sau khi đăng nhập, hệ thống sẽ hiển thị những bài hát và playlist được gợi ý phù hợp trên trang chính.

Luồng chính 1 Nguời dùng đăng nhập vào ứng dụng

2 Người dùng bấm vào nút Home ở Bottom Navigation

3 Người dùng xem bài hát và playlist được gợi ý trên trang chính

Luồng ngoại lệ d) Use case Tìm kiếm theo tên bài hát:

Tên Use-case Tìm kiếm theo tên bài hát

Người dùng đã đăng nhập vào ứng dụng có thể tìm kiếm bài hát bằng cách nhập tên vào thanh tìm kiếm Sau khi thực hiện tìm kiếm, hệ thống sẽ hiển thị danh sách các bài hát liên quan đến tên mà người dùng đã nhập.

Luồng chính 1 Người dùng đăng nhập vào ứng dụng

2 Người dùng bấm trang Tìm kiếm trong Bottom Navigation

3 Người dùng chọn vào thanh Tìm kiếm

4 Người dùng nhập tên bài hát muốn tìm

5 Hệ thống hiển thị danh sách bài hát liên quan theo tên bài hát người dùng đã nhập

Luồng ngoại lệ 5a Hệ thống thông báo không có kết quả tìm kiếm trùng khớp e) Use case Tìm kiếm bài hát theo danh mục, thể loại:

Tên Use-case Tìm kiếm bài hát theo danh mục, thể loại

Người dùng đã đăng nhập vào ứng dụng có thể tìm kiếm bài hát theo danh mục Sau khi lựa chọn danh mục, hệ thống sẽ hiển thị danh sách bài hát tương ứng.

2 Người dùng bấm chọn trang Tìm kiếm trong Bottom Navigation

3 Người dùng chọn Danh mục muốn xem

4 Hệ thống hiển thị thông tin danh mục bao gồm các bài hát

Luồng ngoại lệ f) Use case Xem chi tiết danh sách bài hát:

Tên Use-case Xem chi tiết danh sách bài hát

Người dùng cần đăng nhập vào ứng dụng để xem thông tin chi tiết về danh sách bài hát Sau khi đăng nhập, hệ thống sẽ hiển thị đầy đủ thông tin chi tiết của danh sách bài hát cho người dùng.

2 Người dùng chọn danh sách bài hát bất kì

3 Hệ thống hiển thị thông tin chi tiết danh sách bài hát Luồng thay thế

Luồng ngoại lệ g) Use case Xem chi tiết bài hát:

Tên Use-case Xem chi tiết bài hát

Người dùng đã đăng nhập vào ứng dụng có thể xem thông tin chi tiết về bài hát, bao gồm tên nghệ sĩ, album, năm phát hành, lời bài hát và đánh giá Hệ thống sẽ hiển thị đầy đủ thông tin này cho người dùng.

2 Người dùng chọn bài hát bất kì

3 Hệ thống hiển thị thông tin chi tiết bài hát

Luồng thay thế 1 Người dùng đăng nhập vào ứng dụng

2 Người dùng chọn danh sách bài hát bất kì

3 Người dùng chọn bài hát

4 Hệ thống hiển thị thông tin chi tiết bài hát Luồng ngoại lệ h) Use case Thêm bài hát yêu thích:

Tên Use-case Thêm bài hát yêu thích

Để thêm bài hát yêu thích vào thư viện, người dùng cần đảm bảo đã đăng nhập vào ứng dụng Sau khi thực hiện đúng điều kiện này, bài hát sẽ được tự động thêm vào thư viện của họ.

3 Người dùng nhấn nút Yêu thích

4 Hệ thống thêm bài hát vào thư viện Luồng thay thế

Luồng ngoại lệ i) Use case Phát nhạc, bài hát:

Tên Use-case Phát nhạc, phát bài hát

Mô tả Người dùng nghe nhạc, phát bài hát Điều kiện trước Người dùng đã đăng nhập vào ứng dụng

42 Điều kiện sau Bài hát được phát để nghe

3 Người dùng nhấn nút Play

4 Hệ thống chuyển sang màn hình phát nhạc Luồng thay thế

Luồng ngoại lệ j) Use case Thêm danh sách bài hát yêu thích:

Tên Use-case Thêm danh sách bài hát yêu thích

Để thêm danh sách bài hát vào thư viện, người dùng cần đảm bảo đã đăng nhập vào ứng dụng Sau khi hoàn tất điều kiện này, danh sách bài hát sẽ được thành công thêm vào thư viện cá nhân của họ.

2 Người dùng chọn danh sách bài hát

4 Hệ thống thêm danh sách bài hát vào thư viện Luồng thay thế

Luồng ngoại lệ k) Use case Thêm nghệ sĩ yêu thích:

Tên Use-case Thêm nghệ sĩ yêu thích

Mô tả Thêm nghệ sĩ vào thư viện Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Nghệ sĩ được thêm vào thư viện

2 Người dùng chọn Nghệ sĩ

3 Hệ thống hiển thị Trang của nghệ sĩ

5 Hệ thống thêm nghệ sĩ vào thư viện Luồng thay thế

Luồng ngoại lệ l) Use case Lưu trữ thư viện:

Tên Use-case Lưu trữ thư viện

Người dùng cần đăng nhập vào ứng dụng để truy cập thư viện lưu trữ Sau khi đăng nhập thành công, hệ thống sẽ hiển thị thư viện cá nhân của người dùng.

2 Người dùng chọn Library trong Bottom Navigation

3 Hệ thống hiển thị thông tin thư viện lưu trữ

Luồng ngoại lệ m) Use case Đề xuất:

Tên Use-case Đề xuất

Hệ thống gợi ý bài hát, danh sách bài hát và nghệ sĩ dựa trên sở thích của người dùng, yêu cầu người dùng phải đăng nhập vào ứng dụng Sau khi đăng nhập, hệ thống sẽ hiển thị các gợi ý phù hợp với sở thích cá nhân của người dùng.

2 Người dùng chọn For you trong Bottom Navigation

3 Hệ thống hiển thị danh sách gợi ý theo sở thích người dùng

Luồng thay thế 3a Người dùng mới đăng nhập vào ứng dụng, chưa từng sử dụng trước đó

3b Hệ thống hiển thị danh sách gợi ý các bài hát, danh sách bài hát, nghệ sĩ mới, nổi bật, được nhiều yêu thích

Giao diện ứng dụng

Hình 6.1 Màn hình khởi động

Mô tả cách sử dụng và xử lý trên màn hình:

Màn hình khởi động gồm 3 phần:

- Phần 1 trên cùng gồm một TextView và Logo của ứng dụng

- Phần 2 gồm 2 Button cho phép người dùng lựa chọn đăng nhập hoặc đăng kí

- Phần 3 gồm các lựa chọn đăng nhập khác bằng 3 Button là google, facebook, instagram

Hình 6.2 Màn hình đăng nhập

Màn hình đăng nhập cho phép người dùng nhập thông tin tài khoản và mật khẩu để đăng nhập vào ứng dụng gồm 4 thành phần:

- Phần 1 trên cùng gồm một TextView và một Button thoát để quay trở lại màn hình khởi động

- Phần 2 gồm 2 TextInput nơi người dùng nhập Email và mật khẩu để đăng nhập vào ứng dụng

- Phần 3 là một button Đăng nhập sau khi người dùng nhập đầy đủ email và mật khẩu

- Phần 4 là một TextView hỏi người dùng muốn đăng kí tài khoản không và một Button chuyển qua màn hình đăng kí tài khoản

Hình 6.3 Màn hình đăng kí

Màn hình đăng kí giúp người dùng tạo tài khoản để đăng nhập vào ứng dụng gồm 4 thành phần:

- Phần 1 gồm TextView và một Button quay lại màn hình khởi động trước đó

- Phần 2 gồm 4 TextInput để nhập thông tin tài khoản

- Phần 3 là Button Sign In để xác nhận tạo tài khoản

- Phần 4 là TextView hỏi người dùng đã có tài khoản chưa và một button chuyển qua màn hình đăng nhập

Hình 6.4 Màn hình trang chủ

Màn hình trang chủ hiển thị các bài hát, danh sách bài hát, nghệ sĩ đang thịnh hành, mới, nổi bật, … gồm 3 thành phần chính:

- Phần 1 gồm tên ứng dụng và 2 Button ở góc phải là thông báo và lịch sử phát nhạc

Phần 2 bao gồm các ListView hiển thị bài hát, danh sách nghệ sĩ mới, nổi bật và thịnh hành Khi người dùng nhấp vào một trong các mục, thông tin chi tiết về bài hát sẽ được hiển thị.

- Phần 3 là một BottomNavigation gồm 5 tab: Home, Search, For you, Library, Account

Hình 6.5 Màn hình thông báo

Màn hình thông báo thể hiện các thông báo mới về các bài hát, playlist mới được phát hành gồm các thành phần:

- Phần 1 gồm TextView tiêu đề màn hình và mô tả về màn hình và button back để quay lại màn hình Trang chủ

- Phần 2 là các ListView hiện các thông báo, mỗi item gồm tên thông báo và thông tin chi tiết thông báo đó

6.6.6 Màn hình lịch sử phát nhạc:

Hình 6.6 Màn hình lịch sử phát nhạc

Màn hình thể hiện lịch sử phát nhạc của người dùng gồm các thành phần:

- Phần 1 gồm TextView tiêu đề màn hình và button thoát để quay lại màn hình Trang chủ

- Phần 2 là các ListView hiện các danh sách các bài hát người dùng đã phát nhạc

6.6.7 Màn hình thông tin chi tiết Playlist:

Hình 6.7 Màn hình thông tin chi tiết Playlist

Màn hình thông tin chi tiết Playlist cung cấp tên Playlist, nhà phát hành, số lượt yêu thích, số bài hát và danh sách các bài hát, bao gồm những thành phần chính.

- Phần 1 là tên Playlist và hình ảnh đại diện và một Botton quay lại màn hình trước đó

Phần 2 bao gồm TextView hiển thị tên nhà phát hành, thông tin mô tả, số lượt thích, thời gian phát của Playlist, số lượng bài hát, cùng với hai nút để phát và lặp bài hát ngẫu nhiên.

- Phần 3 danh sách các bài hát có trong Playlist, mỗi item gồm tên bài hát, nhạc sĩ và button cài đặt

Cuối màn hình có một TextView được tô đậm, hiển thị tên bài hát và nhạc sĩ khi người dùng bấm phát nhạc.

6.6.8 Màn hình thông tin chi tiết bài hát:

Hình 6.8 Màn hình thông tin chi tiết bài hát

Màn hình thông tin chi tiết bài hát cung cấp thông tin về bài hát đang phát, bao gồm tên bài hát, nghệ sĩ, hình ảnh minh họa và lời bài hát.

- Phần 1 chứa các thông tin bao gồm ảnh, tên bài hát, nghệ sĩ thể hiện

- Phần 2 chứa phần phát nhạc bao gồm thanh phát nhạc, nút Phát nhạc, nút chuyển tiếp bài hát, nút phát ngẫu nhiên và nút chia sẻ bài hát

- Phần 3 là TextView Lời bài hát, sẽ tự động cuộn tương ứng với phần nhạc đang phát

Hình 6.9 Màn hình tìm kiếm

Màn hình tìm kiếm giúp người dùng tìm kiếm các bài hát, playlist, nghệ sĩ gồm các thành phần:

- Phần 1 gồm ô TextInput dùng để điền nội dung cần tìm kiếm

Phần 2 của ứng dụng bao gồm một GridView hiển thị danh sách bài hát theo từng danh mục Khi người dùng nhấn vào một mục trong danh sách, màn hình sẽ chuyển sang hiển thị thông tin chi tiết về các bài hát tương ứng.

- Phần 3 là BottomNavigation gồm 5 Tab: Home, Search, For You, Library và Account

6.6.10 Màn hình thư viện lưu trữ:

Hình 6.10 Màn hình thư viện lưu trữ

Màn hình thư viện lưu trữ hiển thị các bài hát, playlist, nghệ sĩ yêu thích người dùng đã thêm vào thư viện lưu trữ gồm các thành phần:

- Phần 1 gồm một AppBar với một Label hiển thị Your Library, Search Button dùng để tìm kiếm

Phần 2 bao gồm một ListView hiển thị danh sách các item là bộ lọc cho các thể loại danh sách phát khác nhau Khi người dùng chọn một item, hệ thống sẽ cung cấp danh sách bài hát tương ứng với bộ lọc đã chọn.

Phần 3 của ứng dụng bao gồm một GridView hiển thị danh sách bài hát trong thư viện Khi người dùng nhấn vào một bài hát trong danh sách, ứng dụng sẽ cung cấp thông tin chi tiết về bài hát đó.

- Phần 4 là BottomNavigation gồm 5 Tab: Home, Search, For You, Library và Account

6.6.11 Màn hình thông tin tài khoản:

Hình 6.11 Màn hình thông tin tài khoản

Màn hình thông tin tài khoản hiển thị hồ sơ người dùng, các playlist đã được đăng tải, số lượng người theo dõi và những người mà người dùng đang theo dõi.

- Phần 1 gồm TextView tên người dùng và button cài đặt chỉnh sửa thông tin tài khoản

Phần 2 bao gồm ảnh đại diện của người dùng cùng với các TextView hiển thị thông tin về số playlist, lượt theo dõi và người theo dõi Ngoài ra, còn có hai nút để chỉnh sửa tài khoản và chia sẻ tài khoản.

- Phần 3 ListView hiển thị các Playlist người dùng đã đăng tải

Tiêu đề	Đồ án Tìm hiểu Flutter và Xây dựng Ứng dụng Nghe nhạc và Chia sẻ Bài hát
Tác giả	Nguyễn Việt Hoàng, Bùi Đức Hoàng Nhật
Người hướng dẫn	ThS. Nguyễn Công Hoan
Trường học	Trường Đại học Công Nghệ Thông Tin - Khoa Công Nghệ Phần Mềm
Chuyên ngành	Khoa Công Nghệ Phần Mềm
Thể loại	Đồ án
Năm xuất bản	2023
Thành phố	Tp HCM

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