1.
La tua prima app per Ubuntu Touch
Credits image: http://mycolorscreen.com/2013/10/20/a-touch-of-ubuntu/
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com

2.
Si inizia
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com

3.
Che cosa ti serve?
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Come sempre se vuoi sviluppare qualcosa hai bisogno di tutta una serie di strumenti
A te in questo caso ti basterà avere una distro Ubuntu e Ubuntu SDK e il gioco è fatto.
Che cos'è Ubuntu SDK?
L'ambiente Ubuntu SDK o meglio il nuovo Software Developer Kit di Ubuntu, è un
ambiente di sviluppo completo di IDE e supporto per l'esecuzione di app sia dal lato
client desktop, ma anche dal lato dei device mobile come smartphone e tablet, con
Ubuntu.
Grazie al Ubuntu SDK si ha la possibilità di scrivere app con diversi framework come:
● QML, è un framework basato sul progetto Qt
➔ HTML5
➔ Scoper, è il framework che da la possibilità di creare e presentare il contenuto nella
Dash di Ubuntu
➔ OpenGL.
La guida per installare Ubuntu SDK la trovi qui => http://goo.gl/DViheL
Dopo aver scoperto cosa ci serve e di che cosa si tratta andiamo insieme a vedere che
cosa dobbiamo fare e come sviluppare la nostra prima applicazione per Ubuntu Touch,
che gira anche sulla nostra versione desktop di Ubuntu.

4.
Questo è Ubuntu SDK
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com

5.
Si inizia
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Una volta avviato Ubuntu SDK andare su File => New File or Project

6.
Si continua con il passo due
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Nella nuova schermata selezionate nella colonna di sinistra la voce Ubuntu e poi
subito nella colonna centrale selezionate la voce Simple UI poi continuate.

7.
Si continua con il passo tre
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
In questa schermata selezionate lo spazio dove salvare le sorgenti della vostra
applicazione e anche il nome. Nel nostro caso si chiamerà HelloWorld.

8.
Si continua con il passo quattro
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
In questa schermata andate su Bazzare, questa funzione vi da la possibilità di creare le versioni della vostra
app in modo automatico, potete anche lasciala come nello screen. Alla fine di tutto cliccate su Finish.

9.
Si continua con il passo quinto
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Ecco questa è la base della nostra applicazione. Il nostro IDE andrà a generare in automatico il codice base
da cui partire nello sviluppo di una prima applicazione per Ubuntu Touch.

10.
Si continua con il passo quinto bis
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Se cliccate sul tasto a forma di punta di freccia ( quello verde, in basso a sinistra ) dovreste avere questo
primo risultato.

11.
Si continua con il passo sesto
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Cliccando sul tasto Design ( quarto tasto dal panello a sinistra ) potete organizzare il design della vostra
applicazione aggiungendo nuove funzioni grafiche, che poi andrete ad implementare, per far si che esse
funzionino e rendano la vostra applicazione attiva e funzionante secondo i vostri gusti e idee.

12.
Adesso che si fa?!?
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Bene adesso andiamo a vedere che cosa si può fare e come si può modificare questo codice.

13.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Questa sarà la nostra prima app Hello World, che abbiamo modificato e resa più nostra. Quindi andiamo ad
analizzare il codice sorgente, che sta dietro alla nostra prima applicazione base per Ubuntu Touch e Ubuntu
Desktop.

14.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Nel nostro file principale del progetto, cioè HelloWorld.gml troviamo tutta
la serie di parametri che implementano l'interfaccia della nostra
applicazione.
Ognuno di questi parametri è annidato con le parentesi graffe {}.
Il container (contenitore) principale è il MainView, al suo interno
troviamo poi Page, che al suo interno contiene Column,
HelloComponent e Button.
HelloComponent è definito fuori dalla nostra libreria e si trova nella
cartella components.

15.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Va detto e precisato sin da subito, che è necessario usare lo stesso
nome per il file del componente.
Questo metodo di includere così le varie componenti di un'applicazione,
ci consente di condividere il codice tra le varie applicazioni che andrete
ad implementare e sviluppare in futuro, ma anche di riutilizzarlo
all'interno dello stesso progetto. Vedremo più avanti che cosa contiene
questo file.
Visto che questa è una tipica abitudine della programmazione a oggetti,
colgo l'occasione di rimandarvi a un ripasso veloce
in queste pagine(clicca qui).

16.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Ritorniamo al nostro file principale del progetto.
Quindi, come dicevo prima, all'interno del nostro componente
HelloComponent abbiamo dichiarato l'id, la sua posizione all'interno
della finestra della nostra applicazione, la sua grandezza, il suo
objectName, il colore e per finire il testo e la sua dimensione.

17.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Come anticipato prima, esiste anche il componente Button, altro non è
che un componente tipico da Ubuntu e vi darà la possibilità di
implementare e visualizzare i vari pulsanti. Nella nostra applicazione
Hello World, ha lo scopo di cambiare il testo all'interno del componente
HelloComponent.
All'interno del componente Button abbiamo dichiarato la sua posizione
sull'asse x e asse y, la sua dimensione, il suo objectName, il suo colore,
il testo e la sua dimensione e per finire l'azione che deve svolgere una
volta azionato.
Cioè una volta cliccato, andrà a cambiare il testo all'interno del
HelloComponent.

