Transcription
Is GitHub Copilot or ChatGPT better for software development? In this video, I'll put them to the test. I'm going to create a workout tracking app using both GitHub Copilot and ChatGPT to see which one I prefer.
I decided to create a project with Jasio. Jasio is a serverless platform for full-stack development, and they sponsored this video. I thought this project would be a good test for these AI tools.
So, let's start with Jasio to create a new Jasio project. I'll fill in all the settings. We'll create a full-stack project, and then I'll switch over to the directory and add a new class for WorkoutHandler.
Now we can open this up in VS Code. Let's go into the server code, and we are going to update this WorkoutHandler.ts. This will export the class that we can use in our front end.
Before we start using GitHub Copilot, I want to make sure we have the correct imports. These will help with the data we’re going to get. Then, I'm going to create a model, so I'll make a new folder.
The workout will have an ID, a name, a description, and a duration. Then I'll import our model. Now we’re going to try to use Copilot for as much as we can for the rest of this project.
Let's create a type for our response. Instead of the workout model here, yep, this is what we want. The response we’re going to get from the database will have all this information. Now we can start creating our WorkoutHandler.
Let's see what it's giving us. They don't like that, so let's give it a little more instruction. Okay, first, I will tell it we're in a constructor. This looks pretty good, actually.
It's creating the serialize and then initializing the workout model with all of our data types from the workout model. I think we may need the model name also: workout model and sq.sync. Yep, that's what we want here; that will sync our models to the database.
Next, we want to create a new workout. Yep, looks good. Now we want to get all workouts. Looks good. Now we want to get a workout by ID. Looks good. Update a workout by ID. Looks good.
I think I'm just trying to get through this quickly here. Delete a workout by ID. Looks good. I think this could be all we need. Now, it's not handling some other things, like if there are problems. We could be using try-catch blocks, but let's just use this for now and see how it works.
Let's save this and work on our front end. So, let's go to our app.tsx. We're going to take out some of this default stuff. We're not going to import the backend server, so we’re going to import the WorkoutHandler and the workout response.
Then we can basically delete everything that's already in here for the front end. Well, it's already doing what we want to do. So, let's see. It's fetching the workouts, creating the workouts, and creating a form.
This is having an error here. Let's see if I can fix this. Uh, let's see. Is it going to do it? At least it doesn't show an error anymore. Now, I think I’m going to actually have to deploy this before it will show up here.
Is there any button for deleting? We do want a delete workout button. So, let's see what functions we have here: fetch workouts, create workout. Now I want to delete workout by ID.
So, let's go back over here: delete workout. Okay, it just says it's assigned a value but never used. Well, we'll use it down here: button onClick delete workout and delete.
Okay, we'll save this. We need to get our environment variable in here for our database to connect to our Postgres database. So, what I'm going to do is run Jasio deploy to get this onto Jasio, and then that will allow us to connect to Postgres really easily.
Let me show you. So, we'll just do Jasio deploy. Okay, what I'm going to do is just copy this here. Now, let's ask GitHub Copilot.
Okay, I just have to add a new line to the constructor. So, I’m going to do this a little differently. What I’m going to do is just copy this, and right after the constructor here, I’m going to throw this right in here. There we go.
Then I’m going to just say or an empty string. Hopefully, that fixes these errors here. Let's just try installing this and see what happens.
Okay, it said the backend code was deployed when the SDK was successfully generated. Now we have this line working. Oh, some other things are not working. Now, let's check this.
It says, "Did you mean to access WorkoutHandler with a capital W here instead?" Yeah, so I think we actually don’t even need this line right here. All the WorkoutHandlers should just be capital W, just like that.
Now, I wonder if I just go back to this. Okay, we had to go back to before we fixed it. Now I just have to get the Postgres database working.
With Jasio, it's going to create some links for me, including this app dashboard URL. So, I’m going to copy this. I’m at my app dashboard URL, and we can see the WorkoutHandler. The backend service was created automatically.
We’re not even using that, but what I’m going to do is go to Integrations and then install Postgres. It should look more like that, and so it's already connected to Neon.
Then I’m going to just select all these things. Basically, I’m going to just select the default option for all of these. Now we save the secret. Now we have the connection string right here.
So, we already did this: npm install here. I already did that line. Now I just have to export the environment variable.
Okay, I can finally test the app. I can either test it locally or deploy it and test it on the web. I’m going to test it locally right now.
So, Jasio local. Okay, we have some problems. I had to go through and do npm install pg on the server directory, and then we could do Jasio local.
Okay, let’s try this out. Now we’re going to go to the URL for the front end. Okay, here’s the workout tracker. Let’s see if it works.
Uh, run around the block, 15 minutes, create workout. Nope, not working. Okay, the new post URL is not defined. Oh, that should have an "L" there. Was that the problem?
Okay, I think that was the problem; it was missing an "L." So, Jasio local. Okay, it says the connection is insecure, so we should be able to fix that here.
Okay, dialect options and SSL require true. So, let’s try that again. Oh, I guess I didn’t have to restart the server; it will automatically restart.
Okay, great. Let’s try it: run around the block, 15 minutes, create workout. It works! Run around the block, 15 minutes.
Now we want to add a walk to store, 30 minutes. Okay, we can create workouts. I wonder about the stats workouts. I think that’s if we start.
I just refreshed the page, and if I fetch workouts, it will show the workouts here. Let’s see if I can delete a workout. No, that delete did not work.
Let’s see: delete workout is not a function. Okay, let’s check into that: delete workout by ID. I think that’s what we have.
Okay, WorkoutHandler delete workout by ID. Now let’s see if we can delete a workout. I’ll fetch the workout and delete.
Okay, we can delete, so we do have that function. We made a workout tracker. I mean, we could do more to make this display a little better and maybe add some editing, but that wasn’t too bad creating this workout tracker with GitHub Copilot.
Let’s see what it would be like to create it using only ChatGPT. Okay, I’ve backed up to when we had just created the WorkoutHandler, and we have all the imports, but this class hasn’t been developed, and we don’t have anything on the front end.
It’s just this demo front end, so we still have to create the back end. We still have to create the front end. Let’s see how ChatGPT can do it.
I’m going to go over to ChatGPT and say, “I’m using Jasio to create a workout logging application. Here is my server code so far.” Then I’ll just get this server code, and I’m also going to give it the model.
“Here is my model code. Complete the server code to add CRUD functionality for the workouts and connect to a Postgres database using the URL from this environment variable.”
Okay, I’m just going to copy the code. It’s written a little differently, but I’m not even going to read over it too much. We’re just going to see if it works.
So, I will put in the new server code, and there’s no error right away. Now I’m going to copy the current front end, but I’m going to actually give it this.
I know we’re not going to need any of this, so I’m just going to ask it to write the front end. I’ll show how to import this stuff.
Now, give me the React front end code. Jasio makes API calls to the backend through the SDK. Here is the front end code so far.
Okay, let’s get this code. I already see something that could be wrong, but I didn’t look over it too much.
We’re going to remember we actually took out this line. The other one tried to give us this line too, and we’re going to just make this into WorkoutHandler.
Now we’ll just save this, and I don’t think we need to actually add the Postgres URL because it should be able to just use the URL from before. We can just use the same database.
Okay, I’m just going to have to make sure I have Postgres installed. So, cd server, npm install Postgres.
Let me just actually run this whole line: types and Jasio types, just to make sure I have everything I need. I will npm install Sequelize.
Okay, we had this error before. This time, I’m going to give it to ChatGPT. It actually makes things easier since we already went through this with GitHub Copilot.
Let’s see if it knows what to fix, even though we do kind of know what to fix because we already did it before. Let’s see what ChatGPT does.
I think so, so I’m going to just copy this. That’s the new part, and put that in there. Okay, it’s rerunning, and I think that’s going to work now.
Okay, this is actually it. It’s using the same database from before, so we still have some stuff already in there.
I kind of like that you don’t have to click a button to show the data in the database, and we have an edit and a delete button this time.
First, let’s try actually adding a new workout: walk around the block for 10 minutes and create workout. Let’s see if it shows up.
No, we do have a problem here. H, well, let’s see if we have an error over here. I’m just going to copy this whole error, and then let’s see if ChatGPT knows the solution.
The created_at column of the workouts table is set to not null and needs a value when inserting a new row. To resolve this, we should include the created_at and updated fields in the model definition to ensure Sequelize manages them automatically.
Now, this problem is probably based on the fact that we’re using that same database as before, but let’s see what we’re going to change.
So now I think this is the section that’s changed, so I’ll just copy this whole code and put it right in here.
Okay, now we saved it. It’s reloading here. Okay, let’s see if this works now and create workout.
Okay, we added one. Now let’s see if we can actually edit it. So, oh, when I click edit, it’s going to go up here, and I can update the workout or cancel.
Actually, I didn’t go to the store; I went to school, and it wasn’t 30 minutes; it was 45 minutes. Update workout, and that worked.
Now let’s see if I can delete. Okay, that’s pretty nice. Frankly, what I got from ChatGPT was a lot better than GitHub Copilot, and it was simpler.
I really had to do less. I mean, we have some extra features here. GitHub Copilot made it easier to customize things because I didn’t have to give it the whole code; I could just tell it the exact code I wanted to change.
But really, at least for this use case, ChatGPT worked a lot better. Now, part of it is probably because of the GPT-4 model, and to my knowledge, I think GitHub Copilot is still on 3.5, or it’s said it’s not as advanced of a model.
So that probably also helped ChatGPT give me code that was more in line with what I wanted.