Questo é un progetto per certificare le competenze acquisite con la Super Guida JavaScript Advanced di Start2Impact, categoria lifestyle.
Realizzerai un'app che permetta di ottenere informazioni riguardo la qualità della vita delle città attraverso l’utilizzo del servizio esterno Teleport.
L’applicazione dovrà essere composta da un semplice textbox (Google style) per permettere all’utente di inserire il nome di una specifica città.
Una volta che l’utente cliccherà su un apposito button, l’applicazione dovrà contattare le API del servizio esterno Teleport per ottenere la informazioni da visualizzare in pagina, dove los-angeles è la città inserita dall’utente.
Una volta ricevuti i dati dal servizio esterno l’applicazione dovrà visualizzare in pagina le informazioni riguardanti le categorie, la descrizione e il city score della città:
"categories": [ { "color": "#f3c32c", "name": "Housing", "score_out_of_10": 1.5274999999999999 }, { "color": "#f3d630", "name": "Cost of Living", "score_out_of_10": 4.556000000000001 }, { "color": "#f4eb33", "name": "Startups", "score_out_of_10": 10 }, .... "summary": "
\n Los Angeles is a sprawling city of 500 square miles and the heart of a metropolitan area with 18 million residents. It is a fabled California region, home to Hollywood and America's entertainment industry with year-round sunshine, world-famous beaches, and an intense car culture. The "City of Angels" is a magnet to people from around the world and a uniquely exciting environment.\n
\n\n\nLos Angeles is one of the top ten city matches for 11.5% of Teleport users.
\n", "teleport_city_score": 63.426351351351364L'applicazione deve essere sviluppata con JavaScript.
Ti consigliamo di utilizzare delle librerie esterne JavaScript, ma non è obbligatorio.
Sono ammesse tutte le funzionalità aggiuntive che si ritengono necessarie.
Git Git è oggi un requisito fondamentale per lavorare come sviluppatore, sia in azienda sia come freelancer. Ma che cos’è veramente? Cosa vuol dire “software di controllo versione distribuito?” E perché scegliere proprio Git?
Per scoprire perché è importantissimo utilizzarlo vai subito al Corso HTML e CSS nella sezione "Progetto" e leggi il materiale a disposizione su Git. Se invece hai già studiato come utilizzarlo prosegui con la lettura delle istruzioni per il progetto.
Il progetto deve essere committato nel tuo repository GitHub, il quale deve contenere tutto il codice sorgente dell'applicazione e anche il file README contenente la descrizione del progetto, screenshot dell'applicazione (se necessario), il link ben visibile di dove provare l'applicazione.
Inserisci tutte le informazioni che riteni opportune. Di seguito trovi vari link utili per creare un buon README:
Best README Template Awesome README README cercare su Google “git README template”
Webpack Oltre ad aver capito come funziona Git, e aver capito il funzionamento del file .gitignore, il prerequisito per pubblicare il codice JavaScript su Git è studiare webpack, di cui si possono trovare i concetti fondamentali qui.
Environment Variables Devi esplorare anche un po' il concetto di Environment Variables, per il quale trovi una piccola introduzione qui.
Webpack-Dotenv Axios o simili Axios è un pacchetto JS che ti permetterà molto più facilmente di effettuare chiamate esterne tramite JavaScript.
Lodash o simili Lodash integra una serie di funzioni che possono esserti utili. In particolare, se lavori con dati da API esterne, dai un'occhiata alla sua _.get()
Struttura progetto Verrà valutata la bontà del codice scritto. Ci si aspetta una giusta suddivisione e implementazione delle logiche del progetto (cambio valore, visualizzazione valore) in diverse funzioni, se necessario in diversi file.
Verrà valutata la bontà della struttura del progetto:
il contenuto html nell'apposito file index.html il contenuto del codice JavaScript all'interno di file .js contenuto nella cartella JS il contenuto dello stile del progetto all'interno del file .css contenuti nella cartalla CSS il contenuto delle immagini (se necessarie) all'interno dell'apposita cartella IMG Di seguito ti lascio qualche link utile da cui trarre ispirazione:
How to Create a Front End Project Structure That Scales and Is Easy to Maintain? A Good Front-End Architecture Frontend structure
Il progetto deve essere commutato nel tuo repository GitHub, il quale deve contenere tutto il codice sorgente dell'applicazione e anche il file README contenente la descrizione del progetto, screenshot dell'applicazione (se necessario), il link, ben visibile, per provare l'applicazione. Inserite tutte le informazioni che ritenete opportune.
Il progetto deve essere deployato su qualsiasi Web Host gratuito (Netfly, Firebase....)
Prima di inviare il progetto controlla che l'applicazione funzioni correttamente. Infine crea un documento PDF dove inserire il link cliccabile al repository GitHub.
Client:
Server:
Bundler:
Questa é una web app creata per visualizzare i dati sulla qualità della vita nelle città forniti da Teleport.
Questo é il primo progetto in cui combino insieme così tanti elementi: gestione dei dati ottenuti da più servizi esterni, animazioni, gestione degli errori, un menù con i dati salvati e riutilizzabili, la persistenza di tali dati attraverso un database, la creazione di cartelle e file e la loro modifica, l'utilizzo di un bundler sia per il lato client che server ed il deploy dell'app su un Web Host gratuito.
Le richieste dei dati verranno effettuate tramite Axios. I dati sulle città ottenuti da Teleport verrano presentati in 3 diverse pagine al momento della ricerca: nella prima vi saranno il titolo, con nome della città ricercata, Paese e continente, la descrizione ed il punteggio dato da Teleport in percentuale, ottenuto dalla media tra tutti i valori di ogni singola categoria, che verranno visualizzati nel dettaglio nella seconda e terza pagina inseriti ordinatamente in due tabelle.
L'app inoltre, in caso di riscontro negativo sulla presenza della città, effettuerà una nuova ricerca tra tutte le città disponibili nell'API Teleport selezionando quelle dello stesso Paese della città ricercata inizialmente e fornendole come alternative.
Il design delle tre pagine in cui verranno visualizzati i dati della città é volutamente scelto per trasmettere un senso di continuità: elementi come le text boxes allungate verso la seconda pagina o le tabelle leggermente spostate contenute in un unico riquadro sono dettagli pensati per spingere l'utente a scorrere tra le pagine e rendere l'esperienza più fluida e piacevole alla vista.
L'app nel suo complesso é stata sviluppata con un approccio mobile-first rendendo comunque i vari elements responsive per le varie tipologie di display: mobile, tablet e desktop. Per ottimizzare la visualizzazione dell'app soprattutto sui dispositivi portatili, dove si può passare da un orientamento portrait ad uno landscape velocemente e la barra di ricerca può apparire ed essere nascosta, ho aggiunto il ricaricamento della pagina al verificarsi di un event resize. Questo favorirà anche la scomparsa di alcuni buttons in favore di altri per migliorare l'usabilità della web app in entrambe le modalità di visualizzazione.
Le varie parti dell'app si basano sia sul client che sul server side. Qui ho utilizzato Node.js per l'effettivo funzionamento del server e per gestire le varie richieste effettuate dall'utente: il salvataggio di dati, la ricerca tra questi con il controllo sulla loro presenza, la richiesta di immagini da Pixabay, la loro modifica e altro. Per quanto sia basilare come codice, ritengo comunque soddisfacente il fatto che tutto funzioni nel modo corretto.
Lo sfondo sarà composto da due immagini, la prima sarà una foto ottenuta da Pixabay, sempre attraverso Axios ma utilizzato nel server node, alla quale verrà data un'opacità bassissima per ricavarne solamente i colori sfumati, la seconda verrà elaborata dalla prima attraverso canny-edge-detector ed image-js, due pacchetti NPM che combinati ricaveranno un'immagine con i bordi delle figure presenti nella foto, per poi salvarla rendendola utilizzabile. Quest'immagine unita al filter CSS invert e poi sovrapposta alla prima immagine, creerà uno sfondo con uno stile simile ad un disegno.
Nel caso non fosse presente un'immagine per una determinata città ricercata nell'API di Pixabay, verrà utilizzata quella disponibile nell'API di Teleport con la stessa procedura.
Un effetto che ho voluto inserire nella modalità mobile e tablet farà scorrere l'immagine quando si scrollerà a destra o sinistra rivelando una nuova parte dello sfondo.
La scelta di usare Pixabay é stata presa grazie all'alta qualità artistica e visiva delle foto rispetto ad alcune altre API provate.
L'app utilizza un database molto basilare, NeDB, mia prima esperienza in questo campo, per la persistenza dei dati. Tramite questo sarà possibile cominciare ad utilizzare l'app con una lista di città predefinite da visualizzare senza la necessità di richieste all'API di Teleport ed inoltre sarà possibile salvarvi le proprie città preferite durante le ricerche o eliminarle a piacere. Ho optato per questo approccio rispetto ad altri, come ad esempio LocalStorage, per poter sopperire ad eventuali problemi futuri dei server Teleport ed avere una base di dati facilmente estendibile, in modo da mantenere utilizzabile l'app con le città salvate nel caso di quest'eventualità.
Come bundler per quest'app ho utilizzato Webpack 5. Sperimentato per la prima volta per questo progetto, Webpack si é dimostrato molto utile per aumentare le prestazioni e la stabilità dell'app. Per quanto a primo impatto mi sembrasse superfluo il suo l'utilizzo, ho dovuto ricredermi: dal rilevare parti di codice non utilizzato, alla possibilità di minificarlo in modo molto semplice, fino ad una maggiore percentuale di riuscita delle request, soprattutto delle immagini, la creazione automatica delle favicon necessarie per ogni sistema operativo e molto altro, si é dimostrato uno strumento utilissimo per migliorare e completare l'app nel suo intero.
Questo progetto chiaramente avrà alcune piccole lacune dovute alla mia poca esperienza soprattutto con Node.js e Webpack, che andranno comunque nel breve tempo colmate in modo da aggiornarlo al più presto. Per porre un esempio, una piccola parte da segnalare é non aver trovato una soluzione per inserire nel bundle il file citiesDatabase.db, problema che non interferisce con il corretto funzionamento della web app, ma resta comunque da sistemare per completezza.
Anche se molto sporadici, possono avvenire degli errori nella modifica e nel salvataggio delle immagini. Proprio per questo ho inserito una serie di error handling per coprire la maggioranza delle situazioni, compresi errori critici che porteranno ad un ricaricamento piuttosto che ad un crash della web app.
Risorse utilizzate:
- Start2Impact Courses
- Teleport API Documentation and Explorer
- Axios Documentation
- Coding Train "Working with Data and API" Playlist
- Node.js Documentation
- Node Academy Tutorial
- Pixabay API Documentation
- canny-edge-detector README
- image-js README
- NeDB README
- Coding Train "NeDB Tutorial"
- Webpack Documentation
- Ben Grunfeld Node "Express - Webpack Tutorial"
- Gianluca Scocozza "Webpack 5" Playlist
La prima schermata dell'app, molto basilare ed intuitiva, dà la possibilità di
scegliere tra:
- 🔍 la ricerca di una città
- ☰ l'utilizzo del menù, per selezionare una delle città salvate in precedenza o per eliminarle dalla memoria a piacimento.
🔍 Effettuando una ricerca si potranno ottenere vari risultati:
- Se la città é presente nei dati Teleport, compariranno nella prima pagina il titolo, la descrizione, il punteggio in percentuale dato alla città ed i dati sugli aspetti tenuti in considerazione per ottenere tale punteggio, ordinati in due tabelle nella seconda e terza pagina. Sarà inoltre possibile salvare tale città tramite l'apposito tasto in basso a sinistra ★. Se si ricercherà il nome di uno Stato invece che di una città, verrà effettuata la ricerca della capitale di tale Stato. I nomi possono essere inseriti nelle varie lingue europee, non obbligatoriamente in inglese.
- Se effettuando una ricerca i dati della città non fossero presenti, verrà effettuata una nuova ricerca su tutte le possibili alternative per il Paese di tale città, tra le quali sarà poi possibile scegliere ed osservarne i dati.
- Se la città non esistesse o fosse avvenuto un errore nell'inserimento del nome o vi fosse un problema di connessione del dispositivo o altro, compariranno dei messaggi di errore adatti.
L’applicazione é stata pubblicata tramite il servizio di web hosting Heroku con il supplemento del servizio Kaffeine, in modo che l'app possa entrare in mode sleep solo dalle 23:00 alle 5:00 GMT.
E’ possibile utilizzarla al link:
🔗 How is There - Lifestyle App
Queste sono le correzioni da effettuare consigliate dal coach di Start2Impact dopo la correzione:
- aggiungere Lodash per gestire la possibilità che venga restituito undefined dalla request
- concentrare l'attenzione sull'avere una value di default per le request, legato al primo punto
Questi sono i miglioramenti che verranno effettuati dopo la correzione per modernizzare e migliorare l'app:
- ottimizzare il controllo della presenza dei dati nel database
- migrazione database da NeDB a MongoDB
- miglioramento codice server side dopo lo studio della guida Node.js
- ottimizzazione animazione input con event once
Distributed under MIT License.
Alex
GitHub
Linkedin
Instagram
Facebook