70

Develop your first mobile App for iOS and Android

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Develop your first mobile App for iOS and Android
Page 2: 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!

Page 3: Develop your first mobile App for iOS and Android

!Format of this talk!

Page 4: Develop your first mobile App for iOS and Android

Our objective for today!

!BUILD AN APP!

Page 5: Develop your first mobile App for iOS and Android

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!

Page 6: Develop your first mobile App for iOS and Android

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!

Page 7: Develop your first mobile App for iOS and Android

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  

Page 8: Develop your first mobile App for iOS and Android

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

Page 9: Develop your first mobile App for iOS and Android

Harmony between design and functionalities!

Page 10: Develop your first mobile App for iOS and Android

Model  

View   Controller  TSS  

XML   JS  

JS  

Invisible  to  the  end-­‐user  User  Interface  Components  

The MVC Pattern!

Page 11: Develop your first mobile App for iOS and Android

Designers and developers can now get along!

h"p://images.elephantjournal.com/wp-­‐content/uploads/2012/01/dog-­‐and-­‐cat-­‐sleeping-­‐together.jpg  

Page 12: Develop your first mobile App for iOS and Android

Download Titanium Studio!

Page 13: Develop your first mobile App for iOS and Android

Make sure you download Studio!

Page 14: Develop your first mobile App for iOS and Android

Configure platform SDKs!

SDKs  allow  you  to  compile  with  the  naRve  tools  and  provide  you  with  Phone  Simulators  for  tesRng  

Page 15: Develop your first mobile App for iOS and Android

Success!!

Page 16: Develop your first mobile App for iOS and Android

Now you can follow the “Quick Start Guide”, or….!

Page 17: Develop your first mobile App for iOS and Android

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

…you can try to fly!

Page 18: Develop your first mobile App for iOS and Android

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

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

Page 19: Develop your first mobile App for iOS and Android

Let’s build a “Jokes” App!

Page 20: Develop your first mobile App for iOS and Android

Let’s create a new project!

Page 21: Develop your first mobile App for iOS and Android

Select Titanium Project!

Page 22: Develop your first mobile App for iOS and Android

Select Alloy as your Titanium Project Type!

Page 23: Develop your first mobile App for iOS and Android

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  

Page 24: Develop your first mobile App for iOS and Android

Titanium Studio!

Page 25: Develop your first mobile App for iOS and Android

These  two  work  together  to  build  UI  

These  one  implement  funcRonaliRes    and  interacRvity  

Remember?  

We  won’t  look  at  these  

Page 26: Develop your first mobile App for iOS and Android

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  

Page 27: Develop your first mobile App for iOS and Android

Default App running on iPhone Simulator!

Page 28: Develop your first mobile App for iOS and Android

Default index.xml!

<Alloy>        <Window  class="container">                            <Label  id="label"  onClick="doClick">Hello,  World</Label>        </Window>  </Alloy>  

Page 29: Develop your first mobile App for iOS and Android

Objects in index.xml!

<Alloy>        <Window  class="container">                            <Label  id="label"  onClick="doClick">Hello,  World</Label>        </Window>  </Alloy>  

Page 30: Develop your first mobile App for iOS and Android

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  

Page 31: Develop your first mobile App for iOS and Android

!Enough of the basics.

Let’s get started!!

Page 32: Develop your first mobile App for iOS and Android

Back to our “Jokes” App!

Page 33: Develop your first mobile App for iOS and Android

Thinking as a Web developer!

DIV   DIV  

DIV  

DIV   DIV  

DIV  

DIV   DIV  

PAGE  

Page 34: Develop your first mobile App for iOS and Android

Thinking as a Web developer!

DIV   DIV  

DIV  

DIV  

PAGE  

Page 35: Develop your first mobile App for iOS and Android

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/  

Page 36: Develop your first mobile App for iOS and Android

Titanium allows you to use native platform elements!

h"p://docs.appcelerator.com/Rtanium/3.0/#!/api  

Page 37: Develop your first mobile App for iOS and Android

The vocabulary is well documented!

h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window  

Page 38: Develop your first mobile App for iOS and Android

In Titanium Terms!

VIEW   VIEW  

VIEW  

VIEW  VIEW  

VIEW  

VIEW   VIEW  

Window  

TableView  

Page 39: Develop your first mobile App for iOS and Android

In Titanium Terms!

