DEV Community: Marco Upia

Shifting to Flutter to build a social media app with no experience

Marco Upia — Fri, 16 Feb 2024 07:20:29 +0000

Introduction:
Switching from Python and JavaScript to Dart and Flutter for my social media app was actually pretty fun and I learned a lot! There were a lot of challenges and stressful days but I'm glad I stuck with it.

Embracing the Unknown:
When I started learning Dart's syntax and Flutter's widget-based architecture, I was a bit scared at first. Shifting from Python's easy-to-read code to Dart's strict typing system was a significant change for me. But then I realized that Dart's simplicity and Flutter's expressive UI framework could actually make my coding process a lot smoother.

The Learning Curve:
I had to put in a lot of effort to learn Dart and Flutter. I spent hours reading documentation, asking chatGPT, and watching tutorial videos on YouTube. It was tough, but with time and practice, I got better at using Dart's features and Flutter's widgets. And can only improve with time

Overcoming Challenges:
Managing state in Flutter's reactive framework was a difficult challenge for me. It took some time to wrap my head around concepts like setState(), Provider, and Bloc. But, with every obstacle I overcame, I gained a deeper understanding of Flutter's state management solutions, and how they help in building scalable applications. It really mostly like react and that helped a ton since I had experience.

The Rewards of Adaptation:
Looking back at my journey, I realized that taking risks and trying new things has been super important for my growth. By challenging myself and doing things outside of my comfort zone, I've learned so much about modern app development and have gained a ton of new skills. These experiences have not only helped me successfully complete my social media app project, but also made me feel more confident and resilient as a programmer.

Conclusion:
In just three weeks, I totally transformed my programming skills from Python and JavaScript to Dart and Flutter. It was quite a journey, but I persevered, stayed curious, and was open to new experiences. And you know what? It opened up a whole new world of possibilities in app development for me! As I look ahead to new projects, I'm excited to continue learning and growing, and applying everything I've learned to innovate and explore in the ever-changing tech landscape.

Starting with Flask and SQLAlchemy: A Beginner's Guide

Marco Upia — Sun, 11 Feb 2024 17:10:47 +0000

Are you just getting started with Python and interested in creating web projects? Well, have I got the perfect solution for you! Let me introduce you to Flask and SQLAlchemy - a dynamic duo that makes web development in Python super easy, even for beginners like you!

Flask: The Friendly Web Framework
Flask is a web application development framework that simplifies the process of creating web applications, much like a good friend who always has your back. It's a lightweight and easy-to-understand framework that follows the "micro-framework" principle. This means that it provides you with only the necessary tools to get started without overwhelming you with unnecessary features.

Setting Up Your Flask App
To create a Flask app, you need to install Flask first. To do this, open your terminal and type:

pip install Flask

Now, let's build a simple "Hello, Flask!" app:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_flask():
    return 'Hello, Flask!'

Here, we've created a minimal Flask app. The @app.route('/') decorator tells Flask that when someone visits the root URL ('/'), it should execute the hello_flask function, which simply returns 'Hello, Flask!'.

Run your app with:

python your_app_name.py

Open your browser and navigate to http://localhost:5000. Congratulations! You have just created your first Flask app.

SQLAlchemy: The Pythonic Database Toolkit
Let's discuss SQLAlchemy. If Flask is the buddy who assists you in constructing the framework, then SQLAlchemy is the expert who handles your database. It streamlines database interactions and provides a Pythonic interface, making it feel like you're working with Python, not intricate SQL queries.

Setting Up Your Database
First, install SQLAlchemy:

pip install Flask-SQLAlchemy

Now, let's integrate SQLAlchemy into our Flask app. We'll use an SQLite database for starter:

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'  # Using SQLite database
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=True, nullable=False)

# Run this in your terminal to create the database
# python
# >>> from your_app_name import db
# >>> db.create_all()

In this example, we've created a simple User model with an id and a username. SQLAlchemy helps us define our database structure using Python classes.

