Tổng quan đồ án
Ngày này, việc giải trí thông qua Internet ngày càng thông dụng như là: trò chơi điện tử, xem phim, cập nhật mạng xã hội, thông tin mới, xem các video ngắn như tiktok và có một hình thức giải trí vô cùng phổ biến là: nghe nhạc trực tuyến.
Vậy nên em chọn phần lập trình website nghe nhạc trực tuyến để thực hiện đề tài đồ án này
Cơ sở lý thuyết
HTML
HTML là viết tắt của “Hypertext Markup Language” (Ngôn ngữ Đánh dấu Siêu văn bản). Đây là một ngôn ngữ lập trình được sử dụng để xây dựng và cấu trúc trang web. HTML được thiết kế để mô tả cấu trúc của một trang web bằng cách sử dụng các thẻ và các phần tử đánh dấu (markup) để định nghĩa và hiển thị nội dung. Các trang web sử dụng HTML để tạo ra các phần tử như văn bản, hình ảnh, liên kết, biểu đồ, bảng, ô nhập liệu và nhiều thành phần khác nhau.
HTML là một phần quan trọng của bộ ba công nghệ cơ bản trong phát triển web, bao gồm HTML để định cấu trúc trang, CSS (Cascading Style Sheets) để định dạng và trang trí giao diện, và JavaScript để thêm tính năng tương tác động vào trang web.
CSS
CSS là viết tắt của Cascading Style Sheets, một ngôn ngữ thiết kế được sử dụng để đơn giản hóa quá trình tạo ra trang web. Được giới thiệu vào năm 1996 bởi World Wide Web Consortium (W3C), CSS chịu trách nhiệm đối với một phần quan trọng của giao diện trang web. CSS cho phép kiểm soát nhiều yếu tố trực quan trên trang web, bao gồm màu sắc văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cũng như bố cục và kích thước của các phần tử trên trang. Nó cũng quản lý hình ảnh và màu nền, thiết kế bố cục, và hiệu ứng trên trang web.
JavaScript
JavaScript là một ngôn ngữ lập trình phía máy khách (client-side) thường được sử dụng trong phát triển web để tạo ra các trang web tương tác và động. Nó chịu trách nhiệm cho việc thực hiện các chức năng như tương tác người dùng, thay đổi cấu trúc và nội dung của trang thông qua DOM, gửi và nhận dữ liệu mà không cần tải lại trang (sử dụng AJAX và Fetch API), tạo hiệu ứng và animation, kiểm tra tính hợp lệ của dữ liệu đầu vào từ người dùng trước khi gửi lên máy chủ, và nhiều chức năng khác.
Là một trong những ngôn ngữ lập trình chính của web, JavaScript chơi một vai trò quan trọng trong việc cải thiện trải nghiệm người dùng và là một phần không thể thiếu của World Wide Web.
Node JS
Node.js là một môi trường thực thi mã nguồn mở, sử dụng JavaScript để tạo ra môi trường chạy web trên máy chủ. Nó sử dụng mô hình sự kiện và non-blocking I/O để xử lý đồng thời nhiều kết nối, giúp xây dựng các ứng dụng web có tính tương tác cao và thời gian thực. Node.js là một công cụ mạnh mẽ được sử dụng để xây dựng các ứng dụng web hiệu quả và đa người dùng.
Postman
Postman là một công cụ mạnh mẽ giúp thử nghiệm và quản lý các API, đặc biệt là REST. Với giao diện người dùng thân thiện, Postman cho phép gọi API mà không cần viết mã, hỗ trợ tất cả các phương thức HTTP, quản lý lịch sử request, chia sẻ và hợp tác trong nhóm, kiểm thử tự động, và làm việc với đa dạng loại dữ liệu. Đây là công cụ quan trọng cho nhà phát triển và kiểm thử API.
Thư viện JSON
JSON (JavaScript Object Notation) là một định dạng dữ liệu phổ biến trong lập trình web. JSON đóng vai trò quan trọng trong việc truyền thông tin giữa các thành phần trong lập trình web và làm cho quá trình này trở nên hiệu quả và dễ đọc.
Triển khai demo
Mô hình hoạt động của web.
api.js: Đây có thể là một tệp JavaScript chứa các functions được sử dụng để xử lý logic phía máy khách hoặc máy chủ, không nhất thiết làm API. Nếu nó được sử dụng để cung cấp API, thì nó có thể định nghĩa các endpoint để cung cấp dữ liệu hoặc thực hiện các hành động cụ thể.
db.json: là một tệp (file) JSON được sử dụng để lưu trữ dữ liệu như cơ sở dữ liệu đơn giản.
packet.json: được sử dụng để mô tả metadata của dự án Node.js, bao gồm các thông tin như tên dự án, phiên bản, tác giả, và các dependencies (thư viện) cần thiết. npm sử dụng packet.json để cài đặt và quản lý các thư viện trong dự án.
Cách thức hoạt động:
Web sẽ sử dụng JSON làm thư viện lưu trữ (db.json) và đồng thời cũng lưu trữ các package của Node JS. Node.JS khởi động để làm máy chủ ảo, lấy các thông tin package trong packet.json.
api.js (lưu trong thư mục assets/js) được sử dụng để làm API, gồm các function, thư hiện một số animation và lấy dữ liệu nhạc (từ thư mục assets/music).
Demo
