Calciomercato.com è una tra le piattaforme dedicate al mondo del calcio più conosciute e visitate sul web: attraverso la pubblicazione di notizie sportive sul portale, Calciomercato.com conta oltre 100 milioni di pageview e raggiunge fino a 6 milioni di utenti mensili.
La piattaforma è composta da un network di servizi tra cui il sito web istituzionale, la community virtuale per la creazione di blog personali e le applicazioni mobile per iOS (con circa 50.000 download), Android (che conta quasi 100.000 installazioni) e Windows Phone.
Partendo da un’analisi valutativa dello stato del progetto, per Calciomercato.com abbiamo svolto attività di gestione e manutenzione dell’infrastruttura, volte a ridurre considerevolmente l’elevato costo dell’infrastruttura. Ci siamo inoltre occupati della riprogettazione e sviluppo delle app esistenti. Dopo aver deciso di entrare nel mercato degli smart speaker, ci ha affidato lo sviluppo di un’applicazione personalizzata per Alexa, le cosiddette Skills. La nostra collaborazione con Calciomercato.com si sviluppa negli anni, attraverso la scelta di un approccio incrementale per gli sviluppi richiesti.
Continuous improvement: dallo sviluppo al refactoring delle applicazioni
Una delle prime esigenze del cliente che abbiamo accolto è stata la riprogettazione delle applicazioni mobile per aggiornarne l’interfaccia, semplificarne il funzionamento e offrire una migliore esperienza utente.
In una discovery abbiamo analizzato punti di forza e di debolezza delle attuali app, al fine di aggiornarle e mantenerle senza perdere di vista gli obiettivi di business del cliente.
In primissima battuta abbiamo proceduto al loro aggiornamento, riportandole ad un corretto stato di funzionamento. In questa fase abbiamo anche introdotto alcune funzionalità, come un menù rinnovato e più semplice da consultare e la possibilità di login e registrazione tramite Facebook e Google+.
Abbiamo inoltre iniziato a integrare unità pubblicitarie, al fine della monetizzazione.Una volta ripubblicate le app, abbiamo iniziato un percorso di aggiornamento continuo, il primo tra tutti è stato un restyling grafico per rispecchiare la brand identity del cliente.
Abbiamo inoltre aiutato Calciomercato.com a a migliorare le applicazioni esistenti. Analizzando il codice, abbiamo stabilito le parti di progetto da migliorare e riscrivere, portando quindi avanti un lavoro di refactoring del codice per modificare la struttura interna e migliorane la qualità senza modificare il comportamento.
Per semplificare l’integrazione dei differenti servizi che compongono il portale e consentire un funzionamento regolare su tutti i device, abbiamo integrato le API esistenti creandone di nuove per permettere al cliente un corretto trasferimento di dati da un servizio all’altro.
Occupandoci del backend, abbiamo implementato alcune funzionalità prima esistenti solo sul sito istituzionale e abbiamo migliorato le prestazioni dell’applicazione.
Visto il continuo aumento degli utenti utilizzatori, vengono rilasciate nuove funzionalità: la più importante è la possibilità di ricevere push notification in base alla squadra preferita dell’utente.
In ottica di miglioramento continuo effettuiamo un’analisi delle prestazioni: per migliorare l’esperienza utente e diminuire i tempi di attesa, abbiamo concentrato le energie sull’ottimizzazione dei contenuti scambiati tra app e server: la fruizione delle app diventa più veloce e diminuisce il traffico dati ad esse necessario.
Ridurre i costi e ottimizzare l’infrastruttura
Al momento della presa in carico del progetto, il network Calciomercato.com era ospitato presso un servizio PaaS (Platform as a Service). La piattaforma, costosa e problematica, ha messo da subito in luce i propri limiti in relazione all’aumento dei visitatori ed ai picchi di traffico durante determinati periodi dell’anno, a fronte di un spesa mensile elevata. L’obiettivo delle nostre operazioni è stato rivolto principalmente alla riduzione dei costi di infrastruttura, portando il cliente a ridurre notevolmente la spesa fino a dimezzarla.
Dopo una prima analisi volta ad identificare l’architettura in essere, abbiamo deciso di concentrarci prima sul miglioramento della scalabilità del sito istituzionale e poi sulla migrazione dell’infrastruttura su AWS (Amazon Web Service).
Questo ci ha consentito di assumere il controllo dell’infrastruttura stessa, dandoci modo di intervenire direttamente a tutti i livelli dello stack applicativo: networking, server, software. Il nuovo stack, aggiornato e più performante, ha migliorato l’affidabilità dandoci spazio per ulteriori miglioramenti futuri.
Per ottimizzare la monetizzazione da parte del cliente, abbiamo lavorato al miglioramento dell’infrastruttura e alla revisione di alcuni formati pubblicitari: grazie all’ottimizzazione delle API ed a meccanismi di caching mirati, siamo riusciti a diminuire il carico server, senza intaccare l’esperienza utente.
Nel 2017 Calciomercato.com ha chiuso con incrementi di traffico del 45%, 2 milioni di utenti unici al mese dati di maggio 2018 e un +15% di fatturato. L’anno seguente gli interventi di ottimizzazione hanno portato ad incrementi sia di traffico che di fatturato del 50%.
Il passaggio al Cloud AWS dal precedente servizio PaaS, ha consentito a Calciomercato.com di superare i limiti relativi all’aumento dei visitatori e ai picchi di traffico durante determinati periodi dell’anno.
Il risultato del nostro intervento, in qualità di cloud services provider, è stata la riduzione dei costi del 50% dell’infrastruttura, un aumento delle prestazioni e del livello di servizio erogato ai lettori.
In Flowing abbiamo trovato un partner ideale, con vaste competenze su tutte le aree nelle quali necessitavamo di un passo in avanti. Tutto il sistema Calciomercato.com è visibilmente migliorato nell’ultimo anno, e siamo pronti a nuovi sviluppi.
Cosimo Baldini, Amministratore Unico/CEO
Il portale SOS Fanta: gestire il traffico con picchi da 10x
Nel 2017, nelle settimane a cavallo tra Agosto e Settembre, il portale SOS Fanta ha ricevuto un grande incremento di visitatori dovuto al termine del calciomercato, all’inizio delle attività legate al fantacalcio e al rilascio delle Push Notifications sull’applicazione mobile.Come abbiamo gestito picchi di traffico che decuplicavano il numero di richieste ricevuto dall’infrastruttura?
Abbiamo effettuato una revisione dell’infrastruttura e una serie di ottimizzazioni sull’applicazione, un’installazione WordPress.
WordPress è ad oggi la base di partenza per milioni di progetti web nel mondo, viene utilizzato da aziende e professionisti non solo per la creazione di blog ma in generale per la creazione di piattaforme di pubblicazione online.
l’infrastruttura
Per gestire l’incremento di richieste abbiamo disegnato l’infrastruttura inserendo due istanze AWS EC2, create su due differenti Availability Zones all’interno della region di Francoforte.
La distribuzione del carico su queste due istanze viene effettuata grazie all’utilizzo di un bilanciatore, che tramite degli Health Check verifica il corretto funzionamento dell’applicazione.
Per l’istanza di database abbiamo scelto di utilizzare il servizio AWS RDS, utilizzando Aurora come motore di database relazionale.
Per poter avere una base dati comune su tutta l’infrastruttura, abbiamo utilizzato un plugin per gestire i media, appoggiandoci sullo storage ad oggetti di Amazon (S3) e idephix come tool per effettuare il deploy del codice.
Abbiamo scelto di utilizzare un servizio di CDN come Cloudfront per poter inserire uno strato di cache. Questo ci ha permesso di scaricare le istanze EC2 da gran parte delle richieste e quindi di ottimizzarne il dimensionamento.
Una serie di controlli gestiti attraverso il servizio AWS CloudWatch ci hanno permesso di monitorare lo stato dell’infrastruttura. Questi controlli possono inserire automaticamente, quando necessario, nuove istanze nel bilanciatore.
Per poter analizzare le performance dell’applicazione, abbiamo inserito un Application Performance Monitoring (APM) come New Relic.
Questo ci ha permesso di analizzare nel dettaglio il funzionamento dell’applicazione, andando ad effettuare una serie di ottimizzazioni sul codice e sulle query che venivano effettuate verso il database.
Abbiamo installato il plugin WP offload s3 che ci ha permesso di spostare i contenuti statici (immagini e assets) verso un bucket S3 e di fornirli durante l’apertura del sito direttamente dallo storage ad oggetti.
Nonostante questo, durante l’invio di notifiche push dall’applicazione mobile riscontravamo problematiche nell’infrastruttura.
Come si nota dal grafico qui sotto, in una situazione di traffico senza notifiche push le istanze gestiscono una media di 3000 richieste al secondo.
L’incremento di richieste nei cinque minuti immediatamente successivi all’invio di una notifiche, provoca l’aumento delle richieste di tredici volte il numero di richieste effettuate normalmente.
Grazie all’analisi dei log di accesso nei server web abbiamo individuato un alto numero di chiamate verso le application programming interface (API) da parte dell’applicazione mobile.
L’attivazione di Cloudfront, per quanto riguarda le API e i contenuti statici, permette di ridurre ulteriormente il numero di richieste effettuate verso le istanze.
Inoltre, abbiamo introdotto uno strato di cache che potesse gestire un picco come quello rilevato negli istanti successivi all’invio di una notifica push.
Cloudwatch, sistema di monitoraggio e analisi del log, ci ha permesso di effettuare nuove revisione del codice e di ottimizzare ulteriormente la configurazione di CloudFront.
In questo modo abbiamo raggiunto una percentuale di Hits vicina al 99% per le richieste effettuate verso i primi 50 oggetti più richiesti.
La stretta collaborazione tra il team Ops e il team Dev, unitamente ad un lavoro di precisione, ci ha permesso di raggiungere questo risultato. Ad oggi, possiamo offrire al cliente un’infrastruttura pronta per scalare e gestire numeri ben più grandi di quelli gestiti quotidianamente.
La Skill Alexa per la lettura delle notizie
Calciomercato.com ci ha scelto per occuparci del disegno dell’interfaccia conversazionale e della sua implementazione e pubblicazione sullo store di Amazon.
La Skill è un sommario delle ultime notizie prese da Calciomercato.com e, una volta collegata al proprio account Amazon dalla pagina sullo store – attivabile tramite il comando vocale “Alexa, apri Calciomercato.com” – è possibile chiedere le ultime notizie di Prima Pagina o di una specifica squadra di Serie A. Inoltre è possibile farsi leggere da Alexa anche il testo di uno degli ultimi articoli, permettendo agli utenti di rimanere sempre aggiornati con le ultime notizie, anche mentre non si ha a disposizione uno schermo.
Grazie alla prima fase di ricerca e alla successiva analisi dei loro bisogni, ci siamo potuti concentrare sul rilascio veloce di un servizio che – se pur non perfetto – fosse in grado raccogliere i dati delle interazioni con l’utente per consentire un rapido miglioramento del servizio nei rilasci successivi.
Abbiamo quindi progettato un flusso conversazionale nel modo più snello possibile, portando l’utente dritto all’informazione aggiornata che Calciomercato.com fornisce.
Seguendo le linee guida di Amazon, prima di sviluppare la Skill abbiamo fatto un’attività di Design della VUI (Voice User Interface). Dalla ricerca sui tipi di utenti all’analisi dei loro bisogni, alla proposta di diversi scenari di sviluppo fino alla scelta del prodotto di maggior efficacia. Il lavoro svolto sulla terminologia della Skill ha fatto sì che la stessa potesse rispondere in maniera continuativa e logica alle interazioni con l’utente.
Il lavoro iniziale di design sulla VUI ha reso la Skill più robusta e in grado di procedere per cicli di conversazione in modo compiuto e continuativo, invocandola in modo generico o fornendo già al primo input alcune opzioni per raffinare la ricerca della notizia.
Da un punto di vista tecnico la Skill è una Lambda su Amazon Web Services. Lo scopo di questa Lambda è quello di fare da middleware tra Alexa e le API di Calciomercato.com per recuperare gli ultimi articoli ed il testo di un articolo specifico.
Abbiamo voluto esserci da subito nell’ambiente Alexa, per questo abbiamo presentato a Flowing delle specifiche semplici e chiare per offrire un notiziario che andasse sin dalle prime settimane a presidiare questo canale. Alexa per noi non è solo un nuovo ambiente dove poter consultare le nostre notizie ed editoriali, ma uno stimolo ad esplorare nuove forme, quindi entrare piano piano anche nel mondo del podcast.
Cosimo Baldini, Amministratore Unico/CEO
