Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end vs Fron end - Vídeo 2 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 4 de julio de 2024 por Mario S.

89 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:01
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, 00:00:25
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 00:00:51
y una vez que te has registrado y te has logueado correctamente sobre nuestro servidor, sobre nuestro backend, vas a poder gestionar unas tareas 00:01:04
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 00:01:15
y el front se va a encargar de mostrar al usuario las tareas que tiene registradas utilizando un framework en el front, ¿vale? 00:01:25
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, 00:01:37
agrupadas y hechas clases y que podemos utilizar en nuestro desarrollo web de una forma muy cómoda, ¿vale? 00:01:55
De tal manera que al usar ese framework siempre vamos a tener nuestra página web actualizada 00:02:05
porque vamos a ir contra un servidor externo o podríamos descargarnos todas esas clases 00:02:14
y de tal forma que nuestra página no se actualiza, que a veces eso puede ser un problema. 00:02:21
¿Qué es lo que nos interesa en el módulo de desarrollo de interfaces? Pues esa parte del From. 00:02:27
Pero, como os comentaba en el primer vídeo, no quiero hacer un prototipo, quiero hacer todo el despliegue 00:02:35
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. 00:02:43
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. 00:03:05
¿Cómo, qué entorno voy a utilizar para crear este backend y este front? 00:03:24
Vamos a usar el node, el node, pues es un entorno que no es el más potente 00:03:33
pero sí os va a servir para adquirir esos conocimientos que luego los vais a poder poner en práctica 00:03:42
en las empresas a las que os voy a llevar en las FCTs, ¿vale? Como puede ser Neoris. 00:03:50
Trabaja en esa parte del back, en esa parte del front, entonces bueno, es otra de las cosas por las que me parece interesante 00:03:59
que lo veáis cuanto más mejor. Node es una forma sencilla de conocer los diferentes módulos que puedes tener 00:04:07
a tu disposición para hacer este tipo de despliegues, es una forma fácil de instalar 00:04:18
y no nos debería dar mucha complicación. 00:04:26
Entonces lo primero que necesito es descargarme ese Node. 00:04:31
Entonces me voy a ir al navegador y en Node.js.org, desde aquí me voy a bajar ese paquete, 00:04:35
ese módulo, ese Node.js, que es el que se va a encargar de crear ese entorno. 00:04:46
Dentro de Node hay una herramienta que es el NPM, que es el Node Package Management, 00:04:53
que es la encargada, es la que más vamos a utilizar a la hora de cargar esos módulos, 00:04:59
como puede ser el Express, que es lo primero que vamos a hacer en esa parte del backend, 00:05:04
con el Express activar ese servidor y activar ese puerto por el que el front se va a conectar 00:05:09
con nosotros vale el cliente se va a conectar con nosotros vale todo lo primero que hago es bajarme 00:05:16
este download note s cuando le pulsáis os va a bajar en la carpeta de descargas 00:05:23
este fichero vale lo ejecuta y si hacéis doble clic y es como siempre no un poco siguiente 00:05:35
siguiente siguiente y se instala es un paquete muy chiquitín y no tiene ningún secreto así que os lo 00:05:42
bajáis y lo instaláis eso es lo primero que tenemos que hacer una vez hecho eso bueno pues yo lo que 00:05:48
he hecho ha sido crear mi carpeta de proyecto que en este caso le llamado proyecto dan 2 vale 00:05:55
podríamos llamarle proyecto dan 2 curso 24 25 bueno como vosotros queráis yo he llamado proyecto 00:06:01
dan 2 dentro del proyecto dan 2 lo que tengo es una carpeta que está vacía ahora mismo que se src 00:06:10
el shows que es en la que luego voy a ir guardando los diferentes sub carpetas pues como pueden ser 00:06:17
los modelos de datos como pueden ser los controladores como pueden ser las rutas vale 00:06:27
puede ser un 00:06:33
no sé, pues 00:06:34
los middleware, todo eso 00:06:36
lo iremos viendo y es lo que me interesa 00:06:39
de todo este 00:06:41
despliegue, ¿vale? entonces yo por ahora solo 00:06:43
me he creado una carpeta 00:06:45
padre, que es proyecto 00:06:46
dan 2, dentro de esa carpeta 00:06:49
padre, proyecto dan 2, he creado 00:06:50
una que es src 00:06:52
esta carpeta 00:06:54
la arrastro y la suelto 00:06:56
dentro de visual studio 00:06:58
code, ¿vale? y entonces 00:07:01
aquí tengo la carpeta padre proyecto dan dos aquí la subcarpeta src y no hay nada dentro 00:07:06
vale entiendo que vosotros ya sabéis trabajar en primero a ver si está viendo en con java 00:07:14
supongo el visual studio code vale es un editor un líder que potente y que se suele utilizar mucho a 00:07:21
a la hora de programar bueno entonces qué es lo primero que voy a hacer crear ese entorno 00:07:31
en out hemos quedado que la herramienta para instalar para cargar los diferentes módulos 00:07:39
de note es el npm entonces lo primero voy a escribir es npm vale recordar que es el note 00:07:49
el PackageManagement, el gestor de los paquetes de Node, entonces le vamos a decir que esto, 00:07:57
lo que queremos es que nos cree ese entorno de trabajo, entonces ese entorno de trabajo va a 00:08:07
ser, inicialízalo, vale, entonces le voy a pasar el init, y le voy a pasar un guión medio y, 00:08:15
Y, ¿vale? Ese es el yes, el que a todo me diga que yes. 00:08:21
Esto lo único que hace es crear ese entorno, es crear un JSOM, un fichero JSOM, 00:08:26
que ahora os enseño un poco la estructura cuando nos lo cree, 00:08:33
en el que va a estar toda la configuración de este proyecto, ¿vale? 00:08:39
Entonces, bueno, vamos a darle a npm init-y, le doy a enter, ¿vale? 00:08:44
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? 00:08:50
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. 00:09:07
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? 00:09:39
Entonces vamos a trabajar todo el tiempo con esos Json. 00:10:04
A mí me crea este package Json, ¿veis? 00:10:09
Y me dice el nombre del proyecto, la versión, cuál va a ser ese fichero principal, el main, 00:10:11
los scripts que puedo ejecutar, ¿vale? 00:10:18
Desde el node, diferentes informaciones, el autor, ¿vale? 00:10:24
entonces por ejemplo aquí en el autor puedo poner vamos a abrirlo y en el 00:10:30
autor le voy a decir que pues es 00:10:36
y es villablanca bueno podríamos tener aquí diferentes 00:10:43
información vale 00:10:48
desarrollo web creado por los alumnos 00:10:54
y es 00:11:04
Villablanca, vale, vamos creando 00:11:09
vamos metiendo información, al final, ahora mismo no es nada más que eso 00:11:18
vais a ver que este fichero es importante, porque es en el que 00:11:22
vamos a ir configurando, por ejemplo, con los ficheros 00:11:26
JS, los ficheros que son de Javascript, ese import 00:11:30
o el importar módulos 00:11:34
o exportar variables, lo tenemos que cargar desde aquí, ¿vale? 00:11:37
Ya os veréis que aquí hay que meter una clave que es type 00:11:44
y un valor que es módulo, porque si no, no nos funciona 00:11:46
y eso lo vamos a ver ahora, ¿vale? 00:11:51
Entonces, este fichero, este json es importante. 00:11:53
Una vez que tenéis el json, es porque ya habéis creado 00:11:56
ese entorno del node, ¿vale? 00:12:00
Ya tenemos ese entorno y podemos empezar a trabajar. 00:12:02
vale que es lo siguiente que voy a hacer pues por ejemplo podemos coger y empezar a crear un 00:12:04
fichero vamos a crearnos un fichero que es por ejemplo el app js vale este es un fichero de 00:12:18
javascript y de hecho coge el iconito el js por el reconoce al poner la extensión bueno este 00:12:30
fichero lo voy a utilizar para ir configurando los diferentes módulos que vamos a ir utilizando 00:12:36
como puede ser el note como puede el nou demon como puede ser el mismo express vale entonces 00:12:49
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. 00:12:57
vamos a ponerle aquí que me lo esté autosave 00:13:15
que me lo vaya guardando todo 00:13:20
vale, que es lo siguiente que tenemos que hacer 00:13:23
ya tenemos nuestro entorno de trabajo, ya lo tenemos todo preparado 00:13:29
pero por ahora no nos funciona nada 00:13:33
que es lo siguiente que tengo que hacer, instalar ese módulo 00:13:36
de express 00:13:41
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, 00:13:45
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, 00:14:22
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. 00:14:52
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. 00:15:16
módulos y entonces estáis intentando ejecutar un desarrollo que no encuentra esos módulos, ¿vale? 00:15:47
Entonces lo suyo sería que eliminarais este package log json y volvierais a lanzar el init, ¿vale? 00:15:55
De tal forma que ahí sí me va a crear esas dependencias que ahora veis cómo es el express, ¿vale? 00:16:05
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? 00:16:12
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? 00:16:24
entonces podríais borrar estos dos que cuando lancéis el init os los va a crear 00:16:42
los dos vale me vuelvo al app.js y en el app.js voy a crearme 00:16:47
o voy a insertar el siguiente código 00:16:55
vale lo primero que vamos a hacer es importar express 00:17:01
from express vale qué es lo que le estoy diciendo aquí 00:17:08
pues que vamos a importar express desde express para eso lo hemos lo hemos cargado el módulo 00:17:16
después entonces vamos a importar express desde el módulo de express vale que es lo 00:17:32
siguiente que le vamos a decir pues 00:17:37
vamos a crearnos una variable con javascript para crear 00:17:42
esas variables estas constantes siempre con el cons 00:17:49
delante le voy a llamar app vale y esto va a ser igual a express 00:17:54
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, 00:18:03
Podríais ponerle el puerto que vosotros 00:18:31
Quisierais 00:18:34
Para saber si nos lo está 00:18:35
Haciendo bien o no 00:18:37
Lo que voy a 00:18:39
Hacer es meter un 00:18:42
Debug log 00:18:43
Un perdón un console 00:18:44
Console 00:18:47
Log 00:18:49
Punto log 00:18:50
Y aquí le vamos a meter un 00:18:52
Pues es un mensaje por consola 00:18:55
Vale que me va a salir luego en el terminal 00:18:57
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, 00:19:00
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, 00:19:24
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. 00:19:52
vale, esto nos va a dar un error 00:20:11
vale, entonces nos dice 00:20:15
el type, bueno aquí ya directamente os está diciendo que es lo que tenemos 00:20:18
que hacer, dice cargar el módulo 00:20:23
el problema viene al cargar el módulo, dice es que pon el type 00:20:27
módulo en el package json 00:20:31
vale, entonces vamos a hacer exactamente lo que nos está diciendo 00:20:35
cargar type y module dentro de package json 00:20:39
entonces le vamos a meter, por ejemplo aquí 00:20:42
vamos a ver, vamos a poner 00:20:46
type, dos puntos 00:20:54
y aquí, vale 00:20:57
listo, si ahora venimos 00:21:04
y lanzamos lo mismo 00:21:09
el note src app punto js vale aquí nos dice que les permite crear redes públicas o primera permite 00:21:13
el servidor activado en el puerto 4000 que es ese con solo punto log que le hemos puesto vale 00:21:29
servidor activado en el puerto 4000 servidor activado en el puerto 4000 esto es que no nos 00:21:37
ha lanzado ninguna excepción nos ha creado ese este servidor nos ha abierto ese puerto 4000 00:21:43
y si venimos ahora a nuestra 00:21:52
web 00:21:57
si venimos ahora aquí le metemos el local host ya sabéis que estamos trabajando sobre ese 00:22:04
en local ahora mismo vale si le damos a intro nos dice el canon get 00:22:19
qué es la información que nos está devolviendo express esto significa que sí que nos está 00:22:26
funcionando bien el expreso lo hemos hecho bien vale si aquí le metemos el 3000 pues se queda 00:22:33
ahí cargando y cargando vale y al final no lo encuentra con el 4000 si vale el que recordar 00:22:45
que es una forma de cómo coger esos datos o cómo enviar esos datos, todo ese tipo de cosillas, ¿vale? 00:22:52
Entonces ya tenemos nuestra app.js, ya tenemos nuestro servidor, que cuando lo arrancamos, 00:22:59
se nos queda, en el terminal vemos que se nos queda abierto, ¿vale? Esperando diferentes peticiones. 00:23:07
Idioma/s:
es
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
89
Fecha:
4 de julio de 2024 - 21:37
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 06″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
60.35 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid