DEV Community: Pedro Alarcon

React- Flask Communication

Pedro Alarcon — Mon, 17 Jun 2024 16:28:03 +0000

Introduction

In modern web development, applications are often divided into two main parts: the frontend and the backend. Understanding how these two components communicate is crucial for creating dynamic and interactive web applications. Today we will talk about the Frontend Using React and the Backend using Flask.
For a web application to function, the frontend and backend must communicate effectively.

Frontend

The frontend, also known as the client-side, is the part of a web application that users interact with directly. It includes everything that users experience in their web browser, such as:

User Interface (UI) : The layout, buttons, forms, and other visual elements.
Client-Side Logic : Code that runs in the browser, typically written in JavaScript, along with libraries or frameworks like React
Styling : CSS and frameworks like Bootstrap that ensure the application looks good across different devices and screen sizes.

Backend

The backend, or server-side, is the part of the application that runs on the server. It is responsible for:

Database Management : Storing, retrieving, and updating data.
Business Logic : The rules and operations that define how data can be manipulated and transformed.
Server Configuration : Handling server setup, routing, and ensuring the application runs smoothly.

Setting up Backend using SQLite

Creating Model- Table

Let's start off by creating a model Called Animal and then create the tablename animals. We will create some columns and give them certain attributes like id (Integer), name (String), species (String) and age (Integer).

id: This is the primary key of the table. It's an integer that uniquely identifies each row.
name: This is a string column with a maximum length of 100 characters. The nullable=False argument means that this field cannot be null.
species: Similar to name, this is a string column with a maximum length of 100 characters and cannot be null.
age: This is an integer column that cannot be null.
repr Method: This method defines how the Animal object is represented as a string, which is useful for debugging. When you print an Animal object, it will display its id, name, species, and age in a readable format.

After running

flask db init
flask db migrate -m "initial migration"
flask db upgrade head

It should appear in database and now we can focus on the backend route and work on the CRUD sequences. Lets say for example we already seeded the database and our tables are now filled.

Creating Backend route

Here we Set up the backend route in a file called app.py.

AnimalList handles GET and POST requests for listing and creating animals
GET method retrieves all animals and returns them as JSON.
POST method creates a new animal based on JSON data and returns the created animal as JSON.

Api Setup

The AnimalList resource is added to the Flask-RESTful API at the endpoint /animals. This setup provides a basic yet functional CRUD API for managing animals, suitable for integration into a larger Flask application. Adjustments can be made based on specific project requirements and additional features can be added as needed.

Setting up Frontend using react

Create a file

Now that we have setup the Backend when we move to the client side, we use a React component to fetch and display the data. The component will make an HTTP GET request to the /animals endpoint when it mounts.

The useEffect hook is used to perform side effects, in this case, fetching data from the backend. The empty dependency array ([]) ensures that this effect runs only once when the component mounts.

Component Initialization :

When the AnimalList component is first rendered, it initializes its state using the useState hook. The animals state will hold the fetched data, loading indicates if the data is being fetched, and error will store any errors that occur during the fetch.

Effect Hook to Fetch Data :

The useEffect hook is used to perform side effects, in this case, fetching data from the backend. The empty dependency array ([]) ensures that this effect runs only once when the component mounts.

Fetching Data :

The fetch('/animals') function sends a GET request to the /animals endpoint of the backend.
The then(response => {...}) block checks if the response is okay (status code 200-299). If not, it throws an error.
If the response is okay, it converts the response body to JSON using response.json().
The second then(data => {...}) block takes the parsed JSON data (the list of animals) and updates the animals state. It also sets loading to false since the data has been successfully fetched.

Error Handling :

If any error occurs during the fetch operation, the catch(error => {...}) block catches the error, updates the error state with the error message, and sets loading to false.

Rendering the Component :

While the data is being fetched (loading is true), a loading message is displayed.

If an error occurs (error is not null), an error message is displayed.

If the data is successfully fetched (loading is false and error is null), the component maps over the animals array and renders a list of animals.

Summary

