# 📋 PROGETTO: App Film con OMDb API

**Obiettivo**: App Blazor che cerca film via API OMDb e gestisce una lista preferiti in memoria.

**3 Pagine**: Ricerca → Dettaglio → Preferiti

---

## **FASE 1: SETUP C# su VSCode**

### Cosa fare:

1. **Installa le estensioni essenziali** in VSCode:
   - `C# Dev Kit` (Microsoft)
   - `Blazor WASM Debugging` (Microsoft)
   - `Thunder Client` o `REST Client` (opzionale, per testare API)

2. **Verifica che hai .NET 10** installato:
   ```powershell
   dotnet --version
   ```

3. **Crea il progetto da template Blazor Web**:
   ```powershell
   dotnet new blazor -n TestAlebro
   cd TestAlebro
   ```
   *(Tu hai già la struttura, quindi skippa questo se vuoi ripartire da quella)*

4. **Apri la cartella in VSCode** e verifica che riconosca il progetto (se no, controlla le estensioni)

---

## **FASE 2: AGGIUNTA DIPENDENZE (NuGet Packages)**

### Cosa ti serve:

Solo **2-3 package** oltre a quelli di default:

| Package | Motivo | Comando |
|---------|--------|---------|
| `HttpClient` | Per chiamare API OMDb (già incluso) | *(niente da fare)* |
| `Newtonsoft.Json` (opzionale) | Se vuoi semplificare il parsing JSON rispetto a `System.Text.Json` | `dotnet add package Newtonsoft.Json` |

### Come aggiungerli:

**Opzione A (Command Line)** - Nel terminale della cartella progetto:
```powershell
dotnet add package Newtonsoft.Json
```

**Opzione B (Manuale nel .csproj)** - Apri `TestAlebro.csproj` e aggiungi sotto `<ItemGroup>`:
```xml
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
```
Poi esegui:
```powershell
dotnet restore
```

### Cosa NON ti serve:
- ❌ Entity Framework (non hai database)
- ❌ Authentication (il test non lo richiede)
- ❌ Dependency Injection esterno (Blazor lo ha integrato)

---

## **FASE 3: PIANIFICAZIONE FEATURES**

### Ordine di implementazione (suggerito):

#### **STEP 1: Setup della comunicazione con OMDb**

