JavaScript

Listado Youtube de Laboratorio IV 2023

Javascript

Clase 1 (Abrió: lunes, 14 de agosto de 2023, 18:00)

Clase 01 E-commerce Básico Parte 01

1.1 Comenzamos con el proyecto

https://drive.google.com/file/d/1GUcddhioqnQifqgIV0S6tnbiP-ZuKeeh/view?usp=drive_link

1.2 Cargamos el código html y js

https://drive.google.com/file/d/1ae7FdZFu5nWDVIrN5txULeYzRTVUYbH9/view?usp=drive_link

1.3 Avanzamos con css y js

https://drive.google.com/file/d/15tKd8lsVtems-omxHe8vwrXQYV6F62Fc/view?usp=drive_link

1.4 Mostrando detalles finales

https://drive.google.com/file/d/1O1g110kBpUXDXRQmuJJzYCImU3q1Kj5P/view?usp=drive_link

Clase 2 Abrió: (lunes, 28 de agosto de 2023, 18:00)

Clase 02 E-commerce Básico Parte 02

2.1 Código de botón de compra

https://drive.google.com/file/d/1XeMo8D93ink34UTWmLRI2NzN3c0JjIYE/view?usp=drive_link

2.2 Código de carrito

https://drive.google.com/file/d/1pzD00qCXd_7nNPmi_hhzjduQMkvv2b-O/view?usp=drive_link

2.3 Avanzamos con el modal del carrito en el header -> parte 1 y 2 continúa nuestro colaborador

https://drive.google.com/file/d/17dC5N6sBQ8uOgzXx97hEL2NJu7Ay8Jv2/view?usp=drive_link https://drive.google.com/file/d/1s2Q1D1RPNFOEakzOd3lazHRf1tRn0s66/view?usp=drive_link

Clase 3 (Abrió: lunes, 14 de agosto de 2023, 18:00)

Clase 03 E-commerce Básico Parte 03

3.1 Avanzamos en el Body

https://drive.google.com/file/d/1GJ6w7nMIczUQVZT5gaxzK3CP63XMl4Q2/view?usp=drive_link

3.2 Ahora vamos al Footer

https://drive.google.com/file/d/1XoMctsXJNM7uNRo4Bh2CrDgdE05kxcJo/view?usp=drive_link

3.3 Configuramos las cantidades de productos

https://drive.google.com/file/d/1OeIGld_KXEAFQ3hmpghjTsYwMx6Hqv0Z/view?usp=drive_link

3.4 Botones de suma y resta de productos

https://drive.google.com/file/d/188hpNJIi5I_Id42QTTDEEY-4AeVJntf2/view?usp=drive_link

3.5 Calcular el total de la compra

Teclear aquí para VER el video 5

3.6 Eliminar productos del modal -> Parte 1 y 2

https://drive.google.com/file/d/1BbajxakUS6VEpZ5RgQmwxVKVQu80G_nD/view?usp=drive_link https://drive.google.com/file/d/1f3P-FD8oIFt1dYTFrvpwYqtboUf-uQe-/view?usp=drive_link

Clase 4 (Abrió: lunes, 11 de septiembre de 2023, 18:00)

Clase 04 E-commerce Básico Parte 04

https://campus.frsr.utn.edu.ar/moodle/pluginfile.php/94227/mod_lesson/intro/ecommerce-tendencias.jpg

4.1 Contador de productos en el botón del carrito

video 1

4.2 Comenzamos con el método de pago - Parte 1 -> Instalación = npm init ...creamos un json

video 2

Parte 2 -> Creamos el archivo server.js pegar código de Github

video 3

Parte 3 -> Instalación = npm i express cors mercadopago

video 4

Parte 4 -> Integrar mercado pago desde el frontend

video 5

Parte 5 -> Botón de mercado pago

Vídeo 6

Parte 6 -> Ingresar token y public_key

Vídeo 6

Parte 7 -> Probamos los pagos

video 8

Parte 8 -> Cuentas de prueba

video 9

video 10

Clase 5 (Abrió: lunes, 14 de agosto de 2023, 18:00)

