1
00:00:01,840 --> 00:00:25,039
Bueno, en este segundo vídeo vamos a empezar a ver o a generar nuestro entorno de trabajo para poder crear ese desarrollo web en el que, como os comentaba en el primer vídeo, va a haber una parte que es el backend y otra parte que es el front, siendo el front la parte del cliente y el backend la parte del servidor.

2
00:00:25,039 --> 00:00:51,740
En esa parte del servidor trabajaremos sobre bases de datos, con ficheros JSON, con diferente información que luego va a recibir esa parte del front, ese cliente y hará con esos datos, en este caso, que vamos a hacer un desarrollo que es un ejemplo que se utiliza mucho,

3
00:00:51,740 --> 00:01:04,140
que es loguearse contra la base de datos, que una vez que estás logueado es porque te has registrado antes, o sea, va a haber esa parte de registro y de loguearse

4
00:01:04,140 --> 00:01:15,620
y una vez que te has registrado y te has logueado correctamente sobre nuestro servidor, sobre nuestro backend, vas a poder gestionar unas tareas

5
00:01:15,620 --> 00:01:25,840
y va a ver esa información de esas tareas que estás dando de alta o eliminando o lo que sea entre el backend y el front

6
00:01:25,840 --> 00:01:37,799
y el front se va a encargar de mostrar al usuario las tareas que tiene registradas utilizando un framework en el front, ¿vale?

7
00:01:37,799 --> 00:01:55,599
que es un poco lo que más me interesa, usando el bootstrap, usando un framework, un framework que no es otra cosa que esas CSS que habéis estudiado en primero,

8
00:01:55,599 --> 00:02:05,359
agrupadas y hechas clases y que podemos utilizar en nuestro desarrollo web de una forma muy cómoda, ¿vale?

9
00:02:05,519 --> 00:02:14,419
De tal manera que al usar ese framework siempre vamos a tener nuestra página web actualizada

10
00:02:14,419 --> 00:02:21,020
porque vamos a ir contra un servidor externo o podríamos descargarnos todas esas clases

11
00:02:21,020 --> 00:02:26,919
y de tal forma que nuestra página no se actualiza, que a veces eso puede ser un problema.

12
00:02:27,599 --> 00:02:34,120
¿Qué es lo que nos interesa en el módulo de desarrollo de interfaces? Pues esa parte del From.

13
00:02:35,580 --> 00:02:43,020
Pero, como os comentaba en el primer vídeo, no quiero hacer un prototipo, quiero hacer todo el despliegue

14
00:02:43,020 --> 00:03:05,680
Para que veáis los diferentes pasos y porque la experiencia dice que al final en el TFG, en el proyecto de fin de grado, cuando hacéis la defensa, la mayor parte de vosotros soléis hacer desarrollos de gestión y siempre van en este sentido.

15
00:03:05,680 --> 00:03:24,800
Siempre va a haber un backend, va a haber un front, va a haber un cliente porque os lo pedimos. Y bueno, creo que es bueno, pues que además de en este módulo, que lo vais a ver en otros módulos, pero cuanto más os insistamos el equipo docente, pues creo que es mejor para vosotros. Así que vamos a trabajarlo todo.

16
00:03:24,800 --> 00:03:33,560
¿Cómo, qué entorno voy a utilizar para crear este backend y este front?

17
00:03:33,560 --> 00:03:42,080
Vamos a usar el node, el node, pues es un entorno que no es el más potente

18
00:03:42,080 --> 00:03:50,319
pero sí os va a servir para adquirir esos conocimientos que luego los vais a poder poner en práctica

19
00:03:50,319 --> 00:03:58,400
en las empresas a las que os voy a llevar en las FCTs, ¿vale? Como puede ser Neoris.

20
00:03:59,599 --> 00:04:07,699
Trabaja en esa parte del back, en esa parte del front, entonces bueno, es otra de las cosas por las que me parece interesante

21
00:04:07,699 --> 00:04:18,699
que lo veáis cuanto más mejor. Node es una forma sencilla de conocer los diferentes módulos que puedes tener

