DEV Community: Joseph

Phase 4 at Flatiron (Flask)

Joseph — Sun, 10 Mar 2024 03:52:38 +0000

Phase 4 intro (Models, Relationships, & Routing):
During Phase 4 at Flatiron, I delved into the intricacies of Flask, a Python web framework known for its simplicity and flexibility. One of the fundamental concepts we explored was the concept of models, which are essentially representations of the data structure within the application. Models serve as blueprints for creating and manipulating data, allowing developers to define attributes and behaviors associated with different entities.

Additionally, we delved into understanding relationships within Flask applications. These relationships define how different models interact with each other and are crucial for establishing connections between various data entities. Whether it's a one-to-one, one-to-many, or many-to-many relationship, understanding these associations is essential for designing efficient data architectures.

Furthermore, we delved into the concept of routing, which plays a pivotal role in directing incoming requests to the appropriate handlers or views within the application. Routing in Flask involves mapping URLs to specific functions or methods, enabling the application to respond to client requests effectively.

Building an ORM example:
When developing complex applications, especially those involving user interactions and content management, organizing data efficiently becomes paramount. In such scenarios, relational databases shine, and SQLAlchemy, a popular ORM (Object-Relational Mapping) library for Python, offers robust tools for managing these relationships. In this blog post, we'll explore the construction of a multi-entity relationship model using SQLAlchemy, focusing on a gaming platform example.

Let's consider a scenario where users can rate and review games across different platforms. We'll model this scenario using SQLAlchemy's declarative base and define the following entities: User, Game, Rating, Genre, GameGenre, Platform, and GamePlatform.

Here's a brief overview of the relationships:

⦁ User can rate multiple Game instances.
⦁ Game can have multiple ratings from different Users.
⦁ Game can belong to multiple Genres, and each Genre can have multiple associated Games.
⦁ Game can be available on multiple Platforms, and each Platform can host multiple Games.
By utilizing SQLAlchemy's relationship constructs and association proxies, we establish these complex relationships seamlessly. For instance, in the User model, we define a one-to-many relationship with Rating, representing each user's ratings. Similarly, Game has a one-to-many relationship with Rating to capture multiple ratings for each game.

Moreover, we establish many-to-many relationships between Game and Genre, as well as between Game and Platform, using association tables GameGenre and GamePlatform, respectively. This allows games to belong to multiple genres and platforms, and vice versa.

Using serialize_rules, we can specify serialization rules for each entity, ensuring that the serialization process handles complex relationships appropriately and avoids circular dependencies.

Wrap-up:
In conclusion, SQLAlchemy provides a powerful toolkit for modeling complex relationships in relational databases. My journey with Flask during Phase 4 at Flatiron was not just about learning a web framework; it was about understanding the core concepts that underpin web development. By grasping the concepts of models, relationships, and routing, I gained a solid foundation for building dynamic and scalable web applications using Flask. By leveraging its capabilities, developers can efficiently manage and query data across multiple entities, making it an invaluable tool for building sophisticated applications

Phase 3 at Flatiron (Python)

Joseph — Sat, 17 Feb 2024 02:29:04 +0000

Phase 3 intro:
As I embark on Phase 3 of learning journey, Python takes center stage, opening doors to a realm of new possibilities. Exploring Python has been an intriguing endeavor, marked by a notable shift in our approach to code testing compared to our experiences with JavaScript. Unlike the immediate visual feedback of front-end languages like JavaScript, Python's testing process predominantly unfolds within the confines of the terminal, demanding a deeper dive into understanding code execution and behavior.

Throughout my exploration of Python, I've delved into a plethora of concepts, each offering unique insights and challenges. From grasping the fundamentals of Classes & Instances to unraveling the intricacies of Object Relations and mastering the elegance of List Comprehension, my journey has been rich with discovery and growth. These foundational pillars form the bedrock of Python proficiency, empowering us to architect solutions with clarity and precision.

Diving more into Object Relations & List Comprehension:
Python's object-oriented nature empowers developers to create complex systems with ease. Understanding object relations is fundamental for effective programming. In this blog post, we delve into object relations in Python, showcasing the elegance and efficiency of list comprehensions in managing and manipulating object collections.

Understanding Object Relations:
Object-oriented programming revolves around the concept of classes and objects. Objects interact with each other through methods and attributes, forming relationships. These relationships can be one-to-one, one-to-many, or many-to-many. Python's simplicity and flexibility make it an ideal language for modeling these relationships.

List Comprehensions:
List comprehensions are a concise and expressive way to create lists in Python. They offer a compact syntax for generating lists from iterables, making code more readable and efficient. Leveraging list comprehensions in conjunction with object relations can streamline operations and enhance code clarity.

Example Scenario:
Consider a scenario where we have two classes, Student and Course, representing a student and the courses they are enrolled in, respectively. Each student can be enrolled in multiple courses, and each course can have multiple students. Let's explore how we can manage these object relations using list comprehensions.

In this example, we define classes for Student and Course, each with appropriate methods to manage object relations. We use list comprehensions to extract relevant information, such as retrieving all students enrolled in a course or all courses taken by a student.

Benefits of List Comprehensions:
List comprehensions offer several benefits when working with object relations:

