Presentazione per Codemotion Milan 2014 La piattaforma Ubuntu, quali sono le tecnologie utilizzate da Ubuntu per la nuova piattaforma. Da dove partire a sviluppare nuove app per Ubuntu Touch e Desktop con l'Ubuntu SDK. Piccola introduzione al linguaggio QML. Come contribuire alle Core Apps e come mettersi in contatto con la community di Ubuntu-it

1. Ubuntu Phone: the community smartphone
Giulio Collura

2. Ubuntu
› a new force in mobile

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

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

5. Design
Un telefono in cui
ti puoi rispecchiare
› Focus sui contenuti
› Interazioni semplici, veloci e naturali
› Stile unico

6. Ubuntu User Experience
› Spazio ai contenuti
› Gestures semplici e intuitive

7. Unity
› Unity è la shell di Ubuntu
› Per gli utenti, fornisce una semplice e touch-ready

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

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

10. foundations
› SDK

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

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

13. Componenti
› Layouts
› Resolution Independence
› Localizzazioni
› Cloud-ready
› Emulatore
› Servizi
› Command-line parsing

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

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

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

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

18. App native
› Scrivere app native per sfruttare
tutta la potenza del dispositivo
› QML + Javascript + C++ (e 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

19. 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
› Progettati per essere semplici, veloci e sicuri,
grazie all'integrazione di AppArmor
› Forniscono isolamento tra aggiornamenti del
sistema e delle app
› Gli aggiornamenti del sistema vengono forniti tramite
aggiornamenti OTA (over-the-air) incrementali
› Gli aggiornamenti delle app tramite pacchetti click

20. app project
› design › develop › publish

21. Installazione
› Tramite terminale:
› Per Ubuntu 12.04 LTS e 14.04 LTS
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

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

25. › Kit: ambiente con architettura emulata armhf o i386
› Consente la cross-compilation e la cross-configuration di una
app

26. › Gestione del device direttamente da QtCreator
› Sono forniti anche tool da linea di comando
› sudo apt-get install phablet-tools

27. Struttura del QML
› Il QML è un linguaggio dichiarativo
› Specificare un id serve a rendere il
componente accessibile da altre parti nel
codice
› Esempio:
Rectangle {
id: canvas
width: 200
height: 200
color: "blue"
}

28. › Gli oggetti possono essere innestati
import QtQuick 2.0
Rectangle {
id: rect
width: 300
height: 300
color: "orange"
Image {
id: logo
source: "calculator.svg"
anchors.centerIn: parent
height: rect.height / 2
width: rect.width / 2
}
}
› Notare come logo acceda alle proprietà di rect

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

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

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

32. Resolution Independence
› L'obiettivo è rendere semplice lo sviluppo di
interfacce grafiche scalabili per ogni form
factor
› Grid Unit (gu)
› Density Indipendent Pixel (dp)
Device Conversione
Comuni schermi
(laptop, desktop) 1 gu = 8 px
Retina display 1 gu = 16 px
Smartphones 1 gu = 18 px
Tablet 1 gu = 10 px

33. Nuovi componenti
› È utile creare nuovi componenti esternamente
per modularizzare la propria applicazione
› Molto semplice
› È necessario creare un nuovo modulo .qml
all'interno del progetto

34. 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!"
}
}
}

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

36. Layouts

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

38. U1db
› Modulo per la gestione di un database basato
su JSON objects
› Molto semplice da usare
› Comodo per salvare impostazioni e
informazioni permanentemente con
sincronizzazione cross device
› import U1db 1.0 as U1db
› Policy: networking

39. The Ubuntu dash and scopes architecture
› Ricerche veloci attraverso la Dash
› Le Scope sono responsabili di fornire alla Dash i
risultati di ricerca tramite specifiche categorie

40. Scopes
› Finestra su un mondo di contenuti

41. Scopes data flow

42. Scope API
› API in C++
› Separazione tra Data e View
› Personalizzabili
› Più visibilità al brand
› Giusta importanza ai giusti
contenuti

43. Community
› Piattaforma di sviluppo
› Launchpad – launchpad.net
› IRC:
› Internazionali:
› #ubuntu-touch
› #ubuntu-app-devel
› Italiani:
› #ubuntu-it
› #ubuntu-it-dev
› Ask
› http://askubuntu.com/
› http://chiedi.ubuntu-it.org/
› Facebook
› Gruppo ubuntu-it

44. Come collaborare alle Core Apps
› Registrarsi a Launchpad
› Collegarsi a
› https://launchpad.net/ubuntu-phone-coreapps/
› Scegliere un progetto
› bzr branch lp:<repo-name>
› Hack!
› …
› Richiedi una Merge Proposal
› bzr lp-propose-merge

45. Squash bugs!
› Ogni progetto ha un proprio bug tracker
›

46. Domande

47. Contatti
Email: giulio.collura@gmail.com
Twitter: @gcollura93
Github, Launchpad, IRC: gcollura
Le slide saranno disponibili sulla mia pagina web:
http://gcollura.github.io/projects
Grazie!