Báo cáo chuyên Đề học phần lập trình trên thiết bị di Động Đề ti xây dựng app nghe nhạc zing mp3

Chính vì vậy, để đáp ứng những yêu cầu đó, nhóm chúng em đã quyếtđịnh xây dựng một ứng dụng di động nghe nhạc trực tuyến, mang đến trảinghiệm nghe nhạc tiện lợi, đa dạng và đáp ứng tốt c

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG

PHIẾU CHẤM ĐIỂM

1 Mai Duy Hưng

2 Phùng Việt Anh

Giảng viên chấm 1:

Giảng viên chấm 2:

DANH MỤC

DANH MỤC HÌNH ẢNH 4

LỜI MỞ ĐẦU 5

CHƯƠNG 1: GIỚI THIỆU LẬP TRÌNH DI ĐỘNG VÀ REACT NATIVE 6

1.1 Giới thiệu về lập trình di động 6

1.1.1 Khái quát về lập trình trên thiết bị di động 6

1.1.2 Các đặc điểm của lập trình di động 6

1.1.3 Xu hướng công nghệ tương lai về lập trình di động 7

1.2 Giới thiệu về React Native 7

1.2.1 React Native là gì 7

1.2.2 Tại sao nên dùng React Native 8

1.2.3 Cách hoạt động React Native 8

CHƯƠNG 2: APP NGHE NHẠC ZING MP3 10

2.1 Giới thiệu đề tài 10

2.2 Phân tích thiết kế hệ thống 10

2.2.1 Sơ đồ UseCase tổng quát 10

2.2.2 UseCase Diagram 11

2.2.3 Sequence Diagram 13

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 16

3.1 Trang thư viện 16

3.2 Trang khám phá 17

3.3 Trang #Zingchart 18

3.4 Trang cá nhân 19

3.5 Trang khuyến mại 20

3.6 Trang thông báo 21

3.7 Trang cài đặt 22

KẾT LUẬN 23

DANH MỤC HÌNH ẢNH

Hình 2 1 Biểu đồ usecase tổng quát 11

Hình 2 2 Biểu đồ usecase đăng nhập 11

Hình 2 3 Biểu đồ usecase nghe nhạc 12

Hình 2 4 Biểu đồ usecase xem thể loại 13

Hình 2 6 Biểu đồ tuần tự chức năng đăng nhập 14

Hình 2 7 Biểu đồ tuần tự chức năng nghe nhạc 14

Hình 2 8 Biểu đồ tuần tự chức năng xem thể loại 15

Hình 3 1 Giao diện thư viện 16

Hình 3 2 Giao diện khám phá 18

Hình 3 3 Giao diện #Zingchart 18

Hình 3 4 Giao diện cá nhân 20

Hình 3 5 Giao diện khuyến mại 20

Hình 3 6 Giao diện thông báo 21

Hình 3 7 Giao diện cài đặt 22

LỜI MỞ ĐẦU

Cùng với sự phát triển vượt bậc của CNTT, con người đã xây dựng, pháttriển và bảo trì các trang web được lưu trữ trên internet dưới hình thức lập trìnhweb Một trang web đơn giản có thể được viết bằng ngôn ngữ HTML, CSS vàchỉ chứa vài trăm dòng lệnh Tuy nhiên đối với trang web lớn như Facebook cóthể lên đến 60 triệu dòng lệnh để phát triển hoàn chỉnh trang web

Trước nhu cầu ngày càng cao của thị trường về giải trí âm nhạc, cậpnhật thông tin về nghệ sĩ, album, và bảng xếp hạng, việc tạo ra một ứng dụngnghe nhạc trực tuyến là một giải pháp hiệu quả Thay vì phải tìm kiếm và muanhạc theo cách truyền thống, người nghe có thể trải nghiệm thế giới âm nhạcmọi nơi, mọi lúc thông qua điện thoại di động của mình

Chính vì vậy, để đáp ứng những yêu cầu đó, nhóm chúng em đã quyếtđịnh xây dựng một ứng dụng di động nghe nhạc trực tuyến, mang đến trảinghiệm nghe nhạc tiện lợi, đa dạng và đáp ứng tốt cho mọi người Ứng dụngcủa chúng em không chỉ giúp người nghe tiết kiệm thời gian và chi phí khi tìmkiếm và thưởng thức âm nhạc mà còn tạo ra một môi trường quản lý tài khoản

