Nâng cấp API Âm nhạc Đọc Tâm Trí của bạn: Thêm Tài khoản Người dùng với Lịch sử Tâm trạng & Tùy chọn Thông minh

Biến trình tạo danh sách phát phát hiện cảm xúc của bạn thành một người bạn đồng hành âm nhạc được cá nhân hóa, học hỏi từ mọi tương tác. Hướng dẫn tiếp theo này bổ sung xác thực người dùng, phân tích theo dõi tâm trạng và học hỏi sở thích thông minh để tạo ra những trải nghiệm âm nhạc thực sự được cá nhân hóa.

Những gì chúng tôi đang xây dựng hôm nay

Bạn còn nhớ API Âm nhạc Đọc Tâm Trí của chúng tôi, có khả năng phát hiện cảm xúc và tạo danh sách phát không? Hôm nay, chúng tôi sẽ cá nhân hóa nó. Chúng tôi đang bổ sung:

Xác thực người dùng thực sự hoạt động (không gây đau đầu với OAuth phức tạp)
Bảng điều khiển lịch sử tâm trạng với các phân tích đẹp mắt
Tùy chọn danh sách phát thông minh học hỏi từ hành vi của người dùng
Đề xuất được cá nhân hóa ngày càng tốt hơn theo thời gian
Tính bền vững của dữ liệu để người dùng không bao giờ đánh mất hành trình âm nhạc của mình

Đến cuối hướng dẫn này, API của bạn sẽ ghi nhớ rằng Sarah thích nhạc rock indie khi cô ấy buồn, trong khi Mike thích nhạc cổ điển cho các buổi tập trung.

Những gì bạn cần

API Âm nhạc Đọc suy nghĩ đã hoàn thành của bạn từ hướng dẫn trước
30 phút tập trung viết mã
MongoDB Tài khoản Atlas (gói miễn phí hoạt động hoàn hảo)
Hiểu biết cơ bản về cơ sở dữ liệu (chúng tôi sẽ giữ cho đơn giản!)

Thiết lập Xác thực Người dùng (Cách dễ dàng)

Trước tiên, hãy thêm các gói cần thiết để quản lý người dùng.

Truy cập terminal trong trình soạn thảo mã, nhập hoặc dán lệnh sau và nhấn enter:

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

Bước 1: Thiết lập Kết nối Cơ sở dữ liệu

Sau khi cài đặt hoàn tất, hãy tạo một tệp mới có tên database.js và thêm mã sau:

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 Đang kết nối với MongoDB...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB đã kết nối thành công!'); } catch (lỗi) { console.error('❌ Kết nối MongoDB không thành công:', error.message); process.exit(1); } }; module.exports = connectDB;

Và lưu bằng cmd + s, ctrl +s hoặc file rồi lưu.

Tạo tài khoản MongoDB Atlas của bạn

Truy cập: mongodb.com/cloud/atlas
Nhấp vào: nút "Bắt đầu" (thường ở góc trên bên phải)

Tùy chọn đăng ký

Bạn có ba cách để tạo tài khoản:

Tùy chọn A: Đăng ký qua email

Nhấp vào "Đăng ký bằng email"
Nhập địa chỉ email của bạn
Tạo mật khẩu mạnh
Nhấp vào "Tạo tài khoản Atlas của bạn"

Tùy chọn B: Đăng ký Google

Nhấp vào "Đăng ký bằng Google"
Chọn tài khoản Google của bạn
Cấp các quyền cần thiết

Tùy chọn C: Đăng ký GitHub

Nhấp vào "Đăng ký bằng GitHub"
Ủy quyền cho MongoDB Atlas truy cập tài khoản GitHub của bạn

Xác minh email của bạn

Kiểm tra hộp thư đến email của bạn
Nhấp vào liên kết xác minh từ MongoDB
Điều này xác nhận tài khoản của bạn là thật

Tạo cụm cơ sở dữ liệu đầu tiên của bạn

Nếu bạn không thấy bảng điều khiển của mình sau khi đăng nhập, bạn có thể phải nhấp vào tên của mình ở góc trên bên phải để mở menu thả xuống sau và nhấp vào Atlas:

Sau đó, bạn sẽ thấy bảng điều khiển Atlas. Đã đến lúc tạo cơ sở dữ liệu của bạn!

Chọn Loại Triển khai của Bạn

Nhấp vào "Cụm" trong "Cơ sở dữ liệu" ở thanh bên trái

Nhấp vào "Xây dựng Cụm"

Chọn "Miễn phí"

Bạn sẽ được chuyển hướng đến trang triển khai cụm của mình và bạn muốn chọn gói miễn phí.

