#doveticuri - start

#doveticuri

Nuova collaborazione di Mitecube con Wired Italia. Dopo la precedente esperienza di #scuolesicure, si torna alla carica con un progetto sulla visualizzazione dei dati sulle strutture sanitarie italiane. Stavolta nel mirino ci sono le performance sanitarie degli ospedali italiani.

#doveticuri è un progetto realizzato in collaborazione con Wired Italia. L’obiettivo del progetto è stato quello di realizzare un’applicazione Web/Mobile semplice ed intuitiva per l’utente, grazie alla quale poter visualizzare e consultare i dati sulle performance di 1200 ospedali italiani, raccolti  dall’Agenzia nazionale per i servizi sanitari regionali (Agenas). Si tratta di dati utilizzati in tutto il mondo e pensati per mettere a punto politiche sanitarie e spesa pubblica (la Sanità, da sola rappresenta ormai l’80% della spesa pubblica regionale).

#doveticuri rende liberamente consultabili questi dati dai non addetti ai lavori grazie ad una mappa interattiva e ad un motore di ricerca integrato.

In questo articolo vengono trattate le fasi di realizzazione tecnica e di sviluppo dell’applicazione. Per un trattazione completa sull’argomento si rimanda agli articoli apparsi su Wired.it.

L’architettura dell’applicazione

architettura

#doveticuri è un’applicazione Web composta da due elementi:

  1. Un frontend HTML5 + Javascript a singola pagina;
  2. Un backend costituito da un motore di ricerca dei punti (ospedali).

I dati ed il motore di ricerca

L’approccio seguito in #scuolesicure è stato replicato anche in questo progetto. I dati, dopo essere stati opportunamente acquisiti, processati e normalizzati, sono stati indicizzati in un motore di ricerca invocabile da frontend. La scelta è ricaduta su Elasticsearch, sia per la sua estrema versatilità in fase di configurazione, sia per la velocità di risposta. Mentre in #scuolesicure le query di ricerca dal frontend venivano inoltrate alla piattaforma di Voglioilruolo, per poi essere analizzate e processate dal motore di ricerca interno delle scuole (quest’ultimo basato invece su Solr), stavolta le query vengono inoltrate direttamente ad Elasticsearch attraverso l’interfaccia REST che mette a disposizione questo prodotto. A fronte di una ricerca Elasticsearch consente facilmente di ottenere nel JSON di risposta, oltre ai risultati, anche una serie di informazioni aggregate attraverso il meccanismo delle facets: oltre alle facet di tipo term, che forniscono la numerosità dei risultati divisi per regioni e province, le facets di tipo statistical offrono l’opportunità di avere statistiche (totali, medie, somme di quadrati, max/min, varianza, etc. ) sugli indicatori. In questo modo l’applicazione di frontend può mostrare una serie di informazioni in più, come le medie nazionali e le classifiche dei migliori e peggiori ospedali per una data malattia.

La WebApp

Una volta organizzati i dati e resi disponibili da Elasticsearch attraverso una comoda interfaccia REST, si è proceduto alla resa visiva e fruizione dei dati. L’applicazione si presenta come una webapp HTML5 + JS, con un campo di ricerca libera ed una mappa grande nella quale mostrare i risultati della ricerca (oppure tutti i punti qualora non si inserisca nulla nel filtro di ricerca). I risultati (gli ospedali) vengono visualizzati come marker sulla mappa. Al click su uno di questi, viene mostrato un menu laterale nel quale vengono riportate le informazioni dell’ospedale ed una lista di indicatori in forma percentuale rilevati nell’ospedale. Al click su un indicatore, viene mostrata una classifica dei migliori e peggiori ospedali per quell’indicatore. Se è stata effettuata una ricerca, la classifica sceglie i migliori e peggiori ospedali tra i risultati della ricerca.

La struttura javascript dell’applicazione è stata realizzata grazie all’impiego del framework backbone.js. Attraverso l’estendibilità di backbone.js, infatti, sono stati implementati:

  • il modello dei dati (i risultati);
  • la loro acquisizione da Elasticsearch tramite chiamate Ajax alle api REST;
  • tutte le interazioni con gli elementi dell’interfaccia;
  • la modellazione degli eventi.

La visualizzazione della mappa è stata affidata ad OpenLayers. In un primo momento è stato usato OpenStreetMap come map server, ma dovendo avere un elevato grado di personalizzazione della mappa e non avendo tempo per installare un map server locale, è stata usata una mappa Google Maps con uno schema di colori personalizzati secondo il tema dell’applicazione.

Responsive Web Design

Durante la realizzazione di #doveticuri sono state impiegate tecniche di Responsive Web Design (RDF) per consentire all’interfaccia di adattarsi allo schermo dei dispositivi mobili ed offrire all’utente la massima fruibilità anche in mobilità.

mobile - homepage mobile - indicatori mobile - ranking

 

Codice dell’applicazione

Il codice sorgente del progetto è disponibile liberamente su http://github.com/mitecube/doveticuri

Ringraziamenti

Desideriamo ringraziare Salvatore Giuliano per il suo prezioso aiuto nella realizzazione della user experience.