Project 1 thiết kế và xây dựng web nghe nhạc

ReactJS là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng, trong khi ExpressJs là một khung NodeJS linh hoạt để tạo các ứng dụng web.. Cuối cùng, thư viện mô-đun phong

HANOI UNIVERSITY OF SCIENCE AND

TECHNOLOGY

PROJECT 1 : Thiết kế và xây dựng Web nghe nhạc Giảng viên hướng dẫn: Ths Vũ Đức Vượng Sinh viên thực hiện: Trịnh Quang Duy

LỜI CẢM ƠN

em xin gửi lời chân thành cảm ơn tới giáo viên hướng dẫn, thầy Vũ Đức Vượng, vì sự kiên nhẫn, hướng dẫn và hỗ trợ của thầy, em đã được truyền cảm hứng để nghiên cứu và thực hiện đề tài này Chúng em vô cùng biết ơn vì sự tâm huyết cũng như kì vọng của thầy trong suốt học kì vừa qua

MỤC LỤC

I Giới thiệu chung 2

1.1 Đặt vấn đề Error! Bookmark not defined 1.2 Mục tiêu và phạm vi đề tài Error! Bookmark not defined 1.3 Định hướng và giải pháp 2

II KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU 4

III CÔNG NGHỆ SỬ DỤNG 7

3.1 NodeJS 7

3.2 ReactJS 8

3.3 ExpressJS 10

3.3 MongoDB 11

IV THỰC NGHIỆM VÀ ĐÁNH GIÁ 12

4.1 Thiết kế kiến trúc 12

4.2 Thiết kế giao diện 12

4.3 Thiết kế cơ sở dữ liệu 13

4.4 Xây dựng ứng dựng 15

V KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN……… 20

VI TÀI LIỆU THAM KHẢO……… 21

cập đến hàng triệu bài hát, album và ca sĩ yêu thích của mình chỉ bằng một cú nhấp chuột Ngoài ra, những nền tảng âm nhạc trực tuyến cũng cung cấp cho người dùng khả năng tìm kiếm và khám phá những bài hát mới và nghệ sĩ mới,

từ đó giúp mở rộng và nâng cao trải nghiệm nghe nhạc của người dùng

Tuy nhiên, ngành công nghiệp âm nhạc trên web cũng đang đối mặt với nhiều thách thức như vi phạm bản quyền, sự cạnh tranh khốc liệt giữa các nền tảng âm nhạc và sự thay đổi thói quen nghe nhạc của người dùng Để giải quyết các vấn

đề này, ngành công nghiệp âm nhạc đang tích cực nghiên cứu và áp dụng các giải pháp mới, từ việc bảo vệ bản quyền đến cung cấp nội dung âm nhạc chất lượng cao và khuyến khích người dùng trả phí cho dịch vụ âm nhạc trực tuyến Với những tiềm năng và thách thức của mình, ngành công nghiệp âm nhạc trên web đang dần trở thành một ngành công nghiệp phát triển và hấp dẫn với nhiều

cơ hội cho sự đầu tư và phát triển trong tương lai Trong báo cáo này, chúng tôi

sẽ cùng nhau khám phá và phân tích sự phát triển và xu hướng của ngành công nghiệp âm nhạc trên web, đồng thời đưa ra những quan điểm và gợi ý về cách tận dụng cơ hội trong ngành này

Nắm bắt được điều đó, trong khi tiếp cận môn Project 1, nhóm chúng em

đã lựa chọn đề tài “ Web âm nhạc”

Trong quá trình hoàn thành bài tập lớn, chúng em xin được gửi lời cảm

ơn chân thành đến:

 Thầy giáo hướng dẫn Ths Vũ Đức Vượng giảng viên trường đại học Bách

Khoa Hà Nội đã hết lòng hướng dẫn, giúp đỡ tạo mọi điều kiện để chúng

em hoàn thành bài tập lớn

1.3 Định hướng và giải pháp

- Để đạt được những mục tiêu trên, em đã sử dụng kết hợp nhiều công nghệ, bao gồm NodeJS, ReactJS, ExpressJs và Xampp NodeJS là một môi trường thời gian chạy JavaScript phía máy chủ cung cấp một nền tảng hiệu quả

