1
00:00:00,330 --> 00:00:03,030
Bien, en esta clase vamos a crear el controlador.

2
00:00:03,150 --> 00:00:07,350
Es importante que esté siempre dentro del package, base o raíz.

3
00:00:07,440 --> 00:00:12,120
Vamos a crear un nuevo package controller punto.

4
00:00:12,570 --> 00:00:21,620
Dentro de este package principal controllers y dentro este package vamos a crear una clase controladora.

5
00:00:21,990 --> 00:00:28,200
Click derecho new class Una clase de yaba index.

6
00:00:28,230 --> 00:00:32,170
Controlás le podemos dar el nombre que queramos.

7
00:00:32,190 --> 00:00:35,730
Por ejemplo, index o Home Inicio Controller.

8
00:00:35,850 --> 00:00:38,610
Básicamente Index por dar un nombre por defecto.

9
00:00:38,760 --> 00:00:41,700
Un controlador que representa nuestra página de inicio.

10
00:00:41,940 --> 00:00:49,200
Lo que sí es importante como una convención de nombre un estándar es que toda clase controladora debe

11
00:00:49,290 --> 00:00:51,930
iniciar en mayúscula como cualquier clase en Java.

12
00:00:52,020 --> 00:00:58,830
Eso es un estándar, pero además debe llevar el sufijo controller tal cual index controles.

13
00:00:58,920 --> 00:01:05,070
Cada controlador, cada nombre de una clase controladora siempre debe terminar con controles y por supuesto

14
00:01:05,070 --> 00:01:06,540
que se separa en mayúscula.

15
00:01:06,810 --> 00:01:10,200
Dos palabras compuestas finalizar.

16
00:01:11,810 --> 00:01:23,000
Es una clase típica de Yaba, pero está anotada con Controller, con control y la barra importamos esta

17
00:01:23,000 --> 00:01:30,220
anotación o decorador como le queramos llamar, marca o configura esta clase como un componente de Spring,

18
00:01:30,320 --> 00:01:32,180
pero del tipo controlador.

19
00:01:32,270 --> 00:01:38,900
Por ejemplo, si hacemos un click con control click sobre controles sobre esta anotación observamos

20
00:01:38,930 --> 00:01:42,920
que está anotada con component y toda clase anotada con component.

21
00:01:43,130 --> 00:01:46,760
En este caso va a estar anotada con component a través de Controller.

22
00:01:47,000 --> 00:01:49,730
Marca esta clase como un componente de Spring.

23
00:01:49,980 --> 00:01:57,290
Básicamente es un objeto del tipo controlador que va a ser manejado dentro del contenedor de Spring

24
00:01:57,290 --> 00:02:00,290
Framework y lo va a manejar de forma automática.

25
00:02:02,070 --> 00:02:07,860
Y cómo está dentro del РАМКАХ base automáticamente nuestra clase principal?

26
00:02:08,610 --> 00:02:12,080
Acá tenemos la configuración dentro de put application.

27
00:02:13,140 --> 00:02:20,400
La anotación component scan va a buscar toda esta clase con estas anotaciones y las va a configurar

28
00:02:20,400 --> 00:02:21,360
de forma automática.

29
00:02:22,800 --> 00:02:24,600
Eso lo vimos en la clase anterior.

30
00:02:25,240 --> 00:02:32,400
Bien, un controlador va a tener métodos, métodos de acción o handler que va a manejar una petición

31
00:02:32,520 --> 00:02:34,150
http del usuario.

32
00:02:34,260 --> 00:02:40,890
Por ejemplo, para mostrar un formulario para cargar datos, un listado de algo, consultas a la base

33
00:02:40,890 --> 00:02:48,570
datos guardar, insertar, eliminar en cada método handler o de acción representa una página web que

34
00:02:48,630 --> 00:02:52,650
hace algo y que trabaja con los datos de nuestra aplicación.

