Ulepsz swoje API do czytania w myślach: dodawanie kont użytkowników z historią nastroju i inteligentnymi preferencjami

Przekształć swój generator playlist wykrywający emocje w spersonalizowanego towarzysza muzycznego, który uczy się z każdej interakcji. Ten samouczek uzupełnia tę edycję o funkcje uwierzytelniania użytkownika, analizy śledzenia nastroju i inteligentnego uczenia się preferencji, aby tworzyć prawdziwie spersonalizowane doświadczenia muzyczne.

Co tworzymy dzisiaj

Pamiętasz nasze API do czytania w myślach, które potrafiło wykrywać emocje i generować playlisty? Dzisiaj je spersonalizujemy. Dodajemy:

Uwierzytelnianie użytkownika, które naprawdę działa (bez skomplikowanych problemów z OAuth)
Panel historii nastroju z atrakcyjną analizą
Inteligentne preferencje playlist, które uczą się na podstawie zachowań użytkowników
Spersonalizowane rekomendacje, które z czasem stają się coraz lepsze
Trwałość danych, dzięki której użytkownicy nigdy nie stracą swojej muzycznej podróży

Pod koniec tego samouczka Twoje API zapamięta, że Sarah uwielbia indie rock, gdy jest smutna, a Mike woli muzykę klasyczną podczas sesji skupienia.

Czego będziesz potrzebować

Ukończony interfejs API do czytania w myślach z poprzedni samouczek
30 minut skoncentrowanego kodowania
Konto MongoDB Atlas (wersja bezpłatna działa doskonale)
Podstawowa wiedza na temat baz danych (będziemy uproszczeni!)

Konfigurowanie uwierzytelniania użytkowników (prosty sposób)

Najpierw dodajmy pakiety potrzebne do zarządzania użytkownikami.

Przejdź do terminala w edytorze kodu, wpisz lub wklej poniższe polecenie i naciśnij enter:

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

Krok 1: Konfiguracja połączenia z bazą danych

Po zakończeniu instalacji utwórz nowy plik o nazwie database.js i dodaj następujący kod:

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 Łączenie z MongoDB...'); wait mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ Połączenie z MongoDB powiodło się!'); } catch (error) { console.error('❌ Połączenie z MongoDB nie powiodło się:', error.message); process.exit(1); } }; module.exports = connectDB;

I zapisz za pomocą cmd + s, ctrl +s lub plik, a następnie zapisz.

Utwórz konto MongoDB Atlas

Odwiedź: mongodb.com/cloud/atlas
Kliknij: przycisk „Rozpocznij” (zwykle w prawym górnym rogu)

Opcje rejestracji

Masz trzy sposoby utworzenia konta:

Opcja A: Rejestracja za pomocą adresu e-mail

Kliknij „Zarejestruj się za pomocą adresu e-mail”
Wprowadź swój adres e-mail
Utwórz silne hasło
Kliknij „Utwórz konto Atlas”

Opcja B: Rejestracja za pomocą konta Google

Kliknij „Zarejestruj się za pomocą konta Google”
Wybierz swoje konto Google
Udziel niezbędnych uprawnień

Opcja C: Rejestracja w GitHub

Kliknij „Zarejestruj się w GitHub”
Autoryzuj MongoDB Atlas, aby uzyskać dostęp do Twojego konta GitHub

Zweryfikuj swój adres e-mail

Sprawdź swoją skrzynkę odbiorczą
Kliknij link weryfikacyjny z MongoDB
To potwierdza, że Twoje konto jest prawdziwe

Utwórz swój pierwszy klaster bazy danych

Jeśli po zalogowaniu nie widzisz swojego pulpitu nawigacyjnego, być może będziesz musiał kliknąć swoje imię i nazwisko w prawym górnym rogu, aby otworzyć następującą listę rozwijaną i kliknąć Atlas:

Następnie zobaczysz pulpit nawigacyjny Atlas. Czas utworzyć bazę danych!

Wybierz typ wdrożenia

Kliknij „Klastry” w sekcji „Baza danych” na pasku bocznym po lewej stronie

Kliknij „Zbuduj Klaster"

Wybierz "Bezpłatny"

Zostaniesz przekierowany na stronę wdrażania klastra, gdzie możesz wybrać bezpłatny plan.

Wybór dostawcy chmury: Zobaczysz trzy opcje dostawcy:

