esercizi-web/javascript/12_Progetti/film/README.md

Database Film

Questo è un progetto del corso JavaScript. Dovrai creare una pagina web per cercare film usando l'API OMDb e salvarli nei preferiti con localStorage.

Le funzionalità principali da implementare sono:

1. Ricerca film - Usare fetch per cercare film per titolo
2. Mostrare i risultati in una tabella - con poster, titolo, anno, tipo e pulsante "Aggiungi ai Preferiti"
3. Salvare nei preferiti - Usare localStorage per salvare i film preferiti
4. Gestire i preferiti - Disabilitare il pulsante se il film è già nei preferiti, e creare una pagina separata per visualizzare e rimuovere i preferiti

🔑 Ottenere la Chiave API di OMDb

Prima di iniziare, devi ottenere una chiave API gratuita da OMDb.

Passaggi per ottenere la chiave:

1. Vai sul sito OMDb: http://www.omdbapi.com/apikey.aspx

2. Scegli il piano FREE (Gratis): seleziona "FREE! (1,000 daily limit)" che ti permette di fare 1000 richieste al giorno senza pagare. Non è necessario inserire i dati della carta di credito.

3. Compila il Form con dei dati:

   • Email Address: il tuo indirizzo email (DEVE ESSERE VALIDO, riceverai un'email)
   • First Name: il tuo nome (puoi mettere un nome fittizio se vuoi)
   • Last Name: il tuo cognome (anche questo può essere fittizio)
   • Use: metti "Learning JavaScript" o qualcosa di simile
   • Premi il pulsante "Submit" per inviare la richiesta

4. Controlla la Email: riceverai un'email da OMDb con il soggetto "OMDb API - Free API Key". Se non la vedi, controlla la cartella spam o posta indesiderata. Qui troverai un link per attivare la tua chiave API e la tua chiave API stessa. Nota che se non attivi la chiave cliccando sul link, non funzionerà!

5. Copia la Chiave API: dopo aver cliccato sul link di attivazione, vedrai la tua chiave API (è una stringa alfanumerica tipo abc12345). Copia questa chiave e incollala nel file script.js alla riga dove c'è la costante API_KEY.

   const API_KEY = 'abc12345'; // <-- Sostituisci con la tua chiave
   

Come Funziona l'API OMDb

URL Base

http://www.omdbapi.com/

Cercare Film per Titolo

http://www.omdbapi.com/?apikey=TUA_CHIAVE&s=matrix

Parametri:

• apikey: la tua chiave API
• s: termine di ricerca (search)

Esempio di Risposta:

{
  "Search": [
    {
      "Title": "The Matrix",
      "Year": "1999",
      "imdbID": "tt0133093",
      "Type": "movie",
      "Poster": "https://..."
    },
    {
      "Title": "The Matrix Reloaded",
      "Year": "2003",
      "imdbID": "tt0234215",
      "Type": "movie",
      "Poster": "https://..."
    }
  ],
  "totalResults": "12",
  "Response": "True"
}

Cosa Fare nel Codice:

1. Costruisci l'URL con la chiave API e il termine di ricerca
2. Fai un fetch() all'URL
3. Usa l'array Search per mostrare i film

Come Iniziare

Per iniziare il progetto ci sono due strade:

1. Fork del repository base. Lo trovate qui e potete fare un fork per avere una copia personale su cui lavorare.

2. Creare una nuova repository seguendo i passaggi qui sotto (consigliato per chi vuole fare tutto da zero e imparare il workflow completo di GitHub).

   • Nuova Repo: Vai su github.com e crea una nuova repository (In alto un pulsante "+" e poi "New Repository"), con Repository Name: DatabaseFilm, Description: "Progetto Database Film per corso Web", Public, Initialize with README (opzionale).
   • Aggiungi Files: Dopo aver creato la repo, puoi aggiungere i file index.html, style.css, script.js e README.md direttamente da GitHub (usando il tasto "+" (vicino a "Code") → "Upload files". Nella pagina di upload, trascina i file o selezionali dal tuo computer, poi scrolla in basso e fai commit dei file con un messaggio chiaro come "Add initial project files".

A questo punto possiamo iniziare a lavorare localmente con VSCode e GitHub:

Clona: Copia l'URL della repo (es: https://github.com/[tuonome]/DatabaseFilm.git) e clonala localmente usando Git o direttamente dentro VSCode.

VSCode: Da dentro vs code, apri la cartella del progetto se non già fatto.
NOTA: Prima di iniziare, assicurati di aver fatto il login a GitHub da VSCode, in modo da poter fare commit e push direttamente dall'editor.

Ottieni la Chiave API: Segui i passaggi sopra per ottenere la tua chiave OMDb (se non l'hai già fatto) e inseriscila in script.js prima di fare il commit iniziale.

💡 Suggerimenti per l'Implementazione

1. Usa fetch() per chiamare l'API: costruisci l'URL con la chiave API e il termine di ricerca, poi usa fetch() per ottenere i dati. Nella costruzione dell'URL, assicurati di includere tutti i parametri necessari. ATTENZIONE ai nomi delle proprietà che sono maiuscole negli oggetti restituiti dall'API (es. Title, Year, imdbID, Type, Poster).

2. Gestisci i Poster Mancanti: se il campo Poster è "N/A", mostra un'immagine di placeholder invece del poster del film. Puoi usare un'immagine generica come questa: https://via.placeholder.com/60x90?text=No+Poster.

3. Crea le Righe della Tabella: per ogni film nei risultati, crea una riga nella tabella con il poster, titolo, anno, tipo e un pulsante "Aggiungi ai Preferiti". Usa innerHTML per inserire i dati dinamicamente. Puoi anche aggiungere una classe CSS al pulsante per poterlo stilizzare e gestire più facilmente. Inoltre consiglio di spezzare la creazione della riga in una funzione separata rispetto alla creazione della tabella, in modo da mantenere il codice più organizzato.

4. Salvare nei Preferiti: quando l'utente clicca su "Aggiungi ai Preferiti", salva il film in un array di preferiti e poi salva questo array in localStorage usando JSON.stringify(). Assicurati di gestire i casi in cui localStorage è vuoto (devi inizializzare l'array) e di non aggiungere duplicati (controlla con l'imdbID).

5. Gestire i Preferiti: nella pagina preferiti.html, recupera i preferiti da localStorage usando JSON.parse(), e mostra la tabella dei preferiti. Aggiungi un pulsante "Rimuovi" per ogni film che, quando cliccato, rimuove il film dai preferiti e aggiorna la visualizzazione. Puoi usare array.splice() per rimuovere l'elemento dall'array dei preferiti in base all'indice, oppure array.filter() per creare un nuovo array senza il film da rimuovere.

🐛 Debug

La chiave API non funziona

• Hai attivato la chiave cliccando sul link nell'email?
• Hai copiato la chiave completa senza spazi?
• Hai sostituito 'TUA_CHIAVE_API_QUI' nel codice?

I film non si vedono

• Apri la Console (F12)
• Cerca errori di rete (tab Network)
• Verifica che l'URL sia corretto
• Testa l'URL direttamente nel browser

localStorage non funziona

• Controlla in DevTools → Application → Local Storage
• Verifica di usare JSON.stringify() quando salvi
• Verifica di usare JSON.parse() quando recuperi

I preferiti non si vedono

• Controlla che la chiave sia 'preferiti' in entrambi i file
• Verifica che caricaPreferiti() sia chiamata all'avvio
• Usa console.log() per vedere cosa c'è in localStorage

Risorse Utili

• OMDb API Documentation
• MDN - localStorage
• MDN - Fetch API
• MDN - Array Methods