We demonstrated how to connect a Flask backend with a React frontend for managing a list of animals. We started by setting up the Flask backend, defining a simple Animal model with SQLAlchemy, and creating RESTful API endpoints to retrieve and add animals. On the frontend, we developed a React component that fetches and displays the list of animals from the backend. Using the useEffect hook, the component makes an HTTP GET request to the "/animals" endpoint, processing the response, and updates the component's state with the fetched data while managing loading and error states. This setup allows for seamless communication between the backend and frontend, providing a robust and interactive user experience for managing animal data.

Resources

Relationships In Python

Pedro Alarcon — Mon, 20 May 2024 20:17:28 +0000

Introduction

As developers, mastering the use of table relations in Python is crucial for creating robust and efficient database systems. Table relations enable us to define connections and dependencies between tables, facilitating seamless data organization and retrieval. Relationships help maintain data integrity and consistency by ensuring that data in related tables remain synchronized. Relationships support the implementation of complex application logic that involves multiple data entities. For instance understanding
one-to-one, one-to-many and many-to-many.

Types of Relationships

In database design, understanding different types of relationships is essential for structuring data effectively. Here are some of the primary types of relationships:

One-to-One Relationship:
A type of relationship between objects where one object in table A is connected to one and only one object in table B.
Example: Each librarian has one profile and vice versa.

One-to-Many Relationship:
A type of relationship between objects where one object in table A is connected to multiple objects in table B.
Example : An author can write multiple books, but each book is written by only one author.

Many-to-Many Relationship:
A type of relationship between objects where multiple objects in table A are connected to multiple objects in table B.
Example : A member can borrow multiple books, and a book can be borrowed by multiple members.

Here is an example that will show all three relationships and how they interact in a database called "Library.db" with an explanation :

Association Table for Many-to-Many Relationship
The borrows table is an association table used to establish a many-to-many relationship between Member and Book entities. Many-to-many relationships in SQLAlchemy use intermediaries called association tables (also called join tables). These are tables that exist only to join two related tables together.

One-to-One Relationship

A one-to-one relationship is established between Librarian and Profile. Each Librarian has one Profile. The uselist=False argument indicates a one-to-one relationship. Each Profile is linked to one Librarian. The back_populates argument ensures that the relationship is bidirectional, allowing access from both sides. A one-to-one relationship is also called a "has one/belongs to" relationship. With a one-to-one relationship, you will pick one model to be on the "belongs to" side of the relationship (you can pick either model). The model on the "belongs to" side will store the foreign key.

One-to-Many Relationship

A one-to-many relationship is defined between Author and Book. Each Author can write multiple Books and Each Book is written by one Author. The back_populates argument makes the relationship bidirectional, so Author can access its books and each Book can access its author.

Many-to-Many Relationship

A many-to-many relationship is established between Member and Book through the borrows association table. Each Book can be borrowed by multiple Members and Each Member can borrow multiple Books. The secondary=borrows argument specifies that the relationship is mediated by the borrows table, while back_populates ensures the relationship is bidirectional.

Foreign Keys

As you can tell from the examples above we notice there are some columns that say id as well as some columns referencing other tables, But what exactly are foreign keys and why are they important when creating tables? A foreign key is a relational concept used to establish a connection between two tables in a database. It essentially creates a link between a column or set of columns in one table to a column or set of columns in another table. They also enforce referential integrity, ensuring that relationships between tables remain valid. As well as indicating the relationships between tables and even help developers understand the structure of the database and how data is interconnected.

In the example above:

Parent is the parent table with a primary key id.
Child is the child table with its own primary key and a foreign key parent_id, which references the id column of the Parent table.
The relationship() function establishes a bidirectional relationship between Parent and Child, allowing easy navigation between associated records.

Overall foreign keys play a crucial role in maintaining data integrity, enforcing relationships between tables, optimizing queries, and ensuring data consistency in relational databases.

Conclusion

Understanding how tables relate in Python is really important for developers who want to build good database systems. If developers know the different kinds of relationships between tables, they can organize their databases well to match real-life situations. This helps keep data correct and consistent. Foreign keys are key to making sure these relationships are set up and enforced properly. By using foreign keys well, developers can create database systems that work really well and handle lots of information. Having a thorough comprehension of table relations, coupled with the strategic use of foreign keys, enables developers to design and implement database systems that are both complex and efficient.

Intro to Python

Pedro Alarcon — Thu, 02 May 2024 03:36:47 +0000

INTRODUCTION

