Tecnologie Informatiche per il Web, AA 2024/2025

Indicazioni generali

Vi proponiamo specifiche articolate su tre livelli progressivi di difficoltà.

  • Livello 1 (Applicazione Diretta e Adattamento)
    • Qui è richiesto di utilizzare strumenti e tecniche viste nelle lezioni, in modo simile a quanto visto. Ovviamente la dimensione o la complessità dell'applicazione potrebbe essere leggermente maggiore. L'obiettivo principale è dimostrare di saper adattare quanto appreso a un'applicazione "nuova".
  • Livello 2: (Uso Creativo e Approfondimento Tecnico)
    • Qui si richiede un passo avanti: utilizzare gli strumenti presentati in modo un po' più originale, "spremendosi le meningi" per risolvere problemi più articolati. Pensate, ad esempio, a query al database più complesse, alla progettazione di endpoint parametrici più strutturati, o a logiche di business più elaborate.
  • Livello 3: Esplorazione Autonoma e Innovazione
    • Questo è pensato per chi desidera spingersi oltre, richiedendo l'utilizzo di tecnologie o concetti non necessariamente trattati in dettaglio nelle slide. L'idea è di richiedere uno sforzo personale di ricerca, comprensione e implementazione (ad esempio, l'utilizzo di WebSockets per aggiornamenti della pagina in tempo reale, l'integrazione di API esterne, o l'esplorazione di nuovi paradigmi di sviluppo).
    • Nota importante: visto lo "spirito" del livello 3, se avete qualche idea interessante potete proporre una vostra estensione di livello 3, alternativa a quella della specifica. L'idea è che l'implementazione dell'estensione richieda/utilizzi uno strumento non trattato nella lezioni.

Criteri di Valutazione:

La valutazione del progetto terrà in considerazione i seguenti aspetti:

  1. Aderenza alle Specifiche: La capacità di realizzare le funzionalità richieste per il livello (o i livelli) affrontato.
  2. Motivazione delle Scelte Progettuali: La chiarezza e la logica con cui saprete giustificare le decisioni tecniche e architetturali adottate.
  3. Qualità del Risultato Finale:
    • Si valuterà l'usabilità generale dell'applicazione e la sua funzionalità.
    • Importante: Non sono richieste competenze specifiche di grafica o User Experience (UX) design. Tuttavia, cercheremo di valutare e valorizzare l'attenzione e la cura nel realizzare un'applicazione che risulti "gradevole" e intuitiva da utilizzare.

Corrispondenza Livelli e Valutazione:

  • Completando con successo il Livello 1, si potrà ambire a una valutazione massima di 24/30.
  • Affrontando e realizzando efficacemente anche il Livello 2, si potrà raggiungere la valutazione piena (30/30).
  • Chi punta al massimo risultato, inclusa la lode, è fortemente incoraggiato a cimentarsi con le sfide proposte dal Livello 3.

Proposte di Progetto

Indice dei Progetti

Servizio di Abbreviazione Link con Monitoraggio

Introduzione al Progetto:

I servizi di abbreviazione URL, come TinyURL o Bitly, sono strumenti web molto diffusi che trasformano indirizzi internet lunghi e complessi in link più corti, facili da ricordare, digitare e condividere, specialmente su piattaforme con limiti di caratteri (es. social media).

Questo progetto mira a costruire un servizio simile, con funzionalità crescenti attraverso tre livelli di complessità.

Livello 1: Generatore di Link Brevi e Contatore di Utilizzo

Descrizione Funzionale:

L'applicazione web deve permettere agli utenti di:

  • Registrarsi e accedere.
  • Sottoporre un URL lungo per ottenere una versione abbreviata.
  • Il sistema genera un URL breve univoco, associato all'utente.
  • L'URL breve reindirizza all'URL originale.
  • Il sistema traccia gli utilizzi (click) di ogni URL breve.
  • L'utente visualizza un elenco dei propri URL abbreviati con il conteggio dei click.

Esempio Indicativo:

Creazione:

  • Un utente registrato, Mario, inserisce l'URL lungo: https://it.wikipedia.org/wiki/Pagina_Molto_Lunga.
  • Il sistema genera l'URL breve: http://mio-short.com/AbC1.
  • Mario vede AbC1 nella sua lista di link, con 0 click.

Utilizzo e Tracciamento:

  • Un amico di Mario, Luigi, visita http://mio-short.com/AbC1.
  • Luigi viene reindirizzato a https://it.wikipedia.org/wiki/Pagina_Molto_Lunga.
  • Il sistema registra 1 click per AbC1.
  • Mario, controllando la sua lista, ora vede 1 click per AbC1.

Obiettivo Funzionale:

Realizzare un servizio web che gestisca utenti e consenta loro di creare URL abbreviati, che reindirizzino correttamente e per i quali venga conteggiato l'utilizzo.

Livello 2: Link Personalizzabili, a Scadenza, e Analisi Temporale dei Click

Descrizione Funzionale:

L'applicazione deve estendere le funzionalità del Livello 1 per offrire:

  • La possibilità per l'utente, durante la creazione di un nuovo link breve, di suggerire un codice personalizzato (es. PromoEstate) invece di utilizzare sempre quello generato automaticamente dal sistema.
  • Il sistema deve verificare la validità e l'unicità del codice suggerito. Se non idoneo o già in uso, l'utente deve essere informato e poter scegliere un'alternativa o optare per un codice generato dal sistema.
  • La capacità di impostare una data e ora di scadenza per un URL breve. Dopo tale momento, il link non deve più reindirizzare all'URL originale (potrebbe mostrare una pagina "Link Scaduto" o semplicemente non funzionare più).
  • Un tracciamento più dettagliato degli utilizzi di ogni link breve, registrando quando (data/ora) ogni utilizzo avviene.
  • Una visualizzazione dell'andamento degli utilizzi nel tempo per ciascun link. Ad esempio, l'utente dovrebbe poter vedere quanti utilizzi ha ricevuto un suo link ogni giorno negli ultimi sette giorni.

Esempio:

  • Un utente crea un link per un evento che termina il 31 dicembre, impostando quella data come scadenza. Fino al 31 dicembre il link funziona; dal 1° gennaio, chi lo visita riceve un messaggio di link scaduto.
  • L'utente, consultando i dettagli del suo link, può vedere non solo il totale degli utilizzi, ma anche una ripartizione giornaliera, come: "25/12: 30 utilizzi, 24/12: 45 utilizzi", ecc., per il periodo recente.

Obiettivo Funzionale:

Arricchire il servizio con opzioni di personalizzazione per gli URL brevi, introdurre la gestione della temporalità dei link e fornire agli utenti informazioni più granulari sull'attività dei loro link nel corso del tempo.

Livello 3: Dashboard Analitica con Aggiornamenti in Tempo Reale e Accesso via API

Descrizione Funzionale:

L'applicazione deve evolvere per includere:

  • Una dashboard analitica per l'utente che mostri i dati di utilizzo dei propri link (come il conteggio totale e l'analisi temporale del Livello 2) e che si aggiorni in tempo reale. Ad esempio, se un link riceve un nuovo click mentre l'utente ha la dashboard aperta, il conteggio dei click e i grafici (se presenti) dovrebbero riflettere immediatamente questo cambiamento senza che l'utente debba ricaricare la pagina.
  • Tecnologia suggerita (non obbligatoria, ma indicativa della sfida): WebSockets
  • La generazione e visualizzazione di un QR Code per ogni link abbreviato. Gli utenti dovrebbero poter vedere e possibilmente scaricare il QR Code associato ai loro link.

