DEV Community: Janine

Phase 5 Blog - Polymorphic relationships

Janine — Fri, 24 Jan 2025 13:46:57 +0000

Introduction

Finishing a software engineering bootcamp feels like a whirlwind—on one hand, there's an overwhelming sense of accomplishment, having made it through the intense learning curve and sleepless nights. But on the other hand, submitting the final project brings a mix of nervousness and uncertainty. The project is a culmination of everything we've absorbed over the past few months: coding languages, frameworks, problem-solving techniques, and best practices. I have learned so much about the languages in the curriculum, JavaScript, React, Python, Flask, Sql, and Flask-SqlAlchemy. It's a reflection of both how far we've come and how much we still have to learn. The joy of completing it is bittersweet, though. There’s a sense of pride in seeing a finished product, but also a realization that the structured learning is over. Now, it's time to face the real world, and the excitement is tempered with the weight of the unknown. But overall, it feels like a pivotal moment—a step into something new.

One final thing I have learned in working with my final project is about Polymorphic relationships. Polymorphic relationships in Python, often seen in object-oriented programming, allow different classes to be treated as instances of the same class through inheritance. This is particularly useful when you have a base class, and several other classes that share common behavior but also have their own unique functionality. In a polymorphic relationship, you can call methods or access properties on objects of the derived classes as if they were objects of the base class, making the code more flexible and reusable. For example, if you have a Shape class with a method draw(), both Circle and Rectangle classes can inherit from Shape and implement their own version of draw(). When you call draw() on any shape object, Python will automatically invoke the correct method for that specific object, based on its actual class. This dynamic behavior is what makes polymorphism so powerful—it reduces the need for redundant code and increases scalability in systems with complex hierarchies or varying behaviors.

An example of polymorphic relationships in Python can be seen with the concept of animals. Let’s say we have a base class Animal, and two derived classes, Dog and Cat, that each implement a method speak(). Despite Dog and Cat being different classes, they both share the common interface of the speak() method, which is defined differently in each class. Here's how it would look:

class Animal:
    def speak(self):
        raise NotImplementedError("Subclass must implement abstract method")

class Dog(Animal):
    def speak(self):
        return "Woof!"

class Cat(Animal):
    def speak(self):
        return "Meow!"

# Polymorphic behavior in action
animals = [Dog(), Cat()]

for animal in animals:
    print(animal.speak())

In this example, both Dog and Cat are derived from the base class Animal and implement the speak() method in their own way. The list animals holds instances of both Dog and Cat, and when we iterate over the list and call speak(), Python automatically calls the correct version of speak() depending on the actual class of the object—this is polymorphism at work. You’ll get the output:

Woof!
Meow!

This shows how polymorphic relationships let you treat different objects through a common interface, simplifying code that handles a variety of types.

My Project example

In my project I have a class called ‘FamilyMember’ wherein the member_type can either be an instance of the ‘Adult’ or ‘Child’ class. We'll begin by setting up relationships on the ‘Family’ class side and stop there. Here is what I have done on my project:

class FamilyMember(db.Model, SerializerMixin):
    __tablename__ = 'familymembers'
    id = db.Column(db.Integer, primary_key=True)
    family_id = db.Column(db.Integer, db.ForeignKey('families.id'), nullable=False)
    member_id = db.Column(db.Integer, nullable=False)
    member_type = db.Column(ENUM('adult', 'child', name='member_types'), nullable=False)

    serialize_rules = ('-families', )

    def to_dict(self):
        return {
            'id': self.id,
            'family_id': self.family_id,
            'member_id': self.member_id,
            'member_type': self.member_type,
        }

class Family(db.Model, SerializerMixin):
    __tablename__ = 'families'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String, nullable=False)
    invite_code = db.Column(db.String, nullable=False, unique=True)

    adults_member = db.relationship(
        'Adult',
        secondary='familymembers',
        primaryjoin='foreign(FamilyMember.family_id)==Family.id',
        secondaryjoin="and_(FamilyMember.member_type=='adult', foreign(FamilyMember.member_id)==Adult.id)",
        backref=db.backref('familymembers_member', lazy='dynamic'),
        lazy='dynamic',
        viewonly=True,
    )

    children_member = db.relationship(
        'Child',
        secondary='familymembers',
        primaryjoin='foreign(FamilyMember.family_id)==Family.id',
        secondaryjoin="and_(FamilyMember.member_type=='child', foreign(FamilyMember.member_id)==Child.id)",
        lazy='dynamic',
        viewonly=True,
    )

    serialize_rules = ('-events', '-adults', '-children', '-familymembers', '-files')

    def to_dict(self):
        return {
            "id": self.id,
            "name": self.name,
            "adults_member": [adult.to_dict() for adult in self.adults_member],
            "children_member": [child.to_dict() for child in self.children_member],
            "invite_code": self.invite_code
        }

