Building websites with Node.ACS

Preview:

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

BuildingWebsites using

Node.ACSRicardo AlcocerLead Developer Evangelist @ Appcelerator

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

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!

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

Login to Node.ACS

acs login

Create a new Node.ACS

acs new -my_app_name-

Starting your first Node.ACS

acs run

Viewing on the browser

Publishing first app

acs publish

acs publish --force

First app published

MVC Framework

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/

A simple Web Site

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": ""} ]}

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

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 });}

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>

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>

Validating sessions(session_filter.js)

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

Walk-thru : ACS front-end

https://github.com/ricardoalcocer/nodeacs_sample_website

Walk-thru : SaveJSON

https://github.com/ricardoalcocer/acs_key_value_store

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

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

Thank you!

Questions?Follow me on

Twitter: @ricardoalcocer

Github: /ricardoalcocer