và có thể mở rộng để xây dựng các ứng dụng web ReactJS là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng, trong khi ExpressJs là một khung NodeJS linh hoạt để tạo các ứng dụng web

- Bằng cách sử dụng các công nghệ này, em đã tạo ra một web âm nhạc mạnh

mẽ và có thể mở rộng, cung cấp cho người dùng giao diện người dùng trực quan

và hấp dẫn, đồng thời duy trì mức bảo mật và quyền riêng tư cao nhất.em tin rằng ứng dụng này sẽ rất có lợi cho những người dùng muốn nghe nhạc trong thời gian thực, bất kể vị trí hoặc thiết bị của họ

II KHẢO SÁT VÀ PHÂN TÍCH YÊU CẦU

2.1 Khảo sát hiện trạng

Thời kỳ đầu, khi Internet chưa bùng nổ, mạng di động thống trị, người dùng chỉ xoay quanh 2 lựa chọn: gọi điện thoại và nhắn tin SMS Nhưng bây giờ thì sao? Wi-Fi chỗ nào cũng có, từ nhà đến công ty, ra quán café sang chảnh hay trà đá vỉa hè Không Wi-Fi thì 3G, 4G bật 24/7 Cước phí Internet rẻ hơn rất nhiều lần so với tiền card điện thoại di động hàng tháng

Để thực hiện khảo sát, chúng tôi đã tìm kiếm các trang web âm nhạc phổ biến và phân tích chất lượng và hiệu suất của chúng bằng các công cụ như

Google PageSpeed Insights và GTmetrix Các trang web được khảo sát bao gồm Spotify, Apple Music, Tidal và SoundCloud

Kết quả cho thấy rằng tốc độ tải trang của các trang web âm nhạc này có thể chậm và chất lượng trải nghiệm người dùng không được tối ưu Một số trang web có thời gian tải trang rất chậm, khiến người dùng phải đợi lâu để truy cập vào nội dung âm nhạc Thêm vào đó, một số trang web còn có các lỗi trong cách xử lý dữ liệu, khiến trải nghiệm người dùng trở nên khó khăn

Để cải thiện trải nghiệm người dùng và tăng tốc độ tải trang, chúng tôi đề xuất các giải pháp như tối ưu hóa hình ảnh và tài nguyên trên trang web, sử dụng các giải pháp bộ nhớ cache, tối ưu hóa cấu trúc trang web và sử dụng các công nghệ mới như HTTP/2 và CDN Bên cạnh đó, các trang web cần kiểm tra

và sửa các lỗi xử lý dữ liệu để cải thiện trải nghiệm người dùng và tăng tính ổn định của trang web

2.2 Tổng quan chức năng

2.2.1 Biểu đồ use case tổng quát

2.2.2 Quy trình nghiệp vụ

- Hoạt động gửi tin nhắn:

Khi người dùng nhập nội dung tin nhắn vào thanh hộp thoại trên

website, người dùng chỉ cần click chuột vào nút gửi hoặc phím Enter để gửi tin nhắn cho người khác trên website

- Hoạt động tạo phòng trò chuyện mới:

Khi người dùng muốn tạo một group cho một lĩnh vực riêng nào đó,

họ chỉ cần ấn vào nút tạo group mới là đã có thể tạo được một nhóm mới

- Hoạt động quản lí khách hàng:

Khi cần diều chỉnh thông tin khách hàng cũng như xóa đi các khách hàng không phù hợp đối với app nữa hoặc các khách hàng mà app mới được bổ sung sẽ do admin quản lý

- Hoạt động quản lí thông tin:

Khi khách hàng có các vấn đề thắc mắc về app, họ có thể liên lạc đến

bộ phận hỗ trợ của app để được tư vấn và giải quyết các thắc mắc

2.2.3 Xác định yêu cầu phần mềm

- Yêu cầu chức năng:

+ Gửi tin nhắn + Tạo phòng chat + Tham gia phòng chat + Tìm kiếm người dùng

- Yêu cầu phi chức năng:

+ Tính tiện dụng: Giao diện thân thiện, dễ sử dụng, đa ngôn ngữ (tối thiểu phải có tiếng Anh và tiếng Việt)