Lựa chọn nhà cung cấp dịch vụ đám mây: Bạn sẽ thấy ba tùy chọn nhà cung cấp:

AWS (Amazon Web Services) ⭐ Được đề xuất
Google Cloud Platform
Microsoft Azure

Chọn: AWS (đây là dịch vụ phổ biến nhất và có nhiều khu vực nhất)

Lựa chọn khu vực: Sau khi chọn AWS, bạn sẽ thấy danh sách thả xuống với nhiều khu vực. Chọn vị trí gần nhất với bạn để có hiệu suất tốt hơn:

🇺🇸 Hoa Kỳ:

us-east-1 (Bắc Virginia) - Bờ biển phía Đông
us-west-2 (Oregon) - Bờ biển phía Tây
us-central-1 (Iowa) - Trung

🇪🇺 Châu Âu:

eu-west-1 (Ireland) - Tây Âu
eu-central-1 (Frankfurt) - Trung Âu
eu-west-2 (London) - Vương quốc Anh

🌏 Châu Á Thái Bình Dương:

ap-southeast-1 (Singapore) - Đông Nam Á
ap-south-1 (Mumbai) - Ấn Độ
ap-northeast-1 (Tokyo) - Nhật Bản

💡 Mẹo chuyên nghiệp: Nếu bạn không chắc chắn, us-east-1 thường là lựa chọn an toàn nhất với nhiều tính năng nhất.

Sau đó, nhấp vào nút "Tạo triển khai"

Tạo người dùng cơ sở dữ liệu

Bước 3.1: Thêm người dùng cơ sở dữ liệu

Bạn sẽ thấy màn hình "Khởi động nhanh bảo mật"
Phương pháp xác thực: Giữ nguyên "Tên người dùng và mật khẩu" được chọn
Tên người dùng: Nhập tên người dùng (ví dụ: mood-music-user)
Mật khẩu:
- Tùy chọn A: Nhấp vào "Tự động tạo mật khẩu bảo mật" (khuyến nghị)
- Tùy chọn B: Tạo mật khẩu mạnh của riêng bạn (ít nhất 8 ký tự)
Sao chép mật khẩu ngay lập tức! Bạn sẽ cần mật khẩu này cho chuỗi kết nối của mình

⚠️ Sao chép và lưu mật khẩu của bạn ngay lập tức!

Nhấp vào: "Tạo cơ sở dữ liệu Người dùng"
Nhấp vào: "Chọn phương thức kết nối"

Chọn phương thức kết nối

Bạn sẽ thấy một số tùy chọn kết nối:

Trình điều khiển 👈 Đây là những gì chúng ta muốn cho các ứng dụng Node.js
Compass (ứng dụng GUI trên máy tính để bàn của MongoDB)
Shell (giao diện dòng lệnh MongoDB)
MongoDB cho VS Code (phần mở rộng VS Code)
Atlas SQL (giao diện SQL cho MongoDB)

Chọn: "Trình điều khiển" - tùy chọn này cung cấp cho bạn chuỗi kết nối cho các ứng dụng như Node.js

Cấu hình kết nối trình điều khiển của bạn

Sau khi chọn "Trình điều khiển":

Trình điều khiển: Chọn "Node.js" từ menu thả xuống
Phiên bản: Chọn phiên bản Node.js của bạn hoặc giữ nguyên mặc định (thường hoạt động tốt)
Chuỗi kết nối: Bạn sẽ thấy chuỗi kết nối xuất hiện bên dưới

Sao chép chuỗi kết nối của bạn

Bạn sẽ thấy nội dung tương tự như điều này:

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

Quan trọng: Đây là một mẫu! Bạn cần:

Thay thế <username> bằng tên người dùng cơ sở dữ liệu của bạn
Thay thế <password> bằng mật khẩu cơ sở dữ liệu của bạn
Thêm tên cơ sở dữ liệu của bạn sau .net/

Ví dụ về chuyển đổi

Trước (mẫu):

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

Sau (sẵn sàng sử dụng):

mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority

Thông báo:

<username> → mood-music-user
<password> → MySecurePassword123
Đã thêm /mood-music-db làm tên cơ sở dữ liệu

Nhấp vào 'xong'

Bước 5: Thêm chuỗi kết nối vào dự án của bạn

Cập nhật tệp .env của bạn

Mở tệp Tệp .env và thêm:

MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=your-super-secret-jwt-key-here-make-it-long-and-random SESSION_SECRET=another-secret-key-for-sessions-also-long-and-random

Tạo bí mật mạnh

