Develop your first mobile App    for iOS and Android!    Ricardo Alcocer // Platform Evangelist!                   March 12...
!Format of this talk!
Our objective for today!      !BUILD AN APP!
Base assumptions!•  You are not a “hardcore coder”!•  You know how to build websites with   HTML and CSS!•  You have seen ...
About Appcelerator Titanium!         •  Not a language, but a high-level            Javascript SDK!         •  Allows you ...
The design of your App is
                            SUPER important!                 If the users dont like how         ...
h"p://blog.planetargon.com/entries/2010/3/1/designer-­‐vs-­‐developer	  
Harmony between design and functionalities!
The MVC Pattern!                                                                         JS	                              ...
Designers and developers can now get along!h"p://images.elephantjournal.com/wp-­‐content/uploads/2012/01/dog-­‐and-­‐cat-­...
Download Titanium Studio!
Make sure you download Studio!
Configure platform SDKs!SDKs	  allow	  you	  to	  compile	  with	  the	  naRve	  tools	  and	  provide	  you	  with	  Phone...
Success!!
Now you can follow the “Quick Start          Guide”, or….!
…you can try to fly!h"p://amazingjpg.blogspot.com/2012/11/reckless-­‐abandon-­‐photo-­‐by-­‐peter-­‐brannon.html	  
Titanium is very powerful, so better get                   your training wheels on!h"p://www.justsaypictures.com/images/tr...
Let’s build a “Jokes” App!
Let’s create a new project!
Select Titanium Project!
Select Alloy as your Titanium Project                 Type!
Configure your project!                Name	  for	  your	  App   	                  In	  reverse	  URL	  format:	  ie.	  (c...
Titanium Studio!
These	  one	  implement	  funcRonaliRes	  	                  and	  interacRvity	                  We	  won’t	  look	  at	 ...
Running an App!             You’ll	  only	  see	  the	  target	               plaYorms	  you	  explicitly	  	             ...
Default App running on iPhone Simulator!
Default index.xml!<Alloy>	  	  	  	  <Window	  class="container">	  	  	  	  	  	  	  	  	  	  	  	  	  	  <Label	  id="la...
Objects in index.xml!<Alloy>	  	  	  	  <Window	  class="container">	  	  	  	  	  	  	  	  	  	  	  	  	  	  <Label	  id=...
index.xml + index.tss working together!XML	  <Alloy>	  	  	  	  <Window	  class="container">	  	  	  	  	  	  	  <Label	  ...
!Enough of the basics.  Let’s get started!!
Back to our “Jokes” App!
Thinking as a Web developer!                                     PAGE	                                        DIV	        ...
Thinking as a Web developer!                           PAGE	                              DIV	                   DIV	     ...
Native iOS and Andoroid UI Elements!h"p://www.teehanlax.com/blog/ios-­‐6-­‐gui-­‐psd-­‐iphone-­‐5/	                       ...
Titanium allows you to use native                         platform elements!h"p://docs.appcelerator.com/Rtanium/3.0/#!/api...
The vocabulary is well documented!  h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window	  
In Titanium Terms!                                    Window	                                                  VIEW	      ...
In Titanium Terms!                       WINDOW	                          VIEW	              VIEW	       VIEW	            ...
Building the App Structure (XML)!                                                                                         ...
Building the App Structure (XML)!                                                                                         ...
Hey! That’s not what I wanted!We	  need	  to	  apply	  styling	  to	  the	  elements.	  	  Let’s	  start	  with	  containe...
Styling the main “container” and                         “header”!".container":	  {	  	  	  backgroundColor:"white",	  	  ...
Styling the “appicon”!"#appicon":{	  	  	  width:	  "50dp",	  	  	  height:	  "50dp",	  	  	  left:	  "0",	  	  	  backgro...
The App so far!     "#rowContainer":{	             	  height:	  "60dp"	       }	  Next:	  the	  “rowIcon”	  area	  
The App so far!  "#rowIcon":{	          	  	  lek:	  “5dp”,	          	  	  height:	  "50dp",	          	  	  width:	  "50...
The App so far! "#rowTitle":{	   	     	  lek:	  "60dp",	          	  	  top:	  "5dp",	          	  	  width:	  Ti.UI.SIZE...
The App so far!"#rowTypeCapRon":{	  	       	  height:	  Ti.UI.SIZE,	  	       	  width:	  Ti.UI.SIZE,	  	       	  font:	...
The App so far! "#header":{	   	       	  height:	  "50dp",	            	  	  backgroundColor:	  "#4698D6"	   },	   "#appR...
The App so far!"#rowContainer":{	  	    	  height:	  "60dp",	        	  top:	  "5dp",	  	    	  right:	  "5dp",	  	    	  ...
The App so far! "#rowContainer":{	   	       	  height:	  "60dp",	   	       	  top:	  "5dp",	            	  right:	  "5dp...
The App so far!   Images	  live	  inside	  the	  /assets	  folder.	   We’ll	  make	  this	  change	  on	  the	  XML,	  so	...
The App so far! "#appicon":{	   	    	  width:	  "50dp",	   	    	  height:	  "50dp",	   	    	  lek:	  "0",	   	    	  ba...
The App so far!Go	  to	  your	  index.xml	  file	  and	  change	  the	  placeholder	  data	  <TableViewRow	  id="listrow">	...
The finalized main screen!!
The App so far!Use	  the	  same	  procedure	  to	  create	  the	  template	  for	  the	  second	  page.	  	  I’ll	  leave	...
A little bit of code to link both files (1/4)!The	  index.xml	  file	  needs	  to	  know	  what	  to	  do	  when	  you	  cli...
A little bit of code to link both files (2/4)!The	  index.js	  needs	  to	  define	  the	  acRon	  for	  onTableClick	      ...
A little bit of code to link both files (3/4)!On	  each	  “joke”	  page,	  define	  the	  acRon	  for	  the	  “back”	  bu"on...
A little bit of code to link both files (4/4)!Define	  the	  acRon	  for	  the	  closeme	                       var	  ezR=re...
Startup images and App Icons!Titanium	  provides	  templates	  for	  all	  the	  images	  you	  need.	  	  Simply	  replac...
h"p://ratking.de/2012/10/06/mini-­‐ludum-­‐dare-­‐37-­‐a-­‐not-­‐game-­‐jam-­‐part-­‐2/	  
The same code could be repurposed!
Some Apps built with Titanium!
Much more!•  Command-line interface!•  Modules, Widgets, Sync Adapters!•  ACS – Appcelerator Cloud Services!•  Gaming via ...
Code + Slides!Code available at !    http://github.com/ricardoalcocer!!Slides available at!     http://speakerdeck.com/ric...
Community Support!!                             !                  Appcelerator Q&A !    https://developer.appcelerator.co...
?	  Questions?
     
     !
Thank you!ralcocer@appcelerator.com!              !  Twitter: @ricardoalcocer!
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
Upcoming SlideShare
Loading in …5
×

Develop your first mobile App for iOS and Android

1,553 views
1,437 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,553
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Develop your first mobile App for iOS and Android

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

×