Writeup

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 shows that the SQLite3 table with the data
    • It’s the data from the login system, which store the name, uid, and the password in the table

  • From VSCode model, show your unique code that was created to initialize table and create test data.
    • The picture shows below is my unique test data code that I created. It include the name, the uid, and the password for users. u1 to u5 is different test data that I created.

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.
    • At the left side, there is a list of the comments. I set a breakpoint before the JSON-ready format. I send a request from postman, the GET request sent to the backend, when it run to line 20, the list is shown at the left side.

  • In VSCode use Debugger and list, show two distinct example examples of dictionaries, show Keys/Values using debugger.
    • Picture below is an example of dictionaries from my user login.
    • After the user is fetch, when the frontend sends the data such as name, uid and password, the backend will stored as a dictionary.

    • Picture below is an example of dictionaries from my comment.
    • The frontend sends the data such as uid, restaurant, and rating, the backend will stored as a dictionary format.

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 first picture shows the GET method. It will fetch comments from the database and then make it into json ready format. And then at the end, it will return the data or the result.

    • The second picture shows the POST method. It retrieves the value associated with the key of ‘restaurant’, ‘uid’, and ‘rating’ from the JSON data. It will return ‘Comment submitted successfully’ if success.

    • The third picture shows the UPDATE method. Get the body of uid, name, and password and you can do a update of password or uid.

  • In VSCode, show algorithmic conditions used to validate data on a POST condition.
    • The len method ensure that the length of the username and the uid should be longer that 2 characters.

  • In Postman, show URL request and Body requirements for GET, POST, and UPDATE methods. (This is shows under the 200 success conditions)

  • In Postman, show the JSON response data for 200 success conditions on GET, POST, and UPDATE methods.
    • In postman, this picture shows that the GET method for the comment works successful.

    • In postman, this picture shows that the POST method for comment works successful.

    • In postman, this picture shows that the PUT method for user work successful.

  • In Postman, show the JSON response for error for 400 when missing body on a POST request.
    • This picture shows error for 400 because missing of a POST request.

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

    • In vscode, it shows that it’s a 404 error.

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.
    • GET methods
    • In the Chrome inspect, this shows the fetch respone of the GET methods. At the right side, you can see the list of commets including the data of rating, reestanurant and uid.

    • POST methods
    • In the Chrome inspect, this shows the POST methods works successfully.

  • In the Chrome browser, show a demo (GET) of obtaining an Array of JSON objects that are formatted into the browsers screen.
    • In JavaScript code, describe fetch and method that obtained the Array of JSON objects.
      • The picture shown below show the fetch code to the backend. It will return the data that store in the backend to the frontend if fetch success, otherwise it will return Failed to fetch.

      Picture down is a picture from chrome that shows GET success from the backend.

    • In JavaScript code, show code that performs iteration and formatting of data into HTML.
      • The fetch code connect the backend and the frontend so when the user send, the backend will get the data.
      • After that, the the frontend will get the data from backend and show it on the webpage.

  • 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.
      • In Chrome, if user enter the correct name, uid, and password, the backend will get the request and check if it’s correct, if everything is correct it will shows a login success and the switch to the next page of our project.

      • Picture shows below is my comment program, user will enter their uid, the restaurant they want to give a rate and give a score to that restaurant. After that, the backend will store the request from user and shows a success in Chrome, then the comment will show at the bottom of the chart.

      • Picture shows below is my comment program shows in vscode, after the fetch success it will display the comment.
    • JavaScript code, show and describe code that handles failure. Describe how the code shows failure to the user in the Chrome Browser screen.
      • If user enter wrong password or wrong uid, then in the Chrome Browser screen, it will shows an error and users can not login to our page.
      • If user enter a username that isn’t signup first, it will also shows an error.
      • Backend will check the if the login request is correct and match the store data at the backend.

      • Picture below is my login frontend code, this is the code that shows fail to login in the chrome.

      • Picture show below shows a failure in my comment program. If the user send nothing for uid, restaurant, or rating then the chrome will shows a notification of fail to submit a comment.

      • Picture below is my comment frontend code, this is the code that shows fail to comment in chrome.

Optional/Extra, ML Algorithm Analysis

  • Machine Learning Algorithm Analysis
    • Show algorithms and preparation of data for analysis. This includes cleaning, encoding, and one-hot encoding.
    • Show algorithms and preparation for predictions.

    • Discuss concepts and understanding of Linear Regression algorithms.

      • Linear regression is an algorithm that provides a linear relationship between an independent variable and a dependent variable to predict the outcome of future events. Linear Regression can minimize the difference between predicted and actual values. For example like the image down below. The redline is the linear regression line and the blue points is all the data points. The linear regression is the line eof the best fit of these data points.

    • Discuss concepts and understanding of Decision Tree analysis algorithms.

      • A decision tree algorithm is a machine learning algorithm that uses a decision tree to make predictions. The goal is to recursively split the data set into smaller pieces. So decision treee algorithm provides a simple and intuitive way to model complex relationships in data. Picture down below is a example of decision tree algorithm. It seperate the root node into two other branches.