Αναβαθμίστε το API μουσικής ανάγνωσης μυαλού: Προσθήκη λογαριασμών χρηστών με ιστορικό διάθεσης και έξυπνες προτιμήσεις

Μετατρέψτε τη γεννήτρια λιστών αναπαραγωγής ανίχνευσης συναισθημάτων σε έναν εξατομικευμένο μουσικό σύντροφο που μαθαίνει από κάθε αλληλεπίδραση. Αυτό το επακόλουθο σεμινάριο προσθέτει έλεγχο ταυτότητας χρήστη, αναλυτικά στοιχεία παρακολούθησης διάθεσης και έξυπνη εκμάθηση προτιμήσεων για να δημιουργήσει πραγματικά εξατομικευμένες μουσικές εμπειρίες.

Τι χτίζουμε σήμερα

Θυμάστε το API μουσικής ανάγνωσης μυαλού που μπορούσε να ανιχνεύσει συναισθήματα και να δημιουργήσει λίστες αναπαραγωγής; Σήμερα το κάνουμε προσωπικό. Προσθέτουμε:

Έλεγχος ταυτότητας χρήστη που λειτουργεί πραγματικά (χωρίς περίπλοκους πονοκεφάλους OAuth)
Πίνακας ελέγχου ιστορικού διάθεσης με όμορφα αναλυτικά στοιχεία
Έξυπνες προτιμήσεις λίστας αναπαραγωγής που μαθαίνουν από τη συμπεριφορά των χρηστών
Εξατομικευμένες προτάσεις που βελτιώνονται με την πάροδο του χρόνου
Διατήρηση δεδομένων ώστε οι χρήστες να μην χάνουν ποτέ το μουσικό τους ταξίδι

Μέχρι το τέλος αυτού του σεμιναρίου, το API σας θα θυμάται ότι η Σάρα λατρεύει την indie rock όταν είναι λυπημένη, ενώ ο Μάικ προτιμά την κλασική μουσική για συνεδρίες εστίασης.

Τι θα χρειαστείτε

Το ολοκληρωμένο 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...'); await 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 ή αρχείο και μετά αποθηκεύστε.

Δημιουργήστε τον λογαριασμό σας MongoDB Atlas

Επισκεφθείτε: mongodb.com/cloud/atlas
Κάντε κλικ: στο κουμπί "Ξεκινήστε" (συνήθως στην επάνω δεξιά γωνία)

Επιλογές Εγγραφής

Έχετε τρεις τρόπους για να δημιουργήσετε έναν λογαριασμό:

Επιλογή Α: Εγγραφή μέσω email

Κάντε κλικ στην επιλογή "Εγγραφή με email"
Εισαγάγετε τη διεύθυνση email σας
Δημιουργήστε έναν ισχυρό κωδικό πρόσβασης
Κάντε κλικ στην επιλογή "Δημιουργία λογαριασμού Atlas"

Επιλογή Β: Εγγραφή Google

Κάντε κλικ στην επιλογή "Εγγραφή με Google"
Επιλέξτε τον λογαριασμό σας Google
Παρέχετε τα απαραίτητα δικαιώματα

Επιλογή Γ: Εγγραφή GitHub

Κάντε κλικ στην επιλογή "Εγγραφή με GitHub"
Εξουσιοδοτήστε το MongoDB Atlas να έχει πρόσβαση στον λογαριασμό σας GitHub

Επαλήθευση email

Ελέγξτε τα εισερχόμενα email σας
Κάντε κλικ στον σύνδεσμο επαλήθευσης από το MongoDB
Αυτό επιβεβαιώνει ότι ο λογαριασμός σας είναι πραγματικός

Δημιουργήστε το πρώτο σας σύμπλεγμα βάσης δεδομένων

Εάν δεν βλέπετε τον πίνακα ελέγχου σας μετά τη σύνδεση, ίσως χρειαστεί να κάνετε κλικ στο όνομά σας στην επάνω δεξιά γωνία για να ανοίξετε το ακόλουθο αναπτυσσόμενο μενού και να κάνετε κλικ στο Atlas:

Στη συνέχεια, θα δείτε τον πίνακα ελέγχου του Atlas. Ώρα να δημιουργήσετε τη βάση δεδομένων σας!

Επιλέξτε τον τύπο ανάπτυξης

Κάντε κλικ στο "Συστήματα" στην ενότητα "Βάση δεδομένων" από την αριστερή πλαϊνή μπάρα

Συστήματα Atlas MongoDB στην πλαϊνή μπάρα

Κάντε κλικ στο "Δημιουργία συμπλέγματος"

Επιλέξτε "Δωρεάν"

Θα μεταφερθείτε σε μια σελίδα ανάπτυξης του συμπλέγματός σας και θέλετε να επιλέξετε το δωρεάν πρόγραμμα.

Επιλογή Παρόχου Cloud: Θα δείτε τρεις επιλογές παρόχου:

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

Σημείωση:

<username> → mood-music-user
<password> → 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.

Επιλογή Α: Απλή διαδικτυακή γεννήτρια (Συνιστάται)

Επισκεφθείτε: JWTSECRETS
Ρυθμίσεις:
- Αριθμός κωδικών πρόσβασης: 1
- Μήκος κωδικού πρόσβασης: 32
- ✅ Επιλέξτε "κεφαλαία γράμματα" (A-Z)"
- ✅ Επιλέξτε "πεζά γράμματα (a-z)"
- ✅ Επιλέξτε "ψηφία (0-9)"
- ❌ Καταργήστε την επιλογή "στίξη"
Κάντε κλικ στην επιλογή "Λήψη κωδικών πρόσβασης"

Επιλογή Β: Χρησιμοποιήστε την Κονσόλα του Προγράμματος Περιήγησής σας (Πολύ εύκολη!)

Ανοίξτε οποιονδήποτε ιστότοπο (όπως το google.com)
Πατήστε F12 (ή κάντε δεξί κλικ → Επιθεώρηση)
Κάντε κλικ στην καρτέλα "Κονσόλα"

Επικολλήστε αυτόν τον κώδικα και πατήστε Enter:

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

Αντιγράψτε το αποτέλεσμα - θα είναι κάτι σαν: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

Επιλογή Γ: Χειροκίνητη μέθοδος (Εάν όλα τα άλλα αποτύχουν)

Απλώς πληκτρολογήστε μια μεγάλη τυχαία συμβολοσειρά χρησιμοποιώντας:

Γράμματα: A-Z, a-z
Αριθμοί: 0-9
Παράδειγμα: MyApp2024SecretKey789RandomString456Auth

Τελικό παράδειγμα .env

SPOTIFY_CLIENT_ID=το_spotify_client_id_σας_εδώ SPOTIFY_CLIENT_SECRET=το_spotify_client_secret_σας_εδώ 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

Βασικά σημεία:

✅ Δεν υπάρχουν ειδικοί χαρακτήρες στα JWT_SECRET και SESSION_SECRET
✅ Ο κωδικός πρόσβασης MongoDB αποφεύγει τους χαρακτήρες που παραβιάζουν τις διευθύνσεις URL
✅ Όλα τα μυστικά είναι μεγάλα και τυχαία
✅ Ασφαλές για χρήση σε αρχεία JSON και συμβολοσειρές σύνδεσης

Βήμα 2: Μοντέλο χρήστη με παρακολούθηση διάθεσης

