WEBVTT

00:00:00.080 --> 00:00:03.920
Now, in this lecture,
I'll just walk you through a couple

00:00:03.960 --> 00:00:07.860
of prompts I'm sending to Cloud Code
and how I iterate with Cloud Code.

00:00:07.920 --> 00:00:11.740
I'll skip the parts where Cloud Code
is thinking and spitting

00:00:11.800 --> 00:00:15.560
out plans. And therefore, you can,
of course, also skip this lecture

00:00:15.620 --> 00:00:19.200
interested in that. At this point,
this project is

00:00:19.260 --> 00:00:23.230
now actually set up in a way
that should allow us to efficiently

00:00:23.420 --> 00:00:27.400
work on it with help of Cloud Code.
And therefore, of course, typically, I

00:00:27.420 --> 00:00:30.800
would set up sub-agents
and skills in a proper Cloud MD

00:00:30.840 --> 00:00:34.410
file at the very beginning,
before starting work on the project.

00:00:34.680 --> 00:00:38.589
I did it here step-by-step,
whilst actually already starting with the

00:00:38.660 --> 00:00:42.360
application implementation,
just to give you good examples for

00:00:42.560 --> 00:00:45.200
why we would use these different features.

00:00:45.240 --> 00:00:49.120
But with that now all set up, we can,
of course, continue working on this

00:00:49.130 --> 00:00:52.700
application and start adding the actual
main

00:00:52.760 --> 00:00:56.570
features. And now that users can log in,
the next logical

00:00:56.640 --> 00:01:00.440
step would be to make sure
that we get redirected

00:01:00.680 --> 00:01:04.599
to the dashboard route after successful
login, that we

00:01:04.700 --> 00:01:08.640
can only go to that route if we
are authenticated and access

00:01:08.680 --> 00:01:12.180
is blocked for users that
are not authenticated.

00:01:12.220 --> 00:01:15.970
And then, of course,
as next steps thereafter,

00:01:16.060 --> 00:01:19.800
manage notes. Therefore,
that's the next prompt I wanna send to

00:01:19.860 --> 00:01:23.780
Cloud Code.
I ask it to implement redirecting

00:01:23.790 --> 00:01:26.690
the user to slash dashboard after
successful

00:01:26.740 --> 00:01:30.580
authentication,
and I ask it to protect the dashboard

00:01:30.680 --> 00:01:34.580
and all other note-related routes,
except for the publicly

00:01:34.680 --> 00:01:37.730
shared note route,
from unauthenticated access.

00:01:37.860 --> 00:01:40.210
I wanted to add protection on a per-route
level.

00:01:40.210 --> 00:01:43.860
That's something I know because with
Next.js, you could try to

00:01:43.900 --> 00:01:47.870
implement route protection with help of
layouts, which is actually discouraged,

00:01:47.900 --> 00:01:51.770
so that's some extra piece of context
and information I add here so that I

00:01:51.780 --> 00:01:55.000
don't have to fix problems later,
which I already know about.

00:01:55.020 --> 00:01:58.630
And then I tell it to use modern Next.js
features and so on to

00:01:58.660 --> 00:02:02.610
increase the likelihood of it loading the
appropriate skills.

00:02:02.700 --> 00:02:06.640
Not something you have to do,
and also something you could consider

00:02:06.660 --> 00:02:10.460
main Cloud MD file,
but something I like to do from time to

00:02:10.520 --> 00:02:13.860
time.
And then I'll switch to plan mode

00:02:14.060 --> 00:02:17.920
thing. So here, it now made another plan,
and that looks

00:02:17.960 --> 00:02:21.660
good to me,
so I'll accept it with edits allowed.

00:02:21.740 --> 00:02:24.480
And it'll go ahead and implement that,
of course.

00:02:24.520 --> 00:02:28.329
Now, with that,
if I reload the dashboard route,

00:02:28.440 --> 00:02:30.920
as it should,
because I did authenticate before.

00:02:30.960 --> 00:02:34.680
But if I open up my developer tools in the
browser and I

00:02:34.760 --> 00:02:38.380
clear that authentication cookie,
and I reload, I'm

00:02:38.440 --> 00:02:42.190
redirected to the sign-in page,
which makes sense because I effectively

00:02:42.240 --> 00:02:46.130
logged out.
And if I now sign in again with

00:02:46.180 --> 00:02:49.590
or if I create a new user,
I'm redirected to the dashboard route.

00:02:49.620 --> 00:02:53.600
So that's working the way it should,
and we can then continue with the next

00:02:53.660 --> 00:02:57.560
For the next step,
I cleared my context window again,

00:02:57.600 --> 00:03:01.180
wanna work on a different task.
And I will now send a more

00:03:01.240 --> 00:03:05.200
complex prompt to Cloud Code,
or the prompt itself is

00:03:05.220 --> 00:03:07.630
not super complex, but the task is.

00:03:07.700 --> 00:03:11.640
It has multiple steps,
multiple features it should work on,