22
00:04:18,699 --> 00:04:26,220
a tu disposición para hacer este tipo de despliegues, es una forma fácil de instalar

23
00:04:26,220 --> 00:04:30,120
y no nos debería dar mucha complicación.

24
00:04:31,279 --> 00:04:35,899
Entonces lo primero que necesito es descargarme ese Node.

25
00:04:35,899 --> 00:04:46,939
Entonces me voy a ir al navegador y en Node.js.org, desde aquí me voy a bajar ese paquete,

26
00:04:46,939 --> 00:04:52,060
ese módulo, ese Node.js, que es el que se va a encargar de crear ese entorno.

27
00:04:53,139 --> 00:04:58,899
Dentro de Node hay una herramienta que es el NPM, que es el Node Package Management,

28
00:04:59,660 --> 00:05:04,660
que es la encargada, es la que más vamos a utilizar a la hora de cargar esos módulos,

29
00:05:04,740 --> 00:05:09,160
como puede ser el Express, que es lo primero que vamos a hacer en esa parte del backend,

30
00:05:09,620 --> 00:05:16,199
con el Express activar ese servidor y activar ese puerto por el que el front se va a conectar

31
00:05:16,199 --> 00:05:23,139
con nosotros vale el cliente se va a conectar con nosotros vale todo lo primero que hago es bajarme

32
00:05:23,139 --> 00:05:31,300
este download note s cuando le pulsáis os va a bajar en la carpeta de descargas

33
00:05:35,319 --> 00:05:42,019
este fichero vale lo ejecuta y si hacéis doble clic y es como siempre no un poco siguiente

34
00:05:42,019 --> 00:05:48,680
siguiente siguiente y se instala es un paquete muy chiquitín y no tiene ningún secreto así que os lo

35
00:05:48,680 --> 00:05:55,199
bajáis y lo instaláis eso es lo primero que tenemos que hacer una vez hecho eso bueno pues yo lo que

36
00:05:55,199 --> 00:06:01,339
he hecho ha sido crear mi carpeta de proyecto que en este caso le llamado proyecto dan 2 vale

37
00:06:01,339 --> 00:06:10,459
podríamos llamarle proyecto dan 2 curso 24 25 bueno como vosotros queráis yo he llamado proyecto

38
00:06:10,459 --> 00:06:17,939
dan 2 dentro del proyecto dan 2 lo que tengo es una carpeta que está vacía ahora mismo que se src

39
00:06:17,939 --> 00:06:27,459
el shows que es en la que luego voy a ir guardando los diferentes sub carpetas pues como pueden ser

40
00:06:27,459 --> 00:06:33,319
los modelos de datos como pueden ser los controladores como pueden ser las rutas vale

41
00:06:33,319 --> 00:06:34,500
puede ser un

42
00:06:34,500 --> 00:06:36,019
no sé, pues

43
00:06:36,019 --> 00:06:39,240
los middleware, todo eso

44
00:06:39,240 --> 00:06:41,399
lo iremos viendo y es lo que me interesa

45
00:06:41,399 --> 00:06:43,000
de todo este

46
00:06:43,000 --> 00:06:45,060
despliegue, ¿vale? entonces yo por ahora solo

47
00:06:45,060 --> 00:06:46,939
me he creado una carpeta

48
00:06:46,939 --> 00:06:49,000
padre, que es proyecto

49
00:06:49,000 --> 00:06:50,980
dan 2, dentro de esa carpeta

50
00:06:50,980 --> 00:06:52,899
padre, proyecto dan 2, he creado

51
00:06:52,899 --> 00:06:54,279
una que es src

52
00:06:54,279 --> 00:06:56,959
esta carpeta

53
00:06:56,959 --> 00:06:58,759
la arrastro y la suelto

54
00:06:58,759 --> 00:07:01,100
dentro de visual studio

55
00:07:01,100 --> 00:07:06,750
code, ¿vale? y entonces

