Tweet
Tweet

Slide 1

Slide 1 text

Building  native  mobile  apps  with  Titanium    RICARDO  ALCOCER   @ricardoalcocer   CARNEGIE-­‐MELLON  UNIVERSITY,  SILICON  VALLEY  CAMPUS   MARCH  20,  2014    

Slide 2

Slide 2 text

Agenda  –  3  parts   1.  Introduction  to  cross-­‐platform  development   2.  Using  Titanium  +  Alloy  to  quickly  deploy  native   mobile  apps   3.  Using  ACS  and  Node.ACS  to  create  middleware  and   backends  for  your  mobile  apps  

Slide 3

Slide 3 text

About  me  -­‐  @ricardoalcocer   ! Have  been  Titanium  since  2009   ! Former  independent  Titanium  trainer  in  the   Caribbean  and  Latin  America   ! Obsessed  with  native  cross-­‐platform   development   !   Free  Software  and  Open  Source    advocate   ! Love  JavaScript  hacking  and  tech  startups   ! Currently  writing  a  book  about  cross-­‐platform   development  with  Titanium  

Slide 4

Slide 4 text

What  is  Titanium   !   Titanium  is  a  JavaScript  framework  for  cross-­‐ platform  native  applications  development   !   Targeted  primarily  to  web  developers   !   Provides  MVC  framework  (Alloy)   !   If  you  know  HTML,  CSS  and  JavaScript,  you  WILL   build  native  cross-­‐platform  mobile  apps  (although   you  won’t  be  using  HTML  or  CSS)  

Slide 5

Slide 5 text

Introduction to cross-platform development

Slide 6

Slide 6 text

Let’s  assume  we  have  a  blog-­‐type  website  

Slide 7

Slide 7 text

Is  the  solution  to  build  a  mobile  friendly  version?  

Slide 8

Slide 8 text

You  can  use  the  same  HTML  coding  paradigm  to  build   native  apps…     …but  first  you  need  to  understand  a  few  things  about   native  development  

Slide 9

Slide 9 text

Platform  SDKs  (Software  Development  Kits)  

Slide 10

Slide 10 text

SDKs  provide  you  with:   Device  Functionalities            GPS            Accelerometer            Push  Notificatiions            Database            Camera            Etc.  

Slide 11

Slide 11 text

SDKs  provide  you:   Device  Functionalities            GPS            Accelerometer            Push  Notificatiions            Database            Camera            Etc.   Native  User  Experience          Navigations  paradigms            User  controls            Animations            Screen  transitions            Etc.   +  

Slide 12

Slide 12 text

In  most  cases,  iOS  and  Android  versions  should  be  rendered  differently   iOS   Android  

Slide 13

Slide 13 text

In  most  cases,  iOS  and  Android  versions  should  be  rendered  differently   iOS   Android  

Slide 14

Slide 14 text

In  most  cases,  iOS  and  Android  versions  should  be  rendered  differently   Android   No  tabs  on     secondary  window   iOS  

Slide 15

Slide 15 text

Thinking  Native   Android   iOS   Android   iOS   Android   iOS  

Slide 16

Slide 16 text

Native  platforms  provide  Native  Navigation  Containers  

Slide 17

Slide 17 text

Titanium  normalizes  the  Native  calls  into  a  single  instruction  

Slide 18

Slide 18 text

Content  code  is  reused  across  platforms  

Slide 19

Slide 19 text

Alloy  XML  representation  for  this  screen                              News  Window                                      Services  Window                                      About  Window                                      Contact  Window                      

Slide 20

Slide 20 text

Running  in  Simulator/Emulator   iOS   Android  

Slide 21

Slide 21 text

Why  use  a  framework   !   Cross-­‐platform  is  a  strategy   ! Faster  time  to  market   ! Provides  an  abstraction  layer  on  top  of   native  SDKs   !   A  framework  is  useful  even  if  you  know   the  underlying  languages  

Slide 22

Slide 22 text

Why  use  Titanium   !   MVC   ! Easy  &  Fast   !   JavaScript  across  the  whole  stack  promotes  code  reuse   !   JavaScript  is  much  easier  to  learn  and  master  than   Objective-­‐C  or  Java   ! Native  cross-­‐platform  UI  &  performance  from  a  single   code-­‐base   ! Huge  and  engaged  community   !   Extensible  via  native  modules  

Slide 23

Slide 23 text

Using Titanium + Alloy to quickly deploy native mobile apps

Slide 24

Slide 24 text

Alloy  –  MVC  Framework  for  Titanium   Model   View   Controller   TSS   XML   JS   JS   Invisible  to  the  end-­‐user   User  Interface  Components  

