Complement Your Software Development With OpenAI
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.