Đồ án chuyên ngành 1 Đề tài xây dựng ứng dụng nghe nhạc rhythmmusic

Việc trao đôi thông tin, chia sẻ dữ liệu là rất quan trọng và cần thiết, thông qua đó chúng ta có thể biết được rất nhiều kiến thức mới, đối với âm nhạc mà nói, nó giúp mọi người gan ké

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

TRUYEN THONG VIET-HAN Khoa Khoa hoc May tinh

VU

DO AN CHUYEN NGANH 1

DE TAI: XAY DUNG UNG DUNG

NGHE NHAC RHYTHMMUSIC

Sinh viên thựchiện : HOANG TIEN LUC Lop :21SE4

Giảng viên hướng dẫn : THS.NGUYÊN THANH CẦM

Đà Nẵng, tháng 03 năm 2024

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

TRUYEN THONG VIET-HAN Khoa Khoa hoc May tinh

VU

ĐỎ ÁN CHUYÊN NGÀNH 1

ĐÈ TÀI: XÂY DỰNG ỨNG DỤNG

NGHE NHAC RHYTHMMUSIC

Sinh viên thựchiện : HOANG TIEN LUC Lop :21SE4

Giảng viên hướng dẫn : THS.NGUYÊN THANH CẦM

Đà Nẵng, tháng 03 năm 2024

NHẬN XÉT CỦA GIẢNG VIÊN

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

THS.NGUYÊN THANH CẢM

LỜI CÁM ƠN

Đề hoàn thành tốt bài báo cáo đồ án cơ sở này, đầu tiên em xin chân thành cảm ơn

thầy, cô trong TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYÊN

THONG VIỆT-HÀN đã tận tình truyền đạt kiến thức trong học tập, đặc biệt là thay Đăng Đại Thọ đã hướng dẫn em hoàn thành bài báo cáo Với vốn kiến thức được tiếp thu trong quá trình học không chỉ là nền tảng cho quá trình thực hiện báo cáo đỗ án cơ

sở mà còn là hành trang quy báu để em thực hiện tốt bài báo cáo thực tập tốt nghiệp

Hơn nữa, em còn có được những kinh nghiệm về giao tiếp xã hội, trải nghiệm môi

trường làm việc chuyên nghiệp để có thể tự tin hơn khi chuẩn bị cho công việc sắp toi cua minh

Sinh viên thực hiện

Lực

HOANG TIEN LUC

MỞ ĐẦU

1 Lý do chọn đề tài

Trong quá trình công nghiệp hóa - hiện đại hóa đất nước Việc trao đôi thông tin, chia sẻ dữ liệu là rất quan trọng và cần thiết, thông qua đó chúng ta có thể

biết được rất nhiều kiến thức mới, đối với âm nhạc mà nói, nó giúp mọi người

gan két lan nhau, trao cho nhau những điều muốn nói thông qua các bài nhạc,

âm nhạc có thê xoa dịu nỗi đau, chữa lành đi mọi vết thương, không chỉ thế, âm nhạc là một thứ không thê thiếu trong cuộc sông thường ngày Nắm bắt được nhu cầu cũng như xu thế mọi người, tôi đã tìm hiểu, nghiên cứu để tạo nên một ứng dụng nghe nhạc đa nền tảng, thứ mà mọi người có thế nghe được mọi lúc moi noi Vi vậy, tôi chọn đề tài “Xây dựng ứng dụng nghe RhythmMusic”

2 Mục đích nghiên cứu

- Tìm hiểu cách thiết kế giao diện đẹp mắt, thao tác đơn giản

- Tìm hiểu các thư viện hỗ trợ code như NodeJs, ReactJs

- Tích luỹ kinh nghiệm và trau dồi kiến thức

3 Phạm vi và phương pháp nghiên cứu

- Phạm vi: Trong lĩnh vực lập trình

- Phương pháp: Nghiên cứu thư viện, cách hoạt động, nghiên cứu công cụ

4 Bồ cục bai bao cao

Bài báo cáo gồm 4 chương:

- Chương 1: Giới thiệu tông quan về đề tài

- Chương 2: Phân tích và thiết kế hệ thông

- Chương 3: Quá trình thực hiện và kết qua dé tai

- Chương 4: Kết luận và hướng phát triển

MỤC LỤC

3 Đối tượng và phạm vi nghiên cứu 8

II Tổng quan về công cụ xây dựng đề tài 2-5-0 2 222 2222111211 xrrkrrrrrrrree 9

