1
00:00:01,010 --> 00:00:07,009
bueno en este vídeo vamos a ver cómo crear la estructura de carpetas del árbol del proyecto

2
00:00:07,009 --> 00:00:13,550
vale diferentes carpetas que vamos a utilizar en las que vamos a ir guardando los diferentes

3
00:00:13,550 --> 00:00:22,250
componentes de nuestro desarrollo web para tener el código ordenado y ser más fácil de gestionar

4
00:00:22,250 --> 00:00:32,789
en el tiempo. Vimos cómo trabajamos sobre el entorno Node, que utilizamos la herramienta NPM

5
00:00:32,789 --> 00:00:44,770
para arrancar o para cargar los diferentes módulos dentro de Node. Recordar que NPM era el Node

6
00:00:44,770 --> 00:00:53,530
package management el gestor de los paquetes de note que habíamos instalado el express para

7
00:00:58,289 --> 00:01:05,269
a abrir el puerto abrimos el 4000 como estáis viendo en la pantalla el puerto de lo que va

8
00:01:05,269 --> 00:01:12,530
a ser nuestro back en nuestro servidor vale con express generábamos ese servidor no no

9
00:01:12,530 --> 00:01:19,650
hacemos nada más que que cuando nos intentamos conectar al puerto 4.000 nos devuelve una

10
00:01:21,730 --> 00:01:29,170
express el bar que nos devuelve un mensaje de canon get de que no puede recoger nada vale

11
00:01:29,170 --> 00:01:37,870
nos conectamos al servidor con localhost 4000 y ya está y vimos hicimos la aplicación app.js

12
00:01:37,870 --> 00:01:44,370
en el que importábamos express desde el paquete de express instancia damos express le decíamos

13
00:01:44,370 --> 00:01:49,810
el puerto y luego le metíamos un consolo que es el que nos aparecía en el terminal si no

14
00:01:49,810 --> 00:01:59,150
había ningún error para lanzar nuestro servidor bueno pues le metíamos el nou

15
00:01:59,150 --> 00:02:16,490
metíamos src y el app punto js vale y esto ya arrancaba el servidor nos decía el mensaje que

16
00:02:16,490 --> 00:02:20,810
le hemos puesto con el console.log vale no ha habido ningún problema y aquí nos quedamos en

17
00:02:20,810 --> 00:02:25,770
el vídeo anterior entonces en este vamos a ir creando la estructura de carpetas vale entonces

18
00:02:25,770 --> 00:02:34,990
Entonces, dentro de src, que es donde vamos a tener las diferentes carpetas de las fuentes, las source, vamos a ir creándolas.

19
00:02:34,990 --> 00:02:38,990
Entonces, por ejemplo, la primera que podemos crear es Routes.

20
00:02:40,210 --> 00:02:49,449
Routes es una carpeta en la que vamos a guardar los diferentes ficheros

21
00:02:49,449 --> 00:02:56,669
o el fichero que vamos a generar en el que vamos a explicitar en nuestro proyecto

22
00:02:56,669 --> 00:02:59,689
cuáles son las rutas de nuestro backend.

23
00:02:59,990 --> 00:03:02,530
Las rutas son los endpoints.

24
00:03:02,530 --> 00:03:13,509
¿Vale? Es a qué punto se pueden conectar los clientes desde el front contra nuestro backend

25
00:03:13,509 --> 00:03:22,750
En esos endpoints, en nuestro desarrollo, pues pueden ser, por ejemplo, una ruta que sea para loguearse

26
00:03:22,750 --> 00:03:27,889
Una para registrarse, una para dar de alta las tareas, etc. ¿Vale?

27
00:03:28,370 --> 00:03:33,669
Todas las que nos hagan falta, todas esas configuraciones las vamos a hacer dentro de la carpeta road

28
00:03:33,669 --> 00:03:37,509
otra carpeta que podemos utilizar

29
00:03:37,509 --> 00:03:39,889
pues la de los controladores

30
00:03:39,889 --> 00:03:41,949
entonces vamos a crear otra

31
00:03:41,949 --> 00:03:43,710
que es

32
00:03:43,710 --> 00:03:45,069
aquí no, perdón

33
00:03:45,069 --> 00:03:47,110
dentro de src

34
00:03:47,110 --> 00:03:49,449
vale, todas dentro de src

35
00:03:49,449 --> 00:03:50,870
que es controller

36
00:03:50,870 --> 00:03:53,189
vale

37
00:03:53,189 --> 00:03:55,530
con controllers lo que vamos a

