1
00:00:03,560 --> 00:00:09,560
So let's talk about full stack applications or web applications.

2
00:00:09,560 --> 00:00:11,270
As we talk about them.

3
00:00:11,270 --> 00:00:17,360
Initially, we are going to use this approach with a divided screen for this whole block.

4
00:00:17,360 --> 00:00:24,020
But in the case of this lesson, I'm going to open the screen so we can focus on the slides.

5
00:00:24,020 --> 00:00:28,760
I think it's going to be easier for you to follow this lesson in this manner.

6
00:00:28,760 --> 00:00:36,320
So in this lesson we are going to talk about what it is a web application or a full stack application.

7
00:00:36,770 --> 00:00:42,380
A what are the differences between web and mobile applications, the type of applications we may find

8
00:00:42,410 --> 00:00:51,410
the development process a we will use an analogy that I think is very useful to think about a web application

9
00:00:51,410 --> 00:00:54,140
like a Lego construction.

10
00:00:54,410 --> 00:01:00,530
A we will talk about the keys to prevent a project, an application web application project from getting

11
00:01:00,530 --> 00:01:01,850
out of control.

12
00:01:01,850 --> 00:01:05,450
The main components of the application, the main processes.

13
00:01:05,450 --> 00:01:16,940
We have the usual functionalities and a how we apply all the above in the LM web application development.

14
00:01:16,940 --> 00:01:25,490
So when we say LM application development, in most cases it is going to mean LM web Application development.

15
00:01:25,490 --> 00:01:29,570
We will see more about that in immediately.

16
00:01:29,570 --> 00:01:35,720
So what is a web application or a full stack application.

17
00:01:37,010 --> 00:01:38,060
So.

18
00:01:38,060 --> 00:01:43,340
And I'm talking about what we usually know about a full stack application.

19
00:01:43,340 --> 00:01:47,780
Don't take me like a like a university professor.

20
00:01:47,780 --> 00:01:48,890
This is not the Bible.

21
00:01:48,890 --> 00:01:55,940
This is how we speak, you know, in the daily, uh, activities of artificial intelligence engineers.

22
00:01:55,940 --> 00:02:02,540
So a full stack application or, or what we call web application is a software program.

23
00:02:02,540 --> 00:02:05,780
So see that we are not talking about a web page.

24
00:02:05,780 --> 00:02:08,060
We are talking about a web application.

25
00:02:08,060 --> 00:02:13,730
So a web application is a software program that runs in a web browser.

26
00:02:13,730 --> 00:02:20,450
So a web browser like the one we are using here, we are using Chrome but you can use explorer, Firefox

27
00:02:20,450 --> 00:02:21,260
etc..

28
00:02:21,260 --> 00:02:28,430
So our application is a software program that runs in a web browser instead of being installed locally

29
00:02:28,430 --> 00:02:29,510
on a device.

30
00:02:29,840 --> 00:02:36,650
Remember years ago a software applications used to be installed locally in our computers.

31
00:02:37,630 --> 00:02:44,320
It is accessible over the internet or an internal network and runs.

32
00:02:44,320 --> 00:02:50,620
This is not very common today and runs on a web server, not on the user's device.

33
00:02:50,650 --> 00:02:57,460
This means that you can use it from any device with a web browser and an internet connection, so you

34
00:02:57,460 --> 00:03:01,330
can open a web application from your mobile, your tablet, etc..

35
00:03:02,530 --> 00:03:09,250
Web applications are popular because they do not require specific installation and are automatically

36
00:03:09,250 --> 00:03:15,280
updated on the server, ensuring that all users access the most recent version.

37
00:03:15,280 --> 00:03:16,210
So.

38
00:03:17,420 --> 00:03:21,020
Every application today is a web application.

39
00:03:22,040 --> 00:03:27,830
A 30 years ago, software applications were installing in computers.

40
00:03:27,860 --> 00:03:34,430
Today, every software application is a web application, so they are in the cloud and we don't need

41
00:03:34,430 --> 00:03:35,420
to update them.

