Develop your first mobile App for iOS and Android
Upcoming SlideShare
Loading in...5
×
 

Develop your first mobile App for iOS and Android

on

  • 957 views

 

Statistics

Views

Total Views
957
Views on SlideShare
957
Embed Views
0

Actions

Likes
3
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Develop your first mobile App for iOS and Android Develop your first mobile App for iOS and Android Presentation Transcript

  • Develop your first mobile App for iOS and Android! Ricardo Alcocer // Platform Evangelist! March 12, 2013! Silicon Valley Titanium User Group!
  • !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 at least a little bit of Javascript!
  • 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 !
  • 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  
  • h"p://blog.planetargon.com/entries/2010/3/1/designer-­‐vs-­‐developer  
  • Harmony between design and functionalities!
  • The MVC Pattern! JS   Model   XML   JS   View   TSS   Controller  User  Interface  Components   Invisible  to  the  end-­‐user  
  • Designers and developers can now get along!h"p://images.elephantjournal.com/wp-­‐content/uploads/2012/01/dog-­‐and-­‐cat-­‐sleeping-­‐together.jpg  
  • 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  Simulators  for  tesRng  
  • 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/training-­‐wheels-­‐01.jpg  
  • 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.  (com.mycompany.myapp)     Select  target  plaYorms  for  this  project   Are  you  using  Appcelerator  Cloud  Services?  
  • Titanium Studio!
  • These  one  implement  funcRonaliRes     and  interacRvity   We  won’t  look  at  these   These  two  work  together  to  build  UI  Remember?  
  • 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  
  • Default App running on iPhone Simulator!
  • Default index.xml!<Alloy>        <Window  class="container">                            <Label  id="label"  onClick="doClick">Hello,  World</Label>        </Window>  </Alloy>  
  • Objects in index.xml!<Alloy>        <Window  class="container">                            <Label  id="label"  onClick="doClick">Hello,  World</Label>        </Window>  </Alloy>  
  • 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"   }  
  • !Enough of the basics. Let’s get started!!
  • Back to our “Jokes” App!
  • Thinking as a Web developer! PAGE   DIV   DIV   DIV   DIV   DIV   DIV   DIV   DIV  
  • Thinking as a Web developer! PAGE   DIV   DIV   DIV   DIV  
  • 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/  
  • 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   VIEW   VIEW   TableView   VIEW   VIEW   VIEW   VIEW   VIEW  
  • In Titanium Terms! WINDOW   VIEW   VIEW   VIEW   VIEW  
  • 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>  
  • 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>  
  • Hey! That’s not what I wanted!We  need  to  apply  styling  to  the  elements.    Let’s  start  with  container  and  header  
  • Styling the main “container” and “header”!".container":  {      backgroundColor:"white",      layout:  vertical  },  "#header":{      height:  "50dp",      backgroundColor:  "blue"  }  Next:  the  “appicon”  area  
  • Styling the “appicon”!"#appicon":{      width:  "50dp",      height:  "50dp",      left:  "0",      backgroundColor:  "#fff"  }  Next:  let’s  specify  a  height  for  the  “rowContainer”  
  • The App so far! "#rowContainer":{    height:  "60dp"   }  Next:  the  “rowIcon”  area  
  • The App so far! "#rowIcon":{      lek:  “5dp”,      height:  "50dp",      width:  "50dp",      backgroundColor:  "red  "   }  Next:  the  rest  of  the  elements  in  the  “rowContainer”  
  • 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  
  • 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  
  • The App so far! "#header":{      height:  "50dp",      backgroundColor:  "#4698D6"   },   "#appRtle":{      font:  {          fontSize:  "20dp",      fontWeight:  "bold"      },      color:  "#fff"   }    Next:    more  styling  on  the  table  rows  
  • 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    
  • 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  
  • 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”  
  • The App so far! "#appicon":{      width:  "50dp",      height:  "50dp",      lek:  "0",      backgroundImage:  "/topicon.png"   }    Finally:  some  real  data  on  the  table  row  
  • 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!  
  • The finalized main screen!!
  • 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    
  • 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  
  • 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  
  • 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>      
  • 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);     }      
  • Startup images and App Icons!Titanium  provides  templates  for  all  the  images  you  need.    Simply  replace  with  your  own.  
  • 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 Lanica.com!•  Enterprise-ready!!
  • Code + Slides!Code available at ! http://github.com/ricardoalcocer!!Slides available at! http://speakerdeck.com/ricardoalcocer! http://slideshare.net/ralcocer! ! !
  • Community Support!! ! Appcelerator Q&A ! https://developer.appcelerator.com/questions/newest! ! Twitter! https://twitter.com/appcelerator! ! ! !
  • ?  Questions?
 
 !
  • Thank you!ralcocer@appcelerator.com! ! Twitter: @ricardoalcocer!