Unleashing the Power of ChatGPT: Transforming Application Development
Introduction
The era of ChatGPT programming is here, and I'm excited to share my experience of using it to write entire applications. There are skeptics who argue that it "isn't quite there" yet, but in this blog post, I aim to prove them wrong. ChatGPT can re-write code elegantly, introduce new features, incorporate new libraries, overhaul the look and feel, upgrade for mobile compatibility, create secure code, and so much more. The days of being a low-level programmer crafting beautiful code may be numbered, but by embracing this change, you can become a software architect who leverages this incredible technology to boost productivity by leaps and bounds.
Building entire applications with ChatGPT isn't as simple as making a single request. Instead, you need to approach development iteratively, as you would with any modern software project. Keep your code modular and decoupled, and provide ChatGPT with the context necessary to understand the feature you're building or the modifications you're making to existing code.
Every now and then, ChatGPT may produce some absurd output—it's as if it's doing this intentionally. Perhaps the technology has been designed to be less disruptive, giving developers more time to adapt and extract value from their skills. To get the best results, ask ChatGPT precise, bite-sized questions and consistently provide the necessary context. The quality of the software it generates is directly proportional to the quality of your questions. Stay vigilant and be ready to spot when it goes off track; it's testing you to ensure you know what you're doing.
As an experienced software developer, I used ChatGPT to write the front end for Goalora.com, a React application. Although I'm not a React developer, my extensive background in low-level JavaScript, Dojo, JQuery, AngularJS, and Angular allowed me to guide the process and request the elements needed for a high-quality product. In just a week's time, I created an efficient and visually appealing front end like never before.
When I first asked ChatGPT to create the application, it began with a domain model and a few service classes. It certainly wasn't a full application. I asked it to create at least a component for creating a Goal. Then I did the same for creating a Task and so on. By consistently providing the model class, component class, and service class for each feature I was building, I kept ChatGPT focused and accurate, enabling it to write and re-write my code to meet my exact specifications. ChatGPT also didn't immediately include TypeScript, but I knew I wanted type safety. Upon requesting TypeScript integration, ChatGPT promptly obliged. ChatGPT frees me from having to know the exact syntax of a programming language. Instead, I focus on design, maintainability, efficiency, and the numerous other concerns that would normally take a back seat to merely getting an application sort of working. I'll gladly leave remembering the tiny details of language syntax to the machines so I can focus on the things that make products great. Let me show you how it's done...
Overview of the Development Process
In this section, we will describe the iterative approach I took using ChatGPT for developing the React site, and how low-code backends and OpenShift deployment were utilized to further accelerate the process.
Let's take a specific example from this morning. I added a new "Today's Focus" tab on the Dashboard of the Goalora App that let's me see the most important tasks for the day, with a tag filter and a toggle to show and hide completed tasks.
To do that I of coarse gave ChatGPT the TasksFilter component in question, but I also gave it the relevant taskService functions getByTag, the Task model, and a few other tangential functions and files. I give it as much context as possible within the 25000 character limit. Do that over and over. You'll get closer bit by bit. If what you're trying to add is simple, the amount of context and repetition you have to perform is minimal. If you are adding something signficantly difficult, be prepared to repeat yourself, look for errors and reiterate yourself.
Setting Up the Development Environment
Here, we will cover the initial setup process, which includes creating a new React app, configuring the environment, and installing dependencies.
The first step was to ask for the data model. I modified it a bit over time but it was a good start.
Next, I asked for a basic React application.
It didn't add Typescript at first. I needed typed javasript, so later, I asked it to add Typescript and it gladly added Typescript for me.
Breaking down the development process into modules
The key to successfully writing entire applications is by having ChatGPT build it iteratively. You have to give it as much context as possible. Over and over for every feature you build. An example of the files required would be the service that talks to the back end for a specific type, the model, class, or type of object or objects involved, the visual component(s) and anything else your feature requires for context. You have to stay within the 25000 character limit of course. See below for my video explanation:
Conclusion
To wrap up, you can build entire applications with ChatGPT that are secure, designed well and have the features you want if you follow similar steps you would take if you were leading a team of engineers. However, instead of waiting weeks or months for the work to be done, you get it in seconds. You have to keep an eye on the results and help guide ChatGPT to solutions. Absolutely your results will vary depending on your level of development knowledge and ability to effectively communication context, feature by feature.
