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

Είστε έτοιμοι να κάνετε το API μουσικής ανάγνωσης μυαλού πραγματικά κοινωνικό; Σε αυτό το σεμινάριο, θα προσθέσετε ένα ισχυρό σύστημα φίλων και κοινής χρήσης λιστών αναπαραγωγής που παραμένει στη βάση δεδομένων, ώστε οι χρήστες να μπορούν να βλέπουν τις κοινόχρηστες λίστες αναπαραγωγής των φίλων τους ακόμα και όταν δεν είναι συνδεδεμένοι στο διαδίκτυο. Θα χρησιμοποιήσουμε το Socket.io για ενημερώσεις σε πραγματικό χρόνο και το MongoDB για μόνιμη αποθήκευση.

Τι θα δημιουργήσετε

Σύστημα φίλων – Προσθέστε και διαχειριστείτε φίλους με όνομα χρήστη και αμοιβαία φιλία χρησιμοποιώντας ObjectIds
Μόνιμη κοινή χρήση λίστας αναπαραγωγής – Οι κοινόχρηστες λίστες αναπαραγωγής αποθηκεύονται στη βάση δεδομένων και μπορούν να προβληθούν ανά πάσα στιγμή
Ειδοποιήσεις σε πραγματικό χρόνο – Λάβετε άμεσες ειδοποιήσεις όταν οι φίλοι μοιράζονται περιεχόμενο (αν είναι συνδεδεμένοι)
Τροφοδοσία δραστηριότητας – Δείτε τις πρόσφατες κοινοποιήσεις φίλων με προεπισκοπήσεις λίστας αναπαραγωγής με δυνατότητα κλικ
Βελτιωμένη ανάλυση διάθεσης – Έξυπνη δημιουργία λιστών αναπαραγωγής με εφεδρικές επιλογές αναζήτησης

Προαπαιτούμενα

Το ολοκληρωμένο API μουσικής ανάγνωσης μυαλού από το Μέρος 2
Εγκατεστημένα MongoDB, Node.js και npm
Διαπιστευτήρια API Spotify (Client ID και Μυστικό)
30–45 λεπτά χρόνου προγραμματισμού

Στο Μέρος 2, δημιουργήσατε λογαριασμούς χρηστών με ιστορικό διάθεσης και έξυπνες προτιμήσεις. Τώρα θα το κάνουμε κοινωνικό! Θα μάθετε πώς να συνδέετε χρήστες, να μοιράζεστε λίστες αναπαραγωγής τόσο σε πραγματικό χρόνο όσο και μόνιμα και να βλέπετε τι ακούν οι φίλοι σας με βάση τις διαθέσεις τους.

Κατανόηση των Βασικών Εννοιών

Πριν εμβαθύνουμε στον κώδικα, ας καταλάβουμε τι δημιουργούμε:

Socket.io – Μια βιβλιοθήκη που επιτρέπει την αμφίδρομη επικοινωνία σε πραγματικό χρόνο μεταξύ του διακομιστή και του προγράμματος περιήγησής σας. Σκεφτείτε το σαν ένα τηλεφώνημα αντί για μηνύματα κειμένου – μπορείτε να στέλνετε και να λαμβάνετε πληροφορίες άμεσα χωρίς να ανανεώνετε τη σελίδα.
Μόνιμη Αποθήκευση – Αποθήκευση δεδομένων στη βάση δεδομένων MongoDB, ώστε να παραμένουν εκεί ακόμα και όταν οι χρήστες αποσυνδέονται. Αυτό είναι σαν να αποθηκεύετε ένα αρχείο στον σκληρό σας δίσκο αντί να το διατηρείτε απλώς στη μνήμη.
Αναφορές ObjectId – Ο τρόπος της MongoDB για τη δημιουργία σχέσεων μεταξύ δεδομένων. Αντί να αντιγράφετε όλες τις πληροφορίες του φίλου σας στο προφίλ σας, απλώς αποθηκεύετε μια αναφορά (σαν δείκτη) στο προφίλ του.
Σχήματα – Σκεφτείτε τα ως σχέδια που ορίζουν τη δομή των δεδομένων σας. Λένε στο MongoDB ποια πεδία πρέπει να έχει κάθε έγγραφο και τι είδους δεδομένα τοποθετούνται σε κάθε πεδίο.

Βήμα 1: Εγκατάσταση απαιτούμενων εξαρτήσεων

Ανοίξτε το τερματικό σας στον κατάλογο του έργου σας και εγκαταστήστε το Socket.io για λειτουργίες πραγματικού χρόνου:

npm install socket.io

