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.

Here we see the database in SQLite of the items unique to each of a handful of our group’s members, which we use to differentiate and create ‘profiles’ in our project. This is seen as created by my backend initialization code which can be apended upon but display in the database when ./migrate.sh is ran.

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

Here is the code that initialized the data seen in the SQLite3 database for me, Grayson, Ellie, and Arushi with a row kept for Mr. Mortensen. This includes userids specific to the individual which can be used as a username when logging in. This is in addition to what is seen above in the Sql database and this model code is what makes the database that can be apended upon by using the HTTP functions accessed through postman or the backend

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 code demonstrates the retrieval of database records, storing them in a Python list CurrentCharacters, and using a list comprehension to process these records into a format suitable for JSON serialization. The jsonify function then handles the serialization and formatting of the HTTP response.

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

python read(self) function returns the dictionary for the character. This is for the attributed of the currentchar

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.

Here we have post, get, and put methods for CurrentChar. When a request arrives at the API endpoint, Flask parses the HTTP method used for the request (e.g., GET, POST, PUT). Flask RESTapi is able to take the HTTP method and assigns it to one of the classes above.

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

This is the same post as above. It validates the length of classname as well as getting the input for health, attack, range, and movement. You must be authenticated in order to access the JSON as stated by the ‘token required’. This is a POST condition accessed through the CRUD resource.

In Postman, show URL request and Body requirements for GET, POST, and UPDATE methods.

See screenshot below of URL and body

In Postman, show the JSON response data for 200 success conditions on GET, POST, and UPDATE methods.

The output is ‘null’ as I currently haven’t initialized any data, however as my post works, I get a 200 success labeled ‘OK’ and get through.

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

When missing a body on the POST request, you get a response of 400 ‘bad request’ as the server cannot process the request being made, here being the nonexistant request, as there needs to be data in the JSON raw in order for data to be posted via HTTP.

In Postman, show the JSON response for error for 404.

Here, I get a 404 error for not found when I remove a character (in this case a slash) ‘/’ from the link, becoming an invalid link stated by my api currentchar creates, therefore not containing a file that Postman can get.

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.

Here as we call using a GET request to the HTTP to access the gameboard, we see a 405 error, similar to the postman error that I was getting “method not allowed’. That being said, we are still let through and our previously selected character is used on our main game screen.

In the Chrome browser, show a demo (GET) of obtaining an Array of JSON objects that are formatted into the browsers screen.

We see here the main game screen with the character chosen previously on-screen and it’s specific attributes to the character class using GET JSON objects from fetch.

In JavaScript code, describe fetch and method that obtained the Array of JSON objects.

In the JavaScript, here we have the fetch GET method receiving an array of the CurrentChar stats to perform the damage calculations.

In JavaScript code, show code that performs iteration and formatting of data into HTML.

In this JavaScript as part of the Character Creation page, we see the stats of the current character being formatted into an array for the HTML to access to display in a table on the character selection screen.

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.

Here is a successful example of me previously on position 3 and moving to position 6, with this move being logged in the console as well as a JavaScript alert warning me the enemy has also moved.

However if you input a space not adjacent to you (ex. me being on space 6 and requesting to move to space 1), you will get an alert saying that your input is not valid.

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

Here we see our JavaScript riddled with console logs to notify the player that the enemy has moved and where it has moved to once they player moves successfully.

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

However here, at the bottom of the previous JavaScript segment, we have a line to alert the player of an invalid input if something goes wrong along the way, as well as a check for player and enemy positions.