My First GPT

calendar Wednesday 15 March 2023 · 9 min read · AI ChatGPT  ·
Share on: linkedin copy

🎉🚀👋 Hi all

I have something fun to share! I've found that you can get the most out of ChatGPT by asking the right questions. And that gave me an idea... 🤔

What if I could create an application that helps you put together the perfect ChatGPT prompt?

Although I mainly see myself as an infrastructure and Azure nerd, I decided to test my web development skills and build this application. 💪

And it works! 🙌

I have created a working application and I would like to go through with you the steps I have gone through. From working out my idea to creating Node.js code for the site. All using ChatGPT of course.

I am super excited about this application and I like to share it with you! So, if you're interested in trying it out or if you'd like to know more about my process, feel free to drop me a line. Let's get the conversation going! 💬

It seems that you can get the most out of ChatGPT by asking the right questions (actually just like in real life), but I have noticed that especially in this case, a clearly formulated question leads to a better answer. That's why I thought it would be fun to create an application that can help you put together a ChatGPT prompt. Although I am a techie, for the past 15 years I have mainly been involved in infrastructure, Azure and management, and not so much in web development. But who knows, ChatGPT might be able to help me with this. The result is that I messed around for an evening, but miraculously I managed to create a working application. Below I would like to go through with you the steps I went through. I started working out my idea. Coincidentally, we're working on Node in our team.js for documentation, so I thought, I'll just throw it in the mix and see what happens...

Question 1

I would like to create an application in node.js where you have to choose a number of fields. These fields are filled by a json files. The user will see a selection menu with drop down fields. These fields contain content from json files. If you have chosen these fields, a text must come out of them that you can copy to another application. Can you write this out in a tutorial with only the code snippets

Comment ChatGPT

Yes, I can help you create an application in Node.js that meets your requirements. Below you will find a tutorial that will guide you through the different steps of the process. After that, the AI came up with a story that was too long for the chat, since ChatGPT stops about 4000 tokens. This equates to about 4000 words.

Question 2

Only a list of steps

Comment ChatGPT

Of course, here is a list of steps to create an application in Node.js that meets your requirements:

  1. Initialize a new Node.js project with npm init -y.
  2. Install the required packages with npm install express ejs body-parser --save.
  3. Create JSON files with the content for the drop-down menus.
  4. Create an Express server and set up the middleware to process the submitted form data.
  5. Create an HTML page with a form and a drop-down menu for each JSON file.
  6. Set a route to process the form and generate the resulting text.
  7. Render the resulting text back to the user in a new HTML page.
  8. Test the application by starting the server with node server.js and opening it in your browser.

Hopefully, this will help you create your Node.js application!

Question 3

write out step 1

Comment ChatGPT

Of course, here's how you can perform step 1:

  1. Open the terminal and navigate to the folder where you want to create the Node .js project.
  2. Create a new folder for your project using the command mkdir and give it a name, for example node-app.
  3. Enter the new folder with the command cd node-app.
  4. Initialize the project by typing the command npm init -y in the terminal and pressing Enter. The -y argument ensures that the default settings are used automatically, so you don't have to fill in any further details. This will create a new package.json\ file in your project's folder.

Question 4

Write out step 2

Comment ChatGPT

Of course, here's how you can perform step 2:

  1. Make sure you are still in the node-app\ folder in the terminal.
  2. Type the command npm install express ejs body-parser --save and press Enter. This will install the express, ejs and body-parser packages and add them to the dependencies section of the package.json\ file.
  3. Wait for the installation to complete and you will see a confirmation in the terminal. The --save option ensures that the packages are added to the dependencies section in the package.json\ file and that they are automatically installed when you want to run the application elsewhere.

Question 5

write out step 3

Comment ChatGPT

Of course, here's how you can perform step 3:

  1. Create two new files in the node-app\ folder and name them colors.json and animals.json.
  2. Open each file in a text editor and fill them with the content you want. Make sure that the contents of the JSON files follow valid JSON syntax.
  3. Save and close both files. The JSON files are now ready to be used in the application.

Question 6

Step 4

Comment ChatGPT

Of course, here's how to perform step 4:

  1. Create a new file in the node-app\ folder and name it server.js.
  2. Open server.js in a text editor and add the following code:
 1const express = require('express');
 2const bodyParser = require('body-parser');
 3
 4const app = express();
 5
 6Set up the middleware to process the submitted form data
 7app.use(bodyParser.urlencoded({ extended: false }));
 8app.use(bodyParser.json());
 9