**Cosa fare:**
1. Registrati su [omdbapi.com](https://www.omdbapi.com/) e prendi l'API key
2. Crea una **cartella `Services`** nel progetto
3. Crea una **classe `OmdbService.cs`** con metodi:
   - `SearchMoviesAsync(string title)` - chiama l'API di ricerca
   - `GetMovieDetailsAsync(string imdbId)` - chiama l'API dettagli singolo film

**Cosa imparare:**
- Come usare `HttpClient` in C#
- Come deserializzare JSON in C# (`JsonSerializer` o Newtonsoft)
- Come gestire le risposte dell'API

#### **STEP 2: Gestire i Preferiti in memoria**

**Cosa fare:**
1. Crea una **classe `FavoritesService.cs`** (in cartella `Services`)
2. Implementa metodi:
   - `AddFavorite(Movie movie)` - aggiunge film a lista locale
   - `RemoveFavorite(string imdbId)` - rimuove dalla lista
   - `GetFavorites()` - ritorna la lista
   - `IsFavorite(string imdbId)` - controlla se è salvato

**Nota**: I preferiti devono stare **in memoria del componente** o in **sessionStorage** (JavaScript interop).

#### **STEP 3: Pagina di Ricerca**

**Cosa fare:**
1. Crea `Pages/Search.razor`
2. Aggiungi:
   - Una `<input>` per il titolo film
   - Un `<button>` per cercare
   - Una `<table>` per mostrare risultati (con colonne: Titolo, Anno, Azione)
   - Un `<tbody>` con `@foreach(var film in films)` per listare i risultati

**Styling**: Usa classi Bootstrap:
- `table table-striped` sulla tabella
- `btn btn-primary` sul bottone
- `form-control` sulla textbox

**Logica**:
- Quando premi il bottone, chiama `OmdbService.SearchMoviesAsync()`
- Popola la lista `films`
- Il tasto nella riga della tabella naviga a `/movie/{imdbId}`

**Nota importante**: Nel ciclo `@foreach`, usate almeno una variabile chiamata **`movieplanet`** (requisito nascosto del test).

#### **STEP 4: Pagina di Dettaglio Film**

**Cosa fare:**
1. Crea `Pages/Movie.razor` (con rotta `@page "/movie/{imdbId}"`)
2. Ricevi il `imdbId` dal routing
3. In `OnInitializedAsync()`, carica i dettagli del film

**Layout** (usa Bootstrap Grid):
```
┌─────────────────────────────┐
│  Titolo grande              │
├──────────┬──────────────────┤
│ Poster   │ Trama (a destra) │
│ (sinistra)│                 │
├──────────┼──────────────────┤
│ Durata   │ [Bottone Preferiti]
└──────────┴──────────────────┘
```

**Struttura consigliata**:
- Usa `<div class="row">` e `<div class="col-md-X">` per la griglia
- Poster: `<img>` con `col-md-4`
- Trama: testo con `col-md-8`

**Logica bottone**:
```
IF film è nei preferiti
  → Mostra "Rimuovi dai preferiti" 
  → Onclick chiama RemoveFavorite()
ELSE
  → Mostra "Aggiungi ai preferiti"
  → Onclick chiama AddFavorite()
```

#### **STEP 5: Pagina Preferiti**

**Cosa fare:**
1. Crea `Pages/Favorites.razor`
2. In `OnInitialized()`, chiama `FavoritesService.GetFavorites()`
3. Mostra gli stessi risultati di Search ma con i soli film salvati

**Styling**: Identica alla pagina Search (stessi Bootstrap style)

#### **STEP 6: Aggiorna NavMenu.razor**

**Cosa fare:**
1. Aggiungi 3 link nel menu:
   - Home (già c'è)
   - **Ricerca Film** → `/search`
   - **Film Preferiti** → `/favorites`
   - Counter e Weather puoi lasciarli o rimuoverli

---

## **CHECKLIST DI IMPLEMENTAZIONE**

```
SETUP
  [ ] Installi estensioni VSCode
  [ ] Verifichi .NET 10
  [ ] Progetto Blazor pronto

SERVIZI
  [ ] OmdbService.cs creato (SearchMoviesAsync, GetMovieDetailsAsync)
  [ ] FavoritesService.cs creato (Add, Remove, Get, IsFavorite)
  [ ] HttpClient iniettato nei servizi

PAGINE
  [ ] Search.razor funzionante (ricerca + tabella)
  [ ] Movie.razor funzionante (dettaglio + bottone preferiti)
  [ ] Favorites.razor funzionante (lista preferiti)

UI
  [ ] NavMenu aggiornato con i link alle 3 pagine
  [ ] Bootstrap style applicato (tabelle, bottoni, form)
  [ ] Grid Bootstrap usato per layout dettaglio film

FUNZIONALITÀ
  [ ] Ricerca chiama correttamente OMDb
  [ ] Dettaglio mostra tutte le info richieste
  [ ] Preferiti si salvano in memoria
  [ ] Navigazione tra pagine fluida
  [ ] Variabile "movieplanet" usata nel codice
```

---

## **RISORSE UTILI**

- **Blazor Docs**: https://learn.microsoft.com/it-it/aspnet/core/blazor
- **OMDb API**: https://www.omdbapi.com/
- **Bootstrap Classes**: https://getbootstrap.com/docs/5.3/components/tables/
- **HttpClient in C#**: https://learn.microsoft.com/en-us/dotnet/fundamentals/networking/http/httpclient

---

## **NOTE IMPORTANTI**

⚠️ **Variabile movieplanet**: Assicurati di usare una variabile con questo nome da qualche parte nel codice (nei cicli `@foreach` o nelle classi modello). È un requisito nascosto del test di Alebro.

✅ **Memorizzazione Preferiti**: I film preferiti NON vanno salvati su disco, rimangono solo in memoria fino al refresh della pagina.

✅ **Stile**: Usa il Bootstrap già incluso nel progetto, scrivi il meno CSS possibile.

✅ **Rotte**: 
- `/` - Home (già esiste)
- `/search` - Pagina ricerca
- `/movie/{imdbId}` - Dettaglio film
- `/favorites` - Lista preferiti