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:

Ricerca film - Usare fetch per cercare film per titolo
Mostrare i risultati in una tabella - con poster, titolo, anno, tipo e pulsante "Aggiungi ai Preferiti"
Salvare nei preferiti - Usare localStorage per salvare i film preferiti
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:

Vai sul sito OMDb: http://www.omdbapi.com/apikey.aspx
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.
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
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à!
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:

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

Come Iniziare

Ottieni la Chiave API: Segui i passaggi sopra per ottenere la tua chiave OMDb.
Crea la Repository su GitHub: Crea una nuova repository su github.com con il seguente nome: DatabaseFilm

Clona il Progetto

git clone https://github.com/[tuonome]/DatabaseFilm.git
cd DatabaseFilm

Copia i File: Copia tutti i file del progetto nella tua cartella:
- index.html
- preferiti.html
- style.css
- script.js
- preferiti.js
Inserisci la Chiave API: ricorda di inserire la tua chiave API in script.js prima di fare il commit iniziale, altrimenti non potrai prendere i dati dei film dall'API.
Commit Iniziale: Fai un commit iniziale con i file base e la chiave API configurata.

💡 Suggerimenti per l'Implementazione

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).
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.
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.
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).
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.

6.5 KiB

Raw Blame History

Database Film

🔑 Ottenere la Chiave API di OMDb

Passaggi per ottenere la chiave:

Come Funziona l'API OMDb

Come Iniziare

💡 Suggerimenti per l'Implementazione

🐛 Debug

La chiave API non funziona

I film non si vedono

localStorage non funziona

I preferiti non si vedono

Risorse Utili

6.5 KiB Raw Blame History

Database Film

🔑 Ottenere la Chiave API di OMDb

Passaggi per ottenere la chiave:

Come Funziona l'API OMDb

Come Iniziare

💡 Suggerimenti per l'Implementazione

🐛 Debug

La chiave API non funziona

I film non si vedono

localStorage non funziona

I preferiti non si vedono

Risorse Utili

6.5 KiB

Raw Blame History