Chương 1. GIỚI THIỆU ĐỀ TÀI 1.1 Tên đề tài - Xây dựng website nghe nhạc với tính năng đề xuất bài hát. - Building an Music website with recommendation.2 Lí do chọn đề tài Hiện nay, dưới sự phát triển của xã hội, nhu cầu giải trí của con người ngày càng tăng mạnh. Theo thống kê ở Việt Nam có khoảng 75% người nghe nhạc mỗi ngày, trong đó có khoảng 20% người nghe nhiều hơn 1 giờ.
Với nhu cầu ấy, em mong muốn tạo ra được một website có thể đáp ứng được nhu cầu nghe nhạc của mọi người, đồng thời chia sẻ được sở thích âm nhạc cá nhân và trò chuyện tán gẫu với nhau khi nghe nhạc. Đó là lí do em chọn đề tài “Xây dựng website nghe nhạc chung online kết hợp voice chat và đề xuất”.3 Mô tả sản phẩm - Ứng dụng nghe nhạc với tinh năng đề xuất bài hát cho người dùng. - Triển khai trên môi trường web.4 Chức năng chính - Quản lý tài khoản: Đăng nhập, đăng ký, đổi mật khẩu, thông tin tài khoản. - Trình phát nhạc với đầy đủ tính năng cơ bản.
- Quản lý danh sách phát, danh sách yêu thích. - Tìm kiếm bài hát, ca sĩ. - Truy cập danh sách bài hát, ca sĩ, thể loại. - Quản lý danh sách yêu thích.
- Lọc danh sách bài hát theo ngày phát hành, lượt nghe. - Nhận danh sách đề xuất theo bài hát hiện tại. - Nhận danh sách bài hát theo danh sách yêu thích. - Quản lý tài khoản người dùng, bài hát, ca sĩ (Quản trị viên) 1.5 Công nghệ sử dụng - Figma: lên bản thiết kế giao diện.
- HTML, CSS, JavaScript với thư viện ReactJS: cài đặt front-end.js với framework ExpressJS: cài đặt back-end. - Python: cài đặt tính năng đề xuất bài hát. - MongoDB: cơ sở dữ liệu. - Github: quản lý mã nguồn.6 Thông tin người thực hiện đề tài STT Tên thành viên Mã sinh viên Email 1 Lương Mạnh Hùng 19520098 19520098@gm.vn Bảng 1.1 Thông tin thành viên nhóm 15 Chương 2.1 HTML - HTML là viết tắt của cụm tử Hyper Text Markup Language – ngôn ngữ đánh dấu siêu văn bản.
HTML có chức năng giúp người dùng xây dựng và cấu trúc các phần trong trang web hoặc ứng dụng, thường được sử dụng trong phân chia các đoạn văn, heading, link, blockquotes,… - HTML được coi như bộ khung của một trang web, được cấu thành từ những thẻ được cung cấp, từ đó hiển thị ra cho người dùng nội dung thô. - HTML được tạo ra vào năm 1991 bởi Tim Berners-Lee là nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Ông đã nghĩ ra và viết siêu văn bản và hypertext trên Internet. Hypertext được hiểu là văn bản chứa link, có thể giúp người xem truy cập ngay lập tức.
Hiện nay, HTML đã trở thành một chuẩn Internet được vận hành và phát triển bởi tổ chức W3C (World Wide Web Consortium).1 Ngôn ngữ HTML 16 2.2 CSS - CSS là viết tắt của cụm từ Cascading Style Sheets. - CSS được sử dụng để định dạng style cho các phần tử được tạo ra bởi HTML. Hiểu đơn giản thì HTML tạo nên bộ khung và CSS trang trí để tạo nên một trang web đẹp mắt. - CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10 năm 1994.
Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee (cha đẻ của HTML) tại CERN. Một số ngôn ngữ định kiểu khác cho web đã được đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộng đồng cũng như đồng thuận trong World Wide Web Consortium dẫn đến CSS W3C đầu tiên (CSS1) được phát hành vào năm 1996. Đặc biệt, một đề nghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành đồng tác giả của CSS1 và được coi là đồng sáng tạo CSS. - Qua các năm, CSS được phát triển lên các phiên bản CSS2, CSS2.1, CSS3 và mới nhất là CSS4, với việc chia thành các mô đun riêng biệt, được dựa trên các mô đun từ CSS3.
- Dưới đây là một đoạn mã CSS đơn giản để thiết lập màu chữ và kích thước chữ cho thẻ <body> Hình 2.2 Cấu trúc CSS cơ bản 2.3 JavaScript - JavaScript là một ngôn ngữ lập trình thông dịch được sử dụng ở phía máy khách và phía máy chủ, cho phép tạo các trang web có các hình động chuyên nghiệp. JavaScript được hỗ trợ bởi hầu hết các trình duyệt web: Chrome, Firefox, Safari, Internet Explorer, Edge, Opera,. Hầu hết các trình duyệt di động cho điện thoại thông minh đều hỗ trợ JavaScript. 17 - JavaScript chủ yếu được sử dụng cho các website nhằm cung cấp cho người dùng trải nghiệm thân thiện hơn, bao gồm các chức năng: tự động cập nhật các trang web, cải tiến giao diện người dùng như menu và hộp thoại, animations, đồ họa 2D và 3D, bản đồ tương tác, trình phát video.
Chế độ sử dụng JavaScript này trong trình duyệt web cũng được gọi là javascript phía máy khách. - Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vào tháng 5 năm 1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tên thành JavaScript vào tháng 12 năm 1995. Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện trở thành, một đặc tính kỹ thuật tiêu chuẩn. Vào tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên cho ngôn ngữ được phát hành là ECMA-262.
Phiên bản mới nhất của ngôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017. - Cách hoạt động của JavaScript: Hình 2.3 Phương thức hoạt động của JavaScript 18 - Khi web browser tải một web page, HTML parser bắt đầu phân tích cú pháp HTML code và tạo DOM. Bất cứ khi nào trình phân tích cú pháp gặp một chỉ thị CSS hoặc JavaScript (inline hoặc externally loaded), nó sẽ được chuyển giao cho CSS parser hoặc JavaScript engine theo yêu cầu. - JavaScript engine tải các tệp JavaScript bên ngoài và inline code, nhưng không chạy mã ngay lập tức, mà đợi HTML và CSS phân tích hoàn tất.
Khi điều này được thực hiện, JavaScript được thực thi theo thứ tự chúng được tìm thấy trên trang web: các biến và hàm được xác định, các lời gọi hàm được thực thi, trình xử lý sự kiện được kích hoạt,. Các hoạt động này dẫn đến việc DOM được cập nhật bởi JavaScript và được hiển thị ngay lập tức bởi trình duyệt.4 Thư viện ReactJS - React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI). Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới để render trang web. - Components của công cụ này được phát triển bởi Facebook.
Nó được ra mắt như một công cụ JavaScript mã nguồn mở vào năm 2013. Hiện tại, nó đã đi trước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất thời bấy giờ. - Cách React hoạt động: Code HTML bằng Javascript Hình 2.4 Một đoạn code trong trong ứng dụng sử dụng React - Ưu điểm của React: • Dễ sử dụng: 19 ▪ React là một thư viện GUI nguồn mở JavaScript tập trung vào một điều cụ thể; hoàn thành nhiệm vụ UI hiệu quả. Nó được phân loại thành kiểu “V” trong mô hình MVC (Model-View- Controller).
▪ Là lập trình viên JavaScript, bạn sẽ dễ dàng hiểu được những điều cơ bản về React. Bạn thậm chí có thể bắt đầu phát triển các ứng dụng dựa trên web bằng cách sử dụng react chỉ trong vài ngày. • Tái sử dụng code: ▪ Các thành phần trong dự án được đóng gói theo từng phần riêng, dễ dàng trong việc quản lý cũng như tái sử dụng code.5 Một vài file components trong ứng dụng • Hiệu suất tốt hơn với Virtual DOM: ▪ React sẽ cập nhật hiệu quả quá trình DOM (Document Object Model – Mô hình đối tượng tài liệu). Như bạn có thể biết, quá trình này có thể gây ra nhiều thất vọng trong các dự án ứng dụng dựa trên web.
May mắn là React sử dụng virtual DOMs, vì vậy bạn có thể tránh được vấn đề này. ▪ Công cụ cho phép bạn xây dựng các virtual DOMs và host chúng trong bộ nhớ. Nhờ vậy, mỗi khi có sự thay đổi trong DOM thực tế, thì virtual sẽ thay đổi ngay lập tức. ▪ Hệ thống này sẽ ngăn DOM thực tế để buộc các bản cập nhật được liên tục.
Do đó, tốc độ của ứng dụng sẽ không bị gián đoạn.5 NodeJS - NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client. Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ. - NodeJS là một nền tảng (platform) chứ không phải một web framework như một số người thường nhầm lẫn.JS cũng không phải là một ngôn ngữ lập trình mà là một môi trường runtime dùng để chạy JavaScript bên ngoài trình duyệt. Vì vậy để học và sử dụng NodeJS thì người dùng cần có những kiến thức nhất định về một số giao thức, JavaScript hay kỹ thuật lập trình,… - Và cuối cùng, một câu hỏi phổ biến của người dùng là: Node.JS là backend hay frontend? Thật ra Node.JS có thể được sử dụng như một frontend lẫn backend nhờ vào các framework như Express.js hay Meteor.
Trong đồ án này, nhóm em sử dụng Node.JS để sử dụng làm backend với framework là Express. - Ưu điểm: • IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời. • Sử dụng JavaScript – một ngôn ngữ lập trình dễ học. • Chia sẻ cùng code ở cả phía client và server.
• NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ. • Cộng đồng hỗ trợ tích cực. • Cho phép stream các file có kích thước lớn. - Nhược điểm: • Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình đa lõi trong các phần cứng cấp server hiện nay.
21 • Khó thao tác với cơ sử dữ liệu quan hệ. • Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác. • Cần có kiến thức tốt về JavaScript. • Không phù hợp với các tác vụ đòi hỏi nhiều CPU.6 ExpressJS - Expressjs hay còn được viết là Express js, Express.
Đây là một framework mã nguồn mở miễn phí cho Node.js được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng. - Vì Express js chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát triển.Expressjs cũng là một khuôn khổ của Node.