AWS (Amazon Web Services) ⭐ Zalecany
Google Cloud Platform
Microsoft Azure

Wybierz: AWS (jest najpopularniejszy i ma najwięcej regionów)

Wybór regionu: Po wybraniu AWS zobaczysz listę rozwijaną z wieloma regionami. Wybierz ten najbliższy Twojej lokalizacji, aby uzyskać lepszą wydajność:

🇺🇸 Stany Zjednoczone:

us-east-1 (N. Virginia) - Wybrzeże Wschodnie
us-west-2 (Oregon) - Wybrzeże Zachodnie
us-central-1 (Iowa) - Wybrzeże Centralne

🇪🇺 Europa:

eu-west-1 (Irlandia) - Europa Zachodnia
eu-central-1 (Frankfurt) - Europa Środkowa
eu-west-2 (Londyn) - Wielka Brytania

🌏 Azja i Pacyfik:

ap-southeast-1 (Singapur) - Azja Południowo-Wschodnia
ap-south-1 (Bombaj) - Indie
ap-northeast-1 (Tokio) - Japonia

💡 Wskazówka: Jeśli nie masz pewności, us-east-1 jest zazwyczaj najbezpieczniejszym wyborem z największą liczbą funkcji.

Następnie kliknij przycisk „Utwórz wdrożenie”

Utwórz użytkownika bazy danych

Krok 3.1: Dodaj użytkownika bazy danych

Zobaczysz ekran „Szybki start zabezpieczeń”
Metoda uwierzytelniania: Pozostaw zaznaczone opcje „Nazwa użytkownika i hasło”
Nazwa użytkownika: Wprowadź nazwę użytkownika (np. mood-music-user)
Hasło:
- Opcja A: Kliknij „Automatycznie generuj bezpieczne hasło” (zalecane)
- Opcja B: Utwórz własne silne hasło (co najmniej 8 znaków)
Natychmiast skopiuj hasło! Będzie Ci ono potrzebne w ciągu połączenia

Formularz użytkownika bazy danych MongoDB

⚠️ Skopiuj i zapisz hasło natychmiast!

Kliknij: „Utwórz użytkownika bazy danych”
Kliknij: „Wybierz metodę połączenia”

Wybierz metodę połączenia

Zobaczysz kilka opcji połączenia:

Sterowniki 👈 To jest to, czego potrzebujemy dla aplikacji Node.js
Kompas (aplikacja graficzna MongoDB na pulpit)
Powłoka (interfejs wiersza poleceń MongoDB)
MongoDB dla VS Code (rozszerzenie VS Code)
Atlas SQL (interfejs SQL dla MongoDB)

Wybierz: „Sterowniki” — ta opcja wyświetli ciąg połączenia dla aplikacji takich jak Node.js

Skonfiguruj połączenie ze sterownikami

Po wybraniu „Sterowniki”:

Sterownik: Wybierz „Node.js” z listy rozwijanej.
Wersja: Wybierz wersję Node.js lub pozostaw domyślną (zwykle działa poprawnie).
Ciąg połączenia: Zobaczysz ciąg połączenia poniżej.

Skopiuj swój ciąg połączenia

Zobaczysz coś takiego:

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

Ważne: To jest szablon! Należy wykonać następujące czynności:

Zastąp <username> nazwą użytkownika bazy danych
Zastąp <password> hasłem do bazy danych
Dodaj nazwę bazy danych po .net/

Przykładowa transformacja

Przed (szablon):

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

Po (gotowe do użycia):

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

Uwaga:

<username> → mood-music-user
<password> → MySecurePassword123
Dodano /mood-music-db jako nazwę bazy danych

Kliknij 'gotowe'

Krok 5: Dodaj ciąg połączenia do swojego projektu

Zaktualizuj swój Plik .env

Otwórz plik .env i dodaj:

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

Generuj silne sekrety

W przypadku JWT_SECRET i SESSION_SECRET potrzebujesz losowych ciągów, które nie zakłócą Twojej konfiguracji pliki.

⚠️ Ważne: Unikaj znaków specjalnych, takich jak @, #, $, %, /, ? w hasłach, ponieważ mogą one uszkodzić ciągi połączeń i pliki JSON.

Opcja A: Prosty generator online (zalecany)

