24
Building Websites using Node.ACS Ricardo Alcocer Lead Developer Evangelist @ Appcelerator

Building websites with Node.ACS

Embed Size (px)

DESCRIPTION

A quick guide for setting up Appcelerator's Node.ACS and examples on how to build three different types of websites/APIs. Code can be found at: https://github.com/ricardoalcocer/acs_key_value_store https://github.com/ricardoalcocer/nodeacs_sample_website

Citation preview

Page 1: Building websites with Node.ACS

BuildingWebsites using

Node.ACSRicardo AlcocerLead Developer Evangelist @ Appcelerator

Page 2: Building websites with Node.ACS

About me

1. Have been using Titanium since late 20092. Former Titanium trainer in the Caribbean and Latin America3. Currently work as Lead Developer Evangelist4. Obsessed with cross-platform mobile develoment5. Love Javascript hacking and technology startups6. I'm a hacker in constant training

Page 3: Building websites with Node.ACS

What is Node.ACS

1. Develop and publish node.js apps to the cloud2. Simple CLI interface and built-in webserver3. Built-in ACS support4. Integrated with Titanium Studio5. It's Javascript but for the server!

Page 4: Building websites with Node.ACS

Install Node.ACS

Node.ACS runs on top of node.jsStudio installs Node and NPM by defaultIf you don't, install it from http://nodejs.org/Run node -v to make sure you have it and then install ACS

node -v

sudo npm install -g acs

Page 5: Building websites with Node.ACS

Login to Node.ACS

acs login

Page 6: Building websites with Node.ACS

Create a new Node.ACS

acs new -my_app_name-

Page 7: Building websites with Node.ACS

Starting your first Node.ACS

acs run

Page 8: Building websites with Node.ACS

Viewing on the browser

Page 9: Building websites with Node.ACS

Publishing first app

acs publish

acs publish --force

Page 10: Building websites with Node.ACS

First app published

Page 11: Building websites with Node.ACS

MVC Framework

Page 12: Building websites with Node.ACS

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

Callbacks are in filename#functionname formatDefault HTTP Method is GET. For post we need to add"method":"post"Web Sockets are a whole different talk. More info athttp://socket.io/

Page 13: Building websites with Node.ACS

A simple Web Site

Page 14: Building websites with Node.ACS

A simple Web Site(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": ""} ]}

Page 15: Building websites with Node.ACS

Configure your app to tracksessions(app.js)

// initialize appfunction start(app, express) { //set favicon app.use(express.favicon(__dirname + '/public/images/favicon.ico')); //instantiate session management app.use(express.session({secret: '1234567890QWERTY'}));}

// release resourcesfunction stop() { }

There's more to sessions. See http://expressjs.com

Page 16: Building websites with Node.ACS

A simple Web Site(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 });}

Page 17: Building websites with Node.ACS

The Index View(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>

Page 18: Building websites with Node.ACS

The Home View(home.ejs)

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

Page 19: Building websites with Node.ACS

Validating sessions(session_filter.js)

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

Page 20: Building websites with Node.ACS

Walk-thru : ACS front-end

https://github.com/ricardoalcocer/nodeacs_sample_website

Page 21: Building websites with Node.ACS

Walk-thru : SaveJSON

https://github.com/ricardoalcocer/acs_key_value_store

Page 22: Building websites with Node.ACS

Creating a "catch-all" routeapp.get('/get/*',function(req,res){ urlParam=req.path.replace(/\/$/, "").split('/').pop(); // do what you want with your url parameter});

Page 23: Building websites with Node.ACS

Some useful toolshttp://www.jsontest.com/http://www.jsoneditoronline.org/http://posttestserver.com/http://code.google.com/p/cocoa-rest-client/

Page 24: Building websites with Node.ACS

Thank you!

Questions?Follow me on

Twitter: @ricardoalcocer

Github: /ricardoalcocer