Esempio di Interazione (Funzionale):

  • Un utente sta osservando la sua dashboard analitica. Un suo link popolare viene cliccato diverse volte in pochi secondi; l'utente vede il contatore dei click e i grafici associati aumentare dinamicamente senza alcuna sua azione.
  • Un'applicazione esterna, tramite l'API, crea un nuovo link breve per una campagna marketing, specificando che scadrà tra una settimana.
  • Dall'interfaccia web, l'utente può visualizzare e scaricare il QR Code per uno dei suoi link da inserire in una locandina.

Obiettivo Funzionale:

Migliorare drasticamente l'esperienza utente della dashboard rendendola dinamica e reattiva e arricchire le modalità di condivisione dei link.

Piattaforma di Scambio Token Digitali

Introduzione al Progetto:

Le piattaforme di gestione token digitali permettono la creazione, l'assegnazione e lo scambio di "gettoni" virtuali che possono rappresentare valore, diritti di accesso, oggetti da collezione o altro.

Il progetto mira a costruire una piattaforma web semplificata per la gestione e lo scambio di token tra utenti.

Livello 1: Gestione e Scambio di un Token Predefinito

Descrizione Funzionale:

L'applicazione web deve permettere agli utenti di:

  • Registrarsi al servizio e accedere successivamente.
  • Esiste un singolo tipo di token predefinito nel sistema (es. "CreditoBase" o "PuntoComunità").
  • Un ruolo "Amministratore" (potrebbe essere un utente specifico pre-configurato) ha la capacità di "coniare" (creare) nuove unità di questo token e assegnarle a utenti specifici.
  • Ogni utente può visualizzare il proprio saldo del token predefinito.
  • Gli utenti possono trasferire quantità del proprio token ad altri utenti registrati sulla piattaforma, specificando l'utente destinatario e la quantità da inviare. Il sistema deve verificare che l'utente mittente possieda una quantità sufficiente di token per il trasferimento.
  • Ogni utente può visualizzare uno storico delle proprie transazioni (token ricevuti e inviati).