42
00:03:37,710 --> 00:03:41,220
Difference between web applications and mobile applications.

43
00:03:41,220 --> 00:03:50,550
So three areas, uh, that are is important to consider the platform access and the development process.

44
00:03:50,550 --> 00:03:57,300
So mobile applications okay let's talk about both web applications the running web browsers and are

45
00:03:57,300 --> 00:04:01,650
accessible from any device with an internet connection and web browser.

46
00:04:02,280 --> 00:04:08,040
They do not require downloading or installation in the case of mobile applications.

47
00:04:08,880 --> 00:04:16,769
They are specifically designed for mobile devices and are downloaded and installed from app stores like

48
00:04:16,769 --> 00:04:19,709
Google Play Store or Apple App Store.

49
00:04:19,740 --> 00:04:21,269
You are familiar with it.

50
00:04:21,570 --> 00:04:24,960
It's different the platform and the access.

51
00:04:25,680 --> 00:04:28,620
The development process is also different.

52
00:04:28,650 --> 00:04:35,040
Web applications are generally developed with technologies like HTML, CSS, and JavaScript.

53
00:04:35,040 --> 00:04:41,490
They are easier to maintain as they are updated directly on the server, and users always access the

54
00:04:41,490 --> 00:04:42,690
latest version.

55
00:04:43,660 --> 00:04:52,180
The mobile applications are developed using languages and frameworks specific to mobile platforms like

56
00:04:52,180 --> 00:04:54,280
Switch or Kotlin.

57
00:04:54,310 --> 00:04:59,590
They may require separate mainframe maintenance and updates for each platform.

58
00:04:59,590 --> 00:05:06,550
So probably you are familiar with HTML, CSS, and JavaScript, but not so familiar with Swift and Kotlin.

59
00:05:06,550 --> 00:05:14,230
And that's a reason for that, because mobile applications are minoritarian and web applications are

60
00:05:14,230 --> 00:05:15,280
universal.

61
00:05:16,290 --> 00:05:18,570
What kind of things can do?

62
00:05:18,570 --> 00:05:19,800
Web applications.

63
00:05:20,220 --> 00:05:21,180
Whatever.

64
00:05:21,180 --> 00:05:22,470
Whatever you want.

65
00:05:22,800 --> 00:05:24,150
The sky is the limit.

66
00:05:24,150 --> 00:05:26,460
Your imagination is the limit.

67
00:05:26,490 --> 00:05:35,760
So everything we could use, uh, 30 years ago in a computer, we can do today in the web.

68
00:05:36,420 --> 00:05:45,480
So information, education, commerce, financial services, social networks, entertainment, productivity,

69
00:05:45,480 --> 00:05:51,720
business communication, content management, health, wellness, whatever you think of, you can do

70
00:05:51,720 --> 00:05:53,220
it with a web application.

71
00:05:54,800 --> 00:05:57,650
What is the development process of a web application?

72
00:05:57,650 --> 00:06:05,390
And when I say web application, you can also say full stack application because on a daily basis.

73
00:06:06,100 --> 00:06:06,550
It.

74
00:06:06,550 --> 00:06:08,230
They are the same for us.

75
00:06:08,230 --> 00:06:17,440
So for a full stack application or a web application, we have a development process that you immediately

76
00:06:17,440 --> 00:06:18,160
see.

77
00:06:18,160 --> 00:06:20,260
It is more complex than the process.

78
00:06:20,260 --> 00:06:27,160
We are used to a follow in the level one and level two applications.

79
00:06:29,060 --> 00:06:38,120
So when we are talking about professional applications, what we what we what we mean, what we what

80
00:06:38,120 --> 00:06:44,810
we identify by level three applications, we have many different stages.

81
00:06:44,810 --> 00:06:48,050
So we have the initial planning and analysis stage.

82
00:06:48,050 --> 00:06:49,730
We are not programming here.

83
00:06:49,880 --> 00:06:52,220
We have the graphic design stage.

84
00:06:52,220 --> 00:06:53,510
We are not programming.

85
00:06:53,870 --> 00:06:55,670
We have the development stage.

