DEV Community: Spencer Adler

Restful Routing - A Flask API Example

Spencer Adler — Thu, 22 Aug 2024 16:54:45 +0000

Restful routing is the push to make routing consistent though all different applications. REST is Representational State Transfer. It uses HTTP in a consistent, human-readable, machine-readable way.

The standards are GET, POST, PATCH, PUT, and DELETE.

Below will give an example of a couple of the restful routes in a flask API database to get/give the information from/to the front and perform the required action.

An example of a GET for Users in the server side using flask is using the below code.

First you will also need to import these items. The db import will be used later for the DELETE example.

from flask import request (*Used for POST and PATCH*)
from config import db, api, app 

from flask_restful import Resource
from models.user import User

Your config file should be set up like below for the imports to work.

 db = SQLAlchemy(app=app, metadata=metadata)
 api = Api(app=app)

The GET code in the User route:

 class UsersResource(Resource):
     def get(self):
        users = [user.to_dict() for user in User.query.all()]
        return users, 200

 api.add_resource(UsersResource, "/api/users", endpoint="users")

To break down this code.

You will need to create a class for the Users Resource and put in the Resource as an argument.

Next create a function for the get. The function will query the User table then create a list of all the users converting them to dictionaries for transfer so that they can be visible on the webpage as JSON. Then you return the list as well as a status code of 200 that the request was successful.

Lastly you will need to create the resource. Name the resource you are using as well as the path and endpoint. /api is added in front of the path so that the hosting website can discern from the front and backend route.

For DELETE you will have to create another resource for a single user delete. See the code below:

 class UserResource(Resource):
     def delete(self, id):
         user= User.query.get(id)
         db.session.delete(user)
         db.session.commit()
         return {}, 204

 api.add_resource(UserResource, "/api/user/<int:id>", 
 endpoint="user")

To further explain what is happening in the delete that is different from the get is a few things. First it is just deleting one user so you will need to create a new resource. It is set up similarly but not plural.

Then you create the delete function. It will need two arguments as you need to pass in the id that was sent from the front end to determine which user to delete. Then you will use db session delete and commit to update the database. After that you return an empty response as there is nothing to send back and the status for a delete (204).

Lastly you need to create the resource. This time using the UserResource. The path will be different to be singular and have the id that was passed into the front end and the endpoint is also singular.

RESTful routing makes it so when switching between different applications there is a standard that everyone can follow for backend routing and know the paths that are standardized. Additionally it makes the paths cleaner and easier to read.

Creating relationships using SQLAlchemy in Python

Spencer Adler — Thu, 01 Aug 2024 01:56:38 +0000

SQLAlchemy can help with many tasks required in Python when trying to create SQL tables one of those tasks is creating relationships.

Creating relationships with SQLAlchemy is made much easier than using just SQL. It streamlines the process with easier to follow syntax and less steps.

SQLAlchemy is imported into Python and all of the short cut syntax can be used.

 from flask_sqlalchemy import SQLAlchemy

To create a relationship you must start by creating a table. SQLAlchemy makes this easy as well by shorting the syntax to:

class Owner(db.Model, SerializerMixin):
    __tablename__ = "owners"
    id = db.Column(db.Integer, primary_key=True)

This will create an owners table with an id that is a primary key. Other code can be used to create the column attributes for owner. These will help with connecting the relationship. Once the columns are created you can work on the connecting the Dog table that we will create later. The code for the relationship is:

dogs = db.relationship('Dog', back_populates='owner')

This connects dog to owner where an owner can have many dogs but a dog has one owner as seen by the back populates being singular.

Then you can create the dog class and table. It can have a number of column attributes. The important one for the relationship is it should have an owner id with a foreign key. This is written in SQLAlchemy as:

owner_id = db.Column(db.Integer, db.ForeignKey('owners.id'))

Then like owner it will have a relationship. This one will be the opposite and connect dog to owner with the below code:

owner = db.relationship('Owner', back_populates= 'dogs')

Here instead of back populates being dog it is dogs as an owner can have many dogs while the previous code was owner because a dog has one owner.

