Generating apps with ChatGPT
Let’s see what result we get if we ask ChatGPT to generate a weather app. In August 2023, I asked ChatGPT to generate a weather app using GPT-4 with the CodeInterpreter plugin. I gave it the following prompt:
Write an Angular app that displays real-time weather data from openweathermap.org APIs, using Angular Material, with a user input that accepts city name, country, or postal code as input.
After making a few minor corrections, this is the result I got:
Figure 2.11: ChatGPT weather app – August 2023
ChatGPT created a very simple and straightforward app for me, with a weather-display component using two-way binding for the input field. The service call was correctly implemented in a dedicated weather service triggered by the Fetch Weather button. To achieve similar results to the LocalCast app we built, we would have to provide a prompt with far more technical details. Non-technical people won’t know to ask for specific implementation details, and developers may simply find it easier to iteratively develop their solution. Nevertheless, the results are impressive.
Four months later, I questioned my premise from the paragraph above.
What if developers were okay with providing one or two more prompts?
In December 2023, I provided the same prompt from above to ChatGPT using GPT-4 without using any plugins, and after it generated the code, I provided an additional prompt:
Can you rewrite weather.component.html and style it in a way that looks like a professional design on desktop and mobile devices alike?
And boom, I got a result that looked a lot better!
Figure 2.12: ChatGPT Weather app initial version – December 2023
Still, this output doesn’t look like my design. Of course, ChatGPT has no idea what my design is, and it’s too cumbersome to meticulously describe it in writing. Then I remembered I had a hand-drawn mockup of the weather app I created for the 1st edition in 2018.
Figure 2.13: Hand-drawn wireframe for LocalCast
Yes, I did use a ruler!
In August 2023, ChatGPT couldn’t see, but since then, it has gained computer vision. I uploaded the mockup as is and said, “Redesign the UI to follow this mockup.” Remember that my mockup has three screens and difficult-to-read handwriting in it.
Figure 2.14: ChatGPT weather app second version – December 2023
I’m shocked that it picked up on SideNav and incorporated it using proper Material components and FlexLayout media queries to make it responsive – never mind the misinterpretation of my handwriting.
I updated the generated UI code to make it interactive and included it as a project named chat-get-dec23 in the repo. Here’s the result:
Figure 2.15: ChatGPT weather app final version – December 2023
This is beyond impressive. By the time the next edition of this book is published, this chapter may be only a few pages long and filled with tips, highlighting the crucial need to use a ruler when drawing your mockups.