Odwiedź: JWTSECRETS
Ustawienia:
- Liczba haseł: 1
- Długość hasła: 32
- ✅ Zaznacz „wielkie litery (A–Z)”
- ✅ Zaznacz „małe litery (a–z)”
- ✅ Zaznacz „cyfry (0–9)”
- ❌ Odznacz „interpunkcję”
Kliknij „Pobierz hasła”

Opcja B: Użyj konsoli przeglądarki (bardzo proste!)

Otwórz dowolną witrynę (np. google.com)
Naciśnij klawisz F12 (lub kliknij prawym przyciskiem myszy → Sprawdź)
Kliknij kartę „Konsola”

Wklej ten kod i naciśnij Enter:

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

Skopiuj wynik — będzie on wyglądał mniej więcej tak: k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

Opcja C: Metoda ręczna (jeśli wszystkie inne metody zawiodą)

Po prostu wpisz długi, losowy ciąg znaków, używając:

Liter: A-Z, a-z
Cyfr: 0-9
Przykład: MyApp2024SecretKey789RandomString456Auth

Przykład końcowy .env

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

Kluczowe punkty:

✅ Brak znaków specjalnych w JWT_SECRET i SESSION_SECRET
✅ Hasło MongoDB unika znaków rozdzielających adres URL
✅ Wszystkie sekrety są długie i losowe
✅ Bezpieczne w użyciu w plikach JSON i ciągach połączeń

Krok 2: Model użytkownika ze śledzeniem nastroju