35
00:02:52,770 --> 00:02:54,840
Y estos datos se van a mostrar.

36
00:02:54,960 --> 00:02:58,800
Se van a representar en una vista dentro de la respuesta.

37
00:02:58,860 --> 00:03:00,210
En este caso con Emily.

38
00:03:00,390 --> 00:03:07,080
Entonces básicamente el controlador se encarga de manejar las peticiones del usuario, mostrar la página,

39
00:03:07,170 --> 00:03:10,620
la respuesta con los datos que el usuario ha solicitado.

40
00:03:10,710 --> 00:03:12,900
Por ejemplo, vamos a tener un método.

41
00:03:13,800 --> 00:03:15,150
Siempre son públicos.

42
00:03:15,990 --> 00:03:17,540
Va a retornar un string.

43
00:03:17,730 --> 00:03:24,240
Después lo vamos a ver con más detalle, pero básicamente es el nombre de la vista que tiene que mostrar

44
00:03:24,360 --> 00:03:29,670
o cargar el nombre de lo mismo index o le colocamos como queramos.

45
00:03:29,790 --> 00:03:30,660
Inicio.

46
00:03:30,780 --> 00:03:31,320
Hola!

47
00:03:31,440 --> 00:03:32,010
Qué se yo.

48
00:03:32,100 --> 00:03:35,190
Cualquier nombre, pero una buena idea.

49
00:03:35,280 --> 00:03:39,900
Como es un controlador por defecto, nuestro método por defecto se va a llamar index.

50
00:03:40,170 --> 00:03:46,950
Un controlador puede tener varios métodos y cada método va a manejar una página, una petición http

51
00:03:47,100 --> 00:03:47,790
distinta.

52
00:03:47,880 --> 00:03:54,300
Por ejemplo, una para listar, otra para mostrar el formulario, otra para editar el formulario, otra

53
00:03:54,360 --> 00:03:56,280
para guardar los datos para eliminar.

54
00:03:56,340 --> 00:04:00,750
En fin, habíamos dicho que retorna el nombre de la vista.

55
00:04:01,080 --> 00:04:09,510
Por ejemplo, si retornamos acá Index tendremos que crear una plantilla que se llama Index punto HTML.

56
00:04:09,630 --> 00:04:16,770
Y esa plantilla la tenemos que guardar en los recursos en templates, pero eso lo vamos a hacer luego.

57
00:04:16,860 --> 00:04:19,980
Por ahora tenemos que terminar de implementar este método.

58
00:04:20,400 --> 00:04:22,590
Lo siguiente es mapear.

59
00:04:22,680 --> 00:04:30,030
Claro, tendremos que mapear de alguna forma o relacionar este método index a una ruta u RL para que

60
00:04:30,030 --> 00:04:36,540
el cliente, el usuario cuando navegue en nuestra aplicación, escriba, por ejemplo index y automáticamente

61
00:04:36,540 --> 00:04:43,050
se invoque este método y cargue y muestre la vista index punto html con los datos, con los datos que

62
00:04:43,050 --> 00:04:44,970
implementemos dentro de este método.

63
00:04:45,150 --> 00:04:46,290
Lógica de negocio.

64
00:04:46,410 --> 00:04:47,220
Lo que queramos.

65
00:04:47,340 --> 00:04:51,330
Entonces para mapear usamos la anotación Request Mapping.

66
00:04:53,610 --> 00:04:56,340
La importamos con control, barra espacio.

67
00:04:56,880 --> 00:05:06,030
Acá tenemos el import y acá vamos a indicar en el value o en el Paz en cualquiera de los dos.

68
00:05:06,150 --> 00:05:09,720
De hecho el value es un alias del path.

69
00:05:09,810 --> 00:05:12,720
Por lo general se usa el value, pero da lo mismo.

70
00:05:12,870 --> 00:05:18,600
Igual un string siempre comienza con un es el larch y acá la ruta que queramos.

