ยกระดับ API เพลงอ่านใจของคุณ: การเพิ่มบัญชีผู้ใช้ด้วยประวัติอารมณ์และการตั้งค่าอัจฉริยะ

เปลี่ยนเครื่องสร้างเพลย์ลิสต์ที่ตรวจจับอารมณ์ของคุณให้กลายเป็นเพื่อนคู่ใจทางดนตรีที่เรียนรู้จากทุกการโต้ตอบ บทช่วยสอนเพิ่มเติมนี้จะเพิ่มการตรวจสอบสิทธิ์ผู้ใช้ การวิเคราะห์การติดตามอารมณ์ และการเรียนรู้การตั้งค่าอัจฉริยะ เพื่อสร้างประสบการณ์ทางดนตรีที่ปรับแต่งได้อย่างแท้จริง

สิ่งที่เรากำลังสร้างในวันนี้

จำ API เพลงอ่านใจของเราที่สามารถตรวจจับอารมณ์และสร้างเพลย์ลิสต์ได้ไหม? วันนี้เรากำลังทำให้มันเป็นส่วนตัว เรากำลังเพิ่ม:

การตรวจสอบสิทธิ์ผู้ใช้ ที่ใช้งานได้จริง (ไม่มีปัญหา OAuth ที่ซับซ้อน)
แดชบอร์ดประวัติอารมณ์ พร้อมการวิเคราะห์ที่สวยงาม
การตั้งค่าเพลย์ลิสต์อัจฉริยะ ที่เรียนรู้จากพฤติกรรมของผู้ใช้
คำแนะนำส่วนบุคคล ที่ดีขึ้นเรื่อยๆ
การคงอยู่ของข้อมูล เพื่อให้ผู้ใช้ไม่สูญเสียการเดินทางทางดนตรีของตน

เมื่อจบบทช่วยสอนนี้ API ของคุณจะจำได้ว่า Sarah ชอบเพลงอินดี้ร็อกเมื่อเธอเศร้า ในขณะที่ Mike ชอบเพลงคลาสสิกสำหรับเซสชันที่ต้องการสมาธิ

สิ่งที่คุณต้องการ

API การอ่านใจเพลงที่คุณทำเสร็จแล้วจากบทช่วยสอนก่อนหน้า
การเขียนโค้ดอย่างมีสมาธิ 30 นาที เวลา
บัญชี MongoDB Atlas (แบบฟรีทำงานได้อย่างสมบูรณ์แบบ)
ความเข้าใจพื้นฐานเกี่ยวกับฐานข้อมูล (เราจะทำให้มันเรียบง่าย!)

การตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ (วิธีง่ายๆ)

ขั้นแรก ให้เพิ่มแพ็กเกจที่เราต้องการสำหรับการจัดการผู้ใช้

ไปที่เทอร์มินัลของคุณในโปรแกรมแก้ไขโค้ด พิมพ์หรือวางคำสั่งต่อไปนี้ แล้วกด Enter:

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

ขั้นตอนที่ 1: การตั้งค่าการเชื่อมต่อฐานข้อมูล

เมื่อการติดตั้งของคุณเสร็จสิ้น ให้สร้างไฟล์ใหม่ชื่อ database.js และเพิ่มโค้ดต่อไปนี้:

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 กำลังเชื่อมต่อกับ MongoDB...'); รอ mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB เชื่อมต่อสำเร็จแล้ว!'); } catch (error) { console.error('❌ การเชื่อมต่อ MongoDB ล้มเหลว:', error.message); process.exit(1); } }; module.exports = connectDB;

และบันทึกด้วย cmd + s, ctrl + s หรือ file จากนั้นบันทึก

สร้างบัญชี MongoDB Atlas ของคุณ

ไปที่: mongodb.com/cloud/atlas
คลิก: ปุ่ม "เริ่มต้นใช้งาน" (ปกติจะอยู่ที่มุมขวาบน)

ตัวเลือกการสมัครสมาชิก

คุณมีสามวิธีในการสร้างบัญชี:

ตัวเลือก A: สมัครสมาชิกทางอีเมล

คลิก "สมัครสมาชิกด้วยอีเมล"
ป้อนที่อยู่อีเมลของคุณ
สร้างรหัสผ่านที่แข็งแกร่ง
คลิก "สร้างบัญชี Atlas ของคุณ"

ตัวเลือก B: สมัครสมาชิก Google

คลิก "สมัครสมาชิกด้วย Google"
เลือกบัญชี Google ของคุณ
ให้สิทธิ์ที่จำเป็น

ตัวเลือก C: สมัครสมาชิก GitHub

คลิก "สมัครสมาชิกด้วย GitHub"
อนุญาตให้ MongoDB Atlas เข้าถึงบัญชี GitHub ของคุณ

ยืนยันอีเมลของคุณ

ตรวจสอบกล่องจดหมายอีเมลของคุณ
คลิกลิงก์ยืนยันจาก MongoDB
เพื่อยืนยันว่าบัญชีของคุณเป็นของจริง

สร้างคลัสเตอร์ฐานข้อมูลแรกของคุณ

หากคุณไม่เห็นแดชบอร์ดหลังจากเข้าสู่ระบบแล้ว คุณอาจต้องคลิกที่ชื่อของคุณที่มุมบนขวาเพื่อเปิดเมนูแบบดรอปดาวน์ต่อไปนี้ และคลิกที่ Atlas:

จากนั้นคุณจะเห็นแดชบอร์ด Atlas ถึงเวลาสร้างฐานข้อมูลของคุณแล้ว!

เลือกประเภทการใช้งานของคุณ

คลิกที่ "คลัสเตอร์" ใต้ "ฐานข้อมูล" จากแถบด้านข้างซ้าย

คลิกที่ "สร้างคลัสเตอร์"

เลือก "ฟรี"

คุณจะถูกส่งต่อไปยังหน้าปรับใช้คลัสเตอร์ของคุณและคุณต้องการเลือกแผนฟรี

การเลือกผู้ให้บริการระบบคลาวด์: คุณจะเห็นตัวเลือกผู้ให้บริการสามตัวเลือก:

AWS (Amazon Web Services) ⭐ แนะนำ
Google Cloud Platform
Microsoft Azure

เลือก: AWS (เป็นที่นิยมมากที่สุดและมีภูมิภาคมากที่สุด)

การเลือกภูมิภาค: หลังจากเลือก AWS แล้ว คุณจะเห็นรายการดรอปดาวน์ที่มีภูมิภาคต่างๆ มากมาย เลือกสถานที่ที่ใกล้กับตำแหน่งของคุณที่สุดเพื่อประสิทธิภาพที่ดีขึ้น:

🇺🇸 สหรัฐอเมริกา:

us-east-1 (เวอร์จิเนียเหนือ) - ชายฝั่งตะวันออก
us-west-2 (ออริกอน) - ชายฝั่งตะวันตก
us-central-1 (ไอโอวา) - ตอนกลาง

🇪🇺 ยุโรป:

eu-west-1 (ไอร์แลนด์) - ยุโรปตะวันตก
eu-central-1 (แฟรงก์เฟิร์ต) - ยุโรปกลาง
eu-west-2 (ลอนดอน) - สหราชอาณาจักร

🌏 เอเชียแปซิฟิก:

ap-southeast-1 (สิงคโปร์) - เอเชียตะวันออกเฉียงใต้
ap-south-1 (มุมไบ) - อินเดีย
ap-northeast-1 (โตเกียว) - ญี่ปุ่น

💡 เคล็ดลับจากผู้เชี่ยวชาญ: หากคุณไม่แน่ใจ us-east-1 มักจะเป็นตัวเลือกที่ปลอดภัยที่สุดและมีฟีเจอร์มากที่สุด

จากนั้นคลิกปุ่ม "สร้างการปรับใช้"

สร้างผู้ใช้ฐานข้อมูล

ขั้นตอนที่ 3.1: เพิ่มผู้ใช้ฐานข้อมูล

คุณจะเห็นหน้าจอ "การเริ่มต้นใช้งานความปลอดภัยอย่างรวดเร็ว"
วิธีการตรวจสอบสิทธิ์: เลือก "ชื่อผู้ใช้และรหัสผ่าน" ไว้
ชื่อผู้ใช้: ป้อนชื่อผู้ใช้ (เช่น mood-music-user)
รหัสผ่าน:
- ตัวเลือก A: คลิก "สร้างรหัสผ่านที่ปลอดภัยโดยอัตโนมัติ" (แนะนำ)
- ตัวเลือก B: สร้างรหัสผ่านที่แข็งแกร่งของคุณเอง (อย่างน้อย 8 ตัวอักษร)
คัดลอกรหัสผ่านทันที! คุณจะต้องใช้สิ่งนี้สำหรับสตริงการเชื่อมต่อของคุณ

⚠️ คัดลอกและบันทึกรหัสผ่านของคุณทันที!

คลิก: "สร้าง ผู้ใช้ฐานข้อมูล"
คลิก: "เลือกวิธีการเชื่อมต่อ"

เลือกวิธีการเชื่อมต่อ

คุณจะเห็นตัวเลือกการเชื่อมต่อหลายรายการ:

ไดรเวอร์ 👈 นี่คือสิ่งที่เราต้องการสำหรับแอปพลิเคชัน Node.js
Compass (แอปพลิเคชัน GUI บนเดสก์ท็อปของ MongoDB)
Shell (อินเทอร์เฟซบรรทัดคำสั่งของ MongoDB)
MongoDB สำหรับ VS Code (ส่วนขยายของ VS Code)
Atlas SQL (อินเทอร์เฟซ SQL สำหรับ MongoDB)

เลือก: "ไดรเวอร์" - ซึ่งจะทำให้คุณได้รับสตริงการเชื่อมต่อสำหรับแอปพลิเคชันเช่น Node.js

กำหนดค่าการเชื่อมต่อไดรเวอร์ของคุณ

หลังจากเลือก "ไดรเวอร์":

ไดรเวอร์: เลือก "Node.js" จากรายการดรอปดาวน์
เวอร์ชัน: เลือกเวอร์ชัน Node.js ของคุณหรือปล่อยไว้เป็นค่าเริ่มต้น (โดยปกติจะใช้งานได้ดี)
สตริงการเชื่อมต่อ: คุณจะเห็นสตริงการเชื่อมต่อปรากฏอยู่ด้านล่าง

คัดลอกการเชื่อมต่อของคุณ สตริง

คุณจะเห็นบางอย่างเช่นนี้:

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

สำคัญ: นี่คือเทมเพลต! คุณต้อง:

แทนที่ <username> ด้วยชื่อผู้ใช้ฐานข้อมูลของคุณ
แทนที่ <password> ด้วยรหัสผ่านฐานข้อมูลของคุณ
เพิ่มชื่อฐานข้อมูลของคุณหลัง .net/

ตัวอย่างการแปลง

ก่อน (เทมเพลต):

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

หลัง (พร้อมใช้งาน):

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

หมายเหตุ:

<ชื่อผู้ใช้> → mood-music-user
<รหัสผ่าน> → MySecurePassword123
เพิ่ม /mood-music-db เป็นชื่อฐานข้อมูล

คลิก 'เสร็จสิ้น'

ขั้นตอนที่ 5: เพิ่มสตริงการเชื่อมต่อให้กับโครงการของคุณ

อัปเดตไฟล์ .env ของคุณ

เปิดไฟล์ .env ของคุณ และเพิ่ม:

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

สร้างความลับที่แข็งแกร่ง

สำหรับ JWT_SECRET และ SESSION_SECRET คุณต้องใช้สตริงแบบสุ่มที่ไม่ทำให้ไฟล์กำหนดค่าเสียหาย

⚠️ สำคัญ: หลีกเลี่ยงการใช้ตัวอักษรพิเศษ เช่น @, #, $, %, /, ? ในรหัสผ่าน เนื่องจากอาจทำให้สตริงการเชื่อมต่อและไฟล์ JSON เสียหายได้

ตัวเลือก A: ตัวสร้างออนไลน์แบบง่าย (แนะนำ)

ไปที่: JWTSECRETS
การตั้งค่า:
- จำนวนรหัสผ่าน: 1
- ความยาวของรหัสผ่าน: 32
- ✅ เลือก "ตัวอักษรพิมพ์ใหญ่ (A-Z)"
- ✅ กาเครื่องหมาย "ตัวพิมพ์เล็ก (a-z)"
- ✅ กาเครื่องหมาย "ตัวเลข (0-9)"
- ❌ ยกเลิกการกาเครื่องหมาย "เครื่องหมายวรรคตอน"
คลิก "รับรหัสผ่าน"

ตัวเลือก B: ใช้คอนโซลเบราว์เซอร์ของคุณ (ง่ายสุดๆ!)

เปิดเว็บไซต์ใดก็ได้ (เช่น google.com)
กด F12 (หรือคลิกขวา → ตรวจสอบ)
คลิกแท็บ "คอนโซล"

วางโค้ดนี้ แล้วกด Enter:

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

คัดลอกผลลัพธ์ - ผลลัพธ์จะเป็นประมาณนี้: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

ตัวเลือก C: วิธีการด้วยตนเอง (หากวิธีอื่นๆ ล้มเหลว)

เพียงพิมพ์สตริงสุ่มยาวๆ โดยใช้:

ตัวอักษร: A-Z, a-z
ตัวเลข: 0-9
ตัวอย่าง: MyApp2024SecretKey789RandomString456Auth

ตัวอย่าง .env ขั้นสุดท้าย

SPOTIFY_CLIENT_ID=your_spotify_client_id_here SPOTIFY_CLIENT_SECRET=ความลับของลูกค้า_Spotify_ของคุณที่นี่ MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=ส่วนใหญ่ JWT_SECRET=A8f2K9mP3qR7sT1vW5yX8bC4eN6jL2oU9iH7gF3dS6aZ1mQ4wE8rT5yU2pI9oL SESSION_SECRET=B7gT3mK9pL2sF6vW1yX4eR8aC5qN9jM7oU3iH6dG2fS8aZ4mQ1wE5rT7yU9pI3oL PORT=3000

ประเด็นสำคัญ:

✅ ไม่มีอักขระพิเศษใน JWT_SECRET และ SESSION_SECRET
✅ รหัสผ่าน MongoDB หลีกเลี่ยงอักขระที่ทำลาย URL
✅ ความลับทั้งหมดยาวและสุ่ม
✅ ปลอดภัยสำหรับการใช้งานในไฟล์ JSON และสตริงการเชื่อมต่อ

ขั้นตอนที่ 2: โมเดลผู้ใช้พร้อม Mood การติดตาม

สร้างโฟลเดอร์ชื่อ models และเพิ่มไฟล์ชื่อ User.js ไว้ในโฟลเดอร์ จากนั้นเพิ่มและบันทึกโค้ดต่อไปนี้ลงในไฟล์:

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: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMusicMapping: { happy: [String], sad: [String], energetic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); const userSchema = new mongoose.Schema({ ชื่อผู้ใช้: { ชนิด: String, จำเป็น: true, ไม่ซ้ำกัน: true, ตัด: true, ความยาวขั้นต่ำ: 3 }, อีเมล: { ชนิด: String, จำเป็น: true, ไม่ซ้ำกัน: true, ตัวพิมพ์เล็ก: true }, รหัสผ่าน: { ชนิด: String, จำเป็น: true, ความยาวขั้นต่ำ: 6 }, moodHistory: [moodEntrySchema], การกำหนดค่า: { ชนิด: userPreferencesSchema, ค่าเริ่มต้น: () => ({}) }, สถิติ: { totalPlaylists: { ชนิด: ตัวเลข, ค่าเริ่มต้น: 0 }, favoriteTime: สตริง, mostCommonMood: สตริง, วันที่เข้าร่วม: { ชนิด: วันที่, ค่าเริ่มต้น: Date.now } } }, { ประทับเวลา: true }); // แฮชรหัสผ่านก่อนบันทึก userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // เปรียบเทียบรหัสผ่าน userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // คำนวณสถิติผู้ใช้ userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // ค้นหาอารมณ์ที่พบบ่อยที่สุด 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' ); // กำหนดเวลาที่ชื่นชอบของวัน 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);

