Develop your first mobile App for iOS and Android

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

h"p://blog.planetargon.com/entries/2010/3/1/designer-­‐vs-­‐developer  

Harmony between design and functionalities!

Model  

View   Controller  TSS  

XML   JS  

JS  

Invisible  to  the  end-­‐user  User  Interface  Components  

The MVC Pattern!

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….!

h"p://amazingjpg.blogspot.com/2012/11/reckless-­‐abandon-­‐photo-­‐by-­‐peter-­‐brannon.html  

…you can try to fly!

h"p://www.justsaypictures.com/images/training-­‐wheels-­‐01.jpg  

Titanium is very powerful, so better get your training wheels on!

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!

In  reverse  URL  format:  ie.  (com.mycompany.myapp)    

Select  target  plaYorms  for  this  project  

Are  you  using  Appcelerator  Cloud  Services?  

Name  for  your  App  

Titanium Studio!

These  two  work  together  to  build  UI  

These  one  implement  funcRonaliRes    and  interacRvity  

Remember?  

We  won’t  look  at  these  

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!

<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  

!Enough of the basics.

Let’s get started!!

Back to our “Jokes” App!

Thinking as a Web developer!

DIV   DIV  

DIV  

DIV   DIV  

DIV  

DIV   DIV  

PAGE  

Thinking as a Web developer!

DIV   DIV  

DIV  

DIV  

PAGE  

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!

VIEW   VIEW  

VIEW  

VIEW  VIEW  

VIEW  

VIEW   VIEW  

Window  

TableView  

In Titanium Terms!

VIEW   VIEW  

VIEW  

VIEW  

WINDOW  

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  

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  

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!

<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”  

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!

<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!  

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)!

<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  

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  

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  

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  

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!