đồ á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ế

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

XÂY DỰNG ỨNG DỤNG NGHE NHẠC VÀ CHIA SẺ BÀI HÁT VỚI FLUTTER

Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến

Sinh viên thực hiện 1 : Nguyễn Anh Khoa

Sinh viên thực hiện 2 : Nguyễn Trương Đình Du

Tp HCM, tháng 12 năm 2023

Trang 2

LỜI CẢM ƠN

Nhóm em xin chân thành cảm ơn sự hướng dẫn tận tình của cô Trần Thị Hồng Yến - giảng viên hướng dẫn môn Đồ án 1 đã hỗ trợ cho nhóm trong quá trình nghiên cứu để nhóm hoàn thành đề tài này

Trong khoảng thời gian thực hiện đồ án, chúng em đã học hỏi thêm được nhiều kiến thức, kinh nghiệm, biết được thêm về nhiều công nghệ mới Nhóm em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới Từ đó, vận dụng tối đa những gì đã học hỏi được để hoàn thành báo cáo đồ án này

Vì kiến thức của chúng em vẫn còn hạn hẹp nên không thể tránh khỏi những thiếu sót trong quá trình thực hiện đồ án Vì vậy nhóm chúng em luôn mong đợi nhận được những ý kiến đóng góp quý báu từ phía giảng viên để qua đó có thể rút kinh nghiệm, tự sửa chữa, hoàn thiện bản thân mình trên tinh thần nghiêm túc, tự giác học hỏi Một lần nữa nhóm chúng em xin chân thành cảm ơn thầy

Nhóm sinh viên thực hiện Nguyễn Anh Khoa – Nguyễn Trương Đình Du

Trang 3

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

Trang 4

MỤC LỤC

Chương 1: GIỚI THIỆU ĐỀ TÀI 8

1.1 Lý do chọn đề tài: 8

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

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

Chương 2: CƠ SỞ LÝ THUYẾT 10

2.1 Giới thiệu ngôn ngữ lập trình Dart: 10

2.1.1 Ngôn ngữ lập trình Dart là gì? 10

2.1.2 Ưu điểm của Dart: 10

2.2 Giới thiệu về framework Flutter: 11

2.2.1 Flutter là gì? 11

2.2.2 Kiến trúc của Flutter: 12

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

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

2.4 Tạo project Flutter đầu tiên với Visual Studio Code: 17

2.5 Cài đặt Firebase lưu trữ cơ sở dữ liệu: 18

2.5.1 Tạo Project Firebase 18

2.5.2 Thêm Android vào project Firebase: 21

2.5.3 Thêm IOS vào project Firebase: 25

Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 30

3.1 Các chức năng chính: 30

3.2 Phân tích thiết kế: 30

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

3.2.2 Thiết kế cơ sở dữ liệu: 40

Trang 5

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

4.9 Màn hình tìm kiếm: 49

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

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

KẾT LUẬN 52

Kết quả thu được: 52

Ưu điểm: 52

Khó khăn: 52

Phương hướng phát triển: 52

TÀI LIỆU THAM KHẢO 54

Trang 6

MỤC LỤC HÌNH ẢNH

Hình 2.1 Logo Dart 10

Hình 2.2 Logo Flutter 11

Hình 2.3 Kiến trúc Flutter 12

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

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

Hình 2.6 Extension Flutter trên Visual Studio 17

Hình 2.7 Tạo project Flutter mới trong Visual Studio Code 17

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

Hình 2.9 Giao diện Visual Studio Code sau khi tạo thành công project Flutter 18

Hình 2.10 Tạo project Firebase 18

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

Hình 2.12 Chọn các tiêu chí và Create project 20

Hình 2.13 Hoàn thành tạo project 21

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

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

Hình 2.16 Cấu hình file build gradle 24

Hình 2.17 Thêm Firebase vào app IOS 25

Hình 2.18 Lấy Bundle id IOS 26

Hình 2.19 Tải và di chuyển file GoogleService.json 27

Hình 2.20 Cấu hình Firebase 28

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

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

Hình 3.2 Database diagram 40

Trang 7

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

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

Hình 4.9 Màn hình tìm kiếm 49

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

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

Trang 8

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

1.2 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

Trang 9

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

1.3 Đố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

Trang 10

Chương 2:

CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu ngôn ngữ lập trình Dart:

Hình 2.1 Logo Dart

2.1.1 Ngôn ngữ lập trình Dart là gì?

- Dart là ngôn ngữ lập trình mới, được phát triển bởi Google, hiện đã được chấp thuận bởi tổ chức Ecma (ECMA-408) Nó được sử dụng để xây dựng các loại ứng dụng: web, server, di động (IOS và Android)[1] - Dart là ngôn ngữ lập trình hướng đối tượng, với cơ chế garbage collector, cú pháp kiểu C Nó hỗ trợ những khái niệm lập trình hiện đại như interface, mixin, abstract, generic, và type - safe Đây là ngôn ngữ lập trình mã nguồn mở, được công bố trên Github

2.1.2 Ưu điểm của Dart:

Một số ưu điểm vượt trội của Dart so với các ngôn ngữ lập trình khác:

- Năng suất: Dart có cú pháp dễ hiểu, rõ ràng và súc tích Type-safe giúp

lập trình viên có thể xác định sớm các lỗi Bên cạnh đó Dart có hệ sinh thái rộng lớn lên đến hàng nghìn packages

Trang 11

- Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có

được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web

- Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên rất dễ học Nếu bạn

đã biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài ngày

- Reactive: Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản

lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget UI, thông qua phân bổ đối tượng nhanh và garbage collector Dart hỗ trợ lập trình không đồng bộ thông qua các tính năng ngôn ngữ và API sử dụng các đối tượng Future và Stream

Từ ngôn ngữ lập trình Dart, Google giới thiệu Framework Flutter sử dụng ngôn ngữ Dart để phát triển ứng dụng di động chạy đa nền tảng

2.2 Giới thiệu về framework Flutter:

Hình 2.2 Logo Flutter

2.2.1 Flutter là gì?

- 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

Trang 12

- 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

2.2.2 Kiến trúc của Flutter:[2]

Hình 2.3 Kiến trúc Flutter

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

Trang 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

Trang 14

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

Cấu trúc mã

nguồ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

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ử

Trang 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

Tài liệu tham

khảo

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

2.3 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

Trang 16

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

Trang 17

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

Trang 18

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]: 2.5.1 Tạo Project Firebase

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.10 Tạo project Firebase

Trang 19

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

Trang 20

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

Trang 21

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

Trang 22

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

Trang 23

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

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

Trang 24

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 Android

Trang 25

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

Trang 26

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

Trang 27

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