71
00:05:18,660 --> 00:05:24,570
Un nombre también alfanuméricos, simple, sin caracteres especiales, sin espacios, sin acentos,

72
00:05:24,570 --> 00:05:28,980
sin eñes, una ruta u RL, por ejemplo index.

73
00:05:29,100 --> 00:05:36,180
Entonces cada vez que escribamos en el navegador localhost 80 80 Larch Index va a ejecutar este método.

74
00:05:36,660 --> 00:05:43,020
Ricoh es mapping por defecto, es del tipo del request o el método de petición GET.

75
00:05:43,170 --> 00:05:49,740
Si no se indica en GET, pero también podríamos indicar otro tipo, otro método de petición.

76
00:05:50,100 --> 00:05:55,980
Por ejemplo el post si estamos trabajando con formulario para enviar datos, si estamos trabajando con

77
00:05:55,980 --> 00:05:59,610
API, rest, put, delete, en fin, de toda forma.

78
00:05:59,700 --> 00:06:04,980
Si se omite, nyet, pero también lo podemos indicar de forma explícita.

79
00:06:05,040 --> 00:06:11,370
Por ejemplo, igual request method también se importa.

80
00:06:11,970 --> 00:06:12,630
Punto.

81
00:06:12,750 --> 00:06:13,170
Guet.

82
00:06:14,460 --> 00:06:15,030
Perfecto.

83
00:06:15,120 --> 00:06:15,620
Ahí lo tenemos.

84
00:06:15,630 --> 00:06:16,200
El tipo GET.

85
00:06:16,290 --> 00:06:19,710
Ahora como explicabas, si se omite también que el tipo GET.

86
00:06:20,250 --> 00:06:26,730
Si trabajamos con datos del formulario cuando el formulario envía los datos acá en el controlador se

87
00:06:26,730 --> 00:06:28,360
recibe como tipo post.

88
00:06:29,220 --> 00:06:30,480
Bueno, después lo vamos a ver.

89
00:06:31,710 --> 00:06:33,120
Esto sería una forma.

90
00:06:33,270 --> 00:06:37,440
También tenemos otra forma que son alias del rico.

91
00:06:37,440 --> 00:06:38,820
Es Mapping, por ejemplo.

92
00:06:38,880 --> 00:06:49,050
Esto lo puedo quitar bjo el value index y en vez de Rickert colocamos acá get con una sola T y por supuesto

93
00:06:49,050 --> 00:06:58,200
tenemos que importar get mapping solamente es del tipo GET y acá lo dice es un rico, es mapping con

94
00:06:58,200 --> 00:06:59,610
el método GET.

95
00:07:00,750 --> 00:07:02,520
Pero también tenemos post.

96
00:07:05,580 --> 00:07:12,750
Acá es rico, es mapping de método post del tipo post y así también por cada tipo de petición tenemos

97
00:07:12,750 --> 00:07:17,100
el post, el get, el delight, el put@, en fin, cualquiera.

98
00:07:17,640 --> 00:07:25,020
Así que en nuestro ejemplo, obviamente del tipo GET, ya que simplemente vamos a cargar una página

99
00:07:25,080 --> 00:07:30,300
mediante una ruta u RL, podemos usar Get Mapping o El Rico es mapping.

100
00:07:30,870 --> 00:07:34,500
Cualquiera de las formas que usemos es exactamente lo mismo.

101
00:07:34,620 --> 00:07:35,610
No hay ninguna diferencia.

102
00:07:35,910 --> 00:07:44,250
Por ejemplo, get mapping o si usamos Rico es mapping o El Rico es mapping con el método GET de forma

103
00:07:44,310 --> 00:07:45,000
explícita.

104
00:07:45,270 --> 00:07:49,800
Esas tres formas da exactamente igual el mismo resultado.