56
00:07:06,750 --> 00:07:12,689
aquí tengo la carpeta padre proyecto dan dos aquí la subcarpeta src y no hay nada dentro

57
00:07:14,430 --> 00:07:21,569
vale entiendo que vosotros ya sabéis trabajar en primero a ver si está viendo en con java

58
00:07:21,569 --> 00:07:31,509
supongo el visual studio code vale es un editor un líder que potente y que se suele utilizar mucho a

59
00:07:31,509 --> 00:07:37,589
a la hora de programar bueno entonces qué es lo primero que voy a hacer crear ese entorno

60
00:07:39,410 --> 00:07:48,389
en out hemos quedado que la herramienta para instalar para cargar los diferentes módulos

61
00:07:49,629 --> 00:07:57,170
de note es el npm entonces lo primero voy a escribir es npm vale recordar que es el note

62
00:07:57,170 --> 00:08:07,550
el PackageManagement, el gestor de los paquetes de Node, entonces le vamos a decir que esto,

63
00:08:07,550 --> 00:08:15,230
lo que queremos es que nos cree ese entorno de trabajo, entonces ese entorno de trabajo va a

64
00:08:15,230 --> 00:08:21,230
ser, inicialízalo, vale, entonces le voy a pasar el init, y le voy a pasar un guión medio y,

65
00:08:21,230 --> 00:08:26,490
Y, ¿vale? Ese es el yes, el que a todo me diga que yes.

66
00:08:26,829 --> 00:08:33,029
Esto lo único que hace es crear ese entorno, es crear un JSOM, un fichero JSOM,

67
00:08:33,889 --> 00:08:37,389
que ahora os enseño un poco la estructura cuando nos lo cree,

68
00:08:39,029 --> 00:08:43,490
en el que va a estar toda la configuración de este proyecto, ¿vale?

69
00:08:44,129 --> 00:08:50,830
Entonces, bueno, vamos a darle a npm init-y, le doy a enter, ¿vale?

70
00:08:50,830 --> 00:09:07,250
Entonces veis que me ha creado dentro de la carpeta padre, proyecto dam2, me ha creado aquí un fichero que es package.json, que también me lo está enseñando en el terminal, ¿vale?

71
00:09:07,250 --> 00:09:39,419
Entonces, veis que en el terminal lo que nos ha hecho es escribió el fichero, el package.json, que obviamente si abro la carpeta, pues vamos a ver, este, vamos a venirnos aquí, si abro aquí la carpeta, también lo tengo aquí el package.json, esto ya lo sabéis, no os estoy diciendo nada nuevo, ¿vale? Incluso es un poco una tontería que os lo diga ahora.

72
00:09:39,419 --> 00:10:04,940
Bueno, nos ha creado este JSON que como veis es un fichero JSON que es clave-valor, clave-valor, ¿vale? Entonces, ese valor puede ser otra clave-valor, ¿vale? Entonces, esta forma de trabajar, esta forma de intercambiar información entre diferentes módulos es muy cómoda, ¿vale?

73
00:10:04,940 --> 00:10:08,139
Entonces vamos a trabajar todo el tiempo con esos Json.

74
00:10:09,240 --> 00:10:11,860
A mí me crea este package Json, ¿veis?

75
00:10:11,899 --> 00:10:18,299
Y me dice el nombre del proyecto, la versión, cuál va a ser ese fichero principal, el main,

76
00:10:18,299 --> 00:10:23,480
los scripts que puedo ejecutar, ¿vale?

77
00:10:24,980 --> 00:10:30,500
Desde el node, diferentes informaciones, el autor, ¿vale?

78
00:10:30,500 --> 00:10:36,919
entonces por ejemplo aquí en el autor puedo poner vamos a abrirlo y en el

79
00:10:36,919 --> 00:10:41,679
autor le voy a decir que pues es

80
00:10:43,059 --> 00:10:48,620
y es villablanca bueno podríamos tener aquí diferentes

81
00:10:48,620 --> 00:10:52,000
información vale

82
00:10:54,230 --> 00:11:04,769
desarrollo web creado por los alumnos

