Building websites with Node.ACS

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

Transcript

1. Building Websites using Node.ACS Ricardo Alcocer Lead Developer Evangelist @ Appcelerator
2. About me 1. Have been using Titanium since late 2009 2. Former Titanium trainer in the Caribbean and Latin America 3. Currently work as Lead Developer Evangelist 4. Obsessed with cross-platform mobile develoment 5. Love Javascript hacking and technology startups 6. I'm a hacker in constant training
3. What is Node.ACS 1. Develop and publish node.js apps to the cloud 2. Simple CLI interface and built-in webserver 3. Built-in ACS support 4. Integrated with Titanium Studio 5. It's Javascript but for the server!
4. Install Node.ACS Node.ACS runs on top of node.js Studio installs Node and NPM by default If you don't, install it from http://nodejs.org/ Run node -v to make sure you have it and then install ACS n o d e - v s u d o n p m i n s t a l l - g a c s
5. Login to Node.ACS a c s l o g i n
6. Create a new Node.ACS a c s n e w - m y _ a p p _ n a m e -
7. Starting your first Node.ACS a c s r u n
8. Viewing on the browser
9. Publishing first app a c s p u b l i s h a c s p u b l i s h - - f o r c e
10. First app published
11. MVC Framework
12. Config.json { " r o u t e s " : [ { " p a t h " : " / " , " c a l l b a c k " : " a p p l i c a t i o n # i n d e x " } ] , " f i l t e r s " : [ { " p a t h " : " / " , " c a l l b a c k " : " " } ] , " w e b s o c k e t s " : [ { " e v e n t " : " " , " c a l l b a c k " : " " } ] } Callbacks are in filename#functionname format Default HTTP Method is GET. For post we need to add "method":"post" Web Sockets are a whole different talk. More info at http://socket.io/
13. A simple Web Site
14. A simple Web Site (config.json) { " r o u t e s " : [ { " p a t h " : " / " , " c a l l b a c k " : " a p p l i c a t i o n # i n d e x " } , { " p a t h " : " / h o m e " , " c a l l b a c k " : " a p p l i c a t i o n # h o m e " } , { " p a t h " : " / l o g i n " , " m e t h o d " : " p o s t " , " c a l l b a c k " : " a p p l i c a t i o n # l o g i n " } , { " p a t h " : " / l o g o f f " , " c a l l b a c k " : " a p p l i c a t i o n # l o g o f f " } ] , " f i l t e r s " : [ { " p a t h " : " / h o m e " , " c a l l b a c k " : " s e s s i o n _ f i l t e r # v a l i d a t e S e s s i o n " } ] , " w e b s o c k e t s " : [ { " e v e n t " : " " , " c a l l b a c k " : " " } ] }
15. Configure your app to track sessions (app.js) / / i n i t i a l i z e a p p f u n c t i o n s t a r t ( a p p , e x p r e s s ) { / / s e t f a v i c o n a p p . u s e ( e x p r e s s . f a v i c o n ( _ _ d i r n a m e + ' / p u b l i c / i m a g e s / f a v i c o n . i c o ' ) ) ; / / i n s t a n t i a t e s e s s i o n m a n a g e m e n t a p p . u s e ( e x p r e s s . s e s s i o n ( { s e c r e t : ' 1 2 3 4 5 6 7 8 9 0 Q W E R T Y ' } ) ) ; } / / r e l e a s e r e s o u r c e s f u n c t i o n s t o p ( ) { } There's more to sessions. See http://expressjs.com
16. A simple Web Site (application.js) f u n c t i o n i n d e x ( r e q , r e s ) { r e s . r e n d e r ( ' i n d e x ' , { t i t l e : ' W e l c o m e t o N o d e . A C S ! ' } ) ; } f u n c t i o n l o g i n ( r e q , r e s ) { v a r u i d = r e q . b o d y . u i d ; v a r p w d = r e q . b o d y . p w d ; v a r n a m e = r e q . b o d y . n a m e ; i f ( u i d = = = ' a p p c ' & & p w d = = ' n o d e a c s ' ) { r e q . s e s s i o n . u i d = u i d ; r e q . s e s s i o n . p w d = p w d ; r e q . s e s s i o n . n a m e = n a m e ; r e s . r e d i r e c t ( ' / h o m e ' ) ; } e l s e { r e s . s e n d ( 5 0 0 , { e r r o r : ' s o m e t h i n g b l e w u p ' } ) ; } } f u n c t i o n l o g o f f ( r e q , r e s ) { r e q . s e s s i o n . u i d = n u l l ; r e q . s e s s i o n . p w d = n u l l ; r e q . s e s s i o n . n a m e = n u l l ; r e s . r e d i r e c t ( ' / ' ) ; } f u n c t i o n h o m e ( r e q , r e s ) { r e s . r e n d e r ( ' h o m e ' , { t i t l e : r e q . s e s s i o n . n a m e } ) ; }
17. The Index View (index.ejs) < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > I n d e x < / t i t l e > < l i n k r e l = ' s t y l e s h e e t ' h r e f = ' / c s s / s t y l e . c s s ' / > < / h e a d > < b o d y > < h 2 > N o d e . A C S < / h 2 > < f o r m a c t i o n = " / l o g i n " m e t h o d = " p o s t " > < d i v > N a m e < i n p u t t y p e = " t e x t " n a m e = " n a m e " / > < / d i v > < d i v > U I D < i n p u t t y p e = " t e x t " n a m e = " u i d " / > < / d i v > < d i v > P W D < i n p u t t y p e = " p a s s w o r d " n a m e = " p w d " / > < / d i v > < d i v > < i n p u t t y p e = " s u b m i t " v a l u e = " G o " > < / d i v > < / f o r m > < / b o d y > < / h t m l >
18. The Home View (home.ejs) < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > < % = t i t l e % > < / t i t l e > < l i n k r e l = ' s t y l e s h e e t ' h r e f = ' / c s s / s t y l e . c s s ' / > < / h e a d > < b o d y > < h 2 > N o d e . A C S < / h 2 > < p > W e l c o m e H o m e , < % = t i t l e % > ! < / p > < d i v > < a h r e f = " / l o g o f f " > L o g o f f < / a > < / d i v > < / b o d y > < / h t m l >
19. Validating sessions (session_filter.js) f u n c t i o n v a l i d a t e S e s s i o n ( r e q , r e s , n e x t ) { i f ( r e q . s e s s i o n . u i d = = = n u l l ) { r e s . r e d i r e c t ( ' / ' ) ; } e l s e { n e x t ( ) ; } }
20. Walk-thru : ACS front-end https://github.com/ricardoalcocer/nodeacs_sample_website
21. Walk-thru : SaveJSON https://github.com/ricardoalcocer/acs_key_value_store
22. Creating a "catch-all" route a p p . g e t ( ' / g e t / * ' , f u n c t i o n ( r e q , r e s ) { u r l P a r a m = r e q . p a t h . r e p l a c e ( / \ / $ / , " " ) . s p l i t ( ' / ' ) . p o p ( ) ; / / d o w h a t y o u w a n t w i t h y o u r u r l p a r a m e t e r } ) ;
23. Some useful tools http://www.jsontest.com/ http://www.jsoneditoronline.org/ http://posttestserver.com/ http://code.google.com/p/cocoa-rest-client/
24. Thank you! Questions? Follow me on Twitter: @ricardoalcocer Github: /ricardoalcocer