DEV Community: stellagress

Backend Server Up and Running with Python, Flask, and SQLAlchemy

stellagress — Mon, 09 Oct 2023 01:29:39 +0000

Setting up the skeleton of a backend program might be confusing and tricky. In this guide, we'll clarify how to accomplish it by combining simple yet powerful tools — Python (version 3.8 for this demo), Flask, and SQLAlchemy in VS Code. After following the steps, you'll be able to create a GET API.

Step 1 - Environment Setup

a) Create a folder — recommended name 'server' — to represent the backend server part.

b) Inside the 'server' folder, create 'app.py,' 'models.py,' and 'seed.py' as a common structure for organizing your application code.

c) In the terminal, create and run a virtual environment to manage dependencies for your project by executing:

=> pipenv install & pipenv shell

d) Initialize the migration environment:

=> cd server
=> flask db init

Step 2 - Adding Basic Information to app.py, models.py, and seed.py

a) models.py – This file is typically used to define the data models for your application, such as database tables (columns and relationships) when you're using an Object-Relational Mapping (ORM) library like SQLAlchemy. In this file, we should include following setup info:

# Import the SQLAlchemy extension for Flask
from flask_sqlalchemy import SQLAlchemy
# Import the MetaData class from SQLAlchemy to configure naming conventions
from sqlalchemy import MetaData

# Define a custom naming convention for foreign keys
metadata = MetaData(naming_convention={
    "fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s",
})

# Initialize SQLAlchemy with the custom naming convention
db = SQLAlchemy(metadata=metadata)

Also, we should include the columns with the desired attributes and relationship. In this case, one restaurant has multiple menus, and all menus belong to one restaurant, establishing a one to many relationship, continuing our models.py would look like this:

# Define the Restaurant model
class Restaurant(db.Model):
    # Define the name of the database table associated with this model
    __tablename__ = 'restaurants'

    # Define the 'id' column as an Integer primary key
    # This column is used to uniquely identify each restaurant
    id = db.Column(db.Integer, primary_key=True)

    # Define the 'name' column as a String with a maximum length of 255
    #characters
    # This column stores the name of the restaurant and is required
    # (nullable=False)
    name = db.Column(db.String(255), nullable=False)

    # Define a one-to-many relationship with the 'Menu' model
    # This 'menus' relationship establishes that each restaurant
    # can have multiple menus
    # The 'backref' parameter creates a reverse relationship in
    # the 'Menu' model
    menus = db.relationship('Menu', backref='restaurant')
# Constructor method for the Restaurant model
# Initializes a new Restaurant instance with a name
def __init__(self, name):
    # Assigns the provided 'name' to the 'name' attribute of the
    # Restaurant
    self.name = name


# Define the Menu model
class Menu(db.Model):
    # Define the name of the database table associated with this model
    __tablename__ = 'menus'

    # Define the 'id' column as an Integer primary key
    # This column is used to uniquely identify each menu
    id = db.Column(db.Integer, primary_key=True)

    # Define the 'name' column as a String
    # This column stores the name of the menu and is required
    name = db.Column(db.String, nullable=False)

    # Define as many columns as needed, for example, 'description'
    # of a food/drink in the menu
    description = db.Column(db.String, nullable=True)

    # Define the 'restaurant_id' column as an Integer foreign key
    # This column establishes a relationship with the 'id' column
    # of the 'Restaurant' model
    # It stores the ID of the restaurant to which this menu belongs
    restaurant_id = db.Column(db.Integer, db.ForeignKey('restaurants.id'), 
nullable=False)

    # Constructor method for the Menu model
    # Initializes a new Menu instance with a name and a restaurant ID
    def __init__(self, name, restaurant_id):
        # Assigns the provided 'name' to the 'name' attribute of the Menu
        self.name = name
        # Assigns the provided 'restaurant_id' to the 'restaurant_id'
        # attribute of the Menu
        self.restaurant_id = restaurant_id

b) app.py: This is often the main entry point of a Flask application. It's where you create your Flask app instance, define routes, and configure the application to use the SQLAlchemy instance created in 'models.py'. Below is an example of what 'app.py' might look like:

from flask import Flask, jsonify
from models import db, Restaurant, Menu  # Import your SQLAlchemy models

app = Flask(__name__)

#Using SQLite for this example, but replace 'sqlite:///app.db’ with 
#the actual URL of your database engine such as PostgreSQL, MySQL,
#MongoDB, Microsoft SQL Server, etc… 
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'

# Initialize SQLAlchemy with the Flask app
db.init_app(app)

# Define routes and views here

# Example route to retrieve a list of menus
@app.route('/menus', methods=['GET'])
def get_menus():
    # Query the database to retrieve a list of menus
    menus = Menu.query.all()

    # Convert the menu objects to a JSON response
    menu_list = []
    for menu in menus:
        menu_list.append({
            'id': menu.id,
            'name': menu.name
'description': menu.description
        })

    # Return the JSON response containing the list of menus 
    # JSON response is commonly used and accepted by the client
    # (front end); however, a response might be sent in other 
    #formats such as XML or HTML, depending on how your data is
    # being handles in the front end as well
    return jsonify(menu_list)

