Escola d'aplicacions Ubuntu – David Planella MOB, Barcelona, Març 2014

els fonaments> la platforma

(c) 2013 Canonical

> El contingut és fonamental, més espai pel més important

> Simplicitat amb gestos intuïtius,

les 4 vores són per navegar

> La vora dreta per desblocar

i commutar entre aplicacions actives

> La vora esquerra revela el llançador

amb les aplicacions preferides

> La vora superior per als indicadors

del sistema i missatgeria

> La vora inferior per a controls

contextuals de l'aplicació

> Nota: lliscament complet per veure

les aplicacions iniciades

Guia UX

(c) 2013 Canonical

> El Unity és la interfície gràfica de l'Ubuntu

> Per als usuaris, proporciona una interfície simple que permet que

el contingut emergeixi de manera natural i intuïtiva

> Per als desenvolupadors, proporciona un conjunt de tecnologies i

punts d'integració per adaptar les aplicacions al sistema

> L'SDK de l'Ubuntu fa la

integració fàcil amb una

col·lecció d'APIs clarament

definides

Unity

(c) 2013 Canonical

> The Launcher is revealed with a left swipe

> Contains quick access to favourite apps

> Shows currently active apps and can

switch between them

> Apps can be rearranged or pinned to the

Launcher with a long press

> The above integration comes for free

> Additional integration points

> Count indication

> Progress indication

> Urgency indication

Unity

(c) 2013 Canonical

> Indicators provide quick and consistent

access to frequent system functions

> Notifications from various sources

are unified in the messaging menu

> Tap once on an app indicator to scrub

left and right through the other ones

> Notify OSD provides unintrusive,

dismissable or actionable notifications

with snap decisions

> Integration points

> Message counts

> Activity notification

Unity

(c) 2013 Canonical

> El Heads-Up Display (HUD) permet expressar

les intencions de l'usuari perquè l'aplicació

hi respongui apropiadament

> Va més enllà deI les IU tradicionals per

convertir-se en una interfície d'intenció

> El HUD es pot controlar per tocs

o per veu

> Les lents (scopes) cerquen contingut, el HUD

en permet l'edició o personalització

> Punts d'integració

> Accions

Unity

(c) 2013 Canonical

Unity

> Les lents porten contingut rellevant als usuaris amb connectors de cerca

> Les lents organitzen el contingut poden actuar com a contenidors

de múltiples lents relacionades

> Altament modulars, les lents permeten la personalització de l'entorn

sense haver de modificar la plataforma

> Les lents poden executar-se localment o des d'un servidor remot

> Nota: a la lent d'aplicacions es poden habilitar o inhabilitar altres lents

de manera individual

(c) 2013 Canonical

Unity

> L'escenari lateral (sidestage) és un concepte innovador per facilitar la

utilització multitasca

> A l'escenari principal s'executen les aplicacions dissenyades per tauletes

> A l'escenari lateral s'executen les aplicacions dissenyades per telèfon

> Les vores mantenen les funcions, i l'escenari lateral es pot ocultar quan no

sigui necessari

(c) 2013 Canonical

La platforma Ubuntu

> Sistema Ubuntu (Linux) complet, amb una fina capa Android per accedir

a alguns dispositius

> El mateix sistema compartit per servidor, escriptori i mòbils

> L'SDK de l'Ubuntu proporciona accés API a serveis i dispositius

(c) 2013 Canonical

> L'Ubuntu s'allibera cada 6 mesos

> La primera versió mòbil fou la 13.10

> Les versions normals es mantenen

9 mesos

> Les versions de llarga durada (LTS)

es mantenen 5 anys

> L'Ubuntu 14.04 serà una versió

de llarga durada

> Les versions estables utilitzen la

nomenclatura any.mes (p.ex. 14.04)

> Les versions de desenvolupament utilitzen la nomenclatura Adjectiu Animal

(p.ex. Trusty Tahr)

La plataforma Ubuntu

(c) 2013 Canonical

La plataforma Ubuntu

Definició del full de ruta

> L'Ubuntu es planeja i desenvolupa obertament

> Cada 3 mesos, a l'Ubuntu Developer

Summit (UDS) es discuteix i es planeja

el cicle següent

