-: In this video we're gonna be exploring the role
of ChatGPT in code generation.
So let's think about how we could use ChatGPT
for our benefit when it comes to generating code.
'Cause sometimes as coders we find ourselves writing code
that's kind of redundant or repetitive
and it's almost what we call boilerplate code,
which is basically reoccurring
and it's kind of a structure
that's going to always be there.
Doesn't really take brain power to come up with per se,
but it definitely helps to kind of automate this process
and that's definitely something that ChatGPT can help with.
So let's ask ChatGPT to write a simple website for us.
Do you write a simple website for me?
Now this could be a pretty loaded question.
So it may be the case that it will ask me to sort
of clarify the constraints of this website.
So what exactly do I want?
What kind of features do I want to see on this website?
So that's kind of exactly what it's coming up with.
It's not able to create one from scratch, you know,
decide on the purpose and content of your website.
So now it's actually kind of giving me a sort of this way
that I can go about building a website
and it's almost kind of dodging the question,
but we'll see that if I actually kind
of reword this question, I can actually get it
to report to me what I want.
And one thing that's worth noting is that sometimes,
you do need a little bit of domain knowledge
to know what to ask for.
So that's what I'm gonna try to give to you in this course.
So one thing that's really big when it comes
to website building is that there
is these files called HTML files,
which can actually author very simple websites.
So maybe I want a simple portfolio website written in HTML.
So if we say something like that, ChatGPT sure enough says,
"Sure, I'd be happy to provide you with that."
So this is a basic example.
You can modify it to fit your specific needs.
So if we go ahead and look in here, we see
that it's actually writing us code right now.
And one thing that's a little weird is that it's saying
that, I don't know if you guys are familiar
with code snippets, but typically
when it shows up in this block
of text with this different font, this is what's sort
of a coding snippet
and in certain types of types of languages that are used
to express text, they kind of stylize it in this way.
And it's kind of weird that up here it says PHP,
which happens to be another language
that is not what's shown here.
This is clearly an HTML file.
So that is what we're gonna be using
as our base for our website.
Now it's not gonna be one that's deployed
at some domain name or URL, so we're not gonna be able
to access it on the internet, but sure enough it
is a layout for a website.
So it's telling us exactly what it does too.
So it's saying it includes the basic structure
of a portfolio website and the things
that it's included for us for free almost.
So we can go ahead and copy this code, come over
to Visual Studio Code.
Now I've just created a folder on my desktop
that basically is just gonna
hold a file called website.html.
It doesn't have to be called website.html,
that's just what I'm calling it.
But it does have to have this file extension HTML,
'cause that kind of hints at your operating system
that it's something you wanna open with your web browser.
So go ahead and do that and we paste that in and save it.
Just using control S as a shortcut.
I'm gonna actually go ahead and open that
in my file explorer and I'm going to open it.
So as you can see, that kind of went to Google Chrome,
which is my web browser of choice.
And now we can see that this local file is being referenced
and it's been opened and sure enough,
that's a website right there for us.
And if we wanted to go through
and substitute out these things, my portfolio, my name,
this is sort of just like a template for a website,
it's kind of like the bone structure of a template
or of a website if you will.
So if I go ahead and change that
and refresh the file, you'll see
that my name actually appears there.
So if you didn't know anything about this
before, this is like a really useful tool for just coming up
with a basic website
and there are ways to make it look better, which is CSS.
So, and it actually mentions that right here.
Keep in mind that you'll need to create a style CSS file
to add styles to your website
and make it look visually appealing.
So that's something you could continue probing ChatGPT
about and asking it to generate styles for you.
Now this is a pretty bare bones thing,
so we're gonna actually try to take it a step ahead
and try to get it to use a framework that's known as React
for building a website.
So how would I go about
creating a web app using the React framework?
So let's see what it tells us here
because these problems are actually well documented online.
So this is a framework that coders can use.
It's essentially coders building
on top of other people's codes.
So Facebook actually created this framework called React
and people have used it to help create their web apps.
And here it's saying creating web app
using the React framework involves a few steps
and it's basically telling us how we can do that.
We're gonna need to install Node.js,
the node package manager, this is basically the runtime
for JavaScript.
And then this is a way to install packages
or basically sort of components
or modules that you'll need to install into your project.
So there's tons of instructions online
about how you could go about doing that
or you could even ask ChatGPT how you could do that.
Luckily for me, I already actually had these things
installed so I'm not actually gonna go ahead and do that.
So let's instead ask how could I create a React app?
So to create a new React app,
you can use a command line tool called Create React App,
which is the official way
to start a new single page React application.
That's exactly what I was looking for actually.
So it actually is able to tell me this based off
of the internet data that it's synthesized
and here it's actually giving me the exact answers that I,
or sort of steps that I need to follow to do that.
Now one thing that's worth noting is maybe
in the earlier question that I asked about
how you could write a simple website for me, basically,
it doesn't know what our specs are, right?
Like ChatGPT isn't sort
of this all powerful being in the sense that it's going
to be able to be an endless pool
of creativity like you as a human.
This unique human
and technology interaction is something
that together can be very fruitful.
It's not like a magic spell that we can suddenly just use
and it'll be the cure all to everything, right?
So there does require a little bit of domain knowledge
to know what to ask it,
but once you know that lots of doors are opened so to speak.
So once you have this installed,
after you have the Node Package Manager,
we can actually run this command.
Interesting that these codes,
snippets are labeled Lua as well.
'Cause that's a scripting language that is definitely
not being used here.
Quite the opposite of that.
We're actually going to be running this command.
NPX create React app my app in the command line.
So if you go ahead
and run that, it's going to run this command
on an app called My App.
And it's also gonna create a directory for us.
And as we can see here, a directory has been created
and we can look inside that a file has been created.
This progress bar that shows here is also representative of
that app kind of being generated as we speak.
And yeah, so we are just gonna give this a second to run,
but in the meantime we can continue kind of looking through
what ChatGPT has prescribed for us.
So we can see here that once you do generate this, we go to,
we're gonna wanna change directory.
That's what the CD stands for.
So it's pretty interesting here.
It actually has the correct sort
of code snippet detail here.
So it's actually Bash, I'm not using Bash
'cause I'm on Windows,
but I'm using the PowerShell window here.
You can see PS, which is the Windows equivalent
of the command line, essentially.
And basically we're gonna change directories
into this.
Directory is just another computer science way
of saying file.
So once we're in that directory,
we can basically run this NPM start.
Again, this code snippet is kind of off SQL
or standard query language is a way, a sort of language
that we can use to manipulate databases
or interact with databases.
And that's clearly not what's supposed to be here.
So sometimes you've gotta be a little
above ChatGPT in the sense that you kind of have
to know what it's trying to say.
'Cause here this is definitely not a SQL command,
but we're gonna go ahead and run these commands anyways.