untangling spring week11

18
UNTANGLING THE WEB WEEK 11 – MORE FUN WITH DATABASES, DEBUGGING, PUTTING IT ALL TOGETHER

Upload: derek-jacoby

Post on 11-Apr-2017

177 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Untangling spring week11

UNTANGLING THE WEBWEEK 11 – MORE FUN WITH DATABASES, DEBUGGING, PUTTING IT ALL TOGETHER

Page 2: Untangling spring week11

AGENDA

• More about debugging and build environments• HTTP get and post messages, forms• Pulling responses out of post messages• Look back to asynchronous js

• Callbacks and promises, async library

• JSON and restful APIs• Project 3 presentations• Homework 11

Page 3: Untangling spring week11

HW10 QUESTIONS

• Has each group managed to get a database of their own up and listing on a web page?• What parts were hard?

Page 4: Untangling spring week11

DEBUGGERS

• We’ve used chrome developer tools, this is a rudimentary debugger• Better is the one built into VS Code because it can also debug

on the server side• Need to do just a little bit of setup to enable it

Page 5: Untangling spring week11

VS CODE SETUP

• Nice tutorial on https://code.visualstudio.com/docs/nodejs/nodejs-tutorial• More debugging details at

https://code.visualstudio.com/docs/editor/debugging• Let’s go through the tutorial together, just for more practice

in starting projects

Page 6: Untangling spring week11

GENERATORS

• This is something that gives you a framework from which to start your application• Boilerplate projects are similar• Use them, but make sure you know what they are doing!

Page 7: Untangling spring week11

BUNDLING AND BUILD ENVIRONMENTS

• Good video here: https://www.youtube.com/watch?v=PcqYhSH44Ow• (this just came across my feed today and I thought it was

interesting. You don’t need most of it for this class, though.)

Page 8: Untangling spring week11

EXERCISE 1

• Make sure you have nodejs installed• Follow the tutorial we just went through on

https://code.visualstudio.com/docs/nodejs/nodejs-tutorial• We’ll take 10-15 minutes on it (hopefully, I still suspect there

may be local development environment setup issues lurking around…)

Page 9: Untangling spring week11

FORMS

• We haven’t used forms in our HTML much yet.• They primarily provide benefit when using AJAX or other

server-side round-trips• In this case we are using express.js routes as our server side• We will use a form primarily as a tool to submit data

Page 10: Untangling spring week11

HTTP GET AND POST MESSAGES

• All of our routes have been get routes so far• We will use our first post route today• Need to set up an express route using app.post rather than

app.get

Page 11: Untangling spring week11

BODY-PARSER

• We will use a new npm module to be able to easily access the body of the request object• Look at the entire object and what it contains, being able to

just access the body is a great simplification• (review npm install, the require statement)

Page 12: Untangling spring week11

GRABBING VARIABLES OFF THE REQUEST OBJECT• Best use is to grab the variables that we have named in our

html• Can be any number of these, but just one is used in the

current example

Page 13: Untangling spring week11

ASYNCHRONOUS JAVASCRIPT

• Remember callbacks?• How about promises?• We’re going to use an NPM module called async to make this

easier• (once more through npm install and setting up the require

statements)

Page 14: Untangling spring week11

EXERCISE 2

• Create a branch in your fork of the simpleNode project and checkout that branch (can be done all in one step with “git checkout –b branchname”• Create your own example page (feel free to copy some of

what you need from the files in the project, but you’ll want to create new files)• Using the testDB database and the employees table, create a

page that allows you to query by salary (or one of the other fields)

Page 15: Untangling spring week11

JSON AND RESTFUL API STANDARDS

• JSON – javascript object notation• You’ve used this a bunch already but haven’t used this name for it.

Basically anytime you are using the object.property notation you are using JSON

• RESTful APIs - Representational State Transfer• Really complete discussion here:

http://stackoverflow.com/questions/671118/what-exactly-is-restful-programming• Basic thing you have to know is that it is stateless, so the call carries

everything that you need to complete the request. Our GET and POST actions today are prime examples.

Page 16: Untangling spring week11

PROJECT 3 PRESENTATIONS

• This is next week!• Each group will have a maximum of 10 minutes to present.• 15 points total

• 5 points presentation• Is the demo good, is the website working, is the story about why it is interesting smooth

• 5 points database design and function (do things actually work)• What is your table structure like? Talk about any problems you ran into. How was connecting it to the front end?

• 5 points code quality and robustness• Not everything has to work, but if it is there I want it to do nothing at all or the right thing. How have you

structured your code? Is it commented and easy to understand? Everything checked into github and deployed to the server?

Page 17: Untangling spring week11

PROJECT 3 PRESENTATIONS

• I’m not looking for the whole design story like in project 1• Instead I want your quick run-through of your functionality,

wrapped in the story of why it is interesting. Pretend you get 3-5 minutes in front of an investor and want to convince them that you have something cool• Rest of the time should be spent talking about your database

design and any development issues you ran into• 10 minutes max!

Page 18: Untangling spring week11

HOMEWORK 11

• You can use your database structure from hw10 for this• Create a web page with a list for results, a text field, and a button• When the button is pressed, execute the query based on the text field and

populate the results list with it• The page should be styled with CSS in a separate CSS file• Turn in by class on 3/29 with a list of who worked on it and the github link. You

do not need to have a running server this time because you will be using that for your project 3, but when I clone and pull your project it should work properly.