10Set the default display engine to EJS
11app.set('view engine', 'ejs');
12
13Set the public folder for static files
14app.use(express.static('public'));
15
16Start the server and listen on a specific port
17const port = 3000;
18app.listen(port, () => {
19 console.log("The application started at http://localhost:${port}");
20});
  1. Save and close the file. This code sets up an Express server and adds the body-parser middleware to process submitted form data. It also sets the default view engine to EJS, and the public folder is set for static files. Finally, the server starts and listens on port 3000.

Question 7

Step 5

Comment ChatGPT

Of course, here's how you can perform step 5:

  1. Create a new folder in the node-app\ folder and name it views.
  2. Create a new file in the views folder and name it index.ejs.
  3. Open index.ejs in a text editor and add the following code:
 1<! DOCTYPE html>
 2<html>
 3 <head>
 4  <meta charset="UTF-8">
 5  <title>Drop-down menu</title>
 6 </head>
 7 <body>
 8  <h1>Menu</h1>
 9  <form method="POST" action="/result">
10   <label for="color">Color:</label>
11   <select id="color" name="color">
12    <% colors.forEach(color => { %>
13     <option value="<%= color.code %>"><%= color.name %></option>
14    <% }) %>
15   </select>
16   <br>
17   <label for="animal">Animal:</label>
18   <select id="animal" name="animal">
19    <% animals.forEach(animal => { %>
20     <option value="<%= animal.sound %>"><%= animal.name %></option>
21    <% }) %>
22   </select>
23   <br>
24   <input type="submit" value="Generate">
25  </form>
26 </body>
27</html>
  1. Save and close the file. This code creates an HTML page with a form and a drop-down menu for each JSON file. The options in each drop-down menu are dynamically populated from the corresponding JSON files. When the user clicks the "Generate" button, the submitted form data is sent to the server.

Question 8

Step 6

Comment ChatGPT

Of course, here's how you can perform step 6:

  1. Add the following code to server.js, under the app.use(express.static('public')); line:
1Set a route to process the form and generate the resulting text
2app.post('/result', (req, res) => {
3 const color = req.body.color;
4 const animal = req.body.animal;
5
6const text = 'The selected color is ${color} and the chosen animal says "${animal}"!";
7
8res.render('result', {  text: text });
9});
  1. Save and close the file. This code sets a route for the POST request that processes the form. It retrieves the values of the selected color and the chosen animal from the submitted form data. Then, a resulting text is generated based on these values. This text is then rendered to the result.ejs page as a variable text.
  2. Create a new file in the views folder and name it result.ejs.
  3. Open result.ejs in a text editor and add the following code:
 1<! DOCTYPE html>
 2<html>
 3 <head>
 4  <meta charset="UTF-8">
 5  <title>Result</title>
 6 </head>
 7 <body>
 8  <h1>Result</h1>
 9  <p>Copy the following text to another application:</p>
10  <textarea rows="4" cols="50"><%= text %></textarea>
11 </body>
12</html>
  1. Save and close the file. This code creates an HTML page that displays the resulting text of the form in a text box that the user can copy and paste to another application.

Question 9

Step 7

Comment ChatGPT

Of course, here's how you can perform step 7:

  1. Add the following code to server.js, under the app.use(express.static('public')); line:
1Set a route for the results page
2app.get('/result', (req, res) => {
3 res.render('result', { text: '' });
4});
  1. Save and close the file. This code sets a route for the GET request that displays the results page. A blank text variable is passed because the text has not yet been generated.
  2. Add the following code to server.js, under the app.post('/result', (req, res) => { line:
1Set a route for the home page
2app.get('/', (req, res) => {
3 res.render('index', { colors: require('./colors.json').colors, animals: require('./animals.json').animals });
4});
  1. Save and close the file. This code sets a route for the GET request that displays the home page. It loads the JSON files for the colors and the animals and forwards them to the index.ejspage as variables.

Your Node.js application is now ready to use!

Nice that you're still reading, thanks for that. At the moment I don't have the application I have in mind, but I do have a website that extracts data from various JSON files. Once you have made the choices, you will be taken to a page where you can copy the generated text. I am really impressed with the possibilities and will experiment even further in the coming evenings. If you also want to try it (or improve my code) see the repo here:

ByteBrewerJB/ChatGPTPromtGenerator (github.com)