và tương tác dễ dàng Đây là lý do chúng tôi đã chọn đề tài "Xây dựng Appnghe nhạc Zing MP3" để làm đồ án của mình

CHƯƠNG 1: GIỚI THIỆU LẬP TRÌNH DI ĐỘNG V REACT NATIVE 1.1 Giới thiệu về lập trình di động

1.1.1 Khái quát về lập trình trên thiết bị di động

Lập trình trên thiết bị di động là quá trình tạo ra ứng dụng và phần mềmchạy trên các thiết bị di động như điện thoại di động và máy tính bảng Đây làmột lĩnh vực phát triển phổ biến và có sự yêu cầu ngày càng tăng do sự gia tăngcủa thiết bị di động trong cuộc sống hàng ngày của mọi người Hệ điều hành diđộng: Các thiết bị di động chạy trên các hệ điều hành di động như Android, iOS(cho iPhone và iPad), và Windows Phone

Ứng dụng di động: Ứng dụng di động có thể làm nhiều công việc khácnhau, từ ứng dụng xã hội đến trò chơi, ứng dụng văn phòng, ứng dụng thươngmại điện tử và nhiều loại ứng dụng khác Các ứng dụng này phải được phát triển

và tối ưu hóa cho các màn hình di động nhỏ và tương tác cảm ứng

Giao diện người dùng (UI) và trải nghiệm người dùng (UX Thiết kế):

giao diện người dùng thân thiện và trải nghiệm người dùng tốt là yếu tố quantrọng trong lập trình di động Điều này bao gồm việc thiết kế các thành phầngiao diện như nút, hình ảnh, và thao tác cảm ứng để tạo ra trải nghiệm dễ sửdụng và hấp dẫn

Kết nối mạng và dữ liệu: Lập trình di động thường liên quan đến việc sửdụng kết nối mạng để truy cập dữ liệu từ máy chủ hoặc dịch vụ web Điều này

có thể bao gồm việc gửi và nhận dữ liệu, đồng bộ hóa dữ liệu và quản lý bảomật

Thử nghiệm và triển khai: Lập trình viên di động cần thực hiện thửnghiệm kỹ thuật để đảm bảo rằng ứng dụng hoạt động đúng cách trên các thiết

bị di động khác nhau và sau đó triển khai ứng dụng lên các cửa hàng ứng dụngnhư Google Play Store và Apple App Store

Cập nhật và duy trì: Sau khi ứng dụng được triển khai, lập trình viên phảiliên tục duy trì và cập nhật để sửa lỗi, thêm tính năng mới và đảm bảo tính tươngthích với các phiên bản mới của hệ điều hành di động

1.1.2 Các đặc điểm của lập trình di động

- Dễ tiếp cận, dễ tìm hiểu và dễ học

- Giúp lập trình viên tạo ra ứng dụng cho người sử dụng

- Giúp hiện thực hóa ý tưởng của lập trình viên.

- Giúp lập trình viên tạo ra ứng dụng là cầu nối giao tiếp với mọi người trên thếgiới qua số lượng người download và sử dụng ứng dụng của mình

1.1.3 Xu hướng công nghệ tương lai về lập trình di động

Đa dạng về phương pháp phát triển: Lập trình di động có nhiều phươngpháp khác nhau như web app, hybrid app và native app, nhưng tất cả đều cầnchạy trên mã gốc của một nền tảng cụ thể

Yêu cầu hiểu biết sâu về nền tảng: Các tổ chức khi muốn phát triển ứngdụng cho một nền tảng cụ thể thường tuyển dụng những người có kiến thứcchuyên sâu về nền tảng đó

Quản lý dự án không chỉ dành cho quản lý: Lập trình viên cũng cần hiểuquá trình phát triển phần mềm và có khả năng làm việc trong các quy trình pháttriển phần mềm như Agile để tối ưu hóa quá trình làm việc

Quy trình Agile: Agile là một phương pháp giúp rút ngắn và tinh gọn quátrình phát triển phần mềm Có nhiều phương pháp khác nhau trong Agile nhưScrum, Kanban, và XP, và lập trình viên cần chọn phương pháp phù hợp với dự

