Interfaccia grafica per visualizzazione e ricerca delle fonti monitorate


#1

La piattaforma di scraping si basa su un indice di tutte le fonti monitorate e da monitorare, su cui stiamo discutendo qui. Materialmente si tratta di un file JSON, che però può essere la base di un’interfaccia web sia per chi lavora a RT, sia per chi sta seguendo il progetto dall’esterno.

L’elenco delle fonti poi potrebbe essere reso esplorabile mediante per esempio un’istanza di petrusino (o una semplice tabella filtrabile) da mantenere nello stesso repository. Sarebbe così facile per chiunque vedere quali fonti ci interessano, quali sono monitorate, su quali c’è ancora lavoro da fare.

Elenco alcune funzionalità possibili:

  • elenco filtrabile in base a vari parametri (es. monitorato / non monitorato);
  • elenco ricercabile (es. testo libero sul campo descrizione);
  • contatori generali (es. numero di fonti per regione, numero di scraper per sviluppatore e un domani elementi indicizzati per fonte, ecc.);
  • mappe per i parametri geografici (le fonti hanno un codice istat, se disponibile);
  • informazioni aggiuntive di contesto (es. dai dati della viz sui contatori, da istat, da contratti pubblici, dall’indice delle pa, ecc.)

In prospettiva questa pagina potrebbe diventare uno degli entry point dell’intero progetto: entro, ho una visione di insieme, posso fare ricerche sulle fonti, ho l’elenco dei feed degli albi, ho le informazioni di contesto, ho insomma un sommario e un indice di un bel pezzo di RT.

Si tratta per lo più di lavoro di frontend: progettazione, design ed elenco di richieste al backend. Nomino in prima battuta @giovannipolimeni e @guenter.richter che nel thread sulla lista avevano già cominciato a ragionarci. Che ne dite? Fin dove ci si può spingere prima di mettere mano materialmente all’implementazione? Quanto flessibili possiamo rimanere nella progettazione per assicurarci di poter aggiungere pezzi e funzionalità in un secondo momento? Cosa ci serve decidere subito (penso alla parte di backend) per assicurarci dopo le funzionalità che vorremmo?


Mappa dei comuni del cratere
ContrattiPubblici.Org per Dati amministrazione trasparente
Interfaccia grafica di navigazione delle fonti monitorate
#2

Che ne dite?

Ottima idea, da tutti i punti di vista.

Fin dove ci si può spingere prima di mettere mano materialmente all’implementazione?

Io seguirei un workflow di questo tipo:

  • stilare elenco di tutti i desiderata: cosa deve contenere, quali azioni deve poter svolgere l’utente, etc. etc.?
  • selezionare i desiderata utili a un MVP
  • fare una progettazione grafica creando dei wireframes (non UI) delle diverse viste e delle azioni che l’utente può svolgere in esse
  • passare direttamente a prototipazione frontend usando magari uno UI framework che ci piaccia

Per questa fase non credo si necessiti di un backend, E’ possibile fare tutto con pochi dati, o dati “finti”, di cui però la struttura sia chiara e confermata.

Quanto flessibili possiamo rimanere nella progettazione per assicurarci di poter aggiungere pezzi e funzionalità in un secondo momento?

Secondo me se i vari componenti vengono pensati, “disegnati” modularmente e in maniera più indipendente possibile, anche la progettazione (così come lo sviluppo) può essere flessibile.

Cosa ci serve decidere subito (penso alla parte di backend) per assicurarci dopo le funzionalità che vorremmo?

A tal proposito sarebbe utile sapere: abbiamo la possibilità di avere delle API con endpoint da richiamare? E che rispondano con un JSON?

Si potrebbe in questo modo mettere in piedi senza troppe difficoltà un’app javascript con Model (e Collections) e View corrispondenti a risorse e viste / moduli del progetto.

Mi fermo qui per ora :slight_smile:


#3

Mi fermo qui per ora :slight_smile:

Hai già messo un sacco di roba… :smiley:

Ok, aspettiamo eventuali altri feedback, poi lunedì cominciamo a buttar giù una lista di desiderata.