Esempio Indicativo:

Conio e Assegnazione (Amministratore):

  • L'Amministratore accede e assegna 100 "CreditiBase" all'utente Mario.
  • Mario, accedendo, vede un saldo di 100 "CreditiBase".

Trasferimento tra Utenti:

  • Mario decide di inviare 20 "CreditiBase" a Luigi.
  • Mario specifica "Luigi" come destinatario e "20" come quantità.
  • Il sistema verifica che Mario abbia almeno 20 CreditiBase. Il trasferimento avviene.
  • Il saldo di Mario diventa 80 CreditiBase. Il saldo di Luigi (che magari era 0) diventa 20 CreditiBase.
  • Nello storico di Mario compare "Inviati 20 CreditiBase a Luigi". Nello storico di Luigi compare "Ricevuti 20 CreditiBase da Mario".

Obiettivo Funzionale:

Realizzare un sistema base per la gestione di un singolo tipo di token digitale, includendo la sua creazione da parte di un amministratore, la visualizzazione dei saldi e la possibilità per gli utenti di scambiarselo, con tracciamento delle transazioni.

Livello 2: Creazione di Nuovi Tipi di Token da Parte degli Utenti

Descrizione Funzionale:

L'applicazione deve estendere le funzionalità del Livello 1 per offrire:

  • La possibilità per qualsiasi utente registrato di definire e creare un nuovo tipo di token (es. "BuonoScontoNegozioX", "TokenAccessoEventoY").
  • Durante la creazione, l'utente deve specificare almeno un nome per il nuovo token e un simbolo breve (es. "BSNX", "TAEY").
  • L'utente che crea un nuovo tipo di token ne diventa automaticamente l'"emittente" e inizialmente possiede l'intera "fornitura" (o può decidere di coniarne una quantità iniziale per sé).
  • Gli utenti possono visualizzare i saldi di tutti i diversi tipi di token che possiedono.
  • Gli utenti possono trasferire qualsiasi tipo di token che possiedono ad altri utenti, come nel Livello 1, ma ora specificando anche quale tipo di token stanno inviando.
  • Lo storico delle transazioni deve ora specificare il tipo di token coinvolto in ogni transazione.
  • (Opzionale) L'emittente di un token può avere la facoltà di coniare ulteriori unità del proprio token e assegnarle a sé stesso o ad altri.