Sự ra đời của React Native giúp cho lập trình viên web có thể viết ứngdụng native để khắc phục các điểm yếu của ứng dụng web và hybrid Và nhờ đó,chỉ với một kỹ sư thành thạo javascript, bạn có thể chiến đấu trên mọi mặt trậnweb, desktop, server và bây giờ là mobile Điều này không những có lợi cho lậptrình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuốivới ít nhân lực hơn

Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năngLive Reload tương tự tính năng Hot Replacement Module trong Webpack Tính

năng Live Reload khác tính năng Reload, trong khi Live Reload chỉ tải lại chứcnăng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn Ngoài ra, bạncũng dễ dàng debug javascript trong Chrome và Safari Đối với những lỗi thuộcNative thì phải cần đến XCode cho iOS hoặc Android Studio cho Android

1.2.2 Tại sao nên dùng React Native

- Có thể tái sử dụng code

React Native cho phép các developer có thể tái sử dụng code trong khipháttriển các ứng dụng đa nền tảng Đặc biệt, developer có thể tái sử dụng hầunhư 80-90% các đoạn code thay vì phải viết và tạo các ứng dụng riêng biệt chocác nền tảngkhác nhau Ưu điểm này giúp người dùng:

 Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng

 Tận dụng nguồn nhân lực tốt hơn

 Duy trì ít code hơn, ít bugs hơn

 Các tính năng trong cả 2 platforms cũng tương tự nhau

- Cộng đồng người dùng lớn

React Native được đánh giá là một trong những Framework được yêuthíchnhất (khảo sát của stack overflow vào năm 2019) Nhờ cộng đồng ngườidùng rất lớntrên toàn thế giới, bạn có thể tìm sự hỗ trợ nếu gặp phải bugs

- Tính ổn định và tối ưu

Được phát triển bởi Facebook, React Native có hiệu năng ổn định khácao

 Mã React Native giúp đơn giản hóa quá trình xử lý dữ liệu

 Đội ngũ phát triển ứng dụng không quá lớn

 Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau

 Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid

1.2.3 Cách hoạt động React Native

Ứng dụng viết bằng React Native được chia làm 2 phần: phần view (hiểnthị) và phần xử lý

Phần hiển thị được biên dịch từ javascript sẽ map với những componentcủa hệ thống ví dụ: điều hướng, tab, touch…Phần view này được lấy cảm hứng

từ Virtual DOM của React JS, mọi xử lý view được thực hiện trên một câyDOM ảo, sau đó được React Native render lại bằng native view

Phần xử lý vẫn được thực hiện trực tiếp bằng ngôn ngữ javascript: ví dụ

“1+1=2”, biểu thức này được xử lý dưới bộ core thực thi Javascript, không phải thông dịch qua Java hay Swift/Objective-C rồi mới làm phép tính

CHƯƠNG 2: APP NGHE NHẠC ZING MP3

2.1 Giới thiệu đề tài

Mô tả đề tài: Âm nhạc đóng vai trò quan trọng trong cuộc sống con người, giúp

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 conngười với con người Do đó nhu cầu nghe nhạc cũng như chia sẻ những bài hátmình yêu thích cho mọi người cùng thưởng thức hiện nay đang rất cao vì vậyapp nghe nhạc Zing MP3 được ra đời

Chức năng và tính năng:

 Danh mục đa dạng: Hiển thị các danh mục bài hát đa dạng và phong

phú

 Thông tin chi tiết bài hát: Cung cấp thông tin chi tiết về bài hát bao gồm

hình ảnh, mô tả, tên nghệ sĩ và sự đánh giá từ những người nghe khácnhau

 Ưu điểm và lợi ích:

o Cung cấp trải nghiệm nghe nhạc cho người dùng

o Tạo cơ hội cho các nghệ sĩ tiếp cận người dùng một cách dễ dàng

o Hỗ trợ người dùng trong việc tìm kiếm và lựa chọn bài hát phù hợp

o Tạo nền tảng cho việc chia sẻ sở thích cá nhân và kết nối cộng đồng yêuthích âm nhạc

2.2 Phân tích thiết kế hệ thống

2.2.1 Sơ đồ UseCase tổng quát

Hình 2 1 Biểu đồ usecase tổng quát

Mục đích Người dùng truy cập vào ứng dụng để sử dụng

Mô tả - Dòng sự kiện chính: Use case này bắt đầu khi

tác nhân muốn sử dụng các tính năng cần đăngnhập vào app

