Berack/test-alebro
0
0
Fork 0
Code Issues Pull Requests Activity
Files
1b02a34bf60708f98b4d93319edef34e7e220606
test-alebro/Progress.md
Berack96 1b02a34bf6 undo fix
2026-01-20 14:29:31 +01:00

7.0 KiB
Raw Blame History

📋 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:

    dotnet --version

  3. Crea il progetto da template Blazor Web:

    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:

dotnet add package Newtonsoft.Json

Opzione B (Manuale nel .csproj) - Apri TestAlebro.csproj e aggiungi sotto <ItemGroup>:

<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />

Poi esegui:

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

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 View Git Blame Copy Permalink