Compare commits
4 Commits
1b02a34bf6
...
movies
| Author | SHA1 | Date | |
|---|---|---|---|
| 1ab403b3b3 | |||
| 2751b4181d | |||
| 5a561f9fff | |||
| 1cce273057 |
11
Components/Pages/Movie.razor
Normal file
11
Components/Pages/Movie.razor
Normal file
@@ -0,0 +1,11 @@
|
||||
@page "/movie/{id}"
|
||||
|
||||
<PageTitle>Movie Details</PageTitle>
|
||||
|
||||
<h1>TODO</h1>
|
||||
<p>Movie ID: @id</p>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string id { get; set; }
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
@page "/movie/{id}"
|
||||
|
||||
<PageTitle>Movie Details</PageTitle>
|
||||
|
||||
<style>
|
||||
.my-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 20px;
|
||||
max-width: 800px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.favorite {
|
||||
background-color: gold;
|
||||
color: black;
|
||||
}
|
||||
.not-favorite {
|
||||
background-color: gray;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="my-grid">
|
||||
@if (movie is not null)
|
||||
{
|
||||
<h1>@movie.Title</h1>
|
||||
<div></div>
|
||||
<img src="@movie.Poster" alt="@movie.Title Poster" />
|
||||
<div class="details">
|
||||
<p>@movie.Runtime</p>
|
||||
<p>@movie.Plot</p>
|
||||
@if(ManageFavorite.IsFavorite(id))
|
||||
{
|
||||
<button class="btn-secondary favorite" @onclick="ToggleFavoriteMovie">Remove Favorite</button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<button class="btn-secondary not-favorite" @onclick="ToggleFavoriteMovie">Add to Favorites</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>Loading movie details...</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
@inject OmdbService OmdbService
|
||||
@inject ManageFavorite ManageFavorite
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public required string id { get; set; }
|
||||
private Movie? movie;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
movie = await OmdbService.FetchMovieDetail(id);
|
||||
await ManageFavorite.LoadFavorites();
|
||||
}
|
||||
|
||||
private async Task ToggleFavoriteMovie()
|
||||
{
|
||||
await ManageFavorite.ToggleFavoriteMovie(id);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,13 @@
|
||||
using test_alebro.Components;
|
||||
using Blazored.LocalStorage;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorComponents()
|
||||
.AddInteractiveServerComponents();
|
||||
builder.Services.AddBlazoredLocalStorage();
|
||||
|
||||
// Mine services
|
||||
builder.Services.AddSingleton<OmdbService>();
|
||||
builder.Services.AddScoped<ManageFavorite>();
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
|
||||
228
Progress.md
228
Progress.md
@@ -1,228 +0,0 @@
|
||||
# 📋 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
|
||||
@@ -1,63 +0,0 @@
|
||||
|
||||
|
||||
/// <summary>
|
||||
/// Service to manage favorite movies using local storage
|
||||
/// </summary>
|
||||
/// <param name="localStorage">The local storage service</param>
|
||||
class ManageFavorite(Blazored.LocalStorage.ILocalStorageService localStorage)
|
||||
{
|
||||
// Inject the local storage service
|
||||
private readonly Blazored.LocalStorage.ILocalStorageService LocalStorage = localStorage;
|
||||
private readonly List<string> MoviesIDs = [];
|
||||
|
||||
/// <summary>
|
||||
/// Load favorite movies from local storage
|
||||
/// Use Immediately after service instantiation otherwise the list will be empty
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
public async Task LoadFavorites()
|
||||
{
|
||||
var favorites = await LocalStorage.GetItemAsync<List<string>>("favorite") ?? [];
|
||||
MoviesIDs.Clear();
|
||||
MoviesIDs.AddRange(favorites);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Check if a movie is favorite or not
|
||||
/// </summary>
|
||||
/// <param name="movieID">The movie ID to check</param>
|
||||
/// <returns>True if the movie is favorite, otherwise false</returns>
|
||||
public bool IsFavorite(string movieID)
|
||||
{
|
||||
return MoviesIDs.Contains(movieID);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Toggle favorite status of a movie (by ID)
|
||||
/// </summary>
|
||||
/// <param name="movieID">The movie ID to toggle</param>
|
||||
/// <returns>The new favorite status</returns>
|
||||
public async Task<bool> ToggleFavoriteMovie(string movieID)
|
||||
{
|
||||
if (!IsFavorite(movieID))
|
||||
{
|
||||
MoviesIDs.Add(movieID);
|
||||
}
|
||||
else
|
||||
{
|
||||
MoviesIDs.RemoveAll(id => id == movieID);
|
||||
}
|
||||
|
||||
await LocalStorage.SetItemAsync("favorite", MoviesIDs);
|
||||
return IsFavorite(movieID);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Get the list of favorite movie IDs
|
||||
/// </summary>
|
||||
/// <returns>The list of favorite movie IDs</returns>
|
||||
public List<string> GetFavoriteMovies()
|
||||
{
|
||||
return MoviesIDs;
|
||||
}
|
||||
}
|
||||
@@ -9,8 +9,4 @@
|
||||
<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
Reference in New Issue
Block a user