Connecting Flask and SQLAlchemy
Now, let's update our Flask app to use SQLAlchemy:

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
db = SQLAlchemy(app)

@app.route('/')
def home():
    users = User.query.all()
    return render_template('home.html', users=users)

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

This Flask app uses SQLAlchemy to query all users from the database and passes them to a template (we'll create a simple 'home.html' file). The render_template function allows us to display dynamic content in our HTML.

Conclusion
Great job! You've taken your first steps into the world of Flask and SQLAlchemy. As you continue to explore, you'll discover the true potential of these tools in building dynamic and scalable web applications. Keep in mind that the best way to learn is by doing, so don't hesitate to experiment and work on your own projects.

Introduction to Object-Oriented Programming (OOP) in Python: Simplified

Marco Upia — Sun, 04 Feb 2024 11:57:06 +0000

If you're diving into the world of Python, you've probably come across the term "Object-Oriented Programming" or OOP. Don't let the fancy name intimidate you – it's just a way of organizing and structuring your code to make it more manageable and reusable.

So what are Objects in programming?

Objects are the basic building blocks of OOP in Python. An object is a package of functionality that does a specific job. It combines data (variables) and functions (methods) that operate on that data.

To explain further, an object is like a bundle of tools that has all the necessary information to perform a particular task. For example, an object could be a calculator that adds or subtracts numbers.

Overall, objects are essential to OOP in Python because they allow the programmer to create self-contained code with a clear purpose.

Let's break it down with a real-world analogy: imagine you have a car. The car is your object. Now, this car has attributes like color, model, and speed (data), and it can perform actions like accelerating, braking, and honking (methods). In Python, we create objects to represent things and actions, making our code more organized and easier to understand.

Classes: The Blueprint for Objects

In Python, we use classes to create objects. A class is like a blueprint or a template for creating objects. Going back to our car analogy, if the car is an object, the class is the plan that defines how the car should look and what it should be able to do.

Here, we defined a Car class with attributes (color and model) and methods (accelerate and brake). Then, we created an actual car object named my_car based on that class.

Encapsulation, Inheritance, and Polymorphism (Oh My!)

OOP introduces three key concepts that make our code even more powerful:

Encapsulation: It's like putting your code in a protective bubble. We group related data and methods in a class, and then we can hide the internal details. This helps prevent accidental interference and makes our code more modular.
Inheritance: Imagine you have a super cool class, and you want to create a slightly modified version of it. Instead of starting from scratch, you can use inheritance. It allows a new class (the child) to inherit the attributes and methods of an existing class (the parent). It's like building on top of what you already have.
Polymorphism: This is a big word for a simple concept. It means that different objects can use the same method name, but they might do different things. It's like ordering coffee at different cafes – you ask for a "latte," and each place makes it a bit differently.

Bringing It All Together

OOP in Python is all about making your code more organized, reusable, and easier to understand. Classes and objects help you model real-world scenarios, and concepts like encapsulation, inheritance, and polymorphism add flexibility and efficiency to your code.

As you continue your Python journey, don't be afraid to experiment with OOP. The more you play around with classes and objects, the more comfortable and powerful your code will become.

Starting in React: What are props?

Marco Upia — Mon, 11 Dec 2023 03:24:07 +0000

Introduction to React.js

React.js, a JavaScript library developed and maintained by Facebook since 2011, is a powerful tool for building single-page applications. One of its key features is Props, short for Properties, which plays a vital role in enhancing communication between different components within a React application.

The Power of Props

Props are essentially a mechanism for passing data from one component to another. Components, the building blocks of React applications, can efficiently share information by utilizing props. What makes props particularly robust is their read-only nature, meaning that once data is passed to a component via props, it cannot be altered. This not only enhances security but also contributes to better performance.

Reusable Data with Props

Props empower developers to reuse data among different components, creating a modular and maintainable codebase. Typically, the component using the props value is the child of the component containing it. This hierarchical structure ensures effective data flow and facilitates the creation of more complex and dynamic applications.

Immutable Nature for Stability

The read-only characteristic of props adds a layer of stability to the React application. Since props cannot be modified within the component, it minimizes unexpected changes and enhances predictability in the application's behavior. This immutability is particularly advantageous when dealing with data that should remain constant throughout the component's lifecycle.

Props vs. State: A Distinction

While props are excellent for passing and displaying unchanging data, React provides another mechanism called hooks for managing state. For dynamic data that requires regular updates, developers leverage hooks like the state hook. This clear distinction between props and state ensures that React developers can efficiently manage both static and dynamic aspects of their applications.

Mastering Props for Effective Communication

Although props are relatively simple to grasp, mastering them is essential for creating a dynamic React application with a stable and reusable codebase. The effective use of props allows developers to establish seamless communication between components, leading to a more modular and maintainable architecture.

Conclusion

In conclusion, React Props serve as a fundamental building block for effective communication between components in a React application. Their read-only nature, combined with the ability to pass and reuse data, contributes to the creation of modular and stable code. While the basics of props are easy to learn, becoming proficient in their usage is a crucial skill for any React developer. By harnessing the power of props, developers can unlock the full potential of React and build applications that are both dynamic and maintainable.

Starting in Javascript: The DOM

Marco Upia — Thu, 16 Nov 2023 17:15:33 +0000

Hello everyone,

My name is Marco Upia and I am an aspiring software engineer. Currently, I am enrolled in the Flatiron BootCamp course to pursue this career path. Although I had been wanting to switch to this field for a while, I finally mustered up the courage to take a deep dive into it and start the learning process.

A bit of backstory before pursuing software engineering, I worked various odd part-time jobs. My most recent job was as a full-time manager at a popular Japanese restaurant where I learned valuable skills such as managing and operating an establishment. However, after reflecting on my career goals, I realized that software engineering is where my passion lies. This realization led me to enroll in this boot camp, and I am excited to see where this journey takes me.

Now on to the main topic of this blog, The DOM! What is the DOM? Talking about this is more so for my understanding making sure I have a grasp of this particular concept of web development. The DOM is short for Document Object Model and it is a web API, I suppose I should also go over very quickly what an API is. I say very quickly because my understanding of an API is very recent and not too technical. An API stands for application programming interface it's a way for two programs or more to communicate with each other and the API is the middle-man.

The DOM is an API and what does that mean, meaning the DOM is are middle-man. Now what does DOM help us communicate with, when it comes to web development nowadays it requires HTML, CSS, and Javascript to have interactive and responsive webpages, it's vital these three can communicate with each other. To do so the DOM would load the HTML into its Document structure to display it like a tree which allows us to manipulate it with Javascript and CSS.

The DOM is a tree? What does it mean to display the contents of HTML into a tree, is that starting with the HTML tag as the top or in this case the root of a tree and every other HTML element branching out like a tree would. So in essence it would be an upsidedown tree structure (refer to the image). Now the HTML tags themselves have a different name and well most of the document model is structured like this called nodes.

Nodes are everything from the whole page to the smallest element. The body, headers, paragraphs, and image elements to name a few are all nodes. Starting from the HTML considered the root Node and branching out into other Nodes having a parent-child relationship.

Manipulation! Now that we have a sense of the DOM, Developers can interact with the DOM using programming languages like JavaScript. This allows them to access, modify, delete, or add elements and content dynamically. And by dynamically we mean the page doesn't have to reload and all the changes happen in front of the user in real-time. For example, changing the text of a paragraph or adding a new element to the page can be done using DOM manipulation.

An understanding of the DOM is important for developers to make webpages interactive otherwise the end user would just see a plain webpage full of text with barely any user input. Think of it as a bridge between the structure of a web page and the programming code.

This guide was simply to offer a beginner's introduction to the DOM. However, it's important to continue learning to fully grasp its concepts. Mastery of the DOM is essential for any developer.

With that, I leave you till the next blog!