Boolbnb è un’applicazione web sviluppata dal Team3 della Classe 11 di Boolean Careers.
Permette ad un utente di cercare e visualizzare annunci di appartamenti in base ad alcuni filtri (indirizzo, distanza e servizi ecc) e di contattare il proprietario di ogni appartamento. Permette anche la registrazione e dunque il login.
Ciascun utente registrato ha la possibilità di creare un annuncio per un suo appartamento, tale annuncio sarà modificabile, eliminabile, sponsorizzabile e permetterà la ricezione di messaggi da altri utenti.
In tutte le pagine (tranne la dashboard personale) l'intestazione e il piè di pagina sono sempre uguali. L'intestazione è differente tra utente registrato e utente non registrato poiché nel primo caso viene visualizzato il nome dell'utente e scompaiono i tasti di registrazione e login. Il piè di pagina contiene collegamenti ai profili LinkedIn degli sviluppatori del progetto, dei teacher e staff di BooleanCareers e le tecnologie utilizzate per lo sviluppo.
La pagina iniziale, con la grafica minimal, invoglia subito l'utente a cercare una meta presso cui alloggiare, suggerendogli alcuni luoghi famosi grazie allo slider di monumenti. Nella seconda metà della pagina sono mostrati gli appartamenti sponsorizzati attualmente attivi. Per effettuare una ricerca basta scrivere il nome della città (o addirittura l’indirizzo) nel campo di testo e premere invio o il pulsante dedicato.
La pagina di dettaglio dell’appartamento ne mostra tutte le caratteristiche. In alto troviamo il titolo e l’indirizzo, subito sotto troviamo una grande card con il resto delle info: l’immagine ingrandita in modo da permettere all’utente di avere una visione più chiara dell’appartamento, la descrizione (scrollabile in base alla lunghezza), il dettaglio del numero di stanze, posti letto e bagni, la metratura e l’elenco dei servizi forniti. A destra troviamo la mappa che con un marker indica l'ubicazione esatta dell’appartamento.Inoltre questa pagina è diversa in base all'utente che la visualizza:
- L'utente non registrato può inviare un messaggio al proprietario dell'appartamento inserendo una mail e la sua domanda nel form dedicato
- L'utente registrato NON proprietario, può inviare un messaggio al proprietario dell'appartamento. Il campo mail sarà pre-compilato con la mail di registrazione
- Il proprietario non può auto-inviarsi un messaggio! Al posto del form troverà un pannello di controllo relativo all'appartamento, in particolare:
- Se l'appartamento non è sponsorizzato, vedrà i bottoni per modificarlo, cancellarlo, vederne le statistiche o sponsorizarlo.
- Se l'appartamento è sponsorizzato, vedrà solo i bottoni per modificarlo, cancellarlo, vederne le statistiche.
L'utente non può inviare un nuovo messaggio se non sono trascorsi 10 secondi dal suo ultimo invio.
In qualsiasi pagina del sito è possibile fare la registrazione o login, cliccando nella sezione dedicata dell’intestazione di pagina.
Cliccando su "Registrati" l'utente viene reindirizzato in una pagina con un form di registrazione contenente dei campi obbligatori quali nome, mail e password e campi non obbligatori quali cognome e data di nascita.
Il form di registrazione controlla che i dati obbligatori vengano inseriti e che siano coerenti con la tipologia di dato richiesta (esempio la mail deve contenere la @ e il punto). Nel caso in cui i dati inseriti non soddisfino determinati controlli verrà restituito un messaggio in alto con uno o più suggerimenti. Se la registrazione va a buon fine, e al login, l'utente viene subito reindirizzato nella dashboard.
Nella pagina di ricerca l'utente trova in alto la SearchBox con il campo ricerca già compilato con la query inserita nella Home Page, un tasto “cerca” nel caso in cui volesse farne un'altra e il tasto “più filtri” per raffinarla.
Quest’ultimo tasto, se premuto, fa apparire un prolungamento della SearchBox che permette di inserire parametri di ricerca più restrittivi: numero di stanze, posti letto, e distanza in chilometri rispetto al punto cercato. Inoltre è possibile indicare quali servizi l'appartamento deve avere per comparire in ricerca. I servizi disponibili sono: Wi-Fi, Posto Auto, Piscina, Portineria, Sauna e Vista Mare. Un secondo click sul tasto “più filtri” nasconde il prolungamento.
Sotto la SearchBox si estende la lista dei risultati filtrati in base ai parametri di ricerca: per primi verranno mostrati gli appartamenti sponsorizzati poi in ordine di distanza (dal più vicino al lontano) gli altri appartamenti.
In formato Card, ogni risultato fornisce informazioni sull’appartamento: il Titolo, la Descrizione (con un numero limitato di caratteri), il Proprietario dell'appartamento, i Servizi disponibili, e nel caso degli annunci non sponsorizzati la distanza dall'indirizzo inserito in ricerca (in m se sotto il chilometro, in km se sopra).
La card reagisce al passaggio del mouse con un leggerissimo ingrandimento ed è possibile interagire con essa cliccando sul titolo o l’immagine dell’appartamento portandoci nel dettaglio dell'annuncio.
E’ possibile sponsorizzare il proprio annuncio sia cliccando sul tasto "Sponsor" nella pagina di dettaglio sia cliccando sull'apposita icona nella dashboard. La pagina dello sponsor permette la scelta di tre tariffe:
- Silver
- 2.99€
- 24 Ore
- Gold
- 5.99€
- 72 Ore
- Platinum
- 9.99€
- 144 Ore
Scelto uno sponsor si attiva il pulsante per il pagamento e una volta cliccato è possibile inserire i dati della carta di credito per procedere all’acquisto. L’esito del pagamento viene comunicato in alto alla pagina. Una volta attivato lo sponsor per un appartamento non è possibile cambiarne le caratteristiche o attivarne altri finché lo sponsor non scade.
Questa è la sezione più personale del sito, infatti qui si trovano tutti i dati relativi all'utente registrato. In alto è presente la barra con il tasto per creare un nuovo annuncio e una sezione che al passaggio del mouse mostra la legenda delle icone riportate utilizzate. Sotto questa barra si trova l'intera lista dei propri appartamenti, partendo da quelli sponsorizzati. A ciascun appartamento è dedicata una card che si adatta in base alle caratteristiche all'appartamento:- Se l'appartamento è sponsorizzato
- La card mostra una coccarda blu navy su sfondo dorato in alto a destra
- Passando il mouse sopra la coccarda sarà mostrato un timer che indica il tempo restante di sponsorizzazione
- Sono presenti tre icone: modifica, cancella e mostra statistiche dell'appartamento
- L'icona per sponsorizzare l'appartamento non è presente
- Se l'appartamento non è sponsorizzato
- Sono presenti quattro icone: sponsorizza, modifica, cancella e mostra statistiche dell'appartamento
- L'icona per sponsorizzare l'appartamento è presente
A destra troviamo la sezione dedicata ai messaggi ricevuti, ordinati dal più recente al meno recente. A ciascun messaggio è dedicata una card che mostra l'appartamento per il quale si chiedono informazioni (con una coccarda dorata se l'appartamento è sponsorizzato), la mail da usare per ricontattare l'utente interessato, data e orario di ricezione, e il testo del messaggio.
Per ogni appartamento il proprietario può visualizzare le statistiche mensili di visualizzazioni e dei messaggi ricevuti. Le statistiche mostrano dati di un range temporale di un anno dal momento in cui vengono visualizzate.
Cliccando sul tasto "Crea annuncio" nella dashboard si viene reindirizzati in una pagina con un form in cui ogni campo è obbligatorio. I dati inseriti sono controllati sia lato front-end che back-end. Il proprietario può decidere se rendere subito attivo l’annuncio (dunque visibile alla ricerca) del proprio appartamento o riattivarlo successivamente. Il tasto che crea l'appartamento rimane disattivo finché ogni campo non viene valorizzato correttamente. Se la creazione avviene con successo si è reindirizzati alla pagina di dettaglio dell'appartamento appena inserito.
Per creare un altro annuncio l'utente dovrà attendere 30 secondi.
E’ possibile modificare un proprio annuncio sia cliccando sul tasto "Modifica" nella pagina di dettaglio sia cliccando sull'apposita icona nella dashboard. Anche in questa pagina i dati inseriti sono controllati sia lato front-end che back-end. Il proprietario può cambiare qualunque informazione desideri. Il tasto che modifica l'appartamento si disattiva se un valore non viene valorizzato correttamente. Se la modifica avviene con successo si è reindirizzati alla pagina di dettaglio dell'appartamento modificato.
L'aspetto del sito è pensato per rimanere costante e coerente in ogni sua pagina così da offrire un'esperienza utente fluida, intuitiva e familiare.
La gerarchia degli elementi mostrati è assicurata grazie a un effetto profondità che accomuna gli elementi con la stessa importanza. L'interazione dell'utente su un elemento della pagina ne aumenta l'importanza e dunque l'impatto visivo.
L'intera applicazione è totalmente responsive: supporta tutte le risoluzioni di tutti i più comuni devices.