86
00:06:56,000 --> 00:06:57,410
Now we are programming.

87
00:06:57,410 --> 00:06:59,810
Then we have the testing stage.

88
00:06:59,810 --> 00:07:02,300
And we are not talking about testing the code.

89
00:07:02,300 --> 00:07:04,430
This is testing the application.

90
00:07:04,610 --> 00:07:12,140
Then we have the the deployment, the servers, the maintenance and, you know, production.

91
00:07:12,140 --> 00:07:13,820
You can call it production stage.

92
00:07:13,820 --> 00:07:16,400
And then what we can call the evolution.

93
00:07:16,670 --> 00:07:27,410
So for example when you are working in a in a startup, a the main uh, time of the software engineers

94
00:07:27,440 --> 00:07:30,830
is focused on this, uh, stage maintenance.

95
00:07:30,830 --> 00:07:37,640
So the initial stage, the initial stages of the startup are focus on the development and testing,

96
00:07:37,640 --> 00:07:38,510
you know, and deployment.

97
00:07:38,510 --> 00:07:45,650
But once the product is in the market, the main job of the of the engineers is maintenance and evolution.

98
00:07:45,650 --> 00:07:46,400
Okay.

99
00:07:47,150 --> 00:07:53,840
A This is a very interesting concept, and I think these three ideas are very important now.

100
00:07:54,020 --> 00:08:02,000
So a web application or a full stack application can be understood like a Lego construction.

101
00:08:02,000 --> 00:08:08,390
I think most of us we have played with Lego constructions when we well this is called Lego in Spanish,

102
00:08:08,390 --> 00:08:10,640
probably in English would be Lego, I don't know.

103
00:08:10,910 --> 00:08:18,380
So don't be overwhelmed by the number of pieces of a full stack application.

104
00:08:19,200 --> 00:08:23,970
Web development relies on many pre-designed packages.

105
00:08:23,970 --> 00:08:24,990
This is very important.

106
00:08:24,990 --> 00:08:25,590
So.

107
00:08:27,420 --> 00:08:29,310
99%.

108
00:08:30,110 --> 00:08:37,220
Of the times, a full stack application, or a web application.

109
00:08:37,220 --> 00:08:39,770
It is not built from scratch.

110
00:08:39,799 --> 00:08:45,920
It is going to use many parts that are already built for you.

111
00:08:46,430 --> 00:08:54,800
So it's like for example, if you are a mechanic auto mechanic and you want to build a car, probably

112
00:08:54,800 --> 00:08:57,650
you are not going to build every little piece.

113
00:08:57,650 --> 00:09:05,480
You will buy the different parts of the car, the engine, the wheels, the whatever, and then you

114
00:09:05,480 --> 00:09:07,340
will assemble all of them.

115
00:09:07,340 --> 00:09:13,220
And in some cases you will customize or you would you would do some personal touch here and there.

116
00:09:13,220 --> 00:09:16,400
It's the same thing with application development.

117
00:09:16,400 --> 00:09:21,440
We are going to use a lot of parts that are already built for us.

118
00:09:21,890 --> 00:09:24,470
We are going, we are going to assemble them.

119
00:09:24,470 --> 00:09:31,370
And in some areas we are going to include some custom code or custom functionality.

120
00:09:32,000 --> 00:09:41,000
So I say this because it is very important for you to understand immediately that no software engineer,

121
00:09:41,030 --> 00:09:50,060
no artificial intelligence engineer, masters all the pieces of of an application before starting to

122
00:09:50,060 --> 00:09:51,200
work on a project.

123
00:09:51,920 --> 00:09:58,370
So it is very important for you to realize this, because this will help you to avoid what is called

124
00:09:58,370 --> 00:10:00,500
the imposter syndrome.

125
00:10:00,500 --> 00:10:08,000
The imposter syndrome is this stress that a new software engineer or a new artificial intelligence engineer

126
00:10:08,000 --> 00:10:15,170
feels when they see a whole project, you know, in front of them and so many areas they are not familiar

