đồ án 1 xây dựng ứng dụng nghe nhạc và chia sẻ bài hát với flutter

Ứng dụng sẽ cung cấp một không gian tuyệt vời để người dùng khám phá âm nhạc mới, tìm kiếm nghệ sĩ yêu thích, và xây dựng danh sách phát cá nhân.. Ứng dụng sẽ cung cấp thông tin chi tiế

GIỚI THIỆU ĐỀ TÀI

Lý do chọn đề tài

Âm nhạc là một trong những ngành công nghiệp lớn nhất trên thế giới, và hàng triệu người trên khắp thế giới đều yêu thích và nghe nhạc hàng ngày Vì vậy, nghiên cứu về hệ hỗ trợ quyết định là rất cần thiết và có tính ứng dụng cao trong thực tế Việc xây dựng một ứng dụng nghe nhạc, đăng tải nhạc và cá nhân hóa âm nhạc sẽ giúp người dùng khám phá vô số thể loại âm nhạc, trải nghiệm và sở hữu âm nhạc theo cách riêng của họ Ứng dụng sẽ cung cấp một không gian tuyệt vời để người dùng khám phá âm nhạc mới, tìm kiếm nghệ sĩ yêu thích, và xây dựng danh sách phát cá nhân

Chúng tôi tin rằng ứng dụng của chúng tôi sẽ là một điểm đến hấp dẫn cho người yêu âm nhạc Với khả năng khám phá âm nhạc phong phú, người dùng có thể tìm kiếm và nghe nhạc từ nhiều thể loại khác nhau, từ pop, rock, hip-hop đến jazz, classical và nhiều hơn nữa Ứng dụng sẽ cung cấp thông tin chi tiết về nghệ sĩ, album, và bài hát để người dùng có thể tìm hiểu thêm về âm nhạc mình yêu thích

Mục tiêu của chúng tôi là tạo ra một ứng dụng âm nhạc thu hút và nổi bật, nơi người dùng có thể thỏa sức khám phá âm nhạc và tận hưởng những trải nghiệm nghe nhạc tuyệt vời.

Phương pháp nghiên cứu và phát triển

Nhóm chúng em sẽ thực hiện đề tài này bằng ngôn ngữ Dart với công nghệ ứng dụng là Flutter

Trong quá trình tìm hiểu nghiệp vụ, nhóm chúng em có tham khảo các diễn đàn âm nhạc trên mạng xã hội Cùng với đó là các ứng dụng có sẵn và phát triển thành công trên App store và CH Play để có cái nhìn tổng quát về đề tài đã chọn

Nhóm phát triển tuân theo quy chuẩn thiết kế ứng dụng hiện hành Nhóm đã thực hiện bài bản từng bước sau trong quá trình phát triển ứng dụng:

Bước 1: Nhóm tiến hành thu thập thông tin yêu cầu người dùng

Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mô hình hoá yêu cầu của người dùng

Bước 3: Nhóm tiến hành nghiên cứu các ứng dụng sẵn có (với chức năng gần giống) trên thị trường để bắt kịp xu hướng

Bước 4: Nhóm thực hiện chỉnh sửa lại mô hình hoá yêu cầu người dùng theo những gì đã thu thập được

Bước 5: Nhóm thực hiện thiết kế CSDL

Bước 6: Nhóm chọn Flutter (Cross platform) để phát triển ứng dụng vì phát huy tối đa được tốc độ thực thi, đồng thời hỗ trợ các tính năng cấp phục vụ cho yêu cầu của người dùng

Bước 7: Nhóm tiến hành thiết kế giao diện Prototype cho ứng dụng

Bước 8: Nhóm tiến hành công đoạn cài đặt cho ứng dụng

Bước 9: Nhóm tiến hành công việc bảo trì (sửa chữa lỗi và phát triển thêm những tính năng chưa được đề ra ban đầu)

Bước 10: Nhóm hoàn thành đồ án

Mô hình sử dụng để xây dựng đề tài: MVC

Đối tượng hướng đến

Nhóm đối tượng chủ yếu của ứng dụng là các tổ chức/cá nhân có và biết sử dụng smart phone ở mọi độ tuổi từ 12 -> 60, cụ thể:

- Bất kỳ ai yêu thích âm nhạc và có nhu cầu lắng nghe nhạc trên thiết bị di động

