Is ChatGPT actually useful for coding?

all right how's it going everyone so there is a lot of hype around chat GPT and I wanted to make a video on it to join the bandwagon so you can thank me later um so what I did in a previous video a couple days ago was I built a little application that had some check boxes and I don't have the code anymore but it basically looks like this where you have some check boxes and some rows and you can click read write or delete and the only time delete can be enabled I believe is if you have read and right clicked um and if you were to click on delete it'll enable read and write and if you were to uncheck right it will turn off delete and it took me about 20 something 23 minutes to explain and walk through this code and write it up and I had to do some refactoring along the way to make it work but what I wanted to try to do is like use chat GDP or GPT to do the exact same thing and see how successful it can make the exact same logic um and again I'm just like trying to uh play around with this so what I need to do I logged into chat open Ai and I think the bottom might be cut off so let me just go and load the devtools real quick um I don't really know too much about this I just kind of started playing with it but basically you can ask it a question and it gives you a response right so in our case we need to build out that functionality so the the more you understand the business requirements and the business Logic the better I believe the AI can generate what you want so in our case we want um to basically create a react jsx page which has check boxes I guess I could say has four rows of check boxes actually let me let me rephrase this greater react GSX page which displays um four rows and in each row contains three check boxes representing read write and delete permissions of a system I don't really know I'm just trying to write some stuff some fluff text and then now I want to kind of explain the business requirements so when a user clicks on the delete check box it should automatically check the read and write check boxes in that row each row should be isolated in regards to the logic and then I'm also going to say um when a user unchecks either read or write make sure delete is unchecked automatically I can't type automatically okay now finally I want to say um the page should have a button which allows the user to click submit which will send the check box state to an API let's just try this out and see what happens okay hopefully it's going to be pretty cool and now I did play rounds a little bit and you do have to spend a lot of time like telling it to rewrite telling it to redo some things but let's see what it generates and let's see if it can solve the problem kind of the same way that we solved it in the video so it looks like it's creating a permissions page that has some state that has an array of four things so far it seems pretty good to me um it has a handle change button that when you click on it I guess you pass the index of the row in the name of the check box you want to check um this is a factory function so I have to figure out what's going on here but basically it's going to update the permissions and it's going to toggle the checkbox you selected either true or false depending on the Dom elements target.checked um if name is equal to delete it's going to basically set read and write to the same state as the delete which seems good um new permission delete is equal to full so if you don't select delete it's going to basically uncheck delete and then it updates the permissions on the page handle submit's not doing anything I don't know why they left a comment here and let's read through the code real quick we got some permissions input check box read write so let's just copy this code and see what happens it seems okay but you know you won't know it's good until you actually run it so this is called information's page let me make a new page called um permissionspage.jsx I think I'm using typescript but I'm just going to go ahead and use jsx for this example and then I'm going to go ahead and just render out permissions permissions page like so so there is some like you know coding you have to do and you use these AI things and I don't know why it's not Auto importing this let's go back and see what's going on here okay I don't know what's going on like why cannot not not find that this is the stupid stuff you run into when you're coding that should be super basic I mean permissions no I don't mean permissions it's called permissions page it's from a file called permissions page why is this so hard to do you know I'm gonna change this from export default to export const and then I'm gonna go ahead and just start fresh I went ahead just renamed this to typescript just because like for some reason I guess the Veet setup cannot import this jsx you know what I'm just going to tell GPT to like use typescript because I don't know why this isn't working but anyway we got the code here there are some errors in it and there's some functionalities that haven't built out yet but let's just go ahead and like go to the app and see what we get so we got read write and delete if I select on these it's it actually does exactly what we want that's kind of scary but I mean that's pretty awesome too like the AI is smart enough to read my prompt and the first time and it kind of gets it correct now the second thing I want to do is like why don't you do submit I'm gonna go ahead and just select some of these like this and click submit and it doesn't do anything but let's actually verify the code a little bit if I were to print out like permissions here go ahead and say like console log permissions let's verify like do we get this data foreign we get an array that has all of the values correctly set up and updated based on how you have them checked so that's um that's pretty cool that's my initial investigation of chat GPT but I think it's pretty crazy the first prompt I gave it it actually gave me the fully working code that solved the problem exactly how I need it to be solved now I could potentially have it rewrite and have it like actually fill out the handle cement like so let's just go here and say like finish out the handle submit function and what it's going to do it's going to look at the previous prompts and it's going to like Auto generate the thing again in this case it's actually just going to generate the handle submit function for us so if you don't know how to like submit stuff to a backend you can actually use chat uh GPT I keep forgetting the acronym to implement this stuff out which is actually pretty cool now so I can copy this stuff out and if I want to like get an understanding of what's going on here it kind of explains a lot to you I already know what happens here but copy that in and this is going to assume you have an API called slash permissions that you can do a post request to so it's pretty cool now you can continue iterating upon this code like I could say add some error handling if you don't have anything checked like let's just try it out so rewrite the page so that if so that when the user submits actually let me say this rewrite the page to have error handling handling to not allow the user to click the submit button unless they have at least checked one field in each row let's see what it does when I give it some additional business logic to kind of implement and it takes a while to kind of settle this stuff up so let's just give it a second overall I'm pretty impressed with this um now sometimes it does get stuck and you have to like tell it to continue and it like redoes the prompt but I've used GitHub copilot and I like copilot a lot because it kind of like fills in the blanks for you as you're trying to write this tool also seems pretty powerful um just for building out smaller components or building out smaller pieces of functionality like let's say you need a function that does some complicated logic you could start by using this AI to basically generate for you and then you can read over it and iterate upon it now at the end of the day like this isn't going to replace the developer at least not yet because I still have to read through this code and make sure it works right sometimes it doesn't actually fill out the places that you need it to fill out sometimes it generates bad code sometimes it writes sub optimal code sometimes it writes code that's not really readable by a human so let's just try copying this code and see if it actually changed anything so it added some validate form and it Loops through every permission and it says if either read write or delete is not checked then it pushes an error and then I believe it'll set the errors here so let's copy the code I'm going to go ahead and paste it in here save it and then I'm going to go ahead and check out this and click submit and now we have some functionality where it actually like gives us some errors when you don't fill out the right things now I'm going to go ahead and say like rewrite the code to display Red Alert banners that show the errors and also highlight the row in red that was not filled in generate the CSS for these pages and components let's see what happens if you tell it to do a little bit more one thing I don't like about it takes so long to generate code it's like dude I don't know if this is like a forced delay they add to like the page they make it seem like it's typing to you but personally I would rather just print me the code um maybe it's generating code on the Fly and it actually takes us long for the AI to generate this stuff but I mean obviously this is a faster than a human can write it um I don't I don't know any developer who can code an entire component like this as fast as this AI can so it's kind of impressive to be honest okay and I yeah so it is just grabbing some stuff from bootstrap but let's just go ahead and copy all this stuff permissions page is CSS um let me go ahead and paste that in I'm going to make a file called permissionspage.css and then I'm going to say continue generating the CSS file for me and let's see if we can actually generate the CSS file all right hopefully this uh does what we want to copy this code paste it in here and let's go back to our app and provide it um I think it's because I had the changes to export cons I don't actually let's just go back to this I'm gonna go ahead and just change that a little bit there so now we actually have some styles okay so overall I mean it's pretty cool that's just one little example that scratches the service of this tool but I would definitely recommend signing up and like just playing around with it and see like how powerful is this I'm gonna make a new chat because I'm kind of done with this this checkbox stuff I mean I'm impressed it actually kind of actually there's one more thing I want to show so in my video I actually solved the solution not using an array I used I'll watch an ad real quick I need to sign up for YouTube premium but if you look at the code I have ultimately I ended up finding a solution that used a map like this right so the state is a map of T1 T2 and then inside of those we have nested objects it's a little bit different solution but let's see if I were to go to chat GPT and say rewrite the component the page component to use a map instead of an array for keeping track of the uh permissions State go ahead and click enter actually I don't know if there's a way to stop it from doing all the CSS stuff it should be done in a second though I guess I'm curious will it generate the exact same solution that I did [Music] um it's using an actual JavaScript map which I guess works fine it's kind of I rather use an object personally not a map but I think it's going to basically generate the perfect code so let's just go ahead and stop this I mean I'm impressed I think you guys should be impressed too that it basically solved the same problem that I did here in a lot less time and it probably gave a it kind of give a different solution and different approach to the solution which is pretty cool and added validation I even do validation in my video so that's pretty cool but like obviously I think another powerful thing you can use for this AI is like just doing self-discovery and learning one thing I like to do and I'm learning something new is just like experimenting go down these different paths or like learning stuff so for example I've never used though before I mean maybe once for like an hour but let's say I just want to like learn a little bit about go and how the ghost syntax works right I could say like how do you write a for Loop in go okay I don't have to go to any docs I don't have to go anywhere I just ask a question and it literally tells me how I can write a for Loop using go and it actually gives me a bunch of different examples the most basic type with the single condition okay so this is a I don't know what the syntax is right so I don't know what colon equals is so what I'm going to do is when this thing is done I'm going to ask it I'm going to say hey chat and GPT like what does the colon equal sign mean and go what does oh hello what does the colon equal mean in go go language I guess it's called golang okay so like as you're reading through this code you might have no idea like what any of this stuff does um I'm guessing this is an assignment operator and go the only equal operators use it to clear and initialize a new variable at the same time it's a shorthand form of our keyword and the equal operator okay so I guess if you don't do this you'd have to say VAR whatever declare and initialize a new variable with the the operator can only be used inside a function body cannot be used at a package level so there's stuff that I don't really understand about this like syntax and stuff but the point is you can kind of go down this path of just like trying things out and learning like the syntax of a language if watching a full-on YouTube tutorial course is too much for you or greeting through the documentation of go is too much for you you actually have this like AI that can kind of hold your hand and explain things to you which I think is super powerful I mean the code generation thing is like pretty powerful as well as we just saw because it basically solved the exact same problem I did in like five minutes first try which is kind of sad I think we might be out of a job soon um but yeah definitely check it out I mean there's more stuff I want to play around with but my thoughts are I'm kind of impressed with this I think it's a great tool that maybe a beginner or an entry level programmer can use to help generate code and try to understand solutions to problems especially if you're like I'm working on a team by yourself and you don't have that many people you can collaborate with and talk to um having this AI that can kind of walk you through and give you examples I think is really beneficial but in terms of job security I don't think we're getting close there yet to like have the stuff replace us these things might replace some lower level tasks that we have to do as programmers like let's say you're given a business requirement where you need to write a function that groups uh all of the people in an array by their last name or something like the first character the last name so write to me a JavaScript function which takes in an array of people's names in groups their names based on the first letter of their last name [Music] um make sure the groups are sorted in a sending order so like for lower hanging fruit tasks like this that sometimes you'll go to stack Overflow you gotta solve these problems yourself you could just ask the AI to do stuff for this and you'll see how powerful this is right he takes in a name a list of names and then it creates a groups object and then it Loops through the names and then it splits the names by first name and last name it looks at the first character of the last name and then it'll set up the group if it doesn't have that group already pushes the name into the group based on that first letter then it sorts it then it returns it and here's an example where basically outputs J and it has John Smith window as B for Bob Johnson a Alice Williams so it's actually grouping it by the first letter of the first name which is not exactly is this exactly what we want maybe the example is bad because it should have been grouping by like John Smith like it should have S so I'm actually going to take this code real quick and let's just play around with it and honestly this permissions page stuff we can just get rid of it foreign copy this whole function and I'm going to call it the group names of we'll say John myth Alex Jones Bob Saget so if I were to run this in my editor press the page I'm not printing anything so obviously it's not going to do anything let's just print this out real quick and we get J and we get S and S is Smith in Bob Saget so I think it does work I think the example that it gives us is actually incorrect because why would it have b as a group when I told the group by last name you know what I mean like this J for Bob Johnson should have been here so there's there's things that you know it can't be perfect the EA can't give you a perfect example and it takes someone who has experience and expertise in reading code to make sure that when I read through this like nothing seems uh bad about it now the great thing is is if you use this AI to generate smaller functions you could probably have a generate test for those functions as well um and if you just generate small enough code that you can kind of read yourself and verify like I think this is super beneficial but definitely check it out try it yourself try you know seeing how how powerful it can be to generate us functions or components or entire applications I don't know how far you can take it I haven't really played with it too much but I'm assuming you could tell it to build you a full on like Connect Four application or something or a full-on a full stack application you just have to be very very uh patient and you have to probably have it keep on regenerating stuff over and over again and having it pause and continue and at that point like I'd rather kind of just have it code the smaller chunks and copy and paste those into my code base and then me myself I can kind of connect all the dots together in my code anyway hope you guys like this little overview hope you guys uh got good exposure to this tool and my thoughts on it and I'm pretty impressed I might actually play around this a little bit more because it seems like everyone else is hyping it up and it's actually pretty cool I'm not gonna lie it's pretty cool so if you enjoyed watching give me a thumbs up subscribe and press the Bell icon and like always have a Discord Channel if you want to connect with me or anyone else who's learning how to code feel free to join my Discord and ask questions there and we should hopefully help you out if you're stuck on anything anyway have a good day happy coding

Channel: Web Dev Cody

Views: 326,137

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: B3yuK2XHmvM

Length: 21min 40sec (1300 seconds)

Published: Sat Dec 24 2022