Slide 25

Slide 25 text

Building  a  simple  cross-­‐platform  MP3  player  

Slide 26

Slide 26 text

Code  Walk-­‐thru       Live  code  walk-­‐thru  

Slide 27

Slide 27 text

Using ACS and Node.ACS to create backends and middleware for your mobile apps

Slide 28

Slide 28 text

What  is  ACS  (Appcelerator  Cloud  Services)?   !   Mobile  Back-­‐end  as  a  Service  (MBaaS)   ! Robust  infrastructure   ! Secure  and  scalable  architecture   ! Integrated  with  Titanium  and  Node.ACS  

Slide 29

Slide 29 text

20  pre-­‐built  services  

Slide 30

Slide 30 text

ACS       Live  walk-­‐thru  

Slide 31

Slide 31 text

What  is  Node.ACS?   ! Develop  and  publish  node.js  apps  to  the   Appcelerator  Cloud   !   Simple  CLI  interface  and  built-­‐in  webserver   ! Built-­‐in  ACS  support   ! Integrated  with  Titanium  Studio   ! It's  Javascript  but  for  the  server!  

Slide 32

Slide 32 text

Install  Node.ACS   ! Node.ACS  runs  on  top  of  Node.js   ! Titanium  Studio  installs  Node.js  and  NPM  by  default     [sudo]  npm  install  –g  acs  

Slide 33

Slide 33 text

Login  to  Node.ACS   acs  login      

Slide 34

Slide 34 text

New  Node.ACS  App   acs  new        

Slide 35

Slide 35 text

Run  Node.ACS   acs  run      

Slide 36

Slide 36 text

Your  App  running  on  the  browser   acs  run      

Slide 37

Slide 37 text

Publish  app  to  the  Appcelerator  Cloud   acs  publish      

Slide 38

Slide 38 text

Node.ACS  MVC  Framework  

Slide 39

Slide 39 text

Config.json   {      "routes":  [          {"path":  "/",  "callback":  "application#index"}      ],      "filters":  [          {"path":  ”/","callback":  ""}      ],      "websockets":  [          {"event":  "","callback":  ""}      ]   }  

Slide 40

Slide 40 text

Building  a  simple  Web  Site  

Slide 41

Slide 41 text

Simple  Website  –  Config.json   {     "routes":  [      {"path":  "/",  "callback":  "application#index"},        {"path":  "/home",  "callback":  "application#home"},        {"path":  "/login",  "method":"post",  "callback":  "application#login"},      {"path":  "/logoff",  "callback":  "application#logoff"}     ],     "filters":  [      {"path":  "/home",  "callback":  "session_filter#validateSession"}     ],     "websockets":  [      {"event":  "",  "callback":  ""}     ]     }  

Slide 42

Slide 42 text

Configure  your  app  to  track  sessions  (app.js)   //  initialize  app  function     start(app,  express)  {      //set  favicon      app.use(express.favicon(__dirname  +  '/public/images/favicon.ico'));        //instantiate  session  management      app.use(express.session({secret:  '1234567890QWERTY'}));     }       //  release  resources     function  stop()  {     }  

Slide 43

Slide 43 text

Application.js   function  index(req,  res)  {      res.render('index',  {  title:  'Welcome  to  Node.ACS!'  });     }       function  login(req,  res)  {      var  uid=req.body.uid;      var  pwd=req.body.pwd;      var  name=req.body.name;      if  (uid==='appc'  &&  pwd=='nodeacs'){        req.session.uid=uid;        req.session.pwd=pwd;        req.session.name=name;        res.redirect('/home');      }else{        res.send(500,  {  error:  'something  blew  up'  });      }     }       function  logoff(req,  res)  {      req.session.uid=null;      req.session.pwd=null;      req.session.name=null;      res.redirect('/');     }       function  home(req,  res)  {      res.render('home',  {  title:  req.session.name  });     }  

Slide 44

Slide 44 text

Index.ejs              Index                              

Node.ACS

               
Name
           
UID
           
PWD
           
                   

Slide 45

Slide 45 text

Home.js              <%=  title  %>                                

Node.ACS

             

Welcome  Home,  <%=  title  %>!

             
Log  off
       

Slide 46

Slide 46 text

Session_filter.js   function  validateSession(req,  res,  next)  {    if(req.session.uid  ===  null)  {      res.redirect('/');    }  else  {      next();    }   }  

Slide 47

Slide 47 text

Node.ACS   Quick  demo  

Slide 48

Slide 48 text

Thank  You   RICARDO  ALCOCER   @ricardoalcocer