127
00:10:15,170 --> 00:10:23,810
with, that is the daily routine of a senior artificial intelligence engineer or a software engineer.

128
00:10:23,810 --> 00:10:24,710
So don't worry about that.

129
00:10:24,710 --> 00:10:27,410
That's the that's the normal a.

130
00:10:28,380 --> 00:10:33,030
So it is important for you to understand this second point.

131
00:10:33,030 --> 00:10:39,630
The essential thing is to understand the key concepts and the main skeleton of the application, the

132
00:10:39,630 --> 00:10:43,770
empty house or the blueprint of the building we are going to build.

133
00:10:43,770 --> 00:10:44,400
Okay.

134
00:10:44,520 --> 00:10:48,150
And the decorative details are secondary okay.

135
00:10:48,150 --> 00:10:55,140
So you need to understand the conceptual approach, the different parts, how they work, you know,

136
00:10:55,200 --> 00:10:56,940
uh on a high level.

137
00:10:56,940 --> 00:11:03,210
And then once you have to focus your attention in each on each of them, then you will go into the details.

138
00:11:05,050 --> 00:11:08,260
Keys to prevent a project from getting out of control.

139
00:11:08,260 --> 00:11:13,330
So usually full stack applications are complex applications.

140
00:11:13,330 --> 00:11:14,410
They have many parts.

141
00:11:14,410 --> 00:11:17,860
We will see now some of the usual parts they have.

142
00:11:17,860 --> 00:11:20,710
And you will see, hey, this is something serious.

143
00:11:20,710 --> 00:11:23,560
We are talking about authentication of users.

144
00:11:23,560 --> 00:11:25,810
We are talking about security.

145
00:11:25,810 --> 00:11:28,000
We are talking about some sensible areas.

146
00:11:28,000 --> 00:11:35,800
So it is important for you to divide the application into small pieces and go one by one.

147
00:11:35,800 --> 00:11:38,080
Usually you are going to work with.

148
00:11:38,880 --> 00:11:42,660
One or more teams, so it will be more than you.

149
00:11:42,870 --> 00:11:44,670
Uh, involved in the process.

150
00:11:44,670 --> 00:11:49,650
But in some cases, if the application is small or for example, you are in a startup and you are the

151
00:11:49,650 --> 00:11:54,840
first engineer in in a startup, you may be the one, the only one.

152
00:11:54,840 --> 00:12:01,020
So it will be important for you, even if you are working by yourself to divide the application into

153
00:12:01,020 --> 00:12:08,700
small pieces and then use testing to ensure that subsequent changes don't break what you have already

154
00:12:08,700 --> 00:12:09,030
developed.

155
00:12:09,030 --> 00:12:12,150
This is very, very, very, very important.

156
00:12:12,150 --> 00:12:13,740
Very, very, very important.

157
00:12:13,950 --> 00:12:18,420
And usually even when they are aware of that.

158
00:12:19,120 --> 00:12:26,890
Many engineers don't apply this when they are working in the startup environment, and they need to

159
00:12:26,890 --> 00:12:28,120
feel the pain.

160
00:12:28,930 --> 00:12:35,200
In order to change a the bad habits is really surprising.

161
00:12:35,200 --> 00:12:43,720
How many startups a start their development process without testing?

162
00:12:44,170 --> 00:12:55,270
Testing is the way to build software, with security, with control, and with a reliability.

163
00:12:55,270 --> 00:13:04,420
So I absolutely encourage you to work with testing, develop software and testing at the same time.

164
00:13:04,420 --> 00:13:10,900
And with the testing, you will be sure that every piece you build is working.

165
00:13:11,660 --> 00:13:15,410
When you finish it and one month later.

166
00:13:16,960 --> 00:13:24,370
Because sometimes, many times if you don't use testing when you build new pieces, you may break the

167
00:13:24,370 --> 00:13:25,420
previous ones.

168
00:13:25,450 --> 00:13:27,130
So very important.

169
00:13:28,520 --> 00:13:34,490
We will talk a little bit about testing is out of the range of the of the of this program.

170
00:13:34,490 --> 00:13:38,000
But it's very important to launch this message now.