105
00:07:49,890 --> 00:07:56,040
Por lo tanto, si me preguntan qué recomiendo, usen el que quieran, el que más les guste de preferencia.

106
00:07:56,250 --> 00:08:05,490
Encuentro mucho más simple utilizar por ejemplo el liggett o el post o el put o el delito solamente

107
00:08:05,490 --> 00:08:07,230
porque más limpio, pero nada más.

108
00:08:08,520 --> 00:08:16,090
Así que para el ejemplo lo voy a dejar con Get Mapping y también el value es el parámetro por defecto.

109
00:08:16,230 --> 00:08:24,000
Por lo tanto, si no tengo más parámetro lo puedo omitir y simplemente le colocamos Index Get Mapping,

110
00:08:24,480 --> 00:08:27,870
doble comilla y la ruta Ureta automáticamente.

111
00:08:27,990 --> 00:08:33,120
Esto se va a asignar al value o al paz de la notación get nappy.

112
00:08:33,300 --> 00:08:33,780
Qué más?

113
00:08:33,870 --> 00:08:37,380
Un método puede estar mapeado a más de una ruta?

114
00:08:37,440 --> 00:08:44,220
VL Bueno, por supuesto que sí, indicando acá las llaves, por ejemplo, en vez de un string, colocamos

115
00:08:44,220 --> 00:08:48,180
llaves y separamos por comas, por ejemplo Index, Koma.

116
00:08:48,660 --> 00:08:54,630
También va a estar mapeado a la raíz de nuestra aplicación, pero también podría estar mapeado a ON.

117
00:08:56,490 --> 00:08:57,900
Está mapeado a otra ruta.

118
00:08:58,080 --> 00:09:05,550
RL con las llaves representa un arreglo perfecto y ahí tenemos nuestro controlador básico que está mapeado

119
00:09:05,670 --> 00:09:09,570
a rutas a una o varias y carga una vista.

120
00:09:09,690 --> 00:09:13,650
Ahora el siguiente paso es crear esta vista con este mismo nombre.

121
00:09:14,250 --> 00:09:21,450
Entonces nos vamos a Recursos Templates y acá vamos a crear la vista index.

122
00:09:21,600 --> 00:09:23,910
Un html new otro.

123
00:09:25,780 --> 00:09:29,770
Por acá tenemos que buscar un web HTML file.

124
00:09:30,970 --> 00:09:39,280
Siguiente y le colocamos el nombre Índex, tal cual, en minúscula, tal como lo colocamos acá.

125
00:09:39,440 --> 00:09:42,280
Bueno, lo nombre de vistas siempre van en minúscula.

126
00:09:42,760 --> 00:09:52,510
FINALIZARLA bueno por defecto crea un HTML con el juego de caracteres en ISO lo vamos a cambiar a UTF

127
00:09:52,600 --> 00:09:57,250
8 y también vamos a agregar acá el cierre.

128
00:09:57,370 --> 00:09:59,880
El es latch para cerrar este elemento HTML.

129
00:10:00,430 --> 00:10:08,410
Si bien un estándar de HTML5 se puede omitir el cierre, pero en Taine LIF eso significa un error,

130
00:10:08,860 --> 00:10:10,870
entonces cerramos este elemento.

131
00:10:11,170 --> 00:10:18,520
Ahora es importante que el meta el charse un Tf8 de juego de carácter sea exactamente el mismo que el

132
00:10:18,610 --> 00:10:19,900
archivo index.

133
00:10:20,350 --> 00:10:23,650
Por ejemplo, si nos vamos a template, nos vamos a index.

134
00:10:24,310 --> 00:10:25,270
Kily derecho.

135
00:10:26,250 --> 00:10:27,060
Pero partís.

136
00:10:28,160 --> 00:10:34,760
Acá tenemos en los resources el encoding o la codificación de los caracteres.

137
00:10:35,460 --> 00:10:36,240
En UTF 8.