Δημιουργήστε έναν φάκελο με το όνομα models και προσθέστε ένα αρχείο με το όνομα User.js μέσα στον φάκελο. Στη συνέχεια, προσθέστε και αποθηκεύστε τον ακόλουθο κώδικα στο αρχείο:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ κείμενο: Σειρά χαρακτήρων, detectedMood: Σειρά χαρακτήρων, confidence: Αριθμός, playlistGenerated: [{ trackName: Σειρά χαρακτήρων, καλλιτέχνης: Σειρά χαρακτήρων, spotifyId: Σειρά χαρακτήρων, άρεσε: { τύπος: Λογική τιμή, προεπιλογή: null } }], χρονική σήμανση: { τύπος: Ημερομηνία, προεπιλογή: Date.now } });const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMusicMapping: { χαρούμενος: [String], λυπημένος: [String], ενεργητικός: [String], chill: [String], θυμωμένος: [String], ρομαντικός: [String], νοσταλγικός: [String] } }); const userSchema = new mongoose.Schema({ όνομα χρήστη: { τύπος: Σειρά χαρακτήρων, απαιτούμενο: true, μοναδικό: true, trim: true, ελάχιστο μήκος: 3 }, email: { τύπος: Σειρά χαρακτήρων, απαιτούμενο: true, μοναδικό: true, πεζά: true }, κωδικός πρόσβασης: { τύπος: Σειρά χαρακτήρων, απαιτούμενο: true, ελάχιστο μήκος: 6 }, moodHistory: [moodEntrySchema], προτιμήσεις: { τύπος: userPreferencesSchema, προεπιλογή: () => ({}) }, στατιστικά: { totalPlaylists: { τύπος: Αριθμός, προεπιλογή: 0 }, favoriteTime: Σειρά χαρακτήρων, mostCommonMood: Σειρά χαρακτήρων, joinDate: { τύπος: Ημερομηνία, προεπιλογή: 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, 'ουδέτερο' ); // Προσδιορισμός της αγαπημένης ώρας της ημέρας 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 = 'νύχτα'; else if (avgHour < 12) this.stats.favoriteTime = 'πρωί'; else if (avgHour < 18) this.stats.favoriteTime = 'απόγευμα'; else this.stats.favoriteTime = 'βράδυ'; }; module.exports = mongoose.model('User', userSchema);

Βήμα 3: Έλεγχος ταυτότητας Middleware

Δημιουργήστε έναν φάκελο με το όνομα middleware και προσθέστε ένα αρχείο με το όνομα auth.js μέσα σε αυτόν. Στη συνέχεια, προσθέστε τον ακόλουθο κώδικα στο αρχείο και αποθηκεύστε το:

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: 'Δεν παρέχεται token' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (!user) { return res.status(401).json({ error: 'Ο χρήστης δεν βρέθηκε' }); } req.user = user; next(); } catch (error) { res.status(401).json({ error: 'Μη έγκυρο token' }); } }; module.exports = auth;

Πίνακας ελέγχου χρήστη με όμορφα αναλυτικά στοιχεία

Δημιουργήστε έναν νέο φάκελο στο έργο σας και ονομάστε τον public, στη συνέχεια προσθέστε ένα αρχείο μέσα σε αυτόν τον φάκελο και ονομάστε τον index.html:

<!DOCTYPE html> <html> <head> API μουσικής ανάγνωσης μυαλού - Προσωπικός πίνακας ελέγχου       🧠🎵 Καλώς ήρθατε πίσω!
    Δεν έχετε λογαριασμό; Εγγραφείτε
/div> 
 🎵 Δημιουργήστε το μουσικό σας προφίλ
    <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="όνομα χρήστη"></span>! Είστε έτοιμοι να ανακαλύψετε το τέλειο soundtrack σας;</p>     📊 Συνολικές λίστες αναπαραγωγής
 0
/div>/div>  😊 Αγαπημένη διάθεση
 -
   🕐 Καλύτερη Ώρα
 -
   🎵 Κορυφαίο Είδος
 -
      💭 Πώς αισθάνεσαι αυτή τη στιγμή;
  <button onclick="generatePersonalizedPlaylist()"</button> <div id="result" style="display:none;" class="result"> <textarea ... <p>Τώρα, μέσα στον φάκελο <code>public</code>, δημιουργήστε έναν φάκελο και ονομάστε τον <code>js</code> και δημιουργήστε ένα αρχείο <code>app.js</code> μέσα στον φάκελο js με τον ακόλουθο κώδικα:</p> <pre><code>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'; } συνάρτηση showRegister() { document.querySelector('.login-section').style.display = 'none'; document.getElementById('registerSection').style.display = 'block'; } συνάρτηση async login() { const όνομα χρήστη = document.getElementById('loginUsername').value; const κωδικός πρόσβασης = document.getElementById('loginPassword').value; if (!όνομα χρήστη || !κωδικός πρόσβασης) { alert('Παρακαλώ συμπληρώστε όλα τα πεδία'); return; } try { const response = await fetch('/api/login', { method: 'POST', headers: { 'Τύπος περιεχομένου': 'application/json' }, body: JSON.stringify({όνομα χρήστη, κωδικός πρόσβασης }) }); 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 function 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 function loadDashboard() { try { const response = await fetch('/api/profile', { headers: { 'Authorization': 'Φορέας ' + authToken } }); if (response.ok) { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } else { αποσύνδεση(); } } catch (σφάλμα) { console.error('Σφάλμα φόρτωσης πίνακα ελέγχου:', σφάλμα); αποσύνδεση(); } } function showDashboard() { document.getElementById('authSection').style.display = 'none'; document.getElementById('dashboardSection').style.display = 'block'; document.getElementById('όνομα χρήστη').textContent = currentUser.username; } function 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]) || '-'; } function loadMoodHistory() { const historyContainer = document.getElementById('historyContainer'); if (!currentUser.moodHistory || currentUser.moodHistory.length === 0) { historyContainer.innerHTML = 'Δεν υπάρχει ακόμα ιστορικό διαθέσεων. Δημιουργήστε την πρώτη σας λίστα αναπαραγωγής!'; 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 function generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('Παρακαλώ περιγράψτε πώς αισθάνεστε!'); return; } try { 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('Αποτυχία δημιουργίας λίστας αναπαραγωγής. Παρακαλώ προσπαθήστε ξανά.'); } } function displayPersonalizedResults(data) { const resultDiv = document.getElementById('result'); 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> <lt;/div> <lt;/div> `).join('')} <lt;/div> `; resultDiv.innerHTML = html; } async function 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(μου άρεσε; 'Ευχαριστώ! Θα προτείνουμε περισσότερα σαν κι αυτό.' : 'Το κατάλαβα! Θα αποφύγουμε παρόμοια κομμάτια.'); } catch (error) { console.error('Σφάλμα σχολίων:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin(); </code></pre> <h2>Αντικατάσταση του αρχείου server.js</h2> <p>Αντικατάσταση του κώδικα του αρχείου server.js με τα εξής:</p> <pre><code>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 () => { try { console.log('🔗 Σύνδεση με MongoDB...'); await 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) => { try { const { όνομα χρήστη, email, κωδικός πρόσβασης } = req.body; if (! όνομα χρήστη || !email || !password) { return res.status(400).json({ σφάλμα: 'Όλα τα πεδία είναι υποχρεωτικά' }); } if (password.length < 6) { return res.status(400).json({ σφάλμα: 'Ο κωδικός πρόσβασης πρέπει να έχει τουλάχιστον 6 χαρακτήρες' }); } const existingUser = await User.findOne({ $or: {[ email }, { όνομα χρήστη }] }); if (existingUser) { return res.status(400).json({ σφάλμα: 'Το όνομα χρήστη ή η διεύθυνση email υπάρχει ήδη' }); } const user = new User({ όνομα χρήστη, email, κωδικός πρόσβασης }); await user.save(); res.status(201).json({ μήνυμα: 'Ο χρήστης δημιουργήθηκε με επιτυχία' }); } catch (σφάλμα) { console.error('Σφάλμα εγγραφής:', σφάλμα); res.status(500).json({ σφάλμα: 'Η εγγραφή απέτυχε' }); } }); // Σύνδεση χρήστη app.post('/api/login', async (req, res) => { try { const { όνομα χρήστη, κωδικός πρόσβασης } = req.body; const user = await User.findOne({ $or: {[ όνομα χρήστη }, { email: όνομα χρήστη }] }); if (!user || !(await user.comparePassword(κωδικός πρόσβασης))) { return res.status(401).json({ σφάλμα: 'Μη έγκυρα διαπιστευτήρια' }); } const token = jwt.sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ token, user: { όνομα χρήστη: user.username, email: user.email } }); } catch (error) { console.error('Σφάλμα σύνδεσης:', σφάλμα); res.status(500).json({σφάλμα: 'Η σύνδεση απέτυχε' }); } });// Λήψη προφίλ χρήστη app.get('/api/profile', auth, async (req, res) => { try { req.user.updateStats(); await req.user.save(); res.json(req.user); } catch (error) { res.status(500).json({ error: 'Αποτυχία φόρτωσης προφίλ' }); } }); // Δημιουργία εξατομικευμένης λίστας αναπαραγωγής app.post('/api/personalized-playlist', auth, async (req, res) => { try { const {text, playlistSize = 15} = req.body; if (!text) { return res.status(400).json({ error: 'Παρακαλώ πείτε μου πώς αισθάνεστε!' }); } 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({ μήνυμα: 'Λήφθηκαν σχόλια! Θα βελτιώσουμε τις μελλοντικές προτάσεις.' }); } catch (error) { console.error('Σφάλμα σχολίων:', error); res.status(500).json({ σφάλμα: 'Αποτυχία επεξεργασίας σχολίων' }); } }); app.listen(PORT, () => { console.log(`🚀 API μουσικής ανάγνωσης μυαλού που εκτελείται στο http://localhost:${PORT}`); console.log('🧠 Έτοιμοι να αναλύσετε διαθέσεις και να δημιουργήσετε λίστες αναπαραγωγής!'); });</code></pre> <h2>Τι θα πρέπει να μπορείτε τώρα να κάνετε</h2> <h3>1. Ανώνυμοι Χρήστες (Αρχική Λειτουργικότητα)</h3> <ul> <li>Επισκεφθείτε τον ιστότοπό σας χωρίς να συνδεθείτε</li> <li>Δημιουργήστε λίστες αναπαραγωγής χρησιμοποιώντας την υπάρχουσα ανάλυση διάθεσης</li> <li>Λάβετε προτάσεις μουσικής με βάση τα συναισθήματα</li> </ul> <h3>2. Εγγεγραμμένοι Χρήστες (Νέες Λειτουργίες)</h3> <ul> <li>Δημιουργήστε έναν λογαριασμό και συνδεθείτε</li> <li>Δημιουργήστε εξατομικευμένες λίστες αναπαραγωγής που βελτιώνονται με την πάροδο του χρόνου</li> <li>Δείτε το ιστορικό διάθεσης και τις προσωπικές αναλύσεις</li> <li>Επιλέξτε "Μου αρέσει"/"Δεν μου αρέσει" κομμάτια για να εκπαιδεύσετε την Τεχνητή Νοημοσύνη</li> <li>Δείτε στατιστικά στοιχεία όπως αγαπημένη διάθεση, συνολικές λίστες αναπαραγωγής κ.λπ.</li> </ul> <h2>Οδηγός Δοκιμής Βήμα προς Βήμα</h2> <h3>Δοκιμή 1: Ελέγξτε την Εκκίνηση του Διακομιστή σας</h3> <pre><code>node server.js</code></pre> <p>Θα πρέπει να δείτε:</p> <pre><code>🔑 Προσπάθεια ελέγχου ταυτότητας Spotify... 🎵 Το Spotify συνδέθηκε με επιτυχία! 🔗 Σύνδεση MongoDB... ✅ Επιτυχής σύνδεση MongoDB! 🚀 API μουσικής ανάγνωσης μυαλού που εκτελείται στο http://localhost:3000 🧠 Είστε έτοιμοι να αναλύσετε διαθέσεις και να δημιουργήσετε λίστες αναπαραγωγής!</code></pre> <h3>Τεστ 2: Επισκεφθείτε τον ιστότοπό σας</h3> <p>Μεταβείτε στο: <strong>http://localhost:3000</strong></p> <p><strong>Τι θα πρέπει να δείτε:</strong></p> <ul> <li>Μια φόρμα σύνδεσης που ζητά όνομα χρήστη/κωδικό πρόσβασης</li> <li>Έναν σύνδεσμο "Δεν έχετε λογαριασμό; Εγγραφείτε"</li> </ul> <h3>Τεστ 3: Δημιουργήστε τον πρώτο σας λογαριασμό</h3> <ol> <li><strong>Κάντε κλικ:</strong> "Δεν έχετε λογαριασμό; Εγγραφείτε"</li> <li><strong>Συμπληρώστε:</strong> <ul> <li>Όνομα χρήστη: <code>testuser</code></li> <li>Email: <code>test@example.com</code></li> <li>Κωδικός πρόσβασης: <code>password123</code></li> </ul> </li> <li><strong>Κάντε κλικ:</strong> "Δημιουργία λογαριασμού"</li> <li><strong>Αναμενόμενο αποτέλεσμα:</strong> "Ο λογαριασμός δημιουργήθηκε με επιτυχία! Παρακαλώ συνδεθείτε."</li> </ol> <h3>Τεστ 4: Συνδεθείτε στον Πίνακα Ελέγχου σας</h3> <ol> <li>Χρησιμοποιήστε τα διαπιστευτήρια που μόλις δημιουργήσατε</li> <li><strong>Κάντε κλικ:</strong> "Σύνδεση"</li> <li><strong>Θα πρέπει να δείτε:</strong> <ul> <li>Μήνυμα καλωσορίσματος με το όνομα χρήστη σας</li> <li>Κάρτες στατιστικών που εμφανίζουν 0 λίστες αναπαραγωγής, καμία αγαπημένη διάθεση ακόμα</li> <li>Περιοχή κειμένου που ρωτά "Πώς αισθάνεστε αυτή τη στιγμή;"</li> </ul> </li> </ol> <h3>Τεστ 5: Δημιουργήστε την πρώτη σας εξατομικευμένη λίστα αναπαραγωγής</h3> <ol> <li><strong>Πληκτρολογήστε κάτι όπως:</strong> "Νιώθω πολύ ενθουσιασμένος για το νέο μου έργο!"</li> <li><strong>Κάντε κλικ:</strong> "Δημιουργία της τέλειας λίστας αναπαραγωγής μου"</li> <li><strong>Θα πρέπει να δείτε:</strong> <ul> <li>Εντοπισμένη διάθεση (πιθανώς "ενεργητική" ή "χαρούμενη")</li> <li>Λίστα τραγουδιών με εξώφυλλο άλμπουμ</li> <li>Προεπισκόπηση συσκευών αναπαραγωγής ήχου (εάν υπάρχουν)</li> <li>Κουμπί με ένδειξη αντίχειρα προς τα πάνω/κάτω για κάθε τραγούδι</li> </ul> </li> </ol> <h3>Τεστ 6: Δοκιμή του συστήματος εκμάθησης</h3> <ol> <li><strong>Κάντε κλικ με ένδειξη αντίχειρα προς τα πάνω</strong> 👍 σε τραγούδια που σας αρέσουν</li> <li><strong>Κάντε κλικ με ένδειξη αντίχειρα προς τα κάτω</strong> 👎 σε τραγούδια που δεν σας αρέσουν</li> <li><strong>Αναμένεται:</strong> Μηνύματα ειδοποίησης που λένε "Ευχαριστούμε! Θα προτείνουμε περισσότερα σαν αυτό"</li> </ol> <h3>Τεστ 7: Ελέγξτε την ενημέρωση των στατιστικών σας</h3> <ol> <li><strong>Ανανέωση του σελίδα</strong> ή δημιουργήστε μια άλλη λίστα αναπαραγωγής</li> <li><strong>Τα στατιστικά σας θα πρέπει τώρα να εμφανίζουν:</strong> <ul> <li>Συνολικές λίστες αναπαραγωγής: 1 (ή περισσότερες)</li> <li>Αγαπημένη διάθεση: όποια διάθεση εντοπίστηκε</li> <li>Άλλα στατιστικά θα πρέπει να αρχίσουν να συμπληρώνονται</li> </ul> </li> </ol> <h2>Δοκιμή διαφορετικών σεναρίων</h2> <h3>Δοκιμή διαφορετικών διαθέσεων:</h3> <ul> <li>"Μόλις χώρισα με την κοπέλα μου και βρέχει" (θα πρέπει να εντοπίσει: λυπημένος)</li> <li>"Είμαι ενθουσιασμένος για την προπόνησή μου!" (θα πρέπει να ανιχνεύει: ενεργητικό)</li> <li>"Θέλω απλώς να χαλαρώσω και να μελετήσω ήσυχα" (θα πρέπει να ανιχνεύει: χαλαρώστε)</li> <li>"Νιώθω ρομαντικά σε αυτό το ραντεβού" (θα πρέπει να ανιχνεύει: ρομαντικό)</li> </ul> <h3>Δοκιμή πεζών-κεφαλαίων:</h3> <ul> <li>"" (κενό - θα πρέπει να εμφανίζει σφάλμα)</li> <li>"τυχαίο κείμενο asdf" (θα πρέπει να είναι από προεπιλογή ουδέτερο/χαλαρό)</li> <li>"Είμαι ΕΞΑΙΡΕΤΙΚΑ ενθουσιασμένος!!!" (θα πρέπει να ανιχνεύει υψηλότερη αξιοπιστία)</li> </ul> <h2>Συνήθη προβλήματα και γρήγορες λύσεις</h2> <h3>❌ "Αποτυχία σύνδεσης MongoDB"</h3> <p><strong>Έλεγχος:</strong> Έχει ρυθμιστεί σωστά το αρχείο <code>.env</code> με τη συμβολοσειρά σύνδεσης MongoDB;</p> <pre><code># Εκτελέστε αυτό για να ελέγξετε τη σύνδεση της βάσης δεδομένων σας node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Ορισμός ✅' : 'Λείπει ❌');" </code></pre> <h3>❌ "Η σύνδεση με το Spotify απέτυχε"</h3> <p><strong>Έλεγχος:</strong> Είναι τα κλειδιά API του Spotify στο αρχείο <code>.env</code>;</p> <pre><code># Εκτελέστε αυτό για να ελέγξετε τα διαπιστευτήρια του Spotify node -e "require('dotenv').config(); console.log('Spotify Client ID:', process.env.SPOTIFY_CLIENT_ID ? 'Ορισμός ✅' : 'Λείπει ❌');" </code></pre> <h3>❌ Η σύνδεση/εγγραφή δεν λειτουργεί</h3> <p><strong>Έλεγχος:</strong> Βλέπετε μηνύματα σφάλματος στην κονσόλα του προγράμματος περιήγησης;</p> <ul> <li>Πατήστε F12 → Καρτέλα κονσόλας</li> <li>Αναζητήστε κόκκινα μηνύματα σφάλματος</li> </ul> <h3>❌ Η σελίδα εμφανίζει την παλιά διεπαφή</h3> <p><strong>Λύση:</strong> Ανανεώστε τη σελίδα</p> <ul> <li>Πατήστε Ctrl+Shift+R (Windows/Linux)</li> <li>Πατήστε Cmd+Shift+R (Mac)</li> </ul> <h2>Τι θα έπρεπε να λειτουργεί έναντι αυτού που εξακολουθεί να είναι βασικό</h2> <h3>✅ Θα έπρεπε να λειτουργεί τώρα:</h3> <ul> <li>Εγγραφή και σύνδεση χρήστη</li> <li>Βασική ανίχνευση διάθεσης και δημιουργία λίστας αναπαραγωγής</li> <li>Αποθήκευση ιστορικού διάθεσης στη βάση δεδομένων</li> <li>Απλά σχόλια "μου αρέσει"/"δεν μου αρέσει"</li> <li>Παρακολούθηση στατιστικών στοιχείων (συνολικές λίστες αναπαραγωγής, αγαπημένη διάθεση)</li> </ul> <h3>🚧 Ακόμα Βασικό (Προηγμένες Λειτουργίες για Αργότερα):</h3> <ul> <li>Πολύπλοκη μηχανική μάθηση από τα σχόλια των χρηστών</li> <li>Κοινωνικές λειτουργίες και κοινή χρήση λιστών αναπαραγωγής</li> <li>Προηγμένες αναλύσεις και μοτίβα διάθεσης</li> <li>Διεπαφή εφαρμογής για κινητά</li> </ul> <h2>Επόμενα Βήματα Μετά τη Δοκιμή</h2> <p>Μόλις όλα λειτουργήσουν:</p> <ol> <li><strong>Δοκιμάστε με διαφορετικούς χρήστες</strong> - δημιουργήστε πολλαπλούς λογαριασμούς για να δείτε πώς διαφέρει η εξατομίκευση</li> <li><strong>Δημιουργήστε πολλαπλές λίστες αναπαραγωγής</strong> - παρακολουθήστε πώς εξελίσσονται τα στατιστικά και οι προτιμήσεις σας</li> <li><strong>Δώστε σχόλια για τα κομμάτια</strong> - δείτε πώς το σύστημα μαθαίνει το γούστο σας</li> <li><strong>Ελέγξτε τον πίνακα ελέγχου του MongoDB Atlas</strong> - θα πρέπει να δείτε δεδομένα να αποθηκεύονται</li> </ol> <h2>Συμπέρασμα</h2> <p>Μόλις δημιουργήσατε κάτι αξιοσημείωτο - μια Τεχνητή Νοημοσύνη που όχι μόνο καταλαβαίνει τα ανθρώπινα συναισθήματα αλλά μαθαίνει και προσαρμόζεται στις ατομικές προτιμήσεις με την πάροδο του χρόνου. Το Mind-Reading Music API σας έχει πλέον μνήμη, προσωπικότητα και την ικανότητα να αναπτύσσεται μαζί με τους χρήστες του.</p> <p>Ο συνδυασμός ανίχνευσης διάθεσης, μάθησης χρήστη και εξατομικευμένων προτάσεων δημιουργεί μια εμπειρία που γίνεται πιο μαγική με κάθε αλληλεπίδραση. Το ταξίδι κάθε χρήστη γίνεται μοναδικό, δημιουργώντας ένα προσωπικό soundtrack στη συναισθηματική του ζωή.</p> <p>Το API σας θυμάται πλέον κάθε διάθεση, μαθαίνει από κάθε αλληλεπίδραση και χτίζει μια ολοκληρωμένη κατανόηση των μουσικών προτιμήσεων κάθε χρήστη. Αυτή είναι η βάση για πραγματικά εξατομικευμένες εμπειρίες τεχνητής νοημοσύνης.</p> <h2>Τι ακολουθεί;</h2> <p>Είστε έτοιμοι να το προχωρήσετε ακόμα περισσότερο; Ακολουθούν μερικές συναρπαστικές οδηγίες:</p> <ol> <li><strong>Προηγμένη Ανάλυση</strong>: Προσθήκη αναγνώρισης μοτίβων διάθεσης και προγνωστικών προτάσεων</li> <li><strong>Κοινωνικές Λειτουργίες</strong>: Επιτρέψτε στους χρήστες να μοιράζονται λίστες αναπαραγωγής και να ανακαλύπτουν τις μουσικές προτιμήσεις των φίλων τους</li> <li><strong>Εφαρμογή για κινητά</strong>: Δημιουργήστε εφαρμογές React Native ή Flutter για iOS/Android</li> <li><strong>Ενσωμάτωση Φωνής</strong>: Προσθήκη μετατροπής ομιλίας σε κείμενο για εισαγωγή διάθεσης χωρίς χέρια</li> <li><strong>Μηχανική Μάθηση</strong>: Εφαρμογή συνεργατικού φιλτραρίσματος για ακόμη καλύτερες προτάσεις</li> <li><strong>Ανάπτυξη</strong>: Ανάπτυξη σε AWS/Vercel με κατάλληλες μεταβλητές περιβάλλοντος</li> </ol> <p>Συνεχίστε να πειραματίζεστε και να δημιουργείτε - το μέλλον των εξατομικευμένων εμπειριών τεχνητής νοημοσύνης είναι στα χέρια σας!</p> <hr> <p><em>Έτοιμοι για την επόμενη πρόκληση; Μείνετε συντονισμένοι για το επερχόμενο σεμινάριό μας σχετικά με την προσθήκη κοινωνικών λειτουργιών και συνεργατικού φιλτραρίσματος για τη δημιουργία ενός δικτύου ανακάλυψης μουσικής που συνδέει τους ανθρώπους μέσω κοινών συναισθηματικών εμπειριών.</em></p></article></body></html>