L’applicazione che vogliamo realizzare è destinata a presentare una pizzeria, con una pagina iniziale dove viene presentata l’attività, una dedicata ai contatti, una per la prenotazione di un tavolo, un’altra che ospita una gallery di immagini ed un’ultima dedicata al menù ed al dettaglio degli ingredienti presenti in ogni pizza.
L’applicazione, seppur semplice e “statica”, presenta le componenti tipiche comuni ad applicazioni più sofisticate.
Ci prenderemo cura di progettarla insieme soffermandoci sulle principali sezioni, scriverne il codice, testarlo, pubblicarla sul Google Play store ed accennare al processo di integrazione della parte di monetizzazione al fine di avere degli introiti rendendola a pagamento oppure esponendo banner pubblicitari.
Ci sarà un menù che aiuterà gli utenti a navigare tra le varie sezioni dell’applicazione. Tale menù è così schematizzabile:
• Chi siamo
• Contatti
• Prenota
• Gallery
• Le nostre pizze
• Esci
Per tutte le pagine decidiamo di farci accompagnare da una top-bar suddivisa in due porzioni così rappresentabile:
Dove:
A => parte dedicata al titolo dell’applicazione (la chiamiamo “Pizzeria 3.0”) o delle sezioni
B =>ospiterà un’icona che visualizza il menù di navigazione a scomparsa
Le varie pagine potrebbero essere così strutturate:
Screen 1: Chi Siamo. Logo ed una descrizione testuale.
Screen 2: Contatti. Riepilogo dei contatti telefonici/mail/web.
Screen 3: Prenota. Form che semplicemente richiede Nome, Cognome, Num. persone, Data, Ora, Num. di celluare. Se sottomesso viene trasmesso via email all ‘indirizzo di riferimento della pizzeria.
Screen 4: Gallery. Viene mostrata una gallery di foto della pizzeria
Screen 5: Le nostre pizze. Viene mostrato il menu’ composto da miniatura, il nome della pizza ed un pulsante che consente di accedere ai dettagli, ovvero agli ingredienti della pizza.
Screen 6: dettaglio della pizza. Se si clicca su “dettagli” si aprirà il dettaglio della pizza corrispondente, potendo tornare alla pagina precedente con il pulsante “torna indietro”.
Avviato Android creiamo un progetto scegliendo come prima activity una Blank Activity. Sarà l’activity principale, quella a partire dalla quale parte da nostra applicazione. Per semplicità supponiamo che essa sarà la prima sezione che abbiamo deciso di creare, ovvero il “Chi siamo”. Il nostro utente al primo lancio si vedrà presentare logo e descrizione della nostra pizzeria. Si noti che in fase di definizione di una activity vengono chieste anche le seguenti informazioni: Layout Name e Menù Resource Name. Completando il wizar siamo finalmente pronti ad entrare nei dettagli della nostra applicazione.
Nella parte sinistra dell’IDE si possono esplorare tutti i contenuti del progetto che stiamo realizzando, come ad esempio il manifest, la cartella java destinata a contenere il codice sorgente della nostra app, tutte le resource disposte sotto “res”: qui saranno allocati layout, menu’, immagini, ecc … In particolare, per il momento, ci limitiamo a notare che , avendo definito la prima activity, viene generata automaticamente una sezione sotto java->[package nome], una sotto res > layout, ed una sotto menu.
Si tratta di tutto ciò che è ricollegabile alla prima activity generata. Vedremo successivamente che l’aggiunta di una nuova activity produrrà l’aggiunta automatica di altre risorse con la medesima logica: un file che ospiterà il codice sorgente java, uno che descrive il layout, uno il menù.
La seguente figura mostra lo stato delle cose.
Facendo doppio clic sulla risorsa res->menu->menu_chisiamo.xml si apre il contenuto di questa risorsa. E’ un file xml che contiene il menù di default associato all’activity. Al suo interno è presente un solo item che
ha come titolo “Settings”. Come prima cosa creiamo il menù che dovrà comparire nella nostra top-bar per come definito nelle pagine precedenti. Ci basta aggiungere tanti item quante devono essere le activity che vogliamo raggiungere dalla nostra pagina inziale (facendo un analogo con una pagina html è come aggiungere i link alle pagine che vogliamo raggiungere dalla home).
Lasciando inalterata l’intestazione ed agendo esclusivamente sui vari item potremmo ipotizzare qualcosa di questo tipo:
<menu xmlns: android= “http ://schemas.android.com/
apk/res/ android”
xmlns: app=”http ://schemas.android.com/apk/resauto”
xmlns: tools= “http://schemas.android.com/tools”
tools: context= “. PizzeriaActivity”>
<item android : id =”@ +id/action_contatti”
android :title= “@string/menu_contatti”
android :orderlnCategory=” lOO”
app :showAsAction = “never” />
<item android : id =”@+id/action_prenota”
a nd roid : title = “@string/menu_prenota”
and roid :orderlnCategory=”lOO”
app: showAsAction =”never” / >
<i em android:id=”@+id/action_gallery”
android: title=”@string/menu_gallery”
android: orderlnCategory= “100”
app:showAsAction= “never” />
<item android : id= “@ +id/action_lepizze”
android :title= “@string/menu_lepizze”
android: orderlnCategory=”lOO”
app:showAsAction= “never” />
<item android : id=”@+id/action_esci”
android: title=”@string/menu_esci”
android: orderlnCategory=”lOO”
app:showAsAction= “never” />
</menu>
Praticamente non abbiam fatto altro che aggiungere un campo item per ogni pagina che avevamo preventivato di realizzare, esclusa quella che è in corso di progettazione, che non ha senso compaia nel menù laterale. In particolare si noti il “title” che riferisce, ad “@string! menu_contatti” nel primo caso ecc. Identifica il testo che deve comparire come label nel menù corrispondente.
La notazione @string … indica dove prendere il testo dalla risorsa che ospita le stringhe. Questa è situata in res->values->strings.xml. Possiamo immaginarla come una sorta di dizionario delle stringhe centralizzato ed utilizzabile per riferire le nostre label.
Facendo doppio clic su di esso si apre un nuovo file xml. Troverete alcune stringhe già definite. Aggiungeremo le seguenti:
<string name=”menu_chisiamo”>Chi siamo</string>
<string name= “menu_contatti “>Contatti </string >
<string name= “menu_prenota”> Prenota </string>
<string name=”menu_gallery”>Gallery</string>
<string name=”menu_lepizze”>Le nostre pizze</string>
<string name= “menu_esci”> Esci</string>
che definiscono l’etichetta per ogni voce di menu’ che utilizzeremo. Notate la corrispondenza tra il name di questo file ed il campo title del menù. Il sistema “legherà” le variabili apportando le rispettive associazioni.
Riepilogando: abbiamo creato un nuovo progetto, definito la prima activity, il menù che essa conterrà, le voci di menù ed abbiam dato un nome ad ognuna di esse. Il passo successivo è quello di creare tutte le altre activity in modo analogo al precedente. Vediamo come creare la seconda: quella che ospiterà la pagina “contatti”. Tasto destro sul nome del package java, quindi
New>Activity->Blank Activity.
Come fatto prima definiamo l’activity “Contatti”.
Completando il wizard vedremo quanto già accennato:
all ‘interno della struttura del progetto, l’IDE avrà generato automaticamente i file necessari ad ospitare il cuore del codice java, il layout ed il menù in xml abbinati alla nuova activity!
Ripetiamo il procedimento per tutte le sezioni ottenendo dunque cinque activity definite. Per ognuna di esse possiamo definire il menù con lo stesso procedimento sopra descritto.
Abbiamo ora tutte le •pag ine• della nostra app, pronte e vuote, e provviste del menù contestuale che dovranno mostra re. Possiamo ora andare sulla parte dei contenuti.
Iniziamo con l’activity principale: doppio clic sul file corrispondente sotto java->[package nome} -> chisiamo, si apre l’editor con il sorgente java associato all’activity. Troviamo il metodo onCreate, ed ancora
onCreateOptionMenu e onOptionsltemSelected. Questi ultimi due sono relativi al menù contestuale.
La prossima operazione da fare è quella di abbinare alla pressione di un tasto del menù l’apertura della relativa activity. Così, cliccando su Contatti l’app manda in background l’activity corrente e mette in foreground
l’activity Contatti ripercorrendo il ciclo di vita già discusso nelle precedenti pagine. Dobbiamo dunque implementare e rendere operativa la navigazione tra le varie sezioni della nostra app. Per fare ciò all’interno di onOptionsltemSe/ected, destinato a stare in ascolto sulla pressione di un pulsante di menù (più precisamente viene invocato dal verificarsi di questo evento), inseriamo un case. Intercettiamo il pulsante premuto e rimandiamo alla relativa activity. Ci avvaliamo di una variabile temporanea “intent”
intent = new Intent(this, LePizzeActivity .class) ;
break;
case R.id.action_esci: //Fa un finish ed escedall’applicazione
finish();
break;
}
ent!=null )
startActivity( intent);
Questa operazione la ripetiamo per tutte le activity.
Fatto questo possiamo dedicarci ad una prima simulazione di quanto realizzato, ovvero testare su un disposito virtuale il comportamento della nostra applicazione. Se tutto funziona il simulatore mostrerà la prima sezione “Chi siamo”, provvista del suo menù contestuale che ci consentirà di navigare tutte le sezioni. Così facendo introduciamo possiamo procedere alla simulazione dell’applicazione grazie ai tool di virtual device.
SIMULAZIONE TRAMITE EMULATORE
Per avviare l’emulatore basta mandare in esecuzione l’applicazione tramite il pulsante dedicato.
Un device virtuale apparirà sullo schermo facendoci visualizzare l’applicazione.li device sul quale partirà la simulazione sarà quello in precedenza settato tramite AVO Manager Questo strumento consente molta libertà di settaggio, facendoci scegliere tra diversi dispositivi e risoluzioni, dimensione schermo, densità, ecc. Ed i device da simulare non sono solo smartphone ma anche Table v, dispositivi Wearable …