Node.js for Noobs: Build Twitter using Node.js

A Hacktorial (hacking tutorial) on node.js presented at University of Maryland on November 13, 2013.

Event details: https://www.facebook.com/events/320129064794341/.

Organization:
https://www.facebook.com/groups/hackersofmaryland/
http://www.terrapinhackers.com/

Transcript

1. Welcome to the First Hacktorial! Presenter: Hitesh Maidasani Terrapin Hackers https://www.facebook.com/groups/hackersofmaryland/
2. Hacking • Hacktorials • Hack nights • Hackathons (win them too!) • = Terrapin Hackers • Join Facebook group and spread the word ! • Interested in presenting or organizing?
3. Node.js for noobs
4. Background & Overview
5. What is Node.js? A javascript platform ! Can build lightweight web server for our web applications ! No Apache server needed!
6. WHAT IS A WEB SERVER? • Handles web requests and routes them to appropriate web pages
7. WHAT IS A WEB SERVER SIMPLIFIED? facebook.com
8. WHAT IS A WEB SERVER SIMPLIFIED? facebook.com/messages
9. WHAT IS FRONT-END & BACK-END? • Back-End or Server-Side
10. What does that mean though? It’s complicated ! I/O = Input/Output
11. IMAGINE FACEBOOK ON A TERRIBLE SERVER • When looking up you’re news feed in database, it just stalls because the database takes too long • Most servers do that! They wait for I/O to finish
12. EVENT DRIVEN SERVER SIDE I/O • others can do this but with a lot of setup and coding and thread management, but node.js does it all for you
13. EVENT DRIVEN SERVER SIDE I/O • Other web frameworks can do this • but with a lot of setup and coding and thread management • but node.js does it all for you! • Can build scalable applications quickly
14. WHEN SHOULD YOU USE NODE.JS? • Great for real-time applications: • online games, collaboration tools, … • anything quick and event driven
15. WHEN SHOULD YOU NOT USE NODE.JS? • Your server request is dependent on heavy CPU consuming algorithm/job
16. Node.js Tutorial ! slides: http://bit.ly/nodeslides code: http://bit.ly/nodegit
17. PURPOSE • Learn basics of Node.js • avoiding databases to keep things simple • First start with hello world, and then go on to twitter feed
18. THINGS NEEDED • a pair of hands • a computer (mac, windows, linux, etc.) • a text editor (http://www.sublimetext.com/2) • a hacker’s instinct
19. ! • http://nodejs.org/ STEP 1 – INSTALL NODE.JS
20. • A simple web application framework for node.js • Launch Terminal or Command Prompt • Run the following command (you can copy text) ! ! ! ! ! ! ! • Windows users might have to first run: • cd C:\Program Files\nodejs STEP 2 – INSTALL EXPRESS $ sudo npm install -g express
21. STEP 3 – CREATE AN EXPRESS PROJECT ! ! ! ! ! ! • Windows users, if cd ~/Documents gives errors, run: C:\Users\[your user name]\Documents $ cd ~/Documents/ $ mkdir nodeProjects $ cd nodeProjects $ express nodetest1
22. STEP 4 - INSTALL DEPENDENCIES $ cd nodetest1 $ npm install
23. STEP 5 - RUN YOUR FIRST NODE WEB APP ! ! ! ! ! ! • windows users might get a prompt to allow access $ node app.js
24. VIEW IN THE BROWSER
25. EXPLORE THE PROJECT • Open sublime or finder (documents) • inside sublime, Open (CMD+O) —> entire directory
26. EXPLORE APP.JS
27. EXPLORE APP.JS • Routing
28. Add Hello World
29. STEP 6 - ADD HELLO WORLD ROUTE • Go to File>New File • Copy contents of views/index.jade, and paste into new file • Save as views/helloworld.jade in views directory • Repeat but copy routes/index.js, save as routes/helloworld.js in routes directory, and make following changes
30. STEP 7 - ADD HELLOWORLD ROUTE IN APP.JS • Edit app.js and add the highlighted lines
31. STEP 8 - RUN HELLO WORLD • localhost:3000/helloworld ! ! ! ! ! ! ! • but might get this error …
32. STEP 8 - RUN HELLO WORLD CONTD. • In terminal quit process (CTRL+C) • Re-run node: ! ! ! ! ! ! ! • now refresh your browser … $ node app.js
33. Hello World!
34. STEP 9 - INSTALL SUPERVISOR!!! • to avoid constant restarting of node with changes, run (CTRL+C) then run: $ sudo npm install -g supervisor
35. STEP 10 - RUN NODE WITH SUPERVISOR $ supervisor node app.js
36. Building Twitter
37. Let’s call it Quacker
38. STEP 1 - CREATE PROJECT & INSTALL DEPENDENCIES ! ! ! ! ! ! • Windows users, if cd ~/Documents gives errors, run: C:\Users\[your user name]\Documents $ cd ~/Documents/ $ cd nodeProjects $ express nodetest1 $ cd quacker $ npm install $ npm install firebase —-save
39. STEP 2 - UPDATE TITLE • Copy views/index.jade into views/quacks.jade • Change index.js to
40. STEP 3 - HANDLE QUACK SUBMISSION • Under routes/ create a new file called quack.js • Add the content (https://raw.github.com/ hmaidasani/Quacker/master/routes/quack.js)
41. STEP 4 - HANDLE QUACK SUBMISSION ROUTE IN APP.JS
42. STEP 5 - ADD FRONT-END • In views/quacks.jade, • replace everything with: • https://raw.github.com/hmaidasani/Quacker/ master/views/quacks.jade • This will be the main page for quack submission and viewing
43. STEP 5 - ADD FRONT-END CONTD. • in public/stylesheets/style.css, • replace everything with: • https://raw.github.com/hmaidasani/Quacker/ master/public/stylesheets/style.css
44. FRONT-END EXPLAINED • quacks.jade: • quack submission through form and ajax request to routes/quack.js (we wrote this) • read and pull quacks from database • style.css • makes it look all pretty!
45. STEP 6: RUN THE APP $ supervisor node app.js
47. THIS IS AWESOME! • You all are running instances of the server • In real applications, there will be just one* • there are multiple front-end instances in each browser • but the data is shared, and pushed to each one • by Firebase!
48. What’s Next
49. YOU’VE BUILT YOUR OWN WEB APPLICATION • Add more features: • add user accounts • add a database (mongodb) • learn the frontend • html, css and javascript, jQuery parts • learn how firebase! • add other pages/routes for hashtags • host it on heroku/git or other hosting services • basically, attend our next workshops • And keep hacking!
50. ACKNOWLEDGMENTS • CS Staff • Terrapin Hackers organizers • And thanks for attending!!!