O documento resume o framework Titanium Mobile para desenvolvimento de aplicações móveis multiplataforma usando JavaScript. Titanium permite que desenvolvedores criem aplicações nativas para iOS, Android e Windows usando uma única base de código JavaScript, reduzindo esforço e custos. O framework suporta tanto desenvolvimento híbrido quanto nativo e é usado por grandes empresas como NBC, Zipcar e GameStop.

1. Aplicações móveis multi-plataforma com
Titanium Mobile

2. var palestrante;
palestrante = {
nome : 'Eric Cavalcanti',
empresa : 'CESAR',
titulação : 'Mestre em Eng. de Software',
certificação : 'TCAD',
titan : true,
contato : 'ecavalcanti@gmail.com',
twitter : '@ericoc',
linkedin : 'https://goo.gl/jT5ioX',
slideshare : 'http://slideshare.net/ericoc'
}

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

4. O que é Titanium Mobile?
Aplicações Móveis Nativas
JavaScript
Licença Apache

5. Licença
SDK - open source
Licença Apache 2.0

6. Licença

7. Appcelerator
Platform
Mobile Test Automation
Arrow Builder
Arrow Cloud
Push Notifications
Mobile Lifecycle Dashboard
Business Insights
Performance & Crash Analytics

8. OSS Version
https://github.com/m1ga/titanium_with_atom

9. Quem usa?
... e mais

10. Plataformas suportadas

11. Tipos de aplicações
NativaMobile Web Híbrida

12. Mobile Web

13. Mobile Web
CSS3
JavaScript
Geolocalização
Câmera
Banco de dados{

14. Mobile Web

15. Mobile Web

16. Mobile Web

17. Híbrida
Porção nativa da aplicação
Browser
(WebView)
HTML
CSS
JavaScript
UI
chamadas da
API Nativa
Geolocalização
Câmera
Banco de dados
Contatos
Bússola
Notificações
Microfone
Sistemas de arquivos
{Mobile JavaScript API

18. Híbrida
Porção nativa da aplicação
Browser
(WebView)
HTML
CSS
JavaScript
UI
Mobile JavaScript API
.ipa
.apk
.xap

19. Híbrida
Porção nativa da aplicação
Browser
(WebView)
HTML
CSS
JavaScript
UI
.ipa
.apk
.xap
Mobile JavaScript API

20. Híbrida

21. Híbrida

22. Nativa
Java / Groovy
Objective-C / Swift
C# / VB.NET
.ipa
.apk
.xap

23. Nativa
Java / Groovy
Objective-C / Swift
C# / VB.NET
.ipa
.apk
.xap

24. Nativa

25. E o Titanium Mobile?
HíbridaMobile Web Nativa

26. E o Titanium Mobile?
Nativa
?

27. Como funciona?
JavaScript runtime (JavaScriptCore, V8)
Application code - JavaScript
Native-JavaScript Bridge
Titanium API - Custom Modules
Native APIs
iOS, Android e Windows Phone

28. Exemplo
Bridge (JavaScript - Nativo)
Titanium JavaScript API
UIButton Class
var btn = Ti.UI.createButton();

29. Bridge
JS - Nativo
JavaScript
+
Assets
+
Interpretador
JS
Titanium Mobile
.ipa
.apk
.xap

30. Bridge
JS - Nativo
JavaScript
+
Assets
+
Interpretador
JS
Titanium Mobile
.ipa
.apk
.xap

31. Soluções similares

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

33. Plataforma Android

34. Plataforma iOS

35. Por que nativa com
Titanium?
Não estamos limitados a uma
plataforma específica
1
Suporte para as maiores
plataformas
(iOS, Android, Mobile Web,
Windows)

36. Por que nativa com
Titanium?
Reduz o tempo gasto
aprendendo diversas linguagens
2
Conhecimento facilmente
transferido

37. Por que nativa com
Titanium?
Código base único
3
Reduz duplicação de esforço

38. código nativo
iOS
// Objective-C
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@"Alert"
message:@"Hello World"
delegate:nil
cancelButtonTitle:@"OK"
otherButtonTitles:nil];
[alert show];

39. código nativo
iOS
// Swift
let alertView = UIAlertController(title: "Alert", message: "Hello World",
preferredStyle: UIAlertControllerStyle.Alert)
alertView.addAction(UIAlertAction(title: "Ok", style: UIAlertActionStyle.Default,
handler: nil))
presentViewController(alertView, animated: true, completion: nil)

40. código nativo
Android
// Java/Android
AlertDialog.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();;

41. Com o Titanium
alert("Hello World");
...e multi-plataforma!

42. Windows Phone
MessageBox.Show(“Hello World”);

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

44. NBC
iOS

45. Scoutmob
iOS e Android

46. ZIP CAR
IOS e Android

47. Wotchapp!
iOS e Android

48. VIBEZONE
iOS e Android

49. gamestop
iOS e Android

50. Snowciety
Social ski tracker
iOS e Android

51. Carddi
iOS e Android

52. PiniOn
iOS e Android

53. PiniOn
iOS e Android

54. Curta Nordeste
iOS e Android

55. Cia Athletica
iOS e Android

56. Pré-requisitos
Mac OS X 10.9.4 (Mavericks) ou superior
Windows 7 ou superior (Windows Phone necessita da versão 8.X)
Ubuntu Linux 12.04 LTS
iOS SDK
Android SDK
Windows Phone 8 SDK

57. Appcelerator Studio e
SDKs
Appcelerator Studio é uma IDE baseada no eclipse que
interage com vários scripts contidos no Titanium SDK
Os scripts interagem com
as ferramentas nativas de
cada plataforma

58. Open Mobile Marketplace
http://marketplace.appcelerator.com

59. Tipos de
Projeto

60. Titanium Classic
Interface definida via código
CommonJS Modules

61. Classic

62. Executando código específico para uma
plataforma(CLASSIC)
if (Ti.Platform.osname == "android") {
...
} else {
...
}
[android, iphone, ipad, mobileweb, windows]

63. Titanium Alloy
UI declarativa (XML)
Framework MVC
Widgets
Themes

64. Alloy App
index.xml index.tss
index.js
$.index.open();

65. Estrutura do
Projeto

66. Estrutura do
Projeto

67. Estrutura do
Projeto

68. Estrutura do
Projeto

69. Estrutura do
Projeto

70. Alloy

71. 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]

72. UI 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>

73. [android, ios, mobileweb, windows]
<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]
UI específico para uma
plataforma(ALLOY)

74. ALLOY TSS
Platform-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'
}

75. Alloy Temas
• 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

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

77. Alloy
Models
exports.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;
}
}

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

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

80. Alloy Widgets

81. Demo

82. App Designer (beta)

83. Quero saber mais?

84. tidev
http://www.tidev.io/

85. sample apps

86. widgets e modules
http://gitt.io/

87. Titanium documentation
http://docs.appelerator.com

88. University
https://university.appcelerator.com/

89. Appcelerator blog
https://www.appcelerator.com/blog/

90. Community Questions &
Answers
https://community.appcelerator.com/

91. Obrigado!
CODE STRONG!