101 lines
4.8 KiB
Markdown
101 lines
4.8 KiB
Markdown
# Negozio Online
|
||
|
||
Questo è un progetto del corso Web.
|
||
Dovrai creare una pagina web che mostra prodotti recuperati da un'API (locale), con funzionalità di visualizzazione dettagli e filtri (opzionali).
|
||
|
||
Le funzionalità principali da implementare sono:
|
||
1. **Recuperare i prodotti da API** - Usare `fetch` per ottenere i dati da un'API locale
|
||
2. **Mostrare i prodotti in una tabella** - immagine, nome, prezzo, disponibilità
|
||
3. **Modale dei dettagli** - Quando clicchi su un prodotto mostra un modale (finestra popup) con tutte le info (immagine grande, nome, descrizione, prezzo, disponibilità) e un pulsante "×" per tornare alla tabella.
|
||
4. **Bonus - Filtri** - Aggiungere filtri di ricerca per nome e categoria (opzionale)
|
||
|
||
## Come Iniziare
|
||
|
||
Per iniziare il progetto ci sono due strade:
|
||
1. **Fork** del repository base. Lo trovate [qui](https://github.com/CerseoWeb/NegozioWeb) e potete fare un fork per avere una copia personale su cui lavorare.
|
||
2. **Creare una nuova repository** seguendo i passaggi qui sotto (consigliato per chi vuole fare tutto da zero e imparare il workflow completo di GitHub).
|
||
* **Nuova Repo**: Vai su [github.com](https://github.com) e crea una nuova repository (In alto un pulsante "+" e poi "New Repository"), con Repository Name: `NegozioWeb`, Description: "Progetto Negozio Online per corso Web", Public, Initialize with README (opzionale).
|
||
* **Aggiungi Files**: Dopo aver creato la repo, puoi aggiungere i file `index.html`, `style.css`, `script.js` e `README.md` direttamente da GitHub (usando il tasto "+" (vicino a "Code") → "Upload files". Nella pagina di upload, trascina i file o selezionali dal tuo computer, poi scrolla in basso e fai commit dei file con un messaggio chiaro come "Add initial project files".
|
||
|
||
A questo punto possiamo iniziare a lavorare localmente con VSCode e GitHub:
|
||
|
||
**Clona**: Copia l'URL della repo (es: `https://github.com/[tuonome]/NegozioWeb.git`) e clonala localmente usando Git o direttamente dentro VSCode.
|
||
|
||
**VSCode**: Da dentro vs code, apri la cartella del progetto se non già fatto.\
|
||
*NOTA*: Prima di iniziare, assicurati di aver fatto il login a GitHub da VSCode, in modo da poter fare commit e push direttamente dall'editor.
|
||
|
||
**Inizio Insieme**: Dopo questi passaggi, iniziamo a fare i primi passi assieme per vedere il workflow di Git e come strutturare la pagina:
|
||
```
|
||
🎯 Colleghiamo i vari files
|
||
1. Collega il file CSS in index.html
|
||
2. Collega il file JS in index.html
|
||
3. Creiamo un div con class "container" che conterrà tutta la pagina
|
||
→ commit: "HTML: aggiunta struttura tabella"
|
||
```
|
||
```
|
||
🎯 Creiamo l'HTML della tabella
|
||
1. Tabella vuota
|
||
2. Header della tabella con: Immagine, Nome, Prezzo, Disponibilità
|
||
3. Body con id "tabellaProdotti" (dove inseriremo i prodotti dinamicamente)
|
||
→ commit: "HTML: aggiunta struttura tabella"
|
||
```
|
||
```
|
||
🎯 Creiamo il modale
|
||
1. Div con class "modal nascosto" e id "modale"
|
||
2. Div interno con class "modal-content"
|
||
3. Contenuto del modal:
|
||
- H2 con id "prodottoNome"
|
||
- Immagine con id "prodottoImmagine"
|
||
- Paragrafo con id "prodottoDescrizione"
|
||
- Paragrafo con id "prodottoPrezzo"
|
||
- Paragrafo con id "prodottoDisponibilita"
|
||
- span con id "chiudi" e class "close" con dentro il simbolo "×"
|
||
→ commit: "HTML: aggiunta struttura modal"
|
||
→ push o sincronizzazione per salvare su GitHub
|
||
```
|
||
|
||
## 📝 Esercizio da Implementare
|
||
|
||
Dopo la sessione iniziale, si dovranno completare le funzionalità
|
||
indicate dentro il file `script.js` seguendo il workflow Git.
|
||
|
||
Dopo ogni funzionalità completata, si deve fare un commit con un messaggio chiaro e significativo.
|
||
Ogni tanto ricordarsi di fare push per evitare di perdere il lavoro!
|
||
|
||
Gli esercizi da fare si possono dividere in 3 punti principali:
|
||
|
||
1. Popolare la tabella con i dati dei prodotti
|
||
2. Implementare il modal dei dettagli
|
||
3. Bonus: Aggiungere filtri di ricerca e categoria
|
||
|
||
### Struttura dei Dati
|
||
L'API locale restituirà un array di oggetti, dove ogni oggetto rappresenta un prodotto.
|
||
Ogni prodotto dovrebbe avere questa struttura (esempio):
|
||
```json
|
||
{
|
||
"id": 1,
|
||
"nome": "Laptop MacBook Pro",
|
||
"descrizione": "Laptop professionale...",
|
||
"categoria": "Elettronica",
|
||
"prezzo": 2499.99,
|
||
"immagine": "https://...",
|
||
"disponibilita": true
|
||
}
|
||
```
|
||
|
||
### 💡 Suggerimenti per l'Implementazione
|
||
|
||
1. **Dividere il lavoro in funzioni piccole:**
|
||
- `function creaRigaProdotto(product)` → crea HTML di una riga
|
||
- `function mostraProdotti(products)` → riempie la tabella
|
||
- `function toggleModal()` → mostra/nascondi modal
|
||
|
||
2. **Usa gli event listener:**
|
||
- `click` su riga della tabella → mostra modal e riempi i dettagli
|
||
- `click` su bottone "Chiudi" → nascondi modal
|
||
|
||
3. **Testing:**
|
||
- Apri la console e verifica che il fetch funzioni (print dei dati come prova)
|
||
- Verifica che la tabella si popoli correttamente
|
||
- Clicca su una riga e verifica che appaia il modal
|