Environment Setup Assignment 0 The Technology Stack Manages - - PowerPoint PPT Presentation

Environment Setup

Assignment 0

The Technology Stack

• Manages node_modules (external

tools)

• Creates web server
• Stores data persistently with JSON

logic.

• Utilizes NoSQL instead of SQL
• Facilitates HTTP requests and

response handling. (REST API)

• express-handlebars allow

templating on HTML

node_modules + package.json

• node_modules - external tools/plugins that can be used in Node.js server

side programming.

○ e.g.) express, express-handlebars, mongodb, mongoose, etc. ○ Using these tools can make your programming easier!

• package.json - the explanation of your project in JSON format.

○ You can create them using npm init command ○ Lists dependencies (node_modules) and simplify scripts ■ You can insert a dependency using npm install --save command. ○ Lightweight approach to share dependencies with your teammates ■ Your teammates just have to perform npm install command after they received latest version.

• For Assignment 0 (A0), you will be installing following node_modules

○ express + express-handlebars ○ body-parser ○ mongodb + mongoose

• You will also be needing following scripts

○ "start": "node server.js" ○ "prestart": "mongod --dbpath dbpath --logpath log/mongod.log&"

• What do they all mean?

node_modules + package.json

Demo Time

Model-View-Controller

Model-View-Controller

• For this assignment, you can associate MVC with following:

○ Model - models.js ■ Define schemas of how each persistent data will represent ■ Mongoose is a plugin that allows developer to create schemas and link it with MongoDB. ○ View - views/* + public/* ■ Anything under views and public directory will fall under view portion of MVC ■ In general, think of this as client-side programming (HTML, CSS, Javascript) ■ Express-handlebars displays data from server-side to HTML using templates. ○ Controller - server.js + routes/* ■ Mediates between model and view. ■ What algorithms/functionalities are needed to retrieve/store data from/to database? ■ What algorithms/functionalities are needed to display data to view?

GET vs. POST

• GET request

○ Client asking server what they want to retrieve ○ app.get(...) ○ Sometimes GET request need to specify details ■ Passed through parameters (req.params) or query (req.query) ■ Parameter - http://myapp.me/route/:id ■ Query - http://myapp.me/route?a=b&c=d ■ Express transforms these data in JSON format

GET vs. POST

• POST request

○ Client sending data to server ○ app.post(...) ■ Common: <form> tag in HTML can send request to server-side ■ Data are sent through body of the request (req.body) ■ Express transforms these data in JSON format ○ Hint: In A0, users will input information through form, send these data to server, and store to the database.

Recommendation

• Make sure you understand how the code works!

○ This will help you debug [intentionally] broken code ○ You may use debugging tools (e.g. Firebug) or classic console.log(...) .

• Read the given resources posted on assignment wiki

○ You may not need all the information there, but understanding them can make this assignment easier

• Ask questions

○ If you are stuck, feel free to ask questions on Piazza, during studio/office hours ○ If you are absolutely stuck, let us know!

• Try Part III (if you have time)
• Try other aspects of given technology (e.g. delete an entry from the DB)

Questions?