Lezione 14: Progetto — Ideazione e setup

Obiettivi

• Scegliere un’idea progetto realistica
• Progettare l’app su carta (wireframe)
• Impostare la struttura del progetto
• Iniziare l’implementazione

---

1. Idee progetto

Ecco 6 idee progetto di difficoltà crescente. Scegli quella che ti ispira di più:

🟢 Livello Base

Progetto	Cosa deve fare	Competenze
Todo List Avanzata	Task con priorità, categorie, scadenza	Componenti, JSON, liste
Rubrica Contatti	Aggiungi/cerca/elimina contatti	Form, liste, JSON

🟡 Livello Intermedio

Progetto	Cosa deve fare	Competenze
Diario Personale	Post con titolo, testo, data, immagini	JSON, FilePicker, navigazione
Gestore Spese	Transazioni, categorie, totale	Form, JSON, calcoli
App Meteo (migliorata)	Preferiti, cronologia, 7 giorni	API, navigazione, JSON

🔴 Livello Avanzato

Progetto	Cosa deve fare	Competenze
Flashcard Quiz	Carte, punteggio, timer, categorie	Timer, JSON, navigazione
Catalogo Prodotti	Lista, dettaglio, carrello, ricerca	API, navigazione, JSON

---

2. Come scegliere

Se hai…	Scegli…
Poca esperienza	Todo List o Rubrica
Voglia di sfida	Gestore Spese o Diario
Vuoi stupire	Flashcard Quiz o Catalogo
API ti appassiona	App Meteo migliorata

Regola: Meglio un progetto semplice fatto bene che uno complesso fatto a metà.

---

3. Wireframe — Progettare su carta

Prima di scrivere codice, disegna le schermate dell’app su carta o con uno strumento.

Cosa disegnare per ogni schermata

┌─────────────────────────┐
│  ← Titolo          ⚙️  │  ← AppBar
├─────────────────────────┤
│                         │
│  Contenuto della        │
│  schermata con          │
│  tutti gli elementi     │
│                         │
│  [Bottone]              │
│                         │
├─────────────────────────┤
│  [Tab1] [Tab2] [Tab3]   │  ← NavigationBar (se presente)
└─────────────────────────┘

Template wireframe (usa carta e penna)

Per ogni schermata, segna:

1. Titolo della schermata
2. Componenti presenti (text, button, lista, immagine…)
3. Dati mostrati e dati da inserire
4. Navigazione: dove porta ogni bottone?

Esempio: Wireframe Todo List

Schermata PRINCIPALE:
┌────────────────────────┐
│  ← Todo List      ➕   │
├────────────────────────┤
│  [📝 Nuovo task...]    │
│  [➕ Aggiungi]         │
│  ───────────────────── │
│  ☐ Comprare pane    🗑️ │
│  ☑️ Fare compiti   🗑️ │
│  ☐ Studiare Flet   🗑️ │
│  ───────────────────── │
│  Task: 3 completati: 1 │
└────────────────────────┘

Schermata DETTAGLIO (opzionale):
┌────────────────────────┐
│  ← Dettaglio Task      │
├────────────────────────┤
│  Titolo: Comprare pane │
│  Priorità: Alta        │
│  Categoria: Casa       │
│  Scadenza: 20/06/2026  │
│                        │
│  [Modifica] [Elimina]  │
└────────────────────────┘

---

4. Struttura del progetto

Organizza i file in modo ordinato:

progetto/
│
├── main.py          # File principale (lo esegui)
├── dati.json        # Dati salvati (creato automaticamente)
│
└── images/          # Immagini del progetto (se presenti)
    ├── logo.png
    └── ...

Template main.py iniziale

import flet as ft
import json
import os
import threading
import time
# Aggiungi qui altri import necessari

FILE_DATI = "dati.json"

def carica_dati():
    if os.path.exists(FILE_DATI):
        with open(FILE_DATI, "r", encoding="utf-8") as f:
            return json.load(f)
    return []

def salva_dati(dati):
    with open(FILE_DATI, "w", encoding="utf-8") as f:
        json.dump(dati, f, indent=2, ensure_ascii=False)

def main(page: ft.Page):
    page.title = "Il Mio Progetto"
    page.padding = 30
    page.theme_mode = ft.ThemeMode.LIGHT

    # Carica dati all'avvio
    dati = carica_dati()

    # --- QUI LA TUA APP ---
    page.add(
        ft.Text("Benvenuto!", size=24, weight="bold"),
    )

ft.app(target=main)

---

5. Checklist di pianificazione

Prima di iniziare a scrivere codice, completa questa checklist:

✅ Ideazione

• Ho scelto l’idea progetto
• So cosa fa l’app (descrivila in una frase)
• Ho identificato le 3-5 funzionalità principali

✅ Progettazione

• Ho disegnato tutte le schermate (almeno 2)
• Ho segnato la navigazione tra schermate
• So quali dati devo salvare (JSON)

✅ Setup

• Ho creato la cartella del progetto
• Ho creato main.py
• Ho copiato il template con carica/salva JSON
• L’app parte senza errori

---

6. Organizzazione del lavoro

Settimana 6 (12 ore totali progetto — ore 31-36)

Ora	Cosa fare
1-2	Scegliere idea, disegnare wireframe
3-4	Setup progetto, creare struttura base
5-6	Implementare schermata principale (o primo tab)
7-8	Implementare navigazione (se multi-screen)
9-10	Aggiungere funzionalità core (CRUD base)
11-12	Test e debug

Settimana 7 (12 ore totali progetto — ore 37-48)

Ora	Cosa fare
1-4	Completare funzionalità
5-6	Aggiungere persistenza JSON
7-8	UI rifinita (tema, colori, ombre)
9-10	Test, fix bug
11-12	Build APK + preparare presentazione

---

7. Suggerimenti per il successo

Iniziale semplice, migliora dopo

# ✅ VERSIONE 1: Funzionalità base
def aggiungi(e):
    lista.controls.append(ft.Text(input.value))
    page.update()

# ✅ VERSIONE 2: Con persistenza
def aggiungi(e):
    dati.append(input.value)
    salva_dati(dati)
    ricostruisci_lista()
    page.update()

# ✅ VERSIONE 3: Con stile
def aggiungi(e):
    dati.append({"testo": input.value, "fatto": False})
    salva_dati(dati)
    ricostruisci_lista()
    mostra_snackbar("✅ Aggiunto!")
    page.update()

Se ti blocchi

1. Torna agli esercizi delle lezioni precedenti
2. Cerca su Flet Docs
3. Chiedi al docente
4. Semplifica: togli una funzionalità e concentrati sul resto

---

8. Esercizio

🎯 Compito: Completare la pianificazione

Entro la fine di questa lezione devi avere:

1. Nome del progetto (es. “TaskMaster”, “SpendWise”, “MyDiary”)
2. Una frase che descrive cosa fa l’app
3. Wireframe di almeno 2 schermate (foto del disegno)
4. Elenco funzionalità (almeno 3)
5. Struttura dati JSON (come saranno organizzati i dati?)
6. Template progetto funzionante con main.py

Consegna

• Cartella del progetto in progetti/nome_progetto/
• File main.py con template base
• Wireframe (foto nella cartella o su carta da mostrare)