171
00:13:38,000 --> 00:13:38,750
So.

172
00:13:39,620 --> 00:13:44,750
What are the main components of a full stack application or a web application?

173
00:13:45,430 --> 00:13:51,400
We have been talking about the front end, which is the part of the application that the users see and

174
00:13:51,400 --> 00:13:54,160
interact with and also with the.

175
00:13:54,190 --> 00:13:57,130
We have been talking about the back end, the back end.

176
00:13:57,370 --> 00:14:02,890
We normally understand the back end as the main logic of the application.

177
00:14:02,890 --> 00:14:09,190
So usually we say okay, a full stack application is front end plus back end.

178
00:14:10,580 --> 00:14:16,700
In some cases, we call client to the front end and server to the back end.

179
00:14:17,810 --> 00:14:19,040
But as you will see.

180
00:14:20,290 --> 00:14:24,160
We are also going to use server for the front end.

181
00:14:24,160 --> 00:14:30,520
So this is not exactly accurate, but let's call it front end and back end.

182
00:14:30,520 --> 00:14:37,210
So here we tell you the front end includes everything related to the user interface such as web pages,

183
00:14:37,210 --> 00:14:38,380
images and styles.

184
00:14:38,380 --> 00:14:43,540
And it is developed using technologies like HTML, CSS and mostly JavaScript.

185
00:14:43,540 --> 00:14:44,920
It's not exactly JavaScript.

186
00:14:44,920 --> 00:14:49,270
It's a framework built with JavaScript, mostly react here.

187
00:14:49,270 --> 00:14:55,000
And what we are going to use, which is next, is just a kind of react.

188
00:14:55,800 --> 00:15:01,170
Then in the back end a it processes a.

189
00:15:01,530 --> 00:15:09,090
When we say client request, we mean front end request, performs database operations and returns results

190
00:15:09,090 --> 00:15:10,140
to the client.

191
00:15:10,140 --> 00:15:11,070
The front end.

192
00:15:11,190 --> 00:15:14,010
It is developed with programming languages.

193
00:15:15,080 --> 00:15:17,870
Python like Python, Java, Ruby or Node.

194
00:15:17,900 --> 00:15:23,780
Right now, the most popular backend language framework is node.

195
00:15:24,260 --> 00:15:28,130
In the whole universe of web applications.

196
00:15:28,130 --> 00:15:33,050
But if you go to the artificial intelligence full stack application is Python.

197
00:15:34,580 --> 00:15:39,380
But the full stack applications are not just front end and back end.

198
00:15:39,410 --> 00:15:41,750
They are also databases.

199
00:15:41,750 --> 00:15:46,520
And you will see that we have the traditional databases and the vector databases.

200
00:15:46,820 --> 00:15:56,180
We also have other elements like cron jobs, like APIs, like a hosting in the cloud, you know, like

201
00:15:56,180 --> 00:15:59,090
Amazon Web Services, S3, etc., etc..

202
00:15:59,090 --> 00:16:07,970
So as you can see from the development process and also the main components, this is a different league.

203
00:16:08,180 --> 00:16:16,190
So we we used to say when we reach this point in the program, fasten your seat belts.

204
00:16:16,220 --> 00:16:22,730
It's like you know going to the to the plane and listen to the, to the, to the crew telling you,

205
00:16:22,760 --> 00:16:24,710
fasten your seat belts, your seat belts.

206
00:16:24,710 --> 00:16:31,550
Now we are entering in a totally different, uh, phase of the program.

207
00:16:32,150 --> 00:16:40,220
If you think of the demo applications we did in the level one applications or the demo we did in the

208
00:16:40,220 --> 00:16:44,420
level two applications with the demo user interface.

209
00:16:44,570 --> 00:16:52,040
Now we are in a totally different stage, and so you will see that this is a totally different stage.

210
00:16:55,450 --> 00:16:58,510
Inside a full stack application we have.

211
00:16:59,230 --> 00:17:01,270
These many components are more.

212
00:17:01,270 --> 00:17:10,119
And we have also some main processes like page creation, dynamic URL creations, routing which is very

