Tìm hiểu FLUTTER và phát triển ứng dụng nghe nhạc (báo cáo cuối kì đồ án 1)

Thông tin chức năng đăng ký Điều kiện trước Thiết bị phải có mạng Dashboard - Nhập thông tin sau đó ấn đăng ký - Chấp nhận submit và mail xác nhận sẽ được gửi đến email cá nhân mà ngườ

1

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Giảng viên hướng dẫn: ThS.Huỳnh Tuấn Anh

Nhóm sinh viên thực hiện:

Nguyễn Doãn Thịnh 19522281 Hoàng Quốc Trọng 19522408

Thành phố Hồ Chí Minh, tháng 6 năm 2022

2

MỤC LỤC

CHƯƠNG 1 6

TỔNG QUAN 6

1.1 Giới thiệu chung 6

1.2 Mục tiêu 6

1.3 Các phương pháp để hiện thực 6

1.4 Các chức năng cơ bản 7

CHƯƠNG 2 7

TÌM HIỂU FLUTTER 7

2.1 Flutter 7

2.1.1 Tổng quan và lịch sử: 7

2.1.2 Ưu điểm và nhược điểm của Flutter 8

2.2 Ngôn ngữ Dart 9

2.3 Kiến trúc Flutter 10

CHƯƠNG 3 11

XÂY DỰNG ỨNG DỤNG 11

3.1 Use case diagram: 11

3.2 Chi tiết các chức năng: 13

3.2.1 Thông tin chức năng đăng ký 13

3.2.2 Thông tin chức năng đăng nhập 13

3.2.3 Thông tin chức năng quên mật khẩu 14

3.2.4 Thông tin chức năng đổi thông tin 15

3.2.5 Thông tin chức năng tìm kiếm 15

3.2.6 Thông tin chức năng yêu thích 17

3.2.7 Thông tin chức năng xem danh sách yêu thích 17

3.2.8 Thông tin chức năng xem danh sách album 18

3

3.2.9 Thông tin chức năng them nhạc vào danh sách album 18

3.2.10 Thông tin chức năng Thay đổi thông tin album 19

3.2.11 Thông tin chức năng Xóa thông tin album 20

3.2.12 Thông tin chức năng Phát nhạc 20

3.2.13 Thông tin chức năng Phát ngẫu nhiên 21

3.2.14 Thông tin chức năng Phát lặp 22

3.2.15 Thông tin chức năng hẹn giờ đi ngủ 22

3.3 Thiết kế giao diện 23

3.3.1 Xây dựng màn hình đăng nhập của ứng dụng: 23

3.3.2 Xây dựng màn hình Đăng ký: 25

3.3.3 Xây dựng màn hình Quên mật khẩu: 26

3.3.4 Xây dựng màn hình chính: 28

3.3.5 Xây dựng màn hình Trang khám phá 30

3.3.6 Xây dựng màn hình Tìm kiếm: 31

3.3.7 Xây dựng màn hình Nghệ sĩ: 32

3.3.8 Xây dựng màn hình Album: 33

3.3.9 Xây dựng màn hình Phát nhạc: 35

CHƯƠNG 4 36

TỔNG KẾT 36

4.1 Kết quả đạt được 36

4.2 Hướng phát triển tiếp theo 37

TÀI LIỆU THAM KHẢO 38

4

Lời cảm ơn

Đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến tập thể quý thầy cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý thầy cô khoa Công nghệ phần mềm đã giúp cho chúng em có những kiến thức cơ bản làm nền tảng để thực hiện đề tài này

Đặc biệt, nhóm tác giả xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới thầy Huỳnh Tuấn Anh, người đã hướng dẫn tận tình, sửa chữa và đóng góp nhiều ý kiến quý báu giúp em hoàn thành báo cáo môn học của mình

Trong thời gian một học kỳ thực hiện đề tài, 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ừ đó, em đã vận dụng tối đa những gì đã thu thập được để hoàn thành một báo cáo đồ án tốt nhất Tuy nhiên, trong quá trình thực hiện không tránh khỏi những thiếu sót Chính vì vậy, em rất mong nhận được những sự góp ý từ phía các thầy/cô nhằm hoàn thiện những kiến thức mà em đã học tập và là hành trang để em thực hiện tiếp các đề tài khác trong tương lai