if __name__ == '__main__':
    # This block ensures that the Flask application is only run when 
    #this script is executed as the main program,
    #and not when it's imported as a module in another script. 
    #Also, you can indicate port used – usually a 5 thousand 
    #number for server side. 
    app.run(port=5555, debug=True)`

c) seed.py: This file may be used to populate your database with initial data, often referred to as "seeding" the database. It's not a standard Flask file, but it's a common practice among developers to create such a file especially for testing and debugging purposes. Seeding allows you to pre-fill your database with data for testing and development.

# Import necessary modules and the Flask app 
from app import app, db
# Import your SQLAlchemy models
from models import Restaurant, Menu

# Initialize the Flask app and SQLAlchemy within the app context
with app.app_context():
    # Create database tables if they don't exist
    db.create_all()

# Specify used engine
engine = create_engine('sqlite:///data.db')

# Delete seeded info, if needed:
print("Clearing db")
Menu.query.delete()
Restaurant.query.delete()

    # Seed the database with restaurant and menu data
    restaurants = [
        Restaurant(name="Restaurant A"),
        Restaurant(name="Restaurant B"),
        Restaurant(name="Restaurant C"),
    ]

    menus = [
        Menu(name="Menu 1", restaurant=restaurants[0]),
        Menu(name="Menu 2", restaurant=restaurants[0]),
        Menu(name="Menu 3", restaurant=restaurants[1]),
        Menu(name="Menu 4", restaurant=restaurants[2]),
        Menu(name="Menu 5", restaurant=restaurants[2]),
        Menu(name="Menu 6", restaurant=restaurants[2]),
        Menu(name="Menu 7", restaurant=restaurants[2]),
        Menu(name="Menu 8", restaurant=restaurants[2]),
        Menu(name="Menu 9", restaurant=restaurants[2]),
        Menu(name="Menu 10", restaurant=restaurants[2]),
    ]

    # Add the restaurant and menu data to the session
    for restaurant in restaurants:
        db.session.add(restaurant)

    for menu in menus:
        db.session.add(menu)

    # Commit the changes to the database
    db.session.commit()

# Print a success message
print("Database seeded successfully!")

Step 3 - Running Your Application

To run your Flask application and populate the database with seed data, execute the following commands in your terminal inside server directory:

=> flask db upgrade
=> python seed.py

Whenever the structure in 'models.py' is changed, run:

flask db revision --autogenerate -m'<your message>'

Lastly, in order to start server, we run:

=>  python app.py

Time to play! You can test your server using a tool like Postman by making GET requests to your defined routes in this example: as established in app.py as our route.

Understanding Instances in Python

stellagress — Sun, 20 Aug 2023 06:30:41 +0000

Instances in Python play a crucial role in object-oriented programming (OOP). They allow us to create and work with objects based on the blueprint provided by a class. In this article, we'll explore various aspects of instances, including attributes, methods, creation, access, and calling.

1. Instance Attributes

Instance attributes are variables defined within a class's methods, typically within the constructor method (init). They store data unique to each instance and are accessed using the self keyword.
Example:

class Car:
    def __init__(self, make, model, year):
        # Instance attributes
        self.make = make
        self.model = model
        self.year = year

2. Instance Methods

Instance methods are functions within a class designed to perform actions specific to instances. They take the 'self' parameter as their first argument, representing the instance itself.

Example:

class Car:
    # ...

    # Instance method
    def start_engine(self):
        print(f"{self.year} {self.make} {self.model}'s engine is now running.")

    # Instance method
    def stop_engine(self):
        print(f"{self.year} {self.make} {self.model}'s engine is now stopped.")

3. Creating Instances

To create instances, we use the class as a blueprint. Each instance will have its own set of attributes and methods defined by the class.

Example:

# Creating instances of the Car class
car1 = Car("Toyota", "Camry", 2020)
car2 = Car("Ford", "Mustang", 2022)

4. Accessing Instance Attributes

To access instance attributes, we use the variable name followed by a dot and the attribute name.

Example:

print(f"{car1.year} {car1.make} {car1.model}")
print(f"{car2.year} {car2.make} {car2.model}")
# Output:
# 2020 Toyota Camry
# 2022 Ford Mustang

5. Calling Instance Methods

To call instance methods, we use the variable name, followed by a dot, the method name, and parentheses.

Example:

car1.start_engine()  # Start the engine of car1
car2.start_engine()  # Start the engine of car2
car1.stop_engine()   # Stop the engine of car1
car2.stop_engine()   # Stop the engine of car2

In conclusion, understanding instances in Python is fundamental to working with objects and classes in OOP. Instances allow us to create, customize, and interact with objects, making our code more organized and modular.

Main React Handle Events

stellagress — Mon, 03 Jul 2023 01:55:12 +0000

In React, handling user interactions and form submissions is crucial for building interactive and dynamic web applications. Three commonly used event handlers in React are onClick, onChange, and onSubmit. In this blog post, we will explore these event handlers and understand when to use each of them effectively.

1. onClick

The onClick event handler is used to handle user clicks allowing users to interact with elements such as buttons, links, or other clickable elements.

Implementing onClick event handler:

  function App() {
    function handleClick() {
    // write desired action upon button being clicked 
       console.log("I am getting clicked!")
    }

    return (
      <div>
        <h1>React Events</h1>
        <p> Learning the basics of onClick </p>
        <button onClick={handleClick}>Click Me</button>
      </div>
    )
  }

Note that, in this example, the handleClick function will be executed when the button is clicked, and it will log the message "I am getting clicked!" to the console.

2. onChange

The onChange event handler is used to track and respond to changes in form inputs or other interactive elements - often used with , , and inputs. It allows you to capture a user's input and process it in real-time.

Implementing onChange event handler:

  function App() {
    function handleClick() {
    // write desired action upon button being clicked 
      console.log("I am getting clicked!")
    }

    function handleChange(event) {
      console.log(event.target.value)
    }

    return (
      <div>
        <h1>React Events</h1>
        <p> Learning the basics of onChange</p>
        <button onClick={handleClick}>Click Me</button>
        <input type="text" placeholder="Type something" 
         onChange={handleChange} />
      </div>
    )
  }

Note that in the code above, whenever the user types something into the input field, the handleChange function is called. The handleChange function logs the current value of the input field to the console using event.target.value.

3. onSubmit

The onSubmit event handler is used to handle form submissions - it "listens" for form elements. It is triggered when the user submits a form, usually by pressing the Enter key or clicking a submit button.

Implementing onSubmit event handler:

  function App() {
    function handleClick() {
    // write desired action upon button being clicked 
      console.log("I am getting clicked!")
    }

    function handleChange(event) {
      console.log(event.target.value)
    }

    function handleSubmit(event) {
      event.preventDefault()
      console.log("submitting form")
    }


    return (
      <div>
        <h1>React Events</h1>
        <p> Learning the basics of onSubmit </p>
        <button onClick={handleClick}>Click Me</button>
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder="Type something" 
           onChange={handleChange} />
        </form>
      </div>
    )
  }

Note that in the code above, the onSubmit event handler is attached to the

element. When the form is submitted (typically by pressing Enter or clicking a submit button), the handleSubmit function is triggered and the message "submitting form" is logged to the console.

Conclusion

Understanding the differences between onClick, onChange, and onSubmit in React is crucial for handling user interactions effectively. By utilizing these event handlers appropriately, you can create engaging user experiences, capture user input, and handle form submissions in your React applications. Remember to choose the event handler that aligns with the specific interaction or task you want to accomplish.

Arrow functions - JavaScript

stellagress — Thu, 11 May 2023 01:43:13 +0000

4 differences between regular functions and arrow functions:

1. Syntax

Regular function:

function multiply(num1, num2) {
    return num1 * num2;
}

Arrow function:

const multiply = (a,b) => a * b;

Note some differences in the syntax – Arrow functions are:

Defined with ‘=>’
No function keyword
do not always need {}
Implicit ‘return’ keyword

*If only one parameter, the parenthesis is not needed

2. Hoisting

Regular function:

sayHello(); 
//=> Hello!
function sayHello() {
    console.log(“Hello!”);
}

Arrow function:

sayHello();
//=> sayHello is not defined 
const sayHello = () => console.log("Hello!");

In this case, calling the respective function prior to defining them only worked for the first example due to hoisting. As noted here, functions expressions (arrow functions) are not hoisted, meaning that you can only call the function after it has been declared.

3. Callback functions / anonymous syntax

Regular function:

function squareNum(num) {
  return num * num;
}

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(squareNum);
console.log(squaredNumbers);
//=> [1, 4, 9, 16, 25]

Arrow function:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers);
//=> [1, 4, 9, 16, 25]

4. Lexical scope ‘this’

Regular function:

const person = {
  name: Alice,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
 };
person.sayHello();
//=> Hello, my name is Alice

Arrow function:

const person = {
  name: Alice,
sayHelloArrow: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
}
person.sayHelloArrow(); 
//=> Hello, my name is undefined

As observed, only in the first example the keyword ‘this’ was able to access the person object through the ‘name’ property (//=>‘Alice’). The same does not happen with arrow functions, since the arrow function does not have its own ‘this’ value, inheriting ‘this’ from the enclosing lexical scope, in this case is the global object which does not contain a ‘name’ property; therefore, returning ‘undefined’.

Conclusion:

Those are some differences and in most cases the benefits of arrow functions involve – 1- Allow us to write a shorter function syntax. 2- Avoid issues with hoisting. 3- Make it easier to write concise and reusable callback functions, especially for array operations. In the other hand, 4- arrow functions can be tricky to use when having the keyword ‘this’, therefore, is important to ensure that the ‘this’ value is correctly bounding to the object that the method is called on.