Week 284 was posted by Charanjit Chana on 2023-04-03.
While I briefly took a look at GitHub's Copilot while it was in beta, I never really dived in deep enough to see how capable it was. Anecdotally, on Twitter, I've seen that it can be quite useful but more and more I'm seeing that it's usable but requires review to ensure the intent is correct and mistakes haven't been made.
The prompt
To my surprise, I managed to use v3.5 of ChatGPT from OpenAI to build a Vue.js app. I even got it to write me the content for this article but decided to write it up manually so I could accurately cover the issues I came across. This was my initial prompt:
Write an article about building a Vue js todo app in the style of Charanjit Chana. The audience is a recent graduate from university and should include links to relevant YouTube videos and code samples.
The output was about as verbose as I'd expected but didn't include any outbound links to additional resources. On the face of it, it did look plausible that it could work with minimal effort but I don't want to dive into the world of npm or node. ChatGPT is pretty good at being aware of it's context so this was my next prompt:
Can you give me the instructions without having to use npm
The output was smaller and more inline with what I was thinking but made the assumption that an API existed to capture the data. It also expected a node server to be running in order to serve the file (and 'back-end') but I didn't want to have to bother with that either. I asked it to remove the node dependency and to rely on local storage as the back-end:
Can you give me the instructions without the need to use node so that the output is static content that works with cookies or local storage
The result?
Now we're talking!
You can see the entire output from ChatGPT and I've hosted a full demo over on Codepen (embedded below).
ChatGPT's Todo App Demo
I've included the final code output from ChatGPT below.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Todo App</title>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
</head>
<body>
<main>
<div id="app">
<h1>Todo List</h1>
<input type="text" v-model="newTodoText">
<button @click="addTodo">Add Todo</button>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
</div>
</main>
<footer>
<p><small>This is an app for demo purposes, generated using AI. Do not enter any sensitive information. Do not rely on this for anything important.</small></p>
</footer>
<script>
// Vue.js code
</script>
</body>
</html>JavaScript
new Vue({
el: '#app',
data: {
todos: [],
newTodoText: ''
},
methods: {
addTodo () {
const newTodo = { id: Date.now(), text: this.newTodoText }
this.todos.push(newTodo)
this.newTodoText = ''
localStorage.setItem('todos', JSON.stringify(this.todos))
}
},
mounted () {
const todos = localStorage.getItem('todos')
if (todos) {
this.todos = JSON.parse(todos)
}
}
});Issues with the output of ChatGPT
It wasn't all plain sailing, while the app mostly works, I don't really know Vue.js well enough to comment on how well it has followed best practice or even if this would be the right way to approach such an app. It works, so it's a great start, but without the right amount of knowledge I wouldn't bet on it being suitable for production ready code.
ChatGPT mixed up versions of Vue.js
This was the biggest issue, ChatGPT linked to the most current version (v3 at the time) of Vue.js, but the code sample it gave was suited to v2. I changed the source after checking the official documentation, and that got things moving.
I would put this down to the data set used to train the AI model not being current enough. A better set of instructions could overcome this or a newer model might produce code that is more relevant to a more modern version of Vue.js.
No error handling / validation
There's no error handling at all, maybe with a better prompt then it would provide me with something meaningful but at the moment you can just submit empty or duplicate data at will
Not a true todo app
It functions well enough for something I wrote 0 lines of code for, but it is not really a todo app in the true sense. It tells me what I need to do, but once it's been done I can't mark it as done or remove it so it's missing a more than half of the functionality it should have.
Bad usability and accessibility
The HTML is as basic as it can be, but I'd argue it's inaccessible and invalid. OK, I am relying on localStorage so there's no server side fallback anyway. I'm sure it would fail an audit.
The functionality is so basic that it doesn't even clear the field after you successfully submit the value. The experience delighted me only because it worked, nothing about using the interface is fun.
What about the CSS
There was no attempt to style the app at all, as you can see in the Codepen above, it just falls back to the way in which the browser renders HTML. It's just boring.
In conclusion
An interesting experiment and if you're specific enough with your prompt maybe you could flesh it out being into something really useful but for now I'll stick to writing code myself. I might use ChatGPT to help solve problems in addition to running searches through Google. There is something about the conversational nature of the service... but maybe that's just the novelty of it all.
Tags: ai, chatgpt, development, javascript, vuejs