Xin chân thành cảm ơn quý thầy/cô!

5

Nhận xét của giảng viên

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

Giảng viên hướng dẫn

6

ThS Huỳnh Tuấn AnhCHƯƠNG 1

TỔNG QUAN

1.1 Giới thiệu chung

Âm nhạc đóng vai trò quan trọng trong cuộc sống con người, giúp chúng ta giải tỏa những áp lực trong cuộc sống hằng ngày, là sợi dây gắn kết giữa con người với con người Do đó nhu cầu nghe nhạc cũng như chia sẻ những bài hát yêu thích cho mọi người khác thưởng thức hiện nay đang rất cao và chúng em quyết định xây dựng ứng dụng nghe nhạc thông qua tìm hiểu Flutter

- Tham khảo các ứng dụng tương tự hiện có trên thị trường

- Nghiên cứu các công nghệ để áp dụng

- Phát triển ứng dụng

- Đưa cho một số người dùng sử dụng thử để lấy ý kiến phản hồi

- Kiểm thử và hoàn thiện ứng dụng

 Phát nhạc nhiều định dạng(bao gồm cả audio và video)

 Lưu danh sách bài hát ưa thích, chơi nhạc ở chế độ random bài hát và repeat danh sách nhạc đang chơi

 Tìm kiếm nhạc online trên trang: http://mp3.zing.vn Kèm theo tính năng cho phép nghe trực tuyến và download bài hát

 Các playlist(danh sách bài hát yêu thích) được quản lý riêng rất tiện lợi, kèm theo 1 số chức năng tiện lợi như : xem thông số bài hát, chuyển đổi qua lại giữa các bài hát trong playlist, ………

 Chức năng hẹn giờ tắt máy, rất tiện lợi cho người dùng có thói quen nghe nhạc thường xuyên

CHƯƠNG 2

TÌM HIỂU FLUTTER

2.1 Flutter

2.1.1 Tổng quan và lịch sử:

8

Flutter là một bộ công cụ phát triển phần mềm mã nguồn mở giúp các lập trình viên xây dựng ứng dụng trên nền tảng di động, web và máy tính với một codebase duy nhất Flutter được giới thiệu vào năm 2015 sau đó được thử nghiệm và phát triển cho đến khi ra mắt phiên bản chính thức vào ngày 4 tháng 12 năm 2018 Từ

đó Flutter đã phát triển mạnh mẽ và trở thành đối thủ đáng gồm với các công cụ lập trình đa nền tảng trước đó, hiện tại thì Flutter đang là một trong những giải pháp phát triển ứng dụng đa nền tảng được sử dụng nhiều nhất với cộng đồng không ngừng phát triển Flutter đang là ứng dụng có số sao đứng thứ 17 trên

github Tháng 4 năm 2020 theo thống kê của Google có hơn hai triệu lập trình viên

đã sử dụng Flutter và hơn 50.000 ứng dụng sử dụng Flutter được đưa lên

PlayStore Chỉ sau một tháng con số đó đã lên tới 60.000 Flutter được sử dụng để phát triển nhiều ứng dụng nổi tiếng phục vụ hàng trăm triệu người dùng trên thế giới

2.1.2 Ưu điểm và nhược điểm của Flutter

- Ưu điểm:

 Tiết kiệm thời gian và nhân lực: Flutter là một công cụ lập trình đa nền tảng,

vì vậy ta có thể tạo ứng dụng cho cả Android và iOS Từ đó tiết kiệm được thời gian và nguồn nhân lực khi phát triển, kiểm thử, cập nhật và bảo trì

 Hiệu năng tuyệt vời: Flutter sử dụng ngôn ngữ Dart, sẽ được biên dịch trực tiếp thành mã máy mà không phải thông qua các cách giao tiếp trung gian khác Vì thế ứng dụng sẽ hoạt động với hiệu năng cao hơn các công cụ phát triển ứng dụng đa nền tảng khác

