titanium mobile - campus party recife 2

84
APLICAÇÕES MULTI-PLATAFORMA COM TITANIUM MOBILE

Upload: eric-cavalcanti

Post on 06-Dec-2014

2.237 views

Category:

Technology


0 download

DESCRIPTION

Slides da minha apresentação na Campus Party Recife 2

TRANSCRIPT

Page 1: Titanium Mobile - Campus Party Recife 2

APLICAÇÕES MULTI-PLATAFORMA COM TITANIUM MOBILE

Page 2: Titanium Mobile - Campus Party Recife 2

var palestrante;

palestrante = {nome : 'Eric Cavalcanti',trabalhaNo : 'CESAR',certificação : 'TCAD',titan : true,contato : '[email protected]',twitter : '@ericoc',blog : 'tips4dev.com'

}

Page 3: Titanium Mobile - Campus Party Recife 2

Apoiada pela Storm Ventures, Sierra Ventures e eBay. Appcelerator Inc. foi fundada em 2007 por especialista em

desenvolvimento web.

GSMA Global Mobile Awards

2012 Winner

Gartner 2012 Magic Quadrant

Visionary for Mobile Application

Development Platform

Page 4: Titanium Mobile - Campus Party Recife 2

O QUE É TITANIUM MOBILE?Titanium Mobile é um ambiente open source para desenvolvimento de aplicativos móveis multiplataforma utilizando uma das linguagens mais conhecidas mundialmente, o JavaScript.

Page 5: Titanium Mobile - Campus Party Recife 2

LICENÇA

SDKs e Titanium Studio – open source e free

Licença Apache 2.0

Serviços comerciais de treinamentos, suporte, módulos pagos, programa de certificações

Page 6: Titanium Mobile - Campus Party Recife 2

APPCELERATOR

PLATFORM

Page 7: Titanium Mobile - Campus Party Recife 2

TITANIUM MOBILE

470K!Developers!

55K!Apps!

140M!Devices!

Page 8: Titanium Mobile - Campus Party Recife 2

QUEM USA?

... e mais

Page 9: Titanium Mobile - Campus Party Recife 2

PLATAFORMA SUPORTADAS

Page 10: Titanium Mobile - Campus Party Recife 2

PLATAFORMA SUPORTADAS

Page 11: Titanium Mobile - Campus Party Recife 2

Nativa

TIPOS DE APLICAÇÕES

Mobile Web Híbrida

Page 12: Titanium Mobile - Campus Party Recife 2

MOBILE WEB

Page 13: Titanium Mobile - Campus Party Recife 2

MOBILE WEB

CSS3JavaScript

GeolocalizaçãoCâmeraBanco de dados

