BeviMagnaLonga: dall’acquisto all’ingresso

Ogni luglio la BeviMagnaLonga porta ad Alfero oltre mille persone. Il percorso è lungo circa cinque chilometri e attraversa il paese e il bosco, con tappe dedicate a cibo, vino e musica.

Prima della PWA, vendita dei biglietti, tesseramenti e pagamenti vivevano su strumenti separati. Con oltre mille partecipanti significava incrociare fogli Excel, email, bonifici e controlli all'ingresso.

Ho riunito tutto in una PWA. I partecipanti acquistano online, anche per altre persone, e tengono i biglietti sul telefono. La Pro Loco segue ordini, utenti e tesseramenti dal backoffice. All'ingresso, gli addetti usano la stessa applicazione per convalidare i QR code.

Cosa cambia per chi organizza l'evento

Gruppi, area personale e trasferimenti

Chi acquista per amici o parenti può inserire più partecipanti nello stesso ordine, anche se non hanno ancora un account. Il capogruppo continua a gestire i biglietti acquistati, ma ogni persona mantiene la propria anagrafica. Se uno dei partecipanti si registra in seguito con il proprio codice fiscale, trova già associati il biglietto e l'eventuale tessera.

Nella sezione "I miei biglietti" ci sono QR code, PDF e archivio delle edizioni precedenti. Da qui si può trasferire un biglietto attivo a un'altra persona registrata, mantenendo traccia di ogni tentativo. Chi è già socio deve solo accettarlo; negli altri casi il destinatario paga la quota associativa. Il trasferimento non occupa un altro posto, quindi funziona anche quando i biglietti sono esauriti.

Acquisto e area personale

La schermata di acquisto mostra subito disponibilità e prezzo. Per ogni partecipante si inseriscono i dati, si sceglie il tipo di biglietto e si paga online oppure in sede. Se il codice fiscale è già presente, l'app recupera l'anagrafica senza farla compilare di nuovo.

Biglietti e tessere rimangono nell'area personale. Il QR code si apre dal telefono, senza dover cercare un'email o scaricare il PDF prima di entrare.

Il backoffice della Pro Loco

Ordini, biglietti, tessere, utenti e cassa hanno viste separate. Nell'elenco degli ordini compaiono il capogruppo, lo stato del pagamento e il metodo usato. Da lì si può aprire il dettaglio, correggere un ordine, registrare una vendita fatta in sede o esportare i pagamenti online per la contabilità.

Dal registro dei biglietti si cerca un partecipante, si controllano i titoli attivi e si vedono gli accessi già registrati e le richieste alimentari. Gli utenti hanno una sezione propria, separata dagli ordini e dai dati della singola edizione.

Anche i tesseramenti usano lo stesso archivio. La Pro Loco verifica l'annualità, crea una nuova tessera e prepara l'esportazione CSV senza spostare dati tra applicazioni diverse.

Controllo degli accessi dal browser

Gli addetti aprono lo scanner sul proprio telefono e inquadrano il QR code. L'app verifica il biglietto, segnala quelli non validi o già utilizzati e aggiorna il conteggio degli ingressi nel backoffice.

Lo scanner funziona nel browser. Usa la Web API BarcodeDetector quando è disponibile e una libreria JavaScript come fallback, quindi non richiede l'installazione di un'app nativa sui telefoni degli addetti.

Stack e distribuzione

Il frontend è una PWA in Vue 3 e TypeScript. Le API sono sviluppate in C# con .NET e i dati sono conservati in PostgreSQL. Stripe gestisce i pagamenti online, mentre l'app registra anche i pagamenti effettuati in sede.

La distribuzione via web evita il passaggio dagli store. Partecipanti e volontari aprono lo stesso sito dal telefono, mentre la Pro Loco usa le viste amministrative protette per gestire l'evento.