Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Titanium, Alloy, ACS and Node.ACS

March 20, 2014

Titanium, Alloy, ACS and Node.ACS

Presentation given on March 20 2014 at Carnegie-Mellon Silicon Valley Campus


March 20, 2014

More Decks by Alco

Other Decks in Programming


  1. Building  native  mobile  apps  with  Titanium    RICARDO  ALCOCER  

    @ricardoalcocer   CARNEGIE-­‐MELLON  UNIVERSITY,  SILICON  VALLEY  CAMPUS   MARCH  20,  2014    
  2. 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  
  3. 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  
  4. 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)  
  5. You  can  use  the  same  HTML  coding  paradigm  to  build

      native  apps…     …but  first  you  need  to  understand  a  few  things  about   native  development  
  6. SDKs  provide  you  with:   Device  Functionalities      

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

       GPS            Accelerometer            Push  Notificatiions            Database            Camera            Etc.   Native  User  Experience          Navigations  paradigms            User  controls            Animations            Screen  transitions            Etc.   +  
  8. In  most  cases,  iOS  and  Android  versions  should  be  rendered

     differently   Android   No  tabs  on     secondary  window   iOS  
  9. Alloy  XML  representation  for  this  screen   <Alloy>    <TabGroup>

         <Tab  title="News">        <Window  title="News"  backgroundColor="white">          <Label  id="label">News  Window</Label>        </Window>      </Tab>      <Tab  title="Services">        <Window  title="Services"  backgroundColor="green">          <Label  id="label">Services  Window</Label>        </Window>      </Tab>      <Tab  title="About">        <Window  title="About"  backgroundColor="red">          <Label  id="label">About  Window</Label>        </Window>      </Tab>      <Tab  title="Contact">        <Window  title="Contact"  backgroundColor="yellow">          <Label  id="label">Contact  Window</Label>        </Window>      </Tab>    </TabGroup>   </Alloy>  
  10. 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  
  11. 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  
  12. Alloy  –  MVC  Framework  for  Titanium   Model   View

      Controller   TSS   XML   JS   JS   Invisible  to  the  end-­‐user   User  Interface  Components  
  13. 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  
  14. 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!  
  15. 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  
  16. Config.json   {      "routes":  [      

       {"path":  "/",  "callback":  "application#index"}      ],      "filters":  [          {"path":  ”/","callback":  ""}      ],      "websockets":  [          {"event":  "","callback":  ""}      ]   }  
  17. 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":  ""}     ]     }  
  18. 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()  {     }  
  19. 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  });     }  
  20. Index.ejs   <!DOCTYPE  html>   <html>      <head>  

     <title>Index</title>          <link  rel='stylesheet'  href='/css/style.css'  />      </head>      <body>        <h2>Node.ACS</h2>    <form  action="/login"  method="post">            <div>Name<input  type="text"  name="name"/></div>            <div>UID<input  type="text"  name="uid"/></div>            <div>PWD<input  type="password"  name="pwd"/></div>            <div><input  type="submit"  value="Go"></div>          </form>      </body>   </html>  
  21. Home.js   <!DOCTYPE  html>   <html>    <head>    

     <title><%=  title  %></title>              <link  rel='stylesheet'  href='/css/style.css'  />    </head>    <body>          <h2>Node.ACS</h2>              <p>Welcome  Home,  <%=  title  %>!</p>              <div><a  href="/logoff">Log  off</a></div>    </body>   </html>  
  22. Session_filter.js   function  validateSession(req,  res,  next)  {    if(req.session.uid  ===

     null)  {      res.redirect('/');    }  else  {      next();    }   }