Trong video này, mình sẽ hướng dẫn các bạn xây dựng một Web App hoàn chỉnh, sử dụng Google Sheets làm cơ sở dữ liệu và Google Apps Script để kết nối, tạo nên một giao diện trực quan hóa dữ liệu (Data Visualization) cực kỳ ấn tượng.
Điểm nhấn của dự án “Tech Data Monitor”:
-
Giao diện Sci-Fi/Cyberpunk:
-
Sử dụng tông màu Neon Cyan (#1bc7cf) chủ đạo trên nền tối (Dark Mode).
-
Thiết kế khung viền cắt vát (Faceted) góc cạnh, tạo cảm giác công nghệ cao.
-
-
Biểu đồ Chart.js Tùy biến:
-
Tích hợp thư viện Chart.js để vẽ biểu đồ Doughnut mượt mà.
-
Phối màu Neon rực rỡ, độ tương phản cao.
-
Hiệu ứng Hover (rê chuột) nổi bật với viền trắng phát sáng.
-
-
Popup Thông tin “Kính Mờ” (Glassmorphism):
-
Khi click vào từng phần dữ liệu, một Popup thông tin chi tiết sẽ hiện ra.
-
Sử dụng công nghệ CSS Backdrop-filter: blur để tạo hiệu ứng kính mờ trong suốt siêu thực.
-
Hiệu ứng đổ bóng (Drop-shadow) và phát sáng (Glow) đồng bộ theo màu dữ liệu.
-
Công nghệ sử dụng trong bài:
-
Database: Google Sheets (Lưu trữ tên mặt hàng, tỉ lệ %, ghi chú).
-
Backend: Google Apps Script (Hàm
doGet,getDataFromSheet). -
Frontend: HTML5, CSS3 (Advanced Animation, Clip-path, Variables).
-
Library: Chart.js (Xử lý biểu đồ).
Bạn sẽ học được gì?
-
Cách lấy dữ liệu từ Google Sheets đẩy lên Web App bằng Apps Script.
-
Kỹ thuật CSS nâng cao: Tạo hình khối cắt góc (
clip-path), hiệu ứng kính mờ, hiệu ứng Neon. -
Cách xử lý sự kiện Click trên biểu đồ Chart.js để hiển thị dữ liệu động.
-
Tư duy thiết kế giao diện người dùng (UI) hiện đại, thoát khỏi lối mòn truyền thống.
XEM VIDEO DEMO
