Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

AppFuse: realizzare una applicazione completa (mockup)

Realizziamo una applicazione completa in java con il framework AppFuse, partendo dai Mockup.
Realizziamo una applicazione completa in java con il framework AppFuse, partendo dai Mockup.
Link copiato negli appunti

AppFuse è nato per facilitare il lavoro degli sviluppatori di web application Java, infatti permette di realizzare in pochissimo tempo un progetto di base con alcune popolari tecnologie già pre-configurate: Spring, Hibernate e framework web. Fornisce inoltre "out of the box" alcune funzionalità comuni come autenticazione e gestione degli utenti.

Caratteristiche di AppFuse

La principale caratteristica di AppFuse è che predilige l'utilizzo di Apache Maven e gli standard Java, in contrapposizione ai wizard disponibili con i complessi ambienti di sviluppo integrati (Integrated development environment - IDE); i vantaggi di questo approccio sono sono molti:

  • è cross-platform e altamente standardizzato;
  • eredita da Maven le gestione delle dipendenze e i numerosi plugin;
  • non è necessario aggiornare il codice ogni volta che esce una nuova versione dell'eventuale IDE di riferimento, inoltre non si è legati al suo successo/insuccesso;
  • non ha restrizioni d'uso dovute a licenze commerciali.

Oltre alle tecnologie già citate, abbiamo a disposizione:

  • Spring per la configurazione dell'applicazione;
  • JPA, Hibernate o iBatis per la persistenza;
  • Java Server Faces (JSF), Spring MVC, Struts, Stripes, Tapestry o Wicket per lo strato web;
  • altre librerie: Sitemesh, Direct Web Remoting (DWR), Compass + Lucene... la lista è molto lunga!

Un'altro aspetto poco in evidenza, ma che riteniamo particolarmente importante, è che AppFuse è un ottimo strumento didattico.

Innanzi tutto permette anche ai neofiti di utilizzare tecnologie molto complesse, occupandosi di tutta la "burocrazia" (compreso quello che in inglese viene spesso definito codice "boilerplate") necessaria per farle funzionare; inoltre, una volta diventati esperti, è molto facile mettere mano alle configurazioni e piegare il progetto ai propri voleri, se non addirittura abbandonare AppFuse e riadattare i file di configurazone e i sorgenti. Di fatto AppFuse si limita a creare il progetto e configurare il processo di build; il massimo di invasività è rappresentato da alcune classi di supporto, che sono comunque molto utili per gestire la persistenza, l'internazionalizzazione e alcuni aspetti delle web application e che è facile riutilizzare anche in altre applicazioni non-AppFuse.

Una volta iniziato un progetto però, abbiamo noi in mano il timone della nave, possiamo quindi decidere se rimanere nei binari prestabiliti o personalizzare questo o quell'aspetto all'interno del progetto.

Il Progetto JobBoard

Il progetto d'esempio che abbiamo scelto di realizzare è abbastanza complesso, si tratta di una applicazione web per la gestione di annunci di lavoro. Fra gli scopi che ci siamo prefissati, oltre a sperimentare l'utilizzo di AppFuse e delle tecnologie coinvolte, c'è anche quello di illustrare (a grandi linee) alcune pratiche "Agili", non solo durante le fasi di sviluppo del codice ma anche per quanto riguarda la fase non meno trascurabile del management di progetto.

Vedremo quindi come sviluppare l'idea iniziale, suddividerla in progetti, fissare task e scadenze e, infine giungere alla realizzazione e implementazione completa per farla diventare realtà!

Dopo avere introdotto brevemente AppFuse e avere accennato al progetto d'esempio che realizzeremo (JobBoard: una bacheca di annunci di lavoro), in questo appuntamento e nel prossimo realizzeremo una prima analisi, molto informale, per identificare le varie User story e stabilire l'elenco dei compiti da svolgere per realizzare il nostro progetto. Successivamente ci avverremo proprio del framework AppFuse per la realizzazione.

User story e documentazione

Per documentare le nostre User Story faremo ampio uso dei cosiddetti Mockup; questi non sono altro che disegni rappresentanti delle ipotetiche schermate prese dall'applicazione, abbastanza complete da illustrarne il funzionamento ma allo stesso tempo non troppo dettagliate per evitare di perdersi in particolari inutili (Ricordiamoci che in questo contesto fornire indicazioni su font o colore potrebbe persino essere controproducente, distraendo l'eventuale cliente dalla comprensione degli obiettivi dell'applicazione).

Abbiamo realizzato gli schemi con la versione desktop di Balsamiq: si tratta di un software commerciale, ma ha anche una versione free e, se riuscite a dimostrare di fare beneficienza (ad esempio contribuendo a progetti open source) potreste avere anche una licenza gratuita! Comunque non preoccupatevi, qualsiasi programma di grafica vettoriale è adatto alla realizzazione di Mockup: PowerPoint, OpenOffice Impress, Inkscape, eccetera; gli unici requisiti sono che tutto il team possa aprire e modificare i file, e che lo strumento sia facile da usare.