Τι κάνει αυτό: Αυτή η εντολή κατεβάζει και εγκαθιστά τη βιβλιοθήκη Socket.io στο έργο σας. Η εντολή npm install ανακτά πακέτα από το μητρώο npm (μια τεράστια βιβλιοθήκη κώδικα JavaScript) και τα προσθέτει στον φάκελο node_modules.

Οι άλλες εξαρτήσεις (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) θα πρέπει να έχουν ήδη εγκατασταθεί από το Μέρος 2.

Βήμα 2: Ενημερώστε το Μοντέλο Χρήστη σας με Κοινωνικές Λειτουργίες

Εφόσον έχετε ήδη δημιουργήσει ένα Μοντέλο Χρήστη στο Μέρος 2, θα το ενημερώσουμε για να προσθέσουμε κοινωνικές λειτουργίες. Το Μοντέλο Χρήστη είναι σαν ένα πρότυπο που ορίζει ποιες πληροφορίες αποθηκεύουμε για κάθε χρήστη στη βάση δεδομένων μας.

Τι προσθέτουμε:

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

 Πεδία sharedWith και isShared - Αυτά παρακολουθούν ποιες καταχωρίσεις διάθεσης έχουν κοινοποιηθεί και με ποιους έχουν κοινοποιηθεί.
 sharedPlaylistSchema - Ένα νέο σχήμα (blueprint) που ορίζει πώς μοιάζει μια κοινόχρηστη λίστα αναπαραγωγής: ποιος την κοινοποίησε, για ποια διάθεση ήταν, τα κομμάτια και πότε κοινοποιήθηκε.
 Πίνακας sharedPlaylists - Μια λίστα που αποθηκεύει όλες τις λίστες αναπαραγωγής που έχουν κοινοποιηθεί μαζί σας οι φίλοι σας.

 Αντικαταστήστε το models/User.js με:
 const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Σχήμα για μεμονωμένες καταχωρίσεις διάθεσης (κάθε φορά που ο χρήστης δημιουργεί μια λίστα αναπαραγωγής) const moodEntrySchema = new mongoose.Schema({ text: String, // Τι πληκτρολόγησε ο χρήστης (π.χ., "νιώθω χαρούμενος σήμερα") detectedMood: String, // Η διάθεση που ανίχνευσε ο αναλυτής μας (π.χ., "χαρούμενος") confidence: Number, // Πόσο σίγουροι είμαστε (0-10) playlistGenerated: [{ // Πίνακας κομματιών που προτείναμε trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = not rated, true = liked, false = disliked }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Με ποιον το κοινοποιήσαμε; isShared: { type: Boolean, default: false }, // Κοινοποιήθηκε; 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 sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId αναφορά στον φίλο που μοιράστηκε sharedByUsername: String, // Όνομα χρήστη για εύκολη εμφάνιση (αποκανονικοποιημένο για απόδοση) mood: String, // Για ποια διάθεση ήταν αυτή η λίστα αναπαραγωγής; playlist: [{ // Το πραγματικό όνομα των κομματιών: String, καλλιτέχνης: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Πότε κοινοποιήθηκε αυτό; }); // Κύριο σχήμα χρήστη - ορίζει τη δομή ενός εγγράφου χρήστη 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 }, friends: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Πίνακας αναφορών ObjectId σε φίλους moodHistory: [moodEntrySchema], // Όλες οι λίστες αναπαραγωγής που έχει δημιουργήσει αυτός ο χρήστης sharedPlaylists: [sharedPlaylistSchema], // Λίστες αναπαραγωγής που έχουν μοιραστεί φίλοι με αυτόν τον χρήστη προτιμήσεις: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Αυτόματη προσθήκη πεδίων createdAt και updatedAt // Middleware: Εκτέλεση αυτής της συνάρτησης πριν από την αποθήκευση ενός χρήστη (για κατακερματισμό του κωδικού πρόσβασής του) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Κατακερματισμός μόνο εάν ο κωδικός πρόσβασης άλλαξε this.password = await bcrypt.hash(this.password, 12); // Κατακερματισμός με 12 γύρους salt next(); }); // Μέθοδος: Έλεγχος εάν ένας κωδικός πρόσβασης ταιριάζει με τον κατακερματισμένο κωδικό πρόσβασης userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Μέθοδος: Ενημέρωση στατιστικών στοιχείων χρήστη με βάση το ιστορικό διαθέσεών του userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Λήψη όλων των μη κενών διαθέσεων this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Μέτρηση πόσες φορές εμφανίζεται κάθε διάθεση const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Εύρεση της διάθεσης με τον υψηλότερο αριθμό this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Υπολογισμός της αγαπημένης ώρας της ημέρας με βάση το πότε δημιουργούνται οι λίστες αναπαραγωγής const hours = this.moodHistory.map(e => e.timestamp.getHours()).filter(h => !isNaN(h)); if (hours.length) { const avg = hours.reduce((a, b) => a + b, 0) / hours.length; this.stats.favoriteTime = avg < 6 ? 'night' : avg < 12 ? 'morning' : avg < 18 ? 'afternoon' : 'evening'; } }; // Εξαγωγή του μοντέλου ώστε να μπορούμε να το χρησιμοποιήσουμε σε άλλα αρχεία module.exports = mongoose.model('User', userSchema);
 Επεξήγηση Βασικών Εννοιών:
  Αναφορές ObjectId – Ο πίνακας friends δεν αποθηκεύει ολόκληρα αντικείμενα χρήστη. Αντίθετα, αποθηκεύει ObjectIds (μοναδικά αναγνωριστικά) που παραπέμπουν σε άλλους χρήστες. Αυτό είναι αποτελεσματικό επειδή αν ένας φίλος αλλάξει το όνομα χρήστη του, δεν χρειάζεται να το ενημερώνουμε παντού – απλώς ακολουθούμε την αναφορά.
 Απόρριψη κανονικοποίησης – Παρατηρήστε ότι αποθηκεύουμε τόσο το sharedBy (ObjectId) όσο και το sharedByUsername (String). Αυτό ονομάζεται απόρριψη κανονικοποίησης – αποθήκευση των ίδιων δεδομένων σε πολλά σημεία για απόδοση. Αποθηκεύουμε το όνομα χρήστη, ώστε να μην χρειάζεται να αναζητούμε τον χρήστη κάθε φορά που εμφανίζουμε κοινόχρηστες λίστες αναπαραγωγής.
 Middleware (.pre()) – Αυτό εκτελείται αυτόματα πριν από ορισμένες λειτουργίες. Εδώ, κατακερματίζει τους κωδικούς πρόσβασης πριν τους αποθηκεύσει στη βάση δεδομένων για ασφάλεια.
 Μέθοδοι στιγμιαίας εμφάνισης (.methods) – Αυτές είναι συναρτήσεις που μπορείτε να καλέσετε σε μεμονωμένα έγγραφα χρήστη, όπως user.comparePassword() ή user.updateStats().
 
 Βήμα 3: Ενημερώστε το HTML Frontend σας με λειτουργίες κοινωνικής δικτύωσης
 Τώρα ας ενημερώσουμε τη διεπαφή χρήστη ώστε να περιλαμβάνει διαχείριση φίλων και μια ροή δραστηριότητας. Ο κώδικας HTML ορίζει τη δομή της ιστοσελίδας σας – ποια στοιχεία εμφανίζονται και πού βρίσκονται.
 Τι προσθέτουμε στο περιβάλλον χρήστη:
  Ενότητα λίστας φίλων – Εμφανίζει τους τρέχοντες φίλους σας
 Προσθήκη εισόδου φίλου – Πεδίο κειμένου για την εισαγωγή του ονόματος χρήστη ενός φίλου
 Τροφοδοσία πρόσφατης δραστηριότητας – Εμφανίζει τις λίστες αναπαραγωγής που έχουν μοιραστεί οι φίλοι σας (μπορείτε να κάνετε κλικ για να δείτε ολόκληρη τη λίστα αναπαραγωγής)
 Πλαίσιο ελέγχου Κοινής χρήσης – Επιλογή για κοινή χρήση της δημιουργημένης λίστας αναπαραγωγής με φίλους
 Περιοχή ειδοποιήσεων – Αναδυόμενες ειδοποιήσεις για ενημερώσεις σε πραγματικό χρόνο
 
 Αντικαταστήστε το public/index.html με:
 <!DOCTYPE html>    API Μουσικής Ανάγνωσης Νου - Κοινωνικά Δίκτυα       <!-- Φόρμα Σύνδεσης -->  🎵 Δημιουργήστε το μουσικό σας προφίλ
     Έχετε ήδη λογαριασμό; Σύνδεση
 
   <!-- Κύριο Τμήμα Πίνακα Ελέγχου (εμφανίζεται μετά τη σύνδεση) -->    💭 Πώς αισθάνεστε;    Κοινή χρήση με φίλους    
    👥 Οι Φίλοι μου
 
 Προσθήκη Φίλου
   Πρόσφατη Δραστηριότητα
  Η δραστηριότητα φίλων θα εμφανίζεται εδώ...
         <!-- Συμπερίληψη της βιβλιοθήκης Socket.io (εξυπηρετείται αυτόματα από τον διακομιστή μας) -->