> La comunitat participa en definir

l'Ubuntu durant la planificació

i implementació

> Cada tema a l'UDS es prepara com

a una sessió d'1h, que en finalitzar

defineix una especificació amb accions

i assignacions

> L'estat de la implementació es segueix

en un gràfic a status.ubuntu.com

(c) 2013 Canonical

L'Ubuntu és a tot arreu

> Els dispositius mòbils

són el futurs PCs

> Avui dia els telèfons mòbils i tauletes

ja tenen el mateix rendiment que

els portàtils ultralleugers

> L'Ubuntu s'ha dissenyat des de la base

per funcionar en tots els dispositius

i factors de forma

> Els conceptes d'UI i UX s'adapten naturalment a diferents mides de pantalla

> L'Ubuntu lidera la ruta cap a una categoria nova de supertelèfons

> Simplement caldrà connectar-los a un monitor i teclat

Convergència

(c) 2013 Canonical

El camí cap a la convergència

> La tecnologia escollida (QML)

fa la tasca fàcil

> Però no es tracta només d'adaptar

la mida dels ginys – també el seu comportament i disseny

> Els indicators des de l'Ubuntu 13.10 ja comparteixen el mateix codi

> Però l'objectiu final de convergència continuarà almenys 2 cicles fins

la versió 15.04

> Una altra fita significativa serà la fusió de les interfícies mòbils

i d'escriptori

> El Unity 8, en funcionament en mòbils, reemplaçarà el Unity 7

a l'escriptori

Convergència

(c) 2013 Canonical

L'Ubuntu porta les piles incloses

> Des del Navegador fins la Càmera i tot el

que hi hagi pel mig

> Hi ha al voltant de 20 aplicacions essencials

instal·lades per defecte

> Proporcionen les funcions bàsiques per al

dia a dia

> Desenvolupades per la comunitat,

juntament amb l'equip de

Disseny de Canonical

> L'ecosistema d'aplicacions de l'Ubuntu

creix amb aplicacions de tercers per

cobrir qualsevol altre requeriment

Aplicacions essencials

(c) 2013 Canonical

> Per instal·lar l'Ubuntu en un telèfon, cal instal·lar-lo abans

a l'escriptori

> La manera més fàcil és instal·lar-lo com a SO principal o bé en una

partició separada

> No tothom vol fer el salt encara

> Per qui hi estigui interessat, es pot instal·lar l'Ubuntu en una

màquina virtual

> La màquina virtual permet executar l'Ubuntu de manera segura

sense modificar els sistemes existents

> Només cal instal·lar el programa VirtualBox (disponible per a les

plataformes més populars)

> El rendiment a la màquina virtual serà molt més baix que en una instal·lació

completa de l'Ubuntu

Instal·lació de l'Ubuntu a l'escriptori

(c) 2013 Canonical

> La instal·lació inicial es duu a terme amb les eines phablet-tools,

un conjunt d'ordres de terminal que realitzen la preparació del

dispositiu

> Un cop instal·lat per primer cop, totes les actualitzacions es

faran des de la interfície d'usuari del dispositiu, segons el mètode

OTA (Over-The-Air, actualitzacions sense fil)

> Només caldrà utilitzar phablet-tools de nou en cas que quelcom falli

o bé si és que es volen utilitzar altres imatges no oficials o no estables

> L'Ubuntu es genera com a una imatge del sistema única i amb diverses

imatges específiques, una per a cada model de dispositiu disponible

> Tipus d'imatges: només lectura (predeterminada)

lectura i escriptura (només per tipus de desenvolupament específics)

> Canals d'imatge: estable i desenvolupament

Instal·lació de l'Ubuntu al mòbil

(c) 2013 Canonical

Què cal esperar després d'instal·lar

> Interfície gràfica funcional, aplicacions predeterminades, més aplicacions instal·lables

> Connexió a la xarxa GSM en el Nexus 4

> Trucades telefòniques i SMS en el Nexus 4

> Xarxa a través de la Wifi

> Càmera (frontal i posterior) i so

> GPS, però no AGPS

> Dispositiu accessible a través de l'eina Android Developer Bridge tool (adb)

Abans de començar, llegiu-meL'Ubuntu per a mòbils està pensat per ésser utilitzat per a avaluar-lo i per desenvolupament. És una versió

inicial per a desenvolupadors que potencialment pot inutilitzar el vostre dispositiu mòbil. Encara no

proporciona els mateixos serveis que un telèfon comercial i no és a punt per reemplaçar el vostre dispositiu

diari. Aquesta és la primera versió de l'Ubuntu per a mòbils i evoluciona molt ràpidament. Aquest procediment

suprimirà totes les dades del dispositiu. A no ser que s'hagi fet una còpia de seguretat, no es restauraran les

dades si es torna a instal·lar l'Android.

Instal·lació de l'Ubuntu al mòbil

(c) 2013 Canonical

Dispositius de referència

Dispositiu Codi Imatge de fàbrica Google

Nexus 4 mako occam

Nexus 7 (razor) flo flo

Nexus 10 manta mantaray

Instal·lació de l'Ubuntu al mòbil

Mètodes d'instal·lació

> Sistema Ubuntu https://wiki.ubuntu.com/Touch/Install

> Arrencada dual amb Android https://wiki.ubuntu.com/Touch/DualBootInstallation

(c) 2013 Canonical

> Les imatges de l'Ubuntu es creen per als 3 dispositius

de referència

> Com és tradició, la comunitat desenvolupa addicionalment altres ports

per fer que altres dispositius funcionin amb l'Ubuntu

> La llista de ports comunitaris inclou al voltant de 50 dispositius

> La premisa és que si un dispositiu funciona amb CyanogenMod, es pot

portar a l'Ubuntu

> Crear un port implica compilar la capa de compatibilitat Android i crear

una imatge específica per al dispositiu

> La guia de ports descriu detalladament com crear ports per a dispositius

https://wiki.ubuntu.com/Touch/Porting

L'Ubuntu en altres dispositius

els fonaments> l'sdk

(c) 2013 Canonical

L'Ubuntu proporciona un SDK (Software Development Kit) complet

> L'SDK dóna l'habilitat als desenvolupadors de crear i

mantenir aplicacions durant tot el seu cicle de vida

> Enfocament holístic: un potent IDE amb connexió

a dispositius, un joc d'eines gràfiques i una extensa

documentació de les API – tot inclòs

> Basat en el el popular entorn de treball Qt i les seves

eines de desenvolupament

> Els llenguatges de programació natius són QML, JavaScript i

opcionalment C++

> La web és també al mateix nivell, amb diverses opcions

d'integració: aplicacions web, HTML5 bàsic i HTML5 amb

accés a la plataforma

L'SDK de l'Ubuntu

(c) 2013 Canonical

Amb totes les funcions anticipades en un SDK modern

> Disposicions – un motor de disposicions flexible

per crear interfícies d'usuari adaptatives

> Independència de resolució – eines per gestionar

la mida i el comportament dels elements de l'UI

coherentment independentment del factor de forma

> Internationalització – execució de les aplicacions

en qualsevol llengua, gestió dels paràmetres i formats locals

> Habilitat per al núvol – integració amb l'U1DB per emmagatzemar

documents i paràmetres de les aplicacions en el núvol computacional

de l'Ubuntu

> Desament automatic de l'estat – desament de l'estat de qualsevol

component per a lògiques que depenen en execucions anteriors

> Serveis (Alarmes), anàlisi de paràmetres CLI i més!

L'SDK de l'Ubuntu

(c) 2013 Canonical

El Qt Creator és l'entorn de desenvolupament integrat (IDE) de l'SDK

> In IDE modern, ple de funcions per a l'edició avançada de codi

> Depurador visual

> Connectivitat: execució i desenvolupament d'aplicacions en dispositius

> Empaquetador .click gràfic

> Documentació API integrada

L'SDK de l'Ubuntu

(c) 2013 Canonical

Utilitzeu la connectivitat del Qt Creator per connectar amb dispositius

> Interfície gràfica: connexió

automàtica en endollar

un dispositiu

> Connexió segura:

utilitza el protocol SSH (Secure SHell)

> Requeriment: tant l'escriptori com el dispositiu estan connectats a

la mateixa WLAN

> Habilita l'execució remota d'aplicacions durant el desenvolupament

> Permet la instal·lació remota de paquets

