Sviluppo App e Convergenza 
Giulio Collura
Il futuro del computing 
› Ubuntu funziona su smartphone, desktop, 
server e cloud 
› Interfaccia veloce e intuitiva per ogni dispositivo 
› Core Apps di qualità e un ecosistema di app in 
continua crescita 
› Ubuntu SDK con supporto nativo e HTML5 
› Differenziazione senza frammentazione
Spazio agli sviluppatori 
Ubuntu fornisce tutti gli strumenti necessari allo 
sviluppo 
› Ubuntu SDK 
› Applicazioni native e HTML5 
› Portale con documentazione, tutorial e API 
reference 
› Linee guida per il design 
› Processo di upload e pubblicazione app 
semplice e sicuro 
› Ubuntu Store 
› Comunità di sviluppatori e designer attiva e 
entusiasta
La piattaforma Ubuntu 
› Sistema Operativo Ubuntu, con un layer Android per il device 
› Unity 
› Ubuntu SDK fornisce API trasparente per l'accesso ai servizi, device
Convergenza 
› QtQuick 
› Non solo adattamento nella dimensione dei 
componenti, design e modi d'uso devono essere 
ottimizzati 
› La prima versione LTS a essere completamente 
convergente sarà la 16.04 
› Unity 8, già in uso su smartphone e tablet, rimpiazzerà 
Unity 7 nella versione desktop
foundations 
› SDK
Ubuntu SDK 
› Fornisce tutti gli strumenti per sviluppare app 
semplicemente 
› Disponibile per numerosi linguaggi: 
› QML, linguaggio dichiarativo utile a descrivere l'interfaccia 
utente di un programma 
› Javascript 
› C++ 
› HTML5
QtQuick 
› Interfacce utente semplici e veloci 
› Design-oriented 
› Sviluppo rapido 
› Il QML è un linguaggio dichiarativo che 
consente agli oggetti di essere definiti secondo 
le loro proprietà e di come possono interagire e 
rispondere ai cambiamenti
Componenti 
› Layouts 
› Resolution Independence 
› Localizzazioni 
› Cloud-ready 
› Emulatore 
› Servizi 
› Command-line parsing
Ambiente di sviluppo 
› Qt Creator 
› Completo supporto al C++ e QML 
› Interfaccia grafica per la gestione del dispositivo 
› Connessione al device tramite SSH (Secure Shell) 
› Permette l'avvio e l'interruzione di applicazioni durante lo 
sviluppo 
› Comprende tool di packaging, convalida e installazione 
› Cross-compilation direttamente dal desktop 
› Accesso diretto alla documentazione 
› Linea di comando
Installazione 
› Tramite terminale: 
› Per Ubuntu 12.04 LTS, 13.10 e 14.04 
sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && 
sudo apt-get update && sudo apt-get dist-upgrade && 
sudo apt-get install ubuntu-sdk 
› Per versioni in sviluppo 
sudo apt-get update && sudo apt-get install ubuntu-sdk
Ciclo di vita di una app 
› Le app sono sospese quando non visibili 
› Il ciclo di vita di una app è progettato per essere semplice, sicuro e ottimizzare 
il consumo di batteria
Sicurezza 
› Tutte le app sono confinate grazie ad AppArmor, 
tramite specifiche restrizioni 
› AppArmor è un modulo di sicurezza del kernel 
› Ogni app possiede un profilo AppArmor definito 
tramite un file di configurazione 
› Ogni app può solo scrivere nella propria directory 
› Lo scambio di informazioni tra app è consentito 
tramite ContentHub
Qt/QML e web app 
› Supporto completo per entrambe le 
piattaforme di sviluppo 
› Massime performance con il 
supporto nativo 
› Tutte le potenzialità del web grazie 
alle web app 
› HTML 5 e CCS 3 
› Nessuna modifica richiesta alle 
webapp già esistenti
App native 
› Scrivere app native per sfruttare tutta la 
potenza del dispositivo 
› QML + Javascript + C++ (Google Go) 
› Il Javascript si integra direttamente nel 
QML 
› Grazie alle librerie Qt, il C++ non è mai 
stato così semplice da usare 
› C++ per il backend come un plugin, 
QML per il frontend
Click packages 
› I pacchetti Click (.click) sono il nuovo modo in cui sono 
impacchettate, distribuite e installate le app per Ubuntu Touch e, in 
futuro, Ubuntu Desktop 
› Concetto simile agli .apk di Android 
› Progettati per essere semplici, veloci e sicuri, grazie all'integrazione 
di AppArmor 
› Possono essere creati direttamente da QtCreator 
› Forniscono isolamento tra aggiornamenti del sistema e delle app 
› Gli aggiornamenti del sistema vengono forniti tramite Debian packages o 
aggiornamenti OTA (over-the-air) incrementali 
› Gli aggornamenti delle app tramite pacchetti click
app project 
› design › develop › publish
Nuovo progetto 
› Idee 
› Nuove applicazioni 
› Porting di Harmattan apps 
› Remake di app iOS e Android 
› Tutorial 
› Disponibili in rete http://developer.ubuntu.com 
› Design guidelines 
› http://design.ubuntu.com/apps 
› Reference 
› Core Apps
› Kit: ambiente con architettura emulata armhf o i386 
› Consente la cross-compilation e la cross-configuration di una app
› Gestione del device direttamente da QtCreator 
› Sono forniti anche tool da linea di comando 
› sudo apt-get install phablet-tools
Struttura del QML 
› Il QML è un linguaggio dichiarativo: si definisce 
il componente che si vuole e si specifica le sue 
proprietà 
› Specificare un id serve a rendere il 
componente accessibile da altre parti nel codice 
› Esempio: 
Rectangle { 
id: canvas 
width: 200 
height: 200 
color: "blue" 
}
› Gli oggetti possono essere innestati 
import QtQuick 2.0 
Rectangle { 
id: rect 
width: 300 
height: 300 
color: "orange" 
Image { 
id: logo 
source: "/usr/share/icons/ubuntu-mobile/ 
apps/scalable/calculator.svg" 
anchors.centerIn: parent 
height: rect.height / 2 
width: rect.width / 2 
} 
} 
› Notare come logo acceda alle proprietà di rect
Integrazione Javascript e QML 
Codice Javascript può essere integrato con 
semplicità per fornire controllo sugli elementi e 
altri benefici 
Item { 
width: randomNumber() 
height: width < 100 ? 100 : (width + 50) / 2 
function randomNumber() { 
return Math.random() * 360; 
} 
}
MainView 
› Componente principale per tutte le applicazioni 
› Aggiunge automaticamente un header, utile alla 
gestione di Tab e comandi 
› Ruota automaticamente i contenuti a seconda 
della rotazione del device 
› Modulo di Ubuntu.Components 
› import Ubuntu.Components 1.0
main.qml 
import QtQuick 2.1 
import Ubuntu.Components 1.1 
import "ui" 
MainView { 
objectName: "mainView" 
applicationName: "com.ubuntu.developer.<devname>.<appname>" 
Tabs { 
id: tabs 
HelloTab { 
objectName: "helloTab" 
} 
WorldTab { 
objectName: "worldTab" 
} 
} 
}
Resolution Independence 
Device Conversione 
Comuni schermi 
(laptop, desktop) 1 gu = 8 px 
Retina display 1 gu = 16 px 
Smartphones 1 gu = 18 px
Nuovi componenti 
› È utile creare nuovi componenti esternamente 
per modularizzare la propria applicazione 
› Molto semplice 
› È necessario creare un nuovo modulo .qml 
all'interno del progetto
Esempio 
components/HelloComponent.qml 
import QtQuick 2.0 
import Ubuntu.Components 0.1 
UbuntuShape { 
width: 200 
height: width 
property alias text: myText.text 
Label { 
id: myText 
anchors.centerIn: parent 
} 
} 
main.qml 
import QtQuick 2.0 
import Ubuntu.Components 0.1 
import "components" 
MainView { 
width: units.gu(48) 
height: units.gu(60) 
Page { 
title: "Example page" 
HelloComponent { 
anchors.centerIn: parent 
text: "Hello world!" 
} 
} 
}
Convergenza 
› Una sola applicazione per tutti i dispositivi 
› Uso efficiente dello spazio dello schermo 
› Interfacce dinamiche
Layouts
Layouts
Ubuntu.Layouts 
› Componente dell'SDK utile a posizionare i vari elementi date 
certe condizioni 
› import Ubuntu.Layouts 1.0 
› Elementi 
› Layouts 
› ItemLayout 
› ConditionalLayout
U1db 
› Modulo per la gestione di un database basato su JSON 
objects 
› Molto semplice da usare 
› Comodo per salvare impostazioni e informazioni 
permanentemente 
› Implementa la sincronizzazione con i server UbuntuOne 
› import U1db 1.0 as U1db 
› Policy: networking
Domande
Contatti 
Email: giulio.collura@gmail.com 
Twitter: gcollura93 
IRC: gcollura 
Linkedin: Giulio Collura 
Le slide saranno disponibili sulla mia pagina web: 
http://gcollura.github.io/projects 
Grazie!