+ Tính ổn định: Hệ thống hoạt động ổn định 24/7

+ Tính an toàn thông tin: Bảo mật, toàn vẹn, xác thực

+ Tính phân quyền: người sử dụng chương trình được cấp

username và password và được phân quyền sử dụng chương trình, giúp người quản lý có thể theo dõi, kiểm soát được chương trình, tránh các hợp sửa đổi thông tin không thuộc phạm vi quyền hạn

III CÔNG NGHỆ SỬ DỤNG

3.1 NodeJS

- Node.js là một môi trường thời gian chạy JavaScript nguồn mở, đa nền tảng cho phép các nhà phát triển xây dựng các ứng dụng phía máy chủ bằng JavaScript Dưới đây là một số tính năng, lợi ích và hạn chế của Node.js, cũng như cách chúng được sử dụng trong trò chuyện trên web:

- Đặc trưng:

+ Kiến trúc hướng sự kiện: Node.js được xây dựng xung quanh mô hình I/O không chặn, hướng sự kiện giúp cho nó có khả năng mở rộng và hiệu quả cao

+ Nhẹ và nhanh: Node.js là môi trường thời gian chạy nhẹ, sử dụng một lượng nhỏ tài nguyên và có thể xử lý đồng thời một số lượng lớn kết nối

+ Thư viện mô-đun phong phú: Node.js có một thư viện mô-đun lớn và đang phát triển mà các nhà phát triển có thể sử dụng để thêm chức năng cho ứng dụng của họ

+ Dễ học: Vì Node.js sử dụng JavaScript, một ngôn ngữ phổ biến

và được sử dụng rộng rãi nên các nhà phát triển rất dễ học và bắt đầu

- Những lợi ích:

+ Khả năng mở rộng: Kiến trúc hướng sự kiện của Node.js làm cho

nó có khả năng mở rộng cao, cho phép nó xử lý khối lượng lớn dữ liệu và kết nối

+ Hiệu quả: Node.js được biết đến với tốc độ và hiệu quả, khiến nó trở thành lựa chọn phổ biến để xây dựng các ứng dụng thời gian thực như trò chuyện trên web

- Trong trò chuyện trên web, Node.js được sử dụng làm công nghệ phụ trợ để xử lý giao tiếp thời gian thực giữa những người dùng Kiến trúc hướng sự kiện của Node.js đặc biệt hữu ích trong bối cảnh này, vì nó cho phép xử lý hiệu quả nhiều kết nối và cập nhật theo thời gian thực Bản chất gọn nhẹ của Node.js cũng khiến nó rất phù hợp để trò chuyện trên web, vì nó có thể xử lý đồng thời một số lượng lớn kết nối mà không cần sử dụng quá nhiều tài nguyên Cuối cùng, thư viện mô-đun phong phú có sẵn trong Node.js giúp các nhà phát triển

dễ dàng thêm chức năng bổ sung vào ứng dụng trò chuyện trên web, chẳng hạn như xác thực người dùng và lưu trữ dữ liệu

3.2 ReactJS

- ReactJS là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng Dưới đây là một số tính năng, lợi ích và hạn chế của ReactJS, cũng như cách chúng được sử dụng trong trò chuyện trên web:

- Đặc trưng:

+ Kiến trúc dựa trên thành phần: ReactJS được xây dựng dựa trên kiến trúc dựa trên thành phần giúp dễ dàng chia các giao diện người dùng phức tạp thành các phần nhỏ hơn, có thể tái sử dụng

+ DOM ảo: ReactJS sử dụng DOM ảo để tối ưu hóa hiệu suất, cho phép nó cập nhật giao diện người dùng một cách nhanh chóng và hiệu quả

+ Ràng buộc dữ liệu một chiều: ReactJS sử dụng liên kết dữ liệu

+ Cú pháp JSX: ReactJS sử dụng cú pháp có tên là JSX, cho phép các nhà phát triển viết mã giống như HTML trong JavaScript, giúp tạo và quản lý giao diện người dùng dễ dàng hơn

- Những lợi ích:

+ Khả năng sử dụng lại: Kiến trúc dựa trên thành phần của ReactJS giúp dễ dàng sử dụng lại các thành phần trên các phần khác nhau của ứng dụng, giảm thời gian phát triển và tăng tính nhất quán

+ Hiệu suất: DOM ảo của ReactJS và các bản cập nhật hiệu quả giúp nó hoạt động nhanh và phản hồi nhanh, ngay cả đối với các giao diện người dùng lớn và phức tạp

+ Chức năng hạn chế: ReactJS tập trung vào phát triển giao diện người dùng, vì vậy nó có thể không phải là lựa chọn tốt nhất để xây dựng chức năng back-end phức tạp

- Trong trò chuyện trên web, ReactJS đã được sử dụng trên giao diện người dùng để tạo giao diện người dùng năng động và phản hồi nhanh Kiến trúc dựa trên thành phần của ReactJS giúp dễ dàng chia giao diện người dùng thành các thành phần nhỏ hơn, có thể tái sử dụng, chẳng hạn như tin nhắn trò chuyện, phòng trò chuyện và danh sách người dùng DOM ảo và các bản cập nhật hiệu quả của ReactJS cho phép xử lý các bản cập nhật và thông báo theo thời gian thực mà không làm chậm ứng dụng Cuối cùng, cú pháp JSX của ReactJS giúp dễ dàng tạo và quản lý các giao diện người dùng phức tạp, chẳng hạn như phòng trò chuyện có nhiều người tham gia và hồ sơ người dùng có thể tùy chỉnh

3.3 ExpressJS

- ExpressJS là một khung ứng dụng web phổ biến cho Node.js Dưới đây

là một số tính năng, lợi ích và hạn chế của ExpressJS, cũng như cách chúng được sử dụng trong trò chuyện trên web:

- Đặc trưng:

+ Định tuyến: ExpressJS cung cấp một hệ thống định tuyến mạnh

mẽ cho phép các nhà phát triển dễ dàng ánh xạ các yêu cầu HTTP tới các chức năng xử lý cụ thể

+ Phần mềm trung gian: ExpressJS hỗ trợ phần mềm trung gian, là các chức năng có thể được thực thi trước hoặc sau khi yêu cầu được xử

lý, cho phép xử lý bổ sung hoặc sửa đổi các yêu cầu và phản hồi

+ Công cụ tạo khuôn mẫu: ExpressJS hỗ trợ nhiều công cụ tạo khuôn mẫu, giúp dễ dàng hiển thị các chế độ xem HTML động dựa trên

dữ liệu từ máy chủ

+ Xử lý lỗi: ExpressJS cung cấp một cơ chế xử lý lỗi đơn giản và

có thể tùy chỉnh giúp dễ dàng nắm bắt và xử lý lỗi một cách nhất quán và tập trung

- Những lợi ích:

+ Nhanh và có thể mở rộng: ExpressJS nhanh và hiệu quả, làm cho

nó trở thành một lựa chọn tốt để xây dựng các ứng dụng web có thể mở rộng để có thể xử lý một số lượng lớn yêu cầu

+ Tính linh hoạt: ExpressJS rất linh hoạt, cho phép các nhà phát triển tùy chỉnh và mở rộng nó để phù hợp với nhu cầu cụ thể của ứng dụng của họ

+ Cộng đồng lớn: ExpressJS có một cộng đồng các nhà phát triển lớn và tích cực, những người đóng góp cho sự phát triển của nó và tạo ra các mô-đun hữu ích có thể được sử dụng trong các ứng dụng

+ Dễ học: ExpressJS tương đối dễ học và dễ bắt đầu, đặc biệt đối với các nhà phát triển đã quen thuộc với Node.js

+ Chức năng hạn chế: ExpressJS chủ yếu tập trung vào xử lý các yêu cầu và phản hồi HTTP, do đó, nó có thể không phải là lựa chọn tốt nhất cho các ứng dụng phức tạp hơn yêu cầu chức năng bổ sung, chẳng hạn như xử lý nền hoặc giao tiếp thời gian thực

- Trong trò chuyện trên web, ExpressJS được sử dụng ở phía máy chủ để

