In a galaxy far, far away…
As a developer, you have so many things on your plate. From coding and debugging to documentation and testing, the workload can be overwhelming at times. Perhaps, you’ve already tried to use ChatGPT (who hasn’t heard of it yet?!) to relieve the tension and get help with your day-to-day tasks. But how far have you gone with its use? And what side of AI Force would you take as a developer using the ChatGPT?
Would you take the Yoda route as an experienced and wise software developer using the Force of AI to your advantage? Or would you break bad and reveal an alter ego that will turn you to the dark side of the AI Force once you’ve just grasped the basics of coding?
We know that’s quite a tough one! But we are here to show you how you can make your life easier using ChatGPT. All without being lured to the dark side of AI. Which means overusing it and not relying on your own capabilities and skills.
May the Force be with you. As we are getting started.
First, What Exactly Is ChatGPT?
ChatGPT is a chatbot developed by OpenAI to interact with its users in a conversational way. It means that you can input a question or prompt, and the ChatGPT will respond to it. Then, you can continue the conversation back and forth. Just like chatting with a real person via messenger.
This is a sibling model of InstructGPT, a model trained to provide detailed responses, but with a few modifications. The initial model was improved with the help of human AI trainers who conducted conversations on both sides — as the user and AI assistant. The trainer’s suggestions and the InstructGPT dataset then were mixed to grow into a truly conversational model.
Learn the Limitations Before Using ChatGPT for Coding
While the capabilities of ChatGPT seem to be unlimited, in fact, it is not all-mighty. So, what limitations you may encounter when you start using it for app development? Here are the things the ChatGPT team mentions:
- To err is… ChatGPT. — The chatbot may give nonsensical and incorrect answers since it knows how good code looks but doesn’t have a true understanding of code.
- Sensitivity to tweaks. — As you slightly rephrase the request, you may get quite different results.
- The guesswork. — Ideally, the model would ask clarifying questions if your request is vague. Now, it guesses what you meant, so you may get a vague or incomplete answer.
- It’s all about updates. — The current version of GPT 3.5 was trained in early 2022 — a year ago. A lot of stuff could have happened within this period, causing the model to lag behind the recent industry standards.
How to Use ChatGPT As a Developer and Stay on The Good Side of the AI Force
First, here is when you should never use ChatGPT for coding. When generating code requires a lot of context, this chatbot will do little for you. You can’t share the entire codebase with it, so ChatGPT won’t be helpful in this case. Also, do not rely entirely on its answers as you learn how to code. The suggested code can be functional, but it may be verbose or too complex.
And now let’s see how the ORIL developers make the most out of the ChatGPT to streamline workflows and optimize the development experience.
Quick Prototyping
Rapid prototyping is a crucial part of the product development cycle. It allows companies to create functional product prototypes quickly, saving money and time. With the advent of conversational AI, in particular the introduction of ChatGPT, the quick prototyping process is going to take a huge leap forward.
The greatest perk of ChatGPT is that it quickly generates code snippets for prototypes or MVP products, speeding up the development and testing process. This way, you reduce the time and resources required to bring new products to market.
Example 1 — Creating a Basic React Component
Without any further ado, let’s see how the model works in action. For this purpose, we will create and style a login form component using React. So, here is the drill. You have to write a prompt and specify:
- What type of code you want to get
- What it should do
- The tech stack and details
 | Generate a basic React component for a login form with username and password inputs. Style it with plain CSS. Use TypeScript. Use React Hook Form version 7. Fields are required. |
 | import React, { useState } from "react";
import { useForm } from "react-hook-form";
interface FormData {
username: string;
password: string;
}
const LoginForm: React.FC = () => {
const {
handleSubmit,
formState: { errors },
register,
reset
} = useForm<FormData>({
defaultValues: {
username: "",
password: ""
}
});
const [formSubmitted, setFormSubmitted] = useState(false);
const onSubmit = (data: FormData) => {
setFormSubmitted(true);
console.log(data);
reset();
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label htmlFor="username">Username</label>
<input
id="username"
type="username"
placeholder="Email"
{...register("username", { required: true })}
/>
{errors.username?.type === "required" && (
<p className="error-message">Username is required</p>
)}
</div>
<div>
<label htmlFor="password">Password</label>
<input
id="password"
type="password"
placeholder="Password"
{...register("password", { required: true })}
/>
{errors.password?.type === "required" && (
<p className="error-message">Password is required</p>
)}
</div>
<button type="submit">Submit</button>
{formSubmitted && <p className="success-message">Form Submitted!</p>}
</form>
);
};
export default LoginForm;
|
As you see, the generated answer is pretty good. You get a form, controls, error messages, submit handler, and an interface. You can adjust it if needed.
Ok, we’re done with code generation. But can ChatGPT style it? Yes, it can. So, let’s create a prompt asking the model to style the written code. You can use the following scheme:
- Ask what to do — to style the component (provide the component’s code)
- Specify what design style you want to apply
| Style this component with CSS. Print only CSS. Design style – material. [your code here] |
| /* Form styles */
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
/* Input styles */
input {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
font-size: 1rem;
border: none;
border-bottom: 1px solid gray;
}
/* Label styles */
label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
/* Submit button styles */
button[type="submit"] {
background-color: #3f51b5;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.2rem;
margin-top: 1rem;
}
/* Error message styles */
.error-message {
color: red;
font-size: 0.8rem;
margin-top: 0.5rem;
}
/* Success message styles */
.success-message {
color: green;
font-size: 1rem;
margin-top: 1rem;
}
|
Bravo, GPT. The code looks good. The AI model grasped the style we wanted to achieve. In particular, a material design. Below is the login form crafted by ChatGPT.
Example 2 — Creating A Docker File for Angular Application
Let’s ask AI to generate a Dockerfile for an Angular application
| Generate a Dockerfile for an Angular application. |
| Here's a possible Dockerfile for an Angular application: # Use an official Node.js runtime as a parent image FROM node:14 # Set the working directory to /app WORKDIR /app # Copy the package.json and package-lock.json files to the container COPY package*.json ./ # Install the dependencies RUN npm install # Copy the rest of the application files to the container COPY . . # Build the Angular app RUN npm run build --prod # Expose port 80 for the container EXPOSE 80 # Start the Angular app using http-server CMD [ "npx", "http-server", "-p", "80", "./dist" ]
|
While the generated code may require minor tweaking, you still get decent code snippets that cover your needs. Just make sure you give enough details.
We’ve provided only two ChatGPT applications for building quick prototypes. There are so many other things you can do with this model like generating:
- query databases and optimizing queries
- config files for a variety of tools
- API endpoints, lambda functions
- framework-specific entities (stores, controllers, services, etc.)
- and much more
Learning and Upskilling
Among many other things, ChatGPT can teach you coding or help improve your skills. Since this is a conversational chatbot, you can get answers tailored to your needs by making clarifications as you make prompts. Here are some of the ways you may want to use ChatGPT for mastering your coding:
- Asking general programming questions. — If you do not need to go deep into detail, you may make general tech inquiries like what Python is good for or what type of software can you develop with Flutter. Learn pros and cons of different programming languages, how to use specific frameworks or libraries, and more.
- Generating code with explanations. — To learn new coding techniques and speed up code generation, you may ask the chatbot to write a specific code snippet and explain the fragments. It is handy if you’ve forgotten how to implement this or that function, so you will get hints in what direction to move.
- Getting feedback and recommendations. — Are you not certain about the accuracy of the code you wrote? Ask ChatGPT to review it and show you the ways for its optimization.
- Debating about the code. — Quite often truth springs from the argument. So, why not engage the ChatGPT in an interactive debate to boost your coding confidence and get familiar with new methods?!
So, let’s fancy you are new to React and you would like to know how to create an Angular-like service in React.
| Create an Angular-like service for React, it should be a singleton. |
| Here is an example of a singleton service in React:
import React, { useState, useEffect } from 'react';
interface Data {
data: string;
}
interface Service {
data: Data;
setData: (newData: Data) => void;
}
const ServiceContext = React.createContext<Service | null>(null);
const ServiceProvider: React.FC = ({ children }) => {
const [data, setData] = useState<Data>({ data: 'default' });
useEffect(() => {
console.log('Service created');
return () => {
console.log('Service destroyed');
};
}, []);
return (
<ServiceContext.Provider value={{ data, setData }}>
{children}
</ServiceContext.Provider>
);
};
const useService = (): Service => {
const service = React.useContext(ServiceContext);
if (!service) {
throw new Error('Service provider not found');
}
return service;
};
export { ServiceProvider, useService };
|
Here we have a code snippet and explanations, which may be especially valuable to junior developers or those who are switching to new technology. You can go further and ask ChatGPT to show you how to use the generated code in the components.
| Show me how to use useService and ServiceProvider from the previous answer. |
| Here's an example of how to use the ServiceProvider and useService from the previous answer in a React application:
import React from 'react';
import { ServiceProvider, useService } from './Service';
const ComponentA: React.FC = () => {
const { data, setData } = useService();
return (
<div>
<p>Component A</p>
<p>Data: {data.data}</p>
<button onClick={() => setData({ data: 'new data' })}>
Update Data
</button>
</div>
);
};
const ComponentB: React.FC = () => {
const { data } = useService();
return (
<div>
<p>Component B</p>
<p>Data: {data.data}</p>
</div>
);
};
const App: React.FC = () => {
return (
<ServiceProvider>
<ComponentA />
<ComponentB />
</ServiceProvider>
);
};
export default App;
|
If you would like to get more clarification on the suggested code, you can continue the conversation with the chatbot — just like with your tech buddy. We assume that, perhaps, ChatGPT has some limitations in the theoretical depth and may not be familiar with the latest updates. But, at a basic and documentation level, it’s more than enough to help you understand concepts you haven’t been familiar with before. And, what is important, saving you plenty of time.
Code Optimization
Do you often wrack your head around optimizing your code to meet specific requirements and standards? Have you already tried ChatGPT for this purpose? It’s a good idea to ask this chatbot to audit your script and ask for hints on its improvement.
| Optimize this function and show complexity.
function multiplyAll(array) {
let result = 1;
for (let i = 0; i < array.length; i++) {
for (let j = 0; j < array[i].length; j++) {
result *= array[i][j];
}
}
return result;
}
|
| The time complexity of the original function is O(n^2) because of the nested loop.
To optimize the function, we can eliminate one loop by using the Array.prototype.reduce() method:
function multiplyAll(array) {
return array.reduce((acc, cur) => {
return acc * cur.reduce((acc2, cur2) => acc2 * cur2, 1);
}, 1);
}
This implementation has a time complexity of O(n).
|
It’s your call to consider ChatGPT suggestions or not. But one thing is clear — you get valuable code optimization hints in mere seconds.
Unit Tests
Writing unit tests can be tedious and time-consuming. Yet, it’s an essential part of a product development lifecycle because it allows you to minimize bugs in the code and ensure it does what you meant it to. So, let’s ask ChatGPT to write a unity test for the provided code snippet.
| Write unit tests for code using Karma and Jasmine
function findMax(numbers) {
return Math.max(...numbers);
}
|
| Here's an example of unit tests for the findMax function using Karma and Jasmine:
describe("findMax", () => {
it("should return the max number from an array of numbers", () => {
const numbers = [1, 2, 3, 4, 5];
const expectedResult = 5;
const result = findMax(numbers);
expect(result).toEqual(expectedResult);
});
it("should return the only number if the array has only one number", () => {
const numbers = [5];
const expectedResult = 5;
const result = findMax(numbers);
expect(result).toEqual(expectedResult);
});
it("should return the max negative number from an array of negative numbers", () => {
const numbers = [-5, -4, -3, -2, -1];
const expectedResult = -1;
const result = findMax(numbers);
expect(result).toEqual(expectedResult);
});
});
|
ChatGPT gives you no excuses to skip writing unity tests. It does the job pretty well in most cases. Sure, it may not cover everything you may want to audit, but still, the unity test generated by ChatGPT is a good starting point.
Conclusion
These are just a few ways of using ChatGPT for coding. There is so much more you can do with this AI model. Use it as a smart code generator or a reliable assistant — it’s your call. After all, it will help you in your daily working routine and improve your performance.
Yet, do not forget to stick to the good side of the AI Force. Remember that it is just a Q/A tool that may help you in your day-to-day task, but won’t do the job for you. Use ChatGPT wisely and may the Force be with you.
