Unleashing the Potential of Chat GPT in Code Development - Possibilities | Limitations | Approach

Introduction

Efficiency is crucial for coders and programmers when it comes to developing complex code. The question arises: could artificial intelligence (AI) become a reliable ally in this process?

?In recent times, Chat GPT has emerged as a promising solution, capable of generating accurate code based solely on plain text descriptions. Programmers are leveraging its capabilities to create code snippets, optimize existing code, and even identify and rectify issues, making it a valuable assisting tool.

However, can Chat GPT be considered a mainstream tool for programming? Is it capable of facilitating the development of entire end-to-end applications? In this blog post, we delve into the true power of Chat GPT, discuss the recommended approach, and examine the challenges and limitations associated with its usage.

Although the provided example may appear small in scale, the approach and principles demonstrated can be extended to construct larger applications using a divide and conquer strategy.

Problem Statement

In project development, starting with simplicity and gradually incorporating complexities is a common approach, don't you think? ??

Let’s embark on a journey to build ContactManager, a React single page application designed to provide an interface for managing and locally storing contacts.

Let's dive into the process of creating ContactManager, exploring the steps involved and gradually introducing more intricate elements along the way.

Before moving ahead let’s understand the ChatGPT prompt.

ChatGPT Prompts

Prompts are central to generative AI. Creating well-crafted prompts is essential for leveraging the power of ChatGPT, a generative AI tool. In this blog post, we explore key guidelines to design effective prompts that yield accurate and meaningful responses.?

Key considerations for prompt design include:?

• Clarity and specificity: Clearly state your desired outcome to guide the model in generating relevant content.
• Providing relevant context: Include background information to help the model understand the domain or topic.
• Balancing length and complexity: Find a balance that allows for a comprehensive understanding without overwhelming the model.
• Neutrality in language: Use neutral and unbiased language.
• Harnessing multiple sentences: Consider breaking prompts into multiple sentences for clarity.

?Iterating and experimenting with prompts can refine response quality over time.

Organizing Prompts

Organizing ChatGPT prompts effectively is essential for maximizing the productivity and accuracy of interactions with ChatGPT. By following best practices for prompt organization, developers can maintain clarity, streamline workflows, and improve collaboration throughout the development process.

Grouping prompts into logical categories or conversations ensures that prompts are organized in a coherent manner, making it easier to manage and reference them as needed.

Organizing prompts based on the components or features of your application offers a focused and structured approach. By associating prompts with specific functionalities, you can maintain a clear separation of concerns and ensure that prompts are relevant to their respective components.

We recommend creating separate text documents to store prompts related to different components and make it a first-class citizen of the software. This approach provides a clear and organized structure, enables version control, and facilitates collaboration with team members.

For this application development purpose we will create two conversations/prompt-groups –

• Development – Prompts that are specific to development.
• Technology Exploration – Prompts we may issue to explore about React or Semantic UI

The Journey

Steps below outlines the approach to ensure a structured and successful development process. Let's dive into the key stages and considerations for building the application.

Application Initial Setup

Prompt

Let’s create the React application. We will be using Semantic UI framework CSS for look and feel of the application.

Create MyApp React.Js application with detailed instructions. We will be using Semantic UI framework for look and feel of the application.

ChatGPT responded with commands for –

• Initial development environment setup
• Creating new React project using Create React App (CRA)
• Installing and configuring Sematic UI
• Customizing ‘src’ folder and App.js
• Finally, how to start the application.

Exploring React

While this section may veer away from current application development, its purpose is to demonstrate the potential of ChatGPT in the realm of technology exploration.

Since this is not directly related to the application development, we shall use “Technology Exploration” conversation.

Prompt 1

What are the best practices for React.js application folder structure?

Chat GPT replied with pretty good best practices –?

• Group files by feature or module.
• Separate components into their own folder.
• Use meaningful and consistent naming conventions.
• Keep related files together in the same folder.
• Use separate folders for different concerns (components, styles, services, utils).
• Avoid deep nesting to keep the folder structure shallow.
• Utilize index files for exporting multiple components or utilities.
• Consider a separate folder for routing-related files.
• Separate development and production code if necessary.
• Consider a modular approach for state management.

To delve deeper, let's issue specific prompts to gain a comprehensive understanding of the best practices. Let's begin by exploring the concept of "Consider a modular approach for state management."

Prompt 2

Elaborate further on - Consider a modular approach for state management.

Prompt 3

explain with a comprehensive example

Prompt 4

with example code for same

ChatGPT built context from previous prompts and explained the modular approach for state management concept. It provided a concise example showcasing the creation and utilization of different state modules within a React application.

Building UI Components