38
00:03:55,530 --> 00:03:57,030
hacer es guardar

39
00:03:57,030 --> 00:03:59,069
los diferentes funciones

40
00:03:59,069 --> 00:04:01,009
o el diferente código que vayamos

41
00:04:01,009 --> 00:04:02,909
desarrollando y que esté asociado

42
00:04:02,909 --> 00:04:08,610
cada uno de los set points de las rutas que estamos creando o generando dentro de robots

43
00:04:10,150 --> 00:04:12,370
y luego vamos a trabajar con datos

44
00:04:16,750 --> 00:04:25,509
sobre una base de datos de mongo db entonces en mongo db te permite generar colecciones de datos

45
00:04:25,509 --> 00:04:33,410
y el cliente puede mandar esos datos teniendo diferentes campos, ¿vale?

46
00:04:33,629 --> 00:04:42,069
Entonces no está estructurado como puede ser MySQL o puede ser, bueno, lo que habéis estudiado vosotros que es el MySQL.

47
00:04:43,990 --> 00:04:51,310
Entonces vamos a crear una carpeta en la que vamos a configurar los modelos de datos.

48
00:04:51,310 --> 00:05:04,949
Esto es la estructura o hacer una especie de plantilla de los datos que vamos a incorporar, que vamos a guardar dentro de nuestra base de datos de Mongo.

49
00:05:05,509 --> 00:05:14,339
Entonces voy a crear una carpeta que se va a llamar Models.

50
00:05:14,339 --> 00:05:42,899
A ver si quiere. Vale, y voy a crearme otra carpeta para que además de tener esa plantilla de los datos en el que voy a decir los números y los campos que quiero, unos criterios que tiene que cumplir cada uno de esos campos de esa plantilla, ¿vale?

51
00:05:42,899 --> 00:06:05,040
Por ejemplo, si es el campo, si es la clave login o mejor el email, la clave email, quiero que el valor que se meta en esa clave responda a criterios como por ejemplo que tiene que tener una arroba, ¿vale?

52
00:06:05,040 --> 00:06:12,259
Entonces, esos criterios que voy a aplicar sobre la plantilla, le vamos a llamar los

53
00:06:12,259 --> 00:06:16,970
schemes, que son los esquemas, ¿vale?

54
00:06:17,009 --> 00:06:27,579
Entonces, vamos a crearnos una carpeta que es, uy, ¿vale?

55
00:06:27,579 --> 00:06:37,360
Vale, luego podemos crearnos otra carpeta que va a ser los middleware, que es un código

56
00:06:37,360 --> 00:06:47,459
que vamos a generar y que se pone entre el backend y el front ese código trabaja o actúa sobre los

57
00:06:47,459 --> 00:06:54,160
datos que estamos mandando desde el front al backend de tal forma que los va a validar vale

58
00:06:54,160 --> 00:06:58,959
nosotros lo vamos a desarrollar y vamos a poner unas ciertas reglas de validación si esas reglas

59
00:06:58,959 --> 00:07:08,199
de validación no se cumplen no vamos a dejar que esos datos lleguen a el backend al servidor

60
00:07:09,199 --> 00:07:15,240
de tal manera que vamos a ahorrar trabajo a nuestro backend si los datos no se cumplen

61
00:07:15,240 --> 00:07:19,079
no llegan si los datos no llegan al backend el backend no va a hacer nada porque no le

62
00:07:19,079 --> 00:07:25,199
está llegando nada entonces vamos a crear una carpeta que le vamos a llamar los middleware

63
00:07:25,199 --> 00:07:35,079
vale, ¿qué más carpetas nos pueden hacer falta?

64
00:07:36,800 --> 00:07:39,100
miremos, ¿qué más?

65
00:07:41,600 --> 00:07:45,100
vale, vamos a crear una carpeta también

66
00:07:45,100 --> 00:07:49,899
en lips de librerías

67
00:07:49,899 --> 00:07:54,560
vale, para que el código que nosotros desarrollamos

68
00:07:54,560 --> 00:07:59,819
y vamos a utilizar en diferentes partes de nuestro desarrollo web

69
00:07:59,819 --> 00:08:04,319
lo tengamos todo ahí localizado, ¿vale?

70
00:08:06,060 --> 00:08:08,740
Vale, y luego voy a crear una serie de ficheros.

71
00:08:09,860 --> 00:08:14,819
Uno puede ser, por ejemplo, un fichero, un JS, ¿vale?