Clase 05 Proyecto con stack pern por Daniel Guerrero -> Parte 1

https://campus.frsr.utn.edu.ar/moodle/pluginfile.php/94228/mod_lesson/intro/database-performance-issues-1024x410.jpeg

EL STACK ES -> PERN => PostgreSQL, Express, Node, React

5.1 Introducción al proyecto -> Parte 1 y 2

https://campus.frsr.utn.edu.ar/moodle/pluginfile.php/94228/mod_lesson/intro/Captura%20de%20pantalla%20%28115%29.jpg video 1

video 2

5.2 Instalación de dependencias para producción -> npm init -y

video 3

npm i express cookie-parser cors morgan pg zod md5 jsonwebtoken express-promise-router

5.3 Instalación de dependencias para desarrollo -> npm i nodemon eslint -D

VIDEO 4

5.4 Creación de las carpetas para el backend

video 5

5.5 Creación de la carpeta para la base de datos

Vídeo 6

5.6 Creación del servidor de express

video 7

5.7 Lanzamiento del servidor -> Parte 1 y 2

video 8

video 9

5.8 Añadiendo cosas al servidor -> Parte 1, 2 y 3

video 10

video 11

video 12

Clase 6 (Abrió: lunes, 14 de agosto de 2023, 18:00)

Clase 06 Proyecto con stack pern por Daniel Guerrero -> Parte 2

Continuamos con lo que ya comenzamos en el proyecto con el Stack PERN, agradecemos a Daniel Guerrero por su aporte a la tecnicatura -> se recomienda que hagan este excelente trabajo para crecer en los conocimientos de diferentes tecnologías...

FUNCIONALIDADES CRUD 6.1 Conexión con la base de datos

video 1

6.2 Comenzamos con la conexión de crearTareas -> Parte -> 1 Aseguramos que lo que viene del front o el cliente funcione...

video 2

Parte -> 2 Se crea la base de datos y la tabla => se configura el archivo db.js

video 3

Parte -> 3 Pruebas y manejo de errores

video 4

Parte -> 4 Utilización de Returning => para que devuelva una respuesta

video 5

6.3 Método para listarTareas -> en plural

Vídeo 6

6.4 Método para obtener tarea -> listarTarea => ahora en singular

video 7

6.5 Método eliminarTarea

video 8

6.6 Método actualizarTarea

video 9

Clase 7 (Abrió: lunes, 14 de agosto de 2023, 18:00)

Clase 07 Proyecto con stack pern por Daniel Guerrero -> Parte 3

7.1 Registro -> Archivo auth.routes.js => signup Parte 1 -> Configurando signup

video 1

Parte 2 -> Probando y testeando

video 2

Parte 3 -> Reparando errores

video 3

7.2 Utilización de bcrypt para proteger el password

video 4

7.3 Creación del token -> conectando con el frontend Parte 1

video 5

Parte 2

video 6

7.4 Cookies -> Guardar el token en una cookie

video 7

7.5 Creación de un middleware -> auth.middleware.js Parte 1

video 8

Parte 2

video 9

Parte 3

video 10

Parte 4

video 11

Hay que animarse a hacer este proyecto, vale la pena!!! Profesor Ariel Betancud

Clase 8 (Abrió: lunes, 9 de octubre de 2023, 18:00)

Clase 08 Proyecto con stack pern por Daniel Guerrero -> Parte 4

Hoy terminamos junto a Dani todo lo que tiene que ver con el backend

8.1 Inicio de sesión -> signin

Teclear aquí para VER el video 1

8.2 Cierre de sesión -> signout

Teclear aquí para VER el video 2

8.3 Relacionamos las tareas con el usuario -> Se utiliza el md5 para el avatar

Teclear aquí para VER el video 3

8.4 Configuración frontend -> inicio y creación de rutas

Teclear aquí para VER el video 4

8.5 Formulario de registro

Parte -> 1

Teclear aquí para VER el video 5

Parte -> 2

Teclear aquí para VER el video 6

Culminación de un camino largo de codear y testear, vamos que falta lo último para completar el proyecto. Profesor Ariel Betancud...