Winter break

For this break, we not only want you to enjoy the season but also stay engaged with your journey.

Objectives

Review a past lecture that you may not have fully grokked
Work on the capstone

Requirements

Create a summary of a past lecture to help further understanding of a topic
Have a good first push at your capstone project

Explorer Mode

[ ] Pick a lecture to go back and create details notes about the lectures. They should be more detailed than a high-level summary but do not need to be a dictation of the lecture. These notes should be focused on the core concepts of the lecture. Tell your instructor which video before you leave on Thursday.
Lecture videos are here:
14 - https://www.youtube.com/playlist?list=PLyKTFNBDP80BROdsw5K1Evze5UJ61N7VU
15 - https://www.youtube.com/playlist?list=PLyKTFNBDP80Cd8CPFnccw7TdelKsaKejp
16 -https://www.youtube.com/playlist?list=PLyKTFNBDP80BXqqOPzc5gwUY4-FpEtDJG

These are the notes that were created from the Intro to Joins lectures

This is a really good example, yours don't have this detail, but this a good target to hit

[ ] Work on your for your capstone. Focus on looks, no so much on functionality. While working this, start mapping out what API endpoints and database tables you will need to support your UI. Even go as far as creating the API and Models.

Adventure Mode

[ ] Watch any of these videos.

Epic Mode

[ ] Enjoy the holiday break and get some needed R&R.

API - Application Programming Interface

An API enables an application to interact with a database (or other application) to store, read update or delete data (CRUD = Create, Read, Update, Delete) via a standardized interface.

Data is being exchanged through an API via a series of HTTP requests from the client (application) in asynchronous fashion that each elicit a response from the server (application). The data in these request-response pairs typically is in JSON format and needs to be converted for display (typically into HTML) by the requesting application.

Often data requests inquire data portions that require updating only parts of a display page rather than a whole page on the client side.

The nature of the data exchange in an http-request-response pair is asynchronous, meaning the request for data does not depend (and wait) on the response. The client will send out the data request to the server, but then keep on executing other tasks. When (or if) the server responds with data other code is being executed to process the returned data appropriately.

But it could be that the response may never be sent by the server (or received by the client); that is why the request call has to be asynchronous and allow the client to continue executing other code once the request for data has been sent by the client.

An example of client-side code for implementing a request and handling the server response, is given as follows:

 1 const request = () => {
 2   fetch("https://swapi.co/api/people/6")
 3     .then(resp => {
 4       if (resp.status === 200) {
 5         return resp.json()
 6       } else {
 7         displayErrorMessage(resp)
 8       }
 9     })
10     .then(json => {
11       displayData(json)
12    })
13 }

The "fetch" function call in line 2 sets out to request data from the URL given in its argument. The returned object of this function call is a "promise" that is being handled in the subsequent ".then" method call beginning on line 3 (and ending on line 9).

Once "fetch" is called, code execution immediately continues (here by leaving the container function "request" in line 13) and does not wait for the fetch request to return data, because it could theoretically never happen.

If, and only if, the fetch request returns data, the anonymous function defined in the .then-method on line 3 is being executed. fetch's return value is the argument "resp" in the anonymous function and initially checked for its ".status" property. This is the return code of the http-request sent by "fetch". A code of 200 indicates success, which when true will call a method on the returned data to convert it into JSON format.

This call in turn will also return a promise, which is being handled by the function given as an argument in the subsequent ".then" method call on line 10 (and 11).

If the original data request from "fetch" was unsuccessful, instead an error message will be displayed to the user with the function call of displayErrorMessage on line 7. After that no other code in the function "request" is being executed.

If the promise from line 5 is fulfilled, the anonymous function defined on line 10 and 11 will handle the converted data and call the function displayData to display the data accordingly.

A more modern implementation of the above code sample is given as follows:

 1 const request = async () => {
 2   const resp = await fetch("https://swapi.co/api/people/6")
 3   if (resp.status === 200) {
 4     const json = await resp.json()
 5     displayData(json)
 6   } else {
 7     displayErrorMessage(resp)
 8   }
 9 }

The above code block provides exactly the same functionality as the example prior to it.

Here, new keywords are being introduced. "async" (on line 1) identifies the function "request" to contain at least one asynchronous function call. Each such call has to be prepended with the keyword "await" (lines 2 and 4). This indicates that execution is to continue otherwise, while this thread waits for the response from the function call ("fetch" on line 2, ".json()" on line 4).

Summary of lecture "APIs, JSON, and you!".

Schnorschel / assignments