In this section, we will focus on constructing the user interface for the Header, Add Contact, and Contact List components, along with their respective functionalities. Our initial focus will be on incorporating functionalities that impact the individual components. We will address cross-component functionalities in subsequent stages of development. By following this approach, we ensure a systematic and efficient implementation of the application's user interface and functionalities.

Prompt structure for user interface

For better response we shall be following the following prompt structure – in order - for generating user interface –

So, let’s get started with generating the user interface for different component.

Header Component?

Prompt 1

Create a React.js component named Header. It returns a H2 header with text Contact Manager. It also has icon with style massive address book icon. The component is aligned to center. The entire component is a separate segment. Use appropriate semantic UI styles.

ChatGPT responded with appropriate controls from the Semantic UI -

AddEditContact Component?

Prompt 1

Create a React.Js class component named AddEditContact. The contact details are name, email, address, and phone number.

The respective labels for the fields are Name, Email, Address and Phone Number.?

The form has Save and Reset buttons.

Save button is primary button.?

name field has place holder Contact Name.

email field has place holder Contact Email.

address field has place holder Contact Address (Lane, Area, City, District, Zip).

phone number field has place holder Contact Phone.

The compulsory fields should have star in red color in the title.

The entire component is a separate segment.

Use appropriate semantic UI styles.

By default, cursor should be on name field.

name, email, address fields are mandatory to save. phone number is optional.

Phone number should only accept integers and should be of 10 digits.

Email field should have validation for correct email address format.

On save button contact detail should be returned to App.js.?

On Reset button all the field values should be cleared.

This is lengthy prompt, but it covers everything – UI, Validation, Styles, Save and Reset functionality etc. - for adding new contact.

ChatGPT also responded to make sure to update parent component to handle the save functionality.?

Contact Card Component

Prompt 1

Create a React.js component ContactCard.?

The entire component is a separate segment.

Use appropriate semantic UI styles.

It is two column very relaxed grid.

The left column of grid shows contact details like name, email, address, and phone number fields.

The name field starts with person icon.

The email field starts with email icon.

The address field starts with home icon.

The phone number field starts with desk phone icon.

The right column of the grid has large clickable icon for Delete and Edit contact.

ChatGPT responded with created the component using Semantic UI components and also responded with the not that the “onDelete” and “onEdit” functions are expected to be passed as props from the parent component, which would handle the corresponding actions when these icons are clicked.

ContactList Component

Prompt 1

Create a React.Js component ContactList. It shows the list of ContactCard component.

The list has only one column with all the items shown in single cell one below other.

The list has h2 heading Contact List.

The entire component is a separate segment.

Use appropriate semantic UI styles

The list row is separated by a line.

The contact list has pagination. The page size is 3.

ChatGPT used appropriate styles from Semantic UI and also instructed and created appropriate code to handle “Delete” and “Edit” contact functionality.

Prompt 2

After looking at the Prompt 1 code above, I observed that there should be a horizontal line just above the pagination control. So issued the following prompt –?

The pagination control should be right aligned and have line above it.

Update App.js (Parent) component to handle Add, Update and Delete contact

Once the initial user interface with simple functionality is done lets add functionality to add, update and delete contact.

This complex task can be done with just one prompt –

Prompt 1

Update App.js to handle add contact, edit contact and delete contact.

And ChatGPT replied with magic. It covered everything to handle the functionality. It also introduced a new state variable to keep track of the contact being edited as we are using same component to add or edit the contact.

Limitations

Software development with ChatGPT serves as a powerful tool that complements human engineers rather than replacing them. It significantly enhances code quality, reduces delivery time, ensures uniform coding style across teams, and even handles heavy lifting, enabling more productivity with fewer team members.

While ChatGPT's responses may not be 100% identical for a given prompt every time, it boasts an impressive 90% plus accuracy.

At times, ChatGPT may go overboard and generate the response that has more information which is not required. ?

You will have to make your hands dirty! Hands-on involvement remains essential to unleash its full potential and achieve exceptional outcomes.

Conclusion

Software development with ChatGPT is akin to an engaging conversation, where iterative, bottom-up development emerges as a more suitable approach. As ChatGPT builds context based on prompts and responses, complex and lengthy prompts may become unnecessary at a certain stage in the conversation (see the last prompt). As the model grasps the essence of the conversation, complex prompts become redundant, paving the way for fluid and productive interactions.?

The Bottom-Up development paradigm, development unfolds through an iterative process, starting with small, focused prompts and gradually building upon them. The approach allows the model to understand the context more naturally, fostering a seamless evolution of the conversation.

Next

You can refer to all these prompts and code generated by ChatGTP at https://github.com/svg3171/chatgpt_contact_manager. We will continue enhancing and adding more features in second part of this blog.