72
00:08:14,860 --> 00:08:17,519
Porque lo hacemos, al final estamos con un desarrollo web

73
00:08:17,519 --> 00:08:19,720
y trabajamos todo con Javascript.

74
00:08:20,300 --> 00:08:28,139
Entonces vamos a crear uno que es el db.js.

75
00:08:28,139 --> 00:08:45,000
¿Para qué voy a usar este fichero? Pues para hacer la conexión a la base de datos. Me voy a crear otro fichero que le voy a llamar el index.js. ¿Y esto por qué lo hago?

76
00:08:45,000 --> 00:08:56,720
Tengo el app.js que es en el que arrancamos la aplicación, perdón, el express, ¿vale? Arrancamos en este caso el servidor en este puerto.

77
00:08:57,980 --> 00:09:09,080
Si nos metemos en el package.js, vemos que el main, ¿vale? Que nos ha generado esta entrada, esta clave valor main y dice index.js.

78
00:09:09,080 --> 00:09:15,559
Bueno, nos está diciendo que usemos un index.js, ¿vale? Que es lo que quiero hacer yo ahora.

79
00:09:16,000 --> 00:09:26,720
Entonces, ¿qué voy a hacer? Bueno, pues os estoy diciendo que en este desarrollo web vamos a utilizar varios paquetes del Node.

80
00:09:26,840 --> 00:09:32,519
En este caso solo hemos usado el express para crear nuestro servidor.

81
00:09:32,519 --> 00:09:46,779
Vamos a usar ahora, por ejemplo, el NoDemon, que es para que cada vez que hacemos un cambio en nuestros ficheros, se actualice la página web, ¿vale?

82
00:09:46,779 --> 00:10:11,440
Y podemos usar también, además del no demon, el Morgan, ¿vale? Que el Morgan lo que va a hacer es informarnos en el terminal de las diferentes peticiones que se hacen sobre nuestro backend, ¿vale? Entonces, nos informa en el terminal de eso, ¿vale?

83
00:10:11,440 --> 00:10:41,419
Entonces, vamos a generar un fichero, ¿vale? Que es el index.js, hemos creado que entonces en el index.js lo que voy a hacer es arrancar la aplicación, ¿vale? Entonces, me voy a coger estos dos ficheros, perdón, estas dos líneas, app.listen y el console.log, ¿vale? El console.log, ya sabéis, es un mensaje que me aparece en el terminal, que es correcto ponerlo porque así sabéis que, o sea, no se puede ponerlo en el terminal,

84
00:10:41,419 --> 00:10:46,860
queda en el prom aquí sin decirte nada vale te está informando de que no ha

85
00:10:46,860 --> 00:10:51,179
habido ningún problema pero no es algo obligatorio vale la

86
00:10:51,179 --> 00:10:56,220
papelista en sí vale me voy a coger estas dos líneas y

87
00:10:56,220 --> 00:11:04,899
las voy a cortar control x vale y lo que voy a poner aquí es un export de faul

88
00:11:04,899 --> 00:11:12,039
y voy a exportar el app vale estoy diciendo aquí en javascript que

89
00:11:12,039 --> 00:11:18,340
esta variable que me he creado que es del modo express vale es la instancia de express la voy

90
00:11:18,340 --> 00:11:30,220
a utilizar desde diferentes partes de mi desarrollo vale entonces le pongo el sport y el app el default

91
00:11:30,220 --> 00:11:37,179
no es obligatorio pero si os simplifica el que luego no tengáis que estar usando llaves a la

92
00:11:37,179 --> 00:11:42,759
hora de trabajar con esas variables entonces los desarrolladores web por defecto siempre meten el

93
00:11:42,759 --> 00:11:56,769
default vale y me voy a venir al index js voy a poner el import app from comillas simples y le

94
00:11:56,769 --> 00:12:14,360
Vamos a decir que desde src, a ver, bueno, ya estamos en src, entonces le vamos a decir app.js, ¿vale?

95
00:12:14,980 --> 00:12:25,779
¿Qué le estoy diciendo? Pues eso, que voy a la variable que hemos exportado en app, en app.js, ¿vale?

96
00:12:25,779 --> 00:12:46,340
Que es app, esta variable que hemos exportado la estoy cargando en index.js y fijaros, y esto es importante, que cuando estoy importando una variable de un javascript que he creado yo, siempre pongo el nombre del fichero javascript y la extensión, ¿vale?

