In questo capitolo ho analizzato, una ad una, tutte le tecnologie che faranno parte del prototipo di portale per la distribuzione di documenti le- gali. Sono partito dal web server Node.js, dimostrandone le peculiarit`a ed i pregi rispetto ad altri web server classici ampiamente utilizzati nel web. Successivamente ho introdotto il concetto di API REST ed evidenziato l’im- portanza della risorsa, la chiave di questo tipo di architettura. Nella terza sezione ho parlato dell’interfaccia, introducendo la locuzione front-end frame- work, ed illustrando i pregi dell’utilizzo di Semantic-UI. Nella quarta sezione
ho parlato delle chiamate AJAX, una pratica gi`a ampiamente diffusa sul
web per permettere che l’interazione fra l’utente e il sito avvenga in modo asincrono, indipendentemente dalla comunicazione col server. Infine, nella quinta sezione, ho riassunto tutte le tecnologie che compongono il portale, di cui nel prossimo capitolo ne spiegher`o l’effettiva implementazione.
Fmx2Akn, l’implementazione
del portale
Il quinto capitolo di questa dissertazione si occupa dell’implementazione del prototipo di portale Fmx2Akn, ed `e arricchito con porzioni di codice
e screenshot delle schermate disponibili. La prima sezione fornisce una
panoramica dell’architettura del portale, specificando la funzione di ogni sin- golo file creato, la struttura delle cartelle, le route disponibili ed illustrando il codice dell’istanza di web server, il punto di partenza del portale. Nella seconda sezione viene illustrata l’interfaccia, elencando tutti gli elementi es- clusivi del front-end framework che ho utilizzato e gli helper personalizzati che ho creato, specialmente per la visualizzazione della tabella dei risultati. La terza sezione descrive il file eurlex.js, una libreria da me creata ricca di funzioni in grado di poter manipolare i metadati contenuti in CELLAR. La quarta sezione fornisce un’analisi dettagliata dell’utilizzo del portale, e di cosa succede sia nel front-end che nel back-end al momento della visualizza- zione della home page, della digitazione dei caratteri, dell’avvio della ricerca e della visualizzazione del risultato finale. Infine, nella quinta sezione, vengono illustrate altre funzionalit`a importanti a cui per`o non `e possibile accedere tramite interfaccia.
5.1
L’architettura del portale
In questa sezione spiego come ho strutturato il prototipo di portale, il- lustrando i file creati, il loro percorso e il loro scopo. Li elenco:
fmx2akn.js - `e il cuore del web server, il file da associare all’istanza di Node.js;
db.js - contiene le funzioni relative alla connessione, visualizzazione ed ag- giornamento dati al database MongoDB (in cui sono contenuti metadati relativi alle direttive europee);
hbshelpers.js - questo file contiene gli helper, delle funzioni che vengono date in pasto al template engine permettendogli di popolare i layout dell’interfaccia con i dati effettivi;
*.json - sono file che contengono parametri di configurazione;
public/ - in questa cartella sono contenuti tutti i file statici da inviare al client (immagini, fogli di stile, javascript lato client e file relativi all’in- terfaccia con Semantic-UI);
routes/ - ciascun file .js in questa cartella rappresenta una specifica route disponibile sul web server;
views/ - file relativi alle view e ai layout, ovvero gli scheletri di interfaccia che verranno riempiti grazie al template engine;
node modules/ - qui sono contenute tutte le librerie aggiuntive del web server, non scritte da me, recuperate grazie al gestore di pacchetti npm; data/ - in questa cartella verranno salvati tutti i file relativi ai processi di
download delle direttive europee, recuperati da EUR-Lex;
utils/ - cartella che contiene sia la libreria per interfacciare Node.js con eXist-DB (recuperato sul web) che il file eurlex.js, in cui ho disposto
una serie di funzioni per estrapolare dati importanti riguardo ad una direttiva contenuta in CELLAR.
Il punto di partenza, fmx2akn.js, `e costituito da un file molto piccolo, in quanto ho deciso di inserirci il minimo indispensabile solo per tirare su un’istanza di web server: inclusioni di alcuni moduli e librerie essenziali, file di configurazione, definizione delle varie route da seguire, del template engine, e infine connessione col database MongoDB (la creazione dell’istanza del server `e vincolata dalla buona riuscita della connessione al database).
Listing 5.1: Il file fmx2akn.js, il punto di partenza del web server
1 var fs = r e q u i r e (’ fs ’) ; 2 var e x p r e s s = r e q u i r e (’ e x p r e s s ’) ; 3 var e x p h b s = r e q u i r e (’ express - h a n d l e b a r s ’) ; 4 var XML = r e q u i r e (’ pixl - xml ’) ; 5 var db = r e q u i r e ( _ _ d i r n a m e +’ / db . js ’) ; 6 var cfg = J S O N . p a r s e ( fs . r e a d F i l e S y n c ( _ _ d i r n a m e + ’ / c o n f i g . j s o n ’) ) ; 7 var h o m e R o u t e = r e q u i r e ( _ _ d i r n a m e +’ / r o u t e s / h o m e . js ’) ; 8 var s e r v e R o u t e = r e q u i r e ( _ _ d i r n a m e +’ / r o u t e s / s e r v e . js ’) ; 9 var d o w n l o a d R o u t e = r e q u i r e ( _ _ d i r n a m e +’ / r o u t e s / d o w n l o a d . js ’) ; 10 var p r o x y R o u t e = r e q u i r e ( _ _ d i r n a m e +’ / r o u t e s / p r o x y . js ’) ; 11 var s u g g e s t R o u t e = r e q u i r e ( _ _ d i r n a m e +’ / r o u t e s / s u g g e s t . js ’) ; 12 var app = e x p r e s s () ; 13
app . set (’ p o r t ’, p r o c e s s . env . P O R T || cfg . e x p r _ p o r t ) ;
14 app . e n g i n e (’ . hbs ’, // S E T T I N G THE T E M P L A T E E N G I N E 15 e x p h b s ({ 16 d e f a u l t L a y o u t : ’ m a i n ’, 17 e x t n a m e : ’ . hbs ’, 18 h e l p e r s : r e q u i r e ( _ _ d i r n a m e +’ / h b s h e l p e r s . js ’) 19 }) ) ; 20 app . set (’ v i e w e n g i n e ’, ’ . hbs ’) ; 21 app . use ( e x p r e s s . s t a t i c (’ p u b l i c ’) ) ; // S T A T I C R E S O U R C E S 22 app . get (’ / ’ , h o m e R o u t e ) ; 23
app . get (’ / s e r v e /: c e l e x /: opt ? ’, s e r v e R o u t e ) ;
24
app . get (’ / d o w n l o a d /: c e l e x /: p a r 1 ?/: p a r 2 ? ’, d o w n l o a d R o u t e ) ;
25
26
app . get (’ / s u g g e s t /: i n p u t ’, s u g g e s t R o u t e ) ;
27
app . get (’ / d l f e e d /: c e l e x ’, f u n c t i o n( req , res ) {
28 var clx = req . p a r a m s . c e l e x ; 29 db . f e e d D l ( clx , f u n c t i o n( err , d b O b j ) { 30 res . j s o n ( d b O b j ) ; 31 }) 32 }) 33 db . c o n n e c t ( cfg . m o n g o _ u r l , f u n c t i o n( err ) { 34 if ( err ) { // U N A B L E TO C O N N E C T TO M O N G O 35 p r o c e s s . e x i t (1) 36 } e l s e { 37
app . l i s t e n ( app . get (’ p o r t ’) , f u n c t i o n() {
38 c o n s o l e . log ( ’ F m x 2 A k n ! E x p r e s s s t a r t e d on h t t p :// l o c a l h o s t : ’ + 39 app . get (’ p o r t ’) + ’ ; p r e s s Ctrl - C to t e r m i n a t e . ’ ) ; 40 }) ; 41 } 42 }) ;
Spiego brevemente le route che ho inizializzato e a cosa servono:
/ - rappresenta la home del portale, con la barra di ricerca al centro della pagina ed una porzione in basso che indica gli ultimi documenti aggiunti al database;
/serve/ - `e la route che entra in gioco nel momento in cui effettuiamo una ricerca, producendo come risultato finale una tabella con l’elenco di tutti i file relativi al documento; prende in input un ID CELEX e un altro parametro opzionale (per restituire, ad esempio, solo il Tree Notice del documento);
/download/ - questa route rappresenta una scorciatoia per il download di un singolo documento (specificando lingua e formato) oppure di un archivio contenente pi`u file che soddisfano un certo requisito (ad esem- pio tutti i formati per una specifica lingua);
legamento per il download dei vari file nella tabella del risultato della ricerca;
/suggest/ - `e la route che accoglie la richiesta AJAX per fornire un sugge- rimento di risultato durante la digitazione del CELEX;
/dlfeed/ - route che viene invocata per offrire un feed all’utente riguardo allo stato attuale del recupero dei dati da EUR-Lex (dopo aver digitato il celex).