Jonas: So, in this lecture
we're gonna work on Challenge #2,
but this time, we're gonna actually solve it
using an AI assistant
just so you can see how we could use the process
that we just learned about in practice.
So, let's say that you're building
a time tracking application built for freelancers,
and at some point, in building this application,
you need a function that receives daily work hours
for a certain week and then it will return five data points.
So the total hours worked, the average daily hours,
the day with the most hours worked, the number of days,
and finally, whether this current week was a full-time week,
which means that the freelancer worked 35 hours or more.
Now, you could actually try to solve this challenge
also on your own before using the AI assistant.
But the problem is that this actually needs
some JavaScript features that we haven't learned about yet.
But still, if you really want to challenge yourself,
you can see how far you can take it
with the skills that you have already learned
up until this point,
even though the solutions would not be perfect.
But again, it could be worth a try
if you want this extra challenge.
But in any case, the point of this lecture is
to use an AI assistant
and to use that five step process
that we basically learned in the last lecture.
And so, remember how the first step is
to really understand the problem
that we are trying to solve using the AI assistant.
Now in this case, we have already kind of understood
the task because it was given to us here
in this very comprehensible format.
So, pretty much, we have everything worked down here
except maybe for some details,
which we're gonna work out in a minute
when we write the prompt.
So, the next step is to then choose the AI assistant tool.
And for that, we're going to use
the most popular one of all, which is ChatGPT.
So, let's head over to chatgpt.com.
And I'm pretty sure that you have already used this tool
in the past at this point.
So, this is by far the most popular AI tool out there.
And so again, I'm sure you already have an account
on chatgpt.com, but if you don't,
then that's no problem at all.
You can just create a free account and then come back here.
So, this is a pretty basic interface.
You can just choose the model up here.
And we're just gonna use this GPT-4o,
which is the best one at this moment.
But again, if you're watching this in the future,
I'm sure some better model has already come out.
So, they're releasing these new models here pretty fast.
There's also this canvas mode here,
which is actually great for writing code,
but let's just stick to this more basic one
where we can just chat back and forth with this assistant.
And so then, we can just type
our very detailed prompt down here.
And so to start, I'm just gonna grab these instructions
from here and I'm gonna paste them here.
And then let's change this a little bit
and make it more specific.
So here, let's say,
"I'm building a time tracking application for freelancers."
Then here, we don't need any of this fluff,
so we want to be as direct and straightforward here
in this prompt at possible.
So we just tell the assistant,
"Write a function called," let's say, "analyzeWorkWeek."
And then let's say, "that receives daily work hours
for a certain week and returns" these five here.
So let's think about this.
How should this function actually receive the data?
So I think it would make sense
that it actually gets an array of the seven values
of the seven days that are in a week.
So let's say here, "that receives an array
of daily work hours," and then it returns these.
Now, these should then also be in a data structure.
So we could again, return an array,
but let's actually return an object here,
which then makes it a bit easier to understand
what each of the data points is all about.
So, "and returns an object with the following data."
So, I think that this prompt here is very specific,
so the AI will know exactly what it needs to do.
And then let's also give it a bit more details
on what to actually do here.
So, here are these daily hours.
Let's say that they should round it.
So, "round to one decimal place."
Then here, let's say in this case that it should assume
that Monday is the first day of the array.
So, "assume Monday is day 0 in the array."
And then here, as for the number of days
where the freelancer actually worked,
let's say that these are the days with over zero hours
just to make sure, "with more than 0 hours."
So looking here at our test data, again, we have this array,
which is why we said here
that this function should receive an array.
And so for example, here we have a 0,
and here we have a 0,
meaning that out of these seven days,
the freelancer has only worked five days.
All right, so I think this looks pretty great.
So, just hit Enter and then ChatGPT will very quickly
start working on our solution here.
So, it takes some time as it's working
and it's still way faster than we are.
And then here at the end, it even gives us an explanation
of what exactly it did.
So, let's check this code here.
So, the function has the name that we gave it.
Then it's calculated in the total hours,
and here it's using this reduce method
that we don't know about yet.
Then, the averageHours, also using this function
that we also don't know about yet.
But for now, that's no problem.
So, this looks pretty good to me, even though, again,
at this point, you don't really know this code yet,
so you don't have any way of checking
if it is actually correct.
So, I'll just go ahead and copy the code.
And ChatGPT is even smart enough to know that this is code.
And so, it has this button here
where we can just copy and paste that here.
And yeah, let's even keep the comments here.
We could also remove them.
But yeah, let's keep this.
Then here, it even generated some test data for us,
but let's use the ones that we already have up here.
So, I will replace all of this
and then let's run our code.
And I think it is still running here.
So, the live server that we set up earlier.
And so indeed, here we have our object,
just like we asked it to.
So we get the averageHours, the number of days worked,
whether it is full-time, then the maxDay
and the totalHours.
So that's just shy of 35.
And so that's why isFullTime is false.
So let's maybe change the four here to five.
And so then, this should be 35.5
and isFullTime should become true.
So, give that a save, and indeed, this worked really great.
So just like this,
we actually solved the challenge
without having to type any code.
Just keep in mind that if you were to incorporate this
into your own application,
you would have to really test this code
and inspect if everything is correct.
Also, remember that this is supposed to be
an iterative process.
And so, let's try to maybe change something here.
So, this nextDay right here is number four,
which is basically the index of the day
in which most work happened.
So, 0, because remember that in a race,
the first element is always the 0.
So that's 0, 1, 2, 3, 4.
So that is indeed correct.
This is the maxDay,
so the day in which the freelancer worked the most.
However, this number four here is not really
a nice, readable result.
So instead, let's tell ChatGPT
that this should actually be a weekday.
So, let's say, "change maxDay to be an actual work day
like Monday."
And so then, it will get back to work.
And so now, here what's happening is that ChatGPT
is creating this array here of these days of the week.
And then here, it will basically convert the index
like the number four that we got earlier
to the actual day name by reading that value here.
So, let's just copy this function here
and replace the one that we already have.
So just like this, give it a save,
and now we should get Friday.
Beautiful.
So, small tasks like this can easily be automated with AI
as you just saw, but it will always be your task
to incorporate code like this into your own application,
again, making sure that it actually works
and that there are no bugs in the code.
So, you'd have to do a lot more analysis and tests
than we just did here.
And actually, let's do one more test like this.
So, let me just copy this here again.
Let's also remove this comment from here.
And let's do weeklyHours2, analysis2 and analysis2 here.
And now what I'm gonna do is to remove two days from here.
And in this case, we actually don't want this to work.
So, this analyzeWorkWeek function should only work
if there are actually seven days given to the function.
So, if the length of this array here is seven.
So, let's tell ChatGPT this, as well.
"The function should require the input array
to have exactly 7 days.
Update the function accordingly."
So now, it will probably introduce some kind of error here.
Yeah, so in case that
the length of this array is not seven,
then we will get an error here in our browser,
and even actually if this is not an array at all,
so with this part right here.
So, let's copy this,
again replacing our function here.
Let's give it a try.
Maybe manually reload here. We don't get the error.
Ah, but that's because I forgot
to actually use this array right here.
And so now, we get exactly that error.
So, "Input must be an array of exactly 7 daily work hours."
So, that's basically the error that is generated up here.
And again, we never saw this code,
so we had never learned about how to manually create errors,
and we never saw this reduce method or this filter method
and many of the things here in this function.
But don't worry.
Of course, you will learn about all of this
throughout this course,
and by the end of it, you would be able to easily write
this entire code here on your own.
But remember how we also talked about in the last lecture
that ChatGPT or any AI assistant is also great for learning.
And so, let's now use it for that, as well.
So let's say for example, that we want to learn more
about this filter method here.
So, let's just ask it that.
"What does the filter method do?
Why is it useful?
Give me a few examples."
Here's a typo, and ChatGPT would even understand it
with these typos, but let's make our text correct here.
And so now if you want, you can just read the explanation
that you get here about the filter method.
Now, here are still some words that we don't understand
or that we didn't talk about yet, I think.
For example, callback.
So this callback concept here seems to be essential
for the filter method.
And so we can drill down even further
and ask it, "What is a callback?
Explain the filter method in simple terms
to a JavaScript beginner."
So, that's basically what you are right now.
And so, if the explanation is a bit too complex,
you can just ask it to make it more simple.
And so then you get this explanation right here,
which, of course, will look a little bit different for you
because the output for each query in ChatGPT
is always different for each time that you ask it.
So, even if I ask the exact same thing twice,
the response will always be a little bit different.
But you see it is pretty detailed here
and gives me all of this text, all this explanation.
And so, yeah.
Maybe one day, it will even replace me
as a teacher, which I hope it won't,
but I guess until ChatGPT is able to create videos as I am,
I should be safe.
Okay. But anyway, this is it for this lecture.
This was just a quick walkthrough and a quick demonstration
of how we can use an AI tool
in order to solve challenges like this.
So as you go throughout the course,
you can maybe also ask some questions
in case anything that you did learn throughout the course
was not 100% clear,
and so then ChatGPT could help you with that.
There's also now an AI assistant integrated
right into Udemy, and so, you could use that one, as well,
while they're going through the course
and something is not 100% clear.
Just make sure to not use an AI assistant
in order to solve the challenges of the course,
because that would obviously be
completely counterproductive.
You wouldn't learn anything at all.
So basically, only used these tools
after you have already finished the course
and after you know exactly what you're doing.
But that's exactly what we learned in the last lecture,
and so let's not repeat all of that.
So anyway, with this, we finish up this section,
and so let's now move on to the next one
and really start learning JavaScript.
So, see you there very soon.