Il backend iniziale sarebbe solo questo staticissimo JSON, poi da ognuna di quelle fonti aspettatevi un flusso di albi scrapati e messi a disposizione mediante feed RSS e API JSON. Le chiavi primarie (istat e ipa) che già ho previsto, poi, abilitano ulteriori query ad altri servizi, come Contratti Pubblici (o chissà cosa ci riserverà il futuro visto il lavoro che stanno facendo al team digitale).


#4

Salve,
mi sembra tutto sulla strada giusta; cominciare con file statici e feed mi piace;

Per questa fase non credo si necessiti di un backend, E’ possibile fare tutto con pochi dati, o dati “finti”, di cui però la struttura sia chiara e confermata.

Forse potrebbe essere utile definire un formato interno (per esempio GeoJson) dove vari fonti possono confluire in una sorta di layer (geografici o no) per applicare i vari filtri (client side); ogni nuovo fonte si potrebbe integrare via piccoli moduli specifici,

  • si potrebbe applicare filtri (temporali, geografici e testuali) a un layer o a tutti.
  • si può aggiungere o togliere fonti (per esempio spostando la mappa)
  • poi la rappresentazione si basa su questo formato interno

A tal proposito sarebbe utile sapere: abbiamo la possibilità di avere delle API con endpoint da richiamare? E che rispondano con un JSON?

quasi un endpoint interno, che in futuro si potrebbe facilmente sostituire/integrare con un esterno.

Buona notte, a domani


#5

Ok, provo a buttar giù un elenco di funzionalità che dovrebbe / potrebbe avere questa interfaccia, sulla base di quello che ho già scritto in apertura. Tenete conto che al momento il nostro obiettivo è arrivare a sintetizzare l’idea in un piccolo documenti di progetto (che abbiamo chiamato Azione) come descritto qui.

  • Visualizzazione opportuna degli attributi degli oggetti del JSON che rappresenta la lista delle fonti (es. stringhe di testo, ma anche pin su mappa).
  • Filtro dinamico esposto all’utente, mediante selezione di tag o inserimento di testo libero (es. una roba come exhibit).
  • Proposta link di azioni per ogni fonte (es. “iscriviti agli aggiornamenti di X” con link al feed, “segnala nuova fonte” o “un errore”, ecc.).
  • Visualizzazione di un estratto degli ultimi documenti prodotti da ogni fonte.
  • Visualizzazione di altre informazioni provenienti da join con altre fonti dati (es. un endpoint che dall’id della fonte ritorna statistiche sullo scraper associato, come il numero totale di documenti raccolti).
  • Possibilità di selezionare un certo numero di fonti e ottenere così un feed aggregato solo di quelle.

Per avere un’idea dei dati che potrebbero arricchire quelli già presenti nel JSON, tenete conto che ci sono una chiave primaria (id) e 3 chiavi esterne al momento: ipa_code, istat_code e scraper.

In prima battuta direi che si tratta di un’interfaccia di sola lettura, in cui l’input dell’utente si limita alla ricerca e al filtro. Eventuali azioni da parte sua riguardano al massimo il caricamento on-demand di ulteriori risorse oppure la navigazione su altre pagine seguendo un link.

Deve senz’altro essere una panoramica accessibile e comprensibile anche a chi non lavora al progetto. Ma deve essere focalizzata sulle fonti e non sui singoli documenti che producono (che al massimo vengono visualizzati come anteprima).

E sì, quel JSON, se non si può esporre via github, lo possiamo rendere accessibile nello stesso dominio dell’applicazione (o abilitando i CORS).


#6

Mi sembra tutto molto chiaro.
Secondo me questo mini-progetto ha già molte carte in regola per partire come Azione (mi pare ne abbia le caratteristiche elencate qui), per poi magari espandersi in futuro.

Se si procedesse alla scrittura del documento di progetto, potrei provare ad assegnarmi qualche task e stimarne la tempistica.
Penso inizialmente alla parte di wireframe, poi di prototipazione (html, css e javascript “di presentazione”) e, in seguito, alla vera e propria app javascript che gestisca realmente chiamate ai feed e risorse.