Đối với JWT_SECRET và SESSION_SECRET, bạn cần các chuỗi ngẫu nhiên sẽ không làm hỏng các tệp cấu hình của bạn.

⚠️ Quan trọng: Tránh các ký tự đặc biệt như @, #, $, %, /, ? trong mật khẩu vì chúng có thể làm hỏng chuỗi kết nối và tệp JSON.

Tùy chọn A: Trình tạo trực tuyến đơn giản (Được đề xuất)

Truy cập: JWTSECRETS
Cài đặt:
- Số lượng mật khẩu: 1
- Độ dài mật khẩu: 32
- ✅ Đánh dấu vào "chữ in hoa (A-Z)"
- ✅ Đánh dấu vào "chữ thường (a-z)"
- ✅ Chọn "chữ số (0-9)"
- ❌ Bỏ chọn "dấu câu"
Nhấp vào "Lấy mật khẩu"

Tùy chọn B: Sử dụng Bảng điều khiển của trình duyệt (Siêu dễ!)

Mở bất kỳ trang web nào (như google.com)
Nhấn F12 (hoặc nhấp chuột phải → Kiểm tra)
Nhấp vào tab "Bảng điều khiển"

Dán mã này và nhấn Enter:

Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)

Sao chép kết quả - kết quả sẽ giống như sau: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

Tùy chọn C: Phương pháp thủ công (Nếu tất cả các cách khác đều không thành công)

Chỉ cần nhập một chuỗi ký tự dài ngẫu nhiên bằng cách sử dụng:

Chữ cái: A-Z, a-z
Số: 0-9
Ví dụ: MyApp2024SecretKey789RandomString456Auth

Ví dụ .env cuối cùng

SPOTIFY_CLIENT_ID=your_spotify_client_id_here SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=A8f2K9mP3qR7sT1vW5yX8bC4eN6jL2oU9iH7gF3dS6aZ1mQ4wE8rT5yU2pI9oL SESSION_SECRET=B7gT3mK9pL2sF6vW1yX4eR8aC5qN9jM7oU3iH6dG2fS8aZ4mQ1wE5rT7yU9pI3oL PORT=3000

Điểm chính:

✅ Không có ký tự đặc biệt trong JWT_SECRET và SESSION_SECRET
✅ Mật khẩu MongoDB tránh các ký tự làm hỏng URL
✅ Tất cả các bí mật đều dài và ngẫu nhiên
✅ An toàn khi sử dụng trong các tệp JSON và chuỗi kết nối

Bước 2: Mô hình người dùng với Mood Theo dõi

Tạo một thư mục có tên models và thêm một tệp có tên User.js vào thư mục. Sau đó, thêm và lưu mã sau vào tệp:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ text: String, detectedMood: String, confidence: Number, playlistGenerated: [{ trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } }], timestamp: { type: Date, default: Date.now } }); const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [Chuỗi], preferredEnergyLevel: { loại: Số, tối thiểu: 0, tối đa: 1 }, dislikedArtists: [Chuỗi], moodMusicMapping: { vui vẻ: [Chuỗi], buồn bã: [Chuỗi], năng động: [Chuỗi], thư giãn: [Chuỗi], tức giận: [Chuỗi], lãng mạn: [Chuỗi], hoài cổ: [Chuỗi] } }); const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true, trim: true, minlength: 3 }, email: { type: String, required: true, unique: true, lowercase: true }, password: { type: String, required: true, minlength: 6 }, moodHistory: [moodEntrySchema], preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Băm mật khẩu trước khi lưu userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // So sánh mật khẩu userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // Tính toán số liệu thống kê người dùng userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // Tìm tâm trạng phổ biến nhất const moodCounts = moods.reduce((acc, mood) => { acc[mood] = (acc[mood] || 0) + 1; return acc; }, {}); this.stats.mostCommonMood = Object.keys(moodCounts).reduce((a, b) => moodCounts[a] > moodCounts[b] ? a : b, 'neutral'); // Xác định thời gian yêu thích trong ngày const hours = this.moodHistory.map(entry => entry.timestamp.getHours()); const avgHour = hours.reduce((a, b) => a + b, 0) / hours.length; if (avgHour < 6) this.stats.favoriteTime = 'night'; else if (avgHour < 12) this.stats.favoriteTime = 'morning'; else if (avgHour < 18) this.stats.favoriteTime = 'afternoon'; else this.stats.favoriteTime = 'evening'; }; module.exports = mongoose.model('User', userSchema);

Bước 3: Phần mềm trung gian xác thực

