undo fix
This commit is contained in:
228
Progress.md
Normal file
228
Progress.md
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user