Ma non vorrei che stessi correndo troppo, quindi attendo altre istruzioni :slight_smile:


#7

Beh, direi ottimo… :slight_smile: Allora pensiamoci ancora qualche giorno e lunedì buttiamo giù l’azione, intanto se ti va condividi qui le tecnologie che conosci meglio o con cui lavori più spesso, sono curioso e poi così ci allineiamo…


#8

Certo!
Di solito lavoro a interfacce mobile, desktop e responsive con HTML, CSS e Javascript, in diverse modalità. Per comodità faccio un elenco :slight_smile:

  • HTML5. Incluse webview per app mobile, Appcache, Local Storage, Web Worker
  • CSS3. Preferendo SASS come preprocessore e usando alcuni tool di PostCSS, da compilare automaticamente con Gulp o Grunt
  • Javascript. Usando Backbone, Underscore, codice nativo o jQuery
  • Mi piace adottare Atomic Design come pattern di design e struttura degli elementi UI
    Google Maps API
  • Ho lavorato su view in PHP, anche con frameworks come CakePHP e template engines come Twig
  • Se è necessario, lancio un container Docker condiviso per l’applicativo
  • Per la parte di design, preferisco Sketch (anche per i wireframe, alternativamente a Balsamiq) e so usare Photoshop

Pensando all’interfaccia grafica delle fonti monitorate, avevo istintivamente pensato a qualcosa del genere:

  • usare Material Design come “visual language”, forse monotono ma secondo me sempre chiarissimo per mostrare dati. E diversi UI Framework (compreso uno ufficiale di Google) servono già componenti pronti, velocizzando lo sviluppo
  • come già detto, creare dei wireframe indicativi per capire bene come strutturare l’applicativo
  • potrebbe essere l’occasione per imparare a usare React? Non ho ancora avuto l’occasione di usarlo e la tipologia di progetto mi sembra adatta
  • al di là della questione “framework javascript sì o no e quale”, penso a un’app javascript che faccia chiamate ai feed, ne restituisca il contenuto e popoli o renderizzi i componenti HTML/CSS, seguendo la struttura e la logica di esperienza utente già decisa in fase di wireframing/prototyping

Se avete qualunque domanda, indicazione o suggerimento, sono qui!
Buon weekend


#9

Ok, ottimo, normalmente io uso Webpack per gestire la “compilazione” delle varie dipendenze ed essendomi un po’ specializzato in data visualization metto sempre un po’ ovunque il comodo d3js:slight_smile: Non ho mai approfondito né React né Angular, anche perché hanno delle caratteristiche che non mi hanno mai convinto, mentre ultimamente mi sto divertendo molto con RiotJS accoppiato con Nanoflux Fusion (implementazione di Redux): viva i web components! :slight_smile:

@guenter.richter, dicci anche tu… le tue mappe sono un ottimo punto di partenza per quanto riguarda i dati geografici, naturalmente, mi chiedo però come si possano integrare in una pagina che abbia anche altri componenti… si possono embeddare solo come iframe o si può usare una libreria con una API tale da poterne integrarne i metodi in un’applicazione custom?


#10

@jenkin grazie per la chiamata :slight_smile: vedo molte cose che mi piacciono anche se, lo devo ammettere, uso solo jquery and bootstrap, forse perché mi serve solo per scrivere delle paginine per gestire i temi della mappe;

  • sono molto accordo su Material Design e usare colori significativi
  • e anche sul responsive con HTML, CSS e Javascript
  • di framework oltre a jquery, jquery ui, jquery mobile conosco solo bootstrap ma benvenuto tutto che facilita

al di là della questione “framework javascript sì o no e quale”, penso a un’app javascript che faccia chiamate ai feed, ne restituisca il contenuto e popoli o renderizzi i componenti HTML/CSS,

per popolare dashboards ho cominciato una piccola lib in Javascript per caricare dati da feed, creare un oggetto JSON con metodi di filtrare, combinare o aggregare fonti per tirare fuori i dati che servono; se avete voglia di curiosare https://github.com/gjrichter/data.js
Anche la demo è interessante, ho cannibalizzato un bootstrap dashboard template che trovato nella rete; li mi è piaciuto attributo data-path=’…’ per renderizzare valori caricati dai feed.