ขั้นตอนที่ 3: มิดเดิลแวร์การตรวจสอบสิทธิ์

สร้างโฟลเดอร์ชื่อ middleware และเพิ่มไฟล์ชื่อ auth.js เข้าไปข้างใน จากนั้นเพิ่มโค้ดต่อไปนี้ลงในไฟล์และบันทึก:

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { ลอง { const token = req.header('Authorization')?.replace('Bearer ', '') || req.session.token; หาก!โทเค็น { กลับ res.status(401).json({ ข้อผิดพลาด: 'ไม่ได้ให้โทเค็น' }); } const decoded = jwt.verify(โทเค็น, process.env.JWT_SECRET); const user = รอ User.findById(decoded.userId); หาก!ผู้ใช้ { กลับ res.status(401).json({ ข้อผิดพลาด: 'ไม่พบผู้ใช้' }); } req.user = ผู้ใช้; ถัดไป(); } จับ (ข้อผิดพลาด) { res.status(401).json({ ข้อผิดพลาด: 'โทเค็นไม่ถูกต้อง' }); } }; module.exports = auth;

แดชบอร์ดผู้ใช้พร้อมข้อมูลวิเคราะห์ที่สวยงาม

สร้างโฟลเดอร์ใหม่ในโปรเจกต์ของคุณและตั้งชื่อว่า public จากนั้นเพิ่มไฟล์ภายในโฟลเดอร์นี้และตั้งชื่อว่า index.html:

<!DOCTYPE html> <html> <head> <title>Mind-Reading Music API - แดชบอร์ดส่วนตัว</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; สี: #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 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: rgba(255,255,255,0.9); border-radius: 15px; padding: 25px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .mood-input-section { พื้นหลัง: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; margin-bottom: 30px; } .mood-history { พื้นหลัง: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; } .history-item { พื้นหลัง: #f8f9fa; border-radius: 10px; padding: 15px; margin-bottom: 15px; border-left: 4px solid #667eea; } .login-section, .register-section { พื้นหลัง: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; ความกว้างสูงสุด: 400px; ระยะขอบ: 50px อัตโนมัติ; } อินพุต, textarea, ปุ่ม { ความกว้าง: 100%; padding: 12px; ระยะขอบ: 10px 0; ขอบ: 2px solid #e1e5e9; border-radius: 8px; ขนาดตัวอักษร: 16px; } ปุ่ม { พื้นหลัง: linear-gradient(135deg, #667eea, #764ba2); สี: ขาว; ขอบ: ไม่มี; เคอร์เซอร์: ตัวชี้; น้ำหนักตัวอักษร: 600; } ปุ่ม: โฮเวอร์ { transform: translateY(-2px); } </style> </head> <body> <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 ยินดีต้อนรับกลับ!</h2> <input type="text" id="loginUsername" placeholder="Username"> <input type="password" id="loginPassword" placeholder="Password"> <button onclick="login()">เข้าสู่ระบบ</button> <p><a href="#" onclick="showRegister()">ยังไม่มีบัญชีใช่ไหม สมัครสมาชิก</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵 สร้างโปรไฟล์เพลงของคุณ</h2> <input type="text" id="regUsername" placeholder="ชื่อผู้ใช้"> <input type="email" id="regEmail" placeholder="อีเมล"> <input type="password" id="regPassword" placeholder="รหัสผ่าน"> <button onclick="register()">สร้างบัญชี</button> <p><a href="#" onclick="showLogin()">มีบัญชีอยู่แล้วใช่ไหม เข้าสู่ระบบ</a></p> </div> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 นักอ่านใจทางดนตรีส่วนตัวของคุณ</h1> <p>ยินดีต้อนรับกลับ <span id="username"></span>! พร้อมที่จะค้นพบเพลงประกอบภาพยนตร์ที่สมบูรณ์แบบของคุณหรือยัง?</p> <button onclick="logout()" style="width:auto; margin-top:10px;">ออกจากระบบ</button> </div> <div class="stats-grid"> <div class="stat-card"> <h3>📊 เพลย์ลิสต์ทั้งหมด</h3> <div id="totalPlaylists" class="stat-number">0</div</div> <div class="stat-card"> <h3>😊 อารมณ์โปรด</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐 เวลาที่ดีที่สุด</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 ประเภทยอดนิยม</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 ตอนนี้คุณรู้สึกอย่างไรบ้าง?</h2> <textarea id="moodText" placeholder="อธิบายอารมณ์ปัจจุบันของคุณ สิ่งที่กำลังเกิดขึ้น หรือสิ่งที่คุณต้องการจะรู้สึก..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 สร้างเพลย์ลิสต์ที่สมบูรณ์แบบของฉัน</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 การเดินทางสู่อารมณ์ของคุณ</h2> <div id="historyContainer"></div> </div> </div> </div> <script src="/js/app.js"></script> </body> </html>