97
00:12:46,340 --> 00:13:03,799
Fijaros la diferencia con el módulo de express que aquí no he puesto ningún tipo de extensión, ¿vale? Porque es un paquete que pertenece ya a Node. En este caso sí que se la pongo porque es un fichero que hemos creado nosotros y que hemos metido el código, ¿vale?

98
00:13:03,799 --> 00:13:20,240
Vale, entonces importamos app y ahora lo que hago es aquí pegar las dos líneas que había copiado de app.js, que es el app.listen 4000 y el mensaje, ¿vale?

99
00:13:20,240 --> 00:13:37,899
Con esto, ¿qué es lo que he hecho? Es separar esos ficheros de inicio. Ahora, mi fichero para arrancar express va a ser el index.js y el fichero de configuración de los diferentes módulos va a ser app.js, ¿vale?

100
00:13:37,899 --> 00:14:01,879
Entonces, ahora si quiero arrancar, vamos a arrancarlo, control c, vamos a meter el node src y ahora en vez de app.js con llamar a index.js, ¿veis? Me hace lo mismo, ¿vale? Ya tengo arrancado mi servidor en el puerto 4000, ¿vale?

101
00:14:01,879 --> 00:14:18,639
¿Qué voy a hacer ahora? Vamos a instalar otro módulo de Node, ya sabéis que para instalarlo, npm y que se llama el Nodeemon, que el Nodeemon es para lo que os decía, ¿no?

102
00:14:18,639 --> 00:14:35,340
Cada vez que hacemos un cambio en una configuración, en un fichero de nuestro desarrollo web, nos lo va a reconocer y no tenemos que estar todo el tiempo apagando el servidor y volviendo a reiniciarlo y eso es un tostón, ¿vale?

103
00:14:35,340 --> 00:14:40,940
Entonces le vamos a meter aquí el no daemon menos de.

104
00:14:42,379 --> 00:14:56,320
Vale, le doy a intro, esto me lo instala, ya lo tengo instalado, cuando no lo ha instalado, si vengo al package.json ya tengo esa dependencia, ¿vale?

105
00:14:56,320 --> 00:15:11,620
Y lo que voy a hacer ahora para arrancarlo es, primero, en este valor, perdón, en esta clave de script, que en el valor tiene diferentes claves valores, ¿vale?

106
00:15:11,679 --> 00:15:24,440
Recordad que esto es una de las cosas buenas que tiene esta forma de trabajar sobre bases de datos o con los json, es una coma y le voy a crear aquí una clave que va a ser de, ¿vale?

107
00:15:24,440 --> 00:15:33,539
o el nombre que vosotros queráis vale entonces aquí le vamos a poner esto y le voy a decir que

108
00:15:33,539 --> 00:15:49,679
quiero que no demon me arranque es él es ese nuestro servidor nuestro express nuestro index

109
00:15:49,679 --> 00:16:01,360
junto con nuestro index punto js vale entonces que le voy a meter ahí no demon le voy a decir

110
00:16:01,360 --> 00:16:08,879
src para que me lo busque en la carpeta de src vale porque le pongo aquí src porque estoy desde

111
00:16:08,879 --> 00:16:18,240
proyecto dan 2 vale entonces aquí le meto el src y le digo que el fichero es el que el que tenemos

112
00:16:18,240 --> 00:16:25,980
como principal como main que es el index punto js vale esto nos va a hacer que podamos arrancar

113
00:16:25,980 --> 00:16:32,700
nuestro servidor con el nou demon y cada vez que hagamos un cambio nos lo va a reconocer vale

114
00:16:32,700 --> 00:16:44,759
entonces si ahora arrancamos esto poniendo npm room de vale npm el gestor de los paquetes el

115
00:16:44,759 --> 00:16:53,899
ram para arrancarlo y el de que se le escribe pues esto os va a lanzar veis el nou demo y nos

116
00:16:53,899 --> 00:17:04,759
va a lanzar nuestro index js vale que es la apertura de nuestro servidor en el puerto 4000

117
00:17:04,759 --> 00:17:29,029
vale, que es lo que estamos buscando, vale, aquí, vamos a hacer, voy a abrir otro terminal, vale, y voy a instalar otro, otro paquete, que es el Morgan, el Morgan, lo voy a utilizar,

118
00:17:29,029 --> 00:17:49,589
para que cada vez que desde nuestro cliente, ¿vale? Cada vez que desde el front se hace una petición de datos, de lo que sea, cada vez que conectas el front con el backend, que nos lo reconozca y nos dé un aviso por el terminal, ¿vale?