Hình 2.1: Các công ty sử dụng Flutter

9

 Hỗ trợ hot reload: Hot reload cho phép trực tiếp thay đổi giao diện trên máy

ảo hay thiết bị thật mà không cần phải rebuild hay khởi động lại ứng dụng,

từ đó tiết kiệm thời gian của lập trình viên và giúp việc xây dựng ứng dụng, sửa lỗi dễ dàng hơn

 Khả năng tương thích: Flutter sử dụng giao diện của chính nó nên lập trình viên sẽ gặp ít vấn đề liên quan tới khả năng tương thích hơn vì các giao diện này ít gặp sự vấn đề trên các phiên bản hay hệ điều hành khác nhau

 Mã nguồn mở: Flutter là một công nghệ mã nguồn mở được phát triển bởi Google và cộng đồng lập trình viên hoạt động tích cực Việc phát triển và ra mắt ứng dụng với Flutter hoàn toàn miễn phí Nhiều gói mở rộng và tài liệu được đóng góp giúp việc phát triển phần mềm bằng Flutter trở nên dễ dàng hơn

- Nhược điểm:

 Phải học ngôn ngữ mới: Nếu muốn lập trình với Flutter, lập trình viên cần phải học một ngôn ngữ mới là Dart Tuy nhiên đây không phải vấn đề lớn vì Dart là một ngôn ngữ dễ học

 Không phù hợp để xây dựng ứng dụng thuần theo giao diện Android hay iOS: một vài ứng dụng xây dựng giao diện thuần theo Android hay iOS sẽ không phù hợp với Flutter

 Kích thước ứng dụng lớn: vì Flutter không sử dụng giao diện trong hệ điều hành mà sử dụng thư viện của nó nên kích thước hiện tại của ứng dụng khá lớn Tuy nhiên Google nói rằng sẽ cải thiện điều này trong tương lai

 Công nghệ còn mới và các thư viện có sẵn chưa đa dạng: Flutter mới được giới thiệu bản chính thức chưa được 3 năm, vì vậy vẫn còn nhiều lỗi và vấn

đề chưa được giải quyết Cộng đồng tuy đang phát triển nhưng số lượng thư viện vẫn chưa thật sự đa dạng

2.2 Ngôn ngữ Dart

Flutter sử dụng ngôn ngữ lập trình Dart, ngôn ngữ Dart ra đời từ năm 2011 và được phát triển bởi Google, nhắm đến việc tạo ra ứng dụng đa nền tảng cho di động, máy tính, server và web Dart là theo hướng đối tượng, đơn giản, dễ tiếp cận

và cũng khá dễ hiểu Ngôn ngữ này có cú pháp giống ngôn ngữ C

- Khi trong chế độ debug Dart sẽ được biên dịch JIT ngay khi ứng dụng đang chạy, những gì lập trình viên thay đổi sẽ được cập nhật ngay lập tức nhờ đó tạo sự thuận tiện trong quá trình phát triển phần mềm

2.3 Kiến trúc Flutter

Flutter gồm hai tầng chính là Engine và Framework

- Tầng engine chứa một thư viện đồ họa 2D giúp render giao diện người dùng và máy ảo Dart là môi trường để thực thi mã và biên dịch mã Dart Đây cũng là nơi thực hiện việc kết nối với hệ thống

- Flutter framework: được viết bằng Dart, cung cấp các lớp, chức năng và widget được dùng để tạo ứng dụng Flutter Lập trình viên sẽ sử dụng chủ yếu tầng này để lập trình Flutter framework cung cấp hai tập hợp widget là Material và Cupertino ứng với hai hệ điều hành Android và iOS

12

13

3.2 Chi tiết các chức năng:

3.2.1 Thông tin chức năng đăng ký

Điều kiện trước Thiết bị phải có mạng

Dashboard

- Nhập thông tin sau đó ấn đăng ký

- Chấp nhận submit và mail xác nhận sẽ được gửi đến email

cá nhân mà người dùng đã sử dụng để đăng ký

- Người dùng xác nhận tài khoản và bắt đầu sử dụng tài khoản

3.2.2 Thông tin chức năng đăng nhập

14

Tên chức năng Đăng nhập

- Thiết bị đã được kết nối với internet

- Ấn vào đăng nhập để truy cập vào app

3.2.3 Thông tin chức năng quên mật khẩu

Tên chức năng Quên mật khẩu

xác thực email để xác nhận tài khoản

- Thiết bị phải có kết nối mạng

15

- Nhập thông tin email và nhấn xác nhận

- Kiểm tra email và bắt đầu reset mật khẩu

3.2.4 Thông tin chức năng đổi thông tin

Tên chức năng Đổi thông tin

- Thiết bị phải có kết nối mạng

- Ấn vào avatar cá nhân để mở trang profile

- Chọn change Information để bắt đầu thay đổi

- Nhập Username và chọn avatar sau đó ấn nút save để thay đổi

3.2.5 Thông tin chức năng tìm kiếm

16

Tên chức năng Tìm kiếm

- Thiết bị phải có mạng

- Người dùng phải được đăng nhập trước đó

- Hệ thống sẽ tự động lấy toàn bộ dữ liệu Songs, artist và album từ zing mp3

- Hiển thị thông tin lên trang search

17

3.2.6 Thông tin chức năng yêu thích

Tên chức năng Yêu thích

bài hát đấy

- Thiết bị phải có kết nối mạng

để bật menu

- Ấn vào favorite để lưu vào danh sách yêu thích hoặc bỏ yêu thích

lưu vào danh sách yêu thích hoặc bỏ yêu thích

3.2.7 Thông tin chức năng xem danh sách yêu thích

Tên chức năng Xem danh sách Yêu thích

- Thiết bị phải có kết nối mạng

18

- Chọn xem Favorite Songs

3.2.8 Thông tin chức năng xem danh sách album

Tên chức năng Xem danh sách album của bản thân

- Thiết bị phải có kết nối mạng

- Kéo xuống your Playlist và danh sách album của bạn sẽ xuất hiện trong đó

3.2.9 Thông tin chức năng them nhạc vào danh sách album

Tên chức năng Thêm nhạc vào danh sách album của bản thân

19

thân

- Thiết bị phải có kết nối mạng

để bật menu

- Ấn vào them vào playlist để bật danh sách album hiện có

- Ấn them album để them album và them nhạc vào album

3.2.10 Thông tin chức năng Thay đổi thông tin album

Tên chức năng Thay đổi thông tin album của bản thân

- Thiết bị phải có kết nối mạng

để bật menu

- Ấn vào them vào playlist để bật danh sách album hiện có

- Ấn bất kỳ album nào và chọn thay đổi thông tin

- Chọn avatar và tên sau đó ấn save để tiến hành thay đổi

20

3.2.11 Thông tin chức năng Xóa thông tin album

Tên chức năng Thay đổi thông tin album của bản thân

- Thiết bị phải có kết nối mạng

để bật menu

- Ấn vào them vào playlist để bật danh sách album hiện có

- Ấn bất kỳ album nào và chọn Xóa thông tin

21

- Thiết bị phải có kết nối mạng

hành phát nhạc

3.2.13 Thông tin chức năng Phát ngẫu nhiên

Tên chức năng Phát ngẫu nhiên

- Thiết bị phải có kết nối mạng

- Thiết bị phải có kết nối mạng

3.2.15 Thông tin chức năng hẹn giờ đi ngủ

Tên chức năng Hẹn giờ đi ngủ

- Thiết bị phải có kết nối mạng

- Phải có nhạc được phát

23

Sự kiện chính

- Người dùng Ấn vào icon

- Bottom Sheet sẽ được hiện ra với các lựa chọn thời gian

- Chọn thời gian và sau khoản thời gian đấy ứng dụng sẽ

tự động dừng bài hát

3.3 Thiết kế giao diện

3.3.1 Xây dựng màn hình đăng nhập của ứng dụng:

24

Danh sách các xử lý:

1 Sign in Sau khi đã nhập email

address và password

Đăng nhập vào app

Email address và password phải hợp

lệ mới có thể thực hiện

25

2 Forgot your

password

Mở màn hình quên mật khẩu

Được sử dụng khi người dung quên mật khẩu

đăng ký

Đăng ký tài khoản

3.3.2 Xây dựng màn hình Đăng ký:

26

Danh sách các xử lý:

nhập đầy đủ và hợp lệ

Đăng ký tài khoản vào hệ thống

Sau khi đăng ký sẽ

có mail gửi đến mail của người dùng để xác thực email

đăng nhập

3.3.3 Xây dựng màn hình Quên mật khẩu:

Email phải đã tồn tại

đăng nhập

28

3.3.4 Xây dựng màn hình chính:

Album có thể từ

cá nhân hoặc được

hệ thống recommend

3 Nút thêm trong

thẻ bài hát

Mở các lựa chọn liên quan đến bài hát

Các lựa chọn là Thêm vào danh sách yêu

thích,them vào playlist, xem nghệ

sĩ của bài hát

4 Avatar người

dùng

Mở trang thông tin người dùng

Trang thông tin người dung được dung để thay đổi thông tin của họ

và xem thông tin

30

3.3.5 Xây dựng màn hình Trang khám phá

Mô tả trang khám phá:

Bao gồm các album liên quan đến

 Favorite songs của người dung

 PlayBack albums

 Playlists của người dung

33

3.3.8 Xây dựng màn hình Album:

34

Danh sách các xử lý

vào danh sách playlist

2 Nút chọn phát

ngẫu nhiên

Phát nhạc ngẫu nhiên trong album

35

3.3.9 Xây dựng màn hình Phát nhạc:

36

Danh sách các xử lý

danh sách yêu thích

2 Nút thêm vào

album

Thêm nhạc vào playlist bất kỳ

3 Nút hẹn giờ đi

ngủ

Đặt thời gian hẹn giờ đi ngủ

4 Nút phát nhạc

ngẫu nhiên

Phát nhạc tiếp theo ngẫu nhiên theo playlist được phát

5 Nút phát nhạc lặp

lại

Lặp lại bài hát sau khi phát xong

37

• Ngoài ra phần mềm cũng có khả năng phát triển sau này, tuy rằng mang những hạn chế nhất định hạn do đặc điểm tổ chức phát triển có phần đơn giản

• Đây cũng là bước đầu giúp chúng em tích lũy kiến thức, kinh nghiệm và nghiệp vụ của một kĩ sư phát triển phần mềm

• Sau đồ án này, chúng em đã học được:

o Cách sử dụng Flutter để phát triển ứng dụng di động

o Kỹ năng tổ chức, làm việc nhóm trong suốt quá trình phát triển phần mềm

4.2 Hướng phát triển tiếp theo

Trong thời gian một học kì, tụi em đã nỗ lực cố gắng tìm hiểu và đã làm tốt nhất trong khả năng của mình để hoàn thiện đề tài này Tuy nhiên có rất nhiều sai sót và hạn chế Mong quý độc giả cùng các thầy/cô bỏ qua

Về những hạn chế:

 Hệ thống được xây dựng chưa thật sự là một ứng dụng hoàn chỉnh

 Hệ thống mới chỉ là 1 ứng dụng nhỏ về nghe nhạc cần có dữ liệu nghe nhạc lớn để ứng dụng có thể thích ứng hơn so với thực tế

 Vẫn có một vài lỗi nhỏ lặt vặt trong ứng dụng

Chính vì những hạn chế trên, hướng phát triển của đề tài là rất lớn, rộng

Rất mong quý độc giả cùng các thầy/cô chỉnh sửa bổ sung và bỏ qua những sai sót nhỏ Chúng tôi xin chân thành cảm ơn

38

TÀI LIỆU THAM KHẢO

[1] Tổng quan về Flutter (viblo.asia)

[2] Web Scraping

[3] Flutter Firebase

[4] Tìm hiểu về ngôn ngữ Dart - Phần I (viblo.asia) [5] Zing MP3 API