added project blog

javascript/12_Progetti/blog/README.md

@@ -0,0 +1,190 @@
+# Blog Dashboard
+
+Questo è il progetto finale del corso JavaScript.
+Dovrai creare un mini-blog con **due pagine**: una per visualizzare i post e una per crearne di nuovi, usando l'API locale (`server-api`).
+
+## Funzionalità da implementare
+
+Le funzionalità sono divise in 3 fasi:
+
+### Fase 1 — Visualizzare i Post
+1. **Recuperare i post** — `GET /api/posts` per ottenere tutti i post
+2. **Recuperare gli utenti** — `GET /api/users` per mostrare il nome dell'autore accanto a ogni post
+3. **Mostrare i post in una tabella** — con autore, titolo, contenuto (troncato), likes, data
+
+### Fase 2 — Filtri
+4. **Ricerca per titolo** — un input per cercare post per titolo
+5. **Filtro per autore** — un dropdown per mostrare solo i post di un certo autore
+6. I filtri devono lavorare **insieme**
+
+### Fase 3 — Creare ed Eliminare
+7. **Pagina "Nuovo Post"** — Form con titolo, contenuto e autore (dropdown) + validazione
+8. **Creare un post** — `POST /api/posts` per salvare il nuovo post
+9. **Eliminare un post** — `DELETE /api/posts/:id` con conferma
+
+
+## Struttura del Progetto
+
+```
+blog/
+├── index.html      ← Pagina lista post (con filtri e pulsante elimina)
+├── index.js        ← JS per la pagina lista (GET + DELETE + filtri)
+├── nuovo.html      ← Pagina creazione nuovo post (form)
+├── nuovo.js        ← JS per la pagina creazione (GET utenti + POST)
+├── style.css       ← CSS condiviso tra le due pagine
+└── README.md       ← Questo file
+```
+
+
+## Come Iniziare
+
+### Prerequisiti
+1. Assicurati che il `server-api` sia in esecuzione: dalla cartella `server-api`, esegui `npm start`
+2. Oppure chiedi al docente di avviare il server
+3. Verifica che l'API risponda: apri `http://localhost:5000/api` o il link del docente nel browser
+
+### Setup del Progetto
+1. Crea una nuova repository `BlogDashboard` su GitHub
+2. Clona la repo e apri la cartella in VSCode
+3. Copia tutti i file del progetto nella repo
+4. Fai il primo commit: `"Setup iniziale progetto Blog Dashboard"`
+
+Oppure fai una fork del progetto già creato dal docente e clonalo, così avrai già tutto pronto e potrai concentrarti solo sul codice.
+
+### Workflow Git
+Dopo **ogni funzionalità**, fai un commit:
+```
+"Fase 1: caricamento e visualizzazione post in tabella"
+"Fase 1: aggiunto nome autore con join utenti"
+"Fase 2: aggiunto filtro ricerca per titolo"
+"Fase 2: aggiunto filtro dropdown per autore"
+"Fase 3: form creazione nuovo post con validazione"
+"Fase 3: implementata eliminazione post"
+```
+
+
+## API Reference
+
+### URL Base
+```
+http://localhost:5000/api
+```
+
+### Posts — `/api/posts`
+| Metodo | URL | Descrizione |
+|--------|-----|-------------|
+| `GET` | `/api/posts` | Tutti i post |
+| `POST` | `/api/posts` | Crea un nuovo post |
+| `DELETE` | `/api/posts/:id` | Elimina un post |
+
+**Struttura di un post:**
+```json
+{
+  "id": 1,
+  "userId": 3,
+  "titolo": "Titolo del Post",
+  "contenuto": "Il contenuto completo del post...",
+  "likes": 12,
+  "data": "2024-01-15"
+}
+```
+
+### Users — `/api/users`
+| Metodo | URL | Descrizione |
+|--------|-----|-------------|
+| `GET` | `/api/users` | Tutti gli utenti |
+
+**Struttura di un utente:**
+```json
+{
+  "id": 1,
+  "nome": "Mario",
+  "cognome": "Rossi",
+  "avatar": "https://ui-avatars.com/api/?name=Mario+Rossi&..."
+}
+```
+
+
+## Esempi di Codice
+
+### Fetch GET (leggere dati)
+```javascript
+const response = await fetch("http://localhost:5000/api/posts");
+const posts = await response.json();
+console.log(posts);  // array di oggetti post
+```
+
+### Fetch POST (creare un post)
+```javascript
+const nuovoPost = {
+  userId: 3,
+  titolo: "Il mio primo post",
+  contenuto: "Ciao mondo!",
+  likes: 0,
+  data: new Date().toISOString().split("T")[0]
+};
+
+const response = await fetch("http://localhost:5000/api/posts", {
+  method: "POST",
+  headers: { "Content-Type": "application/json" },
+  body: JSON.stringify(nuovoPost)
+});
+
+const postCreato = await response.json();
+```
+
+### Fetch DELETE (eliminare un post)
+```javascript
+const response = await fetch("http://localhost:5000/api/posts/1", {
+  method: "DELETE"
+});
+```
+
+### Trovare il nome dell'autore (join)
+```javascript
+const autore = utenti.find(u => u.id === post.userId);
+const nomeAutore = autore ? autore.nome + " " + autore.cognome : "Sconosciuto";
+```
+
+### Troncare il testo
+```javascript
+const testoCorto = post.contenuto.substring(0, 50) + "...";
+```
+
+### Filtrare un array
+```javascript
+const risultati = posts.filter(post => {
+  return post.titolo.toLowerCase().includes(testoCercato.toLowerCase());
+});
+```
+
+
+## 💡 Suggerimenti
+
+1. **Ordine di lavoro nella Fase 1**: prima carica gli utenti, poi i post. Ti servono gli utenti già pronti in memoria per poter mostrare il nome dell'autore quando crei le righe della tabella.
+
+2. **Variabili globali**: salva utenti e post in variabili `let` globali. Così puoi riusarli nelle funzioni di filtro senza ricaricarli.
+
+3. **Il dropdown autore (Fase 2)**: il `value` di una `<option>` è sempre una **stringa**. Ma `userId` nel post è un **numero**. Per confrontarli devi convertire uno dei due (es. `Number(dropdown.value)` oppure `post.userId.toString()`).
+
+4. **Validazione form (Fase 3)**: controlla i campi PRIMA di fare il fetch. Non mandare dati vuoti all'API.
+
+5. **Dopo la POST**: resetta il form con `form.reset()` e mostra un messaggio di conferma per far capire all'utente che il post è stato creato.
+
+
+## 🐛 Debug
+
+### I post non si vedono
+- Apri la Console (F12) e cerca errori
+- Prova l'URL nel browser: `http://localhost:5000/api/posts`
+- Controlla che il server sia avviato
+
+### Il nome autore non appare
+- Hai caricato gli utenti PRIMA dei post?
+- Controlla che `userId` del post corrisponda a un `id` nella lista utenti
+
+### La POST non funziona
+- Hai messo `method: "POST"`?
+- Hai l'header `"Content-Type": "application/json"`?
+- Hai usato `JSON.stringify()` nel body?
+- Controlla la tab **Network** in DevTools per vedere la richiesta