mercoledì 22 agosto 2018

Angular e SWAPI



Mi sono iscritto ad un corso di  Angular e React tenuto da Antony Mistretta.

Nella prima lezione ci ha suggerito un ottimo sito di API online da utilizzare come sorgenti per delle applicazioni di prova  https://swapi.co con un semplice set di oggetti e di chiamate REST basate su architettura Django. ( Indagando sul web ho trovato anche le https://pokeapi.co/ ma sono veramente troppo complesse... e poi bisogna conoscere il mondo dei pokemon.... )



Per realizzare una piccola demo con Angular per sfruttare le informazioni presenti nel sito ho utilizzato alcuni componenti a me famigliari:

- PrimeNG : personalmente le trovo più complete delle Material
- Compodoc: generatore di documentazione like javadoc molto completo


Alcune funzionalità degne di nota:

- Cache : cache delle chiamate nella sessione del browser, quando devo accedere a elementi uguali ricorrenti salvo l'informazione come chiave valore, dove la chiave è il mio url di chiamata e invece il valore è l'object caricato.

/**
*
* Verifica la presenza di un singolo valore in session storage,
* se non esiste esegue la chiamata
*
* @param {string} url
* @returns {*}
* @memberof ApiService
*/
public getLookUp(url: string): any {
if (sessionStorage.getItem(url)) {
return JSON.parse(sessionStorage.getItem(url));
} else {
this.getUrlDetail(url).then(result => {
sessionStorage.setItem(url, JSON.stringify(result));
return result;
});
}
}
- Estensione dei modelli e dei controller principali con classi di base per ridurre codice in esubero.




TODO
- e2e test
- karma test
- Caricamento di un templateUrl dinamico così da utilizzare un solo Componente per gestire tutte le pagine.
- Ricerca sulle tabelle usando i parametri di search