ตอนนี้ภายในโฟลเดอร์ public ของคุณ ให้สร้างโฟลเดอร์และตั้งชื่อว่า js และสร้างไฟล์ app.js ภายในโฟลเดอร์ js โดยใช้โค้ดต่อไปนี้:

let authToken = localStorage.getItem('authToken'); let currentUser = null; หาก (authToken) { loadDashboard(); } ฟังก์ชัน showLogin() { document.querySelector('.login-section').style.display = 'block'; document.getElementById('registerSection').style.display = 'none'; } ฟังก์ชัน showRegister() { document.querySelector('.login-section').style.display = 'none'; document.getElementById('registerSection').style.display = 'block'; } ฟังก์ชัน async login() { const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; ถ้า (!username || !password) { alert('กรุณากรอกข้อมูลทุกช่อง'); return; } ลอง { 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 || 'การเข้าสู่ระบบล้มเหลว'); } } catch (error) { console.error('ข้อผิดพลาดในการเข้าสู่ระบบ:', error); alert('การเข้าสู่ระบบล้มเหลว โปรดลองอีกครั้ง'); } } ฟังก์ชัน async register() { const username = document.getElementById('regUsername').value; const email = document.getElementById('regEmail').value; const password = document.getElementById('regPassword').value; if (!username || !email || !password) { alert('กรุณากรอกข้อมูลให้ครบถ้วน'); 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) { alert('สร้างบัญชีสำเร็จ! กรุณาเข้าสู่ระบบ'); showLogin(); } else { alert(data.error || 'การลงทะเบียนล้มเหลว'); } } catch (error) { console.error('ข้อผิดพลาดในการลงทะเบียน:', error); alert('การลงทะเบียนล้มเหลว กรุณาลองอีกครั้ง'); } } ฟังก์ชัน async loadDashboard() { ลอง { const response = await fetch('/api/profile', { ส่วนหัว: { 'Authorization': 'Bearer ' + authToken } }); หาก response.ok { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } มิฉะนั้น { ออกจากระบบ(); } } จับข้อผิดพลาด { console.error('ข้อผิดพลาดในการโหลดแดชบอร์ด:', ข้อผิดพลาด); ออกจากระบบ(); } } ฟังก์ชัน showDashboard() { document.getElementById('authSection').style.display = 'none'; document.getElementById('dashboardSection').style.display = 'block'; document.getElementById('username').textContent = currentUser.username; } ฟังก์ชัน 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]) || '-'; } ฟังก์ชัน loadMoodHistory() { const historyContainer = document.getElementById('historyContainer'); ถ้า (!currentUser.moodHistory || currentUser.moodHistory.length === 0) { historyContainer.innerHTML = '<p>ยังไม่มีประวัติอารมณ์ สร้างเพลย์ลิสต์แรกของคุณ!</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} แทร็กที่สร้างขึ้น</small> </div>` ).join(''); } ฟังก์ชัน async generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('กรุณาอธิบายความรู้สึกของคุณ!'); return; } ลอง { const response = await fetch('/api/personalized-playlist', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ text: moodText }) }); const data = await response.json(); if (response.ok) { displayPersonalizedResults(data); loadDashboard(); } else { alert(data.error || 'ไม่สามารถสร้างเพลย์ลิสต์ได้'); } } catch (error) { console.error('ข้อผิดพลาดในการสร้างเพลย์ลิสต์:', error); alert('ไม่สามารถสร้างเพลย์ลิสต์ได้ โปรดลองอีกครั้ง'); } } ฟังก์ชัน displayPersonalizedResults(data) { const resultDiv = document.getElementById('ผลลัพธ์'); resultDiv.style.display = 'block'; const html = ` <h3>ตรวจพบอารมณ์: ${data.moodAnalysis.mood} (ความเชื่อมั่น: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || 'นี่คือเพลย์ลิสต์ของคุณ!'}</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="อัลบั้ม" 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; } ฟังก์ชัน async likeTrack(trackId, liked) { ลอง { รอการดึงข้อมูล('/api/track-feedback', { วิธีการ: 'POST', ส่วนหัว: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, เนื้อหา: JSON.stringify({ trackId: trackId, liked: liked }) }); การแจ้งเตือน(liked ? 'ขอบคุณ! เราจะแนะนำเพิ่มเติมเช่นนี้' : 'เข้าใจแล้ว! เราจะหลีกเลี่ยงแทร็กที่คล้ายกัน'); } catch (error) { console.error('ข้อผิดพลาดในการตอบรับ:', error); } } ฟังก์ชัน logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin(); }

แทนที่ไฟล์ server.js ของคุณ

แทนที่โค้ดไฟล์ server.js ของคุณด้วยสิ่งต่อไปนี้:

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'); // เชื่อมต่อกับ MongoDB const connectDB = async () => { ลอง { console.log('🔗 กำลังเชื่อมต่อกับ MongoDB...'); รอ mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ เชื่อมต่อ MongoDB สำเร็จแล้ว!'); } catch (error) { console.error('❌ การเชื่อมต่อ MongoDB ล้มเหลว:', 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')); // ให้บริการหน้าหลัก app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // ลงทะเบียนผู้ใช้ app.post('/api/register', async (req, res) => { ลอง { const { ชื่อผู้ใช้, อีเมล, รหัสผ่าน } = req.body; ถ้า!ชื่อผู้ใช้ || !อีเมล || !รหัสผ่าน) { กลับ res.status(400).json({ ข้อผิดพลาด: 'ต้องกรอกข้อมูลทุกช่อง' }); } ถ้า (password.length < 6) { กลับ res.status(400).json({ ข้อผิดพลาด: 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร' }); } const existingUser = await User.findOne({ $or: {[ อีเมล }, { ชื่อผู้ใช้ }] }); ถ้า (ผู้ใช้ที่มีอยู่) { กลับ res.status(400).json({ ข้อผิดพลาด: 'ชื่อผู้ใช้หรืออีเมลมีอยู่แล้ว' }); } const ผู้ใช้ = ผู้ใช้ใหม่({ ชื่อผู้ใช้, อีเมล, รหัสผ่าน }); รอ user.save(); res.status(201).json({ message: 'ผู้ใช้สร้างสำเร็จ' }); } catch (error) { console.error('ข้อผิดพลาดในการลงทะเบียน:', error); res.status(500).json({ error: 'การลงทะเบียนล้มเหลว' }); } }); // ผู้ใช้เข้าสู่ระบบ app.post('/api/login', async (req, res) => { ลอง { const { username, password } = req.body; const user = await User.findOne({ $or: {[ username }, { email: username }] }); if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } const token = jwt.sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ token, user: { username: user.username, email: user.email } }); } catch (error) { console.error('ข้อผิดพลาดในการเข้าสู่ระบบ:', ข้อผิดพลาด); res.status(500).json({ ข้อผิดพลาด: 'การเข้าสู่ระบบล้มเหลว' }); } });// รับโปรไฟล์ผู้ใช้ app.get('/api/profile', auth, async (req, res) => { ลอง { req.user.updateStats(); รอ req.user.save(); res.json(req.user); } จับ (ข้อผิดพลาด) { res.status(500).json({ ข้อผิดพลาด: 'ไม่สามารถโหลดโปรไฟล์ได้' }); } }); // สร้างเพลย์ลิสต์ส่วนตัว app.post('/api/personalized-playlist', auth, async (req, res) => { ลอง { const { text, playlistSize = 15 } = req.body; ถ้า!text { กลับ res.status(400).json({ ข้อผิดพลาด: 'กรุณาบอกฉันว่าคุณรู้สึกอย่างไร!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // บันทึกลงในประวัติของผู้ใช้ 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: `จากประวัติของคุณ ฉันได้ปรับแต่งเพลย์ลิสต์นี้โดยเฉพาะสำหรับอารมณ์ ${moodAnalysis.mood} ของคุณ!` }); } catch (error) { console.error('ข้อผิดพลาดเพลย์ลิสต์ส่วนบุคคล:', error); res.status(500).json({ error: 'ไม่สามารถสร้างเพลย์ลิสต์ส่วนบุคคลได้ โปรดลองอีกครั้ง' }); } }); // ติดตามข้อเสนอแนะ app.post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, liked } = req.body; res.json({ message: 'ได้รับข้อเสนอแนะแล้ว! เราจะปรับปรุงคำแนะนำในอนาคต' }); } catch (error) { console.error('ข้อผิดพลาดเกี่ยวกับข้อเสนอแนะ:', error); res.status(500).json({ error: 'ไม่สามารถประมวลผลข้อเสนอแนะได้' }); } }); app.listen(PORT, () => { console.log(`🚀 Mind-Reading Music API ทำงานบน http://localhost:${PORT}`); console.log('🧠 พร้อมที่จะวิเคราะห์อารมณ์และสร้างเพลย์ลิสต์!'); });

สิ่งที่คุณควรจะทำได้ตอนนี้

1. ผู้ใช้ที่ไม่ระบุชื่อ (ฟังก์ชันดั้งเดิม)

เยี่ยมชมเว็บไซต์ของคุณโดยไม่ต้องเข้าสู่ระบบ
สร้างเพลย์ลิสต์โดยใช้การวิเคราะห์อารมณ์ที่มีอยู่
รับคำแนะนำเพลงตามอารมณ์

2. ผู้ใช้ที่ลงทะเบียน (ฟีเจอร์ใหม่)

สร้างบัญชีและเข้าสู่ระบบ
สร้างเพลย์ลิสต์ส่วนตัวที่ปรับปรุงขึ้นตามกาลเวลา
ดูประวัติอารมณ์และการวิเคราะห์ส่วนบุคคล
ชอบ/ไม่ชอบเพลงเพื่อฝึก AI
ดูสถิติ เช่น อารมณ์โปรด เพลย์ลิสต์ทั้งหมด ฯลฯ

คู่มือการทดสอบทีละขั้นตอน

การทดสอบที่ 1: ตรวจสอบการเริ่มเซิร์ฟเวอร์ของคุณ

node server.js

คุณจะเห็น:

🔑 กำลังพยายามตรวจสอบสิทธิ์ Spotify... 🎵 Spotify เชื่อมต่อสำเร็จแล้ว! 🔗 MongoDB เชื่อมต่อแล้ว... ✅ MongoDB เชื่อมต่อสำเร็จ! 🚀 Mind-Reading Music API ทำงานบน http://localhost:3000 🧠 พร้อมวิเคราะห์อารมณ์และสร้างเพลย์ลิสต์แล้ว!

