TITANIUM        Eric Cavalcantiecavalcanti@gmail.com              @ericoc
Apoiada pela Storm Ventures, Sierra Ventures e eBay.Appcelerator Inc. foi fundada em 2006 por especialista em             ...
O QUE É O TITANIUM?Titanium é um framework open source para construiraplicações móveis (ou desktop) nativas usando tecnolo...
POR QUE NATIVA?O usuário já está acostumado em utilizar aplicações nativas emseu dispositivoO tempo de resposta de uma UI ...
PLATAFORMA SUPORTADASDesktop     Win 32     Mac OS X (Intel)     LinuxMobile     iPhone/iPod (3.1 ou mais recente)     And...
LICENÇASDKs e Titanium Studio – open source e freeLicença Apache 2.0Serviços comerciais de treinamento e suporteOutros ser...
QUEM USA?            ... e mais
SHOWCASEhttp://www.appcelerator.com/showcase/                applications-showcase/
PLATAFORMA TITANIUM
FUNDAMENTOSUma aplicação Titanium é um programa JavaScript que éinterpretado em tempo de execução no dispositivoNão roda d...
CROSS-PLATFORMCross-platform != “Write Once, Run Everywhere”100% de reuso de código não visualBoa parte do código de UI é ...
TITANIUM FEATURESNative User Experience                MultimediaNative performance + Native UI        Camera, video camer...
OPEN MOBILE MARKETPLACE   http://marketplace.appcelerator.com
PRÉ-REQUISITOSMac OS X 10.6 (Snow Leopard) ou 10.7 (Lion)Windows XP (todas edições, exceto Starter Edition)Windows 7Ubuntu...
TITANIUM STUDIO E SDKSTitanium Studio é uma IDE baseada no eclipse queinterage com vários scripts Python contidos noTitani...
CRIANDO UM NOVO     PROJETO
PROJETO EM EXECUÇÃO
RESOURCES ESPECÍFICOS DE   CADA PLATAFORMASubpastas da pasta Resources  android  iphone
RECURSOS ESPECÍFICOS DE    CADA PLATAFORMAAndroid: intents, background services, hardware menu buttoniOS: routes in map, p...
EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA        PLATAFORMAif (Ti.Platform.osname == "iphone") {	 ...} else {	 ...}
TIPOS DE APLICAÇÕESTab GroupSingle WindowWindow Stack
PARA DESENVOLVEDORES           WEB...Uma “window” seria similar a uma “página”Uma “view” seria similar a uma “div”O namesp...
EXEMPLO
TABLEVIEW var win1 = Titanium.UI.createWindow({"   backgroundColor:"#fff"});var dados = ["   "    {title:"Row 1 - simple r...
TABELAS AGRUPADASvar table1 = Titanium.UI.createTableView({"    style:Titanium.UI.iPhone.TableViewStyle.GROUPED}); var sec...
TABLEVIEW EDITÁVEIS           SOMENTE NO IOS// create table viewvar tableview = Titanium.UI.createTableView({	 data:data,	...
SCROLLABLEVIEWPermite o scroll horizontal de uma ou mais views através dogesto slider        var image1 = Ti.UI.createImag...
ESTILOS
STYLE COM JSS                (JAVASCRIPT STYLESHEETS)app.js!"#$%&()%$*$+&,-.,/#0"102&()%34$$$&(56%6$789$!"#$:;11)$*$+&,-.,...
JSS POR PLATAFORMAapp.jssapp.android.jssapp.android.high.jssapp.android.medium.jssapp.android.low.jssapp.iphone.jss
BANCO DE DADOS E SISTEMADE ARQUIVOS
DADOS LOCAISTitanium.App.Properties  Ideal para armazenar configurações da aplicaçãoTitanium.Filesystem  Utilizado para man...
DADOS REMOTOS
HTTPCLIENTTi.Network.HTTPClient implementa aespecificação XHR (XMLHttpRequest)Familiar para programadores Ajax
MULTIMÍDIA
API DE ÁUDIOExecuta arquivo de som local ou remoto (Sound)Suporte a stream de áudio (Audio Player)Suporte a gravação de áu...
EXECUTANDO                                        AUDIOvar win = Ti.UI.createWindow({	    backgroundColor:#FFF})var sound ...
API DE VÍDEOExecuta arquivos de vídeo localSuporte a stream de vídeo (somente no iOS)Suporte a captura de vídeo (no androi...
EXECUTANDO                                 VÍDEOvar win = Ti.UI.createWindow({	   backgroundColor:#000});var video = Ti.Me...
CÂMERA Interagir com a câmeraembutida do Android ou          IPhone
CAPTURANDO UMA                                  FOTOTi.Media.showCamera({	   	    success:function(e) {	   	    	   var im...
GEOLOCALIZAÇÃOEMAPAS
UTILIZANDO A            GEOLOCALIZAÇÃOTi.Geolocation.getCurrentPosition(function(e){	   if (e.error) {	   	    alert(Erro ...
UTILIZANDO                                     MAPASvar mountainView = Ti.Map.createAnnotation({	    latitude:37.390749,	 ...
ACELERÔMETRO
UTILIZANDO O                 ACELERÔMETROTitanium.Accelerometer.addEventListener(update,function(e){    Ti.API.debug("acce...
Twitter Trends
APPCELERATOR WIKIhttp://wiki.appcelerator.org/display/guides/Home
MOBILE API REFERENCEhttp://developer.appcelerator.com/apidoc/mobile/latest
APPCELERATOR BLOGhttp://developer.appcelerator.com/blog/
COMMUNITY QUESTIONS & ANSWERS   http://developer.appcelerator.com/questions
APPCELERATOR VIDEO CHANNEL     http://vimeo.com/appcelerator
KITCHEN SINKhttps://github.com/appcelerator/KitchenSink
OBRIGADO!                Eric Cavalcanti        ecavalcanti@gmail.com                      @ericoc
Introdução ao Titanium Mobile
Introdução ao Titanium Mobile
Introdução ao Titanium Mobile
Introdução ao Titanium Mobile
Upcoming SlideShare
Loading in …5
×

Introdução ao Titanium Mobile

10,355 views

Published on

Uma breve introdução ao Titanium Mobile, apresentada no Intervalo Técnico do C.E.S.A.R. em outubro de 2011.

Published in: Technology

Introdução ao Titanium Mobile

  1. 1. TITANIUM Eric Cavalcantiecavalcanti@gmail.com @ericoc
  2. 2. Apoiada pela Storm Ventures, Sierra Ventures e eBay.Appcelerator Inc. foi fundada em 2006 por especialista em desenvolvimento web.
  3. 3. O QUE É O TITANIUM?Titanium é um framework open source para construiraplicações móveis (ou desktop) nativas usando tecnologiasweb abertas (JavaScript - opcionalmente HTML e CSS)
  4. 4. POR QUE NATIVA?O usuário já está acostumado em utilizar aplicações nativas emseu dispositivoO tempo de resposta de uma UI nativa é menorAumentamos consideravelmente a probabilidade de aprovaçãopor lojas mais criteriosas
  5. 5. PLATAFORMA SUPORTADASDesktop Win 32 Mac OS X (Intel) LinuxMobile iPhone/iPod (3.1 ou mais recente) Android (1.6 ou mais recente) iPadBlackBerry
  6. 6. LICENÇASDKs e Titanium Studio – open source e freeLicença Apache 2.0Serviços comerciais de treinamento e suporteOutros serviços comerciais como o Analytics
  7. 7. QUEM USA? ... e mais
  8. 8. SHOWCASEhttp://www.appcelerator.com/showcase/ applications-showcase/
  9. 9. PLATAFORMA TITANIUM
  10. 10. FUNDAMENTOSUma aplicação Titanium é um programa JavaScript que éinterpretado em tempo de execução no dispositivoNão roda dentro de um browserWebkit JavaScriptCore no iOSRhino no Android / BlackBerry (em breve V8 no Android)
  11. 11. CROSS-PLATFORMCross-platform != “Write Once, Run Everywhere”100% de reuso de código não visualBoa parte do código de UI é reusada, dependendo do designMelhor experiência do usuário em cada plataformaTitanium é “Write Once, Adapt Everywhere”
  12. 12. TITANIUM FEATURESNative User Experience MultimediaNative performance + Native UI Camera, video camera,(tables, animations, gestures…etc.) streaming/device audio/videoLocation-based services AnalyticsAugmented reality, geo-location, Custom analytics baked into everycompass, native maps application, track usage patterns and adoptionSocial sharing Titanium+PlusAuthenticated access to Facebook, Encrypted database, ecommerce,Twitter, Yahoo YQL. ads, barcode scanners, customNative email/address book analytics, in-app purchaseData Development toolsLocal SQLite data store, web Create, test, and publish your appservices, lightweight key/value using the same tools acrossstore platforms
  13. 13. OPEN MOBILE MARKETPLACE http://marketplace.appcelerator.com
  14. 14. PRÉ-REQUISITOSMac OS X 10.6 (Snow Leopard) ou 10.7 (Lion)Windows XP (todas edições, exceto Starter Edition)Windows 7Ubuntu Linux 10.04iOS SDKAndroid SDK
  15. 15. TITANIUM STUDIO E SDKSTitanium Studio é uma IDE baseada no eclipse queinterage com vários scripts Python contidos noTitanium SDKOs scripts interagem comas ferramentas nativas decada plataforma
  16. 16. CRIANDO UM NOVO PROJETO
  17. 17. PROJETO EM EXECUÇÃO
  18. 18. RESOURCES ESPECÍFICOS DE CADA PLATAFORMASubpastas da pasta Resources android iphone
  19. 19. RECURSOS ESPECÍFICOS DE CADA PLATAFORMAAndroid: intents, background services, hardware menu buttoniOS: routes in map, pre-built animations, custom fonts, Cocoa UIAPIs específicas de cada plataforma são implementadas emnamespace específicos para a plataforma.Ex. Titanium.Android.Menu
  20. 20. EXECUTANDO CÓDIGO ESPECÍFICO PARA UMA PLATAFORMAif (Ti.Platform.osname == "iphone") { ...} else { ...}
  21. 21. TIPOS DE APLICAÇÕESTab GroupSingle WindowWindow Stack
  22. 22. PARA DESENVOLVEDORES WEB...Uma “window” seria similar a uma “página”Uma “view” seria similar a uma “div”O namespace TI.UI fornece vários componentes visuais (buttons,text field, pickers, maps, scroll views)
  23. 23. EXEMPLO
  24. 24. TABLEVIEW var win1 = Titanium.UI.createWindow({" backgroundColor:"#fff"});var dados = [" " {title:"Row 1 - simple row"}," " {title:"Row 2 - with child", hasChild:true}," " {title:"Row 3 - with detail", hasDetail:true}," " {title:"Row 4 - with check", hasCheck:true}," " {title:"Row 5 - red background", backgroundColor:"#f00"}" ];"  var table1 = Titanium.UI.createTableView({" data:dados}); win1.add(table1);win1.open();
  25. 25. TABELAS AGRUPADASvar table1 = Titanium.UI.createTableView({" style:Titanium.UI.iPhone.TableViewStyle.GROUPED}); var section1 = Titanium.UI.createTableViewSection();section1.headerTitle = "Hello";var row1 = Titanium.UI.createTableViewRow({title:"Hello 1"});var row2 = Titanium.UI.createTableViewRow({title:"Hello 2"});section1.add(row1);section1.add(row2); var section2 = Titanium.UI.createTableViewSection();section2.headerTitle = "Hello2";var row3 = Titanium.UI.createTableViewRow({title:"Hello 3"});var row4 = Titanium.UI.createTableViewRow({title:"Hello 4"});section2.add(row3);section2.add(row4); table1.setData([section1,section2]);
  26. 26. TABLEVIEW EDITÁVEIS SOMENTE NO IOS// create table viewvar tableview = Titanium.UI.createTableView({ data:data, editable:true, top:50});tableview.editing = true;tableview.editing = false;
  27. 27. SCROLLABLEVIEWPermite o scroll horizontal de uma ou mais views através dogesto slider var image1 = Ti.UI.createImageView({ image:image1.jpg }); var image2 = Ti.UI.createImageView({ image:image2.jpg }); var image3 = Ti.UI.createImageView({ image:image3.jpg }); var win = Ti.UI.createWindow({ backgroundColor:black }); var scrollView = Ti.UI.createScrollableView({ views:[image1, image2, image3], showPagingControl:true, pagingControlHeight:30 }); win.add(scrollView); win.open();
  28. 28. ESTILOS
  29. 29. STYLE COM JSS (JAVASCRIPT STYLESHEETS)app.js!"#$%&()%$*$+&,-.,/#0"102&()%34$$$&(56%6$789$!"#$:;11)$*$+&,-.,/#0"10<;11)34$$$&(56:6=$$$1&1>056?0>>)6$789$!"#$%&@$*$+&1"&;A,-.,/#0"102&()%34/>"BBC"A056%&<>;06789$app.jss!"#$###%&()*+,-./+0+*12*3.24#5#%,66+-#$###"7.6819::;<4###837)861=:;<4#5#>"7-?0,3#$###%&()*+,-./+0+*12%0,324#5#
  30. 30. JSS POR PLATAFORMAapp.jssapp.android.jssapp.android.high.jssapp.android.medium.jssapp.android.low.jssapp.iphone.jss
  31. 31. BANCO DE DADOS E SISTEMADE ARQUIVOS
  32. 32. DADOS LOCAISTitanium.App.Properties Ideal para armazenar configurações da aplicaçãoTitanium.Filesystem Utilizado para manipulação do sistema de arquivosTitanium.Database Permite o acesso local a banco de dados SQLite
  33. 33. DADOS REMOTOS
  34. 34. HTTPCLIENTTi.Network.HTTPClient implementa aespecificação XHR (XMLHttpRequest)Familiar para programadores Ajax
  35. 35. MULTIMÍDIA
  36. 36. API DE ÁUDIOExecuta arquivo de som local ou remoto (Sound)Suporte a stream de áudio (Audio Player)Suporte a gravação de áudio (no android via intent)
  37. 37. EXECUTANDO AUDIOvar win = Ti.UI.createWindow({ backgroundColor:#FFF})var sound = Ti.Media.createSound({ url:music/u2.mp3});var button = Ti.UI.createButton({ title:Play Sound, width:250, height:35});button.addEventListener(click, function(e){ sound.play();})win.add(button);win.open();
  38. 38. API DE VÍDEOExecuta arquivos de vídeo localSuporte a stream de vídeo (somente no iOS)Suporte a captura de vídeo (no android via intent)
  39. 39. EXECUTANDO VÍDEOvar win = Ti.UI.createWindow({ backgroundColor:#000});var video = Ti.Media.createVideoPlayer({ url:video/movie.mp4, backgroundColor:#000});// No android você não adiciona o video player nawindowif (Ti.Platform.osname != android) { win.add(video);}win.open();video.play();
  40. 40. CÂMERA Interagir com a câmeraembutida do Android ou IPhone
  41. 41. CAPTURANDO UMA FOTOTi.Media.showCamera({ success:function(e) { var image = e.media; imgPhoto.image = image; }, cancel:function() {}, error:function(e) { alert.(e.code); }, mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]});
  42. 42. GEOLOCALIZAÇÃOEMAPAS
  43. 43. UTILIZANDO A GEOLOCALIZAÇÃOTi.Geolocation.getCurrentPosition(function(e){ if (e.error) { alert(Erro : + e.error.message); return; } Ti.API.info(Latitude: + e.coords.latitude); Ti.API.info(Longitude: + e.coords.longitude);});
  44. 44. UTILIZANDO MAPASvar mountainView = Ti.Map.createAnnotation({ latitude:37.390749, longitude:-122.081651, title:Appcelerator Headquarters, subtitle:Mountain View, CA, pincolor:Ti.Map.ANNOTATION_RED, animate:true});var mapView = Ti.Map.createView({ mapType:Ti.Map.STANDARD_TYPE, region: {latitude:37.390749, longitude:-122.081651, latitudeDelta:0.01, longitudeDelta:0.01}, animate:true, regionFit:true, annotations:[mountainView]});win.add(mapView);
  45. 45. ACELERÔMETRO
  46. 46. UTILIZANDO O ACELERÔMETROTitanium.Accelerometer.addEventListener(update,function(e){ Ti.API.debug("accelerometer - x:"+e.x+",y:"+e.y+",z:"+e.z);});
  47. 47. Twitter Trends
  48. 48. APPCELERATOR WIKIhttp://wiki.appcelerator.org/display/guides/Home
  49. 49. MOBILE API REFERENCEhttp://developer.appcelerator.com/apidoc/mobile/latest
  50. 50. APPCELERATOR BLOGhttp://developer.appcelerator.com/blog/
  51. 51. COMMUNITY QUESTIONS & ANSWERS http://developer.appcelerator.com/questions
  52. 52. APPCELERATOR VIDEO CHANNEL http://vimeo.com/appcelerator
  53. 53. KITCHEN SINKhttps://github.com/appcelerator/KitchenSink
  54. 54. OBRIGADO! Eric Cavalcanti ecavalcanti@gmail.com @ericoc

×