How to code an Android app using ChatGPT

Hello and welcome to my post about using ChatGPT to write an android app that fetches a random cat image from https://cataas.com/cat. As someone who has just started learning android development two weeks ago, I was excited to see if ChatGPT could assist me in creating a functional app. Over the past few days, I have extensively tested ChatGPT to see if it was capable of writing an app that meets the specifications I set. In this post, I will share my findings and the process of using ChatGPT to create an android app. Stay tuned to see if ChatGPT was able to successfully assist me in creating a functional app despite my limited knowledge of android development.

The future is now old man

Let ChatGPT code an app

It’s obvious that I started by asking ChatGPT to create the entire Android application for me. It is important for those who are unfamiliar with Android development to understand that a project for this platform consists of various files that handle logic, visual elements, and more. Here is my question:

write me an android app to display a random cat from https://cataas.com/cat by clicking a button

and chatGPT came up with an answer:

1. First, create a new Android project in Android Studio.

2. In the layout file for the main activity, add a button that the user can click to fetch a new cat image. You can do this using XML code like this:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Get a new cat" />

3. In the Java code for the main activity, add an OnClickListener for the button. This will allow you to specify what should happen when the button is clicked.

Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Fetch a new cat image when the button is clicked
    }
});

4. To fetch a new cat image, you will need to make an HTTP request to https://cataas.com/cat. You can use the OkHttp library to do this. Add the following dependency to your build.gradle file to include OkHttp in your project:

implementation 'com.squareup.okhttp3:okhttp:4.9.0'

5. Inside the OnClickListener, create a new OkHttpClient and use it to make a request to https://cataas.com/cat. You can use the following code to do this:

OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
    .url("https://cataas.com/cat")
    .build();

client.newCall(request).enqueue(new Callback() {
    @Override
    public void onFailure(@NotNull Call call, @NotNull IOException e) {
        // Handle failure
    }

    @Override
    public void onResponse(@NotNull Call call, @NotNull Response response) throws IOException {
        // Process the response
    }
});

6. Inside the onResponse() method, you can get the body of the response as a string. This will contain the URL of the cat image. You can then use this URL to display the image in an ImageView. First, add an ImageView to your layout file:

<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

7. Inside the onResponse() method, use the following code to display the image in the ImageView:

String imageUrl = response.body().string();
ImageView imageView = findViewById(R.id.image_view);

Picasso.get().load(imageUrl).into(imageView);

This should create an Android app that displays a random cat image when the button is clicked. I hope this helps! Let me know if you have any questions.

I needed to assemble all the components in order to verify whether the code produced by ChatGPT works properly. To be honest you need some experience with Android development to get the code snippets together.

Picasso didn’t worked out of the box.

The last line of code didn’t work out of the box, so I had to ask ChatGPT for help. ChatGPT explained that I also needed to add the necessary dependency in order to make Picasso work.

implementation 'com.squareup.picasso:picasso:2.71828'

After fixing this issue everything looked good and I was eager to see the result.

At least the app started

Bugfixing with ChatGPT

But of course the app crashed, since ChatGPT didn’t mentioned that you have to add permission for internet access to fetch the image from the web. Already knowing Android the permission concept I quickly included the permission in the Manifest file but the App kept crashing with this error:

2022-12-24 14:36:29.858 9608-9647/dev.somestrangeday.catsondemand E/AndroidRuntime: FATAL EXCEPTION: OkHttp Dispatcher
    Process: dev.somestrangeday.catsondemand, PID: 9608
    java.lang.IllegalStateException: Method call should happen from the main thread.
        at com.squareup.picasso.Utils.checkMain(Utils.java:127)
        at com.squareup.picasso.RequestCreator.into(RequestCreator.java:679)
        at com.squareup.picasso.RequestCreator.into(RequestCreator.java:665)
        at dev.somestrangeday.catsondemand.MainActivity$1$1.onResponse(MainActivity.java:50)
        at okhttp3.internal.connection.RealCall$AsyncCall.run(RealCall.kt:519)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1137)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:637)
        at java.lang.Thread.run(Thread.java:1012)

Of course, ChatGPT knew the solution to the error and suggested using runOnUiThread() to fix it. In addition, ChatGPT provided a code snippet for implementation:

@Override
public void onResponse(@NotNull Call call, @NotNull Response response) throws IOException {
    final String imageUrl = response.body().string();
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            ImageView imageView = findViewById(R.id.image_view);
            Picasso.get().load(imageUrl).into(imageView);
        }
    });
}

This stopped the app from crashing, but it didn’t show cat pictures when I clicked on the button. Since the app didn’t produce any errors I had to find the issue by myself.

ChatGPT needs sometimes some help

Turned out that ChatGPT wasn’t aware that the API provides Images instead of URLs. So I told ChatGPT to change the code accordingly and got this response:

To display the image that is returned in the HTTP response, you will need to use a different approach than the one I provided in my previous response. Instead of fetching the URL of the image and using Picasso to load it, you can use the response body as a stream of bytes and display the image directly from the stream.

Here’s an example of how you can modify the code to do this:

1. First, add the following dependency to your build.gradle file to include the Glide library in your project. This library will make it easy to display the image from the stream of bytes:

implementation 'com.github.bumptech.glide:glide:4.11.0'

2. Inside the onResponse() method, get the response body as a stream of bytes using the body().bytes() method:

@Override
public void onResponse(@NotNull Call call, @NotNull Response response) throws IOException {
    final byte[] imageBytes = response.body().bytes();
    // Display the image from the stream of bytes
}

3. To display the image, you can use the following code:

ImageView imageView = findViewById(R.id.image_view);
Glide.with(this).load(imageBytes).into(imageView);

I had to fix one minor issue by replacing this with MainActivity.this in the last line of code, to compile the code and behold, it worked!

Finally a cat!

Conclusion

In conclusion, ChatGPT is a highly advanced chatbot that has the potential to revolutionize the way we write code. While it is certainly capable of providing valuable insights and solutions, it does require some support and guidance from programmers. It is not perfect and may not always understand the context of a conversation or remember important details, and it may even produce bugs. However, in a conversation with a programmer, ChatGPT is able to fix any bugs that it produces and provide useful solutions.

Programmers should not be afraid of losing their jobs to chatbots like ChatGPT, as they still require human input and guidance to function properly. Instead, chatbots like ChatGPT will change the way we code and make it easier for programmers to find solutions to complex problems. However, it is important to remember that ChatGPT is still a tool and cannot replace the critical thinking and problem-solving abilities of a human programmer. It is up to us to provide the input and guidance needed to get the most out of ChatGPT and take advantage of its advanced capabilities.

Overall, I had a lot of fun working with ChatGPT and learning more about its capabilities. I was constantly amazed by the solutions it was able to provide and the way it was able to adapt to my input and guidance. It was a great learning experience and I feel like I have a much better understanding of chatbots and their potential in the world of programming. I am looking forward to continuing to work with ChatGPT and seeing how it evolves and improves over time.

Certainly, I have used ChatGPT partly to write this post. If you’re interested in exploring the source code for this app writen by me and ChatGPT, you can find it on my GitHub page. Also many thanks to cataas for providing awesome cats.