แบบทดสอบที่ 2: เยี่ยมชมเว็บไซต์ของคุณ

ไปที่: http://localhost:3000

สิ่งที่คุณควรเห็น:

แบบฟอร์มเข้าสู่ระบบที่ขอชื่อผู้ใช้/รหัสผ่าน
ลิงก์ "ยังไม่มีบัญชีใช่ไหม สมัครเลย"

แบบทดสอบที่ 3: สร้างบัญชีแรกของคุณ

คลิก: "ยังไม่มีบัญชีใช่ไหม สมัครเลย"
กรอก:
- ชื่อผู้ใช้: testuser
- อีเมล: test@example.com
- รหัสผ่าน: password123
คลิก: "สร้างบัญชี"
ผลลัพธ์ที่คาดหวัง: "สร้างบัญชีเรียบร้อยแล้ว! กรุณาเข้าสู่ระบบ"

แบบทดสอบที่ 4: เข้าสู่ระบบแดชบอร์ดของคุณ

ใช้ข้อมูลประจำตัวที่คุณเพิ่งสร้าง
คลิก: "เข้าสู่ระบบ"
คุณจะเห็น:
- ข้อความต้อนรับพร้อมชื่อผู้ใช้ของคุณ
- การ์ดสถิติแสดง 0 เพลย์ลิสต์ ยังไม่มีอารมณ์โปรด
- พื้นที่ข้อความถามว่า "ตอนนี้คุณรู้สึกอย่างไร"

แบบทดสอบที่ 5: สร้างเพลย์ลิสต์ส่วนตัวแรกของคุณ

พิมพ์ประมาณนี้: "ฉันรู้สึกตื่นเต้นมากกับโปรเจกต์ใหม่ของฉัน!"
คลิก: "สร้างเพลย์ลิสต์ที่สมบูรณ์แบบของฉัน"
คุณจะเห็น:
- อารมณ์ที่ตรวจพบ (อาจเป็น "กระตือรือร้น" หรือ "มีความสุข")
- รายชื่อเพลงพร้อมภาพปกอัลบั้ม
- ดูตัวอย่างเครื่องเล่นเสียง (ถ้ามี)
- ปุ่มยกนิ้วโป้ง/ยกนิ้วโป้งสำหรับแต่ละเพลง

แบบทดสอบที่ 6: ทดสอบระบบการเรียนรู้

คลิกชอบ 👍 สำหรับเพลงที่คุณชอบ
คลิกไม่ชอบ 👎 สำหรับเพลงที่คุณไม่ชอบ
สิ่งที่คาดหวัง: ข้อความแจ้งเตือนว่า "ขอบคุณ! เราจะแนะนำเพลงที่คล้ายกันเพิ่มเติม"

แบบทดสอบที่ 7: ตรวจสอบการอัปเดตสถิติของคุณ

รีเฟรช หน้า หรือสร้างเพลย์ลิสต์อื่น
สถิติของคุณควรจะแสดง:
- เพลย์ลิสต์ทั้งหมด: 1 (หรือมากกว่า)
- อารมณ์โปรด: อารมณ์ใดๆ ที่ตรวจพบ
- สถิติอื่นๆ ควรเริ่มแสดงข้อมูล

การทดสอบสถานการณ์ต่างๆ

ลองอารมณ์ที่แตกต่างกัน:

"ฉันเพิ่งเลิกกับแฟนและฝนกำลังตก" (ควรตรวจจับ: เศร้า)
"ฉันตื่นเต้นมากสำหรับการออกกำลังกาย!" (ควรตรวจจับ: กระตือรือร้น)
"แค่อยากพักผ่อนและเรียนหนังสือเงียบๆ" (ควรตรวจจับ: ผ่อนคลาย)
"รู้สึกโรแมนติกในคืนเดทนี้" (ควรตรวจจับ: โรแมนติก)

กรณีขอบการทดสอบ:

"" (ว่างเปล่า - ควรแสดงข้อผิดพลาด)
"ข้อความสุ่ม asdf" (ควรตั้งค่าเริ่มต้นเป็นกลาง/ผ่อนคลาย)
"ฉันตื่นเต้นสุดๆ!!!" (ควรตรวจจับความมั่นใจที่สูงขึ้น)

ปัญหาทั่วไปและการแก้ไขด่วน

❌ "การเชื่อมต่อ MongoDB ล้มเหลว"

ตรวจสอบ: ไฟล์ .env ของคุณตั้งค่าด้วยสตริงการเชื่อมต่อ MongoDB อย่างถูกต้องหรือไม่

# เรียกใช้สิ่งนี้เพื่อทดสอบการเชื่อมต่อฐานข้อมูลของคุณ node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Set ✅' : 'Missing ❌');"

❌ "การเชื่อมต่อ Spotify ล้มเหลว"

ตรวจสอบ: คีย์ API ของ Spotify อยู่ในไฟล์ .env หรือไม่

# เรียกใช้คำสั่งนี้เพื่อตรวจสอบข้อมูลประจำตัวของ Spotify node -e "require('dotenv').config(); console.log('Spotify Client ID:', process.env.SPOTIFY_CLIENT_ID ? 'Set ✅' : 'Missing ❌');"

❌ การเข้าสู่ระบบ/ลงทะเบียนไม่ทำงาน

ตรวจสอบ: คุณเห็นข้อความแสดงข้อผิดพลาดใดๆ ในคอนโซลเบราว์เซอร์หรือไม่

