Salvare il punteggio su database con Node.js, Express e MongoDB

In questa lezione, porteremo il nostro Solitario delle 5 Carte ad un livello successivo aggiungendo la possibilità di salvare il punteggio su database, permettendo così di gestire una classifica e rendere l'esperienza più coinvolgente. Con un sistema di salvataggio permanente, i giocatori potranno confrontare i propri punteggi e quelli degli altri, aumentando la competitività. Utilizzeremo Node.js ed Express per creare il server che comunicherà con il nostro gioco e MongoDB come database per memorizzare i dati.

Obiettivi della lezione

1. Configurazione di un server con Node.js e Express: impostare il server per gestire le comunicazioni con il gioco.
2. Connessione a MongoDB: configurare MongoDB come database per salvare i punteggi.
3. Creazione di un'API REST per i punteggi: implementare un'API con le rotte necessarie per salvare e recuperare i punteggi.
4. Integrazione del frontend con il backend: collegare il nostro gioco React con il server per gestire la classifica.

Un server con Node.js ed Express per salvare il punteggio su database

Il primo passo consiste nel creare un server utilizzando Node.js e Express. Iniziamo dalla directory principale del progetto e creiamo una sottodirectory per organizzare il server, quindi installiamo le librerie necessarie:

mkdir server
cd server
npm init -y
npm install express mongoose cors body-parser

Nel file server.js, iniziamo configurando il server:

// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const PORT = 5000;
app.use(cors());
app.use(bodyParser.json());

La configurazione prevede l'uso di CORS che consente al server di comunicare con il frontend, e body-parser, che ci permette di leggere i dati JSON inviati con le richieste.

Connessione al database MongoDB

Per poter memorizzare i punteggi, connettiamoci ad un database MongoDB. Se non ne possiedi già uno, puoi anche crearne uno gratuitamente su MongoDB Atlas. Dopo aver configurato il database, prendi l'URI di connessione fornito da MongoDB Atlas e inseriscilo nel file server.js:

// server.js
mongoose.connect('your-mongodb-connection-string', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('Connected to MongoDB'))
.catch(error => console.error('Connection error:', error));

Ora creiamo un modello di dati per rappresentare la struttura del punteggio che verrà salvato nel database. Aggiungiamo una directory models e creiamo un file Score.js con il seguente contenuto:

// models/Score.js
const mongoose = require('mongoose');
const scoreSchema = new mongoose.Schema({
  playerName: String,
  points: Number,
  date: { type: Date, default: Date.now },
});
module.exports = mongoose.model('Score', scoreSchema);

Il modello Score definisce i campi playerName per il nome del giocatore, points per il punteggio e date per la data del salvataggio.

Creazione dell'API REST per i punteggi da salvare

Ora che abbiamo il server configurato e la connessione a MongoDB, definiamo le rotte API necessarie per gestire i punteggi. L'API avrà due rotte principali: una POST per salvare i punteggi e una GET per recuperare la classifica.

La rotta per salvare un nuovo punteggio

Questa rotta POST accetterà il nome del giocatore e il punteggio, creando un nuovo record nel database:

// server.js
const Score = require('./models/Score');
app.post('/api/scores', async (req, res) => {
  try {
    const { playerName, points } = req.body;
    const newScore = new Score({ playerName, points });
    await newScore.save();
    res.status(201).json({ message: 'Punteggio salvato!' });
  } catch (error) {
    res.status(500).json({ error: 'Errore nel salvataggio del punteggio' });
  }});

La rotta per recuperare i punteggi

La rotta GET restituirà i punteggi in ordine decrescente, così da permetterci di mostrare i punteggi più alti in cima alla classifica:

app.get('/api/scores', async (req, res) => {
  try {
    const scores = await Score.find().sort({ points: -1 }).limit(10); // Top 10 punteggi
    res.status(200).json(scores);
  } catch (error) {
    res.status(500).json({ error: 'Errore nel recupero dei punteggi' });
  }
});
app.listen(PORT, () => console.log("Server running on http://localhost:" + PORT));

In questo modo, il nostro server è pronto per ricevere e inviare i dati relativi ai punteggi del gioco.

Integrazione dell'API nel frontend

Ora torniamo al nostro progetto React e modifichiamo App.js per integrare la comunicazione con il server. Aggiungiamo una funzione per inviare il punteggio alla fine della partita.

La funzione per inviare il punteggio

In App.js creiamo la funzione submitScore per inviare il punteggio al server:

import axios from 'axios';
const submitScore = async (playerName, points) => {
  try {
    await axios.post('http://localhost:5000/api/scores', { playerName, points });
    alert('Punteggio salvato con successo!');
  } catch (error) {
    console.error('Errore nel salvataggio del punteggio:', error);
    alert('Errore nel salvataggio del punteggio.');
  }
};

Questa funzione utilizza Axios per inviare una richiesta POST con playerName e points al server Node.js.

La funzione per recuperare la classifica

Ora creiamo una funzione fetchScores per ottenere la classifica dal server. Possiamo richiamare questa funzione all'avvio dell'app, ad esempio:

const [scores, setScores] = useState([]);
const fetchScores = async () => {
  try {
    const response = await axios.get('http://localhost:5000/api/scores');
    setScores(response.data);
  } catch (error) {
    console.error('Errore nel recupero dei punteggi:', error);
  }
};
useEffect(() => {
  fetchScores();
}, []);

In App.js, importiamo e utilizziamo infine Scoreboard, passando scores come prop.

Miglioramenti e test

Con il server funzionante, possiamo testare tutte le funzionalità:

1. Avviamo il server con node server.js.
2. Avviamo l'app React e verifichiamo che il salvataggio e il recupero dei punteggi funzionino.

Possiamo aggiungere un campo per richiedere al giocatore di inserire il proprio nome alla fine della partita, usando un prompt o un form, per migliorare l’esperienza.

Conclusione

In questa lezione abbiamo aggiunto una funzione fondamentale al nostro Solitario delle 5 Carte, permettendo al giocatore di salvare e visualizzare il proprio punteggio. Abbiamo creato un server backend utilizzando Node.js ed Express, connesso ad un database MongoDB per gestire i dati dei punteggi. Inoltre, abbiamo implementato un'API REST per comunicare con il frontend React, creando una classifica visibile per i giocatori. Il gioco è diventato ora più interessante e competitivo.

Nella prossima lezione scopriremo delle funzionalità avanzate come l'autenticazione del giocatore, la visualizzazione delle statistiche personali e la gestione delle partite.