- Những nghệ sĩ có mong muốn đăng tải bài hát để lan tỏa đến với mọi người Ứng dụng này sẽ là trợ thủ đắc lực giúp người dùng nghe nhạc và truy cập thông tin về các bài hát, nghệ sĩ, và album Người dùng sẽ có thể tìm kiếm bài hát theo tên, nghệ sĩ, thể loại, hay lời bài hát Ứng dụng sẽ cung cấp cho người dùng thông tin chi tiết về các 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á Ngoài ra, người dùng cũng có thể tạ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 mà họ đang nghe với bạn bè qua mạng xã hội

CƠ SỞ LÝ THUYẾT

Giới thiệu về framework Flutter

- Flutter được phát triển nhằm giải quyết bài toán thường gặp trong việc phát triển ứng dụng là Fast Development (phát triển ứng dụng nhanh) và Native Performance (hiệu suất tối ưu cho từng nền tảng) Nếu như React Native chỉ đảm bảo Fast Development còn Native language chỉ đảm bảo Native Performance thì Flutter làm được cả 2 điều trên

- Phiên bản đầu tiên của Flutter được gọi là "Sky" và chạy trên hệ điều hành Android Nó được công bố tại hội nghị nhà phát triển Dart 2015, hỗ trợ các ứng dụng hoạt động ở mức 120 khung hình trên giây

- Trong bài phát biểu chính ở hội nghị Google Developer Days tại Thượng Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiên bản lớn cuối cùng trước 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 ở trên sử dụng ngôn ngữ Dart cung cấp các đoạn mã xây dựng lên một ứng dụng Flutter Các đoạn mã này cung cấp phương tiện để có thể thay đổi và chỉnh sửa chúng Từ đó giúp ứng dụng của lập trình viên có thể được tùy chỉnh theo mong muốn Tầng Framework này giúp lập trình viên thay đổi mã nguồn ứng dụng ở thời điểm compile time

- Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng ngôn ngữ C++ Tầng Shell này chứa các công cụ trợ giúp ứng dụng Flutter trong quá trình chạy Ở tầng này còn có máy ảo Dart VM Khái niệm máy ảo là khái niệm về một ứng dụng chạ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:

+ Làm ứng dụng trung gian giữa mã nguồn được viết bởi Dart và thiết bị phần cứng (hoặc phần mềm nằm ngoài ứng dụng) + Thông dịch các đoạn mã Dart theo phương thức JIT (Just in time) hoặc AOT (Ahead of Time)

+ Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như cung cấp các runtime system bao gồm garbage collector, và các thư viện cần có 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

- Hỗ trợ hot reload – các sửa đổi trong mã nguồn sẽ được cập nhật trực tiếp lên ứng dụng đang chạy Ngoài ra Flutter còn bổ sung thêm tính năng stateful hot reload - cập nhật ngay lập tức các thay đổi lên ứng dụng đang chạy mà không cần phải khởi động lại và giữ trạng thái đang có Tính năng này đặc biệt hữu ích, giúp nhà phát triển ứng dụng tiết kiệm rất nhiều thời gian

- Ứng dụng được viết bằng Flutter hỗ trợ hiển thị lên đến 60FPS (hoặc 120FPS tuỳ thiết bị) Cho hiệu ứng chuyển cảnh mượt mà, nâng cao trải nghiệm người dùng

- Một đối thủ khác của Flutter là React Native Đây là framework được tạo bởi Facebook Tương tự như Flutter, React Native cũng cho phép các lập trình viên sử dụng JavaScript để làm ứng dụng di động đa nền tảng, trên 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

Khi sử dụng Flutter, các Developer có thể thực hiện mọi thứ trên cùng một màn hình, trong đó đặc biệt không cần phải chuyển từ code sang chế độ thiết kế hoặc ngược lại, vì vậy các trải nghiệm trên Flutter khá tiết kiệm thời gian

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

Từ khi React Native trở lên phổ biến, đã có rất nhiều các thirdparty packages được phát triển và được sử dụng rất nhiều trong ứng dụng Độ phổ biến Số lượng người sử dụ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ó lúc khá khó khăn, phụ thuộc vào các công cụ dev bên ngoài, yêu cầu người dùng phải kiếm tài liệu cho từng bộ mặc dù Facebook đã khá nỗ lực để xây dựng một kho tài liệu trực quan nhất

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

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

- 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 2.4 Chỉnh sửa biến môi trường

+ Chọn Environment Variables, tại mục System Variables bạn chọn PATH và nhấn tiếp chọn Edit Trong cửa sổ Edit System Variable bạn chọn New và dán đường dẫn tới thư mục Flutter đã giải nén trước đó + Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi chạy sau đó nhập lệnh flutter doctor -v

Hình 2.5 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 2.6 Extension Flutter trên Visual Studio

