Bàitậplớn học phần lập trình cho thiết bị di Động

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN● Flutter là SDK dành cho thiết bị di động của Google để tạo ra các giaodiện native chất lượng cao trên iOS và Android trong thời gian n

PHENIKAA UNIVERSITY

FACULTY OF COMPUTER SCIENCE

BÀITẬPLỚN HỌC PHẦN: LẬP TRÌNH CHO THIẾT BỊ DI ĐỘNGSinh viên: 1 Nguyễn Minh Trường Giang MSV: 21011597

Trần Hữu Duy Phương

Trịnh Đàm Cảnh Sơn

Trưởng nhóm Thành viên Thành viên

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

Milestone Nội dung công việc

I

Nghiên cứu đề tài

100%

Lên ý tưởng thiết kế

sản phẩm, phân chia

công việc

Tìm hiểu về flutter

II

Phác thảo bố cục

Code MainPage:

- List bài hát

- Playlist

Code PlaylistPage:

-Sẽ được cập nhật bài

hát khi có bài hát

được add vào assets

III

Code MusicPage:

- Nghe nhạc

- Dừng/Phát bài hát

- Tua bài hát

MỤC LỤC

CHƯƠNG I GIỚI THIỆU 3

1.1 Đặt vấn đề 3

1.2 Các giải pháp đã có 3

1.3 Giải pháp đề xuất 3

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

2.1 Flutter 4

2.1.1 Giới thiệu về Flutter 4

2.1.2 Mô hình cấu tạo nên một project Flutter 6

2.1.3 Ưu Điểm của Flutter 7

2.1.4 Các thành phần quan trọng trong Flutter 8

2.2 Dart 9

2.2.1 Giới thiệu ngôn ngữ Dart 9

2.2.2 Đặc điểm của ngôn ngữ Dart: 11

2.2.3 Những ưu điểm của Dart 11

CHƯƠNG III KẾT QUẢ THỰC NGHIỆM 12

3.1 Ý tưởng đề tài 12

3.1.1 Tại sao chọn đề tài? 12

3.1.2 Một số ứng dụng nghe nhạc trực tuyến trên thiết bị di động 12

3.2 Phân tích và thiết kế hệ thống 16

3.2.1 Phân tích yêu cầu hệ thống 16

3.3 Mô tả sơ lược ứng dụng 16

CHƯƠNG IV TỔNG KẾT 19

4.1 Kết luận 19

4.2 Ưu điểm và khuyết điểm 19

4.3 Hướng phát triển 20

Tài liệu tham khảo 20

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

CHƯƠNG I GIỚI THIỆU

1.1 Đặt vấn đề

Nghệ thuật âm nhạc là một nhu cầu giải trí phổ biến hiện nay Với sự pháttriển của công nghệ di động, người dùng có thể dễ dàng nghe nhạc mọi lúc mọi nơithông qua các ứng dụng di động

Hiện nay, trên thị trường có rất nhiều ứng dụng nghe nhạc với nhiều tínhnăng và giao diện đa dạng Tuy nhiên, không phải ứng dụng nào cũng đáp ứng đủnhu cầu của người dùng Một số ứng dụng có giao diện phức tạp, khó sử dụng, khonhạc hạn chế hoặc chất lượng âm thanh thấp

Đã nhận thấy những hạn chế đó, nhóm chúng em đã phát triển một ứng dụngnghe nhạc mới với giao diện thân thiện với người dùng, giúp người dùng làm quen

dễ dàng hơn

1.2 Các giải pháp đã có

Hiện nay, có nhiều ứng dụng nghe nhạc trực tuyến phổ biến trên thị trường như Nhaccuatui, Spotify, Apple Music, Amazon Music, và Google Play Music Mỗi ứng dụng này đều có những ưu điểm và tính năng riêng, từ bộ sưu tập nhạc phong phú, giao diện thân thiện đến khả năng tương tác và tùy chỉnh playlist cá nhân Tuy nhiên, một số hạn chế như phí dịch vụ, quảng cáo gây gián đoạn trải nghiệm nghe nhạc, và sự hạn chế về quyền truy cập vào một số nội dung có thể gặp phải

1.3 Giải pháp đề xuất

- Với mục tiêu cung cấp một trải nghiệm nghe nhạc trực tuyến tốt nhất cho người dùng, giải pháp đề xuất là xây dựng một ứng dụng nghe nhạc mới mang tính độc đáo và cải tiến so với các đối thủ cạnh tranh Các tính năng có thể bao gồm:

- Dịch Vụ Không Quảng Cáo: Cung cấp dịch vụ không quảng cáo để tối ưu

hóa trải nghiệm nghe nhạc, giảm gián đoạn và tăng tính liên tục

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

- Chất Lượng Phát Nhạc Cao: Đảm bảo chất lượng âm thanh tốt nhất cho

