Develop your first mobile App for iOS and Android

Transcript

2. Develop your first mobile App for iOS and Android! Ricardo Alcocer // Platform Evangelist! March 12, 2013! Silicon Valley Titanium User Group!
3. ! Format of this talk!
4. Our objective for today! ! BUILD AN APP!
5. Base assumptions! •  You are not a “hardcore coder”! •  You know how to build websites with HTML and CSS! •  You have seen at least a little bit of Javascript!
6. About Appcelerator Titanium! •  Not a language, but a high-level Javascript SDK! •  Allows you build Native Apps for iOS (iPhone, iPod Touch, iPad), Android (Phone and Tablet), Mobile Web, Blackberry 10 (beta), soon for Windows 8 and Tizen! •  Free/Open Source!! •  It’s Native, NOT web app!
7. The design of your App is
 SUPER important! If the users don't like how your App LOOKS ! ! they will delete it!! h"p://www.itexico.com/blog/bid/91499/Why-­‐your-­‐Mobile-­‐App-­‐s-­‐UX-­‐UI-­‐must-­‐be-­‐Awesome  
8. h"p://blog.planetargon.com/entries/2010/3/1/designer-­‐vs-­‐developer  
9. Harmony between design and functionalities!
10. Model   View   Controller   TSS   XML   JS   JS   Invisible  to  the  end-­‐user   User  Interface  Components   The MVC Pattern!
11. Designers and developers can now get along! h"p://images.elephantjournal.com/wp-­‐content/uploads/2012/01/dog-­‐and-­‐cat-­‐sleeping-­‐together.jpg  
12. Download Titanium Studio!
13. Make sure you download Studio!
14. Configure platform SDKs! SDKs  allow  you  to  compile  with  the  naRve  tools  and  provide  you  with  Phone  Simulators  for  tesRng  
15. Success!!
16. Now you can follow the “Quick Start Guide”, or….!
17. h"p://amazingjpg.blogspot.com/2012/11/reckless-­‐abandon-­‐photo-­‐by-­‐peter-­‐brannon.html   …you can try to fly!
18. h"p://www.justsaypictures.com/images/training-­‐wheels-­‐01.jpg   Titanium is very powerful, so better get your training wheels on!
19. Let’s build a “Jokes” App!
20. Let’s create a new project!
21. Select Titanium Project!
22. Select Alloy as your Titanium Project Type!
23. Configure your project! In  reverse  URL  format:  ie.  (com.mycompany.myapp)     Select  target  plaYorms  for  this  project   Are  you  using  Appcelerator  Cloud  Services?   Name  for  your  App  
24. Titanium Studio!
25. These  two  work  together  to  build  UI   These  one  implement  funcRonaliRes     and  interacRvity   Remember?   We  won’t  look  at  these  
26. Running an App! You’ll  only  see  the  target   plaYorms  you  explicitly     configured     iPhone  is  only  available  on  Mac   Android  is  available  on  Win,   Mac  and  Linux  
27. Default App running on iPhone Simulator!
28. Default index.xml! <Alloy>        <Window  class="container">                            <Label  id="label"  onClick="doClick">Hello,  World</Label>        </Window>   </Alloy>  
29. Objects in index.xml! <Alloy>        <Window  class="container">                            <Label  id="label"  onClick="doClick">Hello,  World</Label>        </Window>   </Alloy>  
30. index.xml + index.tss working together! <Alloy>        <Window  class="container">              <Label  id="label"  onClick="doClick">Hello,  World</Label>        </Window>   </Alloy>   ".container":  {        backgroundColor:"white"   },   "Label":  {        width:  Ti.UI.SIZE,        height:  Ti.UI.SIZE,        color:  "#000"   }   XML   TSS  
31. ! Enough of the basics. Let’s get started!!
32. Back to our “Jokes” App!
33. Thinking as a Web developer! DIV   DIV   DIV   DIV   DIV   DIV   DIV   DIV   PAGE  
34. Thinking as a Web developer! DIV   DIV   DIV   DIV   PAGE  
35. Native iOS and Andoroid UI Elements! h"p://www.teehanlax.com/blog/ios-­‐6-­‐gui-­‐psd-­‐iphone-­‐5/   h"p://www.teehanlax.com/blog/android-­‐2-­‐3-­‐4-­‐gui-­‐psd-­‐high-­‐density/  
36. Titanium allows you to use native platform elements! h"p://docs.appcelerator.com/Rtanium/3.0/#!/api  
37. The vocabulary is well documented! h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window  
38. In Titanium Terms! VIEW   VIEW   VIEW   VIEW   VIEW   VIEW   VIEW   VIEW   Window   TableView  
39. In Titanium Terms! VIEW   VIEW   VIEW   VIEW   WINDOW  
40. Building the App Structure (XML)! <Alloy>      <Window  class="container">          <View  id="header">              <View  id="appicon"></View>              <Label  id="apptitle">Funny  Stuff</Label>          </View>          <TableView  id="mainlist">              <TableViewRow  id="listrow">                  <View  id="rowContainer">                      <View  id="rowIcon"></View>                      <Label  id="rowTitle">Some  Title</Label>                      <View  id="rowTypeContainer">                          <Label  id="rowTypeCaption">Type:</Label>                          <Label  id="rowTypeData">Some  Type</Label>                      </View>                  </View>              </TableViewRow>          </TableView>      </Window>   </Alloy>   Expected  Result  
41. Building the App Structure (XML)! <Alloy>      <Window  class="container">          <View  id="header">              <View  id="appicon"></View>              <Label  id="apptitle">Funny  Stuff</Label>          </View>          <TableView  id="mainlist">              <TableViewRow  id="listrow">                  <View  id="rowContainer">                      <View  id="rowIcon"></View>                      <Label  id="rowTitle">Some  Title</Label>                      <View  id="rowTypeContainer">                          <Label  id="rowTypeCaption">Type:</Label>                          <Label  id="rowTypeData">Some  Type</Label>                      </View>                  </View>              </TableViewRow>          </TableView>      </Window>   </Alloy>   Expected  Result  
42. Hey! That’s not what I wanted! We  need  to  apply  styling  to  the  elements.    Let’s  start  with  container  and  header  
43. Styling the main “container” and “header”! ".container":  {      backgroundColor:"white",      layout:  'vertical'   },   "#header":{      height:  "50dp",      backgroundColor:  "blue"   }   Next:  the  “appicon”  area  
44. Styling the “appicon”! "#appicon":{      width:  "50dp",      height:  "50dp",      left:  "0",      backgroundColor:  "#fff"   }   Next:  let’s  specify  a  height  for  the  “rowContainer”  
45. The App so far! "#rowContainer":{    height:  "60dp"   }   Next:  the  “rowIcon”  area  
46. The App so far! "#rowIcon":{      lek:  “5dp”,      height:  "50dp",      width:  "50dp",      backgroundColor:  "red  "   }   Next:  the  rest  of  the  elements  in  the  “rowContainer”  
47. The App so far! "#rowTitle":{      lek:  "60dp",      top:  "5dp",      width:  Ti.UI.SIZE,   },   "#rowTypeContainer":{      bo"om:  "5dp",      height:  "20dp",      width:  Ti.UI.SIZE,      layout:  "horizontal",      lek:  "60dp"   },   "#rowTypeCapRon":{      height:  Ti.UI.SIZE,      width:  Ti.UI.SIZE   },   "#rowTypeData":{      height:  Ti.UI.SIZE,      width:  Ti.UI.SIZE   }   Next:  some  colors  on  the  row  elements  
48. The App so far! "#rowTypeCapRon":{      height:  Ti.UI.SIZE,      width:  Ti.UI.SIZE,      font:  {          fontSize:  "12dp"      }   },   "#rowTypeData":{      height:  Ti.UI.SIZE,      width:  Ti.UI.SIZE,      font:  {          fontSize:  "12dp"      }   }   Next:  some  colors  on  the  “header”  area  
49. The App so far! "#header":{      height:  "50dp",      backgroundColor:  "#4698D6"   },   "#appRtle":{      font:  {          fontSize:  "20dp",      fontWeight:  "bold"      },      color:  "#fff"   }     Next:    more  styling  on  the  table  rows  
50. The App so far! "#rowContainer":{      height:  "60dp",    top:  "5dp",      right:  "5dp",      bo"om:  "5dp",      lek:  "5dp",      borderWidth:  1,      borderColor:  "#cacaca",      borderRadius:  5   }     Next:  some  more  colors  on  the  table  row    
51. The App so far! "#rowContainer":{      height:  "60dp",      top:  "5dp",    right:  "5dp",      bo"om:  "5dp",      lek:  "5dp",      backgroundColor:  "#f9f9f9",      borderWidth:  1,      borderColor:  "#cacaca",      borderRadius:  5   },   "#rowTypeCapRon":{      height:  Ti.UI.SIZE,      width:  Ti.UI.SIZE,      font:  {          fontSize:  "12dp",          fontWeight:  "bold"      },      color:  "#B73B22"   }     Next:  the  icon  on  the  row  
52. The App so far! <View  id="rowIcon"  backgroundImage="/happyface.png"></View>   Images  live  inside  the  /assets  folder.   We’ll  make  this  change  on  the  XML,  so  we  can   assign  different  images  to  each  row:   Next:  the  icon  on  the  “header”  
53. The App so far! "#appicon":{      width:  "50dp",      height:  "50dp",      lek:  "0",      backgroundImage:  "/topicon.png"   }     Finally:  some  real  data  on  the  table  row  
54. The App so far! <TableViewRow  id="listrow">    <View  id="rowContainer">              <View  id="rowIcon"  backgroundImage="/happyface.png"></View>              <Label  id="rowTitle">Why  did  the  turkey  cross  the  road?</Label>              <View  id="rowTypeContainer">                    <Label  id="rowTypeCapRon">Type:</Label>                    <Label  id="rowTypeData">Joke</Label>              </View>        </View>   </TableViewRow>   Go  to  your  index.xml  file  and  change  the  placeholder  data   To  add  more  rows,  copy  and  paste  this  code  block!  
55. The finalized main screen!!
56. The App so far! Use  the  same  procedure  to  create  the  template  for   the  second  page.    I’ll  leave  that  to  you   TIPS:       1.  In  Studio,  right-­‐click  in  the  files  area,  select  New  >   Alloy  Controller   2.  You  could  move  ALL  your  TSS  to  “app.tss”.    This  is   a  global  file  that  holds  styling  that  will  be  shared   by  all  screens    
57. A little bit of code to link both files (1/4)! <TableView  id="mainlist"  onClick="onTableClick">    <TableViewRow  id="listrow"  ezawin="turkeycrossing">         The  index.xml  file  needs  to  know  what  to  do  when  you  click  on  the  rows   The  name  of  a  previously  created  XML  file  
58. A little bit of code to link both files (2/4)! var  ezR=require('ezR');     funcRon  onTableClick(e){    ezR.openWinFromRow(e.rowData);     }     $.index.open();         The  index.js  needs  to  define  the  acRon  for  onTableClick   Remember:  every  screen  or  controller  is  a  combinaRon  of  3  files:  XML,  TSS,  JS  
59. A little bit of code to link both files (3/4)! <Bu"on  id="backbu"on"  plaYorm="ios"  onClick="closeme">Back</Bu"on>       On  each  “joke”  page,  define  the  acRon  for  the  “back”  bu"on  
60. A little bit of code to link both files (4/4)! var  ezR=require('ezR');     funcRon  closeme(e){    ezR.closeWin($.turkeycrossing);     }       Define  the  acRon  for  the  closeme  
61. Startup images and App Icons! Titanium  provides  templates  for  all  the  images  you  need.    Simply   replace  with  your  own.  
62. h"p://ratking.de/2012/10/06/mini-­‐ludum-­‐dare-­‐37-­‐a-­‐not-­‐game-­‐jam-­‐part-­‐2/  
63. The same code could be repurposed!
64. Some Apps built with Titanium!
65. Much more! •  Command-line interface! •  Modules, Widgets, Sync Adapters! •  ACS – Appcelerator Cloud Services! •  Gaming via Lanica.com! •  Enterprise-ready!!
66. Code + Slides! Code available at ! http://github.com/ricardoalcocer! ! Slides available at! http://speakerdeck.com/ricardoalcocer! http://slideshare.net/ralcocer! ! !
67. Community Support! ! ! Appcelerator Q&A ! https://developer.appcelerator.com/questions/newest! ! Twitter! https://twitter.com/appcelerator! ! ! !
68. Questions?
 
 ! ?  
69. Thank you! ralcocer@appcelerator.com! ! Twitter: @ricardoalcocer!