83
00:11:04,769 --> 00:11:09,340
y es

84
00:11:09,340 --> 00:11:18,220
Villablanca, vale, vamos creando

85
00:11:18,220 --> 00:11:22,220
vamos metiendo información, al final, ahora mismo no es nada más que eso

86
00:11:22,220 --> 00:11:26,500
vais a ver que este fichero es importante, porque es en el que

87
00:11:26,500 --> 00:11:30,639
vamos a ir configurando, por ejemplo, con los ficheros

88
00:11:30,639 --> 00:11:34,480
JS, los ficheros que son de Javascript, ese import

89
00:11:34,480 --> 00:11:37,659
o el importar módulos

90
00:11:37,659 --> 00:11:43,159
o exportar variables, lo tenemos que cargar desde aquí, ¿vale?

91
00:11:44,139 --> 00:11:46,899
Ya os veréis que aquí hay que meter una clave que es type

92
00:11:46,899 --> 00:11:51,460
y un valor que es módulo, porque si no, no nos funciona

93
00:11:51,460 --> 00:11:53,220
y eso lo vamos a ver ahora, ¿vale?

94
00:11:53,220 --> 00:11:56,500
Entonces, este fichero, este json es importante.

95
00:11:56,639 --> 00:12:00,019
Una vez que tenéis el json, es porque ya habéis creado

96
00:12:00,019 --> 00:12:02,059
ese entorno del node, ¿vale?

97
00:12:02,080 --> 00:12:04,519
Ya tenemos ese entorno y podemos empezar a trabajar.

98
00:12:04,519 --> 00:12:18,970
vale que es lo siguiente que voy a hacer pues por ejemplo podemos coger y empezar a crear un

99
00:12:18,970 --> 00:12:30,269
fichero vamos a crearnos un fichero que es por ejemplo el app js vale este es un fichero de

100
00:12:30,269 --> 00:12:36,929
javascript y de hecho coge el iconito el js por el reconoce al poner la extensión bueno este

101
00:12:36,929 --> 00:12:49,809
fichero lo voy a utilizar para ir configurando los diferentes módulos que vamos a ir utilizando

102
00:12:49,809 --> 00:12:57,970
como puede ser el note como puede el nou demon como puede ser el mismo express vale entonces

103
00:12:57,970 --> 00:13:15,950
Lo voy a usar para eso. Luego vais a ver que voy a crear un index.js también. Eso lo voy a ir haciendo paso a paso. Tengo mi fichero, lo tengo abierto. Por ahora no voy a cargar nada.

104
00:13:15,950 --> 00:13:20,710
vamos a ponerle aquí que me lo esté autosave

105
00:13:20,710 --> 00:13:23,389
que me lo vaya guardando todo

106
00:13:23,389 --> 00:13:29,909
vale, que es lo siguiente que tenemos que hacer

107
00:13:29,909 --> 00:13:33,450
ya tenemos nuestro entorno de trabajo, ya lo tenemos todo preparado

108
00:13:33,450 --> 00:13:36,289
pero por ahora no nos funciona nada

109
00:13:36,289 --> 00:13:41,190
que es lo siguiente que tengo que hacer, instalar ese módulo

110
00:13:41,190 --> 00:13:45,149
de express

111
00:13:45,149 --> 00:14:12,149
Vale, entonces, ¿cómo instalo un módulo? Pues npm, npm-i, en este caso es express, vale, ese módulo es el que me va a servir como, o el que va a activar este backend, nos va a dejar configurarlo como un servidor diciéndole el puerto, vale, entonces yo le voy a lanzar,

112
00:14:22,960 --> 00:14:52,899
vale, añadidos, era por el guión medio de la i, por lo que no me lo había cogido, vale, npm y express, añade 64 paquetes, bueno, dice el tiempo que ha tardado, toda la historia, ya lo tendríamos, vale, ya tenemos ese paquete, ahora tenemos que configurarlo,