người dùng, bao gồm cả chất lượng cao và chất lượng tối ưu để phù hợp với mọi điều kiện mạng

CHƯƠNG II CƠ SỞ LÝ THUYẾT

2.1 Flutter

2.1.1 Giới thiệu về Flutter

Flutter là một Framework viết trên nền ngôn ngữ Dart Flutter được sinh ra như mộtCross-platform framework nhưng khác với những Cross-platform hiện tại, Flutterviết mã và build ra các đoạn mã thực thi tương ứng trên các thiết bị khác nhau thay

vì build ra thành các đoạn mã được tối ưu và chạy trên những môi trường trunggian

Flutter được viết chia làm hai tầng Tầng ở trên sử dụng ngôn ngữ cung cấpcác đoạn mã xây dựng lên một ứng dụng Flutter Các đoạn mã này cung cấpphương tiện để có thể thay đổi và chỉnh sửa chúng Từ đó giúp ứng dụng củalập trình viên có thể được tùy chỉnh theo mong muốn Tầng Application nàygiú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 C++ TầngShell này chứa các công tụ trợ giúp ứng dụng Flutter trong quá trình chạy Nổibật cần lưu ý ở tầng này là máy ảo Dart VM Khái niệm máy ảo là khái niệm

về một ứng dụng chạy song song với mã nguồn chính như một phần của ứngdụng

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

● Flutter là SDK dành cho thiết bị di động của Google để tạo ra các giaodiện native chất lượng cao trên iOS và Android trong thời gian ngắn.Flutter làm việc với source code có sẵn, được sử dụng bởi các nhà pháttriển và các tổ chức trên khắp thế giới, đồng thời nó open-source và miễnphí

● Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng củamình vào cuộc sống trên iOS và Android Nếu bạn chưa có kinh nghiệmphát triển trên thiết bị di động, thì Flutter là một cách dễ dàng và nhanhchóng để xây dựng các ứng dụng di động tuyệt đẹp Nếu bạn là một nhàphát triển iOS hoặc Android có kinh nghiệm, bạn có thể sử dụng Fluttercho các View của bạn và tận dụng nhiều code Java / Kotlin / ObjC / Swifthiện có của bạn

● Flutter sử dụng Dart, một ngôn ngữ nhanh, hướng đối tượng với nhiều tínhnăng hữu ích như mixin, generic, isolate, và static type

● Flutter có các thành phần UI của riêng nó, cùng với một cơ chế để kết xuấtchúng trên nền tảng Android và iOS Hầu hết các thành phần giao diệnngười dùng, đều sẵn dùng, phù hợp với các nguyên tắc của MaterialDesign

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

2.1.2 Mô hình cấu tạo nên một project Flutter

Hình 1 Mô hình cấu tạo nên một project Flutter

● Phần lớn nhất chính là: My App

● Bên trong Material App sẽ có các thuộc tính: title, theme, và home Trong

đó, tên title có ý nghĩa tương đương với Android @string/app_name đểđược đặt trong AndroidManifest với thuộc tính application:android: name,hay với iOS là Product Name, hay chí ít là Identity#Display name Têntheme này có vai trò tương tự như phần theme trong values/styles củaAndroid Cuối cùng là home Vai trò của tên này tương ứng với việc bạnđịnh nghĩa Activity

● Scaffold: đóng vai trò như phần nền để bố trí các thành phần khác theophong các Material Design hay Material Theming Nếu bạn đã quen với

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY ANviệc viết ứng dụng Android theo phong cách mặc định là Google cung cấpthông qua theme Theme.AppCompat hay android:Theme.Material thì bạnkhông còn lạ gì với Scaffold này Nó tương tự như vậy và giống như là sựtổng hợp của DrawerLayout và CoordinatorLayout vậy.

● AppBar: Nó tương tự như Toolbar hay ActionBar trong Android Sdk vàSupport Lib Tuy nhiên, nó không đơn giản như Toolbar hay ActionBar, vìthực sự bạn phải chỉ định Widget con của nó bằng tay, thay vì dùng hàngloạt methods để thực hiện các thao tác đã định sẵn với các Widgets mặcđịnh trong Android như setText hay setNavigationIcon

● Column và Row: Đây sẽ là những widget quen thuộc đối với các bạnchuyên code Android, vì chúng tương đồng với LinearLayout Trong khiRow tương ứng với LinearLayout với orientation là horizontal, tức chiềungang, thì Column resemble vertical LinearLayout, tức chiều dọc Còn đốivới các bạn chưa thao tác với Android Sdk, thì chúng sẽ sắp xếp tuần tự cácwidget con theo một hướng ngang từ start sang end đối với Row, hay từ topxuống bottom với Column

● Center: Đây sẽ là một Widget có thể gây cho bạn sự lầm lẫn khá tai hại bởihành vi của nó có khác khi nó đi một mình hay đi chung với ai đó Nếu nó