2.4 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 2.7 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 2.8 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 2.9 Giao diện Visual Studio Code sau khi tạo thành công project Flutter

2.5 Cài đặt Firebase lưu trữ cơ sở dữ liệu [3] :

Truy cập đường dẫn: https://console.firebase.google.com/

Nhấp vào Add project và đặt tên cho project:

Hình 2.11 Nhập tên project Firebase mới

Lưu ý: Tên dự án thực tế có thể tạo thêm một số ký tự ở cuối để tạo tính duy nhất

Nhấp vào Continue Để đơn giản, không bật Google Analytics cho dự án này, vì vậy hãy tắt nó và nhấp vào Create project Nếu bạn muốn sử dụng Google Analytics, hãy bật nó lên và sẽ có thêm một bước là chọn hoặc tạo dự án Google Analytics

Hình 2.12 Chọn các tiêu chí và Create project Đợi trong vài giây khi dự án được tạo, cho đến khi bạn thấy rằng nó đã sẵn sàng và nhấp vào Continue

Hình 2.13 Hoàn thành tạo project

2.5.2 Thêm Android vào project Firebase:

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

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

Sau đó điền các thông tin lấy ra từ project Flutter và điền vào Bao gồm các thông tin về package, SHA1 và nick name của Project sau khi hoàn thành thì click vào Register app Bước tiếp theo thì chúng ta sẽ phải tải file google- services.json và import vào trong project Flutter như ảnh bên dưới

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

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

Hình 2.16 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

2.5.3 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

Hình 2.17 Thêm Firebase vào app IOS Để lấy Bundle id app chúng ta làm như sau: vào Android studio (nếu đang dùng để code Flutter) chuột phải vào folder iOS và chọn Flutter -> Open module in Xcode

Hình 2.18 Lấy Bundle id IOS Ở Xcode, chọn thư mục Runner ở Root -> trong General, các bạn sẽ tìm thấy bundle identifier, nó chính là bundle id Sau đó quay lại Firebase console, nhập bundle Id và tìm được -> click Register app Tiếp theo tải file GoogleService-Info.plist ở bước kế tiếp

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

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

Hình 2.20 Cấu hình Firebase Ở đây chúng ta cấu hình như hình trên Ở bước add SDK nên build App lên điện thoại để quá trình kết nối giữa iOS và Firebase diễn ra, nếu thành công thì sẽ hiển thị theo bên dưới

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

PHÂN TÍCH THIẾT KẾ HỆ THỐ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 đăng tải và chia sẻ bài hát tự sản xuất hoặc cá nhân lên ứng 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ế

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

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

- Danh sách các use case:

Bảng 3.1 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 Đăng tải bài hát Tải lên và chia sẻ bài hát tự sản xuất hoặc cá nhân lên ứng dụng

Bảng 3.2 Use-case “Đăng nhập”

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

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

Mô tả Đăng nhập vào hệ thống với tài khoản đã được đăng ký hoặc tài khoản Google, Facebook hoặc Instagram Điều kiện trước Người dùng chưa đăng nhập vào ứng dụng Đ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

Bảng 3.3 Use-case “Đăng ký”

Tên Use-case Đăng kí

Mô tả Đăng ký tài khoản trên ứng dụng Điều kiện trước Người dùng chưa có tài khoản đăng ký bởi Số điện thoại hoặc Email xác định Điều kiện sau Nếu các thông tin hợp lệ, tài khoản đăng ký thành công

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 3.2.1.3 Use case Khám phá bài hát, danh sách bài hát, nghệ sĩ:

Bảng 3.3 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ĩ

Mô tả Người dùng khám phá bài hát, danh sách bài hát, nghệ sĩ có sẵn ở trang chủ Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hiển thị những bài hát và playlist được gợi ý 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

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

Bảng 3.4 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

Mô tả Người dùng tìm kiếm bài hát theo tên bằng thanh tìm kiếm Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau 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 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

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

Bảng 3.5 Use-case “Tìm kiếm bài hát theo danh mục, thể loại”

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

Mô tả Người dùng tìm kiếm bài hát dựa theo danh mục Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hệ thống hiển thị danh sách bài hát theo danh mục được chọn

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

3.2.1.6 Use case Xem chi tiết danh sách bài hát:

Bảng 3.6 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

Mô tả Người dùng xem thông tin chi tiết danh sách bài hát Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hệ thống hiển thị thông tin chi tiết danh sách bài hát

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ế

3.2.1.7 Use case Xem chi tiết bài hát:

Bảng 3.7 Use-case “Xem chi tiết bài hát”

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

Mô tả Người dùng xem thông tin chi tiết bài hát gồm tên nghệ sĩ, album, năm phát hành, lời bài hát, và đánh giá Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hệ thống hiển thị thông tin chi tiết bài hát

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ệ

3.2.1.8 Use case Thêm bài hát yêu thích:

Bảng 3.8 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

Mô tả Thêm bài hát yêu thích 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 Bài hát được thêm vào thư viện

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ế

3.2.1.9 Use case Phát nhạc, bài hát:

Bảng 3.9 Use-case “Phát nhạ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 Đ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ế

3.2.1.10 Use case Thêm danh sách bài hát yêu thích:

Bảng 3.10 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

Mô tả Thêm danh sách bài hát 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 Danh sách bài hát được thêm vào thư viện

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ế

3.2.1.11 Use case Thêm nghệ sĩ yêu thích:

Bảng 3.11 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ế

3.2.1.12 Use case Lưu trữ thư viện:

Bảng 3.12 Use-case “Lưu trữ thư viện”

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

Mô tả Người dùng xem thư viện lưu trữ Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hệ thống hiển thị thư việ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ữ

Bảng 3.13 Use-case “Đề xuất”

Tên Use-case Đăng tải bài hát

Mô tả Người dùng tải lên và chia sẻ bài hát tự sản xuất hoặc cá nhân lên ứng dụng nghe nhạc Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hệ thống hiển thị các bài hát, danh sách bài hát người dùng đã đăng tải lên

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

5 Lựa chọn file sau đó xác nhận upload

Luồng thay thế 5a Hệ thống thông báo dung lượng file quá lớn

5b Lựa chọn file khác và xác nhận Upload Luồng ngoại lệ

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

XÂY DỰNG ỨNG DỤNG

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

Hình 4.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

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

Hình 4.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

Màn hình đăng kí

Hình 4.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

Màn hình trang chủ

Hình 4.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 là các ListView bài hát, danh sách bài hát, nghệ sĩ mới, nổi bật, thịnh hành, … khi bấm vào một trong các item sẽ hiện ra các bài hát và thông tin chi tiết

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

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

Hình 4.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 đó

Màn hình lịch sử phát nhạc

Hình 4.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

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

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

Màn hình thông tin chi tiết Playlist hiển thị tên Playlist, nhà phát hành, số lượt yêu thích, số bài hát và list các bài hát gồm các 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 gồm TextView hiển thị tên nhà phát hành, thông tin mô tả, số lượt người thích, thời gian phát của Playlist, số lượt bài hát và 2 button 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

- Ngoài ra còn có một TextView được tô đậm phía cuối màn hình xuất hiện khi người dùng bấm phát nhạc bài hát đang được phát sẽ hiển thị ở đây với tên bài hát, nhạc sĩ.

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

Hình 4.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 hiển thị bài hát đang được phát gồm tên bài hát, nhạc sĩ, hình ảnh, lời bài hát gồm các thành phần:

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

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

Hình 4.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 gồm một GridView chứa danh sách bài hát theo danh mục Khi nhấn vào item này màn hình sẽ chuyển đến Màn hình Hiển thị thông tin Danh sách bài hát tương ứng

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

Màn hình thư viện lưu trữ

Hình 4.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 gồm một ListView chứa danh sách các item là Filter của các thể loại danh sách phát khác nhau Sau khi chọn một item, hệ thống sẽ hiện ra danh sách bài hát tương ứng với Filter đó

- Phần 3 gồm một GridView chứa danh sách bài hát trong thư viên Khi người dùng nhấn vào danh sách ứng dụng sẽ thể hiện thông tin chi tiết danh sách bài hát tương ứng

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

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

Hình 4.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ị profile người dùng, các playlist người dùng đã đăng tải, số người theo dõi, số lượng người theo dõi gồm các thành phần:

- 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 gồm ảnh đại diện người dùng và các TextView hiển thị số playlist, lượt theo dõi, người theo dõi và 2 button 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 đề	Xây dựng ứng dụng nghe nhạc và chia sẻ bài hát với Flutter
Tác giả	Nguyễn Anh Khoa, Nguyễn Trương Đình Du
Người hướng dẫn	ThS. Trần Thị Hồng Yến
Trường học	Trường Đại học Công nghệ Thông tin
Chuyên ngành	Công nghệ phần mềm
Thể loại	Đồ án 1
Năm xuất bản	2023
Thành phố	Tp HCM

Định dạng
Số trang	54
Dung lượng	3,21 MB