The worst coder on the planet tries an AI sidekick

The grand irony of my function right here at Stack Overflow is that I work to create nice content material for builders, however am completely hopeless in relation to programming by myself. Over my 4 years right here, I’ve gained a fairly good understanding of software program on the macro stage. I can have an clever dialogue in regards to the worth of microservices vs monoliths, strongly typed languages, cloud vs on-prem, or massive language fashions. However asking me to whip up a easy CRUD app is a recipe for disappointment.

[Note to readers: before leaving a comment about someone with no skills wasting your time, refer back to the title and remember that you can’t insult a person who has already completed a perfect self-own.]

Anyway, during the last month, I made a decision to attempt diving again in, impressed by a gradual stream of posts I noticed on social media that confirmed folks writing pure language directions that right this moment’s AI assistants can remodel into working code. Perhaps, I believed, my primary understanding of how an internet app will get constructed will permit me to engineer the best prompts, and the AI can deal with writing and debugging the precise code. 

The app I had in thoughts is pretty easy: folks can checklist let others know when they will be on the native canine park. After some dialogue, I discovered that this can be a primary CRUD app:

• Create: an internet type the place customers can enter the title of their canine and the time they plan to reach on the park. 

• Learn: Different customers can see who’s planning to go to and what time they’ll be there. 

• Replace: I’m not even making an attempt to get this fancy! Additionally, no take-backsies!

• Delete: On the finish of every day, the database deletes all entries so the slate is clean for the next morning. 

Usually, to get began, I’d brush up on my paltry HTML abilities and put together a sacrifice to the JavaScript gods, however,  in 2023, I can simply ask an AI: 

I need to construct a single web page internet app that can permit customers to submit their title, their canine's title, and the time they intend to go to the native canine park. After customers submit this info, it's displayed for anybody who visits the web page. I would like entrance finish code and a database on the backend that may retailer state. 

First - Please clarify how you'd create this app utilizing pseudo-code examples. 
Second - write the code for this app and share it as a single code snippet.

First, let me define the final construction and pseudo-code for the app.
Frontend (HTML, CSS, JavaScript)
a. Create an HTML type for person enter (person's title, canine's title, and supposed go to time)
b. Type the shape utilizing CSS
c. Add JavaScript to deal with type submission and ship information to the backend API
Backend (Node.js with Categorical and a database like MongoDB)
a. Arrange a Node.js server with Categorical
b. Create API endpoints to deal with information submission and retrieval
c. Connect with a MongoDB database to retailer and fetch the submitted information
Join frontend and backend
a. Use JavaScript to ship information from the frontend to the backend API
b. Show the fetched information on the frontend

Okay, let’s drop the code it generated into my WordPress CMS simply to take a peek and…by George, it really works. Appears a bit of janky, although. Let’s clear issues up. 

Edit the code above in order that the three textual content fields are centered on the web page and there are three line breaks between the title and time fields. 

And identical to that: Certain, right here’s the up to date code with the adjustments you requested:

Appears higher, but it surely’s nonetheless lacking one thing. I do know! 

Modify the code above in order that an ASCII picture of a canine seems over the textual content fields for title and time. The ASCII picture of the canine is centered on the web page.

How candy it’s. That is what  imply after they say AI is a instrument to unlock human creativity and potential, to not substitute us.

Thus far so good, however the enter doesn’t persist. I would like some form of backend to document my state. 

I need to add a database to the code above in order that I can retailer the state of the output and show all textual content submitted to customers on the consumer aspect. I would like the database to include two rows, one for "title" and one for "time". When customers submit a "title" and "time" the database shops this state and it is displayed within the output part. The database clears these rows as soon as a day at midnight Japanese time. 

Just a few seconds later the AI spits again a code block that makes use of jQuery and PHP with a MySQL database. For a hopeless programmer like me, it’s fascinating to see that I’ve now bought entry to constructing blocks in a number of languages. I can’t even grasp one by myself!

That stated, the AI can’t resolve the problem of ME being an intractable vortex of bugs and errors, attracting obstacles to functioning code like a magnet picks up nails. I am going by way of the method of organising an AWS account and following the net tutorial for making a MySQL database, however can’t truly get it to connect with the workbench. 

The AI tries to be form. I ask it to rewrite the code for a NoSQL database and it helpfully switches from PHP to Node.JS with out lacking a beat. I spin up a MongoDB Atlas cluster, however am misplaced once more in a sea of error messages. 

Finally I attempt a clear slate. I begin a brand new dialog with the AI and ask it to create a easy app that can work with Firebase. I’ve discovered just a few issues from my first two makes an attempt, so I perceive a bit of higher how the items are supposed to suit collectively. It’s simpler for me to work within the terminal and to have a clear file and folder construction. At 9:30pm on a random Tuesday, I’ve bought a functioning CRUD app—enter your data about your subsequent go to to the canine park, refresh the web page and there it’s for the world to see. 

You’ll be able to accuse me of speaking my e-book, however in all honesty, there have been some issues the AI merely couldn’t resolve for. It insisted I wanted the code under:

​​<!-- The core Firebase JS SDK is all the time required and have to be listed first -->
  <script src=“https://www.gstatic.com/firebasejs/9.6.8/firebase-app.js”></script>
  <!-- Add Firestore (database) -->
  <script src=“https://www.gstatic.com/firebasejs/9.6.8/firebase-firestore.js”></script>

However it didn’t join that to an error I saved getting:

Uncaught SyntaxError: Sudden token 'export'

A fast internet search and I discovered the next query and reply pair. Do I perceive why deleting that code fastened the problem? After all not. However it let me get nearer to a working answer. 

The AI had a bunch of concepts about find out how to resolve for this one:

Uncaught SyntaxError: Can't use import assertion exterior a module

I attempted three or 4 of its options, however we bought nowhere. However the internet had what I wanted. I fed the context of the reply again in and voila, a working internet app.

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta title="viewport" content material="width=device-width, initial-scale=1.0">
  <title>Palatine Bark Play Scheduler</title>
  <model>
    * {
      box-sizing: border-box;
    }
    .banner {
      background-color: #4CAF50;
      coloration: white;
      text-align: heart;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .container {
      show: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    type {
      show: flex;
      flex-direction: column;
      align-items: heart;
      padding: 1rem;
      width: 50%;
    }
    .data-section {
      width: 50%;
      show: flex;
      flex-direction: column;
      align-items: heart;
    }
    .data-container {
      width: 100%;
      padding: 1rem;
      text-align: heart;
    }
    img {
      max-width: 100%;
      top: auto;
      margin: 2rem 0;
    }
    /* Media question for smaller screens */
    @media display and (max-width: 767px) {
      type, .data-section {
        width: 100%;
      }
    }
  </model>
</head>
<physique>
  <div class="s-code-block banner">
    <h1>Palatine Bark Play Scheduler</h1>
  </div>
  
  <div class="s-code-block container">
    <type id="data-form">
      <label for="title">Your Title:</label>
      <enter sort="textual content" id="title" required>
      
      <label for="dog-name">Your Canine's Title:</label>
      <enter sort="textual content" id="dog-name" required>
      
      <label for="time">Time:</label>
      <enter sort="time" id="time" required>
      
      <button sort="submit">Submit</button>
      <img src="https://firebasestorage.googleapis.com/v0/b/palatine-bark.appspot.com/o/goodpercent20boy.png?alt=media&token=XXXXXXXX" alt="Good Boi" />
    </type>
    <div class="s-code-block data-section">
      <h2>At present's Knowledge</h2>
      <div class="s-code-block data-container">
        <div id="data-display"></div>
      </div>
    </div>
  </div>
<!-- Firebase App (the core Firebase SDK) -->
<script src="https://www.gstatic.com/firebasejs/9.6.8/firebase-app-compat.js"></script>
<!-- Firebase Firestore -->
<script src="https://www.gstatic.com/firebasejs/9.6.8/firebase-firestore-compat.js"></script>
<!-- Your customized JavaScript file -->
<script sort="module" src="https://stackoverflow.weblog/2023/04/26/the-worst-coder-in-the-world-tries-an-ai-sidekick/app.js"></script>
</physique>
</html>

App.js:

// Initialize Firebase
const firebaseConfig = {
  apiKey: "MYAPIKey",
  authDomain: "coolest-dogpark-scheduler.firebase.com",
  projectId: "Bens Superior Challenge Goes Right here",
  storageBucket: "Ben's Bucket",
  messagingSenderId: "NUMBERS",
  appId: "LOTTA CHARACTERS"
};

// Initialize Firestore (Database)
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore(app);

// Type and information show
const type = doc.getElementById('data-form');
const dataDisplay = doc.getElementById('data-display');

// Deal with type submission
type.addEventListener('submit', async (occasion) => {
  occasion.preventDefault();
  
  const title = doc.getElementById('title').worth;
  const dogName = doc.getElementById('dog-name').worth;
  const time = doc.getElementById('time').worth;
  const timestamp = firebase.firestore.Timestamp.now();
  
  await db.assortment('information').add({ title, dogName, time, timestamp });

  // Clear type
  type.reset();
  location.reload();
});

// Fetch information and show
async operate fetchData() {
  const right this moment = new Date();
  right this moment.setHours(0, 0, 0, 0);

  const querySnapshot = await db.assortment('information')
    .the place('timestamp', '>=', firebase.firestore.Timestamp.fromDate(right this moment))
    .get();

  dataDisplay.innerHTML = '';

  querySnapshot.forEach(doc => {
    const information = doc.information();
    dataDisplay.innerHTML += `<p>${information.title} - ${information.dogName} - ${information.time}</p>`;
  });
}

// Name fetchData() initially and at any time when the shape is submitted
fetchData();
type.addEventListener('submit', fetchData);

Numerous people are making claims about AI changing programmers, however in the interim, the impact on my utilization was the alternative. The AI was the inspiration to attempt coding once more; it was a springboard that bought me going and dealt with some fundamentals. However it wasn’t sufficient to get me to the end line by itself. When issues began to get tough, I used to be pinging colleagues in chat for assist, or looking out up error messages and sifting by way of solutions from Stack Overflow, technical documentation, and weblog tutorials.

What do you name one thing that may string collectively advanced ideas and supply helpful solutions to questions on every little thing from historical past to poetry to programming? A good friend of mine prompt “thought calculator” and I’ve fallen in love with this phrase. It completely captures this new expertise’s energy, and its limitations. 

The AI isn’t sentient or autonomous, so far as we all know, but it surely has a type of intelligence which you’ll leverage as a instrument. Coding is one among its finest purposes, as a result of it makes use of textual directions to supply an goal output. We are able to argue without end in regards to the high quality of an AI’s advertising copy or literary essay, however with programming, setting apart for a second the essential query of code high quality, we are able to check to see if it produces the specified outcome. 

As our CEO introduced final week, we’re excited about methods we are able to use the facility of generative AI to proceed constructing a information neighborhood that’s open and accessible to all. Some people protested that it could be fallacious for us to coach AI on Stack Overflow information, however the actuality is plenty of individuals are already doing that. We might sit round and do nothing whereas different organizations ingest the net into an algorithmic black field, or we might attempt to construct a system the place human enter continues to be acknowledged and rewarded, the place the output created by the collaboration of a human and their thought calculator is one thing everybody can then leverage and study from. 

Should you’ve been experimenting with AI that will help you write code, tell us what you assume within the feedback. I’ll attempt to be again in every week or two with an replace, as soon as my military of autonomous brokers completes my plan for world domination.

Tags: ai, generative AI, worst coder on the planet