00:03:11.740 --> 00:03:15.500
component it should add,
and then something it should add to the

00:03:15.560 --> 00:03:18.680
route and a new note route it should add.

00:03:18.740 --> 00:03:22.390
And I also want it to handle the
submission of the new note form and

00:03:22.460 --> 00:03:26.280
insert data into the database.
And of course, I again rely on

00:03:26.360 --> 00:03:29.820
it loading the Cloud MD file
and all the necessary context it needs

00:03:30.200 --> 00:03:33.720
due to our good project setup.
So I'll switch to plan

00:03:33.780 --> 00:03:37.220
mode, and then as always,
submit this to let it do its

00:03:37.400 --> 00:03:41.320
thing. And here's its plan. And I

00:03:41.400 --> 00:03:44.340
actually wanna add one more thing,
which I forgot.

00:03:44.460 --> 00:03:48.240
I wanted to add a logout button to the
header.

00:03:48.340 --> 00:03:51.980
Of course, that should only show up
if the user is authenticated though.

00:03:52.040 --> 00:03:55.500
And with that, I'll then clear the

00:03:55.560 --> 00:03:59.549
context and start implementing.
So now with that,

00:03:59.760 --> 00:04:03.740
it's done. I can already see
that the header does not look right

00:04:03.780 --> 00:04:06.990
though,
that white header with the rest being dark

00:04:07.040 --> 00:04:10.820
That's something to fix.
And another issue I notice is that the

00:04:10.900 --> 00:04:12.960
logout button is not initially there.

00:04:13.020 --> 00:04:15.780
If I reload, it takes a short
while to appear.

00:04:15.800 --> 00:04:19.120
And that's happening because with the
current implementation, we're checking the

00:04:19.180 --> 00:04:22.640
authentication state from the client side
after the page is

00:04:22.700 --> 00:04:26.580
loaded. I would rather do that
when the page is being

00:04:26.620 --> 00:04:29.460
rendered on the server before it's sent to
the client.

00:04:29.500 --> 00:04:32.760
So I'll tell Cloud Code about that too.

00:04:32.770 --> 00:04:36.460
And then I'll again switch to plan mode
since that

00:04:36.740 --> 00:04:40.550
should be a change.
It's able to implement like this,

00:04:40.640 --> 00:04:43.900
also clarify any things
that might be unclear.

00:04:43.980 --> 00:04:47.280
And now that it's done,
that looks way better.

00:04:47.320 --> 00:04:51.220
Clicking logout also works.
I can then sign up again,

00:04:51.360 --> 00:04:55.300
or in my case, sign in, like this, and

00:04:55.440 --> 00:04:59.200
then if I click on new note,
I'm taken to the new

00:04:59.260 --> 00:05:03.160
note page. And now in here, this is a

00:05:03.200 --> 00:05:06.630
rich text editor. I can make this

00:05:06.900 --> 00:05:10.780
bold. That works.
I can also make it italic,

00:05:10.820 --> 00:05:14.500
right now. Of course,
I'd like to have a little toolbar

00:05:14.660 --> 00:05:18.580
that makes it easier for me,
also because right now, I can't insert a

00:05:18.620 --> 00:05:22.540
heading, for example.
So that's something we'll have to add as

00:05:22.550 --> 00:05:26.380
So in a new Cloud session
or after clearing the context,

00:05:26.440 --> 00:05:30.140
note or edit note page, add a toolbar
that exposes the

00:05:30.160 --> 00:05:33.960
TipTap tools we want in our app.
I point at the Spack MD file here again,

00:05:34.020 --> 00:05:37.440
know that in there, all the tools,
all the text formats I wanna support are

00:05:37.460 --> 00:05:41.360
listed. And again,
I'll launch this in plan mode, and as

00:05:41.440 --> 00:05:45.360
always, you can be more specific.
You can explicitly tell it to

00:05:45.400 --> 00:05:49.360
look up the TipTap docs and so on. Here,
I trust that my

00:05:49.480 --> 00:05:52.880
clean, proper setup ensures
that this will happen.

00:05:52.900 --> 00:05:56.640
And now with the plan implemented
and actually to follow up

00:05:56.780 --> 00:06:00.300
changes,
I can indeed work with this editor

00:06:00.760 --> 00:06:04.540
and add the various features
or use the various features in

00:06:04.580 --> 00:06:08.340
there. And by the way, of course,
in case you are following along, it's

00:06:08.380 --> 00:06:12.280
absolutely possible
that the results look different for you,

00:06:12.320 --> 00:06:15.580
doesn't work right away,
not necessarily because your prompts are

00:06:15.600 --> 00:06:19.160
bad, but because with AI,
there's always a degree of

00:06:19.220 --> 00:06:22.440
randomness involved still,
no matter how good your setup is.

00:06:22.480 --> 00:06:26.230
You can only try to create a setup
that increases your chances of ending up

00:06:26.260 --> 00:06:27.800
with good results