WEBVTT

1
00:00:00.080 --> 00:00:00.230
OK,

2
00:00:00.320 --> 00:00:01.560
now it's time to have some fun

3
00:00:01.680 --> 00:00:02.910
and build an actual application,

4
00:00:03.040 --> 00:00:07.190
and Claude is suggesting that we build a to do's list because it's a rite of passage,

5
00:00:07.360 --> 00:00:08.230
and indeed it is.

6
00:00:08.280 --> 00:00:09.420
If you're going to be a developer,

7
00:00:09.560 --> 00:00:12.940
you need to build at least one to do's app before you move on to anything else.

8
00:00:13.220 --> 00:00:14.790
I'm going to add just one thing to this though.

9
00:00:14.880 --> 00:00:17.250
I wanted to build it with authentication right off the bat,

10
00:00:17.360 --> 00:00:18.380
so I'll say OK,

11
00:00:18.720 --> 00:00:20.280
but add off also.

12
00:00:22.300 --> 00:00:23.850
As Cloude code works on the application,

13
00:00:23.900 --> 00:00:26.600
you're going to see it come to life in the browser in the lower right,

14
00:00:26.940 --> 00:00:28.870
and you'll see the user interface come together,

15
00:00:28.980 --> 00:00:31.220
you'll see Cloude begin to drive the interface,

16
00:00:31.300 --> 00:00:32.430
log in as a user,

17
00:00:32.750 --> 00:00:35.450
test different to dos by test adding to dos,

18
00:00:35.520 --> 00:00:36.210
deleting to dos,

19
00:00:36.230 --> 00:00:37.020
and so on.

20
00:00:37.380 --> 00:00:41.300
And Elements is so fast that when Cloude makes a change,

21
00:00:41.500 --> 00:00:44.520
the browser is typically updated within a few milliseconds.

22
00:00:44.820 --> 00:00:44.890
So,

23
00:00:44.910 --> 00:00:47.050
it's a very fun experience to build with elements,

24
00:00:47.140 --> 00:00:47.530
uh,

25
00:00:47.840 --> 00:00:48.610
elements in Cloud.

26
00:00:48.660 --> 00:00:51.290
You'll see the application coming to life in real time.

27
00:00:52.510 --> 00:00:54.250
You'll see as Cloude drives the application

28
00:00:54.350 --> 00:00:57.620
that occasionally the state in the upper right will turn to error,

29
00:00:57.830 --> 00:00:59.700
and that's because Cloude's made a mistake

30
00:00:59.870 --> 00:01:01.690
and Elements will correct Cloude

31
00:01:01.990 --> 00:01:02.570
into

32
00:01:03.070 --> 00:01:06.370
correct Cloude and Cloude will fix the issue immediately.

33
00:01:06.590 --> 00:01:08.340
And that's because the build server that Elements

34
00:01:08.340 --> 00:01:11.260
is running responds to Cloude's queries in microseconds,

35
00:01:11.300 --> 00:01:14.070
and then Cloude can just continue with its building.

36
00:01:14.890 --> 00:01:16.300
Claude's completed the application.

37
00:01:16.610 --> 00:01:18.870
The entire thing only took about a minute or two,

38
00:01:19.010 --> 00:01:21.200
and we have a full to do app in the right.

39
00:01:21.290 --> 00:01:22.590
Let's just make sure that it works.

40
00:01:23.670 --> 00:01:24.700
And indeed it does.

41
00:01:25.940 --> 00:01:26.460
Before we conclude,

42
00:01:26.550 --> 00:01:29.460
let's take a closer look at that OK versus error state.

43
00:01:29.520 --> 00:01:30.230
When you see green,

44
00:01:30.310 --> 00:01:31.570
it means everything's OK.

45
00:01:31.750 --> 00:01:32.530
When you see red,

46
00:01:32.590 --> 00:01:33.930
it means there's an error.

47
00:01:34.230 --> 00:01:37.600
I'll go over to the left and I'll have Claude introduce a TypeScript error.

48
00:01:40.140 --> 00:01:42.230
And I'll close the browser so we get a better view.

49
00:01:42.740 --> 00:01:43.940
When Claude makes a mistake,

50
00:01:44.220 --> 00:01:46.530
whether it's a TypeScript error or a migration error

51
00:01:46.530 --> 00:01:48.690
or anything that would prevent your application from working,

52
00:01:48.780 --> 00:01:50.090
it could be a failing test.

53
00:01:50.420 --> 00:01:52.880
There's a number of things that could cause a build to fail.

54
00:01:53.180 --> 00:01:55.600
You'll see the state change to error,

55
00:01:55.820 --> 00:01:58.210
and the errors will be presented in the user interface.

56
00:01:58.260 --> 00:01:58.830
And in this case,

57
00:01:58.900 --> 00:02:01.880
Claude deliberately introduced an error so that we could take a look at it.

58
00:02:02.570 --> 00:02:03.850
I'll ask Cloud to fix the error,

59
00:02:03.890 --> 00:02:04.710
and when it does that,

60
00:02:04.810 --> 00:02:09.259
the build server updates immediately and we see that state change back to OK.

61
00:02:09.690 --> 00:02:10.639
On simple applications,

62
00:02:10.729 --> 00:02:13.480
Cloud might be able to one shot it without creating any errors,

63
00:02:13.530 --> 00:02:14.980
but typically if the application

64
00:02:15.130 --> 00:02:16.240
gets complicated enough,

65
00:02:16.330 --> 00:02:16.940
it will

66
00:02:17.050 --> 00:02:19.200
uh create errors and it needs to be corrected.