1 Visual Studio Code cà Là HH 9H gì KT Tà 90000 ke 9

PM 'IỀ., Ả d sess 12

CHƯƠNG 2: PHẦN TÍCH VÀ THIẾT KẾ HỆ THNG 55-55 555°S5S222sexxsxsczxee 13

I1 Mô tả hệ thống

4 Mô hình hóa chức năng fìm kiẾm .- 52 5-52 2222322 213213123E1217111321 171113 xe re 15

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG NGHE NHẠC RHYTHMMUSIC . - 17

I Quá trình thực biện đề tài 17

INẽA‹{ ra aỪỪA 20

2 Hướng phát 20

DANH MỤC HÌNH

Hình 1 Hỗ trợ đa ngôn ngữ - 52122219 1215212111111121111 2112121212211 21 1 re Hình 2 Hỗ trợ nhiều nền tảng - 2-52 9E E71E11211211 1111111111121 1121 121g tre Hinh 3 Tạo phím tắt, định dạng tốt hơn ST n5 1111211111511 nen rey

si Nộ 20.407.110 G Hình 5 Biểu đò Use-case tông quát - s5 S1 1 T1121121121121211211 212122212122 Hình 6 Sơ đồ hoạt động chức năng tìm kiểm - 2 se S2 9121871111212 Xe

Hinh 7 Sơ đồ trạng thái chức năng tìm kiếm - 2222222222221 EEE1221221222271221222 2e

Hình 8 Sơ đồ tuần tự chức năng tìm kiếm 2-2 se 12921211211 11111 11211211226

API Application Programming Interface

CHUONG 1: GIOI THIEU TONG QUAN VE DE TAI

L Tổng quan

1 Mục dích và nhiệm vụ

Trước khi xây dựng ra một hay nhiều ứng dụng, bản thân người làm ra nào cũng

đặt ra những câu hỏi: Muốn làm gì? Cho ai? Vi sao? Và những sản phẩm tạo thảnh là

kết quả cuỗi cùng

Hâu hết những ứng dụng nghe nhạc nói chung va ứng dụng nghe nhạc nói riêng, không chỉ nhằm mục đích quảng bá thương hiệu trên thị trường hay thê hiện được những đặc trưng riêng của ứng dụng mà còn đáp ứng vô vàn những yêu cầu khác

+ Thiết kế giao diện hiện đại theo xu hướng mới

3 Đối tượng và phạm vi nghiên cứu

Đối tượng: Ứng dụng nghe nhạc

Phạm vi nghiên cứu: các ứng đụng nghe nhạc trực tuyến khác trên thị trường

4 Nội dung và kế hoạch thực hiện

-_ Khảo sát thị trường âm nhạc hiện nay và xu hướng âm nhạc thịnh hành

© - Có thể thêm bải hát vào mục yêu thích

© Có thể theo dõi ca sĩ yêu thích

® - Người dùng có thê phản hồi, đánh giá lại cho nhà phát triển

e Thêm hoặc sửa xóa những bài hát xu hướng hiện nay hoặc loại bỏ những bài hát ví phạm bản quyền hoặc không phù hợp

© Phản hồi đánh giá của người dùng

® - Cập nhật danh sách nhạc, ca sĩ nghệ sĩ

H Tổng quan về công cụ xây dựng đề tài

1 Visual Studio Code

Visual Studio Code là trình soạn thảo, biên tập lập trình mã nguồn miễn phí được sử

dụng trên 3 nền tảng đó là: Windows, macOS và Linux được xây dựng, phát triển bởi

Microsoft Visual Studio Code được các chuyên ø1a công nghệ thông tin đánh gia cao,

nó là sự kết hợp hoàn hảo giữa IDE và CODE Editor

Prettier - Code formatter

Visual Studio Intellicode Language Support for Java(TM) by Red Hat

Chinese (Simplified) Language Pack for Vis

Tình 1 Hỗ trợ đa ngôn ngữ

1.2 Hỗ trợ nhiều nền tảng khác nhau

Một ưu điểm vượt trội khác nữa của Visual Studio Code là tại phần mềm nay,

người dùng có nên tảng Windows, Mac hoặc Linux đều có thê sử dụng được

User Installer SD ED deb CED OD CID

System Installer GED EEE F

Hình 2 Hỗ trợ nhiều nền tảng

1.3 Tích hợp gỡ lỗi và hỗ trợ Git, két néi voi GitHub

Khi bạn muốn quản lý hoặc lưu trữ lại các tập tín mã nguồn theo các mốc thời gian khác nhau sau đó, bạn muốn quay trở lại tập tin cũ khi cần dùng đến thì có thể sử dung GitHub dé két néi Boi Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp

từ GitHub Mã này sau đó có thé duoc thay đổi và lưu lại trên phần mềm

1.4 Phát triển trong nền tảng Node.js và ASP.NET Core

Visual Studio Code cho phép bạn viết các ứng dụng ASP.NET Core bằng cách tận dụng tất cả các tính năng chỉnh sửa đã phát triển có sẵn cho C # và các loại tệp khác trong dy an Node.js là một nền tảng để xây dựng các ứng dụng máy chủ nhanh và có thể mở rộng bằng JavaScript Visual Studio Code có hỗ trợ cho các ngôn ngữ JavaScript và TypeScript ngoài ra cũng hỗ trợ debug Node.js

1.5 Tạo phím tắt, kiểm soát định đạng tốt hơn

2 APIWeb

API Web hoac API Dich vy web 1a m6t giao diện xử ly ứng dụng ø1ữa máy chủ

web va trinh duyét web Moi dich vu web déu la API nhưng không phải tất cả API đều

là dịch vụ web API REST là một loại API Web đặc biệt sử dụng phong cách kiến trúc tiêu chuẩn được giải thích ở trên Việc tồn tại các thuật ngữ khác nhau xoay quanh API

- như API Java hoặc API dich vu - là đo về mặt lịch sử, API được tạo ra trước mạng

lưới toàn cầu Các API web hiện đại là API REST và các thuật ngữ này có thé duoc

dùng thay thế cho nhau

Connected Users and Dg a\ “\Ì amazon EC2

pu SEE ~ co a

0 { Se Sne<Ì &4> amazon

| </> API Gateway

€ = cache I, Other AWS 1 ca) Publicly eccessiie

Applications

Amazon AP! Gateway

b SO,e Al at any scale [BE

CHUONG 2: PHAN TICH VA THIET KE HE THONG

1 Mô tả hệ thống

Thiết kế và xây dựng hệ thống ứng đụng nghe nhạc là một hệ thống ứng dụng giao tiếp cộng đồng, cập nhật âm nhạc và hỗ trợ truyền thông Hệ thông đáp ứng tốt việc quản trị và cập nhật nội dung Hệ thông hoạt động ôn định, giao diện và hình ảnh được xây dựng thân thiện, đẹp mắt Thông tin về ứng dụng cụ thé như sau:

= Dé co thể truy cập và sử dụng ứng dụng, đầu tiên người dùng cần tạo tải

khoản cá nhân

“ Người dùng có thể xem, sửa, xóa thông tin của mỉnh sau khi đăng ký tài

khoản thành công

“ Người dùng có thể tìm kiếm những bài hát, nghệ sĩ, album mong muốn

= Người dùng có thé tim kiếm, theo dõi ca sĩ khác

“ Người dùng có thể lưu bài hát vào mục yêu thích

“ Người dùng có thể gửi những báo cáo, ý kiến đóng góp cho nhà phát triển

“ Người quản trị co thé quan ly bai hát trên ứng dụng

“_ Người quản trị sẽ tiếp nhận những đóng góp, phản hồi hợp lí từ người sử dụng và phát triển ứng dụng theo ý muốn của người dùng

Xác định các tác nhân và ca sử dụng của hệ thông:

- Luu bai hat

Gui phan héi

“a Quan `

\ banat / (Tim tiểm >) -

Điều kiện kích hoạt

Tiền điều kiện

Hậu điều kiện

Khi người dùng nhập các từ khóa liên quan tới nội dung

muôn tỉm vào khung tìm kiêm sản phâm trên hệ thông Người dùng click OK

Hiền thị thông tin cân tìm

Use-case này được thực hiện khi muôn tìm kiêm bài hat hoặc nghệ sĩ:

® - Người dùng click vào khung tìm kiếm bài hát

® - Người dùng click vảo nút tìm kiếm, luồng tìm kiếm

sẽ được thực thi

® - Khi người dùng cung cấp thông tin cần tìm, hệ thống

sẽ kiểm tra keywords mà người dùng nhập vào ứng với tên các bài hát từ cơ sở dữ liệu

® Hệ thống hiển thị tất cả các bài hát hoặc nghệ sĩ tương ứng với keywords người dùng đã nhập e© - Người dùng chọn thông tin cần tìm kiếm

e _ Hệ thống truy xuất và hiển thi nội dung liên quan

4 Mô hình hóa chức năng tìm kiếm

©® nv Nhập thông tin tìm kiếm

Xác nhận tìm kiếm Kiểm tra thông tin tìm kiếm

Xem nội dung Chọn nội dung cần xem kiếm tra thành cñng

(®- kiểm tra thất bại

w-

Hình ó Sơ đồ hoạt động chức năng tìm kiếm

® tim kiếm Chưa nhập thông tin tìm kiểm Thập thông tín tìn kiến (r nhập thông tin tìm kiếm

3: kết quả kiểm tra

sq Kiếm tra dử liệu

[kết quả<= 0] ig

4: thông bác không từn thẩy dữ liệu

Tra =Inn 5; hiển thị đanh sách tỉm kiếm

[ket qua > 0]

8 : chọn nội dung cần xem 3z xe

— a : f; Lấy thông tin ndi dung

Hình 8 Sơ đồ tuần tự chức năng tìm kiếm

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG NGHE NHẠC

RHYTHMMUSIC

I Quá trình thực hiện đề tài

Để xây dựng ứng dụng nghe nhạc, quá trình bắt đầu bằng việc nghiên cứu và tìm hiểu về đề tài Chúng ta cần thu thập thông tin về các chức năng cần có trong ứng dụng, trong trường hợp này là đăng nhập bằng tài khoản Gmail hoặc Facebook, đanh sách nhạc, danh sách thẻ loại, tìm kiếm và bộ phát nhạc

Sau đó, chúng ta cần thiết kế giao diện cho ứng dụng, với sự hỗ trợ của công cụ Visual Studio Code Trước tiên, chúng ta cần xác định bố cục của giao diện, đảm bảo tính thấm my và sự dễ sử dụng cho người dùng Điều này đặc biệt quan trọng trong trường hợp ứng dụng nghe nhạc, nơi mà người dùng sẽ trải nhiệm các chức năng qua

10

các giao diện được thiết kế Sau đó, chúng ta có thé bé tri các phần tử của giao diện như danh sách nhạc, danh sách thể loại, tìm kiếm và bộ phát nhạc

Đề lưu trữ đữ liệu của ứng dụng, chúng ta sử dụng Web API Web API là giao diện lập trình ứng dụng cho máy chủ web hoặc trình duyệt web Đây là khái niệm phát triển web, thường giới hạn ở phía máy khách của ứng dụng web và do đó thường không bao gồm máy chủ web hoặc chị tiết triển khai trình duyệt như SAPI hoặc API trừ khi có thể truy cập công khai từ xa ứng dụng web.Màu sắc là một yếu tố quan trọng trong thiết kế giao điện của ứng dụng Chúng ta cần chọn màu sắc phù hợp để phối sao cho đẹp mắt và có tính thâm mỹ Với ứng dụng nghe nhạc, chúng ta có thê chọn mảu sắc tươi sáng và trẻ trunp, hoặc màu sắc trầm và đậm tùy thuộc vào mục đích của ứng dụng

Sau khi thiết kế xong giao diện và chọn màu sắc, chúng ta cần kiêm tra và đảm bảo tính ôn định của ứng dụng Các lỗi phát sinh cần được sửa chữa để đảm bảo rằng người dùng có trải nghiệm tốt nhất khi sử dụng ứng dụng

Cuối cùng, chúng ta có thê thêm các tính năng khác như phân loại nhạc, danh mục nhạc yêu thích,

II Kết quả đề tài

Q Tìm kiếm bài hát, nghệ sĩ, lời bài hát

Hình 4 Tìm kiếm

11

> Ca item

Ạ | Nước Mắt Hóa Đá (Prod.by DTAP)

.a#* Mật Ngọt (Nam Con Remix)

CHƯƠNG 4: KÉT LUẬN VÀ HƯỚNG PHÁT TRIÊN

-_ Tìm hiểu và nắm khá rõ về phân tích thiết kế hệ thống, biết mô tả và phân

tích bài toán, vẽ được biểu đồ Use-case, đặc tả Use-case, biểu đồ lớp và

mô hình hóa chức năng bằng công cụ StarUML

-._ Ứng dụng đã giúp người dùng tìm kiếm những bài hát yêu thích của mình

14

we

TAI LIEU THAM KHAO

https://www.npmyjs.com/search?q=keywords:zingmp3 https://www.npmjs.com/package/react-router-dom https://react-icons github.io/react-icons/

https://www.npmjs.com/package/react-redux https://tailwindcss.com/docs/installation

15