đi một mình, và parent của nó không đi kèm – hay nói theo kiểu vui làkhông có cặp kè – với Widget ngang hàng (với tên parent đó) nào khác vàbản thân của nó cũng không “nắm tay” ai, thì kích thước của nó sẽ tăng lênchiếm trọn không gian Còn nếu nó phải đi kèm với ai đó, thì nó sẽ e dè màđiều chỉnh kích thước chỉ vừa đủ bọc con/child của nó mà thôi

2.1.3 Ưu Điểm của Flutter

● Fast Development: Tính năng Hot Reload hoạt động trong milliseconds đểhiện thị giao diện tới bạn Sử dụng tập hợp các widget có thể customizable

để xây dựng giao diện trong vài phút Ngoài ra Hot Reload còn giúp bạn

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY ANthêm các tính năng, fix bug tiết kiệm thời gian hơn mà không cần phảithông qua máy ảo, máy android hoặc iOS

● Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng giaodiện của Flutter vô cùng đẹp mắt theo phong cách Material Design vàCupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling

● Native Performance: Các widget của flutter kết hợp các sự khác biệt củacác nền tảng ví dụ như scrolling, navigation, icons, font để cung cấp mộthiệu năng tốt nhất tới iOS và Android

2.1.4 Các thành phần quan trọng trong Flutter

❖Widget

Widget chịu trách nhiệm hình thành cấu trúc của Diagnosticable Tree(Cây chuẩn đoán là một cấu trúc dữ liệu dạng cây hỗ trợ việc định nghĩacấu trúc giao diện được vẽ lên trong ứng dụng viết bằng Flutter) trongkhi class element chịu trách nhiệm quản lý trạng thái của từng widgettrên cái cây đó Tư tưởng cơ bản của Flutter tương tự như một WebApplication Tất cả trong một Flutter căng ra một mảnh vải là canvas và

vẽ tất cả mọi thứ lên đó Khi trạng thái của dữ liệu thay đổi ví dụ nhưngười dùng chuyển màn hình hay thay đổi dữ liệu trên màn hình đượcphản ánh thông qua việc xóa đi các widget cũ và vẽ lên các widget mới.Chính vì vậy thay vì phải biết đến các StoryBoard (trong iOS) hay cácActivity (trong Android), Flutter đưa tất cả các khái niệm liên quan đếngiao diện về một khái niệm duy nhất gọi là widget Việc quản lý trạngthái của các widget cũng được đưa về cho lập trình viên thực hiện Điểmkhác biệt này cũng đặc biệt hơn khi Dart là ngôn ngữ Component Based.Trong Flutter, khi muốn điều chỉnh trạng thái về kích thước hay vị trí củamột widget đó, ta không thực hiện việc đó trong widget hiện tại mà đượckhuyến khích bọc widget đó trong một widget nào đó chỉ chuyên làmviệc này Điều này khiến cho tính chất "Trong Flutter thì mọi thứ đều là

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

widget " lại càng chuẩn hơn bao giờ hết Màn hình là widget, thành phầngiao diện cũng là widget, thậm chí cả thông tin về layout cũng làwidget

từ trong State hoàn toàn có thể lấy được những giá trị được truyền vàobên trong StatefulWidget thay vì phải truyền vào thông qua hàm khởitạo

❖StatelessWidget

Là các widget không chứa State Tất cả các giá trị của StatelessWidget đều

là final → không thể thay đổi trong thời gian chạy, do đó

StatelessWidget chỉ hiển thị những gì được truyền vào trong constructor.Ngược lại, để thay đổi trạng thái của widget ta dùng StatefulWidget

2.2 Dart

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

2.2.1 Giới thiệu ngôn ngữ Dart

Dart là ngôn ngữ lập trình dạng hướng đối tượng Cũng là một ngôn ngữ viết ởmột lần dùng ở nhiều nơi nhưng khác với Java, Dart thay vì tạo ra những môitrường trung gian giữa code thực thi và môi trường thiết bị thì Dart sử dụngnhững trình biên dịch khác nhau để biên dịch ra mã máy tương ứng Hiện tạiDart đang hỗ trợ để tạo ra những ứng dụng trên iOS, Android, Fuchsia vàWeb Riêng với Web Application, Dart biên dịch bản thân thành codeJavaScript (ở trường hợp này, Dart được coi như là một syntax sugar cho

JavaScript)

Dart đồng thời cũng là một ngôn ngữ hỗ trợ asynchrony Tức nghĩa là trongDart chỉ có một dòng chảy tuần tự chảy từ trên xuống dưới Code được đưavào hàng đợi và hoàn toàn có thứ tự khi được thực thi

● Dart là ngôn ngữ lập trình mới, được phát triển bởi Google, hiện đã đượcchấp thuận bởi tổ chức Ecma

