DEV Community: dillybunn

Final Blog

dillybunn — Mon, 01 Jul 2024 18:03:44 +0000

After 3 months of learning as much about the basics as you can, completing the FlatIron Software Engineering Bootcamp is a great feeling. I was not sure what to expect when I started, but at the end, it is a great feeling. Having a strong foundation for what comes next feels like it sets me up for success in the future.

For my final project, I made a Sales Tracker to help keep you customers organized with a rating system and opportunities. One of the biggest issues when it comes to sales is organization. Knowing where you are at in the process and who you have spoken to is key. To start lets look at some routes.

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { AppProvider } from "./AppContext";
import Dashboard from "./Dashboard";
import Login from "./Login";
import CustomerDetails from "./CustomerDetails";
import SendEmail from "./SendEmail";

function App() {
  return (
    <AppProvider>
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/customers/:id" component={CustomerDetails} />
          <Route path="/send-email" component={SendEmail} />
          <Route path="/" component={Login} />
        </Switch>
      </Router>
    </AppProvider>
  );
}

export default App;

This lays out in a concise and clear way. From log in to your dashboard to being able to send out emails for follow ups.

Being able to keep your data straight by adding or editing is always important.

const handleSalesCallSubmit = (e) => {
    e.preventDefault();

    const url = editSalesCall
      ? `http://localhost:5555/sales_calls/${editSalesCall.id}`
      : `http://localhost:5555/sales_calls`;
    const method = editSalesCall ? "PATCH" : "POST";

    fetch(url, {
      method: method,
      headers: {
        "Content-Type": "application/json",
      },
      credentials: "include",
      body: JSON.stringify({
        ...newSalesCall,
        user_id: customer.user.id,
        customer_id: customer.id,
      }),
    })
      .then((r) => {
        if (!r.ok) {
          throw new Error(`Error: ${r.statusText}`);
        }
        return r.json();
      })
      .then((data) => {
        if (editSalesCall) {
          setSalesCalls((prev) =>
            prev.map((call) => (call.id === data.id ? data : call))
          );
          setEditSalesCall(null);
        } else {
          setSalesCalls((prev) => [...prev, data]);
        }
        setNewSalesCall({ date: "", notes: "", rating_id: "", stage_id: "" });
      })
      .catch((error) => console.error("Error:", error));
  };

The above code allows the user to add and edit sales calls, along with all the relevant data.

Finally something new I learned. Implementing email.

@app.route('/send_email', methods=['POST'])
def send_email():
    data = request.get_json()
    if not data or 'email' not in data or 'subject' not in data or 'body' not in data:
        return jsonify({"error": "Invalid request"}), 400

    msg = Message(
        subject=data['subject'],
        recipients=[data['email']],
        body=data['body'],
        sender=app.config['MAIL_DEFAULT_SENDER']
    )
    try:
        mail.send(msg)
        return jsonify({"message": "Email sent"}), 200
    except Exception as e:
        print(f"Error sending email: {e}")  
        return jsonify({"error": str(e)}), 500

The back end is set up to receive the request to email your customer with updates or quick messages to keep the flow going.

This project spoke to me, as I am about to embark on a new sales role for a company that specializes in VR and software training services for construction and engineering firms. I will always look back fondly on my time spent learning and look forward to constantly pushing my comfort zone and trying new things.

RESTFUL API

dillybunn — Wed, 22 May 2024 19:30:11 +0000

In the fast moving, ever evolving world of web development, optimization is the rule of the land. People want a seamless experience on the web and are all to quick to move on if they are getting the experience they want. Using a RESTFUL API with Flask is a way developers can bring that client experience to meet these expectations while not losing anything on the server side. The combination of improved performance with scalability is the perfect solution to modern day web development.

Using RESTful API is a secure, reliable, and efficient way to transfer information across the internet. Some key principles include: Uniform interface, statelessness, layered system, cache ability, and code on demand. What this means is clients can access and use the resource (the information) they need to complete their task with minimal interruption while still connecting to other authorized intermediaries.

If we wanted to create an app to track baseball players using Flask and a RESTful API we could start by using SQLAlchemy to initiate a database.

class Player(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    position = db.Column(db.String(100), nullable=False)
    team = db.Column(db.String(100), nullable=False)
    stats = db.relationship('Stat', backref='player')

We now have a database that will store players, assigning them an ID, name, position, team and stats. But we want each player to display their stats. So we set up a stat class as well with the following.

class Stat(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    player_id = db.Column(db.Integer, db.ForeignKey('player.id'), nullable=False)
    games_played = db.Column(db.Integer)
    hits = db.Column(db.Integer)
    home_runs = db.Column(db.Integer)

We can now check for each player how many games they have played and how many hits and homeruns they have. This is a great start but now we want to be able to communicate this information to the client so they can use and manipulate it. For that we need to set up some endpoints.

First we want to be able to get all the players from the db.

@app.route('/players', methods=['GET'])
def get_players():
    players = Player.query.all()
    return jsonify([{'id': player.id, 'name': player.name, 'position': player.position, 'team': player.team} for player in players])

Then we might want to look at a specific player. To do that we use the ID we assigned in models, while also adding some error validation.

@app.route('/players/<int:player_id>', methods=['GET'])
def get_player(player_id):
    player = Player.query.get(player_id)
    if player:
        stats = [{'id': stat.id, 'games_played': stat.games_played, 'hits': stat.hits, 'home_runs': stat.home_runs} for stat in player.stats]
        return jsonify({'id': player.id, 'name': player.name, 'position': player.position, 'team': player.team, 'stats': stats})
    else:
        return jsonify({"error": "Player not found"}), 404

While searching for players is useful, what if the client wanted to be able to actually update the data. To do that we need a post request.

@app.route('/players', methods=['POST'])
def create_player():
    data = request.json
    player = Player(name=data['name'], position=data['position'], team=data['team'])
    db.session.add(player)
    db.session.commit()
    return jsonify({'id': player.id, 'name': player.name, 'position': player.position, 'team': player.team}), 201

Great! We created a new player. But how can we update their stats? Say hello to the put request.

@app.route('/players/<int:player_id>', methods=['PUT'])
def update_player(player_id):
    player = Player.query.get(player_id)
    if player:
        data = request.json
        player.name = data.get('name', player.name)
        player.position = data.get('position', player.position)
        player.team = data.get('team', player.team)
        db.session.commit()
        return jsonify({'id': player.id, 'name': player.name, 'position': player.position, 'team': player.team})
    else:
        return jsonify({"error": "Player not found"}), 404

With this, now you can update any player in the db to reflect their stats.

So far we are able to get all players, search for a specific player, add a player and update a player; so no surprise the last bit of code we need is delete player.

@app.route('/players/<int:player_id>', methods=['DELETE'])
def delete_player(player_id):
    player = Player.query.get(player_id)
    if player:
        db.session.delete(player)
        db.session.commit()
        return '', 204
    else:
        return jsonify({"error": "Player not found"}), 404

We now have a very barebones code structure that can track a baseball player and their stats while using RESTful API, SQLAlchemy and Flask. This is a good starting to point to continue to build from.

Object Oriented Programming

dillybunn — Thu, 02 May 2024 13:47:43 +0000

Python as a language offers its users a wide range of uses and benefits, but one of the most important is how it handles objects. It can get confusing, thinking about objects as code and not physically manifested but that is where Object Oriented Programming comes into play.

Object-oriented programming (OOP) is an important programming paradigm that is based on the concept of "objects," which can contain data in the form of fields (attributes or properties) and code in the form of procedures (methods). OOP focuses on creating reusable and modular code, which can lead to more efficient and maintainable software.

Now that sounds technical but what does it mean. Simply put, objects in OOP are instances of classes, which define their structure and behavior.

With OOP we can write code that sets up a class and then allows us to update very easily, let's see how.

class Player:
    def __init__(self, name, position, batting_average, home_runs):
        self.name = name
        self.position = position
        self.batting_average = batting_average
        self.home_runs = home_runs
    def update_stats(self, new_batting_average, new_home_runs):
        self.batting_average = new_batting_average
        self.home_runs = new_home_runs
    def display_info(self):
        print(f"Name: {self.name}, Position: {self.position}, Batting Average: {self.batting_average}, Home Runs: {self.home_runs}")

This piece of code sets up a class for a baseball player. It gives us the ability to manipulate the data tied to the player such as name, position, and their stats (batting average, home runs etc.)

Now we can create instances of a player and assign the stats to them and call them to see the attributes.

player1 = Player("Pete Alonso", "First Basemen", 0.250, 20)

print(player1.batting_average) #Output: .250

But OOP is more then just a way to track stats. We can set up our code to make sure we are getting the correct return by making sure it is instance. Homeruns should be a number. How can we make sure that we are getting the right thing back? Simple we use isinstance.

Using our code from before:

player1 = Player("Pete Alonso", "First Basemen", 0.250, 20)

if isinstance(player1.home_runs, int):
     print(f"{player1.name} has hit {player1.homeruns} homeruns")
else:
     print(f"{player1.name},s home_runs attribute is not an integer")

We now know that when trying to do something with Pete Alonso's homerun totals, we will always get back a number.

The advantages of using Python and OOP are multifaceted and go well beyond the basic example we used here today. We can update Pete's stats using def update_stats , we can make sure position players and pitchers have their own separate statistics (I wouldn't expect many pitchers to hit the homeruns!) and we can continue to build this code out to simulate an entire game!

And that is the real strength of OOP. By creating reusable and easy to read code, you start with a strong foundation to build upon, adding in checks and balances to make sure you aren't getting junk information returned back to you. It may be a very basic overview, but even with that small glance, we can see how powerful it really is.

React!

dillybunn — Thu, 11 Apr 2024 05:49:20 +0000

There is some universal truth to the idea that the more you know about something, the more you realize how much more there is to learn on the topic. A great example of this is learning about React when it comes to coding. You barely have time to get comfortable writing code and along comes an entire new way to write and think about code.

import { useState } from "react";

It is a simple line of code but it allows us to do so much. To state it simply, the useState hook is a feature in React that allows functional components to have state. State is used to manage data that may change over time and will trigger re-renders of the component when it is updated.

That is all well and good but what does that actually mean when you set out to write something. Say you are writing an app to track daily tasks and you want to be able to add new tasks to your list. By using react and states, you have the ability to create interactive user interfaces! Lets see how with a few examples of code you might write in a NewTaskForm component.

const initialData = { text: "", category: "" };
const [newTask, setNewTask] = useState(initialData);

This component is responsible for rendering a form where the user can input data for a new task. It utilizes the useState hook to manage the form's state, specifically the newTask object, which stores the text and category of the new task.

To actually add the information you want, you need a function to be called whenever the user adds something in the input field or selects a category from the dropdown (for this project I went with typing in the input and selecting from a drop down but it is ultimately up to you).

const handleChange = (e) => {
  setNewTask({ ...newTask, [e.target.name]: e.target.value });
};

Here the handleChange function is called whenever the user interacts with the input and drop down. It then updates the 'newTask' object with the new values.

Next you need to think about what happens when the form is submitted. A handleSubmit is triggered, you want to prevent default form submission behavior (resetting your page), call a function to actually submit it (in this example we called it onTaskFormSubmit and we passed it down from a parent component with the newTask object as an argument and finally reset the form fields to their initial state that we defined above.

const handleSubmit = (e) => {
  e.preventDefault();
  onTaskFormSubmit(newTask);
  setNewTask(initialData);
};

There are a few more things going on in other components that make this code really sing, but this small little cut away shows how React can allow you to manipulate the data so the front end of you website gives the user a fully interactive experience without losing the initial information that was loaded. As I learn more about coding, I realize that everything is built on things I learned the day before. This is just scratching the surface of what states and React can help you do and I know I am looking forward to seeing what comes next.

New Beginnings

dillybunn — Mon, 18 Mar 2024 23:14:39 +0000

There are varying degrees of challenges that come for your during your time walking this mortal coil. Sometimes they are forced upon you and other times you take them upon yourself. The important thing I try to remind myself is no matter what the challenge, working your way through it usually has me feeling like I have grown as a person and came out better for it on the other side. After a great 13 years with the only company I have ever worked for, my next big challenge has begun and I guess the only thing I want to say is,

console.log("hello world!)"

The decision to quit a steady career and start from the beginning and learn software engineering was not a quick or easy one. The pace at which technology has evolved since I was a kid has been nothing short of break neck and while I wouldn't consider myself a "technologically challenged"; I was content to read the one thousand mile view of the advancements, enjoy the ease of using the new products and never really dive into the weeds of how those advancements came about. After some soul searching about what I wanted from the second half of my career and life to look like, taking something that was a passing interest of mine and making the leap to learn as much as I could just felt right; so here I am, a student at Flatiron School learning software engineering at their bootcamp. I am sure everyone's journey to learning is different but I thought this would be a good opportunity to share some brief insights into my mind as I began. Hopefully it helps anyone reading who felt the same kind of panic I did, realize they aren't alone.

You can do the pre-reading and all the research you want, but for me nothing prepared me for the first time I opened my terminal and realized it was up to me to set up the directories I would be using, connect it with my newly created GitHub account and open up Visual Studio Code to start working on my lab assignments. The first time I forked a repository and then cloned it to my computer (git clone git@github:dillybunn/....) I must have read the instructions a hundred times and I still doubted I was doing it right. If you ask me to compare how I felt at that moment; to some later labs, where I was actually writing code like:

function isPalindrome(word) {
  const reversedWord = word.split("").reverse().join("");
  return word === reversedWord;

I would have told you while the latter was much more difficult to figure out, the former was definitely more nerve wracking for someone with no experience coming into the program. Repetition is key and while I still deal with self doubt, I can confidently state I feel good about navigating the terminal and pushing things to GitHub. A bit of advice from a newbie though; don't forget the three main commands git add ., git commit -m "note", git push.

It is easy to feel overwhelmed when starting something new and default to not pushing yourself outside your comfort zone. But if it helps here is something I wrote. It is my first code with no prompts, no labs; just what I have learned so far that I would like to share. I am sure in the days/weeks/months/years to come, I will look back and laugh at it, but the message is something I will continue to live by and I hope it helps you to.

const name = "Billy"

const relax = "Take a deep breath";

const combineAdvice = (advice) => {
  return `${name}, ${relax} ${advice}`;
};

console.log(combineAdvice("and enjoy the ride."));