> Funció experimental: compilació nativa de projectes C++

en el dispositiu

L'SDK de l'Ubuntu

(c) 2013 Canonical

Consells: com utilitzar el terminal des de l'escriptori

> No és part de l'SDK,

però pot ser molt útil per desenvolupar

> Premeu Ctrl+Alt+t per iniciar un terminal

> Premeu Ctrl+N per obrir una

pestanya nova en un terminal actiu

> Premeu la fletxa cap amunt

per utilitzar ordres de l'historial

> Premeu el tabulador per la compleció automàtica

> Executeu adb shell per entrar en un dispositiu a través de l'USB

> Un cop entrat, executeu sudo -i -H -U phablet per no utilitzar el

superusuari

> Executeu qmlscene nomaplicació.qml per iniciar una aplicació

L'SDK de l'Ubuntu

(c) 2013 Canonical

Consells: com utilitzar el terminal dins del dispositiu

> Curiosament, una de les aplicacions

que ha generat més interès

> Les mateixes funcions que el germà gran,

amb interfície tàctil

> Premeu i manteniu per mostrar la roda

d'ordres

> Doble toc per compleció automàtica

> Molt útil quan no es disposa d'un

ordinador o cable

> Mode apaïsat per ordres llargues

L'SDK de l'Ubuntu

(c) 2013 Canonical

El joc de components proporciona ginys per a l'aparença distintiva Ubuntu

> Una col·lecció dels components

essencials per crear aplicacions

> Projectat per dissenyadors i

implementat per desenvolupadors

> Els ginys proporcionen integració

visual i de comportament

> No és un requeriment utilitzar-lo,

però s'aconsella fer-ho per una

millor integració i consistència

en l'experiència d'usuari

> Disponible tant per a aplicacions QML com HTML5

> Utilitzeu l'aplicació de galeria per veure el joc de components en acció

L'SDK de l'Ubuntu

(c) 2013 Canonical

Les quies de disseny ajuden a crear “aplicacions Ubuntu”

> Un recurs en línia que va creixent juntament amb l'SDK

> Descriu els patrons de comportament i els components essencials

> http://design.ubuntu.com/apps

L'SDK de l'Ubuntu

(c) 2013 Canonical

Utilitzeu les referències API per aprendre a fer servir els components de l'SDK

> Com a part de l'SDK, cada giny i component

documenta la seva utilització,

propietats, mètodes i senyals

> La documentació API és en línia a:

developer.ubuntu.com/api

> La documentació API és també en local a:

file:///usr/share/ubuntu-ui-toolkit/doc/html/overview-ubuntu-sdk.html

> El Qt creator també integra la documentació local

> Els components de l'SDK són una capa per sobre de l'entorn Qt

– la documentació del projecte original Qt també és aplicable:

http://qt-project.org

L'SDK de l'Ubuntu

(c) 2013 Canonical

El lloc web del desenvolupador és el centre per crear contingut per a l'Ubuntu

> El recurs central per a guies i material d'aprenentatge

per crear aplicacions, lents, aplicacions web i encanteris per al núvol

> Cada àrea inclou sumaris de les tecnologies, programes d'aprenentatge

preguntes més freqüents i referències API

> El blog dels desenvolupadors publica notícies i actualitzacions interessants

per a desenvolupar per a l'Ubuntu

> Accés a la botiga de programari per publicar i mantenir les aplicacions

> També un portal per al suport comunitary a askubuntu.com:

un lloc web de preguntes i respostes sobre l'Ubuntu i desenvolupament

L'SDK de l'Ubuntu

(c) 2013 Canonical

Els desenvolupadors es

beneficïen d'una immensa

comunitat

> La comunitat proporciona

una sòlida xarxa de suport

per a preguntes sobre

desenvolupament

> Feu preguntes a Ask Ubuntu, a les llistes de correu

o en temps real al xat IRC

> Compartiu coneixements, promogueu les vostres aplicacions i assabenteu-

vos de què fan altres desenvolupadors al les xarxes socials

> Parleu directament amb altres desenvolupadors, i d'aquells qui creen

l'Ubuntu

> Participeu a l'UDS per determinar i influenciar la direcció de l'Ubuntu

> Trobareu tota la informació a http://developer.ubuntu.com/community/

L'SDK de l'Ubuntu

(c) 2013 Canonical

Instal·lació de l'SDK de l'Ubuntu

● Obriu un terminal prement la combinació de tecles Ctrl+Alt+T

● Introduïu l'ordre següent, prement la tecla de retorn:

Per a usuaris de l'Ubuntu 12.04 LTS, 12.10, 13.04 i 13.10:

sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && sudo apt-get update && sudo apt-get dist-upgrade && sudo apt-get install ubuntu-sdk

Alternativament, per aquells que utilitzin la versió de desenvolupament:

sudo apt-get update && sudo apt-get install ubuntu-sdk

1

L'SDK de l'Ubuntu

tallerd'aplicacions> model d'aplicació> aplicacions natives

(c) 2013 Canonical

> El model d'aplicació

i el cicle de vida s'han

dissenyat per ésser simples,

segurs i per gestionar l'energia

de manera efectiva

> La primera iteració simplementà en

l'Ubuntu 13.10

> Una aplicació és un element autònom

de programari visible per l'usuari

> Les aplicacions s'aturen temporalment

quan no són a l'escenari principal

> Especificació disponible a: https://blueprints.launchpad.net/ubuntu/+spec/client-1303-add-app-model-and-lifecycle-to-platform-api

El model d'aplicació

(c) 2013 Canonical

> Totes les aplicacions estan confinades utilitzant AppArmor

per restringir el que poden fer a la sessió de l'usuari

> L'AppArmor és un mòdul de seguretat del nucli que habilita el control

d'accés obligatori (MAC)

> L'AppArmor és molt similar a l'XNU Sandbox utilitzat per Apple

> Cada aplicació té un perfil individual de l'AppArmor que es genera

a partir d'una llista de permisos definida en un fitxer manifest

> El manifest es crea de manera gràfica des del Qt Creator

> Les aplicacions poden escriure només en el seu propi directori

> La compartició de continguts entre aplicacions es duu a terme a través

del Servei de contingut

> L'especificació és disponible a:

https://blueprints.launchpad.net/ubuntu/+spec/topic-security-application-isolation

Confinament d'aplicacions

(c) 2013 Canonical

> La gestió dels processos es centra en

el model d'aplicació

> Les aplications s'inicïen amb tasques Upstart

> L'Upstart és un servei d'inici basat en esdeveniments

> L'Upstart determina com iniciar les aplicacions i les tanca al final

de la sessió

> L'Upstart consulta el manifest de l'aplicació i prepara els paràmetres

de confinament i les variables d'entorn, entre altres coses

> S'assegura que s'inicïin les aplicacions consistentment i que hi hagi

només una instància d'una aplicació en execució a la vegada

> Exemple d'inici manual d'una aplicació

start application APP_ID=com.ubuntu.developer.dgalg.wordchain_wordchain_0.3

> El registre de les aplicacions: ~/.cache/upstart/application-click*

Gestió del procés de l'aplicació

(c) 2013 Canonical

Nativa o web, la vostra decisió

> Suport complet per les dues vies:

aplicacions natives o HTML5

> Aplicacions natives per la millor integració

o quan el rendiment sigui crític

> Aplicacions web per utilitzar les tecnologies

de la xarxa o fer ports de codi existent

> Hostatjades – integració de llocs web

> Local – HTML5 bàsic per la majoria dels casos

> Local – HTML5 amb accés a la platforma

per integració amb dispositius (càmera,

sensors…)

Aplicacions natives i web

(c) 2013 Canonical

> Creeu aplicacions natives per aprofitar

al màxim el rendiment del dispositiu

> Les aplicacions natives es basen en QML,

un llenguatge RAD per descriure

interfícies d'usuari i les seves transicions

> El JavaScript s'hi pot incorporar de manera natural i obrela porta a

implementar lògica més complexa

> Utilitzeu el C++ quan calgui exprimir el rendiment o bé quan el

funcionament en temps real sigui crític

> Els desenvolupadors de C++ diuen que l'entorn Qt i les classes associades

fan la programació molt més fàcil

> Si feu servir C++ és recomanable escriure un connector QML:

el C++ farà la feina del rerefons, i el QML definirà la interfície gràfica