Let us discuss what is happening on the 'adult_member' relationship on the 'Family' class.

First, the relationship connects to the ‘Adult’ model. This means that when we use this relationship, we'll get a list of ‘Adult’ instances, giving us easy access to all the details of every Adult as a family member.
We have to go through the ‘familymembers’ table to get here. Please note that the value for secondary is the ‘familymembers’ table rather than the ‘FamilyMember’ model.
The primaryjoin value is just a standard foreign key pointing at the id of the model we're on.
The secondaryjoin, the connection is facilitated via the combination of a family_id matching the id of the current instance of an Adult or Child and a member_type dictating whether it's an Adult or Child for that family member.
The backref makes things easier by automatically creating a relationship from Family to Adult using the same connections. This means you can use the familymembers_member relationship in the to_dict() method of Post, as well as in routes or other parts of the backend. Follow the rules regarding the ‘Child’ class relationship, then you’re all set.

Please check out my project in github https://github.com/jajaninnin/project-phase5

Please let me know if there are questions, suggestions on how I can improve my code. Thank you for reading.

Sources:
https://hackmd.io/@chrisoney/rkNWNTt_d#Polymorphic-Associations-in-SQLAlchemy
https://docs.sqlalchemy.org/en/20/orm/inheritance.html#concrete-polymorphic-loading-configuration

Phase 4 Blog - Flask SQL-Alchemy

Janine — Fri, 03 Jan 2025 17:45:11 +0000

I’ve successfully completed Phase 4 of the Flask-SQLAlchemy course, where I learned how to integrate relational databases into Flask applications. During the course, I gained hands-on experience defining models, setting up table relationships, and performing various database operations. I also explored how to manage database migrations with Flask-Migrate. With a strong understanding of SQLAlchemy’s features, I am now confident in building data-driven Flask applications and managing databases efficiently. This phase has provided me with valuable skills for web development and working with databases in Python.

Flask is a lightweight web framework for Python that allows developers to build web applications quickly and easily. It provides essential features like routing and request handling, while leaving the rest up to extensions, giving developers flexibility to choose tools for things like databases and authentication. Flask's simplicity, scalability, and extensibility make it an ideal choice for both small projects and larger, more complex applications.

Flask-SQLAlchemy is an extension that simplifies integrating SQLAlchemy with Flask. It enables developers to interact with databases using Python objects instead of writing raw SQL. By streamlining database connections, schema definitions, and query management, Flask-SQLAlchemy makes it easier to build and manage data-driven Flask applications. It also supports a variety of databases, which makes it highly adaptable.

We use Flask-SQLAlchemy because it simplifies working with databases in Flask. It handles the setup and lets developers create models, run queries, and manage data with Python code. This saves time, reduces errors, and allows developers to focus on building app features instead of dealing with complex SQL.

Here’s an example of a simple Flask app using Flask-SQLAlchemy:

in app.py

from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

// Configure the SQLite database

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

// Define a User model (table)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    email = db.Column(db.String(100), unique=True, nullable=False)

    def __repr__(self):
        return f'<User {self.name}>'

// Create the database

with app.app_context():
    db.create_all()

@app.route('/')
def index():
    users = User.query.all()  # Get all users from the database
    return render_template('index.html', users=users)

@app.route('/add', methods=['POST'])
def add_user():
    name = request.form.get('name')
    email = request.form.get('email')

    # Create a new User
    new_user = User(name=name, email=email)
    db.session.add(new_user)
    db.session.commit()

    return redirect('/')

if __name__ == '__main__':
    app.run(debug=True)

To create and manage database migrations, you can use Flask-Migrate, which integrates Alembic for handling schema changes. First, install Flask-Migrate using pipenv install Flask-Migrate, and then set it up in your app:

in app.py

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'your-database-uri'
db = SQLAlchemy(app)
migrate = Migrate(app, db)

Next, initialize the migration repository by running this in your terminal:

flask db init

After making changes to your models, generate migration scripts with:

flask db migrate -m "description of changes"

Finally, apply the migrations to the database with:

flask db upgrade

This workflow allows you to efficiently manage database schema changes over time.