213
00:17:10,119 --> 00:17:10,630
important.

214
00:17:10,630 --> 00:17:12,849
And we will see more about that very soon.

215
00:17:13,960 --> 00:17:19,869
Connected with connecting with data sources, mostly databases, connecting with APIs, authentication

216
00:17:19,869 --> 00:17:21,670
and security and many others.

217
00:17:21,670 --> 00:17:29,620
Okay, so a full stack application or a web application has a lot of functionalities like the ones you

218
00:17:29,620 --> 00:17:30,130
have.

219
00:17:30,220 --> 00:17:32,980
These are short list of some of them.

220
00:17:33,340 --> 00:17:39,550
So how do you apply all this to the full stack LM applications.

221
00:17:39,550 --> 00:17:48,700
The professional applications what we call the level three applications a so remember we have already

222
00:17:48,700 --> 00:17:53,860
been talking about the proof of concept phase.

223
00:17:54,900 --> 00:18:01,710
So when we are developing a professional application, the first thing we are going to do is a prototype.

224
00:18:02,250 --> 00:18:08,760
And in most cases we will have a prototype as in level two application.

225
00:18:08,760 --> 00:18:17,040
So with a user interface that we can present to the user the the customer, the manager, whatever,

226
00:18:17,040 --> 00:18:18,900
just to get their feedback.

227
00:18:19,350 --> 00:18:26,340
Once they provide feedback, we are ready to start working in the professional application.

228
00:18:26,340 --> 00:18:31,410
And the professional application normally has two main phases.

229
00:18:32,490 --> 00:18:38,580
For example, if you are in the startup world, in the second phase, you are not going to build the

230
00:18:38,580 --> 00:18:40,770
whole application.

231
00:18:40,770 --> 00:18:46,650
You are just going to build what we call the minimum minimum viable product or MVP.

232
00:18:47,310 --> 00:18:58,470
So in the startup world, in this second phase, we are going to confirm that we are able to build a

233
00:18:58,470 --> 00:19:04,650
minimum solution from the technical point of view.

234
00:19:05,010 --> 00:19:14,400
And at the same time, we are going to be able to prove that we are able to get the.

235
00:19:15,450 --> 00:19:17,520
Require investment.

236
00:19:17,520 --> 00:19:26,040
So this is the the the phase where in the startup world we build the MVP and we raised the first round

237
00:19:26,040 --> 00:19:33,600
of capital, the seed capital once you have this seed capital is when you start building your team of

238
00:19:33,600 --> 00:19:34,410
engineers.

239
00:19:35,190 --> 00:19:42,570
So it is very frequent that in this phase one and phase two, you have only one engineer.

240
00:19:42,570 --> 00:19:49,350
That's why you as a full stack LM app engineer, can be working in a startup.

241
00:19:49,350 --> 00:19:55,350
And this first engineer is the engineer that is going to become CTO.

242
00:19:55,440 --> 00:19:56,070
Okay.

243
00:19:56,070 --> 00:20:01,440
So he's the one that is going to hire the front end engineers, the back end engineers, etc..

244
00:20:01,440 --> 00:20:02,160
Okay.

245
00:20:03,180 --> 00:20:06,990
So in this initial lesson.

246
00:20:07,720 --> 00:20:14,800
You realize how different it is this new, uh, stage we are right now?

247
00:20:15,130 --> 00:20:20,440
Level three applications are a totally different world.

248
00:20:20,440 --> 00:20:27,940
And that's why I was telling you at the beginning of the program that it was frustrating to go to so

249
00:20:27,940 --> 00:20:35,950
many courses and, and, and articles and blog posts talking about demos and toy demos and toy user

250
00:20:35,950 --> 00:20:39,130
interfaces that you cannot use in the real world.

251
00:20:39,130 --> 00:20:43,900
So now we are entering in the real phase, in the professional phase.

252
00:20:43,900 --> 00:20:44,440
Okay.

253
00:20:44,440 --> 00:20:50,080
So next we are going to start talking about the key elements of the front end.