119
00:17:49,589 --> 00:18:09,549
Entonces, pues como siempre, vamos a hacer la instalación de ese paquete, lo vamos a cargar, npm y morgan, ¿vale? npm y morgan, le doy a intro, ¿vale? Se pone a cargarlo, ya lo ha cargado, 16 paquetes.

120
00:18:09,549 --> 00:18:36,940
Si vamos al package JSON, nos ha metido ya el Morgan, ¿vale? Nuestro servidor sigue sin problema, todo bien. Y ahora lo que voy a hacer es irme al app.js, que es donde estamos diciendo que vamos a ir configurando los diferentes paquetes que estamos cargando de Node, ¿vale?

121
00:18:36,940 --> 00:19:05,019
y entonces aquí le voy a decir, vale, bueno, pues aquí ahora lo que quiero es importar, vale, fijaros cómo está respondiendo en el terminal el no demon, vale, entonces como ahora le he puesto aquí un import, detecta que aquí hay un error porque esto no está terminado y entonces me está dando un problema, un error, vale, la app ha crasheado, o sea, express ha crasheado porque app es express, vale,

122
00:19:05,019 --> 00:19:11,740
y estás está esperando hasta que haya un cambio en el fichero y bueno entonces

123
00:19:11,740 --> 00:19:19,660
aquí le voy a poner el import morgan from

124
00:19:19,660 --> 00:19:23,759
morgan vale

125
00:19:23,759 --> 00:19:29,640
entonces fijaros como ahora que ya lo he escrito ya me vuelve a abrir bien el

126
00:19:29,640 --> 00:19:40,140
expreso en el puerto 4000 vale vale listo y qué es lo que le voy a decir que use ese paquete entonces

127
00:19:40,140 --> 00:19:46,519
como hago esto primero yo tengo la constante app y le digo que es express ahora lo que le voy a

128
00:19:46,519 --> 00:19:55,980
decir es que use ese ese ese paquete de morante lo voy a poner aquí app punto y us le vamos a

129
00:19:55,980 --> 00:20:15,690
decir que uses morgan con d vale usa morgan con d aquí esto ya estaría lo voy a meter aquí los

130
00:20:15,690 --> 00:20:22,589
puntos y coma aunque ya no son necesarios vale pero bueno se los voy a poner y que lo que le

131
00:20:22,589 --> 00:20:29,410
estoy diciendo vale el módulo de morgan lo que le estoy diciendo es con qué script lo estoy

132
00:20:29,410 --> 00:20:36,609
asociando ese script sd es el de pacas jota son sd es el que le está diciendo que

133
00:20:39,069 --> 00:20:45,250
la página vale el servidor que quiero controlar esos intentos de acceso es el que tengo configurado

134
00:20:45,250 --> 00:20:54,170
en index punto jota es vale que además lo estoy arrancando con él no vemos con el módulo de no

135
00:20:54,170 --> 00:21:00,529
demo vale entonces que estamos haciendo ahora mismo por un lado hemos configurado el servidor

136
00:21:00,529 --> 00:21:09,289
express vale en el puerto 4000 por otro lado le hemos cargado el paquete del nuevo demon para

137
00:21:09,289 --> 00:21:18,990
poder trabajar como desarrollador sin tener que estar reiniciando todo el tiempo esa para ese

138
00:21:18,990 --> 00:21:26,009
servidor y por otro lado con morgan lo que le hemos dicho es controla nos que

139
00:21:26,009 --> 00:21:32,609
peticiones de acceso están entrando si esto funciona bien

140
00:21:32,609 --> 00:21:36,869
bueno el no demon vemos que si nos funciona bien vale bueno lo está

141
00:21:36,869 --> 00:21:41,549
diciendo que hacemos un cambio no lo está testeando y lo está poniendo bien o

142
00:21:41,549 --> 00:21:50,670
mal el servidor y si venimos a nuestra página si yo refresco

143
00:21:50,750 --> 00:22:10,799
Vamos a ver, si nos venimos otra vez al Visual Studio Code, veis estas dos líneas de abajo que son las dos veces que he refrescado esa página, son los dos intentos de acceso a esa página, ¿vale?

144
00:22:10,799 --> 00:22:19,539
Entonces me dice que es el GET, me da el error 404, el error, perdón, el código 404, que no es, que no hay nada, ¿vale?

145
00:22:19,539 --> 00:22:25,920
Y el tiempo que ha tardado en responder, ¿vale?

146
00:22:26,079 --> 00:22:34,640
Entonces ya lo tenemos, esos tres paquetes bien configurados y aquí dejo este vídeo.