Utwórz folder o nazwie models i dodaj w nim plik o nazwie User.js. Następnie dodaj i zapisz następujący kod w pliku:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ tekst: String, wykryty nastrój: String, pewność: Liczba, wygenerowana lista odtwarzania: [{ nazwa utworu: String, artysta: String, identyfikator Spotify: String, polubienia: { typ: wartość logiczna, wartość domyślna: null } }], znacznik czasu: { typ: data, wartość domyślna: 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({ nazwa użytkownika: { typ: String, wymagane: true, unikalne: true, przycięcie: true, minimalna długość: 3 }, e-mail: { typ: String, wymagane: true, unikalne: true, małe litery: true }, hasło: { typ: String, wymagane: true, minimalna długość: 6 }, moodHistory: [moodEntrySchema], preferencje: { typ: userPreferencesSchema, domyślne: () => ({}) }, statystyki: { totalPlaylists: { typ: Liczba, domyślne: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { typ: Data, domyślne: Date.now } } }, { znaczniki czasu: true }); // Skróć hasło przed zapisaniem userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = wait bcrypt.hash(this.password, 12); next(); }); // Porównaj hasła userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // Oblicz statystyki użytkownika userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // Znajdź najczęściej występujący nastrój 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' ); // Określ ulubioną porę dnia 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 = 'rano'; else if (avgHour < 18) this.stats.favoriteTime = 'po południu'; else this.stats.favoriteTime = 'wieczór'; }; module.exports = mongoose.model('User', userSchema);

Krok 3: Oprogramowanie pośredniczące uwierzytelniania

Utwórz folder o nazwie middleware i dodaj do niego plik o nazwie auth.js. Następnie dodaj do pliku następujący kod i zapisz go:

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { try { const token = req.header('Autoryzacja')?.replace('Nośnik ', '') || req.session.token; if (!token) { return res.status(401).json({ błąd: 'Nie podano tokenu' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = wait User.findById(decoded.userId); if (!user) { return res.status(401).json({ błąd: 'Nie znaleziono użytkownika' }); } req.user = user; next(); } catch (error) { res.status(401).json({ błąd: 'Nieprawidłowy token' }); } }; module.exports = auth;

Pulpit użytkownika z piękną analityką

Utwórz nowy folder w swoim projekcie i nazwij go public, a następnie dodaj plik w tym folderze i nazwij go index.html:

<!DOCTYPE html> <html> <head> <title>Interfejs API muzyki czytającej w myślach — Panel osobisty</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 { 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); promień obramowania: 15px; wypełnienie: 25px; wyrównanie tekstu: środek; cień pola: 0 4px 15px rgba(0,0,0,0.1); } .mood-input-section { tło: rgba(255,255,255,0.95); promień obramowania: 20px; wypełnienie: 30px; margines dolny: 30px; } .mood-history { tło: rgba(255,255,255,0.95); promień obramowania: 20px; wypełnienie: 30px; } .history-item { tło: #f8f9fa; promień obramowania: 10px; wypełnienie: 15px; margines dolny: 15px; obramowanie lewe: 4px solid #667eea; } .login-section, .register-section { tło: rgba(255,255,255,0.95); promień obramowania: 20px; wypełnienie: 30px; maksymalna szerokość: 400px; margines: 50px auto; } input, textarea, button { szerokość: 100%; wypełnienie: 12px; margines: 10px 0; obramowanie: 2px solid #e1e5e9; promień obramowania: 8px; rozmiar czcionki: 16px; } button { tło: gradient liniowy(135deg, #667eea, #764ba2); kolor: biały; obramowanie: brak; kursor: pointer; grubość czcionki: 600; } button:hover { transform: translateY(-2px); } </style> </head> <body> <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 Witamy ponownie!</h2> <input type="text" id="loginUsername" placeholder="Nazwa użytkownika"> <input type="password" id="loginPassword" placeholder="Hasło"> <button onclick="login()">Zaloguj się</button> <p><a href="#" onclick="showRegister()">Nie masz konta? Zarejestruj się</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵 Utwórz swój profil muzyczny</h2> <input type="text" id="regUsername" placeholder="Nazwa użytkownika"> <input type="email" id="regEmail" placeholder="E-mail"> <input type="password" id="regPassword" placeholder="Hasło"> <button onclick="register()">Utwórz konto</button> <p><a href="#" onclick="showLogin()">Masz już konto? Zaloguj się</a></p> </div> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 Twój osobisty czytnik myśli muzycznych</h1> <p>Witaj ponownie, <span id="username"></span>! Gotowy odkryć swoją idealną ścieżkę dźwiękową?</p> <button onclick="logout()" style="width:auto; margin-top:10px;">Wyloguj</button> </div> <div class="stats-grid"> <div class="stat-card"> <h3>📊 Łączna liczba playlist</h3> <div id="totalPlaylists" class="stat-number">0</div&</div> <div class="stat-card"> <h3>😊 Ulubiony nastrój</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐 Najlepszy czas</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 Najlepszy gatunek</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 Jak się teraz czujesz?</h2> <textarea id="moodText" placeholder="Opisz swój obecny nastrój, co się dzieje lub jak chcesz się czuć..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 Wygeneruj moją idealną playlistę</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 Twoja podróż nastroju</h2> <div id="historyContainer"></div> </div> </div> </div> </div> <script src="/js/app.js"></script> </body> </html>

Teraz w folderze public utwórz folder i nazwij go js, a następnie utwórz plik app.js w folderze js z następującym kodem:

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'; } funkcja asynchroniczna login() { const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; if (!username || !password) { alert('Wypełnij wszystkie pola'); return; } try { const response = wait fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = wait response.json(); if (response.ok) { authToken = data.token; localStorage.setItem('authToken', authToken); loadDashboard(); } else { alert(data.error || 'Logowanie nie powiodło się'); } } catch (error) { console.error('Błąd logowania:', error); alert('Logowanie nie powiodło się. Spróbuj ponownie.'); } } 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('Wypełnij wszystkie pola'); return; } try { const response = wait fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, email, password }) }); const data = wait response.json(); if (response.ok) { alert('Konto zostało utworzone pomyślnie! Zaloguj się.'); showLogin(); } else { alert(data.error || 'Rejestracja nie powiodła się'); } } catch (error) { console.error('Błąd rejestracji:', error); alert('Rejestracja nie powiodła się. Spróbuj ponownie.'); } } async function loadDashboard() { try { const response = wait fetch('/api/profile', { headers: { 'Authorization': 'Bearer ' + authToken } }); jeśli (response.ok) { currentUser = wait response.json(); showDashboard(); updateStats(); loadMoodHistory(); } else { logout(); } } catch (error) { console.error('Błąd ładowania pulpitu nawigacyjnego:', error); logout(); } } funkcja showDashboard() { document.getElementById('authSection').style.display = 'none'; document.getElementById('dashboardSection').style.display = 'block'; document.getElementById('username').textContent = currentUser.username; } funkcja 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 = '<p>Brak historii nastroju. Wygeneruj swoją pierwszą playlistę!</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} wygenerowanych utworów</small> </div>` ).join(''); } funkcja asynchroniczna generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('Opisz, jak się czujesz!'); return; } try { const response = wait fetch('/api/personalized-playlist', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ text: moodText }) }); const data = wait response.json(); if (response.ok) { displayPersonalizedResults(data); loadDashboard(); } else { alert(data.error || 'Nie udało się wygenerować listy odtwarzania'); } } catch (error) { console.error('Błąd generowania playlisty:', error); alert('Nie udało się wygenerować playlisty. Spróbuj ponownie.'); } } function displayPersonalizedResults(data) { const resultDiv = document.getElementById('result'); resultDiv.style.display = 'block'; const html = ` <h3>Wykryty nastrój: ${data.moodAnalysis.mood} (Pewność siebie: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || 'Oto twoja playlista!'}</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="szerokość:50px;wysokość: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="szerokość:auto;padding:5px 10px;margin:0 5px;">👍</button> <button onclick="likeTrack('${track.id}', false)" style="szerokość:auto;padding:5px 10px;margin:0 5px;">👎</button> </div> </div> `).join('')} </div> `; resultDiv.innerHTML = html; } async function likeTrack(trackId, like) { try { wait fetch('/api/track-feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ trackId: trackId, like: like }) }); alert(liked ? 'Dzięki! Będziemy polecać więcej takich.' : 'Rozumiem! Będziemy unikać podobnych ścieżek.'); } catch (error) { console.error('Błąd opinii:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin();

Zastąp plik server.js

Zastąp kod pliku server.js następującym:

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'); // Połącz się z MongoDB const connectDB = async () => { try { console.log('🔗 Łączenie z MongoDB...'); wait mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ Połączenie z MongoDB powiodło się!'); } catch (error) { console.error('❌ Połączenie z MongoDB nie powiodło się:', 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')); // Wyświetl stronę główną app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // Rejestracja użytkownika app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; if (!username || !email || !password) { return res.status(400).json({ error: 'Wszystkie pola są wymagane' }); } if (password.length < 6) { return res.status(400).json({ error: 'Hasło musi mieć co najmniej 6 znaków' }); } const existingUser = wait User.findOne({ $or: {[ email }, { username }] }); if (existingUser) { return res.status(400).json({ error: 'Nazwa użytkownika lub adres e-mail już istnieje' }); } const user = new User({ username, email, hasło }); wait user.save(); res.status(201).json({ message: 'Użytkownik został pomyślnie utworzony' }); } catch (error) { console.error('Błąd rejestracji:', error); res.status(500).json({ error: 'Rejestracja nie powiodła się' }); } }); // Logowanie użytkownika app.post('/api/login', async (req, res) => { try { const { nazwa_użytkownika, hasło } = req.body; const user = wait User.findOne({ $or: {[ nazwa_użytkownika }, { email: nazwa_użytkownika }] }); if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ błąd: 'Nieprawidłowe dane uwierzytelniające' }); } const token = jwt.sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ token, user: { nazwa_użytkownika: user.username, email: user.email } }); } catch (error) { console.error('Błąd logowania:', error); res.status(500).json({ error: 'Logowanie nieudane' }); } }); // Pobierz profil użytkownika app.get('/api/profile', auth, async (req, res) => { try { req.user.updateStats(); wait req.user.save(); res.json(req.user); } catch (error) { res.status(500).json({ error: 'Nie udało się załadować profilu' }); } }); // Aplikacja do generowania spersonalizowanych playlist.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Powiedz mi, jak się czujesz!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = wait playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // Zapisz w historii użytkownika req.user.moodHistory.push({ text, detectMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, playlistGenerated: playlist.map(track => ({ trackName: track.name, artist: track.artist, spotifyId: track.id })) }); req.user.updateStats(); wait req.user.save(); res.json({ moodAnalysis, playlist, personalizedMessage: `Na podstawie Twojej historii dostosowałem tę playlistę specjalnie do Twojego ${moodAnalysis.mood} nastroju!` }); } catch (error) { console.error('Błąd spersonalizowanej playlisty:', error); res.status(500).json({ error: 'Nie udało się wygenerować spersonalizowanej playlisty. Spróbuj ponownie.' }); } }); // Śledź opinie app.post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, like } = req.body; res.json({ message: 'Opinia została odebrana! Ulepszymy przyszłe rekomendacje.' }); } catch (error) { console.error('Błąd opinii:', error); res.status(500).json({ error: 'Nie udało się przetworzyć opinii' }); } }); app.listen(PORT, () => { console.log(`🚀 Interfejs API do czytania w myślach muzyki działający na http://localhost:${PORT}`); console.log('🧠 Gotowy do analizowania nastrojów i generowania list odtwarzania!'); });

Co teraz powinieneś umieć

1. Użytkownicy anonimowi (oryginalna funkcjonalność)

Odwiedź swoją witrynę bez logowania
Twórz playlisty, korzystając z istniejącej analizy nastroju
Otrzymuj rekomendacje muzyczne na podstawie emocji

2. Zarejestrowani użytkownicy (nowe funkcje)

Utwórz konto i zaloguj się
Generuj spersonalizowane playlisty, które z czasem stają się coraz lepsze
Przeglądaj historię nastroju i osobiste analizy
Oznaczaj utwory jako lubiane/nielubiane, aby wyszkolić sztuczną inteligencję
Przeglądaj statystyki, takie jak ulubiony nastrój, łączna liczba playlist itp.

Przewodnik po testach krok po kroku

Test 1: Sprawdź, czy serwer się uruchamia

node server.js

Powinieneś zobaczyć:

🔑 Próba uwierzytelnienia Spotify... 🎵 Spotify nawiązało połączenie! 🔗 MongoDB nawiązało połączenie... ✅ MongoDB nawiązało połączenie! 🚀 Interfejs API do czytania w myślach działający na http://localhost:3000 🧠 Gotowy do analizy nastroju i generowania playlist!

Test 2: Odwiedź swoją witrynę

Przejdź do: http://localhost:3000

Co powinieneś zobaczyć:

Formularz logowania z prośbą o podanie nazwy użytkownika i hasła
Link „Nie masz konta? Zarejestruj się”

Test 3: Utwórz swoje pierwsze konto

Kliknij: „Nie masz konta? Zarejestruj się”
Wypełnij:
- Nazwa użytkownika: testuser
- E-mail: test@example.com
- Hasło: password123
Kliknij: „Utwórz konto”
Oczekiwany wynik: „Konto zostało utworzone pomyślnie! Zaloguj się.”

Test 4: Zaloguj się do swojego pulpitu nawigacyjnego

Użyj właśnie utworzonych danych logowania
Kliknij: „Zaloguj się”
Powinieneś zobaczyć:
- Wiadomość powitalną z Twoją nazwą użytkownika
- Karty statystyk pokazujące 0 playlist, brak ulubionego nastroju
- Pole tekstowe z pytaniem „Jak się teraz czujesz?”

Test 5: Wygeneruj swój pierwszy spersonalizowany Lista odtwarzania

Wpisz coś takiego: „Jestem niesamowicie podekscytowany moim nowym projektem!”
Kliknij: „Wygeneruj moją idealną listę odtwarzania”
Powinieneś zobaczyć:
- Wykryty nastrój (prawdopodobnie „energetyczny” lub „szczęśliwy”)
- Listę utworów z okładkami albumów
- Podgląd odtwarzaczy audio (jeśli dostępne)
- Przyciski kciuka w górę/w dół dla każdego utworu

Test 6: Przetestuj system uczenia się

Kliknij kciuk w górę 👍 przy utworach, które lubisz
Kliknij kciuk w dół 👎 przy utworach, których nie lubisz
Oczekiwane: Alerty o treści „Dzięki! Poleć więcej takich utworów"

Test 7: Sprawdź aktualizację statystyk

Odśwież stronę lub wygeneruj inną playlistę
Twoje statystyki powinny teraz pokazywać:
- Łączna liczba playlist: 1 (lub więcej)
- Ulubiony nastrój: dowolny wykryty nastrój
- Powinny zacząć pojawiać się inne statystyki

Testowanie różnych scenariuszy

Wypróbuj różne nastroje:

„Właśnie zerwałem z dziewczyną i pada deszcz” (powinno zostać wykryte: smutny)
„Jestem nakręcony na trening!” (powinien wykryć: energiczny)
„Chcę się po prostu zrelaksować i pouczyć w ciszy” (powinien wykryć: wyluzowany)
„Mam romantyczny nastrój na tę randkę” (powinien wykryć: romantycznie)

Testowe przypadki skrajne:

„” (puste — powinno wyświetlić błąd)
„losowy tekst asdf” (domyślnie powinien być neutralny/wyluzowany)
„Jestem BARDZO podekscytowany!!!” (powinno wykrywać wyższy poziom pewności)

Typowe problemy i szybkie rozwiązania

❌ „Połączenie z MongoDB nie powiodło się”

Sprawdź: Czy plik .env jest poprawnie skonfigurowany z ciągiem połączenia MongoDB?

# Uruchom to, aby przetestować połączenie z bazą danych node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Set ✅' : 'Missing ❌');"

❌ „Połączenie ze Spotify nie powiodło się”

Sprawdź: Czy klucze API Spotify znajdują się w pliku .env?

# Uruchom to, aby sprawdzić dane uwierzytelniające Spotify node -e "require('dotenv').config(); console.log('Identyfikator klienta Spotify:', process.env.SPOTIFY_CLIENT_ID ? 'Set ✅' : 'Missing ❌');"

❌ Logowanie/Rejestracja nie działa

Sprawdź: Czy widzisz jakieś komunikaty o błędach w konsoli przeglądarki?

Naciśnij F12 → karta Konsola
Poszukaj czerwonych komunikatów o błędach

❌ Strona wyświetla stary interfejs

Rozwiązanie: Odśwież stronę na stałe

Naciśnij Ctrl+Shift+R (Windows/Linux)
Naciśnij Cmd+Shift+R (Mac)

Co powinno działać, a co jest nadal podstawowe

✅ Powinno działać teraz:

Rejestracja użytkownika i logowanie
Podstawowe wykrywanie nastroju i generowanie playlist
Zapisywanie historii nastroju w bazie danych
Prosta informacja zwrotna typu „lubię/nie lubię”
Śledzenie statystyk (łączna liczba playlist, ulubiony nastrój)

🚧 Nadal podstawowa (zaawansowane funkcje na później):

Złożone uczenie maszynowe na podstawie opinii użytkowników
Funkcje społecznościowe i udostępnianie playlist
Zaawansowana analityka i wzorce nastroju
Interfejs aplikacji mobilnej

Następne kroki po testowaniu

Gdy wszystko działa:

Wypróbuj z różnymi użytkownikami — utwórz wiele kont, aby zobaczyć, jak różni się personalizacja
Wygeneruj wiele playlist — obserwuj, jak ewoluują Twoje statystyki i preferencje
Przekaż opinię na temat utworów — zobacz, jak system uczy się Twojego gustu
Sprawdź swój panel MongoDB Atlas — powinien zobaczyć zapisywane dane

Wniosek

Właśnie stworzyłeś coś niezwykłego – sztuczną inteligencję, która nie tylko rozumie ludzkie emocje, ale także uczy się i dostosowuje do indywidualnych preferencji z czasem. Twoje API do czytania w myślach ma teraz pamięć, osobowość i zdolność do rozwoju wraz z użytkownikami.

Połączenie wykrywania nastroju, uczenia się użytkownika i spersonalizowanych rekomendacji tworzy doświadczenie, które staje się coraz bardziej magiczne z każdą interakcją. Podróż każdego użytkownika staje się wyjątkowa, budując osobistą ścieżkę dźwiękową do jego życia emocjonalnego.

Twoje API zapamiętuje teraz każdy nastrój, uczy się z każdej interakcji i buduje kompleksowe zrozumienie preferencji muzycznych każdego użytkownika. To fundament prawdziwie spersonalizowanych doświadczeń AI.

Co dalej?

Gotowy, aby pójść jeszcze dalej? Oto kilka ekscytujących kierunków:

Zaawansowana analityka: Dodaj rozpoznawanie wzorców nastroju i predykcyjne rekomendacje
Funkcje społecznościowe: Pozwól użytkownikom udostępniać playlisty i odkrywać gusta muzyczne znajomych
Aplikacja mobilna: Twórz aplikacje React Native lub Flutter na iOS/Android
Integracja głosowa: Dodaj funkcję zamiany mowy na tekst, aby bez użycia rąk określać nastrój
Uczenie maszynowe: Wdrażaj filtrowanie grupowe, aby uzyskać jeszcze lepsze rekomendacje
Wdrożenie: Wdrażaj w AWS/Vercel z odpowiednimi zmiennymi środowiskowymi

Kontynuuj eksperymentowanie i tworzenie — przyszłość spersonalizowanych doświadczeń AI jest w Twoich rękach!

Gotowy na kolejne wyzwanie? Bądź na bieżąco z naszym nadchodzącym samouczkiem na temat dodawania funkcji społecznościowych i filtrowania grupowego w celu tworzenia muzyki sieć odkryć, która łączy ludzi poprzez wspólne doświadczenia emocjonalne.