Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Back end vs Front end - Vídeo 3 - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
bueno en este vídeo vamos a ver cómo crear la estructura de carpetas del árbol del proyecto
00:00:01
vale diferentes carpetas que vamos a utilizar en las que vamos a ir guardando los diferentes
00:00:07
componentes de nuestro desarrollo web para tener el código ordenado y ser más fácil de gestionar
00:00:13
en el tiempo. Vimos cómo trabajamos sobre el entorno Node, que utilizamos la herramienta NPM
00:00:22
para arrancar o para cargar los diferentes módulos dentro de Node. Recordar que NPM era el Node
00:00:32
package management el gestor de los paquetes de note que habíamos instalado el express para
00:00:44
a abrir el puerto abrimos el 4000 como estáis viendo en la pantalla el puerto de lo que va
00:00:58
a ser nuestro back en nuestro servidor vale con express generábamos ese servidor no no
00:01:05
hacemos nada más que que cuando nos intentamos conectar al puerto 4.000 nos devuelve una
00:01:12
express el bar que nos devuelve un mensaje de canon get de que no puede recoger nada vale
00:01:21
nos conectamos al servidor con localhost 4000 y ya está y vimos hicimos la aplicación app.js
00:01:29
en el que importábamos express desde el paquete de express instancia damos express le decíamos
00:01:37
el puerto y luego le metíamos un consolo que es el que nos aparecía en el terminal si no
00:01:44
había ningún error para lanzar nuestro servidor bueno pues le metíamos el nou
00:01:49
metíamos src y el app punto js vale y esto ya arrancaba el servidor nos decía el mensaje que
00:01:59
le hemos puesto con el console.log vale no ha habido ningún problema y aquí nos quedamos en
00:02:16
el vídeo anterior entonces en este vamos a ir creando la estructura de carpetas vale entonces
00:02:20
Entonces, dentro de src, que es donde vamos a tener las diferentes carpetas de las fuentes, las source, vamos a ir creándolas.
00:02:25
Entonces, por ejemplo, la primera que podemos crear es Routes.
00:02:34
Routes es una carpeta en la que vamos a guardar los diferentes ficheros
00:02:40
o el fichero que vamos a generar en el que vamos a explicitar en nuestro proyecto
00:02:49
cuáles son las rutas de nuestro backend.
00:02:56
Las rutas son los endpoints.
00:02:59
¿Vale? Es a qué punto se pueden conectar los clientes desde el front contra nuestro backend
00:03:02
En esos endpoints, en nuestro desarrollo, pues pueden ser, por ejemplo, una ruta que sea para loguearse
00:03:13
Una para registrarse, una para dar de alta las tareas, etc. ¿Vale?
00:03:22
Todas las que nos hagan falta, todas esas configuraciones las vamos a hacer dentro de la carpeta road
00:03:28
otra carpeta que podemos utilizar
00:03:33
pues la de los controladores
00:03:37
entonces vamos a crear otra
00:03:39
que es
00:03:41
aquí no, perdón
00:03:43
dentro de src
00:03:45
vale, todas dentro de src
00:03:47
que es controller
00:03:49
vale
00:03:50
con controllers lo que vamos a
00:03:53
hacer es guardar
00:03:55
los diferentes funciones
00:03:57
o el diferente código que vayamos
00:03:59
desarrollando y que esté asociado
00:04:01
cada uno de los set points de las rutas que estamos creando o generando dentro de robots
00:04:02
y luego vamos a trabajar con datos
00:04:10
sobre una base de datos de mongo db entonces en mongo db te permite generar colecciones de datos
00:04:16
y el cliente puede mandar esos datos teniendo diferentes campos, ¿vale?
00:04:25
Entonces no está estructurado como puede ser MySQL o puede ser, bueno, lo que habéis estudiado vosotros que es el MySQL.
00:04:33
Entonces vamos a crear una carpeta en la que vamos a configurar los modelos de datos.
00:04:43
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.
00:04:51
Entonces voy a crear una carpeta que se va a llamar Models.
00:05:05
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?
00:05:14
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?
00:05:42
Entonces, esos criterios que voy a aplicar sobre la plantilla, le vamos a llamar los
00:06:05
schemes, que son los esquemas, ¿vale?
00:06:12
Entonces, vamos a crearnos una carpeta que es, uy, ¿vale?
00:06:17
Vale, luego podemos crearnos otra carpeta que va a ser los middleware, que es un código
00:06:27
que vamos a generar y que se pone entre el backend y el front ese código trabaja o actúa sobre los
00:06:37
datos que estamos mandando desde el front al backend de tal forma que los va a validar vale
00:06:47
nosotros lo vamos a desarrollar y vamos a poner unas ciertas reglas de validación si esas reglas
00:06:54
de validación no se cumplen no vamos a dejar que esos datos lleguen a el backend al servidor
00:06:58
de tal manera que vamos a ahorrar trabajo a nuestro backend si los datos no se cumplen
00:07:09
no llegan si los datos no llegan al backend el backend no va a hacer nada porque no le
00:07:15
está llegando nada entonces vamos a crear una carpeta que le vamos a llamar los middleware
00:07:19
vale, ¿qué más carpetas nos pueden hacer falta?
00:07:25
miremos, ¿qué más?
00:07:36
vale, vamos a crear una carpeta también
00:07:41
en lips de librerías
00:07:45
vale, para que el código que nosotros desarrollamos
00:07:49
y vamos a utilizar en diferentes partes de nuestro desarrollo web
00:07:54
lo tengamos todo ahí localizado, ¿vale?
00:07:59
Vale, y luego voy a crear una serie de ficheros.
00:08:06
Uno puede ser, por ejemplo, un fichero, un JS, ¿vale?
00:08:09
Porque lo hacemos, al final estamos con un desarrollo web
00:08:14
y trabajamos todo con Javascript.
00:08:17
Entonces vamos a crear uno que es el db.js.
00:08:20
¿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?
00:08:28
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.
00:08:45
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.
00:08:57
Bueno, nos está diciendo que usemos un index.js, ¿vale? Que es lo que quiero hacer yo ahora.
00:09:09
Entonces, ¿qué voy a hacer? Bueno, pues os estoy diciendo que en este desarrollo web vamos a utilizar varios paquetes del Node.
00:09:16
En este caso solo hemos usado el express para crear nuestro servidor.
00:09:26
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?
00:09:32
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?
00:09:46
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,
00:10:11
queda en el prom aquí sin decirte nada vale te está informando de que no ha
00:10:41
habido ningún problema pero no es algo obligatorio vale la
00:10:46
papelista en sí vale me voy a coger estas dos líneas y
00:10:51
las voy a cortar control x vale y lo que voy a poner aquí es un export de faul
00:10:56
y voy a exportar el app vale estoy diciendo aquí en javascript que
00:11:04
esta variable que me he creado que es del modo express vale es la instancia de express la voy
00:11:12
a utilizar desde diferentes partes de mi desarrollo vale entonces le pongo el sport y el app el default
00:11:18
no es obligatorio pero si os simplifica el que luego no tengáis que estar usando llaves a la
00:11:30
hora de trabajar con esas variables entonces los desarrolladores web por defecto siempre meten el
00:11:37
default vale y me voy a venir al index js voy a poner el import app from comillas simples y le
00:11:42
Vamos a decir que desde src, a ver, bueno, ya estamos en src, entonces le vamos a decir app.js, ¿vale?
00:11:56
¿Qué le estoy diciendo? Pues eso, que voy a la variable que hemos exportado en app, en app.js, ¿vale?
00:12:14
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?
00:12:25
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?
00:12:46
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?
00:13:03
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?
00:13:20
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?
00:13:37
¿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?
00:14:01
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?
00:14:18
Entonces le vamos a meter aquí el no daemon menos de.
00:14:35
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?
00:14:42
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?
00:14:56
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?
00:15:11
o el nombre que vosotros queráis vale entonces aquí le vamos a poner esto y le voy a decir que
00:15:24
quiero que no demon me arranque es él es ese nuestro servidor nuestro express nuestro index
00:15:33
junto con nuestro index punto js vale entonces que le voy a meter ahí no demon le voy a decir
00:15:49
src para que me lo busque en la carpeta de src vale porque le pongo aquí src porque estoy desde
00:16:01
proyecto dan 2 vale entonces aquí le meto el src y le digo que el fichero es el que el que tenemos
00:16:08
como principal como main que es el index punto js vale esto nos va a hacer que podamos arrancar
00:16:18
nuestro servidor con el nou demon y cada vez que hagamos un cambio nos lo va a reconocer vale
00:16:25
entonces si ahora arrancamos esto poniendo npm room de vale npm el gestor de los paquetes el
00:16:32
ram para arrancarlo y el de que se le escribe pues esto os va a lanzar veis el nou demo y nos
00:16:44
va a lanzar nuestro index js vale que es la apertura de nuestro servidor en el puerto 4000
00:16:53
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,
00:17:04
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?
00:17:29
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.
00:17:49
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?
00:18:09
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,
00:18:36
y estás está esperando hasta que haya un cambio en el fichero y bueno entonces
00:19:05
aquí le voy a poner el import morgan from
00:19:11
morgan vale
00:19:19
entonces fijaros como ahora que ya lo he escrito ya me vuelve a abrir bien el
00:19:23
expreso en el puerto 4000 vale vale listo y qué es lo que le voy a decir que use ese paquete entonces
00:19:29
como hago esto primero yo tengo la constante app y le digo que es express ahora lo que le voy a
00:19:40
decir es que use ese ese ese paquete de morante lo voy a poner aquí app punto y us le vamos a
00:19:46
decir que uses morgan con d vale usa morgan con d aquí esto ya estaría lo voy a meter aquí los
00:19:55
puntos y coma aunque ya no son necesarios vale pero bueno se los voy a poner y que lo que le
00:20:15
estoy diciendo vale el módulo de morgan lo que le estoy diciendo es con qué script lo estoy
00:20:22
asociando ese script sd es el de pacas jota son sd es el que le está diciendo que
00:20:29
la página vale el servidor que quiero controlar esos intentos de acceso es el que tengo configurado
00:20:39
en index punto jota es vale que además lo estoy arrancando con él no vemos con el módulo de no
00:20:45
demo vale entonces que estamos haciendo ahora mismo por un lado hemos configurado el servidor
00:20:54
express vale en el puerto 4000 por otro lado le hemos cargado el paquete del nuevo demon para
00:21:00
poder trabajar como desarrollador sin tener que estar reiniciando todo el tiempo esa para ese
00:21:09
servidor y por otro lado con morgan lo que le hemos dicho es controla nos que
00:21:18
peticiones de acceso están entrando si esto funciona bien
00:21:26
bueno el no demon vemos que si nos funciona bien vale bueno lo está
00:21:32
diciendo que hacemos un cambio no lo está testeando y lo está poniendo bien o
00:21:36
mal el servidor y si venimos a nuestra página si yo refresco
00:21:41
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?
00:21:50
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?
00:22:10
Y el tiempo que ha tardado en responder, ¿vale?
00:22:19
Entonces ya lo tenemos, esos tres paquetes bien configurados y aquí dejo este vídeo.
00:22:26
- Idioma/s:
- Autor/es:
- Mario S.
- Subido por:
- Mario S.
- Licencia:
- Dominio público
- Visualizaciones:
- 89
- Fecha:
- 5 de julio de 2024 - 20:58
- Visibilidad:
- Público
- Centro:
- IES VILLABLANCA
- Duración:
- 00′ 11″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 48.76 MBytes