Now the two tables will have a relationship. As stated before this juristically decreases the amount of code required and makes the syntax simple then having to write it in SQL.

More code can be added to add an association proxy and create serialization rules which will help an infinite loop but the above will create the initial relationship a lot faster than without SQLAlchemy.

Properties and attributes in Python

Spencer Adler — Thu, 11 Jul 2024 19:17:30 +0000

When writing code in Python there are many different functions you can write. In these functions you can create attributes and property.

The definition of attributes are variables that belong to an object. The definition of properties are attributes that are controlled by methods.

An example of attributes and properties are below.

Attributes:

class Traveler:
    some attribute= "All members of this class will have this attribute."
    def __init__(self, name):
         self.name = name

name is an attribute of the traveler class. Since it is inside the function it is instance attribute.

Some attribute will be same for all the travelers while the name can change for each traveler.

The traveler class can have many attributes like age, height etc... These attributes provide more information about the class. Similar to props in React.

Properties:
In adding to the code above you can get and set the name using some parameters. Then you would have a property for the name.

def get_name(self):
    return self._name

def set_name(self, name):
    if type(name)==str and len(name) > 0:
         self._name = name
    else:
         print("Name needs to be a string and longer than 0 characters.")

name = property(get_name,set_name)

get_name gets the name and then set name sets the name with the parameters in the code. When the name is input not following those parameters the console prints out an error message on what the requirements are. Then the property calls get_name and set_name when the property is called. See below for a way to call the property for name.

some_traveler = Traveler(name="Spencer")

name equaling Spencer is passed into the Traveler class and the property name is called. It gets the name and then sets it. Since it is a string and greater than 0 characters it is able to set it without an error message. Now when some_traveler.name is called it will be Spencer.

State in React

Spencer Adler — Thu, 20 Jun 2024 20:25:29 +0000

React has many great features to it that help create javascript. One way to impact the DOM is through state. React makes what is required in regular Javascript to update DOM much easier with fewer steps and simpler syntax. The unique feature to state is that every time it is updated the page re-renders.

State is data that is dynamic in a component. It can be updated over time as the application is updated and changed by the user. All these updates will be reflected in the webpage as they are changed.

When it is required to update an item that needs to be shown on the page instead of updating a variable you are to update state as you can have the issue of the variable updating but the page would not re-render and the updated variable would not be displayed.

The way to use state in react is a multi step process. First you need to use the react hook: import { useState } from "react"

This lets you use react's backend information and all that is required to update state.

Then you need to create a state variable. An example of this is:
const [count, setCount] = useState(0)

Above you are setting the state array for the variable count and setting the initial value of count to 0 as that is what is put in the parentheses of useState.

You then can create a function to update state and every time this occurs the count variable will be updated and the page will be re-rendered to show the updated count. See the full example of this below. The starred area is the last piece of the puzzle as discussed above.

import { useState } from "react"

function Counter() {
const [count, setCount] = useState(0);

**function increment() {
setCount(count + 1);
}

return {count};
}**

Event Listeners in Javascript

Spencer Adler — Wed, 29 May 2024 22:35:11 +0000

Javascript is a great tool to make it so that the webpage can come alive. One way to do this in Javascript is using event listeners. Event listeners allow the user to interact with the webpage in real time.

The event listener listens for an event to happen and then runs a callback function to do an actions. The event listener is added on an element in which an event will happen.

The event listener is set up in a way that even if the function is anonymous it will still be run. The event listener knows to run the function in the 2nd argument when the event takes place.

Typically the parameter of the function in an event listener is named event or e. Then an array of attributes is produced when the event happens and those items can be gathered by creating a variable that takes the target of the event and stores it.

Some frequently used event listeners are clicks, submits, DOMcontent loaded, and buttons. So more unique and less frequently used event listeners are ones related to the mouse's location.

An example of an event listener in Javascript can be seen below:

(In the HTML there would be a button element that had the ID of button.)

const button= document.getElementById('button');
button.addEventListener('click', function() {
alert('This button was clicked!');
});

What this code does is when the button is click a message appears on the top of the page that says. This page says: This button was clicked! To get out of that alert the user presses the ok button.