Tạo một thư mục có tên middleware và thêm một tệp có tên auth.js vào đó. Sau đó, thêm mã sau vào tệp và lưu lại:

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { try { const token = req.header('Authorization')?.replace('Bearer ', '') || req.session.token; if (!token) { return res.status(401).json({ error: 'Không cung cấp mã thông báo' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (!user) { return res.status(401).json({ error: 'Không tìm thấy người dùng' }); } req.user = user; next(); } catch (error) { res.status(401).json({ error: 'Mã thông báo không hợp lệ' }); } }; module.exports = auth;

Bảng điều khiển người dùng với Analytics đẹp mắt

Tạo một thư mục mới trong dự án của bạn và đặt tên là public sau đó thêm một tệp vào bên trong thư mục này và đặt tên là index.html:

<!DOCTYPE html> <html> <head> <title>API Âm nhạc Đọc suy nghĩ - Bảng điều khiển cá nhân</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; } .dashboard { max-width: 1200px; margin: 0 auto; padding: 20px; } .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .stats-grid { hiển thị: lưới; grid-template-columns: lặp lại(tự động điều chỉnh, minmax(250px, 1fr)); khoảng cách: 20px; lề dưới: 30px; } .stat-card { nền: rgba(255,255,255,0.9); bán kính đường viền: 15px; đệm: 25px; căn chỉnh văn bản: giữa; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .mood-input-section { nền: rgba(255,255,255,0.95); bán kính đường viền: 20px; đệm: 30px; lề dưới: 30px; } .mood-history { nền: rgba(255,255,255,0.95); bán kính đường viền: 20px; đệm: 30px; } .history-item { nền: #f8f9fa; bán kính đường viền: 10px; đệm: 15px; lề dưới: 15px; viền trái: 4px solid #667eea; } .login-section, .register-section { nền: rgba(255,255,255,0.95); bán kính đường viền: 20px; đệm: 30px; chiều rộng tối đa: 400px; lề: 50px auto; } đầu vào, vùng văn bản, nút { chiều rộng: 100%; đệm: 12px; lề: 10px 0; đường viền: 2px solid #e1e5e9; bán kính đường viền: 8px; font-size: 16px; } button { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; cursor: pointer; font-weight: 600; } button:hover { transform: translateY(-2px); } </style> </head> <body> <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 Chào mừng trở lại!</h2> <input type="text" id="loginUsername" placeholder="Username"> <input type="password" id="loginPassword" placeholder="Password"> <button onclick="login()">Đăng nhập</button> <p><a href="#" onclick="showRegister()">Bạn chưa có tài khoản? Đăng ký</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵 Tạo Hồ sơ Âm nhạc của Bạn</h2> <input type="text" id="regUsername" placeholder="Username"> <input type="email" id="regEmail" placeholder="Email"> <input type="password" id="regPassword" placeholder="Password"> <button onclick="register()">Tạo tài khoản</button> <p><a href="#" onclick="showLogin()">Bạn đã có tài khoản? Đăng nhập</a></p> </div> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 Trình đọc suy nghĩ âm nhạc cá nhân của bạn</h1> <p>Chào mừng trở lại, <span id="username"></span>! Bạn đã sẵn sàng khám phá bản nhạc nền hoàn hảo của mình chưa?</p> <button onclick="logout()" style="width:auto; margin-top:10px;">Đăng xuất</button> </div> <div class="stats-grid"> <div class="stat-card"> <h3>📊 Tổng số danh sách phát</h3> <div id="totalPlaylists" class="stat-number">0</div&</div> <div class="stat-card"> <h3>😊 Tâm trạng yêu thích</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐 Thời gian tuyệt vời nhất</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 Thể loại hàng đầu</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 Hiện tại bạn cảm thấy thế nào?</h2> <textarea id="moodText" placeholder="Mô tả tâm trạng hiện tại của bạn, những gì đang xảy ra hoặc cảm giác bạn muốn..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 Tạo danh sách phát hoàn hảo của tôi</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 Hành trình tâm trạng của bạn</h2> <div id="historyContainer"></div> </div> </div> </div> </div> <script src="/js/app.js"></script> </body> </html>

Bây giờ, bên trong thư mục public của bạn, hãy tạo một thư mục và đặt tên là js, sau đó tạo một tệp app.js bên trong thư mục js với mã sau:

let authToken = localStorage.getItem('authToken'); let currentUser = null; if (authToken) { loadDashboard(); } function showLogin() { document.querySelector('.login-section').style.display = 'block'; document.getElementById('registerSection').style.display = 'none'; } function showRegister() { document.querySelector('.login-section').style.display = 'none'; document.getElementById('registerSection').style.display = 'block'; } hàm async login() { const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; if (!username || !password) { alert('Vui lòng điền vào tất cả các trường'); return; } try { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = await response.json(); if (response.ok) { authToken = data.token; localStorage.setItem('authToken', authToken); loadDashboard(); } else { alert(data.error || 'Đăng nhập không thành công'); } } catch (lỗi) { console.error('Lỗi đăng nhập:', lỗi); cảnh báo('Đăng nhập không thành công. Vui lòng thử lại.'); } } async function register() { const username = document.getElementById('regUsername').value; const email = document.getElementById('regEmail').value; const password = document.getElementById('regPassword').value; if (!username || !email || !password) { cảnh báo('Vui lòng điền vào tất cả các trường'); return; } try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, email, password }) }); const data = await response.json(); if (response.ok) { cảnh báo('Đã tạo tài khoản thành công! Vui lòng đăng nhập.'); showLogin(); } else { alert(data.error || 'Đăng ký không thành công'); } } catch (lỗi) { console.error('Lỗi đăng ký:', lỗi); alert('Đăng ký không thành công. Vui lòng thử lại.'); } } async function loadDashboard() { try { const response = await fetch('/api/profile', { headers: { 'Authorization': 'Bearer ' + authToken } }); if (response.ok) { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } else { logout(); } } catch (lỗi) { console.error('Lỗi tải bảng điều khiển:', lỗi); logout(); } } function showDashboard() { document.getElementById('authSection').style.display = 'none'; document.getElementById('dashboardSection').style.display = 'block'; document.getElementById('tên người dùng').textContent = currentUser.username; } hàm updateStats() { document.getElementById('totalPlaylists').textContent = currentUser.stats.totalPlaylists || 0; document.getElementById('favoriteMood').textContent = currentUser.stats.mostCommonMood || '-'; document.getElementById('bestTime').textContent = currentUser.stats.favoriteTime || '-'; document.getElementById('topGenre').textContent = (currentUser.preferences.favoriteGenres && currentUser.preferences.favoriteGenres[0]) || '-'; } hàm loadMoodHistory() { const historyContainer = document.getElementById('historyContainer'); if (!currentUser.moodHistory || currentUser.moodHistory.length === 0) { historyContainer.innerHTML = '<p>Chưa có lịch sử tâm trạng. Tạo danh sách phát đầu tiên của bạn!</p>'; return; } const recentHistory = currentUser.moodHistory.slice(-5).reverse(); historyContainer.innerHTML = recentHistory.map(entry => `<div class="history-item"> <strong>${entry.detectedMood}</strong> - ${new Date(entry.timestamp).toLocaleDateString()} <p>${entry.text}</p> <small>${entry.playlistGenerated.length} các bản nhạc được tạo </small> </div>` ).join(''); } hàm async generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('Vui lòng mô tả cảm giác của bạn!'); return; } thử { const response = await fetch('/api/personalized-playlist', { phương thức: 'POST', tiêu đề: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, nội dung: JSON.stringify({ văn bản: moodText }) }); const data = await response.json(); if (response.ok) { displayPersonalizedResults(dữ liệu); loadDashboard(); } else { cảnh báo(data.error || 'Không tạo được danh sách phát'); } } catch (lỗi) { console.error('Lỗi tạo danh sách phát:', lỗi); cảnh báo('Không tạo được danh sách phát. Vui lòng thử lại.'); } } hàm displayPersonalizedResults(dữ liệu) { const resultDiv = document.getElementById('result'); resultDiv.style.display = 'block'; const html = ` <h3>Tâm trạng đã phát hiện: ${data.moodAnalysis.mood} (Độ tin cậy: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || 'Đây là danh sách phát của bạn!'}</p> <div class="playlist"> ${data.playlist.map(track => ` <div style="display: flex; align-items: center; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 8px;"> ${track.album_image ? `<img src="${track.album_image}" alt="Album" style="width:50px;height:50px;border-radius:8px;margin-right:15px;">` : ''} <div style="flex: 1;"> <strong>${track.name}</strong><br> <span style="color: #666;">${track.artist}</span> </div> <div> <button onclick="likeTrack('${track.id}', true)" style="width:auto;padding:5px 10px;margin:0 5px;">👍</button> <button onclick="likeTrack('${track.id}', false)" style="width:auto;padding:5px 10px;margin:0 5px;">👎</button> </div> </div> `).join('')} </div> `; resultDiv.innerHTML = html; } hàm async likeTrack(trackId, liked) { try { await fetch('/api/track-feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ trackId: trackId, liked: liked }) }); alert(liked ? 'Cảm ơn! Chúng tôi sẽ giới thiệu thêm những bài viết tương tự.' : 'Hiểu rồi! Chúng tôi sẽ tránh những bài viết tương tự.'); } catch (error) { console.error('Lỗi phản hồi:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin(); }

Thay thế tệp server.js của bạn

Thay thế mã tệp server.js của bạn bằng mã sau:

require('dotenv').config(); const express = require('express'); const mongoose = require('mongoose'); const jwt = require('jsonwebtoken'); const auth = require('./middleware/auth'); const User = require('./models/User'); const moodAnalyzer = require('./moodAnalyzer'); const PlaylistGenerator = require('./playlistGenerator'); // Kết nối với MongoDB const connectDB = async () => { try { console.log('🔗 Đang kết nối với MongoDB...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB đã kết nối thành công!'); } catch (lỗi) { console.error('❌ Kết nối MongoDB không thành công:', error.message); process.exit(1); } }; connectDB(); const app = express(); const PORT = process.env.PORT || 3000; const playlistGen = new PlaylistGenerator(); app.use(express.json()); app.use(express.static('public')); // Phục vụ trang chính app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // Đăng ký người dùng app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; if (!username || !email || !password) { return res.status(400).json({ error: 'Tất cả các trường đều bắt buộc' }); } if (password.length < 6) { return res.status(400).json({ error: 'Mật khẩu phải có ít nhất 6 ký tự' }); } const existingUser = await User.findOne({ $or: {[ email }, { username }] }); if (existingUser) { return res.status(400).json({ error: 'Tên người dùng hoặc email đã tồn tại' }); } const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'Người dùng đã được tạo thành công' }); } catch (lỗi) { console.error('Lỗi đăng ký:', lỗi); res.status(500).json({ error: 'Đăng ký không thành công' }); } }); // Ứng dụng đăng nhập người dùng.post('/api/login', async (req, res) => { thử { const { tên người dùng, mật khẩu } = req.body; const người dùng = await User.findOne({ $or: {[ tên người dùng }, { email: tên người dùng }] }); if (!user || !(await user.comparePassword(password))) { trả về res.status(401).json({ lỗi: 'Thông tin đăng nhập không hợp lệ' }); } const token = jwt.sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ token, người dùng: { tên người dùng: user.username, email: user.email } }); } catch (lỗi) { console.error('Lỗi đăng nhập:', lỗi); res.status(500).json({ lỗi: 'Đăng nhập không thành công' }); } }); // Lấy hồ sơ người dùng app.get('/api/profile', auth, async (req, res) => { try { req.user.updateStats(); await req.user.save(); res.json(req.user); } catch (lỗi) { res.status(500).json({ lỗi: 'Không tải được hồ sơ' }); } }); // Ứng dụng tạo danh sách phát được cá nhân hóa.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Vui lòng cho tôi biết cảm nhận của bạn!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // Lưu vào lịch sử người dùng req.user.moodHistory.push({ text, detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, playlistGenerated: playlist.map(track => ({ trackName: track.name, artist: track.artist, spotifyId: track.id })) }); req.user.updateStats(); await req.user.save(); res.json({ moodAnalysis, playlist, personalizedMessage: `Dựa trên lịch sử của bạn, tôi đã thiết kế danh sách phát này dành riêng cho tâm trạng ${moodAnalysis.mood} của bạn!` }); } catch (lỗi) { console.error('Lỗi danh sách phát được cá nhân hóa:', lỗi); res.status(500).json({ lỗi: 'Không tạo được danh sách phát được cá nhân hóa. Vui lòng thử lại.' }); } }); // Theo dõi phản hồi app.post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, liked } = req.body; res.json({ message: 'Đã nhận được phản hồi! Chúng tôi sẽ cải thiện các đề xuất trong tương lai.' }); } catch (error) { console.error('Lỗi phản hồi:', error); res.status(500).json({ error: 'Không xử lý được phản hồi' }); } }); app.listen(PORT, () => { console.log(`🚀 API âm nhạc đọc suy nghĩ đang chạy trên http://localhost:${PORT}`); console.log('🧠 Sẵn sàng phân tích tâm trạng và tạo danh sách phát!'); });

Những điều bạn có thể làm ngay bây giờ

1. Người dùng ẩn danh (Chức năng gốc)

Truy cập trang web của bạn mà không cần đăng nhập
Tạo danh sách phát bằng cách sử dụng tính năng phân tích tâm trạng hiện có của bạn
Nhận đề xuất âm nhạc dựa trên cảm xúc

2. Người dùng đã đăng ký (Tính năng mới)

Tạo tài khoản và đăng nhập
Tạo danh sách phát được cá nhân hóa, cải thiện theo thời gian
Xem lịch sử tâm trạng và phân tích cá nhân
Thích/không thích các bản nhạc để huấn luyện AI
Xem các số liệu thống kê như tâm trạng yêu thích, tổng số danh sách phát, v.v.

Hướng dẫn kiểm tra từng bước

Bài kiểm tra 1: Kiểm tra máy chủ của bạn đã khởi động

node server.js

Bạn sẽ thấy:

🔑 Đang thử xác thực Spotify... 🎵 Spotify đã kết nối thành công! 🔗 MongoDB đang kết nối... ✅ MongoDB đã kết nối thành công! 🚀 API Âm nhạc Đọc suy nghĩ đang chạy trên http://localhost:3000 🧠 Sẵn sàng phân tích tâm trạng và tạo danh sách phát!

Bài kiểm tra 2: Truy cập trang web của bạn

Truy cập: http://localhost:3000

Những gì bạn sẽ thấy:

Biểu mẫu đăng nhập yêu cầu tên người dùng/mật khẩu
Liên kết "Bạn chưa có tài khoản? Đăng ký"

Bài kiểm tra 3: Tạo tài khoản đầu tiên của bạn

Nhấp vào: "Bạn chưa có tài khoản? Đăng ký"
Điền vào:
- Tên người dùng: testuser
- Email: test@example.com
- Mật khẩu: password123
Nhấp vào: "Tạo tài khoản"
Kết quả mong đợi: "Đã tạo tài khoản thành công! Vui lòng đăng nhập."

Bài kiểm tra 4: Đăng nhập vào Bảng điều khiển của bạn

Sử dụng thông tin đăng nhập bạn vừa tạo
Nhấp vào: "Đăng nhập"
Bạn sẽ thấy:
- Tin nhắn chào mừng với tên người dùng của bạn
- Thẻ thống kê hiển thị 0 danh sách phát, chưa có tâm trạng yêu thích nào
- Vùng văn bản hỏi "Bạn cảm thấy thế nào lúc này?"

Bài kiểm tra 5: Tạo danh sách phát được cá nhân hóa đầu tiên của bạn

Nhập nội dung như sau: "Tôi cảm thấy rất hào hứng về dự án mới của mình!"
Nhấp vào: "Tạo danh sách phát hoàn hảo của tôi"
Bạn sẽ thấy:
- Phát hiện tâm trạng (có thể là "tràn đầy năng lượng" hoặc "vui vẻ")
- Danh sách bài hát có ảnh bìa album
- Xem trước trình phát âm thanh (nếu có)
- Nút thích/không thích cho mỗi bài hát

Bài kiểm tra 6: Kiểm tra Hệ thống học tập

Nhấp vào thích 👍 cho những bài hát bạn thích
Nhấp vào không thích 👎 cho những bài hát bạn không thích
Dự kiến: Thông báo cảnh báo có nội dung "Cảm ơn! Chúng tôi sẽ đề xuất thêm những bài hát tương tự"

Bài kiểm tra 7: Kiểm tra Cập nhật số liệu thống kê của bạn

Làm mới trang hoặc tạo danh sách phát khác
Thống kê của bạn bây giờ sẽ hiển thị:
- Tổng số danh sách phát: 1 (hoặc nhiều hơn)
- Tâm trạng yêu thích: bất kỳ tâm trạng nào được phát hiện
- Các thống kê khác sẽ bắt đầu xuất hiện

Thử các tình huống khác nhau

Thử các tâm trạng khác nhau:

"Tôi vừa chia tay bạn gái và trời đang mưa" (sẽ phát hiện: buồn)
"Tôi đang rất hào hứng cho buổi tập luyện của mình!" (nên phát hiện: tràn đầy năng lượng)
"Chỉ muốn thư giãn và học tập trong yên tĩnh" (nên phát hiện: thư giãn)
"Cảm thấy lãng mạn trong đêm hẹn hò này" (nên phát hiện: lãng mạn)

Kiểm tra các trường hợp ngoại lệ:

"" (trống - phải hiển thị lỗi)
"văn bản ngẫu nhiên asdf" (phải mặc định là trung tính/thư giãn)
"Tôi CỰC KỲ phấn khích!!!" (sẽ phát hiện ra mức độ tin cậy cao hơn)

Các sự cố thường gặp & Cách khắc phục nhanh

❌ "Kết nối MongoDB không thành công"

Kiểm tra: Tệp .env của bạn đã được thiết lập đúng với chuỗi kết nối MongoDB chưa?

# Chạy lệnh này để kiểm tra kết nối cơ sở dữ liệu của bạn node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Đặt ✅' : 'Thiếu ❌');"

❌ "Kết nối Spotify không thành công"

Kiểm tra: Khóa API Spotify của bạn có nằm trong tệp .env không?

# Chạy lệnh này để kiểm tra thông tin đăng nhập Spotify node -e "require('dotenv').config(); console.log('Spotify Client ID:', process.env.SPOTIFY_CLIENT_ID ? 'Đặt ✅' : 'Thiếu ❌');"

❌ Đăng nhập/Đăng ký không hoạt động

Kiểm tra: Bạn có thấy bất kỳ thông báo lỗi nào trong bảng điều khiển trình duyệt không?

Nhấn F12 → Tab bảng điều khiển
Tìm thông báo lỗi màu đỏ

❌ Trang hiển thị giao diện cũ

Giải pháp: Làm mới trang một cách cứng nhắc

Nhấn Ctrl+Shift+R (Windows/Linux)
Nhấn Cmd+Shift+R (Mac)

Những gì nên hoạt động so với những gì vẫn cơ bản

✅ Nên hoạt động ngay bây giờ:

Đăng ký và đăng nhập người dùng
Phát hiện tâm trạng cơ bản và tạo danh sách phát
Lưu lịch sử tâm trạng vào cơ sở dữ liệu
Phản hồi thích/không thích đơn giản
Theo dõi số liệu thống kê (tổng số danh sách phát, tâm trạng yêu thích)

🚧 Vẫn cơ bản (Các tính năng nâng cao để sử dụng sau):

Học máy phức tạp từ phản hồi của người dùng
Tính năng xã hội và chia sẻ danh sách phát
Phân tích nâng cao và các mẫu tâm trạng
Giao diện ứng dụng di động

Các bước tiếp theo sau khi thử nghiệm

Sau khi mọi thứ hoạt động:

Thử với những người dùng khác nhau - tạo nhiều tài khoản để xem mức độ cá nhân hóa khác nhau như thế nào
Tạo nhiều danh sách phát - xem số liệu thống kê và sở thích của bạn phát triển như thế nào
Cung cấp phản hồi về các bản nhạc - xem hệ thống tìm hiểu sở thích của bạn như thế nào
Kiểm tra bảng điều khiển MongoDB Atlas của bạn - bạn sẽ thấy dữ liệu đang được lưu trữ

Kết luận

Bạn vừa xây dựng một thứ gì đó Đáng chú ý - một AI không chỉ hiểu cảm xúc con người mà còn học hỏi và thích nghi với sở thích cá nhân theo thời gian. API Âm nhạc Đọc Tâm trí của bạn giờ đây có trí nhớ, tính cách và khả năng phát triển cùng người dùng.

Sự kết hợp giữa phát hiện tâm trạng, học hỏi người dùng và đề xuất được cá nhân hóa tạo nên trải nghiệm kỳ diệu hơn sau mỗi tương tác. Hành trình của mỗi người dùng trở nên độc đáo, xây dựng nên một bản nhạc nền cá nhân cho đời sống cảm xúc của họ.

API của bạn giờ đây ghi nhớ mọi tâm trạng, học hỏi từ mọi tương tác và xây dựng sự hiểu biết toàn diện về sở thích âm nhạc của mỗi người dùng. Đây là nền tảng cho trải nghiệm AI thực sự được cá nhân hóa.

Tiếp theo là gì?

Bạn đã sẵn sàng đưa điều này tiến xa hơn chưa? Sau đây là một số hướng dẫn thú vị:

Phân tích nâng cao: Thêm nhận dạng mẫu tâm trạng và đề xuất dự đoán
Tính năng mạng xã hội: Cho phép người dùng chia sẻ danh sách phát và khám phá sở thích âm nhạc của bạn bè
Ứng dụng di động: Xây dựng ứng dụng React Native hoặc Flutter cho iOS/Android
Tích hợp giọng nói: Thêm chuyển giọng nói thành văn bản để nhập tâm trạng rảnh tay
Học máy: Triển khai lọc cộng tác để có những đề xuất tốt hơn nữa
Triển khai: Triển khai lên AWS/Vercel với các biến môi trường phù hợp

Tiếp tục thử nghiệm và xây dựng - tương lai của trải nghiệm AI được cá nhân hóa nằm trong tay bạn!

Bạn đã sẵn sàng cho thử thách tiếp theo chưa? Hãy theo dõi hướng dẫn sắp tới của chúng tôi về cách thêm tính năng mạng xã hội và lọc cộng tác để tạo ra mạng lưới khám phá âm nhạc kết nối mọi người thông qua những trải nghiệm cảm xúc chung.