ݺߣ

ݺߣShare a Scribd company logo

La tua prima app per Ubuntu Touch

•
•
Flavius-Florin Harabor
Flavius-Florin Harabor

Ormai Ubuntu Touch, la versione mobile di Ubuntu è una realtà che possiamo toccare con mano. Infatti, questa distro è disponibile per alcuni device come Nexus 4, Nexus 7 2013 (solo versione WiFi) e Nexus 10, anche se deprecated, Ubuntu Touch gira anche su Galaxy Nexus e Nexus 7 2012 WiFi. Poi c'è anche l'emulatore per Ubuntu Touch, insomma tutto quello che ci serve ormai è pronto e disponibile, quindi, per questo motivo ho deciso di mostravi come si fa a creare una piccola app per questo sistema operativo mobile. È un semplice Hello World, tanto per cominciare, però andando avanti proverò a pubblicare anche altre slide dedicate a questo argomento. Come sempre mi auguro che anche questo nuovo capitolo sia di vostro gradimento, per qualsiasi domanda o chiarimento aspetto un commento qui sotto.

1 of 25
Downloaded 15 times
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
Si inizia Autore: Flavius Florin Harabor e-mail: ffinformaticus@gmail.com
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.
Questo è Ubuntu SDK Autore: Flavius Florin Harabor e-mail: ffinformaticus@gmail.com
Si inizia Autore: Flavius Florin Harabor e-mail: ffinformaticus@gmail.com Una volta avviato Ubuntu SDK andare su File => New File or Project
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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:
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.
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.
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.
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
Si inizia Autore: Flavius Florin Harabor e-mail: ffinformaticus@gmail.com Fonte img: http://www.unapsicologaroma.it/2013/03/20/quando-si-dice-unilluminazione/
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

More Related Content

La tua prima app per Ubuntu Touch

  • 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