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.

node_modules + package.json ● 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?

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?