Covid-19 app with OpenAI ChatGPT

Hello,?#chatgpt?#openai?enthusiasts!

Following the hype and fear that I will remain jobless, I have decided to test the AI and create a web app with ChatGPT chat assistant.

To give you a bit of context, it was the first time I tested ChatGPT, so I had to select some criteria. Since I am in the Software Development domain, I know a few values that are often important in collaboration with the engineering team.

Consequently, my objective was to seek anticipation, flexibility, quality and if the overall experience was similar to pair-programming with a senior developer or assembling an app while researching on the internet.

Step 1

My idea was to make a simple program to get statistics about covid-19 by the given country. Therefore, I have asked my new AI mate, "Hi there, can you show an example of an app that gets stats about covid?". As you may imagine, I have got the answer, but not only. AI has given me a decent code example, followed by a comment explanation and guidance. Ok, solid.

Anticipation: Success.?

Step 2

Since I come from a JavaSript temple, I thought it would be a good one to test its flexibility, so I asked with ease, "Can you make in in JS please?". Note that I have made some mistakes and wrote "JS" instead of "JavaScript".?The experience was just fine anyway. I have got the answer, and the same as previously - the response was enthusiastic, with code example, followed by the explanation.

Flexibility: Success.

Step 3

Since I was not planning to deploy our work anywhere (my work with AI, can you see the catch?), I decided to use the browser to execute the code. I knew already that AI remembered the context of the "conversation", and this is where I got freaked getting just another neat answer from my fellow bot. My question was, "can you make it so I can paste it in console please?".

Those who know JavaScript can see that the code was already good to run in the browser's console, Nevertheless, my AI mate went a little step forward, explaining how to do so additionally. Now the catch - the code did not work due to that element "const https = require('https');" is a function that is a part of Node.js runtime, and it is not available in the browser. Guess who I asked again to correct that? OpenAI.

Quality: Success.

Step 4

The next step was to ask for alternatives and bingo. My AI mate also knew alternative JavaScript syntax that could be executed in the browsers' console. I was given a code and an explanation of the different approaches. The code did not work this time because the API config needed updated variables or wasn't free. I did not bother checking and asked for free APIs, and then for more, and then asked to combine the lists and update the code.

It was already beyond my expectations and the OpenAPI as the server started having some overload problems. Sometimes processing the answer was interrupted by errors, making the collaboration very difficult. After about 30 trials, I tried a different approach and asked to break it into a sequence: 1. Create an API list, 2. Make a function that fetches them one by one, and 3. mark logs where a "try" is successful in green.

Guess what? Code, Explanation. Done.

Teamwork: Success.

Step 5

Despite the errors and multiple regenerate response attempts, we have managed to get to some final shape of our program. I have run a few tests on different browsers and got a few interesting cases, with one containing a JSON response with the list of objects in the following format:

{?"Country": String,??"CountryCode": String,???"Province": String,??"City": String,??"CityCode": String,??"Lat": String,??"Lon": String,??"Confirmed": Number, "Deaths": Number, "Recovered": Number,?"Active": Number,?"Date": String?}

Test: Success.

Step 6: Final

Today, we can work only for a limited time for each thread. I could create and switch to a new one, but my AI mate would not know the context of the old conversation. Well, I had to wait, and one hour later, I tried again. I asked more precise questions, but the response failed each time, freezing during the response generation.

My browser could not process that further, so we restarted with further optimizations. I asked to fetch only one of the previously successful APIs and then inject it into the browser. To complete the test, I had to find a way to import the chart library to display it in the browser, but I didn't even know if that was possible, so I asked my AI mate one last favour - how to display the result visually in the console instead.

Final test: Success.

Conclusion

I felt empowered using AI as if someone was sitting next to me. I could ask questions when I was curious, elaborate on syntax, or ask when I wasn't sure. I felt helped but also had to guide it, which made the whole experience engaging and interesting.

One crucial detail is that the AI keeps the context in the memory, and referring to different elements of conversation was easy. I was not interrupted by banners, advertising, or multiple sources, which takes multitasking to another level.

I know JavaScript, so I could validate the code. OpenAI source is impossible to validate, so we cannot treat it as truth. I compared the proposition with the syntax I had seen, understood and kept in my memory, yet, how much did I remember, and where do I validate it?

The mission is a success, and it freaks me to think ChatGPT belongs to someone. We can continue asking questions like, i.e. whether it would be open source, free of charge, who will use it and for what reasons. This combination of humans and AI already existed, but this small collaboration makes it clear that hybrid ai-dev programming is here.

Try it yourself!

1. Go to https://covid19api.com/ in your browser.
2. Open the dev console in the same window
3. Paste the code below and hit enter

async function getCovidStatsFinal(t){const o=[{name:"World Health Organization (WHO)",url:`https://api.covid19api.com/total/country/${t}`}];for(const t of o)try{console.log(`Fetching data from ${t.name}...`);const o=await fetch(t.url);let n=await o.json();n=n.filter(((t,o)=>o%2==0));const e=["Date","Confirmed Cases"];let a=`${e[0]}\t${e[1]}\n`;for(let t=0;t<n.length;t++){const o=n[t].Date;let e=n[t].Confirmed;e/=1e5;a+=`${o}\t${"#".repeat(e)}\n`}console.log(a,"\n\n")}catch(o){console.log(`An error occurred while fetching data from ${t.name}: ${o}`)}}getCovidStatsFinal("USA");

Final words

If you liked the article, please share your thoughts about the ai-dev collaboration concept. Thank you! - M.