Entering a new phase marks an exciting opportunity for growth and learning. As I move forward, I’m eager to apply the knowledge gained so far, while also tackling new concepts and expanding my understanding. The next step that I'm about to take is building my final project.

Building my final project is an exciting opportunity to combine everything I've learned throughout the course. It’s the chance to apply the concepts, tools, and techniques I've mastered—from JavaScript, React, Python, SQL, and now database management with Flask-SQLAlchemy to handling migrations with Flask-Migrate, and structuring dynamic, data-driven applications. By integrating all these elements into one project, I hopefully can showcase my skills, solve real-world problems, and bring together the full scope of knowledge gained. This project serves as a culmination of my learning and a stepping stone toward further growth in web development.

Phase 3: Python and SQL

Janine — Wed, 04 Dec 2024 21:32:05 +0000

Introduction

I was quite excited to start on the 3rd phase in my bootcamp classes because we are about to learn Python. Python is the first language that I learned at the start of my journey. It lured me into this software engineering world. It feels like reuniting with an old friend. I may not have learned a lot when I first stepped foot into the Python world, to be honest I only learned until if else statements before I started this bootcamp.

Learning a new programming language one after another can be quite tricky, especially when it shares some similarities but also has key differences from languages I already know. I have learned JavaScript in Phase 1 and React.js in Phase 2. While I recognize familiar concepts like variables, loops, and functions, the syntax or behavior of certain features confuses me to this day. For example, a function that works one way in Python might behave differently in JavaScript or React, which leads to moments of confusion. The challenge lies in unlearning old habits and adjusting to new ways of thinking about problems. However, I think having to learn different sorts of languages in programming will help me grow and be more adaptable in the future and helps me expand my toolbox.

Python's syntax for me is cleaner and simple, making it easier to grasp concepts like variables, loops, and functions without getting overwhelmed by complex syntax rules. In contrast, JavaScript introduced more complexity with concepts like asynchronous programming and the intricacies of the DOM, while React added a whole new layer with the use of components, state management, and routing. Although Python is often used for backend development, JavaScript and React require a deeper understanding of web development frameworks, which makes the learning curve steeper in those areas. However, each language has its strengths, and I appreciate Python's versatility in everything like data analysis.

I have also learned SQL hand in hand with Python on this Phase 3. When I first saw the syllabus, I was a little bit overwhelmed to learn 2 languages at the same time. I wanted to devour python. I felt like learning it in combination with SQL was quite disappointing for me. But at the end of the phase, I was actually happy to learn SQL. I do love my spreadsheet and data.

Here are some of the things I have learned in this Phase:

Python

Python is an object-oriented programming language developed by Guido Van Rossen. Python has a pretty straightforward process in interpreting and executing code. A developer will write some code on any text editor (the most commonly used is Visual Studio Code) that consists of statements, functions, classes and many more. One of the most important tools for any python programmer is the Python Interpreter.

Python Interpreter basically reads and executes the code written by the programmer on a text editor line by line. Why do we need it? Because the interpreter reads the code and then converts it into bytecode. Bytecode is a compiled version of your code. The PVM then interprets bytecode to a binary language in which only the computer can interpret into something useful. The hardware runs the binary language which turns into an output. In summary python code cannot run or function or it will be just a block of text that does nothing if we do not have an interpreter.

Here is a summary flow:

Creating a virtual environment to run your python code:

Virtual environment is an environment that allows users to install all python dependencies. Why do we need it? It allows the user to work on a project without directly affecting the global python and other projects in your system. It’s basically putting one project in a room and the user being able to work on the one room without affecting the whole house or other rooms. Think of it like an isolated environment to prevent infection of a contagious disease.

The user can type “pipenv install” in their terminal to install all the dependencies and create the virtual environment initially. That means that the room was just built waiting for the isolation to happen. The user only needs to do this once per project. The dependencies are installed or built at the same time. That doesn't mean that the user is in an isolated room yet. The user then needs to type “pipenv shell” to get inside that functioning isolated room to work. This means the user now has the key to enter that isolated room and cannot infect other rooms or the house with the disease.

Sources:
python.org
wikipedia
Phase 3 lecture

Second Phase - React

Janine — Fri, 01 Nov 2024 13:44:53 +0000