18.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Nota Importante
All'interno del codice, della nostra applicazione, compare
frequentemente la dichiarazione text: i18n.tr() oppure title: i18n.tr().
Questa particolare dichiarazione ha lo scopo di rendere più facile
l'interpretazione e la traduzione da parte della funzione gettext.
Questa è una funzionalità principale e chiave del tool kit di Ubuntu User
Interface, è la capacità di scalare a tutti i form factor possibili definiti
dagli utenti.
Tutto ciò, ha portato il team di sviluppo nell'implementare e definire una
nuova unità di misura, cioè grid unit.
Una volta dichiarate e implementate le grid unit o gu, esse vengono
tradotte in pixel in funzione al tipo di schermo e del device sul quale
l'applicazione gira.
Esempio:
1 gu = 8 pixel => sullo schermo di un portatile
1 gu = 16 pixel => sullo schermo di un portatile retina
1 gu = 8 pixel => sullo schermo di uno smartphone
Quindi all'interno della nostra applicazione abbiamo implementato 1 gu
per lo spacing, e 2 gu per il margin.

19.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Continuando l'analisi del nostro codice sorgente, della nostra Hello
World e spostandoci nel container principale MainView, possiamo
trovare l'implementazione che decide la dimensione della nostra
applicazione, con altezza e larghezza.
Di default la nostra app viene generata con width: units.gu(100) e
height: units.gu(75) avendo per risultato questo:

20.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Invece io per comodità ho utilizzato questa implementazione: width:
500 e height: 400, avendo per risultato questo:
Cioè mi trovo ad avere una schermata della mia applicazione più
piccola e non direttamente proporzionale al mio schermo. La chiave
della dimensione dell'applicazione sta nell'unità di misura GU, come
detto precedentemente.
Va detto che è importante lavorare sulle dimensioni in base
all'implementazione imposta dal tool kit di Ubuntu.

21.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Visto che prima abbiamo parlato del HelloComponent.qml, andiamo a
prendere in considerazione anche questo file del nostro progetto e
vediamo che cosa fa di preciso.
Al suo interno troviamo il compomente UbuntuShape, che è quello che
genera il rettangolo arrotondato, poi all'interno del componente
UbuntuShape troviamo anche Lable.

22.
Analizziamo e modifichiamo il
codice
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Label ha al suo interno l'id myText e il parametro che indica il testo
centrato.
Label ha una priorità text che può essere utilizzata per impostare il testo
della lable, in più questa funzione può essere utile ad impostare il suo
valore anche al di fuori del HelloComponent e negli altri file sorgenti
della nostra applicazione.
Per questo motivo viene definita prima la funzione property alias text :
myText.text. Questa riga di codice non fa altro che creare un alias per la
priorità di myText.text e lo rende disponibile a tutti i componenti con
alias text.

23.
Altre app per Ubuntu Touch
Questo è uno dei due o tre appuntamenti dedicati a questo argomento, nel mentre vi
lascio un link che vi mostra come installare e testare sulla vostra distro Ubuntu, dalla
12.04 LTS fino alla 14.04 LTS, tutte le varie app per Ubuntu Touch che in questo
periodo sono state sviluppate da altre persone:
http://goo.gl/6QCaCl
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Nota:
Voi che avete installato già Ubuntu SDK, l'ultimo comando che dovete
dare, è il seguente =>> $ sudo apt-get install touch-coreapps

24.
Si inizia
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
Fonte img: http://www.unapsicologaroma.it/2013/03/20/quando-si-dice-unilluminazione/

25.
Link >>> Fonti >>> Note
Note:
➔ Questo è solo una parte riassuntiva di quello che è il mondo
Android e il suo cuore pulsante, non è una vera guida per
iniziare a sviluppare le tue applicazioni.
➔ Tutte le foto/immagini, presenti all'interno di queste slide sono
reperibili in rete e appartengono ai legittimi proprietari.
➔ Ricordo inoltre, che queste slide e questo lavoro sono coperte
dalla CC v.4.
➔ Grazie a Benedetto Nespoli Bloggh Idee e Massimiliano Vigliotta,
per le correzioni e le mie piccole sviste
Autore: Flavius Florin Harabor
e-mail: ffinformaticus@gmail.com
➔ https://wiki.ubuntu.com/Touch/Install
➔
➔ http://developer.ubuntu.com/
➔
➔ http://developer.ubuntu.com/web/tutorial/
➔
➔ https://plus.google.com/u/0/communities/111350780270925540549
➔
➔ http://askubuntu.com/questions/tagged/application-development
➔
➔ http://developer.ubuntu.com/api/qml/sdk-1.0/
➔
➔ https://wiki.ubuntu.com/Touch/Devices/
➔
➔ http://askubuntu.com/questions/235763/why-ubuntu-components-0-1-missing-from
-qtcreator
CODICE SORGENTE Clicca Qui
USA LA FANTASIA
Accendi il cervello