‫Instructor: Ahora finalmente terminemos esta parte de
‫la funcionalidad de inicio de sesión.
‫Y recuerde cómo dije que en
‫este video quería implementar una alerta realmente
‫agradable para cuando el usuario inicia sesión con éxito,
‫y para ver que, por ahora, cierre la
‫sesión del usuario eliminando la cookie manualmente.
‫Recarguemos, y ahora, por supuesto, el
‫usuario ya no debería estar conectado, y
‫de hecho no lo está.
‫Como ya sabemos, eso se debe a que la
‫cookie no se envió en la solicitud.
‫Entonces, hay un middleware registrado que creamos en el
‫último video que no
‫puso el objeto de usuario en respuesta. lugareños, ¿recuerdan
‫eso?
‫Entonces, si no está allí, el manual del usuario no se procesará
‫y, en su lugar, esta parte se procesará para
‫que podamos hacer clic aquí en Iniciar sesión.
‫Entonces, esa alerta de la que estaba hablando antes, quiero
‫que aparezca aquí básicamente al principio y luego,
‫después de un segundo
‫y medio, todavía queremos hacer esa recarga.
‫Pasando a la página de inicio principal.
‫De todos modos, creemos
‫algunas funciones para esta alerta en otro archivo separado.
‫Tan nuevo archivo,
‫alerta. js.
‫Está bien, pero ahora, antes de que podamos seguir adelante,
‫debemos pensar un
‫poco en nuestra arquitectura de front-end aquí.
‫Ahora bien, este curso, por supuesto, no se trata de
‫la interfaz, pero aún así debemos al
‫menos preocuparnos un poco
‫aquí, porque realmente estamos comenzando
‫a obtener una buena cantidad de
‫archivos aquí, e incluyéndolos a todos. en
‫nuestras páginas no es una buena práctica.
‫Así que
‫como lo hemos estado haciendo aquí.
‫Entonces esta no es una buena práctica.
‫Solo deberíamos tener un archivo grande de
‫JavaScript que incluya todo el código.
‫Entonces, en el desarrollo moderno de front-end
‫de JavaScript, generalmente usamos algo llamado paquete de módulos.
‫El más popular probablemente sigue siendo Webpack, pero
‫normalmente Webpack nos da muchos problemas
‫y es realmente complicado configurarlo.
‫Así que en realidad hay un chico nuevo muy agradable en la cuadra,
‫por así decirlo, que se llama Parcel.
‫Así que echaremos un vistazo a eso, veremos si ya aparece, y de
‫hecho, ese es el indicado.
‫Paquete de aplicaciones web ultrarrápido y sin configuración.
‫Entonces eso es exactamente lo que estamos buscando.
‫Simplemente un paquete que no requiere
‫configuraciones complejas, porque no queremos perder
‫el tiempo con eso.
‫Muy bien, sigamos adelante e instálelo aquí.
‫Entonces npm install y
‫no estoy seguro de si es solo Parcel en realidad.
‫Así
‫que volvamos aquí.
‫Probablemente sea Parcel. js o algo
‫así, porque recuerdo que la última vez que
‫lo instalé no funcionó de inmediato, así que verifiquemos eso.
‫Sí, de hecho, es un paquete de paquetes.
‫Ahora tenemos algún error.
‫De acuerdo, me olvidé de guardarlo como una dependencia de desarrollo.
‫Así que lo queremos como un desarrollador guardado, de acuerdo, y
‫eso es porque es una herramienta de desarrollo.
‫Ahora todavía algo salió mal.
‫Déjame probarlo con sudo aquí.
‫Entonces, si no funcionó en
‫su caso, simplemente use sudo para obtener los permisos adecuados.
‫Muy bien, echemos un vistazo a nuestro paquete. json
‫y, de hecho, aquí está, de acuerdo.
‫Ahora bien, si está
‫viendo este video algún tiempo después de que
‫lo grabé, es posible que ya hayan pasado a la
‫versión número dos y eso, como
‫ya sabemos, podría introducir algunos cambios importantes.
‫Y así, a partir de este punto, si obtiene algún error
‫que no vio aquí en
‫el video, continúe e instale este paquete aquí usando
‫la versión. 1,
‫está bien.
‫Básicamente,
‫agrega uno como este, está bien.
‫Entonces, esto le anuncia que se encuentra con estos errores extraños
‫y, con suerte, también me ahorra
‫toneladas de comentarios negativos o
‫críticas negativas que esperan que actualice todos mis videos cada dos semanas
‫solo porque alguna herramienta se actualiza y, por supuesto,
‫eso no es posible.
‫Muchas veces, la solución más
‫fácil es simplemente que uses la misma
‫versión que yo estoy usando en el video, de acuerdo.
‫De todos modos, ahora para usar Parcel,
‫agreguemos algunos scripts aquí.
‫Así que estoy agregando uno para mirar o JavaScript.
‫De acuerdo, y para
‫eso utilizo el comando Parcel watch.
‫En realidad, esto ya funcionaría bien desde el primer
‫momento, pero aún quiero configurar un poco,
‫porque de lo contrario, me pondrá el paquete final
‫en algunas carpetas que no quiero.
‫Así que especifiquemos qué carpeta realmente debería ver.
‫Entonces eso es público / JavaScript y luego index. js, ese es nuestro punto de entrada
‫y ese es
‫el archivo que crearemos en un segundo.
‫Bueno.
‫Entonces el directorio de salida también debería
‫ser público. js,
‫está bien.
‫Muchas veces tendrás diferentes
‫carpetas para el desarrollo y para la salida,
‫pero en este caso, dado que es una arquitectura muy
‫simple, colocaré el archivo del paquete en el mismo
‫lugar que los archivos de desarrollo.
‫Muy bien, también especifiquemos el archivo de salida
‫y, por
‫lo tanto, debería ser un paquete. js, está bien.
‫Entonces ahora puedo ejecutar esto y luego echará un
‫vistazo a este archivo aquí y verá si algo cambia
‫o en una de las
‫dependencias y, cuando
‫eso suceda, volverá a agrupar todos
‫los archivos en este paquete. js archivo, de acuerdo.
‫Entonces también
‫dupliquemos esto, porque también queremos una versión
‫final, digamos de producción, está bien.
‫Así que en este vamos a ejecutar algunos en
‫los que realmente estén terminados, está bien.
‫Eso lleva un poco más de tiempo, pero
‫también hace un poco más de optimización, pero eso, por supuesto,
‫no lo necesitamos para el desarrollo.
‫En desarrollo, como siempre, solo queremos que funcione.
‫Así que hagamos npm
‫run watch: js, pero antes de hacerlo, creemos el
‫índice. js.
‫Cerremos algunas de estas carpetas aquí.
‫Es un poco confuso así.
‫Entonces index. js y hagamos una simple
‫consola. inicie sesión aquí por ahora.
‫Hola de Parcel, está
‫bien.
‫Luego, vayamos también a nuestra
‫base aquí y luego comentaremos todos estos y solo
‫incluiremos el
‫archivo del paquete.
‫Entonces, nuevamente, un archivo que básicamente contendrá todo el código que
‫está en todos los demás archivos
‫y todas sus dependencias.
‫Así que vamos a guardarlo, y ahora ejecutemos esto, veamos qué
‫obtenemos allí.
‫Y de hecho, obtuvimos nuestro nuevo archivo, que es paquete. js y ya
‫tiene todo este montón de código, está bien,
‫simplemente para esta línea de código en este punto.
‫Pero de todos modos recarguemos nuestra página
‫aquí, y hola desde Parcel.
‫Así que funcionó, y ahora sigamos adelante y
‫configuremos este archivo aquí.
‫Entonces, para evitar confusiones, cerremos estos archivos que
‫ya no necesitamos para lo que
‫estamos haciendo ahora.
‫Eso es un montón de cosas.
‫De acuerdo, este tampoco.
‫Así que ahora la idea es básicamente que este index. js es nuestro archivo
‫de entrada, por lo que en
‫este no podemos obtener datos de la
‫interfaz de usuario y luego delegamos acciones a
‫algunas funciones que provienen de estos otros módulos aquí básicamente.
‫Así que ahora tenemos el módulo de inicio
‫de sesión, tenemos nuestro módulo de alertas, y
‫así como en Node. js,
‫ahora podemos exportar datos de estos módulos.
‫Así que hagamos eso, y lo que quiero
‫exportar es esta función aquí.
‫Ahora funciona un poco diferente a
‫como funciona con Node. js
‫porque Node. js usa algo
‫llamado CommonJS para implementar módulos.
‫No estoy seguro
‫si mencioné eso cuando hablamos
‫por primera vez sobre los módulos, pero aquí, en JavaScript front-end desde ES2015
‫o ES6, también hay algo llamado módulos en JavaScript.
‫La sintaxis es un
‫poco diferente, pero en realidad la forma en
‫que funciona detrás de escena, pero en realidad si comprende
‫cómo funciona con CommonJS, esta será muy similar.
‫Entonces, los módulos ES6 usan la sintaxis de importación de exportación.
‫Así que aquí todo lo que tenemos que hacer es decir
‫exportar y luego lo que queramos exportar de este archivo,
‫y eso es todo.
‫Ahora, este fragmento de código aquí lo usaremos
‫en el archivo de índice.
‫Entonces, recuerde cómo dije que este archivo aquí
‫es más para obtener datos de la interfaz de usuario
‫y luego delegar la acción.
‫Así que eso es exactamente lo que estamos haciendo aquí, está bien.
‫Entonces, aquí solo tenemos este tipo de módulo que
‫luego exporta la función de inicio de sesión.
‫Luego podemos importar eso aquí y llamar al inicio
‫de sesión aquí mismo en index. js y
‫eso funciona así.
‫Por lo tanto, importe en lugar
‫de requerir el nombre de la variable que queremos importar.
‫Entonces estoy usando llaves aquí.
‫Entonces se llama inicio
‫de sesión y luego del nombre del archivo.
‫Que en este caso, mismo directorio, inicie sesión.
‫Ahora también deshabilitemos eslint aquí nuevamente, y usé estas
‫llaves aquí, básicamente porque estamos haciendo la
‫exportación de esta manera, pero también hay algo
‫similar a module. export, que es
‫una especie de exportación predeterminada.
‫Entonces, en los módulos ES6, en realidad se llama exportación predeterminada.
‫Entonces, en ese caso, no necesitaríamos estas llaves.
‫Bueno.
‫En este momento tenemos que hacerlo así,
‫porque bueno, ese es el nombre de esta función
‫que exportamos, de acuerdo.
‫Ahora, algo realmente importante también en este inicio de sesión es
‫que usamos axios.
‫Y recuerda cómo dije que íbamos a
‫instalarlo en realidad desde npm como un módulo npm, ¿verdad?
‫Así que hagámoslo ahora, y de hecho porque
‫ya comentamos axios desde aquí.
‫Entonces, ahora mismo, el inicio de sesión no puede usar axios.
‫Bueno, porque ya no lo incluimos aquí.
‫Así que vamos a agregar, abrir una nueva
‫terminal e instalar axios en nuestro proyecto.
‫Entonces ahora todo lo que tenemos que hacer es decir importar axios de
‫axios, y eso es todo,
‫está bien.
‫Así que este archivo, al menos por ahora, está
‫listo, pero no lo cerremos porque todavía
‫lo necesitaremos muy pronto.
‫A continuación, también deberíamos instalar un polyfill, que hará que
‫algunas de las características más nuevas
‫de JavaScript funcionen también en navegadores más antiguos.
‫Así que digamos que npm install y este
‫de aquí parece un poco extraño.
‫Así que agreguemos babel / polyfill,
‫así.
‫Entonces aquí arriba
‫haremos
‫la importación así, de acuerdo.
‫Así que este de aquí no lo guardamos en ninguna variable,
‫porque no es necesario en absoluto.
‫Todo lo que queremos que haga es que se incluya
‫básicamente en nuestro paquete final para rellenar bien
‫algunas de las características de JavaScript.
‫Muy bien, y esa es también la razón por la que
‫está aquí en la primera línea de estas importaciones.
‫De todos modos, ahora importemos este mapbox también.
‫Para eso, primero necesitamos crear
‫una función que hará todas estas cosas aquí.
‫Bueno.
‫Así que creemos
‫export
‫displayMap, que incluirá el conjunto de ubicaciones.
‫Entonces eso realmente se leerá en el índice. js archivo, de
‫acuerdo.
‫Así que de nuevo index. js es más para obtener datos
‫de la interfaz de usuario, por lo tanto,
‫del sitio web, y luego delegar algunas acciones en estos otros módulos,
‫de acuerdo.
‫Por lo tanto, estas cosas aquí se harán dentro de index.
‫Hagámoslo aquí arriba.
‫Luego importe displayMap mapbox,
‫de acuerdo.
‫Así que llamémoslo
‫también con las ubicaciones.
‫Ahora, ¿recuerdas cuando realmente creamos este mapa y recuerdas
‫cómo nos preguntó si queríamos usar la
‫biblioteca mapbox en npm?
‫Así que ahora podríamos seguir adelante y
‫usar ese en lugar de este que estamos usando ahora.
‫Bueno, no está
‫aquí.
‫Sí, entonces este.
‫Así que esta es la biblioteca de mapbox
‫que estamos usando actualmente, pero nuevamente
‫también hay una versión npm.
‫Entonces no necesitaríamos tener este.
‫Sin embargo, por alguna razón, hay un
‫problema con el uso de esta biblioteca junto con Parcel, está bien.
‫Entonces, otras personas realmente se encuentran con este problema.
‫Por lo tanto, no podemos usar la biblioteca mapbox
‫npm junto con Parcel.
‫Así que esa es una razón por la que sigo haciéndolo así.
‫Bueno.
‫Entonces mapbox se completa con esto.
‫Esto tampoco lo necesitamos más.
‫Ahora, eliminemos algunos de estos errores
‫que vimos aquí.
‫Bueno, ahora ya no
‫están aquí, pero por ejemplo, tuvimos el
‫problema de que este código aquí
‫creaba algunos errores cuando estábamos en páginas que no tenían este mapa aquí, ¿verdad?
‫Porque, por supuesto, en la página de detalles tiene este mapa, por
‫lo que este elemento, pero luego este código, por supuesto, se
‫ejecuta en todas las
‫demás páginas, lo que generará errores allí.
‫Así que arreglemos eso.
‫Entonces, lo que estoy haciendo aquí es primero crear
‫un elemento con esto y luego probar si realmente existe antes
‫de ejecutar esta línea de código.
‫Entonces crearemos algunos elementos DOM aquí.
‫Y
‫aquí diría delegación.
‫Entonces, si mapbox
‫y solo entonces a estas dos acciones aquí,
‫está bien.
‫Aquí también está mapbox y
‫eso es mucho mejor.
‫Aquí también pongamos
‫valores, y voy a
‫poner estos dos porque en realidad podríamos necesitarlos
‫o en realidad los necesitaremos para otras cosas también.
‫Así que de esta manera es un poco más limpio.
‫También agreguemos este detector de
‫eventos aquí si este elemento existe, ¿verdad?
‫Porque bueno, nuevamente, creará un error si no lo hace.
‫Así que loginform,
‫y
‫si
‫y luego vamos a reutilizarlo aquí, guardarlo, y
‫ahora se ve mejor.
‫Bueno.
‫De hecho, vamos a cerrar esta terminal.
‫Debería seguir agrupando nuestro código cada vez
‫que se guarde.
‫Guardémoslo aquí de nuevo.
‫Bien, espero que eso haya cambiado ahora.
‫Así que sigamos adelante y probemos eso.
‫Entonces, si aún puede iniciar sesión en este
‫punto, eso significa que realmente funcionó.
‫Bueno, tal vez no.
‫Intentémoslo de nuevo aquí.
‫Muy bien, algo anda mal aquí.
‫Entonces, como siempre, registremos este correo electrónico y contraseña
‫en la consola aquí.
‫Quiero decir, porque ya sabemos que
‫en realidad esta función aquí se llama, correcto.
‫De lo contrario, ni siquiera obtendríamos el error.
‫Correcto, porque ese error claramente proviene de nuestra API.
‫Creo que todo lo que tenemos aquí está funcionando.
‫Echemos un vistazo a la consola.
‫Entonces parece que en realidad no hay nombre de
‫usuario ni contraseña.
‫Bueno.
‫No estoy seguro de por qué es eso.
‫Echemos un vistazo si realmente obtenemos algo.
‫Así que inicie
‫sesión y también los
‫registraré aquí, no aquí, sino aquí.
‫Y entonces, aparentemente, el problema
‫debe ser que el nombre de usuario y
‫la contraseña no están realmente definidos.
‫Ah, y ahora, por supuesto, puedo ver por qué es así.
‫Qué error más estúpido.
‫Así que estamos tratando de leer estos valores
‫aquí, justo al principio cuando se carga
‫la página y, por supuesto, en este punto estos valores no están definidos.
‫Entonces, por supuesto, solo podemos
‫definirlos aquí en nuestro detector de eventos, ¿verdad?
‫Entonces, para cuando se llame a esta función,
‫entonces, por supuesto, el correo electrónico y la contraseña están configurados,
‫por lo que es el momento en que podemos leerlos.
‫Así que eso fue un poco estúpido,
‫pero, ya sabes, a veces suceden ese tipo de cosas.
‫Ahora copiemos esto aquí.
‫Esta vez iniciamos sesión correctamente, lo
‫que significa que nuestro código aquí todavía funciona.
‫Genial, así que ahora hagamos la parte final que
‫queríamos hacer en esta
‫conferencia, que en realidad es crear estas alertas, de acuerdo.
‫Así que creemos una función llamada show alert y exportémosla.
‫Entonces, al iniciar sesión, importaremos esta función y la
‫usaremos allí.
‫Entonces, showAlert y esto
‫como entrada obtendrán un tipo y un mensaje,
‫así como esto.
‫Y este tipo
‫es éxito o
‫error, está
‫bien.
‫Porque dependiendo de esta entrada tendremos CSS diferente
‫para cada una de estas alertas y lo
‫verá en un segundo.
‫Entonces, lo que vamos a hacer es básicamente crear
‫un marcado HTML aquí y luego insertarlo en nuestro HTML, por lo que
‫es algo realmente fácil.
‫Así que un marcado y la cadena de plantilla
‫y ahora un buen HTML.
‫Entonces, es simplemente un div con una clase de
‫alerta y luego alerta,
‫por lo que es un modificador con nuestro
‫tipo.
‫Está bien, y por eso
‫debe ser un éxito o un error.
‫Permítanme mostrar eso rápidamente en
‫CSS, porque creo que es muy importante saber
‫realmente cómo funciona todo esto en conjunto, de acuerdo.
‫Así que aquí tenemos nuestra clase
‫de alerta y luego alerta de éxito y alerta de error.
‫Está bien.
‫Como siempre, deshabilitemos eslint aquí, está bien, y
‫eliminemos esto y ahora, por supuesto,
‫aquí va el mensaje que pasamos a
‫esta función.
‫Por supuesto, podríamos seguir adelante
‫y usar esto en toda la aplicación, pero
‫en este caso solo lo necesitamos aquí para nuestro inicio de sesión.
‫Así que documente. queryselector, por lo
‫que ahora aquí seleccionamos el
‫elemento donde queremos incluir este HTML que acabamos de crear.
‫Así que, en realidad, está justo al
‫principio del elemento del cuerpo.
‫Así que en la parte superior de la página.
‫Así que
‫body, y luego inserte HTML adyacente, así que este de aquí.
‫Si tomó mi curso completo de JavaScript,
‫todo esto aquí no será nada nuevo para usted,
‫está bien.
‫Entonces aquí podemos especificar un par de palabras clave,
‫y en este caso queremos afterbegin.
‫Entonces, básicamente, lo que esto
‫significa es dentro del cuerpo, pero desde el principio, está bien.
‫Luego el HTML, entonces
‫el marcado, que realmente queremos incluir.
‫Excelente.
‫Entonces, esto creará una alerta muy simple
‫basada en el tipo y el método, pero ahora también queremos
‫una función para ocultar alertas.
‫Así que creémoslo aquí también, exportémoslo, y probablemente ni
‫siquiera lo necesitemos fuera de aquí, pero
‫aún así, para poder reutilizarlo, siempre es una buena idea
‫exportar todo esto.
‫Éste no necesita aceptar ningún argumento.
‫Así que ahora todo lo que vamos a hacer
‫es seleccionar el elemento con
‫la clase de alerta y luego eliminarlo.
‫Entonces alerta de
‫queryselector.
‫Así que exactamente el mismo nombre de clase que aquí.
‫Luego, debemos usar un truco de JavaScript
‫en el que debemos mover un nivel hasta el elemento
‫principal y luego, desde allí, eliminar un elemento secundario.
‫Entonces, si hay un elemento, entonces
‫element. parentElement. removeChild
‫y luego el elemento.
‫Bueno.
‫De nuevo, eso debería ser solo JavaScript básico
‫o manipulación DOM básica.
‫Entonces, dado que este es un
‫curso de nodo, no voy a profundizar en eso.
‫De todos modos, lo que quiero hacer aquí
‫ahora es que cada vez que
‫mostramos una alerta, primero ocultemos todas las alertas que ya existen.
‫Así que siempre solo
‫para asegurarnos de ejecutar hideAlert.
‫Luego, finalmente, también siempre quiero ocultar todas las alertas después
‫de cinco segundos.
‫Entonces, window setTimeout
‫hideAlert
‫después de
‫cinco segundos.
‫Muy bien, y ahora importémoslo aquí.
‫Mostrar alerta de que se llamó, ¿verdad?
‫Oh showAlert, con tipo y mensaje.
‫Así que
‫showAlert
‫desde la derecha de eso y así ...
‫Sí, entonces queremos usar eso en este lugar.
‫Entonces, en lugar de la alerta de JavaScript,
‫queremos hacer showAlert, está bien, y
‫aquí lo mismo.
‫Todavía necesitamos especificar el tipo
‫aquí, por
‫lo que es un éxito en este
‫caso y aquí es un error.
‫Llegamos a la finalización automática.
‫Está bien, eso está mejor.
‫Así que probémoslo.
‫Y, en primer lugar, debemos cerrar la sesión eliminando esta cookie.
‫Vuelva a cargar, inicie sesión
‫y ahora
‫lo estoy probando primero con una contraseña
‫incorrecta y aquí vamos.
‫Entonces, correo electrónico o contraseña incorrectos en nuestra bonita alerta y
‫vieron que después de cinco segundos desaparecieron.
‫Por supuesto, podríamos haber
‫puesto una buena animación allí y
‫todo, pero creo que así ya es más que suficiente.
‫Así que veamos eso de
‫nuevo rápidamente, y así se verá, pero
‫cuando sea correcto, entonces, por supuesto, debería ser verde.
‫Así que sí, inicié sesión correctamente y vemos
‫una recarga después de un segundo y medio,
‫así que ahora realmente está funcionando.
‫Esa es nuestra autenticación completa en el front-end.
‫Eso fue mucho trabajo, pero si me preguntas, valió la pena.
‫Ahora, lo único que falta es
‫cerrar la sesión cuando hacemos clic en este botón aquí.
‫Así que en este momento ese
‫no es el caso y, en el siguiente video, solucionaremos eso.