Starting the second phase of school marks an exciting and an emotional roller coaster again. I was anxious as we transitioned into the next phase. I did not feel 100% ready. The question is, will I ever feel ready? Flatiron has given me enough material to be a master of the craft, very grateful for that. However I do not feel like a master of that phase 1. I was not satisfied with my own skills. I do know, however, that the only way to master anything is time and practice over and over again. I have come to the realization that I may have been too hard on myself on not being a master for 3 weeks. I will definitely use this as a motivation to be a better coder in the future, and I will try not to be too hard on myself and knowing I will have plenty of time to practice after the school ends. As the second phase starts, I welcomed it with a better mindset, knowing that mastering takes time. I entered the second phase with excitement and anxiety as I was not at all familiar with React beforehand. Here are some of the things I have learned in the first week of phase 2.

React

React is a popular JavaScript library developed by Facebook for building user interfaces, also known as “UI”. It allows developers to create reusable UI components that efficiently update and render as data changes. React is a library that renders UI using components, and everything the user sees in their web applications can be broken down into components. This allows it to enhance performance and user experience. React is widely used for both web and mobile app development.

Components

Components, according to the React website, are isolated pieces of UI, and is a JavaScript function that you can use to add dynamic HTML. The developer can make components made up of a single button or a header, or a sidebar, or the body, or even the whole web page. Components are this amazing broken down structure, that can be reused and nested, that lets you organize the data flow.

How are components linked to each other?

Components are stored in separate “js” or “jsx” files. For React to know that they are all interconnected to each other, they need to know each other's presence, by “import” and “export” components. You can do that with simple steps:

Make a new file for one component, under the component folder ex: “ComponentName.js”
Export your component from that file, by writing: “export default ComponentName”.
Import that file to where it is going to be used, most of the time it gets imported on the parent file

A file can only have one default export, but it can have numerous named exports!
Parent file name is “Parent.js”, and needs access to the component
In “Parent.js”, we will write “import ComponentName from “./components”

How do components communicate with each other?

Components communicate with each other using props. A parent component can pass information to its child or children by giving them props. Props are equivalent to HTML attributes attached to tags. Props can be dynamic information, the values can be string, objects, arrays or functions.
Example:

Value: <div value="Header"> .... </div>
Array: <ComponentName value={[1, 2, 3, 4, 5]} />
Object: <ComponentName2 value={{key1: value1, key2: value2}} /> 
Function: <button onClick={handleClick}> .. </button>

For more information visit my source website
Sources: https://react.dev/

First Week At My Boot Camp

Janine — Thu, 10 Oct 2024 22:57:50 +0000

Stepping into the world of coding, I thought would be opening a different world of possibilities. It did. But in my head I felt like I was thrown into the ocean not knowing how to swim. A bit dramatic, aren’t I? For reference my background was health care. I was not technically a first responder, but had a very important role anyhow. Prior to starting the boot camp that I am currently enrolled in, we were instructed to finish a pre-work course which consisted of about 40-60 hours of lecture and lab, and I finished it a week or so before the first day of class.

I thought that had prepared me from the ocean that I was about to embark on. I was excited, nervous, giddy that I would be learning more information. I had my laptop ready, cup of tea next to me, and an emergency coffee on standby just in case, eager to face the day. I guess I did forget how a first day in school feels. It has been 10 years plus since I have been in school. Gosh, do I feel old writing that. I felt happy, eager, lost, confused, and anxious all at the same time.

It has been exactly 5 days since I started my boot camp school. I still feel all the emotions everyday. Up and down, right and left, making circles, what a rollercoaster the first week feels. What got me through the lows, was making myself a cheat sheet. I would like to share some parts of the cheat sheet that I made as I went through the course and labs in this first week. Comment if you need any clarifications or anything to improve my cheat sheet!

I think I've learnt a huge amount in a very short amount of time, hopefully this blog helps somebody going through the same situation, you're not alone, you've got this!

JavaScript Basics:

Variables
- they store values, ex: const variableName = “This is a string.”

Variable	Re-assignable?	Scope:	Use it?
let	yes	block-scoped	yes
const	no	block-scoped	yes
var	yes	Global or function	Avoid it!

Data types

Number
String
Boolean
Object
Undefined
Null
BigInt
Symbol

Functions

1. Function Declarations

function addition(number1, number2) { return number1 + number2; } addition(5, 10); Expected return: 15

2. Function Expressions

const sum = function addition(number1, number2) { return number1 + number2; } console.log(sum(5, 10)); Expected return: 15

3. Arrow functions

cons sum = (number1, number2) => number1 + number2; sum(5, 10); Expected return: 15

source: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

DOM / HMTL

The DOM, Document Object Model, is a way of representing a document as a series of nodes, and defines the interface for interacting with those nodes. HTML, HyperText Markup Language, is used to create a representation of the DOM that then can be modified by javascript, using the APIs defined by the DOM.