From 1b02a34bf60708f98b4d93319edef34e7e220606 Mon Sep 17 00:00:00 2001
From: Berack96 <giacomobertolazzi7@gmail.com>
Date: Tue, 20 Jan 2026 14:29:31 +0100
Subject: [PATCH] undo fix

---
 Progress.md | 228 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 Progress.md

diff --git a/Progress.md b/Progress.md
new file mode 100644
index 0000000..80e3b17
--- /dev/null
+++ b/Progress.md
@@ -0,0 +1,228 @@
+# 📋 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