Conciseness: List comprehensions allow us to perform operations on object collections in a single line of code, reducing verbosity and improving readability.
Efficiency: By leveraging list comprehensions, we can perform filtering, mapping, and transformation operations efficiently, optimizing code performance.
Readability: List comprehensions express intent clearly, making it easier for other developers to understand and maintain the codebase.
Flexibility: List comprehensions support conditional expressions, enabling us to filter and transform data based on specific criteria.

Conclusion:
Object relations are essential in object-oriented programming, and Python provides powerful tools like list comprehensions to manage them effectively. By combining object-oriented principles with list comprehensions, developers can write concise, readable code that efficiently handles complex relationships between objects. Mastering these techniques empowers developers to build robust and maintainable applications in Python.

Phase 2 at Flatiron (React)

Joseph — Fri, 26 Jan 2024 21:42:03 +0000

Phase 2 intro:

In the initial stages of phase 2, the curriculum retained a similar structure as phase 1 without the orientation and as we were learning about the intricacies React. The first week proved to be more manageable compared to phase 1, due to a foundational understanding of JavaScript and Flatiron's methodology. The content was easier to grasp, given that React served as a powerful framework/library for JavaScript.

Weeks 2 & 3 were about the same, using week 2 to practice and apply everything we learned such as: Components, Props, States, and etc. Then we were assigned to make another website for the last week of phase 2, this time utilizing React. Some of the requirements were to include at least 5 components, 3 routes, & fetch from a JSON server with a resting API. This project not only solidified our understanding of React but also presented an opportunity to showcase our skills in building dynamic and interactive web application.

Setting up a Form Component:

One of the things I found out was the difference of making a form with and without React. Without it, form elements are traditionally set up directly through HTML. Contrastingly, React introduces additional steps into making a form. The process starts with creating a dedicated component that will serve as the form container, exemplified below in an excerpt from my React project.

1. Handling Form State with useState:

Use the 'useState' hook, which is a fundamental aspect of React that empowers components to manage state. In the Form component below, we utilize the 'useState' to track the form values dynamically. Each input field, such as "name," "genre," and "image", is associated with a state variable within the 'formValues' object. The 'setFormValue' function is then employed to update these values in response to user input.

2. Input Elements and Controlled Components:
In React, form elements are transformed into controlled components. Each input field is associated with a piece of state ('formData') and updates its value based on the state.

3. Handling Form Submission:

Upon submitting the form, the 'handleSubmit' function orchestrates multiple tasks. Firstly, we add the 'e.preventDefault()' to prevent the default form submission behavior in order to avoid a page reload. Next, it updates the 'videoGames' state (which is being passed from the parent component) with the new game by spreading the existing array and appending the current 'formValues'. The 'setFormValues' function is then called to reset the form to its initial state.

4. Integrating with the Backend:

To ensure the longevity of our game data, we incorporate a fetch request to the backend API (). This POST request includes the serialized JSON representation of 'formValues'. Upon a successful response, the 'updateGames' function (which is also being passed from the parent component) is invoked to synchronize the application state with the latest data that is being fetched.

Conclusion:

This new form component showcases the seamless integration of React's state management and API communication, providing a robust foundation for handling user input and persisting data. This implementation not only ensures a smooth user experience but also lays the groundwork for scalability for future projects.

Phase 1 at Flatiron (JavaScript)

Joseph — Sat, 06 Jan 2024 00:21:04 +0000

Phase 1 quick summary:

The start of my first phase at Flatiron School has been quite the experience. The first week was overwhelming to say the least due to the amount of JavaScript that we had to learn in such a short period of time.

Then during the second week, everything started to click as we were applying the concepts such as arrays, objects, functions, etc. into our practice labs.

Going into the 3rd week, working on the website project was an exciting challenge that tested me on what I learned with JavaScript and CSS and being able to create a functional website, made it all the worthwhile.

What I learned:
Within my phase-1 experience, there were many different concepts that I learned within JavaScript and CSS. Below is one thing I have learned that I felt what was most intriguing and stood out during my journey through JavaScript for phase-1.

.addEventListener():

One of the most useful codes that I have learned has involved using an .addEventListener(). This form of method uses an "event", which will then trigger a callback function or object. When the event is used, then it will perform the action that the developer intended. Some of the events that are used for event listeners are submit, click, etc. As most users would recognize from some of the example events, submit would be the event that is using information a user enters in a form and is submitted. Click occurs when a user clicks an element within the webpage, like clicking a link within the webpage and being sent to the link that has been clicked.

For example:

Through the example from my phase-1 project with an event listener, this event listener will submit a new form adding a new character into the array of current characters for our website.
We start with a variable in order to target the form. Then we use that variable and add the .addEventListener(). Within the event listener, we used the "submit" event and added a function that targets "e". The e.preventDefault() is placed for "submit" events in order for the page to not refresh.

Then we create another variable for the new character that needs to be added an create an array with objects with the information of the character. After, we make a new array by putting the new character before the existing characters from the API with spread syntax. The newCharacter variable is placed into our renderCharacters function, which the function will show the information for our new character in our website.

Wrap-up:

Just from this one example, it shows how important event listeners are for the daily user experience with simple tasks. Such as submitting information for creating an account or clicking on images/links to access more information.