1 00:00:00,090 --> 00:00:01,890 -: In this video we're gonna be exploring the role 2 00:00:01,890 --> 00:00:04,890 of ChatGPT in code generation. 3 00:00:04,890 --> 00:00:08,430 So let's think about how we could use ChatGPT 4 00:00:08,430 --> 00:00:10,470 for our benefit when it comes to generating code. 5 00:00:10,470 --> 00:00:14,220 'Cause sometimes as coders we find ourselves writing code 6 00:00:14,220 --> 00:00:15,990 that's kind of redundant or repetitive 7 00:00:15,990 --> 00:00:18,900 and it's almost what we call boilerplate code, 8 00:00:18,900 --> 00:00:21,480 which is basically reoccurring 9 00:00:21,480 --> 00:00:22,830 and it's kind of a structure 10 00:00:22,830 --> 00:00:24,750 that's going to always be there. 11 00:00:24,750 --> 00:00:28,440 Doesn't really take brain power to come up with per se, 12 00:00:28,440 --> 00:00:31,470 but it definitely helps to kind of automate this process 13 00:00:31,470 --> 00:00:33,930 and that's definitely something that ChatGPT can help with. 14 00:00:33,930 --> 00:00:38,930 So let's ask ChatGPT to write a simple website for us. 15 00:00:41,220 --> 00:00:43,803 Do you write a simple website for me? 16 00:00:44,880 --> 00:00:46,830 Now this could be a pretty loaded question. 17 00:00:46,830 --> 00:00:50,700 So it may be the case that it will ask me to sort 18 00:00:50,700 --> 00:00:52,800 of clarify the constraints of this website. 19 00:00:52,800 --> 00:00:54,600 So what exactly do I want? 20 00:00:54,600 --> 00:00:56,850 What kind of features do I want to see on this website? 21 00:00:56,850 --> 00:00:59,340 So that's kind of exactly what it's coming up with. 22 00:00:59,340 --> 00:01:02,280 It's not able to create one from scratch, you know, 23 00:01:02,280 --> 00:01:04,860 decide on the purpose and content of your website. 24 00:01:04,860 --> 00:01:08,820 So now it's actually kind of giving me a sort of this way 25 00:01:08,820 --> 00:01:11,670 that I can go about building a website 26 00:01:11,670 --> 00:01:14,029 and it's almost kind of dodging the question, 27 00:01:14,029 --> 00:01:16,140 but we'll see that if I actually kind 28 00:01:16,140 --> 00:01:18,330 of reword this question, I can actually get it 29 00:01:18,330 --> 00:01:20,910 to report to me what I want. 30 00:01:20,910 --> 00:01:23,530 And one thing that's worth noting is that sometimes, 31 00:01:23,530 --> 00:01:26,070 you do need a little bit of domain knowledge 32 00:01:26,070 --> 00:01:27,720 to know what to ask for. 33 00:01:27,720 --> 00:01:30,360 So that's what I'm gonna try to give to you in this course. 34 00:01:30,360 --> 00:01:33,720 So one thing that's really big when it comes 35 00:01:33,720 --> 00:01:34,920 to website building is that there 36 00:01:34,920 --> 00:01:38,700 is these files called HTML files, 37 00:01:38,700 --> 00:01:41,040 which can actually author very simple websites. 38 00:01:41,040 --> 00:01:46,040 So maybe I want a simple portfolio website written in HTML. 39 00:01:49,494 --> 00:01:53,497 So if we say something like that, ChatGPT sure enough says, 40 00:01:53,497 --> 00:01:55,797 "Sure, I'd be happy to provide you with that." 41 00:01:55,797 --> 00:01:58,440 So this is a basic example. 42 00:01:58,440 --> 00:02:00,483 You can modify it to fit your specific needs. 43 00:02:00,483 --> 00:02:04,170 So if we go ahead and look in here, we see 44 00:02:04,170 --> 00:02:06,330 that it's actually writing us code right now. 45 00:02:06,330 --> 00:02:09,150 And one thing that's a little weird is that it's saying 46 00:02:09,150 --> 00:02:11,130 that, I don't know if you guys are familiar 47 00:02:11,130 --> 00:02:13,110 with code snippets, but typically 48 00:02:13,110 --> 00:02:14,610 when it shows up in this block 49 00:02:14,610 --> 00:02:19,290 of text with this different font, this is what's sort 50 00:02:19,290 --> 00:02:20,340 of a coding snippet 51 00:02:20,340 --> 00:02:23,220 and in certain types of types of languages that are used 52 00:02:23,220 --> 00:02:27,600 to express text, they kind of stylize it in this way. 53 00:02:27,600 --> 00:02:30,360 And it's kind of weird that up here it says PHP, 54 00:02:30,360 --> 00:02:32,160 which happens to be another language 55 00:02:32,160 --> 00:02:34,290 that is not what's shown here. 56 00:02:34,290 --> 00:02:36,363 This is clearly an HTML file. 57 00:02:37,440 --> 00:02:39,780 So that is what we're gonna be using 58 00:02:39,780 --> 00:02:41,850 as our base for our website. 59 00:02:41,850 --> 00:02:43,740 Now it's not gonna be one that's deployed 60 00:02:43,740 --> 00:02:46,380 at some domain name or URL, so we're not gonna be able 61 00:02:46,380 --> 00:02:49,200 to access it on the internet, but sure enough it 62 00:02:49,200 --> 00:02:51,510 is a layout for a website. 63 00:02:51,510 --> 00:02:54,240 So it's telling us exactly what it does too. 64 00:02:54,240 --> 00:02:56,700 So it's saying it includes the basic structure 65 00:02:56,700 --> 00:02:58,950 of a portfolio website and the things 66 00:02:58,950 --> 00:03:01,440 that it's included for us for free almost. 67 00:03:01,440 --> 00:03:03,870 So we can go ahead and copy this code, come over 68 00:03:03,870 --> 00:03:05,940 to Visual Studio Code. 69 00:03:05,940 --> 00:03:08,790 Now I've just created a folder on my desktop 70 00:03:08,790 --> 00:03:09,780 that basically is just gonna 71 00:03:09,780 --> 00:03:13,170 hold a file called website.html. 72 00:03:13,170 --> 00:03:14,850 It doesn't have to be called website.html, 73 00:03:14,850 --> 00:03:16,260 that's just what I'm calling it. 74 00:03:16,260 --> 00:03:18,840 But it does have to have this file extension HTML, 75 00:03:18,840 --> 00:03:20,910 'cause that kind of hints at your operating system 76 00:03:20,910 --> 00:03:24,240 that it's something you wanna open with your web browser. 77 00:03:24,240 --> 00:03:28,080 So go ahead and do that and we paste that in and save it. 78 00:03:28,080 --> 00:03:30,240 Just using control S as a shortcut. 79 00:03:30,240 --> 00:03:32,430 I'm gonna actually go ahead and open that 80 00:03:32,430 --> 00:03:35,490 in my file explorer and I'm going to open it. 81 00:03:35,490 --> 00:03:39,450 So as you can see, that kind of went to Google Chrome, 82 00:03:39,450 --> 00:03:41,280 which is my web browser of choice. 83 00:03:41,280 --> 00:03:44,160 And now we can see that this local file is being referenced 84 00:03:44,160 --> 00:03:46,500 and it's been opened and sure enough, 85 00:03:46,500 --> 00:03:48,060 that's a website right there for us. 86 00:03:48,060 --> 00:03:49,710 And if we wanted to go through 87 00:03:49,710 --> 00:03:53,073 and substitute out these things, my portfolio, my name, 88 00:03:53,910 --> 00:03:56,010 this is sort of just like a template for a website, 89 00:03:56,010 --> 00:03:58,770 it's kind of like the bone structure of a template 90 00:03:58,770 --> 00:04:00,630 or of a website if you will. 91 00:04:00,630 --> 00:04:02,190 So if I go ahead and change that 92 00:04:02,190 --> 00:04:03,540 and refresh the file, you'll see 93 00:04:03,540 --> 00:04:06,000 that my name actually appears there. 94 00:04:06,000 --> 00:04:07,860 So if you didn't know anything about this 95 00:04:07,860 --> 00:04:11,100 before, this is like a really useful tool for just coming up 96 00:04:11,100 --> 00:04:12,704 with a basic website 97 00:04:12,704 --> 00:04:17,704 and there are ways to make it look better, which is CSS. 98 00:04:18,089 --> 00:04:20,310 So, and it actually mentions that right here. 99 00:04:20,310 --> 00:04:22,860 Keep in mind that you'll need to create a style CSS file 100 00:04:22,860 --> 00:04:24,060 to add styles to your website 101 00:04:24,060 --> 00:04:25,770 and make it look visually appealing. 102 00:04:25,770 --> 00:04:29,190 So that's something you could continue probing ChatGPT 103 00:04:29,190 --> 00:04:31,952 about and asking it to generate styles for you. 104 00:04:31,952 --> 00:04:34,348 Now this is a pretty bare bones thing, 105 00:04:34,348 --> 00:04:37,495 so we're gonna actually try to take it a step ahead 106 00:04:37,495 --> 00:04:42,039 and try to get it to use a framework that's known as React 107 00:04:42,039 --> 00:04:43,890 for building a website. 108 00:04:43,890 --> 00:04:48,240 So how would I go about 109 00:04:48,240 --> 00:04:52,593 creating a web app using the React framework? 110 00:04:53,610 --> 00:04:55,262 So let's see what it tells us here 111 00:04:55,262 --> 00:04:59,490 because these problems are actually well documented online. 112 00:04:59,490 --> 00:05:03,420 So this is a framework that coders can use. 113 00:05:03,420 --> 00:05:04,920 It's essentially coders building 114 00:05:04,920 --> 00:05:07,028 on top of other people's codes. 115 00:05:07,028 --> 00:05:10,083 So Facebook actually created this framework called React 116 00:05:10,083 --> 00:05:14,880 and people have used it to help create their web apps. 117 00:05:14,880 --> 00:05:17,100 And here it's saying creating web app 118 00:05:17,100 --> 00:05:19,545 using the React framework involves a few steps 119 00:05:19,545 --> 00:05:22,650 and it's basically telling us how we can do that. 120 00:05:22,650 --> 00:05:25,500 We're gonna need to install Node.js, 121 00:05:25,500 --> 00:05:27,930 the node package manager, this is basically the runtime 122 00:05:27,930 --> 00:05:29,908 for JavaScript. 123 00:05:29,908 --> 00:05:33,930 And then this is a way to install packages 124 00:05:33,930 --> 00:05:36,060 or basically sort of components 125 00:05:36,060 --> 00:05:38,940 or modules that you'll need to install into your project. 126 00:05:38,940 --> 00:05:41,220 So there's tons of instructions online 127 00:05:41,220 --> 00:05:42,480 about how you could go about doing that 128 00:05:42,480 --> 00:05:45,030 or you could even ask ChatGPT how you could do that. 129 00:05:45,030 --> 00:05:46,740 Luckily for me, I already actually had these things 130 00:05:46,740 --> 00:05:50,683 installed so I'm not actually gonna go ahead and do that. 131 00:05:50,683 --> 00:05:55,683 So let's instead ask how could I create a React app? 132 00:05:57,480 --> 00:05:59,100 So to create a new React app, 133 00:05:59,100 --> 00:06:02,100 you can use a command line tool called Create React App, 134 00:06:02,100 --> 00:06:03,150 which is the official way 135 00:06:03,150 --> 00:06:05,490 to start a new single page React application. 136 00:06:05,490 --> 00:06:07,210 That's exactly what I was looking for actually. 137 00:06:07,210 --> 00:06:11,220 So it actually is able to tell me this based off 138 00:06:11,220 --> 00:06:12,881 of the internet data that it's synthesized 139 00:06:12,881 --> 00:06:16,980 and here it's actually giving me the exact answers that I, 140 00:06:16,980 --> 00:06:20,520 or sort of steps that I need to follow to do that. 141 00:06:20,520 --> 00:06:22,683 Now one thing that's worth noting is maybe 142 00:06:22,683 --> 00:06:25,020 in the earlier question that I asked about 143 00:06:25,020 --> 00:06:28,543 how you could write a simple website for me, basically, 144 00:06:28,543 --> 00:06:31,350 it doesn't know what our specs are, right? 145 00:06:31,350 --> 00:06:33,390 Like ChatGPT isn't sort 146 00:06:33,390 --> 00:06:36,090 of this all powerful being in the sense that it's going 147 00:06:36,090 --> 00:06:37,770 to be able to be an endless pool 148 00:06:37,770 --> 00:06:39,451 of creativity like you as a human. 149 00:06:39,451 --> 00:06:41,460 This unique human 150 00:06:41,460 --> 00:06:44,220 and technology interaction is something 151 00:06:44,220 --> 00:06:46,320 that together can be very fruitful. 152 00:06:46,320 --> 00:06:50,490 It's not like a magic spell that we can suddenly just use 153 00:06:50,490 --> 00:06:53,520 and it'll be the cure all to everything, right? 154 00:06:53,520 --> 00:06:57,630 So there does require a little bit of domain knowledge 155 00:06:57,630 --> 00:06:58,920 to know what to ask it, 156 00:06:58,920 --> 00:07:03,920 but once you know that lots of doors are opened so to speak. 157 00:07:03,930 --> 00:07:06,330 So once you have this installed, 158 00:07:06,330 --> 00:07:08,460 after you have the Node Package Manager, 159 00:07:08,460 --> 00:07:10,620 we can actually run this command. 160 00:07:10,620 --> 00:07:11,730 Interesting that these codes, 161 00:07:11,730 --> 00:07:13,080 snippets are labeled Lua as well. 162 00:07:13,080 --> 00:07:15,753 'Cause that's a scripting language that is definitely 163 00:07:15,753 --> 00:07:18,570 not being used here. 164 00:07:18,570 --> 00:07:20,340 Quite the opposite of that. 165 00:07:20,340 --> 00:07:23,220 We're actually going to be running this command. 166 00:07:23,220 --> 00:07:27,180 NPX create React app my app in the command line. 167 00:07:27,180 --> 00:07:29,127 So if you go ahead 168 00:07:29,127 --> 00:07:32,160 and run that, it's going to run this command 169 00:07:32,160 --> 00:07:34,350 on an app called My App. 170 00:07:34,350 --> 00:07:36,690 And it's also gonna create a directory for us. 171 00:07:36,690 --> 00:07:40,110 And as we can see here, a directory has been created 172 00:07:40,110 --> 00:07:43,580 and we can look inside that a file has been created. 173 00:07:43,580 --> 00:07:47,700 This progress bar that shows here is also representative of 174 00:07:47,700 --> 00:07:50,644 that app kind of being generated as we speak. 175 00:07:50,644 --> 00:07:54,291 And yeah, so we are just gonna give this a second to run, 176 00:07:54,291 --> 00:07:59,130 but in the meantime we can continue kind of looking through 177 00:07:59,130 --> 00:08:01,800 what ChatGPT has prescribed for us. 178 00:08:01,800 --> 00:08:05,730 So we can see here that once you do generate this, we go to, 179 00:08:05,730 --> 00:08:07,080 we're gonna wanna change directory. 180 00:08:07,080 --> 00:08:08,640 That's what the CD stands for. 181 00:08:08,640 --> 00:08:09,840 So it's pretty interesting here. 182 00:08:09,840 --> 00:08:11,580 It actually has the correct sort 183 00:08:11,580 --> 00:08:14,550 of code snippet detail here. 184 00:08:14,550 --> 00:08:16,830 So it's actually Bash, I'm not using Bash 185 00:08:16,830 --> 00:08:18,090 'cause I'm on Windows, 186 00:08:18,090 --> 00:08:21,690 but I'm using the PowerShell window here. 187 00:08:21,690 --> 00:08:23,730 You can see PS, which is the Windows equivalent 188 00:08:23,730 --> 00:08:25,740 of the command line, essentially. 189 00:08:25,740 --> 00:08:28,770 And basically we're gonna change directories 190 00:08:28,770 --> 00:08:29,610 into this. 191 00:08:29,610 --> 00:08:31,380 Directory is just another computer science way 192 00:08:31,380 --> 00:08:32,610 of saying file. 193 00:08:32,610 --> 00:08:34,227 So once we're in that directory, 194 00:08:34,227 --> 00:08:37,650 we can basically run this NPM start. 195 00:08:37,650 --> 00:08:40,740 Again, this code snippet is kind of off SQL 196 00:08:40,740 --> 00:08:44,490 or standard query language is a way, a sort of language 197 00:08:44,490 --> 00:08:46,710 that we can use to manipulate databases 198 00:08:46,710 --> 00:08:48,300 or interact with databases. 199 00:08:48,300 --> 00:08:51,150 And that's clearly not what's supposed to be here. 200 00:08:51,150 --> 00:08:55,140 So sometimes you've gotta be a little 201 00:08:55,140 --> 00:08:57,960 above ChatGPT in the sense that you kind of have 202 00:08:57,960 --> 00:08:59,760 to know what it's trying to say. 203 00:08:59,760 --> 00:09:01,860 'Cause here this is definitely not a SQL command, 204 00:09:01,860 --> 00:09:04,660 but we're gonna go ahead and run these commands anyways.