9:42
2024-02-06 10:11:16
6:47
2024-02-06 10:22:16
5:15
2024-02-06 10:31:49
3:57
2024-02-06 10:38:48
17:59
2024-02-06 10:43:27
1:06
2024-02-06 11:12:41
10:20
2024-02-06 11:15:29
2:42
2024-02-06 11:26:39
11:03
2024-02-06 12:01:53
1:16
2024-02-06 12:14:47
42:32
2024-02-06 12:19:55
10:32
2024-02-07 10:25:03
4:02
2024-02-07 10:39:09
1:54:16
2024-02-07 10:45:07
2:11:58
2024-02-07 20:24:23
11:55
2024-02-08 10:29:34
15:14
2024-02-08 10:43:38
3:39
2024-02-08 11:02:01
1:28:10
2024-02-08 11:14:14
1:31:21
2024-02-08 21:37:16
2:33:55
2024-02-09 09:35:00
15:39
2024-02-09 12:49:52
1:17:31
2024-02-12 09:26:50
36:07
2024-02-12 10:56:05
8:43
2024-02-13 12:48:13
3:05
2024-02-14 10:23:00
Visit the Oracle Database 19c: Administration course recordings page
United Arab Emirates - Oracle Database 19c Security
WEBVTT
-->
el sistema operativo. Vamos
-->
virtual box. Un virtual box
-->
instalamos en cada una de esas
-->
dos máquinas. Se llama
-->
un server. A la última vez, si
-->
quieres pon tu mute y ya si
-->
tienes dudas, me me me
-->
interrumpes. Dos máquinas en
-->
la una con Ubuntu Server. Este Ubuntu Server es este sistema operativo que no tiene interfaz
-->
por la lÃnea de comandos. En esta madre te venÃan ahà unos requerimientos que básicamente
-->
era crear este redirección de puertos y la creación de un proxy para la parte del
-->
frontend. La parte del frontend ahà no te pedÃan nada, realmente respecto a puertos y proxys
-->
nada. Eso de lo del proxy inverso creo que venÃa asÃ, proxy inverso y ya y restricción
-->
de puertos. Entonces, dentro de Ubuntu Server para hacer eso del proxy inverso, de hecho no es cierto.
-->
Bueno, a ver, antes de decir qué hizo, qué hizo cada cosa, ahorita nada más voy a instalar lo
-->
que se ocupó. Entonces, las máquinas Ubuntu Server, el sistema operativo, se instaló Nginx.
-->
Nginx se instala en cada uno de los, de las dos máquinas, tanto en Ubuntu, tanto en
-->
Livefront como en la del VAC. Nginx. NPM, que es un gestor de Node, esta aplicación. Ellos
-->
te pedÃan dos máquinas virtuales porque el objetivo era crear un API, un API y un frontend
-->
que se pudiera comer ese API de una tabla de usuarios. Es lo que pedÃan, un formulario de
-->
login y un registro. Entonces, era un CRUD, un formulario de login, un registro y listo.
-->
Además, la aplicación tenÃa que tener tokens, tokens de seguridad para proteger el API respecto
-->
al tema de la seguridad. Entonces, todo eso es lo que te estaban pidiendo y pues bueno,
-->
se va viendo que ocupas en cada una, ¿no? El backend, entonces tienes el Node Package Manager,
-->
es una aplicación full stack porque se ocupa un frontend y un backend. Entonces, ya por eso,
-->
te digo, tú decidiste desarrollarlo con el full stack de JavaScript. Entonces,
-->
todo esto, tanto el front como el back, es una aplicación, bueno, no es Mongo,
-->
aquà más bien es este, creo que es MySQL lo que nos pedÃa de instalar. MySQL nos pidió instalar
-->
este, ah, pues es MySQL, nos pidió instalar Node o Nexpress para crear el backend, View y
-->
pues ya. Obviamente, pues TypeScript y Beautify. Entonces, este, pues de aquà ya nada más vas
-->
viendo cuáles son las tecnologÃas del front y cuáles son del back, ¿no? En este caso,
-->
pues esto es del back, es la base de datos, esto es del backend y todo lo demás es frontend,
-->
¿no? Todo esto de acá es del frontend. Beautify, nada más la remembranza es este,
-->
el framework de View para crear interfaces web. Es como Angular Material y este serÃa Angular,
-->
el equivalente Angular y este serÃa el Angular Material. Listo, entonces ya con eso tienes las
-->
dos máquinas, la 1 y la 2, frontend, digo front y back. Y si te fijas, pues aquà está,
-->
¿no? Exus, MySQL, urm, del lado del front, npm, ambos tienen npm, distintos paquetes,
-->
cada uno va a tener View y Beautify. ¿Qué paquetes tienes del front? Pues View,
-->
Beautify, ¿no? ¿Qué paquetes tienes del back? Pues Node, Nexpress, el urm de MySQL,
-->
etcétera, etcétera. Entonces ya, aquà está lo que hace cada cosa. En este sentido,
-->
la máquina va a exponer un API sobre el modelo que te dan ahÃ, que es una tabla
-->
de usuarios, ¿no? Ese user lo vamos a mapear con ese urm y esta API es la que te
-->
dice que tiene que tener una autenticación. En este caso nosotros elegimos darle la
-->
autenticación por Viewer Token o una autenticación básica por token, asà se llama, ¿no? Una
-->
autenticación por básica de token o también se conoce como Viewer Token. Es esto lo que tú vas a crear, ¿s�
-->
Y pues ya, esto también lo maneja un paquete, ahà en la documentación. Ahorita bien, ahorita
-->
vemos en la hoja de la chuleta que otros paquetes vienen aquà en la parte del paquete.
-->
Por ejemplo, el tema de seguridad, la base de datos está encriptada en las contraseñas
-->
de las encriptas de ese paquete, ¿no? Te genera tokens y pues bueno, esa parte.
-->
Por ejemplo, ese lo puedes poner como un plus, ¿no? Tus contraseñas no te las pedÃan y las
-->
encriptamos. Nosotros las estamos encriptando. Y bueno, el API se basa en un crud. Tienes el
-->
create, el read, el read tiene paginado. Pero acuérdate, en el back end nosotros no lo
-->
paginamos nada más en el front. Por eso es que se ve tu data table con paginación,
-->
pero esa paginación es del lado del front. Tú nomás este wey de que, ah, sÃ, ahà está
-->
paginado, ¿no? Pero si te preguntan, realmente el back también debÃa tener paginado, ¿no?
-->
Los dos. Listo. Tienes un update y tienes un delete. Aquà estos, este crud tiene
-->
endpoints. Ahorita te voy a decir cuáles son esos endpoints, ¿s� Que son los que te
-->
pasé y lo documentaste en formato curr, ¿no? En curr. C-U-R-L. Ahà yo, para que
-->
te pegues directo con postman. Y entonces esto es lo que tú tenÃas. Aquà nada más,
-->
este endpoint, este endpoint no existe. No hay un mecanismo para hacer la logout de
-->
tokens. Este no es un endpoint. Este no. Lo que sà es que tienes el create, el read,
-->
el read lo tienes por read all, ¿no? Todos los usuarios. Y este es el que lleva
-->
paginado o el read por ID. User by ID. Asà se llama, ¿no? By ID. Y este por ID solamente
-->
es, traes un empleado único por identificador. Este te trae todos paginados. Todo esto,
-->
o sea, todos los endpoints, cualquiera, el create, el read, el loop, el update,
-->
el delete, llevan token y no es cierto. Ahà está el mal. La autenticación de token nada más va
-->
dentro del read, dentro del update y dentro del delete y dentro del login. Todos menos el
-->
create. O bueno, entonces lo podrÃamos dejar asÃ, ¿no? Puedes dejar aquà tu API con
-->
autenticación y este le puedes, nada más el create es el único que, sin autenticación.
-->
¿Por qué no lleva autenticación? Porque cuando tú creas un registro, no eres un usuario
-->
registrado. Eres nuevo. Entonces no te voy a pedir un token cuando no existes. El token
-->
se crea cuando haces login. Entonces esto lo vamos a poner aquÃ. Crea token. AquÃ.
-->
Este token se puede decir que es como el token de sesión, ¿no? Entonces para que haya un login,
-->
una sesión activa, se va a crear el token. Y ese token es el que ya no puedo ocupar. Entonces
-->
por eso en el create, el registro, este es el registro. Cuando existe el registro,
-->
ahà no va autenticación. Ahà yo dejo registrar a la gente que se quiera registrar.
-->
Bueno, asà se diseñó. Está rápido. Obviamente pues es una regla de negocio, pero pues es,
-->
te lo pueden dictar ahà la gente, ¿no? Puede haber gente que te diga, no, sÃ, al create,
-->
ponle autenticación. Ah, bueno. En base a eso ya vas desarrollando. Yo hice un ejemplo
-->
Google. Y bueno, en la parte dos, el front-end, este view es la aplicación web. Se trae al,
-->
este, vaya, al final view te expone un template, por asà decirlo, de carpetas, ¿no? Te va a decir
-->
que aquà hay algo, aquà hay algo, aquà hay algo, aquà hay algo, lo que tú quieras. AquÃ
-->
las importantes son una carpeta. Bueno, es que view sà está un poco de más cosillas que ver,
-->
digamos, la estructura de la aplicación. Lo importante era ver el source. Más que nada el
-->
source. Dentro de esta carpeta source, hay otras carpetas, digamos, derivadas, ¿no?,
-->
que son importantes. Source, por ejemplo, dentro de source, podÃamos ver los modelos,
-->
podÃamos ver, no, no es cierto, modelos, no. No habÃa models, no manajemos models.
-->
HabÃa más bien este components, habÃa views, sobre todo eso, y el service. Services. Estas
-->
tres son como que los principales. Entonces, este, los componentes básicamente son estructuras
-->
de software que te permiten, este, ser reusables. Ajá, es la unidad con la que se crean los,
-->
este, pues la mayorÃa de estos frameworks de frontend, ¿no? Angular, React, y ahorita ya lo
-->
compró View también. Todo, todos esos frameworks manejan componentes. Entonces,
-->
un componente es como una pieza dentro de una página web. Por ejemplo, este,
-->
este pinche cuadrito que ves aquà es un componente, ¿no? Eso que se ve ahÃ. Y ese,
-->
ese es un componente que se puede reusar tantas veces como list, como repositorios,
-->
la lista de tus repositorios tengas aquà adentro, por ejemplo. Si te fijas,
-->
es el mismo componente que tiene aquà un public, tiene un estado, tiene una pinche
-->
barrita acá. Entonces, ese componente se está reusando y se está iterando sobre alguna
-->
lista. N veces, aquÃ, mientras más repos tengas, este componente tal vez que se llame
-->
lista, lista de repositorios, no sé, se va, se va a hacer. Este botón es un componente,
-->
esto es un componente. Tal vez ellos juntan todos estos tres y es un componente. Todo lo,
-->
lo mÃnimo que debes hacer en una web es un componente bajo este esquema de estos frameworks
-->
de listas. Entonces, ese componente en nuestro caso, yo cree, creo que fueron dos,
-->
no me acuerdo bien. Ah, bueno, pues sÃ, qué bueno, lo podemos ver de hecho acá. Bueno,
-->
ahorita voy a empezar entonces ya a explicarte un poquito el proyecto, ¿no? Ahorita ya es
-->
la parte de la arquitectura y ya. AsÃ, literal, ¿no? Lo que se ocupa. Hasta ahà tienes alguna
-->
pregunta. El objetivo del front es consumir el API, pasando la autenticación de token que se
-->
va en el login. Si es registro, no mando autenticación y pues lo vas a llegar. O sea,
-->
son tres formularios, ¿no? Tres vistas, tres pantallas, la de login, la de registro
-->
y la de cuando ya inició la sesión, eh, el crud de usuarios, ¿no? Que yo iba a llevar
-->
paginado y demás. SÃ, este mecanismo para hacer logouts es un botón que está dentro de la,
-->
de esta tabla, de esta pestaña, dentro de esta pantalla de la de usuarios,
-->
¿no? Cuando ya inicié, este, ahà está. Entonces, esto se puede, sÃ, asà son tres,
-->
tres, tres pantallas. Va. Luego de eso, ahà es lo de, lo que tú de hecho detectaste,
-->
que además de tener estas dos máquinas, vamos a hacer un llamador, vamos a hacer que de alguna
-->
forma la máquina WESPED, en este caso la del sistema operativo, en este caso mi Mac,
-->
es el consumidor tanto de la máquina 1 como de la máquina 2. Entonces, gracias a la
-->
virtual box, podemos, y bueno, la tecnologÃa ahora sà que de redes, podemos hacer un puente.
-->
Basta con configurar y ahorita te digo que a la máquina virtual un bridge, un puente,
-->
un adaptador. Lo seteamos de esa forma y ya con eso las, todas las máquinas que estén
-->
accedidas a esa red, pues están comunicadas, digamos, por red. Entonces, yo ya le puedo hacer
-->
ping de entre una a otra y de entre estas a las dos. Y haciendo ese ping, lo único que hay
-->
que buscar es, lo único que hay que hacer es ese adaptor, ese puente, que no es más que elegirle
-->
en la configuración de la base una opción que dice conectarse a la red por medio de bridge
-->
adaptor. Ya nada más. Ya con eso creándolas, este, mientras compartan la misma red, ya van a
-->
poder pinguearse entre ellas. Y este, ya dicho eso, ya nada más falta saber las IPs,
-->
la IP de la máquina uno, la IP de la máquina dos y con eso ya podrÃas hacer desde una petición
-->
hacia ese servidor, desde mi local hacia esta o desde mi local hacia la del back o desde la del
-->
back hacia el front o desde el front hacia el back. O sea, eso es como funciona la parte
-->
de la comunicación entre ellas. Entonces, de esa forma yo ya podÃa consumirme el,
-->
conectarme al front y conectarme también al back por SSH. De hecho, creo que si nos conectamos
-->
por SSH al servidor y asà sà SSH te conectabas, ya podrÃas acceder desde el local a la terminal
-->
de acá o la terminal de acá y pues ya este trabaja. Hasta ahà tienes alguna duda de la
-->
arquitectura. A ver, ok. Ok. Ok, ok. A ver, entonces vámonos por partes. De estas tres
-->
preguntas que tienes, la que podemos resolver ahorita a la mano es la de acá. Ok. Va,
-->
entonces de todas tus dudas las que podemos resolver ahorita asà a la mano son la dos,
-->
que me la voy a llevar hasta abajo y la cuatro. Estas dos. Y estas dos te las explico cuando ya
-->
veamos los repositorios. Va, el código que ya serÃa como lo último. Entonces, ¿por qué usar
-->
Note en vez de Java, por ejemplo? Mira, la verdad no es que, a ver, cualquiera de las
-->
son robustas. Yo en lo personal confÃo más en la parte de Java para la parte de robustas,
-->
porque siempre nació siendo un framework de backend. SÃ, sÃ, Java puede ser también este,
-->
bueno, no es que con Java, con el lenguaje Java, puedas hacer front-end, no, pero sà con el
-->
sistema de Spring, por ejemplo, con su framework puedes construir aplicaciones webs, ¿no? Que
-->
era como lo novedoso hace unos años, ¿no? Puedes hacer JCPs, puedes ocupar todo mediante un
-->
ecosistema de Spring, modelo vista controlador, demás. PodÃas hacer una aplicación también
-->
full stack, ¿s� Modelo vista controlador es una, es una, es una, es un, es un patrón de,
-->
es un patrón de arquitectura, ¿s� Es un patrón arquitectónico de diseño que te sirve para
-->
separar una aplicación web en precisamente eso que dices, ¿no? Tres, tres entidades que
-->
son modelos, vistas y controladores. Bueno, muy similar a lo que tienes ahà en Symphony,
-->
en Laravel, en KPHP, en Zen Framework. Todos esos frameworks ocupan MDC. Ajá, entonces,
-->
este, bueno, Java hace muy similar, lo mismo. Ahora, sÃ, sà es cierto que Java es, mira,
-->
bueno, es que no podemos decir que Java le gane a Node en robustez, porque la verdad es
-->
que también Node lo es. También Node es muy robusto. Node es más joven que Java, ¿s� Pero,
-->
puta madre, güey. JavaScript es un, es un lenguaje que lleva años en la industria, ¿no?
-->
Al igual, yo creo que de edad se la lleva con Java. No sé quién sea más viejo de los dos,
-->
¿s� Pero ambos tienen eso, pros y contras. Ajá. Este, realmente hablar de eso, yo creo
-->
que es algo más, este, fuera de, del foco de aquÃ, lo que sà te puedo decir nada más,
-->
digamos, que tú puedes presentarte y decirles la idea de, yo ocupé JavaScript o no, porque
-->
se conecta bastante bien con el tema de Nginx, ¿s� Nginx es un server que lo puedes configurar
-->
con tres patadas en JavaScript. Es que, mira, va mucho de estilos, porque sà es cierto,
-->
también lo puedes configurar con Java, este, es independiente, y sÃ, también es bien rápido
-->
y bien fácil lo que tú quieras. Tiene, tiene que ver más como un estilo de desarrollo, ¿no? Si,
-->
si ocuparas, por ejemplo, Spring Framework, toda esta aplicación, depende de qué tanta
-->
experiencia tú tengas con el framework, lo puedes configurar más o menos rápido. Si
-->
ocupas, por otro lado, Spring Boot, ese sà también sale en putiza, ¿no? Y bien fáciles
-->
configuraciones, pero bueno, yo en mi caso me fui por JavaScript, porque digamos que es un
-->
ambiente que se lleva muy bien de la mano con Vue. Vue es un framework de front-end, no es que
-->
sea la, la única, el único motivo, vaya, que, ah, como Vue es JavaScript, pues uso el
-->
backend JavaScript, no, sino como porque este fue un ejercicio meramente, digamos,
-->
como decirlo, controlado para hacerlo en una entrevista de trabajo, pues se ocupó asà algo rápido.
-->
Es que son todos, son tecnologÃas JavaScript, recuerda, recuerda aquà en esta parte,
-->
de el tema de los stacks, ¿no? Está Mongo Express, Angular, y no, que es el primero que
-->
yo, ¿no? Este fue como el boom. Después de min, empezó mer, y luego fue el mebon, y luego ya
-->
le meten tanta mamada que no sé qué, ¿no? Pero pues al final son Mongo Express, Vue y
-->
Node. Ya que te suena todo esto, o sea, ya, ¿no? Ya empiezas a hablar de, a este,
-->
pues muy, muy probablemente voy a usar el stack. AquÃ, ¿qué pasa? Que no ocupamos Mongo,
-->
ocupamos una base de datos basada en SQL Server, perdón, basada en un modelo relacional. En este
-->
caso, pues fue MySQL, ¿no? Pues aquà creo que sà hay un stack que se llama asÃ, algo asÃ,
-->
algo asÃ. Te digo que asà las combinan, asà mamadas, ¿no? O MySQL, algo asà les empiezan a
-->
nombrar. Pero, bueno, es eso a lo que se refiere, ¿no? Yo, yo nada más lo mencionas asÃ,
-->
o sea, fue puro, soy bastante ágil con Node, con Java, con cualquiera de los dos, pero,
-->
pues, bueno, ahora sà que lo quise hacer con esto por la simplicidad, la rapidez,
-->
que todo lo quise manejar en un solo lenguaje de programación, que en este caso es
-->
JavaScript, TypeScript. Entonces, este, para llevar una sintaxis, digamos, de código, ¿no?
-->
Nada más. Ajá, exactamente. Si tú te llevas por un framework basado en Apache, pues ya lo
-->
ocupas con este, con tecnologÃa de Java, ¿no? Lo ocupas con algún, este, algún YAR que exportes
-->
con la aplicación de Java y todo este Apache también. O también está JVolk, Wildfly,
-->
hay un chingo de servers que manejan este Java. Ajá, o sea, es que te digo, son sabores,
-->
nada más. Hay muchas herramientas. SÃ, es cierto, o sea, están muy dedicadas las herramientas a
-->
ciertas, este, caracterÃsticas y demás, pero generalmente tiene que ver con,
-->
con lo que ocupas, con cuántos recursos tengas, etcétera, etcétera, etcétera, ¿no?
-->
Con qué tanto puedes delegar o estás dispuesto a delegar. Por ejemplo, esta arquitectura,
-->
y creo que va de la mano con la otra, este, lo pudimos haber hecho en la nube. ImagÃnate,
-->
tiene escenario real, lo haces en la nube, ¿no? Con servidores, este, dedicados de paga y demás.
-->
Hay gente que dice, yo no tengo pedo por la lana, yo lo voy a hacer, ¿no? Voy y me aviento
-->
a pinche Amazon, cuentas de Google, lo que tú quieras. Ya revisé los planes. Ah, lamenta,
-->
si me queda y me emigro al cloud computing, ¿no? Todo más rápido, todo en corto, entre
-->
comillas, y muy entre comillas 24-7, porque luego también se caen, esos güeyes también se caen,
-->
y pues ya chigaste tu madre. O sea, hay muchas pros y contras, ¿no? Pero, por ejemplo,
-->
ventajas que te trae la nube es que todos los pinches servidores ya no los administras tú,
-->
por eso estás pagándole a otra persona. Cabrones, ustedes me administran el cloud
-->
computing y demás. Bueno, es que el cloud computing se divide en categorÃas, güey. O sea,
-->
tú puedes decidir hasta qué capa de infraestructura trabajar. Puedes trabajar en una capa 100%
-->
serverless. ¿Qué quiere decir? Que ya no ocupas tú ni madres de infraestructura, ¿no? Tú ya nada
-->
más te puedes conectar a un producto de Amazon. Por ejemplo, Amazon ya tiene todo armado,
-->
por asà decirlo. Ya dice, aquà yo tengo gateways, yo tengo servers, yo tengo pipelines
-->
para integración continua, repositorios de github, yo tengo funciones lambda,
-->
yo tengo funciones para almacenamiento, bases de datos, todo eso. Tú nada más consumelas, ¿no?
-->
Entonces ellos te arman su propia arquitectura. O sea, esto que tú armaste aquÃ, ellos ya está
-->
ya está armado, güey. Nada más para conectarte. Conectate a una base de datos. Conectate a
-->
una S3. Conectate a un despliegue. Este, hasta los IDES te los rentan. Ah, bueno,
-->
docker es otra cosa. Docker es, por ejemplo, docker lo que te permite hacer es empaquetar
-->
o contener contenedores precisamente. Bueno, cuando hablas de docker, casi casi vas a hablar
-->
de docker compose también. Son dos tecnologÃas. Entonces docker, el concepto de docker es
-->
la contenerización de aplicaciones para su mejor gestión y su mejor distribución en red.
-->
¿A qué me refiero? Vamos a suponer docker es una cajita. Es como si tuvieras aquÃ
-->
una cajita que se llame aplicación 1. ¿S� Y vas a, puedes tener otra cajita. Bueno,
-->
la vamos a poner acá abajo. ImagÃnalo con un modelo de cajas, ¿no? Aquà tienes
-->
otra aplicación 2. Entonces dentro de esta aplicación 1, tú vas a poder definir
-->
dentro de cada service, vamos a suponer que le llamas un nombre, ¿no? Le puedes decir,
-->
vamos a suponer MySQL, le vas a llamar, a este service le vas a llamar, no sé, frontend,
-->
en este caso, ¿no? Entonces vas a instalarle Vue, vas a instalarle, ¿qué más? NPM,
-->
le vas a instalar, pues, no sé si se instala en beautify por acá, no creo,
-->
más bien se instala dentro de esto, vas a instalarle Ubuntu Server,
-->
dentro de Ubuntu Server puertos, proxys, la chingada y media, ¿no? Esto. Y en el
-->
otro service vas a crear, por ejemplo, puedes hacer varios services en una sola
-->
aplicación, aquà puedes hacer, por ejemplo, la del backend, ¿s� Aquà puedes instalar
-->
Node, Express, por ejemplo, y lo mismo. Entonces puedes tenerlo asà en una sola
-->
aplicación, en un solo contenedor, este es el contenedor, puedes tener varios
-->
servicios, en este caso el front, en el back, ¿s� Y cada uno tiene un ambientado,
-->
ese ambientado es pues todo esto que tú estás instalando acá, ¿s� Todo esto,
-->
todo esto, todo esto lo compone, lo arma a través de, o es posible hacerlo
-->
porque se conecta a esta madre, Docker se conecta a una algo asà como a un,
-->
a un, a un, a un GitHub, un repositorio central de imágenes, es como si
-->
maven, por ejemplo, ¿no? No sé si has escuchado de maven, de nougat, en en este en en en
-->
punto net. ¿Cómo se llama el gestor de paquetes de php? Este, no me acuerdo. Se me fue su
-->
pinche nombre del herramienta esta de comandos. Bueno, el gestor de paquetes. NPM o NBM, un
-->
chingo de estos, ¿no? Bueno, esto básicamente es eso. Docker tiene un repositorio central
-->
de imágenes, imágenes que son públicas, ¿s� Entonces, ¿qué quiere decir eso?
-->
Que hay empresas, sobre todo las que son de software libre, o frameworks, tipo Vue,
-->
tipo, no, este, ¿cómo se llama esta madre? No, aquà también podrÃas tener. Todo esto
-->
y lo vas a poder, este, contener, por asà decirlo, en en contenedores. Esto es Docker.
-->
Entonces, Docker, ¿qué hace? Docker te permite hacer un concepto. Ahorita te lo explico
-->
rápido como si fuera una máquina virtual. Todo esto va a correr gracias a que tú tienes
-->
instalado, ahorita esta la podemos quitar, a que a que tú tienes instalado tu ambiente
-->
de Docker, ¿no? Entonces, mientras tú tengas Docker instalado, esta madre tú la vas a
-->
poder ejecutar. ¿Por qué? Porque Docker también te provee de un CLI, ¿no? Una
-->
lÃnea de comandos. Entonces, tú con eso vas a poder acceder y ver cómo está
-->
tu pinche contenedor, ¿sÃ? Vas a poder hacer comandos como, a ver, dÃglitame todas las,
-->
dime las imágenes que tengo, dime su status, ¿no? Reiniciame la imagen que se llame frontend,
-->
reiniciame la XM backend. Docker lo que hace es eso. Entonces, esto es una cajita.
-->
Esto es una cajita, cada service. Esto es otra cajita. ¿A qué me refiero con
-->
cajitas? Bueno, Docker internamente lo que hace es, esto se lo lleva y te crea,
-->
vamos a decirlo algo asà como un, bueno, no es como un, sÃ, es un sistema operativo
-->
chiquito, por asà decirlo. Lo empaqueta en un sistema operativo, generalmente basado
-->
en Unix, ¿no? Por ejemplo, te puede generar un fedora. Creo que eso también se puede
-->
configurar, pero por default creo que te lo mete en un fedora. Entonces, esos contenedores,
-->
a eso me refiero, todo esto te lo instala en un fedora y al final a ti te da una
-->
lÃnea de comando. Entonces, tú vas a poder hacer algo como para, no me acuerdo cuál es el comando,
-->
pero el chiste es que le pones el nombre de tu imagen, diagonal, OPT, diagonal, algo.
-->
Y ya. Con esto, tú ya te conectas desde tu lÃnea de comando a lo que tienes aquÃ
-->
adentro, a este servicio, a este contenedor. Y es como si tuvieras tu máquina virtual. Ya
-->
en este punto tú ya puedes interactuar con los comandos que tienes aquà en el front, ¿no?
-->
Y ya puedes empaquetar la aplicación, jugar con Vue. Como si tuvieras acceso a la máquina
-->
que hoy te hicimos, a la virtual por SSH. Ya te conectaste a esta instancia de front-end.
-->
Y esto la verdad es que lo contiene y lo hace en minutos, güey. O sea, yo le doy,
-->
no me acuerdo cuál. Ah, sÃ, ya me acordé. Docker Compose Op, ¿no? Compose Op. Y ya con eso.
-->
Esto de aquà que yo te estoy explicando es un archivo en un formato YAML. Entonces se llama
-->
Docker Compose Punto YAML, ¿va? Entonces tú cuando tengas este archivo te metes a la ruta,
-->
vamos a suponer que lo guardaste en descargas, diagonal, y ahà pones tu compose. Te metes
-->
desde tu lÃnea de comandos, ejecutas este pinche comandito de acá, ahÃ. Este pinche
-->
comando de acá. Lo metes aquà adentro y pum. Solito esta madre empieza a leer todo
-->
este YAML y empieza a decir, ah, OK, este güey quiere empaquetar dos servicios. En
-->
el primero me estás pidiendo que te instale todo esto, va. En el segundo todo esto.
-->
Ya la terminal te va diciendo, estoy instalando esto, esto, esto, esto, pum,
-->
pum, pum, la, la, la. Listo, ya acabé. Ya cuando haya acabado, ya. Tú ya puedes
-->
monitorear las instancias. O sea, ya te lo trepó como si fueran servidores, ¿no?
-->
Y ya. Ese es el concepto de Docker.
-->
¿Qué significa que entras en el concepto también de la portabilidad, no? Tú vete,
-->
esto lo instalé en una Mac. Pero vete a Windows. Tú quieres correr la misma
-->
aplicación, ¿no? SÃ. Ah, pues qué haces. Vete a Windows y instalate Docker.
-->
SÃ, ahà tienes una interfaz gráfica que se llama Docker Desktop.
-->
Y ya. Con eso, te paso mi YAML. Mi Compose. Aquà está. Lo pongo. Igual,
-->
mismo comando, pum, y ya quedó. Y ya tengo la aplicación en un Windows,
-->
en un Mac, en un Linux, en un servidor que va a exponer esto, ¿no? Para que
-->
esté disponible en una nube. Y ya está mi despliegue, güey. No,
-->
yo también era, a mà también me tocó, bueno, yo también llevo ya 11 años en
-->
esto. A mà me tocó también cuando este pedo era de que habÃa un webmaster y se
-->
instalaba un pinche server, un Tomcat, un IIS y la madre de esas en un
-->
servidor, la convertÃa con Firewolf, le metÃa Proxyx, la chingada,
-->
lo exponÃa al server, a internet, habilitaba puertos, cuidaba a otros y la
-->
madre y media, ¿no? Muy tedioso el proceso, pues, sobre un servidor
-->
fÃsico. Yo también trabajé en empresas donde tenÃa sus, este, sus rats de
-->
servidores y todo ese peor. Ahorita ya la mayorÃa se está migrando, bueno, no
-->
todos, pero si una gran mayorÃa, pues ya ocupan más bien una iniciativa en
-->
la nube, güey, ¿no? Ya le pagan a pinche Amazon, a Google, ya depende de
-->
su proveedor, el que les guste, este, ya, eso se lo delegan a esa gente, ¿no?
-->
Y realmente la nube no es que sea pinche tecnologÃa 100% en la nube, güey, al
-->
final esa pinche nube, toda la tecnologÃa que tienen al final también
-->
son servidores, güey. O sea, lo único que pasaste es de que tus
-->
aplicaciones no las guardas en tus servidores tú fÃsicos, sino que se
-->
los dejas a los servidores fÃsicos de Amazon. ¿Qué haces que si los
-->
quieres, mientras más públicos, más privados los quieras, pues te van a
-->
ayudar a asegurar más, pero ¿qué significa? Que básicamente esos güey
-->
compran los servidores que tú antes comprabas, los ponen en una pinche
-->
cuarto donde les dan un mantenimiento especial, gente dedicada a cuidar tu
-->
servidor, ¿no? Eso es lo que compras, es lo que te venden el cloud computer.
-->
Eso, ese es el concepto. Pero al final es lo mismo.
-->
Y pues ahora imagÃnate la potencia que tienen esos pinches servidores,
-->
¿no? Estos cabrones, pues tienen gente que les sabe a ese pedo del
-->
escalamiento horizontal, vertical. Puro pinche cabrón, güey.
-->
¿Qué hacen esto? Que funcione. Tú ya no te preocupas por escalar la
-->
aplicación. O sea, sà te vas a preocupar, pero ya del lado del desarrollo.
-->
Ya por el tema de la infraestructura, de que le metes más memoria, de que
-->
habilÃtale esto, que la chimera, que haz la depuración del log porque no, ya
-->
todo eso lo hace la pinche nube, ¿no? Eso es la tecnolada.
-->
Opción uno, opción dos, opción tres. Entonces, tu ejercicio era
-->
un ejemplo más como, es una entrevista ya, ¿no? Que se note que
-->
sabes todo esto, pero pues al final tú ocupaste esto porque te lo pidieron asÃ
-->
en máquinas virtuales. Y la, lo más liviano que, o sea, también
-->
lo puedes decir asÃ, ¿no? Por recursos. La neta es que Node es más liviano que,
-->
que Java, ¿no? Java sà te va a pedir más, más recurso.
-->
Java es más exquisito. Y por este
-->
lado Node es más rela, ¿no? Más rápido, más, más
-->
livianado. Engine X se instalaron en putiza, güey, en mi
-->
máquina, ¿no? Y ya. Ese es el, ese es el pedo de las,
-->
de las aplicaciones, ¿sale? Entonces ya te respondà por qué se usa Node
-->
y de qué otra forma se pueden armar las arquitecturas. ¿SÃ, más o menos? ¿Te quedó claro? Va.
-->
Entonces ya para irle cerrando, vamos a ver qué pedo ya con las aplicaciones.
-->
Le pongo foco a lo de los tokens y las versiones de Vue, qué pedo
-->
con lo de MVC y demás. Este, pero no, realmente Vue ya no es
-->
MVC, ¿no? Ya, ya no es MVC, ya es otra, otra
-->
tecnologÃa que pues te digo. Es que no, de hecho hasta donde
-->
yo me quedé, yo te digo del modelo Angular,
-->
ya no tienen un patrón, güey. O sea, ya, ya no
-->
me acuerdo cómo se llaman. Se, se puede decir que son
-->
arquitecturas basadas en componentes. O sea, lo que ocupan son componentes,
-->
¿no? Este, pero como traen un patrón
-->
tipo MVC, o sea, ya, ya no son, son aplicaciones que
-->
más bien sirven para hacer SPS, ¿no? Single Precious Applications.
-->
SPS. Pero no, no, no, no vas a encontrar un modelo,
-->
una vista, un controller, no, no, no. Digo, lo puedes manejar
-->
pero pues no es la idea, framework.
-->
Está diseñado para otra cosa.
-->
No para, no para eso.
-->
¿Sale? Este, pues bueno, a ver. Entonces,
-->
la siguiente página, yo te doy una chuleta
-->
de comandos. Aquà tienes el backend. Entonces, el backend
-->
eh, asà ejecutas la aplicación, ¿no?
-->
Con, no, la, la, la. Aquà tienes la IP, haces el ping.
-->
Eh, Telnet para hacer pruebas de entre tu host local y la
-->
conexión al, al puerto, ah, bueno,
-->
a la máquina, ¿no? A lo aquel. Ahorita vamos a ver esto de los puertos porque
-->
hablando, hablar de los puertos son dos requisitos fundamentales.
-->
Uno es el firewall y otro es la directiva de
-->
eh, como se le puede decir,
-->
de restricción de puertos, los
-->
allows. Solamente permitas la entrada a través de estos puertos
-->
hacia tu server del 22 y del 80 y el proxy te va a ayudar a hacer la
-->
redirección, ¿va? Entonces, esos son, esos, esas dos cosas son las que
-->
en cuestión de configuración al, en el enginex
-->
se tenÃan que hacer, ¿no? Una cosa es la este
-->
eh, bueno, enginex te va a permitir para agregarle una regla que es un firewall,
-->
un firewall inverso y ese firewall lo único que hace es
-->
este redireccionar desde un servidor hacia un puerto
-->
eh, 3000 o 30, no me acuerdo que puerto querÃa.
-->
SÃ, y ya. Y lo otro se hace del lado del sistema operativo,
-->
lo del, lo de las reglas de restricción de puertos,
-->
se puede decir asÃ, restricción de puertos, ¿sale? Entonces,
-->
aquÃ, por ejemplo, este comando en el map nos permite
-->
ver todos los puertos activos en tu host, ¿no? Y ahà vas.
-->
Después de que nosotros hiciéramos el tema de la restricción de puertos,
-->
esperas que este comando te devuelva nada más los puertos en donde
-->
puede acceder a los que se le puede comunicar desde fuera, pues,
-->
¿no? Los que están expuestos. Entonces, aquà está lo del restricción
-->
de puertos, es una configuración a nivel del servidor, esto se hace en el backend.
-->
Eh, para eso tú ocupaste una tecnologÃa que se llama
-->
UFW propia de Ubuntu Server.
-->
SÃ, esto quiere decir que se llama un complicated firewall.
-->
Entonces, con este complicated firewall cuyo comando es el
-->
UFW, lo que hace es que te permite restringir
-->
o crear reglas para que tú le digas desde qué puertos solamente quieres
-->
que estén habilitados. En este caso, la magia es
-->
este, los allows que te decÃa. La conexión de
-->
a un puerto en tu servidor es esto. Tú le dices
-->
la regla, permÃteme el 22 o hábilÃtame el 80,
-->
es lo que te quiere decir. Esto hace que
-->
el servidor por default solamente escuche conexiones entrantes desde el puerto HTTP
-->
hacia esto y ya, hacia el 22 y al 80.
-->
Esta otra regla, por ejemplo, niega el access,
-->
o sea, si yo quisiera tapar el 22, ya nada más le meto esto, ya ni por ahà entra,
-->
¿no? Y este comando me permite eliminar
-->
todas las reglas. Entonces, este paquete, un complicated firewall,
-->
es más que nada un paquete de Ubuntu Server y sirve para
-->
restringir puertos. Por eso tengo que esta chuleta también
-->
hay mucha información. Luego, el tema del proxy inverso
-->
que te decÃa, son dos cosas, hablar de puertos, restringirlos
-->
y ahora el proxy inverso. El proxy inverso, lo que te va a permitir
-->
hacer es una redirección. Yo le estoy diciendo, por un lado, que solamente
-->
desde el 22 y del 80 deje acceder a las comunicaciones
-->
desde fuera, ¿s� Pero entonces, la máquina
-->
de aplicación, digamos, las aplicaciones manejan un puerto por
-->
default para trabajar. Por ejemplo, si yo instalo Node
-->
o Express, generalmente manejan el puerto 3000. Entonces,
-->
si yo quiero exponer un API y me estás diciendo
-->
que yo tengo nada más la opción de habilitar el 22 y el 80,
-->
pero mi servidor ocupa el puerto 3000,
-->
ahà en tu desarrollo, o sea, si a mà me hubieras dicho
-->
que ese requerimiento, yo me meto a la configuración del servidor
-->
del lado de Node y le digo, ah, pues no corras en la aplicación en el puerto 3000,
-->
córrele en el puerto 22 o en el 80 y ya, ¿no? Es el que está expuesto.
-->
Pero aquà a ti lo que te pedÃan especÃficamente era crear
-->
un proxy inverso para hacer una redirección.
-->
Casi, casi te dijeron, no quiero que le muevas ni madres al puerto del aplicativo
-->
de Node, déjamelo en el puerto 3000. Lo que quiero que tú hagas
-->
es, esto lo hacen solo para que vean que tienes
-->
dominio sobre esto. Entonces, ¿qué es lo que te pedÃan ellos crear un proxy?
-->
Proxy inverso para que la redirección
-->
exista desde el puerto 80 y me la mapes al puerto
-->
donde la aplicación corre. Entonces,
-->
de esa forma, yo me meto aquà a un archivo de configuración
-->
que yo creo que se llama backend.conf y
-->
lo creo aquà en esta ruta de NGINX. Por eso te decÃa,
-->
tú para este caso ya debes de tener NGINX instalado.
-->
NGINX en este caso lo único que nos ayuda es para hacer
-->
la redirección del proxy inverso. Entonces, tú metes
-->
aquà NGINX, lo metes en esta ruta, en NTC
-->
NGINX está instalado, en Cypher Viable, ahÃ
-->
va a guardar todos los sitios disponibles, lo va a guardar en configuración global a todos
-->
sus servidores y va a aplicar las reglas de backend.conf.
-->
SÃ, este archivo backend.conf es esto. Básicamente
-->
es un JSON, sÃ, es un archivo de propiedades.
-->
Se llama conf, es un config, es un .conf y lo que hace es definir
-->
su proxy inverso, hace esto. Le dices escucharlo, lo que escuchas
-->
en el 80, sÃ, esta es la
-->
IP del pinche server de backend, si te fijas.
-->
155, aquà está, es mi conexión
-->
digamos local, mi IP.
-->
Entonces, localmente el servidor se llama asÃ.
-->
Ajá, con esa IP, o sea, su IP local.
-->
Y ya lo único que hace es eso, o sea, estas redes son reglas no sé qué.
-->
Que haga esta pendejada, ya. Pero lo que hace es eso, o sea, todo lo que escuches
-->
del puerto 80, redirÃgemelo al puerto local host 3000.
-->
Entonces, cuando una persona le pegue al API desde
-->
el 80, ajá, lo que va a hacer internamente es va a entrar
-->
va a cachar la regla del proxy, va a decir, ok, alguien intentó conectarse
-->
a tu IP desde el puerto 80, me vale mal, es que pinche
-->
ruta o paths tengas después.
-->
Pero yo entiendo que eso lo tengo que redireccionar localmente
-->
a donde se esté ejecutando el puerto 3000.
-->
Y como tú localmente dejas la instancia en este servidor
-->
de la aplicación Backend en ese puerto, ahà es donde ocurre
-->
la redirección. Todo lo que llegue a ese puerto 80, llega
-->
directamente a la máquina Backend local host 3000.
-->
O sea, a tu aplicación express.
-->
Y asà se conecta. Ahà ya le llega la petición, pues ya.
-->
Empieza a trabajar. Otra de las cosas que ocupas para lo del proxy
-->
inversos, que es un enlace simbólico, ahà te dice cómo hacerlo.
-->
Básicamente vamos a agregar esto a un enlace para que lo
-->
pueda habilitar y haga eso, que cuando llegue la petición
-->
lo primerito que pase es la validación por Nginx.
-->
Para eso es el enlace simbólico. Reinicias Nginx para que
-->
cache la configuración y ya. Aquà está el proxy inverso.
-->
Le haces una prueba, aquà por default le está agarrando el puerto 80.
-->
Si yo no lo pongo, el default es el 8080.
-->
O abreviado 80. Entonces yo le pego al 80 y ya
-->
directamente yo hacer esto, está pegándole internamente
-->
a la URL, a la IP local host.
-->
Entonces yo tengo que tener habilitado el servidor para que conteste,
-->
sino que no acaba de contestar.
-->
Luego SSH es la tecnologÃa que ocupas desde tu máquina local,
-->
o sea, en este caso mi Mac, para conectarte al Bakken.
-->
Entonces yo asà llamé a la máquina Bakken, Giovanni Valvel,
-->
sale y este, no es cierto, perdóname, se llama, la máquina se llama
-->
Bakken, creo, Bakken Server, no me acuerdo, ahà decÃa
-->
el nombre. Pero bueno, este es el nombre del usuario más bien.
-->
Usuario, Giovanni Valvel, a la IP tal.
-->
Ya, me conecto por SSH y ya está.
-->
Esta es la forma de conectarme al Frontend, al Bakken, sus IPs
-->
diferentes, reiniciado de servicios,
-->
es de la máquina virtual, el sistema TTL.
-->
Este creo que es el service, enginx, aquà reiniciones enginx.
-->
Y ya, MySQL
-->
se instala con un paquete,
-->
esta variable básicamente es
-->
para que puedas hacer transacciones seguras,
-->
es como de las cosas que recomiendas cuando haces la instalación,
-->
todo ese perro, ¿sale? Accedes a MySQL a través de esta
-->
ruta, sudo MySQL menos su root menos p,
-->
y accedes a la instancia de base de datos, con el usuario root.
-->
Y este, que más, asignas un password,
-->
le decimos, este root, lo calcos,
-->
le pongo el password a la base de datos,
-->
para que me pueda conectar cuando haga la colección desde el bak a la base,
-->
y la pueda agregar. Le doy privilegios y ya,
-->
creamos la base de datos, la llame yagw,
-->
y la tabla, que te pedÃan ahà un modelo de base de datos,
-->
el crud, vaya, sobre el modelo donde quieres el crud,
-->
ahà lo creen una base de datos llamado yagw,
-->
la tabla, no te la especifican,
-->
pues tú la defines, un modelo chiquito, un id, nombre,
-->
email y password, ya, el password para que se encrypte con el bak,
-->
la contraseg, el incremental del
-->
identificador, y listo, con eso.
-->
Insertar en la tabla desde el endpoint para que se encrypten las passwords.
-->
Ah, pues creo que entonces sà venÃan tu requerimiento,
-->
no les pagó nada, bueno, entonces no fue un
-->
plus, sino fue un requerimiento.
-->
Ah, ¿no venÃan? Ah, pues entonces ya lo pones como un plus.
-->
Y ya, front end, respecto al front,
-->
igual tienes la máquina virtual, en este caso la 55 es el bak,
-->
la 56 es el front, tienes tus frameworks de vista,
-->
en este caso es view, asà lo instalas,
-->
a nivel global, obviamente necesitas NPM, instalas beautify,
-->
que te digo que es como si fuera el material, si, agregas beautify
-->
en el asistente, que es la opción 3,
-->
y con eso esto adentra en tu proyecto, ya, la versión
-->
es la más actual, si te fijas yo en view, no le dije una versión,
-->
cuando no especificas una versión, NPM se va por la versión más actual,
-->
la más estable de view, entonces aquà eso lo maneja, lo único
-->
que te digo es la más actual, ¿cuál? No me acuerdo, creo que es la 2,
-->
o la 3, no me acuerdo, con esto checas la versión de view,
-->
y con esto ejecutas la aplicación una vez que esté activa, ¿va?
-->
Es eso. Y comandos muy en común,
-->
NBM, que es como el gestor de NPM,
-->
NBM sirve porque
-->
por default si tú instalas NPM, NPM solamente te deja tener
-->
una instancia de NPM en tu máquina, si tú instalas
-->
NPM 5, bueno, 2, ya te chigaste,
-->
quieres meter una nueva versión, tienes que actualizarlo,
-->
y eso luego ocasiona problemas de incompatibilidad en tus aplicaciones,
-->
porque un proyecto lo creaste con NPM 2, luego
-->
otro lo creaste con el NPM 2, y tanto, eso luego genera
-->
compatibilidades, por eso se crea un gestor de paquetes que se llama NVM,
-->
Node Version Manager es un administrador
-->
de NPM, de Node Package Manager, entonces
-->
NBM te permite fácilmente decirle,
-->
NBM version 2, y me instala NPM 2,
-->
quiero cambiarlo, desde aquà le digo, ahora instálame la 2.5,
-->
y NPM guarda la versión 2, y ahora te instala la 5, y la usa,
-->
ya me quiero cambiar de la
-->
2.5 porque con eso hice un proyecto, y luego
-->
quiero regresar un proyecto que lo hice con una versión de Node más viejita,
-->
me cambio a la versión particular, puedo listar
-->
cuáles versiones tengo y usar la que yo quiera, entonces usé NVM,
-->
con esto checas las versiones de Node,
-->
y ya, respecto a GitHub, se crearon
-->
los dos repos con esta instancia de tu correo,
-->
se creó una cuenta de Gmail, Giovanni Valencia de Gmail,
-->
tu nombre de usuario, se registró con GitHub, en GitHub creaste
-->
los dos repositorios con sus readme y ya,
-->
y bueno, GitHub ya no permite hacer la autenticación
-->
por contraseña en tu máquina local, es decir,
-->
que cuando ya hago, quiero hacer un commit a tu repositorio,
-->
aunque yo tenga configurado mi usuario y mi password, GitHub,
-->
al momento de hacer el commit, el push te va a decir
-->
usuario y contraseña, tú metes tu usuario y tu contraseña creando
-->
creyendo que son las de, con las que hice sesión en GitHub,
-->
que por ahà creo que las puse las contraseñas,
-->
bueno, eso de menos, creo que están por acá, creo que te las pasé,
-->
aquà deben, no me acuerdo dónde las puse, pero ahà deben de estar,
-->
no, pues de hecho para todo el password siempre es
-->
este, Giovanni Valencia, no me acuerdo dónde te puse eso,
-->
tenÃamos otra chuleta donde estaban las cuentas,
-->
pero bueno, eso básicamente es eso,
-->
cuando tú quieres hacer un push, ya te pide la
-->
contraseña, ya no es la contraseña que ocupa,
-->
sino que más bien este,
-->
te pide un pad, esto lo sacas del repositorio,
-->
es como una llave, la metes en el
-->
password, el usuario sà puede seguir usando este, en el password
-->
ya tienes que meter este, ya con eso te permite hacer el push,
-->
y ya, ya con eso,
-->
ya con eso te conectas,
-->
y ya, esa es la parte de, digamos de este,
-->
de este archivo, ahà tienes alguna duda, va,
-->
entonces ya al último faltarÃa nada más el tema de los repositorios,
-->
estos son los calls, básicamente esto lo copies y pegas en postman,
-->
y te arman los endpoints, estos son los endpoints, el login, el registro,
-->
el listar all, listar por ID, el update y el delete,
-->
sÃ, y son los endpoints al puerto, al servidor de backend,
-->
puerto 80 redireccionan 3000 por NGINX,
-->
y aquà están los paths,
-->
users, los parámetros,
-->
y la parte del token, el token básicamente se manda como un header,
-->
que se construye asÃ, authorization, viewer, y aquà mandas este token,
-->
este token te digo que viene del login,
-->
pero ahorita te los pido con más detalle, en la aplicación, pero realmente
-->
internamente, esto es lo que se está mandando como petición,
-->
cuando yo quiero hacerle una petición y decirle, oye, tráeme un get all,
-->
realmente el backend arma esto, por atrás, por abajito,
-->
perdóname, el frontend, el frontend arma esto,
-->
en el archivo que te dije acá de services, cuando te explicaba aquÃ
-->
la arquitectura del front, aquà bueno lo quité,
-->
pero aquà te decÃa que habÃa una carpeta que se llama services,
-->
services, esa lógica lo que hace es armar estos endpoints,
-->
se va al get all, arma esto,
-->
pega el token, que es una variable de esa opción, del local storage,
-->
y ya, eso lo arma y lo manda,
-->
te da una respuesta y ya, esos son los calls,
-->
los calls, bueno,
-->
entonces, ya, nada más me queda explicarte el repo,
-->
el usuario y el front, el backend, primero vamos con el backend,
-->
asà de forma rápida, vamos a ver todo esto que es,
-->
ah, bueno, es que está prendida la aplicación, la podemos quitar esto,
-->
y ya, asà es como se ve tu front,
-->
entonces, ¿qué hace?
-->
¿Qué hace el GitHub? Pues tienes dos ramas, el main y el develop,
-->
si yo me cambio, yo todo lo hice en develop, y en develop, aquà están mis
-->
commits, realmente, creo que son solamente
-->
cuatro commits, lo que yo llevo de historia, nada más en cuatro commits,
-->
y en el back-end, aquÃ, en el back-end,
-->
entonces, aquà es el commit, este es el proyecto,
-->
básicamente, esto es un proyecto basado en node
-->
y en express, el proyecto tiene un package JSON,
-->
que es como si fuera tu archivo de configuración,
-->
y aquà están listados todos los paquetes que tienen la aplicación,
-->
el nombre, user backend, la versión, una descripción,
-->
tu archivo main, scripts, para que tu puedas hacer pruebas,
-->
y las dependencias, que es lo importante,
-->
back-grip, para la encriptado de contraseñas,
-->
estos son cosas que ocupa ahÃ, el cores, núcleo,
-->
todo esto, este .m es un
-->
paquete que sirve para leer variables
-->
de ambiente de un archivo, que se llama .m,
-->
de hecho . en ingles es punto, .m, entonces,
-->
esos archivos .m definen propiedades, este paquete te permite
-->
leer esas propiedades, propiedades como, por ejemplo, los passwords,
-->
de bases de datos, esas madres, que no deben
-->
estar ahà contenidos en el código, express, que es el framework,
-->
JSON Web Token, que es la parte de Bureau Token, que ahorita vamos a ver,
-->
el cliente para conectarme a MySQL,
-->
SQLize ORM, y el cliente de SQLize para hacer
-->
migraciones, comandos, todos estos dentro de la
-->
lÃnea de comandos, va,
-->
este APP.js, que es el archivo principal,
-->
básicamente, aquà está, esta es la aplicación
-->
inicial, aquà en paquetas, si configuras
-->
express, levantas la aplicación
-->
en el puerto 3000, que es aquà donde te decÃa que podÃamos
-->
levantar nosotros el, cambiar el puerto al
-->
22 o uno de esos, sin hacer la redirección,
-->
ya con eso me llegaba,
-->
me permitÃa escuchar y le hubiera pegado la petición,
-->
que más ocupas todo esto, que lo ocupas, asà son las
-->
por default de express, y aquà estás metiendo nada más un
-->
API users, que ese vendrÃa a ser el path, el path
-->
de tus endpoints, cuando ves aquà el core, todos los endpoints
-->
tienen ese path API users, y luego
-->
ya lo que le sigue, ese ya es el, la ruta, el endpoint,
-->
va, login, registers, pero bueno, el path
-->
es este API users, todos están dentro de ese path,
-->
que es este, y el user router, si tú te fijas, lo
-->
exporta, o más bien aquà lo importa, de un paquete que es
-->
en el source, routes, users, entonces, este, ese
-->
es lo primero que podrÃas revisar, el routers,
-->
entonces, me voy acá, y me voy al source,
-->
ah, no es cierto, perdóname, no hay un source routers, es aquÃ, routes,
-->
el source routers es en el route, bueno, aquà está importando
-->
este paquete, routes, users, aquà está,
-->
entonces, esto que hace, básicamente estas son las rutas de los endpoints,
-->
entonces, aquà lo que está haciendo es que llegue un pose,
-->
un get, aquà por ejemplo un put,
-->
o aquà un delete, va, entonces, es una API verbosa
-->
que puedes usar verbos de HTTP, pose,
-->
gets, puts, deletes, va, para cada
-->
comando, es caracterÃstica de una, aquà está el método
-->
de login, aquà está la lógica, todo lo que hace el login,
-->
sale, llega del body, un email y un
-->
password, entonces, el login, si te fijas, aquà está, nada más voy a explicar uno,
-->
son los parámetros que llega, email y password,
-->
sÃ, como JSON, entonces, aquà llega email,
-->
llega password, del body, sÃ, los cacho,
-->
hago primero una búsqueda, todo esto es gracias a este,
-->
que yo tengo configurado los modelos con esto,
-->
con el paquete, yo puedo requerir los models,
-->
los models están, aquà voy a abrir otra pestaña,
-->
como para entrar a la, esta, exacto, y esto me abre los
-->
models, entonces, acá está, models,
-->
por ejemplo, users, entonces, aquà está, mi usuario,
-->
con SQLize, es mi mapeo a la tabla de users, yo me
-->
conecto, aquà hay un archivo de configuración,
-->
ya él sabe, es un ORM, quién es la conexión a la base de datos
-->
y todo eso, defino los modelos, la chingada,
-->
ya, esto es este, el modelo,
-->
y lo carga acá, busca en la tabla de usuarios, por email,
-->
si no existe, no lo encontré, la chingada,
-->
es básicamente esto, ahora, login tiene un mecanismo,
-->
aquà está lo del token, que es este,
-->
este, sÃ, tiene una biblioteca que se llama
-->
JWT, JSON Web Token, lo que hace es hacer una firma,
-->
bueno, esto básicamente se basa en un,
-->
JSON Web Token es, cómo decirlo, es un estándar
-->
para crear tokens de seguridad,
-->
básicamente ocupa un encriptado a través de,
-->
esto ya lo tiene obviamente, es una biblioteca,
-->
ya lo hace internamente, qué hace, no sé, lo que hace es eso,
-->
le llama sign al método, y lo que ocupa es
-->
tres datos, en este caso, lo que tú quieres
-->
encriptar, tiene que validarse con un secreto,
-->
este secreto, si te fijas, está haciendo uso de un .env,
-->
esto lo vas a encontrar en una variable de
-->
un secreto,
-->
en teorÃa no se subirÃa, pero como es un ejercicio, yo lo subÃ,
-->
y la expiración del token, en este caso, expira en
-->
86.400 segundos, o sea, 24 horas,
-->
cada que tú crees un token desde tu aplicación,
-->
dura una hora, digo, un dÃa,
-->
tú mediante un dÃa puedes empezar a usar ese token,
-->
pasa ese dÃa y ya no sirve,
-->
te saca de la sesión y vuelves a hacer login,
-->
puedes volver a hacer login y te va a generar un token nuevo,
-->
básicamente esto es el login, esto es el tema de los
-->
tokens, entonces, asà lo cacha
-->
el vaquero, lo cacha y listo,
-->
entonces cuando ya te dice que todo está bien,
-->
te manda una respuesta que te dice el login exitoso, te manda el token,
-->
todo esto en formato JSON y te manda el usuario
-->
que creaste, que inició esta sesión mejor dicho, te dice cuál es su ID,
-->
su nombre y el email, el ID lo sabe porque lo
-->
recupere primero de la base de datos acá,
-->
ahà está, eso es lo que hace, y bueno, maneja el cache en caso
-->
de que algo haya pasado, mando este error,
-->
sÃ, más o menos,
-->
cada vez que tú hagas un login, la aplicación te va a servir con un JWT,
-->
ahora, ese es como lo genera, ahora, cómo ocupa el token
-->
otro endpoint, por ejemplo, el registro, te decÃa que
-->
como son usuarios nuevos, a ese wey no le puedes meter la validación
-->
de token, porque son usuarios que no existen, ese no ocupa
-->
nada de tokens, ahà se ve que no ocupa ni madres,
-->
solamente recibo lo que me mandas, lo encrypto,
-->
su password, lo agrego en la base de datos, y aquÃ
-->
es donde decÃamos que tal vez pudimos haber puesto una validación como las de acá,
-->
de que si ya existe ese email, le digas, no, no puedes ingresar,
-->
registrarte con ese email, aquà se hacÃa eso,
-->
el registro, la lista, la lista si tú te fijas,
-->
el get user si ocupa un token,
-->
entonces, a ese parámetro,
-->
bueno, a esa ruta, le estoy diciendo verify
-->
token, déjame ver aquÃ, porque el login
-->
no se llama verify token, se llama token, ok, va,
-->
entonces, verify token es un, igual,
-->
creo que aquà viene, también lo creamos, no me acuerdo si creamos el middle word,
-->
creo que sÃ, a ver, vamos a ver qué viene,
-->
no me acuerdo si es un paquete o es algo que creamos, pero al final
-->
está cachando esta librerÃa, ok, sà lo creemos nosotros, entonces,
-->
ocupas un paquete, una librerÃa, que nosotros creamos,
-->
se llama, está en middle word, authentication, se llama verify token,
-->
eso lo estoy metiendo aquà en el listado
-->
de usuarios, por ejemplo, en el get all, o en el get by ID,
-->
y tú simplemente al meter esto en las rutas, la ruta es un framework,
-->
si tú te fijas, también es un paquete que ya viene con express, estos cabrones
-->
ya se conectan entre sÃ, ya se conectan con JWT,
-->
la chingada, si tú te fijas, login no tiene el tercer parámetro,
-->
que es el middle word, o la validación
-->
de un token, el registro tampoco, pero a partir de
-->
los demás, las demás rutas, perdón, ya tienen
-->
el verify, si te fijas, con eso, yo no le hago
-->
más que importar la función que valida el token, y ya,
-->
la ruta está protegida, esa lógica la delegas acá, y
-->
si es válido el token, la ruta entra, si no,
-->
a la chingada, no te deja entrar, ese método
-->
lo ves acá en el verify token, aquà está, y qué es lo que hace,
-->
pues, ya, saca del request, el header,
-->
en este caso, cuando tú vas a mandar un
-->
parámetro con, le vas a pegar un endpoint con
-->
con este, con token, es esto,
-->
no, ocupa el header, por eso lo estamos
-->
mandando, el authorization, entonces, este wey va a leer
-->
un token que se llama access token, puede venir como access token,
-->
sÃ, puede venir como header authorization,
-->
que en este caso llega asÃ, como authorization,
-->
este, en express,
-->
los headers son case insensitive, son insensibles, quiere decir que yo
-->
pude haberlo metido en camel case, en uppercase,
-->
combinando ahà las letras, y al final siempre lo va a cachar asÃ, no,
-->
entonces, le da igual que sea mayúscula o minúscula la primer letra,
-->
entonces, aquÃ, dice que si no me mandaste el token en el header,
-->
le digo, no sabes qué wey, mándame un token, porque si no, no te dejo
-->
asÃ, va a poder verificar,
-->
entonces, las rutas que requieran esta función,
-->
esta función, verify, de entrada, van a poder
-->
acceder, sÃ, sólo sÃ, en el encabezado, viene el header,
-->
viene esto, si me estás mandando el authorization,
-->
ahà no estoy validando que contiene el token, nada más,
-->
Si esto no sucede, entonces el flujo continúa.
-->
Entonces el token, básicamente le digo que inicie con la
-->
palabra beerer.
-->
Eso es de cajón, es un estándar.
-->
Si yo voy a mandar esta palabrita, beerer, espacio.
-->
Ya está, se ha ido un espacio.
-->
Y luego viene el token.
-->
¿Asà se manejan los tokens?
-->
Acá está el token.
-->
Aquà está el token.
-->
SÃ, entonces yo le digo, si el token, ya lo caché,
-->
viene acá.
-->
Inicia con esto, entonces le quito la palabra token y
-->
solamente me quedo con esta madre.
-->
Eso es lo que es esa función de ahÃ, ¿no?
-->
Le quitas siete caracteres que son estos.
-->
Toda la longitud me lo traes y aquà está el token.
-->
Y luego con la misma biblioteca de JSON Web Token,
-->
lo que hago es cacho este token,
-->
lo valido con mi token, con mi secreto que yo tengo allá.
-->
Si te fijas, ¿por qué van a ser macho?
-->
Porque cuando yo creé un token, que lo creé en el login,
-->
lo creé y lo firmé con ese secreto, ¿s�
-->
Es como decir, todos los tokens que yo te estoy mandando,
-->
güey, internamente tienen una llave secreta que solo el
-->
servidor conoce, ¿s�
-->
En este caso, el secreto puede ser una palabra,
-->
hola, mundo, o secreto para abrir tokens,
-->
lo que tú quieras, ¿no?
-->
Ese secreto funciona como una llave y lo firma.
-->
Todos los tokens que están asÃ, internamente tienen un
-->
algoritmo y creo que estos puntos que ves acá,
-->
eso es como la teorÃa de los tokens, ¿no?
-->
No voy a entrar tanto en detalle,
-->
pero creo que en esos puntos te lo divide y en alguna de
-->
estas partes está el encriptado de ese secreto.
-->
Entonces, ah, pues, de hecho,
-->
creo que sà es ese porque mira que se comparten entre
-->
todos, ¿ya está?
-->
Creo que ese es el secreto, ¿va?
-->
Entonces, bueno, ese secreto que viene ahà encriptado lo
-->
firma asà y asà los genera.
-->
Y cuando los quiere recuperar, básicamente ocupa ese mismo
-->
secreto que solamente el backend conoce y hace un
-->
decode, justamente, una decodificación.
-->
Le cacha de este token, entonces,
-->
con mi secreto y el algoritmo de desencriptado de la
-->
librerÃa de JWT, le dice, ¿sabes qué?
-->
Esta cadena cachó con la llave,
-->
con el secreto y la pudo desencriptar.
-->
En ese momento mi token es válido.
-->
Por eso se llama el verified.
-->
Si no es válido, pues, te mando un error, ¿no?
-->
Aquà está.
-->
Si algo pasó en esa decodificación,
-->
mensaje 401 no ha actualizado.
-->
De lo contrario, te mando el user ID de la que viene en
-->
la petición, ¿s�
-->
Todos los ricos llegan con el user ID y lo mando,
-->
decodificado.
-->
Y eso es lo que les paso a las rutas.
-->
Esa es la función del token.
-->
¿Este?
-->
Está chido, ¿no?
-->
Pues, ya.
-->
Con eso, continúa el flujo y ya funciona.
-->
Eso es lo que hace el app y eso es lo que hace el
-->
servidor, en pocas palabras.
-->
Y, pues, ya.
-->
El front está un poquito más talachudo,
-->
porque lo que hace este güey igual tiene dos ramas.
-->
Aquà está el red.
-->
Aquà está Vue.
-->
SÃ, Vue ocupa igual su piche de paquete JSON.
-->
Si te fijas, todo es muy similar.
-->
La estructura en paquetes en back y front.
-->
Otra de las ventajas de usar el ecosistema node, ¿no?
-->
Basado en JavaScript.
-->
Entonces, esta paquete, si tú también te acuerdas,
-->
lo vimos en el back, ¿no?
-->
Ahora lo estamos viendo en el front.
-->
Aquà está la versión de Vue.
-->
Asà se llama tu proyecto.
-->
Tiene scripts para construcción, para hacer link,
-->
para hacer server.
-->
Todo esto, ¿no?
-->
Tiene estas dependencias.
-->
Actios para la comunicación hacia APIs externas.
-->
En este caso, este es el cliente que nos permite
-->
comunicarnos a las APIs.
-->
Tiene este Vue.
-->
Tiene el router.
-->
Vue.tify, que es el material.
-->
Sale y ya.
-->
Básicamente.
-->
No tiene más.
-->
Ahà está el front.
-->
¿Qué más?
-->
Pues de aquÃ, creo que, a ver, vamos a ver si Vue.tify.
-->
Este no se mueve.
-->
Esto no se mueve.
-->
No, no, de aquà ya nada se mueve.
-->
De aquà ya solamente.
-->
SÃ, vamos a ver cómo.
-->
Mira.
-->
Aquà en public, ¿qué tienes?
-->
No, public contiene un archivo HTML index.
-->
Este es, digamos, donde todo se encuentra contenido.
-->
AquÃ, si te fijas, tiene un único div.
-->
Ese div carga el componente app.
-->
Es lo que te decÃa de los componentes.
-->
Entonces, se carga un componente que se llama app.
-->
Vamos a buscar ese componente app.
-->
Es el componente principal.
-->
Y creo que está aquà en source.
-->
Creo que es tu componente app.
-->
Aquà está.
-->
Generalmente, el nombre del archivo es el nombre del
-->
componente que se ocupa en el HTML.
-->
Entonces, vamos a ver qué tiene el main.
-->
El main define cómo se carga, cómo se crea,
-->
más bien dicho, el componente app.
-->
Importa el componente.
-->
Ahorita vamos a ver qué tiene ese pinche componente.
-->
Pero este main, prácticamente,
-->
hace un create app, que es una función interna de Vue,
-->
justamente, ¿s�
-->
Para esa aplicación, le estamos diciendo que ocupe
-->
Router, que ocupe Vue.tify y lo monte en un div que se
-->
llama identificador app.
-->
Ahà lo va a montar, ese componente.
-->
Ese es el vÃnculo.
-->
Es, digamos, el de cajón de todas las aplicaciones.
-->
Y el componente app trae esto.
-->
Trae un toolbar.
-->
Si te fijas, estas son etiquetas HTML.
-->
Pero son, digamos, HTML personalizados.
-->
Eso que tienes ahÃ, V-toolbar-title,
-->
es un componente.
-->
Entonces, es un componente, seguramente,
-->
interno de la librerÃa del front de Vue.
-->
Y te permite hacer esto.
-->
Ese componente es este toolbar.
-->
Esta pinche, como decirlo, columnita que ves aquÃ,
-->
es la barra de tÃtulo.
-->
Y tú le estás metiendo adentro un user frontend.
-->
Pero si me explico, eso es un toolbar title.
-->
Es un componente que tú ya puedes re-usar y asà se ve.
-->
Carga estilos, carga la chingada.
-->
Y es parte del framework de Vue.tify.
-->
¿Va?
-->
Y ya.
-->
Un Router Vue.
-->
Y ya.
-->
Entonces, con esto, esto es la configuración inicial.
-->
Y a partir de ahÃ, ya empiezas a ver lo que hay acá en las
-->
carpetas.
-->
Los assets, que son todos los archivos estáticos que se
-->
cargan, ¿no?
-->
Logos, imágenes, la chingada.
-->
Los componentes, los plugins.
-->
Plugins tampoco vamos a ocupar gran cosa.
-->
Es Vue.tify y ya.
-->
Plugins no se ve.
-->
Componentes sÃ, ahorita lo checamos.
-->
Lo que te decÃa, las importantes son componentes,
-->
routers, services y views.
-->
Nada más.
-->
¿No?
-->
Entonces, para explicar esto asà ya rápido.
-->
Componentes.
-->
Componentes nada más tenÃamos creo que dos.
-->
Que son él.
-->
Básicamente son formularios que se re-usan.
-->
En este caso, el formulario de diálogo son los
-->
diálogos.
-->
Por ejemplo, cuando yo quiero borrar,
-->
aquà hay un diálogo que se puede re-usar y es un
-->
componente.
-->
Aquà adentro está el diálogo.
-->
Entonces, este diálogo es el que hace y confirma la
-->
eliminación, ¿no?
-->
Está seguro de que deseas eliminar el usuario y aquà te
-->
da todo lo que trae.
-->
Básicamente, por eso te digo que no es un modelo vista
-->
controlador.
-->
Es más bien, no sé qué arquitectura,
-->
cómo podrÃamos llamarla.
-->
Yo le dirÃa arquitectura basada en componentes.
-->
Básicamente, el componente te define aquà tu pinche
-->
vista, tu lenguaje de vista, HTML, y abajito,
-->
en un script está y te carga la lógica relacionada a este
-->
pinche componente.
-->
Asà es igual react y angular, no.
-->
Angular te carga componente y abajo del componente,
-->
digamos, su lógico.
-->
Entonces, este es lo único.
-->
Este se me figuró más como si fuera react.
-->
AsÃ, igualito.
-->
Que son más como aplicaciones reactivas y todo ese pedo.
-->
Pero sÃ, esto es más como react.
-->
Entonces, ¿qué hace esta madre?
-->
Lo único que hace es carga propiedades que van a ser
-->
usadas aquÃ, en este alcance de este componente.
-->
Propiedades computadas, diálogo.
-->
Estas funciones son para cachar los valores.
-->
Es que entrar a todo este pedo, wey,
-->
algo que no sé si te vaya a confundir más.
-->
Pero básicamente, esto de aquà es para que puedas
-->
compartir, bueno, más bien para que puedas activar el
-->
modelo de doble bindeo o de doble camino para compartir
-->
y comunicar variables desde un componente padre a un
-->
componente hijo.
-->
Un componente padre es un componente que, a ver si te
-->
lo puedo poner aquà como en el ejemplo de la vista
-->
cuando cargamos los aquÃ.
-->
Mira, por ejemplo, este de aquà vendrÃa a ser un
-->
componente padre y su hijo vendrÃa a ser este componente.
-->
Estos dos.
-->
SÃ.
-->
Entonces, estos dos se pueden comunicar con el
-->
componente papá.
-->
A su vez, este wey es un componente papá de este wey
-->
de acá.
-->
SÃ.
-->
Entonces, el modelo de esto se le llama composición de
-->
componentes.
-->
Es un modelo como si habláramos de herencia en
-->
clases, de que un objeto le hereda a otro propiedades y
-->
demás.
-->
Aquà básicamente se llama de composición.
-->
Estas propiedades, propiedades me refiero a
-->
todo lo que tú pongas acá en un atributo HTML.
-->
Esto es HTML.
-->
Los atributos que tú pones en ese pinche HTML son
-->
propiedades que le puedes componer a tu componente
-->
hijo y de esa forma pasas el valor de una
-->
propiedad.
-->
ImagÃnate, aquà tendrÃa una, no sé, un position, un
-->
index, un algo, no sé, un name, y lo pasarÃas
-->
hacia acá.
-->
O una variable customizada, la chida.
-->
AsÃ, eso es lo que más o menos se trata de dar a
-->
entender.
-->
Y eso es lo que manejan estas propiedades, ¿no?
-->
Las computadas.
-->
Esto es donde me tarde, ¿te acuerdas?
-->
Que me tarde como dÃa y medio.
-->
Esto fue el pinche desmadre, ¿no?
-->
Y en este caso, el hijo, estos componentes son hijos.
-->
Un diálogo es un componente hijo que se va a imprimir en
-->
una vista, que es un componente padre.
-->
La vista del formulario, ahà mando a llamar cuando
-->
elimino algo al diálogo, ¿no?
-->
Básicamente es esto.
-->
Y los métodos que tiene, ¿no?
-->
Manejan mucho esto de emisión de eventos porque
-->
son modelos observables, te usan más bien frameworks.
-->
SÃ, le tienes que echar un ojo a la composición de
-->
componentes, al primero entender eso, ¿no?
-->
Muy poquito más que son componentes de más.
-->
Programación, tal vez modelo de reactividad,
-->
modelos observables, todo eso, ¿no?
-->
Y listo.
-->
Eso es la parte de componentes.
-->
Y el router, tal vez también era medio importante.
-->
El router básicamente define las rutas de mis pantallas.
-->
Yo tengo la ruta login que, si te fijas,
-->
es la que no tiene pat, ¿no?
-->
Cuando yo meta un pat en mi aplicación que no tenga nada,
-->
solamente esto, creo que ya no van a estar abiertas, ¿no?
-->
Pero si yo meto eso, asà solito,
-->
me va a redireccionar, esto es lo que hacen routers.
-->
Igual es un componente ya de view, ¿no?
-->
Aquà está.
-->
Se llama view router.
-->
No, mames, veis, antes manejar este ruteo, por ejemplo,
-->
en React era un pedo, güey.
-->
Era tener que instalarle un pinche ruteador personalizado
-->
a esta madre, un pinche huevo.
-->
Pero, bueno, aquà ahorita ya está bien en corto, mira.
-->
Yo defino el router y ya lo meto.
-->
Le digo incluso si quiero que guarde el modelo history,
-->
que es que cuando estoy aquà y yo le doy regresar,
-->
me regrese al último historia, ¿no?
-->
Es el historia del punto 1 menos 1 o menos 2,
-->
no me acuerdo qué pedo, de JavaScript.
-->
Y listo.
-->
Y con eso, básicamente te dice, ¿qué ruta?
-->
Si tú metes una ruta, se va a llamar name de tipo,
-->
por ejemplo, se va a llamar login y te lo va a asociar a
-->
un componente.
-->
En este caso, yo tengo que hacer el import de cada
-->
component.
-->
Yo voy a importar la ruta a que se llaman login,
-->
lo mapea al componente login view.
-->
Son views.
-->
El registro, el formulario a la vista registro y el user a
-->
la vista de users.
-->
O sea que yo le puedo poner users y la chingada y me va
-->
a mapear la vista que está asociada a ese componente.
-->
Aquà adentro, ya viste que te decÃa otro to do,
-->
que era proteger las rutas.
-->
Si no hay token, si no hay sesión,
-->
si no hay login, no me dejes entrar a ninguno de estos.
-->
Eso aquà se metÃa.
-->
Una configuración adicional, un guard creo que se llama.
-->
Guards.
-->
Es un guards, lo que hacen es eso.
-->
Si no hay token, mandala a la chingada.
-->
Redireccionalo acá.
-->
Si no hay token, redireccionamelo acá.
-->
A login, a que siempre haya inicio de sesión.
-->
Eso es otro mecanismo de seguridad.
-->
Y se hacÃa ahÃ.
-->
Y ya por último, de los routers.
-->
Ah, bueno, son dos más.
-->
La vista, que es el principal, y el services.
-->
El services es lo que te decÃa.
-->
Aquà está la conexión con el backend por medio de la
-->
librerÃa Axios.
-->
Aquà está.
-->
Es un paquete como si fuera Ajax,
-->
cualquiera de esas librerÃas.
-->
En este caso, evolucionado.
-->
Y una librerÃa muy popular es Axios en JavaScript.
-->
Entonces, Axios permite hacer esto.
-->
Chords, por asà decirlo.
-->
Bueno, peticiones, mejor dicho.
-->
Esto de aquà es lo que está aquà en Axios.
-->
Le defino una constante que se llama API URL.
-->
Si te fijas, es esto junto con el path.
-->
Es hasta acá.
-->
Todo esto es común a todos los endpoints.
-->
Ahà está.
-->
Todos.
-->
Todos comparten ese API URL.
-->
Entonces, lo uso como una constante.
-->
Y ya.
-->
Aquà tienes una función para obtener el header de
-->
autorización con el token.
-->
Entonces, este, por ejemplo, vamos a ver el get all users.
-->
Si alguien, ¿cómo hace ese get all users?
-->
¿Cuándo se va a mandar a llamar?
-->
Cuando yo inicie sesión, si te fijas,
-->
cuando yo inicio sesión y la redirección de esa sesión
-->
existe, me va a llevar al componente que se llama users.
-->
A donde carga el data table.
-->
Y ahà es donde yo necesito traerme o mandar a llamar al
-->
endpoint que me trae a todos los usuarios.
-->
Al get all user.
-->
A este, ¿s�
-->
Entonces, ese endpoint lo que hace es que yo necesito
-->
pegarle a esa API URL por medio del método get.
-->
Ahà está.
-->
Y le tengo que pasar un header en formato JSON.
-->
O sea, esto con esta palabra.
-->
Un header del tipo autorización que aquà está.
-->
Out header.
-->
Lo que hago es mandarle a llamar a esta función.
-->
Entonces, esta función lo que hace es crear,
-->
va a cachar una variable.
-->
Esta variable es global a toda tu aplicación frontend.
-->
¿Por qué es global?
-->
Porque realmente esta es una variable de decisión de esas
-->
que se quedan en el navegador.
-->
Se está quedando con el local storage.
-->
Y adentro, cuando existe login,
-->
el login lo que va a hacer es guardar,
-->
ah, pues, de hecho, aquà está.
-->
Mira, si alguien hace login, es la primera vista en el
-->
flujo, le da iniciar sesión.
-->
Y si el login es correcto, lo que va a hacer es crear
-->
una variable en el local storage llamada user.
-->
Y le va a guardar todo lo que responda el API de inicio de
-->
sesión.
-->
Si te acuerdas, ese API devolvÃa este,
-->
devolvÃa un JSON donde te dice el usuario y el token.
-->
Entonces, eso lo vamos a guardar en local storage asÃ,
-->
con la variable user.
-->
Y entonces, la función de autenticación,
-->
lo que va a hacer es mandar ese token a las peticiones
-->
del API.
-->
O sea, va a crear esto, va a crear este header, esto,
-->
conforme a lo que ya tuvo cuando inició sesión.
-->
Entonces, ese token es el que se va propagando en todas las
-->
peticiones.
-->
Lo único que hace esa función es recuperar del local
-->
storage el user session.
-->
Si existe o si está seteado, crea el token.
-->
O sea, crea este JSON, este de acá.
-->
Si te fijas, aquà está la palabra enduro,
-->
autorization, la palabra enduro, viewer, espacio, esto.
-->
Y el token.
-->
Ese token vive en el objeto user session.token,
-->
que este es lo que devuelve la aplicación, el backend.
-->
Con eso, ya darme esta pinche cadenita de acá.
-->
Y ya puedo hacer la petición con access o con el
-->
que sea.
-->
Si te fijas, está muy sencillo esta petición.
-->
Ahà está y la devuelve.
-->
Ya, eso es lo que hacen los servicios.
-->
Este se llama por eso la capa service.
-->
Y se conecta a la API de user service.
-->
Entonces, ahà está.
-->
Lo mismo hacen todos los demás, mira.
-->
Igualito.
-->
Pedir y secar la sesión.
-->
Y el logout también lo pusimos aquÃ,
-->
aunque realmente este no es un service.
-->
Esto realmente debió haber estado internamente en el
-->
puro front-end.
-->
¿Qué hace esto?
-->
No hay un endpoint de cerrar sesión.
-->
Lo único que hace es remover el local storage el
-->
Y ya lo quito.
-->
Ya a la chingada, ¿no?
-->
Lo quito y demás.
-->
¿Qué mecanismos puedes implementar todavÃa por
-->
fuera?
-->
Si tú te fijas, lo muevo y ya.
-->
Pero si yo no cierro sesión, una persona abusada
-->
se mete a las herramientas de navegación.
-->
Ahà va el cache local storage y cache al token.
-->
Ese token expira.
-->
Un atacante no va a saber cuándo va a expirar, ¿no?
-->
Pero en este caso el nuestro expiro en 24 horas.
-->
Con ese token, güey, un atacante le puede pegar a las
-->
peticiones de un servidor.
-->
Por eso es que estas pendejadas no son tan seguras, ¿no?
-->
Aunque te digan el token, puede pasar eso.
-->
Ahora, no son tan seguras si no la saben manejar.
-->
Un mecanismo para asegurar eso es el blacklist, ¿no?
-->
O lista negra.
-->
Cuando alguien se da cuenta de que un token ya no debe
-->
ser usado porque cambió o porque es otro por la
-->
chingada o porque alguien simplemente te lo diga.
-->
O sea, yo sé de los que cree que debe de existir.
-->
Yo lo manejarÃa asÃ, ¿no?
-->
Un API que maneje los tokens.
-->
Ahà sà puedes generar un mecanismo de expiración.
-->
Bueno, más bien de, ¿cómo decirlo?
-->
SÃ, de caducar un token, por asà decirlo, ¿no?
-->
Entonces, lo que puedes hacer es crear una lista negra,
-->
literal, guardar este pinche token y una condicional
-->
burda de si en las peticiones me llega este
-->
token, mándalo en la chingada.
-->
Esto lo estarÃamos guardando en lo que se llama una lista
-->
negra, ¿no?
-->
Tokens quemados, ahà está.
-->
Esos cabrones ya no entraron.
-->
Y esa lista a lo mejor un pinche proceso que las
-->
elimine cada 24 horas, que es el proceso que dura mi,
-->
el tiempo que dura mi, ¿cómo se llama?
-->
Mi sesión, ¿no?
-->
24 horas.
-->
Algo interno que borre todo esto para que no se me esté
-->
guardando información ahÃ, este, basura.
-->
O podÃa regresar una base de datos, una tabla nacional.
-->
Bueno, ahà nada más verlo ejecutorio.
-->
Y es eso, asà funcionan los tokens.
-->
Y ya finalmente, la última carpeta importante es la vista,
-->
o sea, donde corre todo, ¿no?
-->
Entonces, ahà tienes el login view,
-->
que son las que definimos en los routers, ¿no?
-->
El login, el registro y el usuario.
-->
El login, este madre, pinta el pinche de formularito
-->
este de acá, asÃ.
-->
Con Beautify, la chingada.
-->
Tiene sus validaciones de campus.
-->
Ahà se ve cómo se maneja todo.
-->
Cuando haces login, literal, ese login viene a través de un
-->
pinche método click, ¿s�
-->
Aquà le doy en Iniciar.
-->
Hace un submit.
-->
Ah, bueno, en este caso está respondiendo el submit
-->
del form.
-->
Aquà está.
-->
Se va al login.
-->
Y esta función de login, acá está,
-->
lo que hace es instanciar el user service,
-->
que es el importado de tus servicios.
-->
Aquà está.
-->
Y ya puedo acceder al método login, ¿no?
-->
Al que vimos ahà en el archivo.
-->
Le paso los parámetros.
-->
Cuando hay respuesta, creo el token.
-->
Que fÃjate que esto está ahorita que no estoy viendo.
-->
Creo que, a ver, nada, déjame ver cómo prevale.
-->
Creo que está dos veces, ¿no?
-->
El sitio, el login, aquà en los services, el login.
-->
¿Dónde está el create?
-->
El login, aquà está.
-->
SÃ, mira, aquà lo guardo en el pinche local storage.
-->
Y acá lo guardo como user session.
-->
Y ese user session, ah, es este.
-->
SÃ, esto está mal, ¿eh?
-->
Esto está mal.
-->
Esto lo se ocupa.
-->
Para mÃ, verga.
-->
El que se ocupa es el user session, que se crea acá.
-->
Y acá lo consume.
-->
Esto.
-->
Esto estaba de más.
-->
Ahà está.
-->
OK, bueno, también lo que podÃamos hacer es quitarlo de
-->
aquÃ, dejárselo acá, que creo que serÃa mejor.
-->
Nada más que aquà le tendrÃamos que cambiar a que se
-->
llame user session.
-->
Ajá, y ya.
-->
Vamos a quitar esta lÃnea y cambiarla de lugar.
-->
Y lo que sà va a hacer es la redirección.
-->
Ahà login, redireccionámenlo a la vista de users,
-->
que es cuando carga el flujo del data table y demás.
-->
Y ya.
-->
Eso es lo que hace este formulario.
-->
El otro es justamente el de user view,
-->
que es al redireccionar el login.
-->
Y aquà está el formulario del data table, ¿no?
-->
Te pone una data table, un cabezados,
-->
la iteración del pinche de la lista de que devuelve el
-->
back.
-->
Aquà está el servidor.
-->
El servidor, digo, el endpoint.
-->
Ese pinche servicio carga cuando el componente es
-->
montado.
-->
O sea, carga cuando la página empieza a cargar.
-->
Ahà en ese momento, cuando ya se montó el componente,
-->
lo voy a llenar con lo que trae el users, ¿no?
-->
El endpoint de los usuarios, de todos los usuarios,
-->
la lista de todos los usuarios.
-->
Como tal, no es un evento que se registre en un,
-->
no es una función que se registre en un click de algo.
-->
O que yo le diga click, cargar tabla, ¿no?
-->
No.
-->
Carga en automático.
-->
Aquà está.
-->
Y ahà está todo, nosotros, pues, para editar,
-->
agregar el crud.
-->
O sea, este es el crud.
-->
Y esos peticiones con el service.
-->
O sea, que aquà tienes que tener en un import,
-->
en tus métodos, el pinche user service, ¿no?
-->
Que por ahà está.
-->
Aquà está el user service, el import.
-->
Todo en el tag de scripts.
-->
Y es lo que hace el pinche front.
-->
SÃ, este.
-->
Y, bueno, el otro componente, el de registro,
-->
también está llamándose desde la vista de usuarios.
-->
Si te fijas, una cosa es login.
-->
Cuando inicio sesión por medio del submit del formulario.
-->
Este, este que es el users, no, este no es.
-->
Todo esto es en el login.
-->
O sea, en el login, yo le puedo decir este,
-->
iniciar sesión.
-->
Y me hace el submit del formulario de iniciar sesión
-->
de este.
-->
O puedo presionar click en el botón registrarse.
-->
Que es este, este de acá.
-->
Y lo que hace es registrarse.
-->
Aquà te dice que está mapeado, mapeado con el click,
-->
con el función register.
-->
Y esa función lo que hace es un window open.
-->
AbrÃa una ruta que se llama register en otra pestaña.
-->
Por eso, por eso se lo puse asÃ.
-->
Abre esto, haz esto.
-->
Ahà carga el componente, obviamente,
-->
pero no está arriba.
-->
Y ya, el componente de registro y al último es este.
-->
Y es un, igual un formulario.
-->
Nombre, email, password.
-->
Cuando tú le das en enviar el submit,
-->
igual manda a llamar un, este, a un fetch, a un usuario.
-->
Al verdad, digo al servicio de registro.
-->
Este no lleva token, no lleva ni madres, nada más.
-->
Paso la data que me mandaron y ya.
-->
Ahà está.
-->
Y ya, güey, esa es la función,
-->
los dos repositorios, el front y el back.
-->
No sé si tengas alguna duda.
-->
Ahà quedó.
-->
Ahà te respondà los dos, no?
-->
Tokens y versiones, va.
-->
Entonces, ¿qué más?
-->
Pues, ponte chido.
-->
Te digo, yo no creo que te pregunten de esto,
-->
pero, pues, ya llevas más ideas, ¿no?
-->
Oye, que, a ver, pruébalo aquÃ, ¿no?
-->
No, espérate.
-->
Pues, yo lo instalé en una máquina con una máquina
-->
virtual.
-->
Necesito mis imágenes, cómo me voy a conectar por SSH.
-->
Necesito toda esa información, no tengo tiempo.
-->
Correcto, correcto.
-->
Ahà está, güey, pues, ya.
-->
Ahà está, entonces, ya no te van a preguntar de esto.
-->
Pero, bueno, hiciste bien empaparte.
-->
Bueno, güey, pues, rÃfate.
-->
Vale, ahà andamos.
-->
Vale, vale, bye.