So what exactly is Python and what does it do? Python is one of the more popular programming languages, and was created by Guido Van Rossum, and released in 1991. The main uses for using Python is web development (server-side), software development, mathematics, system scripting. Python is a very high-level, general-purpose programming language. Its design philosophy really emphasizes code readability with the use of significant indentation. This helps for navigating through such large chunks of code and understanding what your reading. Like many other programming languages Python has gone through numerous updates since its official release in February 1991. Python claims to strive for a simpler, less-cluttered syntax and grammar while giving developers a choice in their coding methodology, Python embraces a "there should be one—and preferably only one—obvious way to do it." philosophy.

SYNTAX

Python is meant to be one of the more easily readable languages, But what exactly is syntax? The syntax of the Python programming language is the set of rules that defines how a Python program will be written and interpreted. While using indentation, english keywords, and fewer syntactic exceptions. Making writing code more understandable but even easier to remember. Python is even considered one of the more easier programming languages to learn as a new developer. For example lets talk about python indentation which refers to the spaces at the beginning of a code line. Where in other programming languages the indentation in code is for readability only, the indentation in Python is very important. Python uses indentation to indicate a block of code.

This line of code is written correctly, the only thing its missing is indentation. Python will give you an error if you skip the indentation.

So lets fix this, The number of spaces is really up to you as the programmer, the most common use is four, but it has to be at least one.

As you can see in the example above the function was fixed because we implemented indentation. Overall Python's syntax is designed to be clear and easy to understand, which makes it accessible for beginners and reduces the cost of program maintenance. Also Python is executed line by line by the Python interpreter. This makes development so much better for debugging and makes it easier to immediately see the results of your code.

FUNCTIONS

A function is a block of code which only runs when it is called. You can pass data, known as parameters, into a function. A function can return data as a result. To create a function in Python you must define the function using the DEF keyword.

In the example above you can see we declared a function using the def keyword and called the function as well. We can also still write functions taking in parameters.

In this example, the function greet takes one parameter name, which represents the name of the person to greet. When you call the function, you pass a value for the name parameter, and the function prints a greeting using that value.

Object-Oriented Programming

Object-oriented programming (OOP) is a method of structuring a program by bundling related properties and behaviors into individual objects. For example, an object could represent a person with properties like a name, age, and address and behaviors such as walking, talking, breathing, and running. OOP models real-world entities as software objects that have some data associated with them and can perform certain operations. It aims to implement real-world entities like inheritance, polymorphisms, encapsulation, and Abstraction.

Abstraction in Object-Oriented Programming (OOP) is like hiding the complicated stuff and showing only what's important. For example if you have a remote, You don't need to know how all the circuits and buttons inside it work. All you need to know are the buttons you press to change channels, adjust the volume, and turn it on or off. That's abstraction!
Encapsulation in Object-Oriented Programming (OOP) is like putting things in a box and only letting certain people access them. For example encapsulation works similarly. You have a class, which is like the treasure chest, and it contains data (like variables) and methods (like functions) that operate on that data. You "lock" the class by making some parts private, meaning they can only be accessed from within the class itself. Other parts are public, which means they can be accessed from outside the class.
Inheritance in Object-Oriented Programming (OOP) is like passing down traits from parents to children. like creating new classes based on existing ones and the child inherits things from the parent class.
Polymorphism in Object-Oriented Programming (OOP) is like having one name with many forms. For example, both a "Cat" class and a "Dog" class might have a "makeSound()" method. When you call "makeSound()" on a cat object, it meows, and when you call it on a dog object, it barks.

Overall OOP helps you write code that's organized, reusable, and easy to understand. It's like building with Lego blocks, where each block (object) has its own shape, color, and function, and you can combine them to create something bigger and more complex.

Conclusion

Python is a widely used programming language, favored for its simplicity, versatility, and readability. It's syntax, emphasizing code readability with significant indentation, English keywords, and fewer syntactic exceptions, simplifies learning and maintenance. Functions enable encapsulation of code blocks for reusability and organization, while Object-Oriented Programming (OOP) structures programs around objects, facilitating abstraction, encapsulation, inheritance, and polymorphism. Abstraction hides complex details, encapsulation bundles data with methods for controlled access, inheritance promotes code reuse, and polymorphism allows objects of different classes to be treated interchangeably.

