Originally published at renanfranca.github.io
In our ever-evolving digital landscape, efficiency is the name of the game. As developers, we're constantly on the hunt for tools and practices that can streamline our workflow and improve the quality of our code. One powerful approach to achieving this is through the use of AI-based prompts, specifically, OpenAI's ChatGPT prompts.
Unraveling Boilerplate Code
Boilerplate code refers to sections of code that have to be included in many places with little to no alteration. It's often necessary but can bloat our codebase, making it harder to read and maintain. Moreover, the act of constantly typing out these code sections is time-consuming and monotonous.
This is where the beauty of ChatGPT prompts comes into play.
Harnessing the Power of ChatGPT Prompts
ChatGPT prompts can drastically speed up the development process by automating the generation of boilerplate code. This not only reduces manual typing but also minimizes the risk of errors that often creep in during repetitive tasks like copying and pasting code. I will show you some examples using chatGPT-4.
A Practical Example: From JSON to Typescript object
As the first example, I will introduce a simple prompt for you to get used to it before going to complex prompts.
Imagine you have a JSON that needs to be converted to a Typescript object. Here's a sample prompt you could use:
Prompt: Convert the following JSON to a Typescript object:
{
"id": 1,
"name": "John",
"email": "john@example.com",
"details": {
"age": 30,
"address": "123 Main St"
}
}
With the help of ChatGPT, the output would be:
interface Details {
age: number;
address: string;
}
interface User {
id: number;
name: string;
email: string;
details: Details;
}
const user: User = {
id: 1,
name: "John",
email: "john@example.com",
details: {
age: 30,
address: "123 Main St",
},
};
With a simple prompt, we managed to convert a JSON object to a Typescript object, significantly reducing the time and effort required for this common task.
Try out this prompt right now: TS Object from JSON
Ditching Boilerplate with Prompts
I like to organize my Vuejs components in different files, for example, a component called Homepage:
- πhomepage
- Homepage.component.ts
- Homepage.html
- HomepageVue.vue
- index.ts
The following prompt generates the content of those files for a different component name:
Prompt:
In vue 3 js, take into account the organization of this file inside the folder homepage:
- index.ts:
import HomepageVue from './HomepageVue.vue';
export { HomepageVue };
- HomepageVue.vue:
<template src="./Homepage.html"></template>
<script lang="ts" src="./Homepage.component.ts"></script>
- Homepage.html:
<div>
</div>
- Homepage.component.ts:
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HomepageVue',
});
Now you are going to ask me for the name of the new component and replace Homepage with the new component name. After that, you are going to ask for other component names again forever.
ChatGPT: Sure, I can assist you with that. To start, what is the name of your new component?
Prompt: SignIn
ChatGPT:
Based on your request, your files for the new component "SignIn" should be structured as follows:
- index.ts:
import SignInVue from './SignInVue.vue';
export { SignInVue };
- SignInVue.vue:
<template src="./SignIn.html"></template>
<script lang="ts" src="./SignIn.component.ts"></script>
- SignIn.html:
<div>
</div>
- SignIn.component.ts:
import { defineComponent } from 'vue';
export default defineComponent({
name: 'SignInVue',
});
Let's continue. What is the next component name you would like to use?
Then I could keep creating new components and copy and paste them into my Vuejs project π!
Check this prompt right now: Generate Vuejs Component
Ditching Duplicates with Prompts
ChatGPT is not just limited to boilerplate code; it can also be employed to identify and refactor duplicated code, another common concern in software development.
Let's say we have a software system for a library. The system has two main functionalities: lending books to library members and restocking returned books.
Below is the code which has a significant amount of duplication and the prompt you could use at the:
Prompt:
Remove the duplication from the following Java class:
public class LibrarySystem {
private List<Book> availableBooks;
private Map<Member, List<Book>> lentBooks;
// other necessary code...
public void lendBook(Member member, Book book) {
if (availableBooks.contains(book)) {
// removing the book from the available book list
availableBooks.remove(book);
// adding the book to the member's lent books
List<Book> memberBooks = lentBooks.get(member);
if (memberBooks == null) {
memberBooks = new ArrayList<>();
lentBooks.put(member, memberBooks);
}
memberBooks.add(book);
// generating a due date for returning the book, let's say in two weeks
LocalDate dueDate = LocalDate.now().plusWeeks(2);
// printing out a receipt
System.out.println("Book: " + book.getTitle() + " lent to: " + member.getName() + " Due date: " + dueDate);
// other necessary code...
} else {
System.out.println("The book is not available.");
}
}
public void restockBook(Member member, Book book) {
if (lentBooks.get(member) != null && lentBooks.get(member).contains(book)) {
// removing the book from the member's lent books
lentBooks.get(member).remove(book);
// adding the book to the available book list
availableBooks.add(book);
// calculating and printing out any late fees
LocalDate dueDate = LocalDate.now().minusWeeks(2); // assuming the book was due two weeks ago
LocalDate returnDate = LocalDate.now();
if (returnDate.isAfter(dueDate)) {
long daysLate = ChronoUnit.DAYS.between(dueDate, returnDate);
double lateFee = daysLate * 0.50; // assuming the late fee is 50 cents per day
System.out.println("Late fee for book: " + book.getTitle() + " is: " + lateFee);
}
// other necessary code...
} else {
System.out.println("The book was not lent to this member.");
}
}
}
ChatGPT:
The duplication in this Java class can be seen in the code that retrieves a member's book list from the map. This code segment is repeated in both methods, lendBook
, and restockBook
. To remove this duplication, you can create a helper method, getMemberBooks
, which takes a Member
as an argument and returns a List<Book>
. Here is the refactored code:
public class LibrarySystem {
private List<Book> availableBooks;
private Map<Member, List<Book>> lentBooks;
// other necessary code...
private List<Book> getMemberBooks(Member member) {
List<Book> memberBooks = lentBooks.get(member);
if (memberBooks == null) {
memberBooks = new ArrayList<>();
lentBooks.put(member, memberBooks);
}
return memberBooks;
}
public void lendBook(Member member, Book book) {
if (availableBooks.contains(book)) {
// removing the book from the available book list
availableBooks.remove(book);
// adding the book to the member's lent books
List<Book> memberBooks = getMemberBooks(member);
memberBooks.add(book);
// generating a due date for returning the book, let's say in two weeks
LocalDate dueDate = LocalDate.now().plusWeeks(2);
// printing out a receipt
System.out.println("Book: " + book.getTitle() + " lent to: " + member.getName() + " Due date: " + dueDate);
// other necessary code...
} else {
System.out.println("The book is not available.");
}
}
public void restockBook(Member member, Book book) {
List<Book> memberBooks = getMemberBooks(member);
if (memberBooks.contains(book)) {
// removing the book from the member's lent books
memberBooks.remove(book);
// adding the book to the available book list
availableBooks.add(book);
// calculating and printing out any late fees
LocalDate dueDate = LocalDate.now().minusWeeks(2); // assuming the book was due two weeks ago
LocalDate returnDate = LocalDate.now();
if (returnDate.isAfter(dueDate)) {
long daysLate = ChronoUnit.DAYS.between(dueDate, returnDate);
double lateFee = daysLate * 0.50; // assuming the late fee is 50 cents per day
System.out.println("Late fee for book: " + book.getTitle() + " is: " + lateFee);
}
// other necessary code...
} else {
System.out.println("The book was not lent to this member.");
}
}
}
By simply running a ChatGPT prompt to identify and refactor duplicated code, we streamlined our code, enhancing readability and maintainability.
This prompt is available here: Remove Duplication in Java
Let's Connect and Continue the Discussion π
My journey as a developer is marked by the constant pursuit of knowledge and efficiency. I've found the usage of ChatGPT prompts to be a powerful tool for achieving these goals, and I'm excited to share these insights with the community.
To continue this journey together, I extend an invitation to connect with me on Twitter @renan_afrancaπ¦ and LinkedInπ. Not only will you stay updated with my latest posts and insights, but it will also pave the way for fruitful discussions and learning opportunities.
Your Turn πΌ
How has your experience been with AI-assisted code generation? Do you see the use of prompts like ChatGPT becoming a staple in software development workflows? How have these prompts impacted your productivity or code quality?
Drop your thoughts π in the comment section below and let's foster a healthy discussion around enhancing developer experiences in our digital era. Looking forward to your valuable input! π
π£ Attention all tech enthusiasts, coders, and lifelong learners!
I have some intriguing blog posts that you just can't afford to miss!
π Discover the art of perfecting your Github profile with the guide "Create a Github Stunning Profile". This article won't just teach you how to make your profile aesthetically pleasing, but also help you dynamically list your recent blog posts. Say goodbye to manual updates and hello to automation. Make your Github profile a mirror of your tech prowess! π«
𧩠Ever wondered why JHipster avoids Lombok? Delve deep into the pros and cons of using Lombok and why JHipster chooses to walk a different path in my thought-provoking post "JHipster Does Not Use Lombok. Why?" Unravel this technological mystery and gain insights into industry practices that you can implement in your own projects.
π± Want to code on the go? Check out my definitive guide "VSCode on Android (you donβt need to install anything)". This gem of a blog post will break down how to use Visual Studio Code on Android without the hassle of installation. Transform your Android device into a coding machine and get things done wherever you are.
No matter where you are in your tech journey, these posts will enlighten you, challenge you, and push you forward. Don't let this opportunity pass you by, read these posts now! Ignite your passion for technology and continue to expand your knowledge with us. π‘
Top comments (5)
This was an interesting article to read and to see how other developers are leveraging AI. I would like to add, no AI system is perfect and no one should take the generated responses as fact. I've come across multiple errors in generated solutions but it does help to faux-pair program and to help spark ideas.
Absolutely, thank you for sharing your thoughts with me! ππ It's always a pleasure to hear different perspectives. I totally agree with you!
Speaking of my own experience, I'm using Test-Driven Development (TDD). π₯οΈπ My approach involves quickly turning the test green, then I bring in the big guns - ChatGPT - to help me eliminate any duplications. And finally, just to be extra sure, I run the test again to ensure everything is still running smoothly and the screen is filled with lovely green lights! π¦π
Keep the code vibes flowing! ππ¨βπ»
Thank you for reading this post. Send me some β€οΈ & π¦ to support me and enhanced this post's visibility π€©
If you find the content interesting, follow me here π£, on Twitter @renan_afranca π¦ and LinkedIn π.
Thank you for writing such a nice article on harnessing the power of Chat GPT. Would love to see more from other folks as well.
I'm absolutely thrilled π that you found it enjoyable! Just so you know, in my daily life as a software engineer, I incorporate a ton of prompts! π I'm really eager to hear from the rest of you guys too! π£οΈ I genuinely believe there's so much more we could unearth and explore here! π§π