Untangling spring week11
Download as PPTX, PDF0 likes345 views
This document provides an agenda and information for a class on databases, debugging, forms, and APIs. It includes exercises to set up debugging in VS Code and create a page that allows querying a database table. Key topics covered are debugging, generators, bundling, HTTP requests, parsing request bodies, asynchronous JavaScript, JSON, and RESTful APIs. Students are also instructed on requirements for their upcoming Project 3 presentations and Homework 11 assignment.
Untangling spring week11
- 1. UNTANGLING THE WEB WEEK 11 – MORE FUN WITH DATABASES, DEBUGGING, PUTTING IT ALL TOGETHER
- 2. 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
- 3. HW10 QUESTIONS • Has each group managed to get a database of their own up and listing on a web page? • What parts were hard?
- 4. 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
- 5. 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
- 6. 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!
- 7. 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.)
- 8. 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…)
- 9. 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
- 10. 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
- 11. 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)
- 12. 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
- 13. 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)
- 14. 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)
- 15. 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.
- 16. 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?
- 17. 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!
- 18. 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.