Titanium, Alloy, ACS and Node.ACS

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

Transcript

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. Introduction to cross-platform development
6. Let’s  assume  we  have  a  blog-­‐type  website  
7. Is  the  solution  to  build  a  mobile  friendly  version?  
8. You  can  use  the  same  HTML  coding  paradigm  to  build   native  apps…     …but  first  you  need  to  understand  a  few  things  about   native  development  
9. Platform  SDKs  (Software  Development  Kits)  
10. SDKs  provide  you  with:   Device  Functionalities            GPS            Accelerometer            Push  Notificatiions            Database            Camera            Etc.  
11. SDKs  provide  you:   Device  Functionalities            GPS            Accelerometer            Push  Notificatiions            Database            Camera            Etc.   Native  User  Experience          Navigations  paradigms            User  controls            Animations            Screen  transitions            Etc.   +  
12. In  most  cases,  iOS  and  Android  versions  should  be  rendered  differently   iOS   Android  
13. In  most  cases,  iOS  and  Android  versions  should  be  rendered  differently   iOS   Android  
14. In  most  cases,  iOS  and  Android  versions  should  be  rendered  differently   Android   No  tabs  on     secondary  window   iOS  
15. Thinking  Native   Android   iOS   Android   iOS   Android   iOS  
16. Native  platforms  provide  Native  Navigation  Containers  
17. Titanium  normalizes  the  Native  calls  into  a  single  instruction  
18. Content  code  is  reused  across  platforms  
19. 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>  
20. Running  in  Simulator/Emulator   iOS   Android  
21. 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  
22. 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  
23. Using Titanium + Alloy to quickly deploy native mobile apps
24. Alloy  –  MVC  Framework  for  Titanium   Model   View   Controller   TSS   XML   JS   JS   Invisible  to  the  end-­‐user   User  Interface  Components  
25. Building  a  simple  cross-­‐platform  MP3  player  
26. Code  Walk-­‐thru       Live  code  walk-­‐thru  
27. Using ACS and Node.ACS to create backends and middleware for your mobile apps
28. 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  
29. 20  pre-­‐built  services  
30. ACS       Live  walk-­‐thru  
31. 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!  
32. 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  
33. Login  to  Node.ACS   acs  login      
34. New  Node.ACS  App   acs  new  <app_name>      
35. Run  Node.ACS   acs  run      
36. Your  App  running  on  the  browser   acs  run      
37. Publish  app  to  the  Appcelerator  Cloud   acs  publish      
38. Node.ACS  MVC  Framework  
39. Config.json   {      "routes":  [          {"path":  "/",  "callback":  "application#index"}      ],      "filters":  [          {"path":  ”/","callback":  ""}      ],      "websockets":  [          {"event":  "","callback":  ""}      ]   }  
40. Building  a  simple  Web  Site  
41. 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":  ""}     ]     }  
42. 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()  {     }  
43. 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  });     }  
44. 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>  
45. 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>  
46. Session_filter.js   function  validateSession(req,  res,  next)  {    if(req.session.uid  ===  null)  {      res.redirect('/');    }  else  {      next();    }   }  
47. Node.ACS   Quick  demo  
48. Thank  You   RICARDO  ALCOCER   @ricardoalcocer