Presentazione per Todi Appy Days. Come creare un nuovo progetto, sviluppare e pubblicare applicationi per la prossima generazione di Ubuntu, su telefoni e computer desktop.

1. Sviluppo App e Convergenza
Giulio Collura

2. 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

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. foundations
› SDK

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
› 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

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
› 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

12. 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

13. 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

14. 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

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: ambiente con architettura emulata armhf o i386
› Consente la cross-compilation e la cross-configuration di una app

22. › Gestione del device 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 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

25. 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;
}
}

26. 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

27. 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"
}
}
}

28. Resolution Independence
Device Conversione
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
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!"
}
}
}

32. Convergenza
› Una sola applicazione per tutti i dispositivi
› Uso efficiente dello spazio dello schermo
› Interfacce dinamiche

33. Layouts

34. Layouts

35. Ubuntu.Layouts
› Componente dell'SDK utile a posizionare i vari elementi date
certe condizioni
› import Ubuntu.Layouts 1.0
› Elementi
› Layouts
› ItemLayout
› ConditionalLayout

36. 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

37. Domande

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!