Aplicacions natives

(c) 2013 Canonical

Apreneu a crear una aplicació nativa amb un exemple pràctic:

> El convertidor de divises

> Disponible a http://developer.ubuntu.com/apps/qml/tutorial

Exemple: aplicació nativa

tallerd'aplicacions> aplicacions web> publicació d'aplicacions

(c) 2013 Canonical

> Creeu aplicacions HTML5 per utilitzar els

llenguatges de la web

> Multiplataforma i interfície adaptativa sense esforç

> La via més fàcil per portar aplicacions existents

> Dos nivells d'integració depenent dels requeriments

> Hostatjades – anomenades aplicacions web, proporcionen integració

de llocs web remots dins del Unity, com a aplicació local

> Locals – el codi de l'aplicació s'instal·la i executa localment

> HTML5 – una aplicació HTML5 tradicional (HTML, CSS, JavaScript)

> HTML5 amb accés a la plataforma – una aplicació HTML5 que

requereix accés a dispositius com la càmera, sensors, etc. La tecnologia

Apache Cordova proporciona el rerefons d'accés

Aplicacions HTML5

(c) 2013 Canonical

Tecnologies web com a centre

> Parleu la llengua de la web: HTML5,

JavaScript, CSS3 i les APIs del W3C

> Creeu aplicacions convergents i adaptives

que funcionaran independentment de l'arquitectura i factor de forma

Augmentades amb el mòdul d'execució Apache Cordova

> Afegeix accés a dispositius natius a les aplicacions HTML5

> Obre les portes a 400K desenvolupadors web deCordova

> Ubuntu és una plataforma oficial Apache Cordova des de

la versió 3.3

HTML5 amb accés a la plataforma

(c) 2013 Canonical

> Les aplicacions de l'Ubuntu s'empaqueten,

distribueixen i instal·len en format .click

> Basat en el format .deb, similar

en concepte amb els paquets .apk d'Android

> Simples, ràpids i segurs amb integració amb l'AppArmor

> Creació fàcil des del Qt Creator, a punt per publicar

> Instal·lació i empaquetament simplificats l'aplicació conté totes les seves dependències

en desinstal·lar-la, aquestes es desinstal·len també

> Els paquets click permeten aïllar les actualitzacions d'aplicacions de

les del sistema

> Actualitzacions del sistema en format .deb per OTA incremental

> Actualitzacions d'aplicacions en format .click amb el gestor

d'actualitzacions

Paquets click

click

(c) 2013 Canonical

Utilitzeu la botiga per publicar i distribuir aplicacions

> En beta pública des del setembre de 2013

> Obert per a desenvolupadors amb les funcions essencials: enviament,

instal·lació remota i actualitzacions

> Procés d'enviament sense esforç: empaquetament amb GUI,

registre i subscripció gratuïts a developer.ubuntu.com

> Integració transparent: el programari instal·lable

apareix a la lent d'aplicacions

> El gestor d'actualitzacions instal·la

les darreres versions de

les aplicacions

La botiga de programari de l'Ubuntu

(c) 2013 Canonical

Learn how to write an HTML5 app with a hands-on tutorial

> HTML5 bàsic: el diccionari

http://developer.ubuntu.com/apps/html-5/tutorials/meanings-app-html5-tutorial/

> HTML5 amb accés a la plataforma: la càmera

http://developer.ubuntu.com/apps/html-5/tutorials/cordova-camera-app-tutorial/

> Documentació API a developer.ubuntu.com/apps/html-5/api

Exemple: creació d'aplicacions HTML5

(c) 2013 Canonical

Intenteu crear una aplicació simple amb els recursos i eines que heu après

> El Qt Creator i les plantilles d'aplicació

> El lloc web del desenvolupador a developer.ubuntu.com

> Documentació API

> Programes d'aprenentatge a developer.ubuntu.com

> Les guies de disseny

> askubuntu.com

Pràctica: creeu una aplicació

Moltesgràcies!

> david.planella@ubuntu.com · +DavidPlanella · @dplanella

> davidplanella.org

> developer.ubuntu.com

> @ubuntuappdev

> gplus.to/ubuntuappdev

> facebook.com/ubuntuappdev