xử lý các yêu cầu và phản hồi HTTP, quản lý định tuyến và cung cấp các chức năng phần mềm trung gian để xử lý bổ sung Hệ thống định tuyến mạnh mẽ của ExpressJS được sử dụng để ánh xạ các yêu cầu HTTP đến tới các chức năng xử

lý cụ thể, chẳng hạn như truy xuất tin nhắn trò chuyện hoặc cập nhật thông tin người dùng Các chức năng của phần mềm trung gian được sử dụng để xử lý các tác vụ như xác thực, xử lý lỗi và xử lý dữ liệu đến từ máy khách Cuối cùng, ExpressJS đã được sử dụng để hiển thị các chế độ xem HTML động bằng cách

sử dụng các công cụ tạo khuôn mẫu, chẳng hạn như Tay cầm hoặc EJS

3.3 Xampp

Chữ X đầu tiên là viết tắt của hệ điều hành mà nó hoạt động với: Linux,

Windows và Mac OS X

Apache: Web Server mã nguồn mở Apache là máy chủ được sử dụng rộng rãi

nhất trên toàn thế giới để phân phối nội dung Web Ứng dụng được cung cấp dưới dạng phần mềm miễn phí bởi Apache Software Foundation

MySQL / MariaDB: Trong MySQL, XAMPP chứa một trong những hệ quản

trị cơ sở dữ liệu quan hệ phổ biến nhất trên thế giới Kết hợp với Web Server Apache và ngôn ngữ lập trình PHP, MySQL cung cấp khả năng lưu trữ dữ liệu cho các dịch vụ Web Các phiên bản XAMPP hiện tại đã thay thế MySQL bằng MariaDB (một nhánh của dự án MySQL do cộng đồng phát triển, được thực hiện bởi các nhà phát triển ban đầu)

PHP: Ngôn ngữ lập trình phía máy chủ PHP cho phép người dùng tạo các trang

Web hoặc ứng dụng động PHP có thể được cài đặt trên tất cả các nền tảng và

hỗ trợ một số hệ thống cơ sở dữ liệu đa dạng

Perl: ngôn ngữ kịch bản Perl được sử dụng trong quản trị hệ thống, phát triển

Web và lập trình mạng Giống như PHP, Perl cũng cho phép người dùng lập trình các ứng dụng Web động

IV THỰC NGHIỆM VÀ ĐÁNH GIÁ

4.1 Thiết kế kiến trúc

- Kiến trúc của web chat bao gồm một thành phần giao diện người dùng

và một thành phần phụ trợ Thành phần front-end chịu trách nhiệm trình bày giao diện trò chuyện cho người dùng, trong khi thành phần back-end xử lý việc

xử lý tin nhắn, lưu trữ và truy xuất dữ liệu từ cơ sở dữ liệu

- Thành phần giao diện người dùng thường được xây dựng bằng khung JavaScript chẳng hạn như ReactJS, cho phép tạo giao diện người dùng động và tương tác Thành phần giao diện người dùng giao tiếp với thành phần phụ trợ bằng cách sử dụng các yêu cầu và phản hồi HTTP, thường thông qua một API

do phụ trợ cung cấp

- Thành phần back-end được xây dựng bằng khung phía máy chủ như NodeJS và ExpressJS, cho phép tạo logic và API phía máy chủ Thành phần back-end chịu trách nhiệm nhận và xử lý thông báo từ thành phần front-end, đồng thời lưu trữ và truy xuất dữ liệu từ cơ sở dữ liệu

- Các thành phần front-end và back-end giao tiếp với nhau bằng API, thường ở dạng RESTful API hoặc WebSockets API RESTful cho phép trao đổi

dữ liệu giữa front-end và back-end bằng cách sử dụng các yêu cầu và phản hồi HTTP, trong khi WebSockets cung cấp kênh giao tiếp hai chiều, thời gian thực giữa front-end và back-end

- Nhìn chung, kiến trúc trò chuyện trên web được thiết kế để cung cấp giao diện trò chuyện có thể mở rộng, linh hoạt và tương tác cho người dùng, đồng thời cung cấp khả năng lưu trữ và truy xuất dữ liệu từ cơ sở dữ liệu đáng tin cậy và hiệu quả

4.2 Thiết kế giao diện