กด F12 → แท็บคอนโซล
มองหาข้อความแสดงข้อผิดพลาดสีแดง

❌ หน้าเว็บแสดงอินเทอร์เฟซแบบเก่า

วิธีแก้ไข: รีเฟรชหน้าเว็บแบบฮาร์ด

กด Ctrl+Shift+R (Windows/Linux)
กด Cmd+Shift+R (Mac)

สิ่งที่ควรใช้งานได้กับสิ่งที่ยังพื้นฐานอยู่

✅ สิ่งที่ควรใช้งานได้ในตอนนี้:

การลงทะเบียนและเข้าสู่ระบบผู้ใช้
การตรวจจับอารมณ์พื้นฐานและการสร้างเพลย์ลิสต์
การบันทึกประวัติอารมณ์ลงในฐานข้อมูล
การตอบกลับแบบชอบ/ไม่ชอบอย่างง่าย
การติดตามสถิติ (เพลย์ลิสต์ทั้งหมด อารมณ์โปรด)

🚧 ยังพื้นฐาน (ฟีเจอร์ขั้นสูงสำหรับภายหลัง):

การเรียนรู้ของเครื่องที่ซับซ้อนจากความคิดเห็นของผู้ใช้
ฟีเจอร์โซเชียลและการแชร์เพลย์ลิสต์
การวิเคราะห์ขั้นสูงและรูปแบบอารมณ์
อินเทอร์เฟซแอปมือถือ

ขั้นตอนถัดไปหลังจากการทดสอบ

เมื่อทุกอย่างทำงานได้:

ลองใช้กับผู้ใช้คนอื่นๆ - สร้างบัญชีหลายบัญชีเพื่อดูว่าการปรับแต่งส่วนบุคคลแตกต่างกันอย่างไร
สร้างเพลย์ลิสต์หลายรายการ - ดูว่าสถิติและการตั้งค่าของคุณพัฒนาไปอย่างไร
ให้คำติชมเกี่ยวกับเพลง - ดูว่าระบบเรียนรู้รสนิยมของคุณได้อย่างไร
ตรวจสอบแดชบอร์ด MongoDB Atlas ของคุณ - คุณควรเห็นข้อมูลที่กำลังจัดเก็บอยู่

บทสรุป

คุณเพิ่งสร้างสิ่งที่น่าทึ่ง นั่นคือ AI ที่ไม่เพียงแต่เข้าใจอารมณ์ของมนุษย์ แต่ยังเรียนรู้และปรับตัวตามความชอบส่วนบุคคลเมื่อเวลาผ่านไป ตอนนี้ Mind-Reading Music API ของคุณมีหน่วยความจำ บุคลิกภาพ และความสามารถในการเติบโตไปพร้อมกับผู้ใช้

การผสมผสานระหว่างการตรวจจับอารมณ์ การเรียนรู้ของผู้ใช้ และคำแนะนำส่วนบุคคล ก่อให้เกิดประสบการณ์ที่มหัศจรรย์ยิ่งขึ้นในทุกการโต้ตอบ การเดินทางของผู้ใช้แต่ละคนจะมีเอกลักษณ์เฉพาะตัว สร้างเพลงประกอบชีวิตทางอารมณ์ส่วนตัว

ตอนนี้ API ของคุณจดจำทุกอารมณ์ เรียนรู้จากทุกการโต้ตอบ และสร้างความเข้าใจอย่างครอบคลุมเกี่ยวกับความชอบทางดนตรีของผู้ใช้แต่ละคน นี่คือรากฐานสำหรับประสบการณ์ AI ที่ปรับแต่งได้อย่างแท้จริง

ต่อไปคืออะไร?

พร้อมที่จะพัฒนาไปอีกขั้นแล้วหรือยัง? นี่คือทิศทางที่น่าสนใจ:

การวิเคราะห์ขั้นสูง: เพิ่มการจดจำรูปแบบอารมณ์และคำแนะนำเชิงคาดการณ์
ฟีเจอร์โซเชียล: ให้ผู้ใช้แชร์เพลย์ลิสต์และค้นพบรสนิยมทางดนตรีของเพื่อน
แอปมือถือ: สร้างแอป React Native หรือ Flutter สำหรับ iOS/Android
การผสานรวมเสียง: เพิ่มการแปลงคำพูดเป็นข้อความสำหรับการป้อนอารมณ์แบบแฮนด์ฟรี
การเรียนรู้ของเครื่อง: นำการกรองแบบร่วมมือมาใช้เพื่อการแนะนำที่ดียิ่งขึ้น
การปรับใช้: ปรับใช้กับ AWS/Vercel ด้วยตัวแปรสภาพแวดล้อมที่เหมาะสม

ทดลองและสร้างต่อไป - อนาคตของประสบการณ์ AI ส่วนบุคคลอยู่ในมือคุณแล้ว!

พร้อมสำหรับความท้าทายครั้งต่อไปแล้วหรือยัง? ติดตามบทช่วยสอนที่จะมาถึงของเราเกี่ยวกับการเพิ่มฟีเจอร์โซเชียลและการกรองแบบร่วมมือเพื่อสร้างเครือข่ายการค้นพบเพลงที่เชื่อมต่อผู้คนผ่านอารมณ์ที่แบ่งปัน ประสบการณ์