Esempio:

  • L'utente Carla, registrata, decide di creare un token per il suo club del libro.
  • Carla definisce un nuovo token: Nome="LibroPunto", Simbolo="LPT". Decide di coniare inizialmente 1000 LPT per sé.
  • Il saldo di Carla ora mostra: X CreditiBase (dal Livello 1, se presenti) e 1000 LPT.
  • Carla invia 50 LPT a Davide.
  • Il saldo di Davide ora mostra: Y CreditiBase e 50 LPT. Lo storico di Davide indica "Ricevuti 50 LPT da Carla".

Obiettivo Funzionale:

Democratizzare la creazione di token, permettendo agli utenti di definire propri asset digitali scambiabili all'interno della piattaforma, e gestire saldi e transazioni multi-token.

Livello 3: Token non fungibili (NFT)

Descrizione Funzionale:

L'applicazione deve evolvere per permettere la creazione e gestione di token unici, non fungibili, che rappresentano la proprietà di un asset digitale specifico.

  • Creazione di Token Univoci (NFT): Un utente registrato può "coniare" un nuovo token univoco.
  • Durante la creazione, l'utente deve fornire:
    • Un nome per l'NFT (es. "Mio Disegno Digitale Esclusivo", "Certificato di Partecipazione Corso Avanzato").
    • Una descrizione.
    • (Opzionale ma consigliato) Un link a un asset esterno (es. URL di un'immagine, un documento PDF, un video) che l'NFT rappresenta. Il sistema non memorizza l'asset stesso, solo il riferimento.
  • Il sistema assegna un ID univoco a questo NFT. L'utente che lo conia ne diventa il proprietario iniziale.
  • Visualizzazione dei Propri NFT: Ogni utente può vedere un inventario degli NFT unici che possiede, con i relativi dettagli (nome, descrizione, link all'asset, ID univoco).
  • Trasferimento di Proprietà di un NFT: Il proprietario di un NFT può trasferirlo a un altro utente registrato sulla piattaforma.
  • L'utente specifica l'NFT da trasferire (tramite il suo ID univoco) e l'utente destinatario.
  • Dopo il trasferimento, il destinatario diventa il nuovo proprietario dell'NFT, e l'NFT scompare dall'inventario del mittente.
  • Visualizzazione Pubblica (o per utente) degli NFT: Chiunque può visualizzare una "galleria" dove tutti gli NFT creati (o quelli di un utente specifico) sono visibili, mostrando chi è l'attuale proprietario.

Esempio di Interazione (Funzionale - NFT Semplificati):

Conio di un NFT:

  • L'utente Sofia, un'artista, accede alla piattaforma.
  • Decide di "tokenizzare" una sua opera digitale.
  • Crea un nuovo NFT:
  • Nome: "Tramonto Cyberpunk"
  • Descrizione: "Illustrazione digitale creata nel 2024."
  • Link Asset: https://miosito.com/immagini/tramonto_cyber.jpg
  • Il sistema assegna all'NFT l'ID univoco NFT-789 e registra Sofia come proprietaria.
  • Nella sua pagina "I Miei NFT", Sofia vede "Tramonto Cyberpunk (ID: NFT-789)".

Trasferimento di Proprietà:

  • Sofia decide di regalare "Tramonto Cyberpunk" all'utente Marco.
  • Dalla sua lista di NFT, Sofia seleziona "Tramonto Cyberpunk (ID: NFT-789)" e sceglie l'opzione "Trasferisci".
  • Specifica "Marco" come destinatario.
  • Il sistema aggiorna la proprietà: Marco è ora il proprietario di NFT-789.
  • "Tramonto Cyberpunk" non compare più nella lista NFT di Sofia, ma compare in quella di Marco.

Visualizzazione (Es. in una galleria):

  • Chiunque visiti la galleria (o la pagina di Marco) vede l'NFT "Tramonto Cyberpunk" e l'indicazione "Proprietario: Marco".

Obiettivo Funzionale (Alternativa NFT):

Introdurre il concetto di token non fungibili, permettendo agli utenti di creare, possedere e trasferire asset digitali unici all'interno della piattaforma, focalizzandosi sulla tracciabilità della proprietà individuale.

Piattaforma per la Gestione di Eventi con Iscrizioni

Introduzione al Progetto:

Organizzare eventi, che siano conferenze, workshop, incontri comunitari o feste private, richiede la gestione di molte informazioni e, spesso, delle iscrizioni dei partecipanti.

Questa piattaforma web mira a semplificare questo processo, permettendo agli organizzatori di creare e promuovere eventi e agli utenti di scoprirli e registrarsi, con funzionalità crescenti.

Setup Iniziale e Ruolo Amministratore/Organizzatore:

Per facilitare l'avvio e la gestione iniziale della piattaforma, il primo utente che si registra al sistema assumerà automaticamente il ruolo di "Organizzatore" (o Amministratore, a seconda di come si sceglie di implementare i privilegi più elevati). Questa logica si applica solo se non esistono altri utenti al momento della registrazione. Tutti gli utenti successivi si registreranno con il ruolo standard di "Partecipante".

Attenzione: sebbene questa modalità semplifichi il setup iniziale, in un ambiente di produzione reale si dovrebbero adottare meccanismi più sicuri per la creazione del primo account con privilegi elevati.

Livello 1: Creazione Eventi Base e Iscrizioni Semplici

Descrizione Funzionale:

L'applicazione web deve permettere:

  • La registrazione e l'accesso per due tipi di ruoli utente: "Organizzatore" e "Partecipante". (Il primo utente registrato, come specificato sopra, sarà un "Organizzatore").
  • Gli Organizzatori possono:

    • Creare un nuovo evento specificando almeno: nome dell'evento, data, ora, luogo (testo semplice) e una breve descrizione.
    • Visualizzare un elenco degli eventi da loro creati.
  • I Partecipanti (e chiunque visiti il sito) possono:

    • Visualizzare un elenco pubblico di tutti gli eventi futuri disponibili.
    • Visualizzare i dettagli di un singolo evento.
  • I Partecipanti autenticati possono:
    • Iscriversi a un evento futuro.
    • Visualizzare un elenco degli eventi a cui si sono iscritti.

Esempio Indicativo di Flusso (Livello 1):

Creazione Evento (Organizzatore):

  • Luca si registra per primo e diventa automaticamente Organizzatore. Accede.
  • Crea un nuovo evento: Nome="Workshop di Fotografia Base", Data="2024-07-15", Ora="10:00", Luogo="Sala Civica XYZ", Descrizione="Impara le basi della fotografia con la tua reflex."
  • Luca vede "Workshop di Fotografia Base" nella sua lista di eventi creati.

Iscrizione (Partecipante):

  • Sara si registra (diventando Partecipante), accede e naviga la lista degli eventi.
  • Vede il "Workshop di Fotografia Base", clicca per i dettagli e decide di iscriversi.
  • Il sistema registra l'iscrizione di Sara all'evento.
  • Sara, nella sua area personale, vede "Workshop di Fotografia Base" tra gli eventi a cui è iscritta.

Obiettivo Funzionale:

Realizzare il nucleo di una piattaforma di gestione eventi, permettendo la creazione di eventi da parte degli organizzatori, la loro visualizzazione pubblica e la possibilità per i partecipanti di iscriversi, con una distinzione base dei ruoli utente.

Livello 2: Gestione Avanzata Eventi (Capacità, Categorie) e Lista Partecipanti

Descrizione Funzionale:

L'applicazione deve estendere le funzionalità del Livello 1 per offrire:

  • Agli Organizzatori, la possibilità di:
  • Specificare un numero massimo di partecipanti (capacità) per un evento, impedendo ulteriori iscrizioni al raggiungimento del limite.
  • Assegnare l'evento a una o più categorie.
  • Visualizzare la lista dei partecipanti iscritti a ciascuno dei propri eventi.
  • Agli Utenti, la possibilità di:
  • Filtrare o cercare eventi per categoria.
  • Visualizzare il numero di posti ancora disponibili.
  • Ai Partecipanti, la possibilità di cancellare la propria iscrizione a un evento.

Esempio Indicativo di Flusso (Livello 2):

  • Luca (Organizzatore), modificando il suo "Workshop di Fotografia Base", imposta una capacità massima di 20 partecipanti e lo categorizza come "Corsi" e "Arte".
  • Quando 20 persone si sono iscritte, il sistema non permette più nuove iscrizioni e mostra "Posti Esauriti".
  • Un visitatore cerca eventi nella categoria "Corsi" e trova il workshop di Luca.
  • Luca può accedere a una pagina dove vede i nomi di tutti i 20 partecipanti iscritti al suo workshop.
  • Sara, che si era iscritta, decide che non può più partecipare e cancella la sua iscrizione. Un posto si libera e qualcun altro può iscriversi.

Obiettivo Funzionale:

Arricchire la gestione degli eventi con funzionalità di controllo degli accessi (capacità), migliore organizzazione (categorie e filtri), e fornire agli organizzatori strumenti per monitorare le iscrizioni.

Livello 3: Integrazione Pagamenti Simulati, Notifiche e Calendario Eventi

Descrizione Funzionale:

L'applicazione deve evolvere per includere almeno una delle seguenti funzionalità:

  • Gestione Eventi a Pagamento con Simulazione Realistica:
  • Gli Organizzatori possono specificare un prezzo per l'iscrizione a un evento.
  • Per iscriversi a un evento a pagamento, i Partecipanti devono completare un processo di pagamento simulato.
  • Si propone (facoltativa) l'integrazione con un framework di pagamento esterno in modalità test/sandbox (es. Stripe Test Mode, PayPal Sandbox). Questo implica gestire il flusso di inserimento dei dati di pagamento (fittizi forniti dal provider), la comunicazione con le API del provider (in modalità test) per "autorizzare" il pagamento, e la gestione della risposta (successo/fallimento). I servizi offrono tutte le indicazioni per integrare il servizio nella propria applicazione.
  • L'Organizzatore può vedere quali iscrizioni sono state completate con successo tramite il processo di pagamento simulato.
  • Sistema di Notifiche via Email:
    • Conferma di iscrizione via email al Partecipante.
    • Promemoria via email ai Partecipanti un giorno prima dell'evento.
  • Visualizzazione Calendario Eventi:
    • Offrire una vista calendario (mensile/settimanale) dove gli eventi sono posizionati in base alla loro data, permettendo l'accesso ai dettagli cliccando sull'evento.

Esempio di Interazione (Funzionale - Livello 3):

  • Luca crea un "Corso Avanzato" a pagamento (25€).
  • Chiara si iscrive. Viene reindirizzata (o interagisce con un form/elemento fornito da Stripe/PayPal) per inserire dati di carta di credito di test. Il sistema (tramite Stripe/PayPal in test mode) conferma il "pagamento". Chiara riceve un'email di conferma iscrizione.
  • Il giorno prima del corso, Chiara riceve un'email di promemoria.
  • Un utente naviga il calendario e vede il "Corso Avanzato" di Luca nella data corretta.

Obiettivo Funzionale:

Introdurre meccanismi di monetizzazione simulati in modo realistico per gli eventi, migliorare la comunicazione con gli utenti tramite notifiche email, e offrire una modalità di navigazione degli eventi più intuitiva e visuale attraverso un calendario.

Questo livello richiede l'esplorazione e l'integrazione di API e servizi esterni per la gestione dei pagamenti simulati e potenzialmente per l'invio di email.