Ubuntu Touch: Sviluppo App e Convergenza

  • 1.
    Sviluppo App eConvergenza Giulio Collura
  • 2.
    Il futuro delcomputing › Ubuntu funziona su smartphone, desktop, server e cloud › Interfaccia veloce e intuitiva per ogni dispositivo › Core Apps di qualità e un ecosistema di app in continua crescita › Ubuntu SDK con supporto nativo e HTML5 › Differenziazione senza frammentazione
  • 3.
    Spazio agli sviluppatori Ubuntu fornisce tutti gli strumenti necessari allo sviluppo › Ubuntu SDK › Applicazioni native e HTML5 › Portale con documentazione, tutorial e API reference › Linee guida per il design › Processo di upload e pubblicazione app semplice e sicuro › Ubuntu Store › Comunità di sviluppatori e designer attiva e entusiasta
  • 4.
    La piattaforma Ubuntu › Sistema Operativo Ubuntu, con un layer Android per il device › Unity › Ubuntu SDK fornisce API trasparente per l'accesso ai servizi, device
  • 5.
    Convergenza › QtQuick › Non solo adattamento nella dimensione dei componenti, design e modi d'uso devono essere ottimizzati › La prima versione LTS a essere completamente convergente sarà la 16.04 › Unity 8, già in uso su smartphone e tablet, rimpiazzerà Unity 7 nella versione desktop
  • 6.
  • 7.
    Ubuntu SDK ›Fornisce tutti gli strumenti per sviluppare app semplicemente › Disponibile per numerosi linguaggi: › QML, linguaggio dichiarativo utile a descrivere l'interfaccia utente di un programma › Javascript › C++ › HTML5
  • 8.
    QtQuick › Interfacceutente semplici e veloci › Design-oriented › Sviluppo rapido › Il QML è un linguaggio dichiarativo che consente agli oggetti di essere definiti secondo le loro proprietà e di come possono interagire e rispondere ai cambiamenti
  • 9.
    Componenti › Layouts › Resolution Independence › Localizzazioni › Cloud-ready › Emulatore › Servizi › Command-line parsing
  • 10.
    Ambiente di sviluppo › Qt Creator › Completo supporto al C++ e QML › Interfaccia grafica per la gestione del dispositivo › Connessione al device tramite SSH (Secure Shell) › Permette l'avvio e l'interruzione di applicazioni durante lo sviluppo › Comprende tool di packaging, convalida e installazione › Cross-compilation direttamente dal desktop › Accesso diretto alla documentazione › Linea di comando
  • 11.
    Installazione › Tramiteterminale: › Per Ubuntu 12.04 LTS, 13.10 e 14.04 sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && sudo apt-get update && sudo apt-get dist-upgrade && sudo apt-get install ubuntu-sdk › Per versioni in sviluppo sudo apt-get update && sudo apt-get install ubuntu-sdk
  • 12.
    Ciclo di vitadi una app › Le app sono sospese quando non visibili › Il ciclo di vita di una app è progettato per essere semplice, sicuro e ottimizzare il consumo di batteria
  • 13.
    Sicurezza › Tuttele app sono confinate grazie ad AppArmor, tramite specifiche restrizioni › AppArmor è un modulo di sicurezza del kernel › Ogni app possiede un profilo AppArmor definito tramite un file di configurazione › Ogni app può solo scrivere nella propria directory › Lo scambio di informazioni tra app è consentito tramite ContentHub
  • 14.
    Qt/QML e webapp › Supporto completo per entrambe le piattaforme di sviluppo › Massime performance con il supporto nativo › Tutte le potenzialità del web grazie alle web app › HTML 5 e CCS 3 › Nessuna modifica richiesta alle webapp già esistenti
  • 15.
    App native ›Scrivere app native per sfruttare tutta la potenza del dispositivo › QML + Javascript + C++ (Google Go) › Il Javascript si integra direttamente nel QML › Grazie alle librerie Qt, il C++ non è mai stato così semplice da usare › C++ per il backend come un plugin, QML per il frontend
  • 16.
    Click packages ›I pacchetti Click (.click) sono il nuovo modo in cui sono impacchettate, distribuite e installate le app per Ubuntu Touch e, in futuro, Ubuntu Desktop › Concetto simile agli .apk di Android › Progettati per essere semplici, veloci e sicuri, grazie all'integrazione di AppArmor › Possono essere creati direttamente da QtCreator › Forniscono isolamento tra aggiornamenti del sistema e delle app › Gli aggiornamenti del sistema vengono forniti tramite Debian packages o aggiornamenti OTA (over-the-air) incrementali › Gli aggornamenti delle app tramite pacchetti click
  • 17.
    app project ›design › develop › publish
  • 18.
    Nuovo progetto ›Idee › Nuove applicazioni › Porting di Harmattan apps › Remake di app iOS e Android › Tutorial › Disponibili in rete http://developer.ubuntu.com › Design guidelines › http://design.ubuntu.com/apps › Reference › Core Apps
  • 21.
    › Kit: ambientecon architettura emulata armhf o i386 › Consente la cross-compilation e la cross-configuration di una app
  • 22.
    › Gestione deldevice direttamente da QtCreator › Sono forniti anche tool da linea di comando › sudo apt-get install phablet-tools
  • 23.
    Struttura del QML › Il QML è un linguaggio dichiarativo: si definisce il componente che si vuole e si specifica le sue proprietà › Specificare un id serve a rendere il componente accessibile da altre parti nel codice › Esempio: Rectangle { id: canvas width: 200 height: 200 color: "blue" }
  • 24.
    › Gli oggettipossono essere innestati import QtQuick 2.0 Rectangle { id: rect width: 300 height: 300 color: "orange" Image { id: logo source: "/usr/share/icons/ubuntu-mobile/ apps/scalable/calculator.svg" anchors.centerIn: parent height: rect.height / 2 width: rect.width / 2 } } › Notare come logo acceda alle proprietà di rect
  • 25.
    Integrazione Javascript eQML Codice Javascript può essere integrato con semplicità per fornire controllo sugli elementi e altri benefici Item { width: randomNumber() height: width < 100 ? 100 : (width + 50) / 2 function randomNumber() { return Math.random() * 360; } }
  • 26.
    MainView › Componenteprincipale per tutte le applicazioni › Aggiunge automaticamente un header, utile alla gestione di Tab e comandi › Ruota automaticamente i contenuti a seconda della rotazione del device › Modulo di Ubuntu.Components › import Ubuntu.Components 1.0
  • 27.
    main.qml import QtQuick2.1 import Ubuntu.Components 1.1 import "ui" MainView { objectName: "mainView" applicationName: "com.ubuntu.developer.<devname>.<appname>" Tabs { id: tabs HelloTab { objectName: "helloTab" } WorldTab { objectName: "worldTab" } } }
  • 28.
    Resolution Independence DeviceConversione Comuni schermi (laptop, desktop) 1 gu = 8 px Retina display 1 gu = 16 px Smartphones 1 gu = 18 px
  • 29.
    Nuovi componenti ›È utile creare nuovi componenti esternamente per modularizzare la propria applicazione › Molto semplice › È necessario creare un nuovo modulo .qml all'interno del progetto
  • 30.
    Esempio components/HelloComponent.qml importQtQuick 2.0 import Ubuntu.Components 0.1 UbuntuShape { width: 200 height: width property alias text: myText.text Label { id: myText anchors.centerIn: parent } } main.qml import QtQuick 2.0 import Ubuntu.Components 0.1 import "components" MainView { width: units.gu(48) height: units.gu(60) Page { title: "Example page" HelloComponent { anchors.centerIn: parent text: "Hello world!" } } }
  • 32.
    Convergenza › Unasola applicazione per tutti i dispositivi › Uso efficiente dello spazio dello schermo › Interfacce dinamiche
  • 33.
  • 34.
  • 35.
    Ubuntu.Layouts › Componentedell'SDK utile a posizionare i vari elementi date certe condizioni › import Ubuntu.Layouts 1.0 › Elementi › Layouts › ItemLayout › ConditionalLayout
  • 36.
    U1db › Moduloper la gestione di un database basato su JSON objects › Molto semplice da usare › Comodo per salvare impostazioni e informazioni permanentemente › Implementa la sincronizzazione con i server UbuntuOne › import U1db 1.0 as U1db › Policy: networking
  • 37.
  • 38.
    Contatti Email: giulio.collura@gmail.com Twitter: gcollura93 IRC: gcollura Linkedin: Giulio Collura Le slide saranno disponibili sulla mia pagina web: http://gcollura.github.io/projects Grazie!

Editor's Notes

  • #10 The kit provides the features expected from a modern SDK &amp;gt; Layouts – a flexible layouting engine to create responsive user interfaces. &amp;gt; Resolution independence – facilities to manage UI element sizes to behave consistently across form factors &amp;gt; Internationalization – run your app in any language, graciously handle locale-aware settings and formats &amp;gt; Cloud-ready – integration with Ubuntu&amp;apos;s U1DB to store documents and app settings in the cloud &amp;gt; Automatic State Saving – save the state of any component for logic that depends on previous runs &amp;gt; Emulator which makes testing of apps super easy. &amp;gt; Services (Alarm), Command-line parsing and more!