le tue mappe … mi chiedo però come si possano integrare in una pagina che abbia anche altri componenti… si possono embeddare solo come iframe o si può usare una libreria con una API tale da poterne integrarne i metodi in un’applicazione custom?

si - il framework ixmaps è una scatola cinese di iframe, ma ogni strato ha una API per manipolare la mappa; la scatola più esterna ha un’interfaccia REST per creare una mappa tematica completa, la scatola più piccola è un semplice oggetto SVG che contiene i layer in SVG e tutto il codice per manipolarli; normalmente carico una pagina HTML che contiene l’ogetto SVG (mappa vuota) e un DIV con la mappa di fondo (leaflet) in un iframe e un Javascript con una API, e aspetta che l’API mi dice che la mappa e pronta;
poi posso creare temi e altre cose utile con l’API; posso avere più mappe (iframes con id) e anche dire all’API di synchronizzarli; qui un jsfiddle

spero che dal esempio in jsfiddle si può vedere se la mappa possa esse integrato;

sicuramente, c’è un sacco di codice Javascript per manipolare il DOM del SVG; non mi ricordo se ho cominciato prima che esistesse D3.js, si potrebbe riscrive tutto benissimo come applicazione di D3.js; ma comunque il cuore di iXMaps e il linguaggio JSON per definire temi da dati grezzi; ( e si può pure integrare D3.js per dipingere grafici (via callback user drawn chart) che per ogni posizione ti da i dati e un gruppo SVG dove realizzare la tua grafica; poi lo script della mappa lo posiziona e adatta a zoom e pan)

Son sempre felice se ci sono domande e critiche,
a presto


#11

Ok, sono pronto finalmente a scrivere l’azione dedicata a questo lavoro, così possiamo cominciare a lavorarci seriamente… Intanto butto nella mischia anche @Giacomo , super designer in quel di Milano: http://gdepadesign.com/.


#12

Ecco fatto: Interfaccia grafica di navigazione delle fonti monitorate. Ci riusciamo per metà maggio a mettere on-line qualcosa di funzionante?


#13

Come desiderable aggiungo possibilità di classificare ogni singolo item ed ogni specifico allegato di esso


#14

Non c’entra nulla temo, questa interfaccia serve per navigare le fonti, non i documenti prodotti dalle fonti… :slight_smile:


#15

Ciao a tutti! e grazie Jenkin per avermi inserito in questo gruppo e per l’opportunità di partecipare al progetto.


#16

Ottimo :slight_smile:

Direi che per capire le tempistiche possibili è necessario mettere giù i task 1 e 2, che ci portano a definire le funzionalità del MVP.

Personalmente preciso che, lavorando 40 ore a settimana (immagino come alcuni o molti di voi), il tempo che potrò dedicare al progetto non sarà molto (in termini di ore alla settimana, intendo, non complessivamente).

Una volta chiari i task 1 e 2, e se siete d’accordo, mi piacerebbe prendere in mano il task 3 (wireframe), dando una stima quanto più precisa di quando credo di poterlo portare a termine.

Per cominciare a lavorare sui primi due task, cosa usiamo: un documento di google condiviso? Un thread di questo forum?


#17

@giovannipolimeni ho spostato qui il tuo commento, teniamo il thread dell’azione solo per aggiornamento ufficiali.

Per me possiamo continuare a parlarne qui, se serve strutturare un documento di riepilogo o archiviare dei materiali, usiamo questa cartella condivisa.

Mi pare che in questa discussioni fin qui siano uscite molte idee per finalizzare i primi due task… @giovannipolimeni, vuoi provare tu a fare un elenco puntato di sintesi in un doc?


#18

@jenkin, volentieri.
Mi daresti permesso di scrittura per quella cartella condivisa?


#19

Scusa, pensavo l’avessi, prova ora… :slight_smile:


#20

Perfetto, grazie :slight_smile: