ChatGPT on behalf of developers! Create QR code with goormIDE

These days, the whole world is buzzing with the ChatGPT story. ChatGPT is an artificial intelligence language model developed by OpenAI. This model has the ability to speak and understand like a human by learning numerous text data collected from the Internet. 

Companies that do not want to fall behind are already introducing new features by introducing ChatGPT. The number of people learning how to use ChatGPT through online lectures or seminars is rapidly increasing. Some developers are saying, half jokingly and half seriously, that they may need to consider retirement.

ChatGPT on behalf of developer?

I was curious about how such a powerful ChatGPT could replace developers. I decided to develop it myself by utilizing the incredible intelligence of the famous genius artificial intelligence, ChatGPT. I am not a computer engineering graduate and have never learned coding. Is it really possible to successfully complete a project with ChatGPT and GoorumIDE without a developer?

💬 goormIDE is a cloud-based integrated development environment service. To put it simply, it is a tool that developers use to write code and develop, just like MS Word that we use to create documents. The biggest advantage of goormIDE is that rather than building a development environment directly on a PC, you can place the development environment in the cloud and access it through an Internet browser to develop in the same environment anywhere. In addition to the basic functions that can be used for free, various functions are provided as paid services. 

Ask ChatGPT

1. Oh, I was fooled

After entering the question ‘Tell me how to create a QR code with goormIDE’, ChatGPT provides an answer within a few seconds. Try following along right away. It was difficult from the start. ‘Where is the file menu?’, ‘Where is the HTML file?’ After wandering around for a while, I realized. I was deceived.

ChatGPT’s plausible answer
❶ Select [HTML file] from the [File] menu at the top of GoormIDE.
→ You can select an HTML file from the [File] menu. There is no function. 
❷ Select [Save Image] from the [File] menu at the top of GoormIDE.
→ There is no function called [Save Image] in the [File] menu. 

ChatGPT responded very convincingly to the incorrect information as if it were fact. I predict that it will not be easy to communicate with this friend. I pay $20 with the expectation that the new model will be different.

2. uh? Does this work?

Tell me how to create a QR code with goormIDE”

The new paid model first tells you how to log in to goormIDE and create a project when you ask the same question. They say they will use ‘Python’ for the stack and ‘qrcode’ for the library. He is even somewhat proactive.

pip install qrcode

Create a project file as instructed by ChatGPT and enter the command to install the ‘qrcode’ library in the terminal. Looking at the log in the terminal, it seems to mean that everything went well. 

import qrcode  # Library for generating QR codes
from PIL import Image  # Library for image processing

# Function to generate and save QR code
def generate_qrcode(data, output_filename):

    # Specify QR code settings
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )

    # Add data to the QR code
    qr.add_data(data)
    qr.make(fit=True)

    # Generate and save the QR code image
    img = qr.make_image(fill_color="black", back_color="white")
    img.save(output_filename)

# Main execution part
if __name__ == "__main__":

    # Specify the data (URL or text)
    data = "https://example.com"

    # Specify the output file name
    output_filename = "qrcode.png"

    # Call the function to generate and save the QR code
    generate_qrcode(data, output_filename)
    print(f"QR code has been generated and saved to {output_filename}.")

Then enter the example code provided and run it.

I think I just used [Ctrl + C] and [Ctrl + V], but the QR code was created. But I don’t know why it happens. Is this what developers do every day? I gained some confidence. We also asked how to create multiple QR codes at once.

“How do I modify the code to generate multiple QR codes at once?”

ChatGPT modified the code so that it can process multiple data using loops. I delete all the original code, and copy and paste the new code provided by ChatGPT.

import qrcode  # Library for generating QR codes
from PIL import Image  # Library for image processing

# Function to generate and save QR code
def generate_qrcode(data, output_filename):

    # Specify QR code settings
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )

    # Add data to the QR code
    qr.add_data(data)
    qr.make(fit=True)

    # Generate and save the QR code image
    img = qr.make_image(fill_color="black", back_color="white")
    img.save(output_filename)

# Main execution part
if __name__ == "__main__":

    # Specify the list of data
    data_list = [
        "https://example1.com",
        "https://example2.com",
        "https://example3.com",

        # Add URLs or text as needed.
    ]

    # Generate and save QR code for each data
    for i, data in enumerate(data_list):
        output_filename = f"qrcode_{i+1}.png"
        generate_qrcode(data, output_filename)
        print(f"QR code has been generated and saved to {output_filename}.")

Enter the example code provided and run it. It goes well. 

I gained confidence that I could do anything as long as I had ChatGPT. I feel like I have become a developer. Let’s try adding a new feature. 

3. uh? Is this not working?

Is there a way to download the generated QR code image as a file?”

I asked about how to download the generated QR code image as a file. Reading the answer, it seems to mean that the server needs to be turned on. Even though we went back and forth with several questions and answers, I couldn’t follow along properly. My head is getting dizzy and my mind is becoming more and more difficult. This process took a long time. Of course, I don’t know why it doesn’t work. 

“Isn’t there a simpler way? “I’m a coding idiot.”

The simplest method taught by ChatGPT to coding idiots is ‘right-click and save’

The place I have climbed so far was the peak of foolishness. 

4. The incomprehensibility between developers and ChatGPT is the same

Instead of saving the image as a file locally, we decided to develop a function to customize the QR code design. ChatGPT answers suddenly become longer. My head becomes dizzy again and my mind becomes difficult. 

“Can you show me an example of a custom result?” 

”I can’t see the image?” 

”No, I don’t see the image in the example results you showed.” 

“What I want to customize is the design of the QR code image.” 

”I want to include an image like a logo in the QR code.” 

”How do I save the image to be used as a logo as a file?” 

”How do I retrieve the image to be included in the QR code?” 

”The image is ready, but I don’t know how to load it.” 

”How do I load and use the image to be used as a logo into the container?” 

”Let me explain again what I want to do. “If you don’t understand, tell me.” 

…… 

“I want to create a QR code with Goorum IDE. Please tell me the detailed method”

ChatGPT eventually recommended a QR code generator site to me. I ended up not knowing what I knew and what I didn’t know, and we couldn’t communicate.

“Shall we try again from the beginning?”

Sometimes starting over from scratch may not be necessary. ‘After the Peak of Folly is the Valley of Despair… ‘ I thought. I decide to buy beer at a convenience store.  

5. The important thing is an unbreakable heart

I wondered if I had done this to enjoy wealth and fame. The important thing is to just keep doing it even though it’s broken. I ask ChatGPT again.  

“Can a QR code generator be created without a developer?”

“Can I make it with goormIDE?” 

ChatGPT’s confirmation gives me the courage to try again. This time, we will develop using Node.js among the stacks recommended by ChatGPT.

First of all, we decided that the function of downloading the QR code image as a file locally was not necessary. This is because it is much easier and simpler to ‘save by right-clicking’ as taught by ChatGPT. The ability to customize the QR code image seemed too difficult to try right now, so we decided to lower the level of the feature.

Language to use 
🅧 Python → I tried it once, so I passed
🅥 Node.js → I saw developers using it at the company
Features needed
🅥 Generate multiple QR codes at once  
🅧 Download the generated QR code image as a file locally ;→ Decided it was not necessary  
🅧 Customize the QR code image
🅥 Add message below QR code 

6. Try to ask the right questions

As ChatGPT advised, I looked through previous conversations before starting again from the beginning. The more vague my questions were, the more often ChatGPT gave incorrect answers or were not the answers I wanted. Conversely, the clearer and more specific the question, the more satisfying the answer. So what should we do to ask questions to ChatGPT well? Let’s ask ChatGPT about this too. 

“How should I ask questions to communicate effectively with ChatGPT?”

How to ask ChatGPT a good question
1. Ask clearly
2. Ask specific questions
3. Ask questions briefly and concisely
4. Focus on one topic
5. Provide background information for your question
6. Ask questions politely → Important★

There is no difference between artificial intelligence and humans. It is important to ask questions clearly, specifically, and concisely. You must distinguish between what you know and what you do not know, and ask complex questions in a step-by-step manner that makes it easier for the other person to understand.

7. Repeat of problem-solution-problem-solution

This time, I decided to customize the QR code design. First, create a ‘Node.js’ container and create a JavaScript project file. Install the ‘qrcode’ library and paste the provided code. 

npm install qrcode
// Import the QR code generation tool
const QRCode = require('qrcode');

// Specify the information for the QR code. Here, we use the web address 'https://example.com'.
const data = 'https://example.com';

// Generate the QR code image and save it as 'qrcode.png' file.
QRCode.toFile('qrcode.png', data, {

  // Specify the color and background color of the QR code.
  color: {
    dark: '#000',  // Set the color of the QR code to black.
    light: '#FFF'  // Set the background color of the QR code to white.
  }
}, (err) => {

  // If an error occurs during QR code generation, output the error message.
  if (err) {
    console.error(err);
  } else {

    // If the QR code is generated without error, output the completion message.
    console.log('QR code has been generated.');
  }
});

Thanks to previous experience, everything has been smooth up to this point. The problem occurred after installing a library called ‘sharp’ to insert text into the QR code image. 

“Please interpret the error message. It seems like the module called ‘sharp’ is not installed?”

Problems and solutions presented by ChatGPT ➊, ➋
[Problem] ‘sharp’ library dependency issue → [Solved] Library global Installed with
[Problem] Compatibility issue with Node.js and ‘sharp’ library version → [Resolved] Update Node.js version 

I tried installing the library globally and updating the ‘Node.js’ version, but another problem occurred.  

“I tried to install the latest version of Node.js, but this error message appeared. “Interpret it.”

Problems and solutions presented by ChatGPT➌ 
[Problem] Node.js version compatibility issue with ‘GLIBC’ library
[Solution] Downgrade Node.js version 

It is said that the problem is that the ‘GLIBC’ library version installed on the system is incompatible with the ‘Node.js’ v.18.15.0 version that I am trying to install. Install a lower ‘Node.js’ version as recommended by ChatGPT and install the ‘sharp’ library again. Another error. 

Looking at the error log, it seems to be a ‘GLIBC’ library version compatibility issue.  

“It seems to be the same error, please explain.”

Problems and solutions presented by ChatGPT
[Problem] Compatibility issue between ‘GLIBC’ and ‘sharp’ library versions 
[Solution] Install ‘canvas’ library instead of ‘sharp’

As expected, it is a ‘GLIBC’ library version issue. Install the ‘canvas’ library instead of ‘sharp’. Another error. I think once again, ‘Ah, is this what developers do every day?’   

The same thing happened even if I installed the ‘pureimag’ library instead of ‘canvas’. In the end, I solved it by downgrading the ‘Node.js’ version to v10.16.3 to match the ‘GLIBC’ version and reinstalling the ‘canvas’ library.

8. The twists and turns come to an end

After repeating the similar problem-solving-problem-solving process several more times, I was able to implement what I wanted. The project was completed using only ChatGPT and goormIDE without a developer. This all happened during a day spent with ChatGPT. The code completed with ChatGPT is below [Appendix. It is attached to the [To-Do List] part.

Everyone becomes a developer

goormIDE supports a variety of programming languages ​​and allows you to build a development environment by connecting through an Internet browser, making it easy to start the project. If it weren’t for goormIDE, I would have had to ask ChatGPT about how to set up a development environment on a PC. ChatGPT provided quick and friendly advice on everything from recommending an appropriate programming language to writing code and correcting errors. Most of the difficulties encountered during the development process were overcome with ChatGPT.  

What I confirmed through this project is the ‘possibility’ that it can be done. Thanks to GhatGPT, I was able to easily access new knowledge, and the confidence that I had achieved it once gave me the courage to take on the challenge of learning. I hope that today’s experience with ChatGPT will serve as an opportunity to gain motivation and confidence for those who have difficulty acquiring new skills. Shameless-! (Boths are open


Appendix. To-Do List 

1. Sign up or log in to goormIDE and create a new container. 

2. Set the container name and software stack. Here we will use Node.js. 

3. Enter the following command in the terminal to install the ‘qrcode’ library. 

npm install qrcode

4. Enter the following command in the terminal to install the ‘canvas’ library. 

npm install canvas

5. Create a JavaScript file in your project folder and name it, for example index.js.

6. Write the following code in the index.js file and save it. 

```javascript
// Import necessary tools
const qrcode = require('qrcode'); // QR code generation
const { createCanvas, loadImage, registerFont } = require('canvas'); // Image manipulation
const fs = require('fs'); // File saving

// Addresses and texts
const data = ['https://www.example1.com', 'https://www.example2.com', 'https://www.example3.com'];
const text = ['Scan me 1!', 'Scan me 2!', 'Scan me 3!'];

// Function to combine QR code image and text
const createQRCode = async (data, text, index) => {
  return new Promise((resolve, reject) => {

    // Generate QR code image
    qrcode.toDataURL(data, { errorCorrectionLevel: 'H', margin: 1, scale: 10 }, async (err, url) => {
      if (err) reject(err);

      // Load the QR code image
      const image = new Image();
      image.src = url;

      // Create canvas and context
      const canvas = createCanvas(image.width, image.height + 20);
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0);

      // Add text to the image
      ctx.font = '16px sans-serif';
      ctx.fillText(text, 0, image.height + 16);

      // Save the combined image as a file
      const out = fs.createWriteStream(`./qrcode_with_text${index}.png`);
      const stream = canvas.createPNGStream();
      stream.pipe(out);
      out.on('finish', () => {
        console.log(`QR code image with text ${index} has been created!`);
        resolve();
      });
    });
  });
};

// Generate QR code images with text
const generateQRCodes = async () => {
  for (let i = 0; i < data.length; i++) {
    await createQRCode(data[i], text[i], i);
  }
  console.log('All QR code images with text have been generated!');
};

// Start generating images
generateQRCodes();
```

7. Run the index.js file by entering the following command in the terminal. 

node index.js

8. When execution is complete, a qrcode_with_text.png file is created in the project folder. Open the file and check the generated QR code.


Thumbnail source | Freepik

Posted by
vivi.kwon

I'm both a coder and a marketer, with a dream of seamlessly blending the two in my work.