{

Page 14: Titanium Mobile - Campus Party Recife 2

MOBILE WEB

Page 15: Titanium Mobile - Campus Party Recife 2

MOBILE WEB

Page 16: Titanium Mobile - Campus Party Recife 2

HÍBRIDA

Camada Nativa

<html>...</html>

UI

webview iOSObjective-C

AndroidJava

Windows Phone C# / Visual Basic

{

Page 17: Titanium Mobile - Campus Party Recife 2

HÍBRIDA

Camada Nativa

<html>...</html>

UI

webview

GeolocalizaçãoCâmeraBanco de dadosContatosBússolaNotificaçõesMicrofoneSistemas de arquivos

{

Page 18: Titanium Mobile - Campus Party Recife 2

HÍBRIDA

Camada Nativa

<html>...</html>

UI

webview

.ipa .apk .xap

Page 19: Titanium Mobile - Campus Party Recife 2

HÍBRIDA

Camada Nativa

<html>...</html>

UI

webview

.ipa .apk .xap

Page 20: Titanium Mobile - Campus Party Recife 2

HÍBRIDA

Page 21: Titanium Mobile - Campus Party Recife 2

NATIVA

iOSObjective-C

AndroidJava

Windows Phone C# / Visual Basic

.ipa .apk .xap

Page 22: Titanium Mobile - Campus Party Recife 2

NATIVA

iOSObjective-C

AndroidJava

Windows Phone C# / Visual Basic

.ipa .apk .xap

Page 23: Titanium Mobile - Campus Party Recife 2

NATIVA

Page 24: Titanium Mobile - Campus Party Recife 2

Híbrida

E O TITANIUM MOBILE?

Mobile Web Nativa

Page 25: Titanium Mobile - Campus Party Recife 2

E O TITANIUM MOBILE?

Nativa

?

Page 26: Titanium Mobile - Campus Party Recife 2

COMO FUNCIONA?

Page 27: Titanium Mobile - Campus Party Recife 2

Bridge (JavaScript - Nativo)

var btn = Ti.UI.createButton();

Titanium JavaScript API

UIButton Class button

EXEMPLO

Page 28: Titanium Mobile - Campus Party Recife 2

TITANIUM MOBILE

Código JavaScript + Assets

Interpretador JavaScript

Titanium Bridge(código nativo)

.ipa .apk

Page 29: Titanium Mobile - Campus Party Recife 2

TITANIUM MOBILE

Código JavaScript + Assets

Interpretador JavaScript

Titanium Bridge(código nativo)

.ipa .apk

Page 30: Titanium Mobile - Campus Party Recife 2

POR QUE NATIVA?

O usuário já está acostumado em utilizar aplicações nativas em seu dispositivo

UI nativa tem melhor performance

Aumentamos consideravelmente a probabilidade de aprovação por lojas mais criteriosas

Page 31: Titanium Mobile - Campus Party Recife 2

PLATAFORMA ANDROID

Action bar

Page 32: Titanium Mobile - Campus Party Recife 2

PLATAFORMA IOS

Page 33: Titanium Mobile - Campus Party Recife 2

POR QUE NATIVA COM TITANIUM?

Não estamos limitados a uma

plataforma específica

1

Suporte para as maiores plataformas

(iOS, Android, Mobile Web, BB10, Windows 8)

2

Reduz o tempo gastoaprendendo diversas

linguagens

Conhecimento facilmente transferido

3

Código base único

Reduz duplicação de esforço

Page 34: Titanium Mobile - Campus Party Recife 2

CÓDIGO NATIVO IOS

// Objective-C

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Alert" message:@"Hello World" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];

[alert show];

Page 35: Titanium Mobile - Campus Party Recife 2

// Java/AndroidAlertDialog.Builder alertDialog = new AlertDialog.Builder(this).create();alertDialog.setMessage("Hello World");alertDialog.setButton("OK", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { // Fazer alguma coisa } });

alertDialog.show();;

CÓDIGO NATIVO ANDROID

Page 36: Titanium Mobile - Campus Party Recife 2

COM O TITANIUM

alert("Hello World");

...e multi-plataforma!

Page 37: Titanium Mobile - Campus Party Recife 2

SHOWCASE

http://www.appcelerator.com/customers/app-showcase/

Page 38: Titanium Mobile - Campus Party Recife 2

NBCIPHONE E IPAD

Page 39: Titanium Mobile - Campus Party Recife 2

SCOUTMOBIPHONE E ANDROID

Page 40: Titanium Mobile - Campus Party Recife 2

ZIP CARANDROID

Page 41: Titanium Mobile - Campus Party Recife 2

WOTCHAPP!IPHONE, IPAD E ANDROID

Page 42: Titanium Mobile - Campus Party Recife 2

GAMESTOPIPHONE E ANDROID

Page 43: Titanium Mobile - Campus Party Recife 2

AIRPORTCHATTERIPHONE

Page 44: Titanium Mobile - Campus Party Recife 2

CARDDIIPHONE E ANDROID

Page 45: Titanium Mobile - Campus Party Recife 2

MAIS EXEMPLOS...

http://www.builtwithtitanium.com/

Page 46: Titanium Mobile - Campus Party Recife 2

PRÉ-REQUISITOS

Mac OS X 10.7 (Lion) ou superior

Windows 7 ou superior

Ubuntu Linux 12.04 LTS

iOS SDK

Android SDK

Tizen SDK

Page 47: Titanium Mobile - Campus Party Recife 2

TITANIUM STUDIO E SDKS

Titanium Studio é uma IDE baseada no eclipse que interage com vários scripts Python contidos no Titanium SDK

Os scripts interagem com as ferramentas nativas de cada plataforma

Page 48: Titanium Mobile - Campus Party Recife 2

OPEN MOBILE MARKETPLACEhttp://marketplace.appcelerator.com

Page 49: Titanium Mobile - Campus Party Recife 2

TIPOS DE

PROJETO

Page 50: Titanium Mobile - Campus Party Recife 2

TITANIUM CLASSIC

Interface definida via código

CommonJS Modules

Page 51: Titanium Mobile - Campus Party Recife 2

CLASSIC

Page 52: Titanium Mobile - Campus Party Recife 2

EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA

PLATAFORMA(CLASSIC)

if (Ti.Platform.osname == "android") { ...} else { ...}

[android, iphone, ipad, mobileweb, tizen]

Page 53: Titanium Mobile - Campus Party Recife 2

TITANIUM ALLOY

UI declarativa (XML)

Framework MVC

Widgets

Themes

Page 54: Titanium Mobile - Campus Party Recife 2

ALLOY APP

index.xml index.tss

index.js

$.index.open();

Page 55: Titanium Mobile - Campus Party Recife 2

POR QUE UM FRAMEWORK MVC?

Provê uma clara separação de papéis e responsabilidades

Melhor organização do código

Mais fácil de manter e expandir

Page 56: Titanium Mobile - Campus Party Recife 2

MVC

Models - fornece a lógica de negócio, contém regras, dados e o estado da aplicação.

Views - fornece os componentes de UI para o usuário, apresentando os dados e permitindo que o usuário interaja com o modelo.

Controllers - fornece a interação entre os componentes de UI e o modelo.

Page 57: Titanium Mobile - Campus Party Recife 2

MVC

Controller

Model View

Page 58: Titanium Mobile - Campus Party Recife 2

MVC

Controller

Model View

Encapsula dados e comportamento

Page 59: Titanium Mobile - Campus Party Recife 2

MVC

Controller

Model View

Apresenta informações ao usuárioe recebe suas interações

Page 60: Titanium Mobile - Campus Party Recife 2

MVC

Controller

Model View

Intermediário entreo Model e a View

Page 61: Titanium Mobile - Campus Party Recife 2

ESTRUTURA DO

PROJETO

Page 62: Titanium Mobile - Campus Party Recife 2

ESTRUTURA DO

PROJETO

Page 63: Titanium Mobile - Campus Party Recife 2

ESTRUTURA DO

PROJETO

Page 64: Titanium Mobile - Campus Party Recife 2

ESTRUTURA DO

PROJETO

Page 65: Titanium Mobile - Campus Party Recife 2

ESTRUTURA DO

PROJETO

Page 66: Titanium Mobile - Campus Party Recife 2

ALLOY

Page 67: Titanium Mobile - Campus Party Recife 2

EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA

PLATAFORMA(ALLOY)

if (OS_ANDROID) { ...} else { ...}

[OS_IOS, OS_ANDROID, OS_MOBILEWEB, ENV_DEV, ENV_TEST, ENV_PRODUCTION]

Page 68: Titanium Mobile - Campus Party Recife 2

EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA

PLATAFORMA(ALLOY)

<Alloy> <Window> <View ns="Ti.Map" id="mapview"> <Annotation title="Cupertino" platform='ios' formFactor='tablet' latitude='37.3231' longitude='-122.0311'/> <Annotation title="Redwood City" platform='ios' formFactor='handheld' latitude='37.4853' longitude='-122.2353'/> <Annotation title="Mountain View" platform='android' latitude='37.3861' longitude='-122.0828'/> <Annotation title="Palo Alto" platform='android,ios,mobileweb' latitude='37.4419' longitude='-122.1419'/> <Annotation title="San Francisco" platform='mobileweb' latitude='37.7750' longitude='-122.4183'/> </View> </Window></Alloy>

Page 69: Titanium Mobile - Campus Party Recife 2

[android, ios, mobileweb]

EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA

PLATAFORMA(ALLOY)

<Alloy> <Window> <View ns="Ti.Map" id="mapview"> <Annotation title="Cupertino" platform='ios' formFactor='tablet' latitude='37.3231' longitude='-122.0311'/> <Annotation title="Redwood City" platform='ios' formFactor='handheld' latitude='37.4853' longitude='-122.2353'/> <Annotation title="Mountain View" platform='android' latitude='37.3861' longitude='-122.0828'/> <Annotation title="Palo Alto" platform='android,ios,mobileweb' latitude='37.4419' longitude='-122.1419'/> <Annotation title="San Francisco" platform='mobileweb' latitude='37.7750' longitude='-122.4183'/> </View> </Window></Alloy>

[tablet, handheld]

Page 70: Titanium Mobile - Campus Party Recife 2

ALLOY TSSPlatform-Specific styles

// iPhone"Label[platform=ios formFactor=handheld]": { backgroundColor: "#f00", text: 'iPhone'},// iPad and iPad mini"Label[platform=ios formFactor=tablet]": { backgroundColor: "#0f0", text: 'iPad'},// Android handheld and tablet devices"Label[platform=android]": { backgroundColor: "#00f", text: 'Android'},// Any Mobile Web platform"Label[platform=mobileweb]": { backgroundColor: "#f0f", text: 'Mobile Web'}

Page 71: Titanium Mobile - Campus Party Recife 2

• app◦ assets

■ appicon.png■ background.png

◦ controllers◦ styles

■ index.tss■ window.tss

◦ themes■ mytheme

■ assets■ background.png

■ styles■ app.tss

◦ views■ index.xml■ window.xml

ALLOY TEMAS

Page 72: Titanium Mobile - Campus Party Recife 2

BACKBONE NO ALLOY

Models

Mantém o controle dos seus

dados

Collections

Gerencia listas/array desses seus

dados

Sync/Adapters

SQLite, Properties, REST, ACS, CouchDB...

Page 73: Titanium Mobile - Campus Party Recife 2

ALLOY

MODELSexports.definition = { config: { "columns": { "title": "String", "author": "String" }, "adapter": { "type": "sql", "collection_name": "books" } }, extendModel: function(Model) { _.extend(Model.prototype, { // extended override or implement Backbone.Model }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { // extended override or implement Backbone.Collection }); return Collection; }}

Page 74: Titanium Mobile - Campus Party Recife 2

ALLOY

MODELSexports.definition = { config: { "columns": { "title": "String", "author": "String" }, "adapter": { "type": "sql", "collection_name": "books" } }, extendModel: function(Model) { _.extend(Model.prototype, { // extended override or implement Backbone.Model }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { // extended override or implement Backbone.Collection }); return Collection; }}

Page 75: Titanium Mobile - Campus Party Recife 2

ALLOY

MODELSexports.definition = { config: { "columns": { "title": "String", "author": "String" }, "adapter": { "type": "sql", "collection_name": "books" } }, extendModel: function(Model) { _.extend(Model.prototype, { // extended override or implement Backbone.Model }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { // extended override or implement Backbone.Collection }); return Collection; }}

Page 76: Titanium Mobile - Campus Party Recife 2

var book = Alloy.createModel('book', {title:'A Game of Thrones', author:'George R.R. Martins'});

book.save();

INSTANCIANDO O

MODEL

Page 77: Titanium Mobile - Campus Party Recife 2

var library = Alloy.createCollection('book'); library.fetch(); // Grab data from persistent storage

INSTANCIANDO A

COLLECTION

Page 79: Titanium Mobile - Campus Party Recife 2

MAIS

WIDGETS

http://alloylove.com/

Page 80: Titanium Mobile - Campus Party Recife 2

DEMO

Page 81: Titanium Mobile - Campus Party Recife 2

APPCELERATOR CLOUD SERVICES

Pre-build Web Backend

25+ API

Escalável

SDKs: Titanium, iOS, Android, AS3 e REST

Page 82: Titanium Mobile - Campus Party Recife 2

TIERS API

Page 83: Titanium Mobile - Campus Party Recife 2

CÓDIGO FONTE

http://github.com/ecavalcanti/

http://www.slideshare.net/ericoc

SLIDES

Page 84: Titanium Mobile - Campus Party Recife 2

Obrigado!