Le caratteristiche principali dei mockup che vedremo sono queste:

  • semplicità: avere dei mockup troppo dettagliati distoglie l'attenzione da questioni importanti come usabilità, funzionalità e aderenza ai requisiti, facendo nascere discussioni infinite su sulla sfumatura di blu da utilizzare come sfondo dei pulsanti!
  • interattività: sia Balsamiq che PowerPoint o OpenOffice Impress permettono inserire link fra i diversi mockup e vari elementi dinamici. In questo modo si possono realizzare delle divertenti simulazioni delle interazioni utente. Provare per credere!

User story per la homepage

Partiamo quindi con la schermata principale dell'applicazione, spesso chiamata Dashboard:

Figura 1. dashboard dell'applicazione
(clic per ingrandire)


dashboard dell'applicazione

Gli elementi di questa pagina sono parecchi, analizziamoli uno per uno:

  • struttura della pagina (template): alcuni elementi di questa pagina, ad esempio il titolo e i link di navigazione, ricorreranno frequentemente in tutta l'applicazione;
  • casella di ricerca con un link ad una pagina di ricerca avanzata;
  • elenco degli annunci più recenti, cliccando sopra i quali si può andare al dettaglio;
  • feed RSS, per rimanere aggiornati sulle ultime offerte di lavoro.

Per la nostra applicazione abbiamo previsto una pagina di login, senza la quale il sito si riempirebbe di spam!

Figura 2. pagina di login dell'applicazione
(clic per ingrandire)


pagina di login dell'applicazione

Ovviamente sarà presente anche la classica pagina di registrazione:

Figura 3. pagina di registrazione dell'applicazione
(clic per ingrandire)


pagina di registrazione dell'applicazione

User story di ricerca e consultazione

Vediamo ora qualche schermata più attinente all'applicazione vera e propria che realizzeremo tramite AppFuse. Abbiamo accennato brevemente al una pagina di ricerca avanzata, che permetta cioè di utilizzare, oltre alla ricerca testuale, altri criteri come tipo di contratto, nazione, eccetera. Ecco la maschera, con la relativa pagina dei risultati:

Figura 4. form di ricerca
(clic per ingrandire)


form di ricerca
Figura 5. risultati di ricerca
(clic per ingrandire)


risultati di ricerca

Infine, cliccando su un annuncio in homepage o sui risultati della ricerca, arriviamo alla scheda di dettaglio:

Figura 6. scheda di dettaglio
(clic per ingrandire)


scheda di dettaglio

Infine il pulsante Invia candidatura si comporterà in maniera diversa a seconda che l'utente si sia registrato o meno sul sito.

User story per gli inserzionisti

Fin'ora abbiamo visto alcune user story pubbliche, ovvero accessibili da tutti i visitatori del sito senza alcuna restrizione.
Vediamo ora quelle riservate agli utenti registrati.

Cominciamo dagli inserzionisti, ovvero quelle aziende che utilizzano JobBoard per inserire annunci di ricerca di personale. Ecco i mockup per la user story "inserimento di un annuncio di ricerca personale".

Nella prima schermata, l'utente inserisce i dati dell'annuncio, come la posizione ricercata, la nazione, il tipo di contratto e una descrizione delle mansioni:

Figura 7. dati inserzionista
(clic per ingrandire)


dati inserzionista

La seconda schermata prevede un ricontrollo dei dati inseriti:

Figura 8. controllo dei dati inserzionista
(clic per ingrandire)


controllo dei dati inserzionista

Infine, dopo aver confermato i dati e inviato l'annuncio, ci verrà proposta una schermata di riepilogo:

Figura 9. schermata di riepilogo
(clic per ingrandire)


schermata di riepilogo

Invio candidature

Gli ultimi mockup riguardano l'invio delle candidature. Come ricorderete dalla prima parte, gli annunci sono visibili pubblicamente, ma si può inviare la candidatura solamente se si è utenti registrati. Dopo aver cliccato su Invia candidatura dalla scheda di dettaglio di un'inserzione, ci comparirà questa schermata:

Figura 10. invio candidatura
(clic per ingrandire)


invio candidatura

Dopo aver cliccato su Invia ci verrà mostrato un messaggio:

Figura 11. messaggio invio candidatura
(clic per ingrandire)


messaggio invio candidatura

Sviluppi

Nei prossimi articoli di questa breve serie vedremo come organizzare il lavoro, prima però ci concederemo un veloce "giro di prova" con Appfuse.


Ti consigliamo anche