67
00:02:19.560 --> 00:02:22.060
And that's one of the main things that Elements does and why

68
00:02:22.080 --> 00:02:25.070
Elements applications are so much more robust on the first try,

69
00:02:25.200 --> 00:02:25.580
but

70
00:02:25.920 --> 00:02:28.890
especially over time as the application gets bigger and bigger.

71
00:02:29.520 --> 00:02:29.870
Lastly,

72
00:02:29.960 --> 00:02:32.930
let me show you around some of the elements commands that I think you'll find useful

73
00:02:33.120 --> 00:02:35.830
and how to get your way around these panels in Claude Code.

74
00:02:35.970 --> 00:02:38.430
If I click the right panel and I use the queue key,

75
00:02:38.450 --> 00:02:40.550
that will exit out of the Element Start program.

76
00:02:40.760 --> 00:02:42.360
If you want to start Elements again,

77
00:02:42.560 --> 00:02:45.590
you can use the up arrow or type Element Start and press Enter,

78
00:02:45.680 --> 00:02:47.390
and that will start your application server.

79
00:02:47.850 --> 00:02:49.170
If you need to bring back the browser,

80
00:02:49.250 --> 00:02:50.320
you can click this link

81
00:02:50.530 --> 00:02:53.110
or you can use this icon that kind of looks like a globe.

82
00:02:53.330 --> 00:02:55.200
I'll press the cue key and show you

83
00:02:55.200 --> 00:02:57.560
another command that's useful called elements test.

84
00:02:58.210 --> 00:02:59.680
When Cloud was building your application,

85
00:02:59.810 --> 00:03:01.000
it writes a bunch of tests.

86
00:03:01.070 --> 00:03:02.990
I count something like 30 tests here,

87
00:03:03.330 --> 00:03:03.780
and

88
00:03:03.930 --> 00:03:05.650
tests in elements are extremely fast.

89
00:03:05.730 --> 00:03:06.730
They run concurrently,

90
00:03:06.810 --> 00:03:08.390
usually in a couple of milliseconds,

91
00:03:08.570 --> 00:03:10.520
and Cloud will make extensive use of them.

92
00:03:10.730 --> 00:03:11.200
In this view,

93
00:03:11.250 --> 00:03:13.880
you can see which tests you're passing and which ones are failing.

94
00:03:14.050 --> 00:03:16.030
This is one of the reasons why Elements applications

95
00:03:16.170 --> 00:03:18.160
will last a very long time over time.

96
00:03:18.290 --> 00:03:18.670
So

97
00:03:18.810 --> 00:03:19.750
if you are

98
00:03:19.920 --> 00:03:21.440
building an application on the first day,

99
00:03:21.490 --> 00:03:23.150
it will Work by the 3rd or 4th week,

100
00:03:23.280 --> 00:03:25.740
you start to break things as you add new features,

101
00:03:25.840 --> 00:03:29.140
and tests are a great way to make sure that your application does not regress.

102
00:03:29.360 --> 00:03:33.040
Elements ships with the Postcress cluster and manages it for you automatically.

103
00:03:33.160 --> 00:03:34.910
It'll create a test database and a regular

104
00:03:34.910 --> 00:03:37.110
app database for each one of your applications.

105
00:03:37.360 --> 00:03:39.750
You can use the elements db command and that will drop you into

106
00:03:39.750 --> 00:03:42.880
a shell where you can interact directly with the database using SQL.

107
00:03:43.240 --> 00:03:43.670
For example,

108
00:03:43.920 --> 00:03:45.280
since we created authentication,

109
00:03:46.970 --> 00:03:49.160
We have a user's table and you can see how the

110
00:03:49.160 --> 00:03:52.720
user was created with a hashed password in this database.

111
00:03:52.890 --> 00:03:55.750
You can press backslash queue to exit out of the

112
00:03:56.170 --> 00:03:57.650
the PSQL shell.

113
00:03:57.810 --> 00:04:00.450
There's a lot of other elements commands that we can cover

114
00:04:00.610 --> 00:04:01.560
in subsequent videos,

115
00:04:01.650 --> 00:04:03.280
but if you want to get a sense of what exists,

116
00:04:03.330 --> 00:04:05.720
you can type elements and then use the help flag,

117
00:04:05.740 --> 00:04:06.560
which is dash

118
00:04:06.770 --> 00:04:07.160
help

119
00:04:07.290 --> 00:04:09.570
and press enter and you will see all the commands here.

120
00:04:10.290 --> 00:04:12.560
Some of the features I just showed you are a little bit more advanced,

121
00:04:12.610 --> 00:04:15.350
you don't need to worry if you don't understand everything I just showed you.

122
00:04:15.610 --> 00:04:17.680
And also remember that Cloud is here to help you,

123
00:04:17.810 --> 00:04:19.480
so if you run into any kind of problems,

124
00:04:19.529 --> 00:04:20.690
you're not sure what's going on,

125
00:04:20.850 --> 00:04:23.810
just come over here into the chat window and ask Cloud what to do next,

126
00:04:24.010 --> 00:04:26.880
and it knows everything about elements and can help you through anything,

127
00:04:26.970 --> 00:04:28.430
any kind of problem that you have.

128
00:04:28.610 --> 00:04:28.840
OK,

129
00:04:28.970 --> 00:04:29.640
builder heroes,

130
00:04:29.690 --> 00:04:30.630
congratulations,

131
00:04:30.690 --> 00:04:32.920
you have finished your rite of passage and you

132
00:04:32.920 --> 00:04:35.930
have a fully working to do's app with authentication.