113
00:14:52,899 --> 00:15:16,750
Es interesante ver también como al cargar ese primer paquete me ha creado este package.look.json y este es importante en el sentido en el que os va a ir guardando todas las dependencias que vais cargando.

114
00:15:16,750 --> 00:15:47,139
Entonces, este fichero, cuando lleváis el proyecto de un ordenador a otro, la carpeta de proyecto, claro, en el ordenador en el que lo soltáis puede que no tengáis todos esos módulos.

115
00:15:47,139 --> 00:15:55,320
módulos y entonces estáis intentando ejecutar un desarrollo que no encuentra esos módulos, ¿vale?

116
00:15:55,340 --> 00:16:05,240
Entonces lo suyo sería que eliminarais este package log json y volvierais a lanzar el init, ¿vale?

117
00:16:05,299 --> 00:16:12,919
De tal forma que ahí sí me va a crear esas dependencias que ahora veis cómo es el express, ¿vale?

118
00:16:12,919 --> 00:16:24,820
Porque ya tiene el Json, entonces va a leer el Json y va a ir cargando estas dependencias y eso es lo que os va a permitir llevaros esta carpeta de un ordenador, de un equipo a otro, ¿vale?

119
00:16:24,820 --> 00:16:42,559
Entonces eso es importante que os acordéis. Vale, tenemos el NodeModules que también vamos a tener aquí los diferentes módulos que estamos instalando, en este caso al lanzar el Express nos ha creado el PackageLock y el NodeModules, ¿vale?

120
00:16:42,919 --> 00:16:47,600
entonces podríais borrar estos dos que cuando lancéis el init os los va a crear

121
00:16:47,600 --> 00:16:55,580
los dos vale me vuelvo al app.js y en el app.js voy a crearme

122
00:16:55,580 --> 00:17:01,580
o voy a insertar el siguiente código

123
00:17:01,580 --> 00:17:08,599
vale lo primero que vamos a hacer es importar express

124
00:17:08,599 --> 00:17:14,279
from express vale qué es lo que le estoy diciendo aquí

125
00:17:16,539 --> 00:17:32,500
pues que vamos a importar express desde express para eso lo hemos lo hemos cargado el módulo

126
00:17:32,500 --> 00:17:37,359
después entonces vamos a importar express desde el módulo de express vale que es lo

127
00:17:37,359 --> 00:17:42,059
siguiente que le vamos a decir pues

128
00:17:42,720 --> 00:17:49,440
vamos a crearnos una variable con javascript para crear

129
00:17:49,440 --> 00:17:54,680
esas variables estas constantes siempre con el cons

130
00:17:54,680 --> 00:18:03,119
delante le voy a llamar app vale y esto va a ser igual a express

131
00:18:03,119 --> 00:18:31,269
Vale, estoy cargando una nueva instancia de Express, vale, con esto genero ese servidor, pero todavía no le he dicho el puerto en el que quiero que escuche, entonces le voy a decir que app.listen y le diceis el puerto, en este caso le vamos a poner el 4000, por ejemplo, vale,

132
00:18:31,269 --> 00:18:34,230
Podríais ponerle el puerto que vosotros

133
00:18:34,230 --> 00:18:35,130
Quisierais

134
00:18:35,130 --> 00:18:37,970
Para saber si nos lo está

135
00:18:37,970 --> 00:18:39,569
Haciendo bien o no

136
00:18:39,569 --> 00:18:42,049
Lo que voy a

137
00:18:42,049 --> 00:18:43,490
Hacer es meter un

138
00:18:43,490 --> 00:18:44,450
Debug log

139
00:18:44,450 --> 00:18:47,549
Un perdón un console

140
00:18:47,549 --> 00:18:49,490
Console

141
00:18:49,490 --> 00:18:50,589
Log

142
00:18:50,589 --> 00:18:52,289
Punto log

143
00:18:52,289 --> 00:18:55,289
Y aquí le vamos a meter un

144
00:18:55,289 --> 00:18:57,869
Pues es un mensaje por consola