Resources

https://en.wikipedia.org/wiki/Python_(programming_language)
https://www.w3schools.com/python/default.asp
https://www.geeksforgeeks.org/python-programming-language/

Components & Props in React

Pedro Alarcon — Mon, 08 Apr 2024 17:45:17 +0000

Introduction To React

For this Blog i will be going over the importance of Components & Props in the world of React. So what exactly is React?? Well React was first introduced back in May 2013. Surpassing other front-end libraries to become the most commonly used library for web development. React is a free and open-source front-end JavaScript library for building user-interfaces(UI) based on components, React organizes UI into reusable components, making it easier to manage and maintain large-scale applications. Very Important to learn early on that React is NOT a programming language. React uses JSX, which is a syntax extension that allows developers to write HTML-like code within JavaScript. JSX is a mix of JavaScript and XML. Having one of the largest ecosystems of libraries, tools, and community support, making it so much easier for developers to build and scale complex applications.

Components Basics

Step 1

Lets create some components to better understand this concept.

From the example above we were able to declare a couple of functions called "Sport,Team, TopThreePlayers". Now i know it seems a bit confusing but lets go over what we see. When using React one of the first things you may notice is that the function names start with a capital and not a lower case. Something else you will learn quickly is that JSX functions can only take in one argument which are usually props. When using functions in react they must have a return statement. React takes in JavaScript code and also interpreting JSX’s special syntax within the return() statement, But now lets utilize then functions so they can have some use.

So with all 3 of the components that were written out by implementing those components within a return statement. We can see that Sport(),Team(), TopThreePlayers() are being used inside the App() return statement. App is our top level component and Sport,Team,TopThreePlayers are lower. If it were to be displayed and turned into HTML App would be the parent and Sport,Team,TopThreePlayers would be the child component.
A quick fun fact: Writing our functions starting off in Capital Letters and not CamelCase is necessary because it helps react differentiate between regular JavaScript and React components and it is a must to follow this syntax in order for React to work properly and render in the components.

Props Basics

React props is short for properties and they are essentially function arguments with some attributes in HTML. In order to send down a props into a component, you must use syntax as HTML attributes. To simplify it they are a way of passing data from parent components to child components, The only way for a parent component to pass data to its child components is via props. They are immutable and are used to communicate between components. Props are similar to function arguments in JavaScript. Fun fact: They can be any data type, for example we can pass "strings, numbers, booleans, object, and functions" as props.

Example:

In the example above the prop has been sent down to the component and receives it. Props are fundamental in using react for passing data down from one component to another. So from the example above in the provided code snippet, a React component named Fruit is defined. This component takes a prop named fruit and renders a message indicating the favorite fruit.

Summary

React, a powerful JavaScript library for building user-interfaces(UI), revolves around the concept of components and props. Components are modular, reusable pieces of code that encapsulate specific UI elements and functionalities. Props, short for properties,They enable customization and configuration of components. By passing props down the component hierarchy, data and behaviors can be efficiently communicated between different parts of the application, enabling seamless interaction and data flow. Components and props promote code organization, reusability, and maintainability, making React a popular choice for developing modern web applications.

Resources

https://legacy.reactjs.org/docs/components-and-props.html
https://react.dev/learn/passing-props-to-a-component
https://www.w3schools.com/react/react_components.asp

Scope in JavaScript??

Pedro Alarcon — Mon, 18 Mar 2024 23:17:42 +0000

Scoping is a fundamental concept to understand when learning to code super early on, why is this? It is because understanding the concept of scopes will ensure you to write more organized code and understanding when and where certain variables can be used and accessed within your code. This ensures that your code is well maintained and is a bug free code. In JavaScript, objects and functions are also variables. Scoping will determine the accessibility of variables, objects, and functions from different parts of the code and where they are located. Here is a simple analogy to understand it a bit more...

Now imagine you're in a big building with many different rooms. The Global Scope is The building's lobby. Everyone in this building can see the lobby, and things placed here can be accessed by anyone in the building.
Now there is a something called a Function Scope where there are specific room's in the building. When you're in a room, you can see and interact with everything inside that room, but you can't see what's in other rooms unless you go into them. Now for the final one which is Block Scope just Imagine you're organizing your stuff in boxes. Each box represents a block scope. When you open a box, you can see and use what's inside it, but you can't access the contents of other boxes unless you open them. Just like in programming scoping in this analogy helps you keep everything organized and prevents mixing up items from different areas. Each scope has its own set of rules and boundaries for what can be accessed. Scope can be better explained and understood by breaking it up to global, local, and block scopes.

