Collections

• Blog Python Model code and SQLite Database.

• From VSCode using SQLite3 Editor, show your unique collection/table in database, display rows and columns in the table of the SQLite database.

• This image shows the sqlite database containing the name of the button, the userID, and the button’s likes & dislikes

• From VSCode model, show your unique code that was created to initialize table and create test data.

• This code is used to create the name formatting name, type, content, userID, likes, dislikes, description with the class Design(db.Model):

Lists and Dictionaries

• Blog Python API code and use of List and Dictionaries.

• In VSCode using Debugger, show a list as extracted from database as Python objects.

• This screenshot is taken in debugger after running the search function. We see multiple Design objects which have been freshly loaded from our database.

• In VSCode use Debugger and list, show two distinct example examples of dictionaries, show Keys/Values using debugger.

• The screenshot is taken in debugger and shows the request body json when saving a design.

• The screenshot is taken in debugger and shows the request body json for logging in.

APIs and JSON

• Blog Python API code and use of Postman to request and respond with JSON.

• In VSCode, show Python API code definition for request and response using GET, POST, UPDATE methods. Discuss algorithmic condition used to direct request to appropriate Python method based on request method.

• The screenshot is taken from the users api file and shows the definition of CRUD operations that are run after POST, GET, or PUT requests.

• In VSCode, show algorithmic conditions used to validate data on a POST condition.

• The code in the screenshot above checks to see whether certain variables in the request body json are valid or not. If they are, then they will be updated into the user’s entry in the collection in the database.

• In Postman, show URL request and Body requirements for GET, POST, and UPDATE methods.
• In Postman, show the JSON response data for 200 success conditions on GET, POST, and UPDATE methods.

• In Postman, show the JSON response for error for 400 when missing body on a POST request.

• In Postman, show the JSON response for error for 404 when providing an unknown user ID to a UPDATE request.

• Note: In our USER API code, we’ve set it up so that it automatically fetches the user ID from the JWT token when someone logs in. This means you don’t have to include your user ID when you make a PUT request. This way, users can only update their own profiles, and there’s no chance of getting a 404 error because there’s no unknown user ID involved.

Frontend

• Blog JavaScript API fetch code and formatting code to display JSON.

• In Chrome inspect, show response of JSON objects from fetch of GET, POST, and UPDATE methods.
• In the Chrome browser, show a demo (GET) of obtaining an Array of JSON objects that are formatted into the browsers screen.
• The screenshot is taken after running a fetch request to the search endpoint in the backend. The console on the right displays the json data returned by the backend.

• In JavaScript code, describe fetch and method that obtained the Array of JSON objects.
• The screenshot shows the frontend displaying multiple objects after iterating through the results provided from the backend.

• In JavaScript code, show code that performs iteration and formatting of data into HTML.
• The screenshot shows the code that allows the frontend to do it.

• In the Chrome browser, show a demo (POST or UPDATE) gathering and sending input and receiving a response that show update. Repeat this demo showing both success and failure.

• In JavaScript code, show and describe code that handles success. Describe how code shows success to the user in the Chrome Browser screen.
• The screenshot shows the browser showing a successful result by alerting the user that the design was saved.

• In JavaScript code, show and describe code that handles failure. Describe how the code shows failure to the user in the Chrome Browser screen.

• The screenshot shows the browser showing an unsuccessful result by alerting the user to ‘please enter a design name’.