VIEW   VIEW  

VIEW  

VIEW  

WINDOW  

Page 40: Develop your first mobile App for iOS and Android

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  

Page 41: Develop your first mobile App for iOS and Android

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  

Page 42: Develop your first mobile App for iOS and Android

Hey! That’s not what I wanted!

We  need  to  apply  styling  to  the  elements.    Let’s  start  with  container  and  header  

Page 43: Develop your first mobile App for iOS and Android

Styling the main “container” and “header”!

".container":  {      backgroundColor:"white",      layout:  'vertical'  },  "#header":{      height:  "50dp",      backgroundColor:  "blue"  }  

Next:  the  “appicon”  area  

Page 44: Develop your first mobile App for iOS and Android

Styling the “appicon”!

"#appicon":{      width:  "50dp",      height:  "50dp",      left:  "0",      backgroundColor:  "#fff"  }  

Next:  let’s  specify  a  height  for  the  “rowContainer”  

Page 45: Develop your first mobile App for iOS and Android

The App so far!

"#rowContainer":{    height:  "60dp"  

}  

Next:  the  “rowIcon”  area  

Page 46: Develop your first mobile App for iOS and Android

The App so far!

"#rowIcon":{      lek:  “5dp”,      height:  "50dp",      width:  "50dp",      backgroundColor:  "red  "  

}  

Next:  the  rest  of  the  elements  in  the  “rowContainer”  

Page 47: Develop your first mobile App for iOS and Android

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  

Page 48: Develop your first mobile App for iOS and Android

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  

Page 49: Develop your first mobile App for iOS and Android

The App so far!

"#header":{      height:  "50dp",  

   backgroundColor:  "#4698D6"  },  "#appRtle":{      font:  {          fontSize:  "20dp",  

   fontWeight:  "bold"      },      color:  "#fff"  

}    

Next:    more  styling  on  the  table  rows  

Page 50: Develop your first mobile App for iOS and Android

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    

Page 51: Develop your first mobile App for iOS and Android

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  

Page 52: Develop your first mobile App for iOS and Android

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”  

Page 53: Develop your first mobile App for iOS and Android

The App so far!

"#appicon":{      width:  "50dp",      height:  "50dp",      lek:  "0",      backgroundImage:  "/topicon.png"  }    

Finally:  some  real  data  on  the  table  row  

Page 54: Develop your first mobile App for iOS and Android

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!  

Page 55: Develop your first mobile App for iOS and Android

The finalized main screen!!

Page 56: Develop your first mobile App for iOS and Android

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  

 

Page 57: Develop your first mobile App for iOS and Android

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  

Page 58: Develop your first mobile App for iOS and Android

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  

Page 59: Develop your first mobile App for iOS and Android

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  

Page 60: Develop your first mobile App for iOS and Android

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  

Page 61: Develop your first mobile App for iOS and Android

Startup images and App Icons!

Titanium  provides  templates  for  all  the  images  you  need.    Simply  replace  with  your  own.  

Page 62: Develop your first mobile App for iOS and Android

h"p://ratking.de/2012/10/06/mini-­‐ludum-­‐dare-­‐37-­‐a-­‐not-­‐game-­‐jam-­‐part-­‐2/  

Page 63: Develop your first mobile App for iOS and Android

The same code could be repurposed!

Page 64: Develop your first mobile App for iOS and Android

Some Apps built with Titanium!

Page 65: Develop your first mobile App for iOS and Android

Much more!

•  Command-line interface!•  Modules, Widgets, Sync Adapters!•  ACS – Appcelerator Cloud Services!•  Gaming via Lanica.com!•  Enterprise-ready!!

Page 66: Develop your first mobile App for iOS and Android

Code + Slides!

Code available at ! http://github.com/ricardoalcocer!!Slides available at! http://speakerdeck.com/ricardoalcocer! http://slideshare.net/ralcocer!

!!

Page 67: Develop your first mobile App for iOS and Android

Community Support!

!!

Appcelerator Q&A !https://developer.appcelerator.com/questions/newest!

!Twitter!

https://twitter.com/appcelerator!!!!

Page 68: Develop your first mobile App for iOS and Android

Questions?!

?  

Page 69: Develop your first mobile App for iOS and Android

Thank you!

[email protected]!!

Twitter: @ricardoalcocer!

Page 70: Develop your first mobile App for iOS and Android