138
00:10:36,490 --> 00:10:43,520
Entonces por eso importante campear at Tc8 porque se está en hizo acá y acá está en uted F8.

139
00:10:43,650 --> 00:10:45,650
Bueno, va a tener conflicto.

140
00:10:45,710 --> 00:10:52,580
Por un lado el HTML en un juego de caracteres distinto al que tiene el archivo tiene que ser el mismo.

141
00:10:52,700 --> 00:10:58,310
Dejamos siempre los dos iguales para no tener problema, porque después tenemos problemas con los acentos,

142
00:10:58,310 --> 00:11:00,980
con la ñ que se rompen y un dolor de cabeza.

143
00:11:01,520 --> 00:11:04,880
Y si lo queremos cambiar, acá tenemos otro y seleccionamos.

144
00:11:05,330 --> 00:11:14,810
Acá tenemos el ISO 88 59 1, pero obviamente es mejor siempre y es más estándar usar el VF 8, así que

145
00:11:14,900 --> 00:11:18,440
lo cancelamos, lo dejamos tal como está, perfecto.

146
00:11:18,440 --> 00:11:23,210
Y acá vamos a tener un H1, un título de HTML.

147
00:11:25,010 --> 00:11:26,090
Hola Spring.

148
00:11:26,420 --> 00:11:33,110
Por ahora, por ahora le vamos a colocar ese título de forma literal y también copiamos esto y lo dejamos

149
00:11:33,110 --> 00:11:35,050
en el título del HTML.

150
00:11:35,690 --> 00:11:37,130
Bien, y vamos a levantar.

151
00:11:37,250 --> 00:11:44,360
Vamos a probar cómo quedó nuestra aplicación simple para partir entonces sobre el proyecto con clic

152
00:11:44,360 --> 00:11:45,020
derecho.

153
00:11:46,090 --> 00:11:46,810
Ranas.

154
00:11:47,830 --> 00:11:49,440
Es Spring Boot App.

155
00:11:49,760 --> 00:11:50,900
Hoy arrancamos.

156
00:11:53,340 --> 00:11:57,690
Ahí se abre la pestaña Consola y levanta nuestra aplicación.

157
00:11:57,780 --> 00:12:03,420
Si todo sale bien y nos vamos al navegador y seguimos Index, debería aparecer.

158
00:12:03,510 --> 00:12:06,920
Hola Spring, veamos el boot Dashboard.

159
00:12:07,590 --> 00:12:11,130
Acá tenemos la aplicación como levantada en el puerto 80 80.

160
00:12:11,240 --> 00:12:11,910
Está perfecto.

161
00:12:12,960 --> 00:12:16,440
Acá podemos detener, podemos reiniciar la aplicación.

162
00:12:16,500 --> 00:12:21,390
En fin, lo que nunca deben hacer, una vez que esté levantada, volver a levantar.

163
00:12:21,660 --> 00:12:25,080
Lo que sí pueden es reiniciar, pero no volver a levantar.

164
00:12:25,140 --> 00:12:26,550
Por qué va a ocurrir un error?

165
00:12:27,240 --> 00:12:30,360
Va a detectar que el puerto 80 80 ya está tomado.

166
00:12:30,550 --> 00:12:34,410
Entonces, obviamente, si volvemos a levantar, va a legar por el puerto.

167
00:12:34,620 --> 00:12:35,430
Hagamos la prueba.

168
00:12:35,700 --> 00:12:36,510
Clic derecho.

169
00:12:37,200 --> 00:12:39,090
Ranas es imputado.

170
00:12:39,780 --> 00:12:40,620
Va a dar error.

171
00:12:40,740 --> 00:12:42,570
Esto lo hago para que no lo hagan.

172
00:12:43,560 --> 00:12:44,640
Un error de Tomcat.

173
00:12:44,790 --> 00:12:46,410
La aplicación ha fallado.

174
00:12:47,230 --> 00:12:51,330
Y acá dice que el puerto 80 80 no se pudo levantar porque está tomado.