Global Scope

The Global Scope in programming refers to the area of a program where variables and functions are accessible from anywhere in the codebase, This means its Accessibility is in every scope and is the outermost scope. The variables and functions declared in the global scope are available to all parts of the program.

In the example above the globalVariable is declared outside of any function or block, making it a global variable. Also The function foo() is able to access the globalVariable even though it's declared outside of the function. This is because globalVariable is in the global scope and can be accessed from anywhere within the program.

Function Scope

The function scope refers to the area within a function where the variables and functions are accessible, any variables declared within the function are now function scoped. Each function creates a new scope. This meaning they are now only visible and accessible within that function. This concept is to ensure no confusion because now that the variables declared within a function do not have any conflict with variables outside of the function.

In the example above localVar is declared inside the foo() function making it a local variable with function scope and also The variable localVar is accessible only within the foo() function. Attempting to access it outside of the function will result in a reference error because it's not defined in the outer scope.

Block Scope

The block scope refers to the area within a block of code where variables are accessible. Any Variables declared inside a { } block cannot be accessed from outside the block.

In the example above the "blockVar" is declared within the if block making it a block-scoped variable, It is inside { } brackets and The variable "blockVar" is accessible only within the if block. Attempting to access it outside of the block will result in a reference error because it's not defined in the outer scope.

Conclusion

Overall Scopes is vital to coding to understanding the visibility and accessibility of variables and functions within a program as well as writing clean, prevent variable conflicts, and organized code. Keep in mind that every function creates its own scope, and any variables or functions you declare inside of the function will not be available outside of it. Always use const and let to declare variable. By understanding and properly utilizing scopes, developers can reduce the likelihood of bugs and improving overall code quality.

Resources

https://www.w3schools.com/js/js_scope.asp
https://developer.mozilla.org/en-US/docs/Glossary/Scope

What are functions???

Pedro Alarcon — Mon, 05 Feb 2024 02:37:33 +0000

Functions??? What are they exactly... the simple explanation is functions are blocks of reusable code that can be called and executed whenever they are needed. Functions must be given a proper set of instructions so they can be used and most importantly a name of what this function will do. Given the type of code you are writing it will be important. Lets get even more simple, functions is to programming the way recipes is to cooking. Just like a recipe tells you how to cook a specific dish, a function will tell the computer how to perform a specific task.

How do i create a function?

Creating a function is actually quite simple. To create a function in JavaScript all you have to do is use the function keyword-> followed by the name of what this function will do-> parentheses for parameters (Parameters are variables that are defined in the function declaration and are used to receive input values when the function is called)-> the return statement is used to specify the value that the function should output-> and curly braces {} to enclose the function body. The example below is a function declaration that adds 2 numbers together.

Now what if we want to test that this function is working properly? Well all we have to do is console.log it. The whole purpose of this function is to add a + b. In order to do this look below at the example.

In this example we used console.log(addNumbers(21, 4)); to get the result of adding a + b. We could use any two numbers not just 21 and 4. Console.log allows us to print display information in the console of a web browser or a Node.js environment. It's a very helpful tool for debugging and understanding how our code is working. Something to get used to because its a tool that will be used a lot. In the example above the result (25) would be displayed in the console bar, By using console.log we can verify that our function is working as expected and see the output of our calculations.

Why are functions so important?

To start off functions are a huge part of writing code and to break it down even more Functions help break down really big and complex programs into smaller, more manageable pieces of code. By dividing our code into functions, we can organize and structure our program's logic, making it easier to read and maintain. Well-named functions with clear purposes can make our code more easy to read and make them self-explanatory. This is important because best believe that depending on the type of code you are writing for your program it will make it a whole lot easier to navigate through it the more neat and in order your code is. A major tip is to never write a huge function that could confuse you, in fact by dividing our code into smaller functions, each function can have a specific responsibility or task, making it easier to read and maintain. Remember the more organized the better!