Complement Your Software Development With OpenAI

Dec 21, 2022

5 minutes

Yesterday on the news I heard a story about robots. Generally we worry about automation taking over our jobs, but this story explained how automation can actually help us. This news story was about how a robot arm, that's specialized in bricklaying, is relieving the pressure created by the shortage of construction workers.

This made me think about my own situation as a programmer. "Something similar might happen to my field in the future!", well today I discovered it's already happening, and I couldn't be more excited! I want to tell you my short story of how I discovered that the power of AI can already be used by every programmer to relieve their work pressure. I'm talking about ChatGPT https://chat.openai.com.

I'm just going to show you the conversation I had this chat bot. I started with simple requests, because I was expecting a simple AI. I was wrong. If you read between the lines you might see my amazement increase everytime the chatbot responds. Have fun!

Me: code me hello world in python

Chatbot: Here is a simple "Hello, World!" program in Python:

print("Hello, World!")

To run this program, simply save it as a .py file and run it with the Python interpreter. For example, if you save it as hello.py, you can run it like this: python hello.py

This will print the message "Hello, World!" to the terminal.

Me: write me a .html file with a button

Chatbot: Here is an example of an HTML file with a button:

<!DOCTYPE html>
<html>
  <head>
    <title>Button Example</title>
  </head>
  <body>
    <h1>Button Example</h1>
    <button>Click Me!</button>
  </body>
</html>

Me: write me a python script that displays a pie chart based on .csv file input

Chatbot: Here is a simple Python script that reads a CSV file and creates a pie chart based on the data:

import csv
from matplotlib import pyplot as plt

# read data from CSV file
data = []
with open("data.csv") as csvfile:
  reader = csv.reader(csvfile)
  for row in reader:
    data.append(row)

# extract labels and values from data
labels = [d[0] for d in data]
values = [int(d[1]) for d in data]

# create pie chart
plt.pie(values, labels=labels)

# show pie chart
plt.show()

Me: write me a react component for a sign in button

Chatbot: Here is a simple React component that creates a sign in button:

const SignInButton = () => {
  const handleClick = () => {
    // perform sign in action here
  };

  return <button onClick={handleClick}>Sign In</button>;
};

Me: write me a react component in typescript that fetches pokemon from the pokemon api and displays them in a list

Chatbot: Here is a simple TypeScript React component that fetches Pokemon data from the Pokemon API and displays them in a list:

import React, { useState, useEffect } from "react";

interface Pokemon {
  name: string;
  url: string;
}

const PokemonList: React.FC = () => {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  useEffect(() => {
    fetch("https://pokeapi.co/api/v2/pokemon/")
      .then((response) => response.json())
      .then((data) => {
        setPokemons(data.results);
      });
  }, []);

  return (
    <ul>
      {pokemons.map((pokemon) => (
        <li key={pokemon.name}>{pokemon.name}</li>
      ))}
    </ul>
  );
};

export default PokemonList;

Me: add a title to the pokemon list component

Chatbot: Here is a modified version of the Pokemon list component that includes a title:

import React, { useState, useEffect } from "react";

interface Pokemon {
  name: string;
  url: string;
}

const PokemonList: React.FC = () => {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  useEffect(() => {
    fetch("https://pokeapi.co/api/v2/pokemon/")
      .then((response) => response.json())
      .then((data) => {
        setPokemons(data.results);
      });
  }, []);

  return (
    <>
      <h1>Pokemon List</h1>
      <ul>
        {pokemons.map((pokemon) => (
          <li key={pokemon.name}>{pokemon.name}</li>
        ))}
      </ul>
    </>
  );
};

export default PokemonList;

Me: turn the unordered list into an ordered list

Chatbot: Here is a modified version of the Pokemon list component that uses an ordered list instead of an unordered list:

import React, { useState, useEffect } from "react";

interface Pokemon {
  name: string;
  url: string;
}

const PokemonList: React.FC = () => {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  useEffect(() => {
    fetch("https://pokeapi.co/api/v2/pokemon/")
      .then((response) => response.json())
      .then((data) => {
        setPokemons(data.results);
      });
  }, []);

  return (
    <>
      <h1>Pokemon List</h1>
      <ol>
        {pokemons.map((pokemon) => (
          <li key={pokemon.name}>{pokemon.name}</li>
        ))}
      </ol>
    </>
  );
};

export default PokemonList;

Me: make a react application with a login screen and when you login you are shown the pokemon api component

Chatbot: Here is a simple React application that has a login screen and displays the Pokemon list component after the user logs in:

import React, { useState } from "react";
import PokemonList from "./PokemonList";

const App: React.FC = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = () => {
    // validate username and password here
    setLoggedIn(true);
  };

  return loggedIn ? (
    <PokemonList />
  ) : (
    <>
      <h1>Login</h1>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </label>
      <button onClick={handleLogin}>Login</button>
    </>
  );
};

Me: implement oauth google login for the authentication

Chatbot: Here is a modified version of the React application that uses OAuth with Google for authentication:

import React, { useState } from "react";
import GoogleLogin from "react-google-login";
import PokemonList from "./PokemonList";

const App: React.FC = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  const handleGoogleLoginSuccess = (response: any) => {
    // handle successful Google login here
    setLoggedIn(true);
  };

  const handleGoogleLoginFailure = (response: any) => {
    // handle failed Google login here
  };

  return (
    <>
      {loggedIn ? (
        <PokemonList />
      ) : (
        <GoogleLogin
          clientId="YOUR_CLIENT_ID"
          onSuccess={handleGoogleLoginSuccess}
          onFailure={handleGoogleLoginFailure}
        />
      )}
    </>
  );
};

export default App;

At first my mind was worried, "In a few years my job is no longer relevant.", but as I was messing around I quickly started realizing this can be used as a powerful tool by new and experienced programmers to complement their programming skills instead of replace them.

I suggest you play around too https://chat.openai.com. I'm sure you'll find a way to apply this to your workflow.