175
00:12:51,340 --> 00:12:53,400
Está usado por otro servicio.

176
00:12:53,550 --> 00:12:59,070
Bueno, y obviamente porque ya tenemos la anotada cada vez que necesitemos reiniciar, en vez de hacer

177
00:12:59,070 --> 00:13:02,400
esto de volver a levantar, tenemos que reiniciar.

178
00:13:02,550 --> 00:13:03,630
Simplemente acá.

179
00:13:03,840 --> 00:13:06,090
Clic derecho restart.

180
00:13:07,260 --> 00:13:08,550
Y se reinicia.

181
00:13:11,470 --> 00:13:14,020
Se fijan y ahí está perfecto para que lo tengan en cuenta.

182
00:13:14,140 --> 00:13:20,860
Ahora, como tema aparte, como tenemos el TEP Tools, cada cambio que hagamos en el código se va a

183
00:13:20,860 --> 00:13:24,100
reflejar de forma automática y se va a actualizar el display.

184
00:13:24,190 --> 00:13:27,820
El despliegue, por lo tanto, no es necesario tener que reiniciar.

185
00:13:28,000 --> 00:13:35,830
Ahora vámonos al navegador, vámonos al proyecto en el Boot Dashboard, click derecho Open Web Browser.

186
00:13:37,500 --> 00:13:41,370
Perfecto, se fijan, lo tenemos mapeado a la raíz.

187
00:13:41,610 --> 00:13:42,930
Por lo tanto, está funcionando bien.

188
00:13:43,020 --> 00:13:47,280
Si colocamos OUM también debería funcionar perfecto.

189
00:13:47,400 --> 00:13:50,210
Y si colocamos Index, también.

190
00:13:50,550 --> 00:13:53,910
Ahora, si colocamos otra cosa, no?

191
00:13:54,240 --> 00:13:56,310
Porque no está mapeado a la ruta.

192
00:13:56,340 --> 00:13:56,700
Hola.

193
00:13:59,340 --> 00:13:59,880
Perfecto.

194
00:13:59,970 --> 00:14:00,570
Hola, SPRI.

195
00:14:00,780 --> 00:14:00,990
Bien.

196
00:14:01,050 --> 00:14:06,720
Un punto importante que hay que tener en cuenta es que el navegador interno de Eclipse es bastante limitado.

197
00:14:06,840 --> 00:14:10,860
Yo recomiendo por sobretodo utilizar un navegador externo.

198
00:14:10,920 --> 00:14:13,020
Por ejemplo, Firefox o Krom.

199
00:14:13,320 --> 00:14:21,000
Simplemente copian esta ruta wireless y utilizan el navegador externo a Eclipse, por ejemplo, con

200
00:14:21,000 --> 00:14:21,590
Fauré Fox.

201
00:14:22,590 --> 00:14:23,370
Ahí lo tenemos.

202
00:14:23,430 --> 00:14:27,960
Simplemente pegan la ruta o RT localhost 80 80 index.

203
00:14:28,770 --> 00:14:29,810
Hola, hola.

204
00:14:29,970 --> 00:14:36,180
Obviamente no existe porque no está mapeado, pero si escribimos Oum funciona perfecto.

205
00:14:36,600 --> 00:14:36,810
Bien.

206
00:14:36,870 --> 00:14:42,690
Y para finalizar, mencionar que la próxima clase vamos a dedicar a los posibles errores que pueden

207
00:14:42,780 --> 00:14:45,570
ocurrir cuando levantamos nuestra aplicación.

208
00:14:45,690 --> 00:14:52,380
Vamos a analizar los errores más típicos para que tengan cuidado y también para que lo tengan en cuenta.

209
00:14:52,540 --> 00:14:54,060
Bien, por ahora nada más.

210
00:14:54,180 --> 00:14:54,750
Nos vemos.