145
00:18:57,869 --> 00:19:00,029
Vale que me va a salir luego en el terminal

146
00:19:00,029 --> 00:19:24,490
que nos diga, por ejemplo, servidor activado en el puerto, hemos dicho 4000, pues venga, en el puerto 4000, vale, vale, esto, con esto, con estas cuatro líneas,

147
00:19:24,490 --> 00:19:52,809
ya tendríamos nuestro servidor configurado, entonces ¿qué es lo que tengo que hacer yo aquí? Arrancarlo, vale, para arrancar ese servidor vamos a poner el comando, el comando npm, perdón, node, vamos a ver,

148
00:19:52,809 --> 00:20:11,690
Desde el terminal del Visual Studio Code, le vamos a poner el node src, porque la aplicación la tenemos dentro de la subcarpeta src, entonces le vamos a meter aquí app.js.

149
00:20:11,690 --> 00:20:15,710
vale, esto nos va a dar un error

150
00:20:15,710 --> 00:20:18,569
vale, entonces nos dice

151
00:20:18,569 --> 00:20:23,210
el type, bueno aquí ya directamente os está diciendo que es lo que tenemos

152
00:20:23,210 --> 00:20:27,130
que hacer, dice cargar el módulo

153
00:20:27,130 --> 00:20:31,470
el problema viene al cargar el módulo, dice es que pon el type

154
00:20:31,470 --> 00:20:35,069
módulo en el package json

155
00:20:35,069 --> 00:20:39,170
vale, entonces vamos a hacer exactamente lo que nos está diciendo

156
00:20:39,170 --> 00:20:42,970
cargar type y module dentro de package json

157
00:20:42,970 --> 00:20:46,289
entonces le vamos a meter, por ejemplo aquí

158
00:20:46,289 --> 00:20:54,019
vamos a ver, vamos a poner

159
00:20:54,019 --> 00:20:57,680
type, dos puntos

160
00:20:57,680 --> 00:21:04,430
y aquí, vale

161
00:21:04,430 --> 00:21:09,869
listo, si ahora venimos

162
00:21:09,869 --> 00:21:13,210
y lanzamos lo mismo

163
00:21:13,210 --> 00:21:24,019
el note src app punto js vale aquí nos dice que les permite crear redes públicas o primera permite

164
00:21:29,950 --> 00:21:37,910
el servidor activado en el puerto 4000 que es ese con solo punto log que le hemos puesto vale

165
00:21:37,910 --> 00:21:43,210
servidor activado en el puerto 4000 servidor activado en el puerto 4000 esto es que no nos

166
00:21:43,210 --> 00:21:51,650
ha lanzado ninguna excepción nos ha creado ese este servidor nos ha abierto ese puerto 4000

167
00:21:52,710 --> 00:21:55,529
y si venimos ahora a nuestra

168
00:21:57,890 --> 00:21:59,890
web

169
00:22:04,410 --> 00:22:18,380
si venimos ahora aquí le metemos el local host ya sabéis que estamos trabajando sobre ese

170
00:22:19,480 --> 00:22:24,460
en local ahora mismo vale si le damos a intro nos dice el canon get

171
00:22:26,660 --> 00:22:33,039
qué es la información que nos está devolviendo express esto significa que sí que nos está

172
00:22:33,039 --> 00:22:45,839
funcionando bien el expreso lo hemos hecho bien vale si aquí le metemos el 3000 pues se queda

173
00:22:45,839 --> 00:22:52,079
ahí cargando y cargando vale y al final no lo encuentra con el 4000 si vale el que recordar

174
00:22:52,079 --> 00:22:58,700
que es una forma de cómo coger esos datos o cómo enviar esos datos, todo ese tipo de cosillas, ¿vale?

175
00:22:59,619 --> 00:23:06,299
Entonces ya tenemos nuestra app.js, ya tenemos nuestro servidor, que cuando lo arrancamos,

176
00:23:07,000 --> 00:23:15,279
se nos queda, en el terminal vemos que se nos queda abierto, ¿vale? Esperando diferentes peticiones.