+ Ứng dụng sẽ hiển thị ra app+ Tác nhân chọn nút đăng nhập và ứng dụng

chuyển trang để đăng nhập gmail.

+ Người dùng nhập tên người dùng và mật khẩucủa họ vào trang đăng nhập Gmail

+ Trang đăng nhập sẽ tự động cung cấp mã nếutài khoản mật khẩu đúng

+ Ứng dụng chuyển hướng trang lại về app vàcho phép người dùng sử dụng những chức năngkhi đã đăng nhập

Mục đích Người dùng truy cập vào ứng dụng để nghe nhạc

Mô tả - Dòng sự kiện chính: Use case này bắt đầu khi

tác nhân muốn nghe nhạc + Người dùng cần đăng nhập để nghe nhạc+ Người dùng chọn một bài hát

+ Ứng dụng phát bài nhạc đó

UseCase Xem thể loại

Hình 2 4 Biểu đồ usecase xem thể loại

Mô tả - Dòng sự kiện chính: Use case này bắt đầu khi

tác nhân muốn xem thể loại+ Người dùng đăng nhập vào ứng dụng+ Vào trang danh sách để xem

2.2.3 Sequence Diagram

Biểu đồ tuần tự chức năng đăng nhập

Hình 2 5 Biểu đồ tuần tự chức năng đăng nhập

Biểu đồ tuần tự chức năng nghe nhạc

Hình 2 6 Biểu đồ tuần tự chức năng nghe nhạc

Biểu đồ tuần tự chức năng xem thể loại

Hình 2 7 Biểu đồ tuần tự chức năng xem thể loại

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG

3.1 Trang thư viện

Hình 3 1 Giao diện thư viện

3.2 Trang khám phá

Hình 3 2 Giao diện khám phá

3.3 Trang #Zingchart

Hình 3 3 Giao diện #Zingchart

3.4 Trang cá nhân

Hình 3 4 Giao diện cá nhân

3.5 Trang khuyến mại

Hình 3 5 Giao diện khuyến mại

3.6 Trang thông báo

Hình 3 6 Giao diện thông báo

3.7 Trang cài đặt

Hình 3 7 Giao diện cài đặt

KẾT LUẬN

Trong hành trình học môn lập trình trên thiết bị di động, chúng em đã trảiqua những thử thách, học được nhiều điều mới mẻ và có cơ hội ứng dụng kiếnthức vào thực tế Môn học không chỉ giúp chúng em làm quen với các ngôn ngữlập trình di động như nodejs, react-native mà còn mở ra một cửa sổ mới về sựsáng tạo và tiềm năng phát triển không ngừng trong lĩnh vực này

Qua bài báo cáo này, chúng em đã có cơ hội áp dụng những kiến thức và

kỹ năng đã học vào việc xây dựng ứng dụng thực tế Những đồng hành khôngngừng từ thầy cô đã giúp chúng em vượt qua những thách thức kỹ thuật và pháttriển khả năng giải quyết vấn đề của mình

Quan trọng hơn, chúng em nhận ra tầm quan trọng của trải nghiệm ngườidùng trong việc phát triển ứng dụng di động Sự tập trung vào giao diện ngườidùng và trải nghiệm người dùng cuối cùng là chìa khóa để tạo ra những ứngdụng được người dùng chào đón và yêu thích

Môn học này không chỉ giúp chúng em mở rộng kiến thức về lập trình diđộng mà còn tạo ra những cơ hội mới để phát triển bản thân Chúng em tự tinhơn trong việc đối mặt với thách thức công nghệ, và đồng thời, chúng em nhận

ra rằng hành trình học tập này chỉ là bước đầu tiên trong sự nghiệp của chúngem

Chân thành cảm ơn thầy cô đã luôn hỗ trợ và động viên chúng em trongsuốt thời gian học môn này Những kiến thức và kinh nghiệm chúng em thuđược sẽ là nguồn động viên lớn để chúng em tiếp tục phát triển và khám pháthêm về thế giới lập trình di động

Tuy vậy, do những hạn chế về trình độ, thời gian nên chúng emkhông khỏi có những thiếu sót trong quá trình tìm hiểu, nghiên cứu cũng nhưthực nghiệm Chúng em rất mong nhận được đánh giá và chỉnh sửa từ các thầycô