● Dart được sử dụng để xây dựng các loại ứng dụng: web, server, di động(IOS và Android với công cụ Flutter)

● Dart là ngôn ngữ hỗ trợ lập trình hướng đối tượng, cú pháp kiểu C, mã codeDart có thể biên dịch thành JavaScript để chạy trên trình duyệt Nó hỗ trợnhững khái niệm lập trình hiện đại như giao diện lớp, lớp trừu tượng

● Từ ngôn ngữ lập trình Dart, Google giới thiệu SDK Flutter để sử dụng ngônngữ Dart phát triển ứng dụng di động chạy đa nền tảng (Một lần viết codebuild ra ứng dụng cho IOS và Android)

Tại sao lại lựa chọn ngôn ngữ Dart?

Các nhà phát triển tại Google và các nơi khác sử dụng Dart để tạo các ứngdụng chất lượng cao, quan trọng cho iOS, Android và web Với các tính năngnhắm đến sự phát triển phía khách hàng, Dart rất phù hợp cho cả ứng dụng di

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY ANđộng và web Dart giúp bạn tạo ra những trải nghiệm đẹp, chất lượng cao trêntất cả các màn hình, với:

● Một ngôn ngữ được tối ưu hóa cho client

● Framework mạnh mẽ

● Công cụ linh hoạt

2.2.2 Đặc điểm của ngôn ngữ Dart:

● Dart đi kèm với trình soạn thảo nhẹ, Bạn có thể dung Dart Editor để viết,chạy và gỡ lỗi các ứng dụng Dart, Dart editor có thể giúp bạn phát hiện cáclỗi tiềm năng

● Giúp bạn viết code tốt và nhanh hơn

● Dart được thiết kế để biên dịch sang JavaScript

2.2.3 Những ưu điểm của Dart

● Năng suất Cú pháp Dart rõ ràng và súc tích, công cụ của nó đơn giảnnhưng mạnh mẽ Type-safe giúp bạn xác định sớm các lỗi tinh tế Dart cócác thư viện cốt lõi và một hệ sinh thái gồm hàng ngàn package

● Nhanh Dart cung cấp tối ưu hóa việc biên dịch trước thời hạ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

● Di động Dart biên dịch thành mã ARM và x86, để các ứng dụng di độngcủa Dart có thể chạy tự nhiên trên iOS, Android và hơn thế nữa Đối vớicác ứng dụng web, chuyển mã từ Dart sang JavaScript

● Dễ gần Dart quen thuộc với nhiều nhà phát triển hiện có, nhờ vào cúpháp và định hướng đối tượng không gây ngạc nhiên của nó Nếu bạn đãbiết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sauvài ngày

BÁO CÁO BÀI TẬP LỚN CUỐI KỲ GVHD: ĐẶNG THỊ THÚY AN

● 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 tại trong thời gian ngắn, chẳng hạn như các widget UI,thông qua phân bổ đối tượng nhanh và GC 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ượngFuture và Stream

CHƯƠNG III KẾT QUẢ THỰC NGHIỆM

3.1 Ý tưởng đề tài

3.1.1 Tại sao chọn đề tài?

Trong thời đại số hóa hiện nay, việc thư giãn không còn bị gò ép vào một khônggian cụ thể nào đó như trước Bạn có thể tận hưởng giây phút giải trí bất cứ lúcnào, ở bất kỳ đâu chỉ với một chiếc điện thoại thông minh

Ứng dụng nghe nhạc trực tuyến là một ví dụ điển hình Nó không chỉ là một công

cụ giải trí, mà còn là một phần không thể thiếu trong cuộc sống hàng ngày củamọi người Thời đại này, khi thời gian nghỉ ngơi và thư giãn trở nên quý giá vàngày càng khan hiếm, việc sử dụng các ứng dụng nghe nhạc trực tuyến trên thiết

bị di động trở thành một giải pháp thông minh và tiện lợi

Với sự đa dạng của các ứng dụng nghe nhạc, người dùng không chỉ được thoảimái thưởng thức những bản nhạc mình yêu thích mọi lúc mọi nơi, mà còn có cơhội khám phá và khai thác các thể loại âm nhạc mới một cách dễ dàng Đặc biệt,việc có thêm các tính năng đặc biệt như tạo danh sách phát cá nhân, khuyến nghịbài hát dựa trên sở thích và lịch sử nghe nhạc cũng làm tăng thêm sự hứng thúcho người dùng Từ những lợi ích như vậy, việc phát triển một ứng dụng như

"MyMusicApp" không chỉ đáp ứng nhu cầu giải trí mà còn mang lại sự tiện lợi

và trải nghiệm thú vị cho người dùng trong cuộc sống hiện đại

3.1.2 Một số ứng dụng nghe nhạc trực tuyến trên thiết bị di động

❖Spotify: