bienvenidos

¡LES DAMOS LA
BIENVENIDA!
¿Arrancamos?
RECUERDA PONER A GRABAR
LA CLASE
PRESENTACIÓN DE
ESTUDIANTES
Por encuestas de Zoom:
1. País
2. Conocimientos previos de
Backend
3. ¿Por qué elegiste el curso?
 DESAFÍOS Y ENTREGABLES
Son actividades o ejercicios que se realizan durante la cursada, para enfocarse en
la práctica.

Desafíos genéricos Desafíos entregables

Ayudan a poner en práctica los conceptos y la Relacionados completamente con el Proyecto
teoría vista en clase No deben ser subidos a la Final. Deben ser subidos obligatoriamente a la
plataforma. plataforma hasta 7 días luego de la clase para
que sean corregidos.
 DESAFÍOS Y ENTREGABLES
Son actividades o ejercicios que se realizan durante la cursada, para enfocarse en
la práctica.

Desafíos complementarios Entregas del Proyecto Final

Desafíos que complementan a los entregables. Entregas con el estado de avance de tu proyecto
Son optativos y, de ser subidos a la plataforma a final que deberás subir a la plataforma a lo
tiempo y aprobados, suman puntos para el top largo del curso y hasta 7 días luego de la clase,
10. para ser corregidas por tu docente o tutor/a.
 PROYECTO FINAL
El Proyecto Final se construye a partir de los desafíos que se realizan clase a clase.
Se va creando a medida que el estudiante sube los desafíos entregables a nuestra
plataforma.

El objetivo es que cada estudiante pueda utilizar su Proyecto Final como parte de
su portfolio personal.

El proyecto final se debe subir a la plataforma la ante-última o última clase del

curso. En caso de no hacerlo tendrás 20 días a partir de la finalización del curso
para cargarlo en la plataforma. Pasados esos días el botón de entrega se
inhabilitará.
¿CUÁL ES NUESTRO
PROYECTO FINAL?
 E-commerce backend
Desarrollarás el backend de una aplicación de e-commerce para poder
vender productos de un rubro a elección.
El servidor se basará en un diseño en capas, orientado a MVC y su código
contendrá modernas estructuras de programación del poderoso lenguaje
ECMAScript.
El formato del servidor será un proyecto consistente en una estructura de
archivos, carpetas, configuraciones y base de datos, listas para ejecutarse bajo
el entorno Node.js.
 EJEMPLO

● Market Place by @arunabharjun (

Repositorio en GitHub)
 ¡IMPORTANTE!
Los desafíos y entregas de proyecto se deben cargar hasta siete días
después de finalizada la clase. Te sugerimos llevarlos al día.
Algunas recomendaciones
Este curso tiene un nivel avanzado, lo cual implica un gran desafío.
Queremos que tengas éxito y sobre todo, disfrutes del camino. Por
eso traemos algunas recomendaciones a continuación.
La práctica hace al maestro

A lo largo del curso encontrarás nuevos

conceptos cuya dificultad irá incrementando
gradualmente. Te sugerimos ser constante
con la práctica. Organiza en tu semana
momentos para repasar y practicar los temas
vistos, a fin de corroborar que los hayas
comprendido o anotar aquello que necesites
consultar.
¡Anímate a investigar!

En clase abordaremos los temas necesarios

para que puedas crear un proyecto que
cumpla con los requerimientos planteados en
la consigna. No obstante, sabemos que el
mundo de la programación es inmenso. Te
sugerimos amigarte con la investigación
para encontrar aquello que tu proyecto
necesita. Es una buena práctica para tu
futuro profesional.
Amígate con los after classes

Además de las clases de asistencia obligatoria,

organizaremos after classes para repasar y
profundizar los temas vistos, así como abrir
espacios de consulta. Si bien la asistencia es
optativa, te sugerimos que los tengas presentes
como recurso para mejorar tu experiencia. En
caso de no poder asistir, recuerda que quedarán
grabados.
Más vale pájaro en mano que cien volando

Queremos que logres realizar el mejor

Proyecto Final posible. Por eso es importante
que primero te centres en los requisitos o
piezas mínimas solicitados en la consigna, para
luego apuntar hacia ideas más ambiciosas. Esto
te permitirá alcanzar las metas paso a paso y
superar tus propios límites.
¡Arrancamos!
 Clase 1. Programación Backend

Principios de
programación Backend
 ● Entender la diferencia entre programación
Front end y Back end

OBJETIVOS DE LA ● Comprender las nociones básicas para

programar utilizando Javascript y el
CLASE MERN Stack
 CRONOGRAMA DEL CURSO
Clase 1 Clase 2 Clase 3

Principios de Manejo de Archivos en Servidores Web

programación Javascript:
Backend y Javascript programación sincrónica
y asincrónica
Programación Web
¿Qué es Front end y
Back end?
 Concepto

El Back end y el Front end son dos partes fundamentales de la

programación de una aplicación web. Al Front end se lo conoce
como el lado del cliente y al Back end como el lado del servidor
Lado Front End y Back End
 Back End
● Aplicaciones que viven en el servidor
● A menudo se le denomina “el lado del servidor”.
● Consiste en un servidor, una aplicación y una base de datos.
● Se toman los datos, se procesa la información y se envía al
usuario
Visto de otra manera...
MERN Stack
 Componentes

MongoDB ExpressJS ReactJS NodeJS

 Concepto
El stack MERN utiliza JavaScript como único lenguaje, por ello no
tendremos dificultades al familiarizarnos con cualquiera de estas
tecnologías, las cuales son mongoDB, Express, React y Node.js.
La ventaja que encontramos al utilizar este stack en específico es que
nos permite profundizar en un solo lenguaje de programación,
logrando así enfocar y reforzar nuestros conocimientos y con ello ser
más productivos.
 MongoDB
MongoDB (del inglés humongous, "enorme") es un sistema de base de
datos NoSQL orientado a documentos y de código abierto. Permite
almacenar Big Data gestionando altos volúmenes de información sin
degradar su performance en las búsquedas.
Su diseño brinda alta escalabilidad y disponibilidad.
 ExpressJS
Express.js es un framework para Node.js que sirve para ayudarnos a
crear aplicaciones web en menos tiempo, ya que nos proporciona
funcionalidades como el enrutamiento, opciones para gestionar
sesiones y cookies, entre otras funciones
 ReactJS
Es una librería Javascript de código abierto diseñada para crear
interfaces de usuario con el objetivo de facilitar el desarrollo de
aplicaciones web en una sola página (SPA). Es mantenido por
Facebook y la comunidad de software libre.
 NodeJS
Es un entorno en tiempo de ejecución multiplataforma para la capa
del servidor (pero no limitándose a ello) basado en JavaScript. Es de
código abierto, asíncrono, con E/S de datos en una arquitectura
orientada a eventos y basado en el motor V8 de Google.
Distintas maneras de
probar Javascript
Javascript en el frontend
La Consola Web

Al trabajar en el Front End de una aplicación web, una de las

herramientas que más utilizamos es la Consola Web
 console.log()
Se utiliza para imprimir la salida en la consola. Podemos poner
cualquier tipo de dato dentro del log ().

// console.log() método
console.log('abc');
console.log(1);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3, 4]); // array
console.log({a:1, b:2, c:3}); // objeto
 console.error()
Se utiliza para imprimir mensajes de error en la consola. Resulta útil para
probar código. Por default, el mensaje se resaltará en rojo.

// console.error() método
console.error('Este es un simple
error');
 console.warn()
Se utiliza para imprimir mensajes de advertencia en la consola. Por
default, el mensaje se resaltará en amarillo.

// console.error() método
console.warn('Esta es una
advertencia');
 console.clear()
Se utiliza para limpiar la consola. En el caso de Chrome, aparecerá un
mensaje dando aviso. En el caso de Firefox, no aparecerá nada.

// console.clear() método
console.clear();
Probemos la Consola Web!
Javascript en el backend
La Consola CLI

Al trabajar en el Back End de una aplicación web, una de las herramientas

que más utilizaremos será la Consola CLI
La Consola CLI:
1. Es una interfaz de línea de comandos (Command Line Interface)
2. Permite ejecutar nuestro programa de servidor
3. Muestra información asociada con los logs de los procesos de
backend: son mensajes de debug que enviamos desde nuestro
programa con el objeto console.
4. También muestra advertencias y mensajes informativos
explícitamente generados por Javascript en tiempo de ejecución
dentro del contexto del programa del servidor.
Ejemplo de consolas CLI : Terminal en Visual Studio
Code
 console.log() en Backend
Al igual que en Front End, se utiliza para imprimir un resultado,
contenido de una variable ó mensaje desde nuestro programa de
servidor en la consola CLI.
// console.log() método
console.log('abc');
console.log(1);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3, 4]); // array
console.log({a:1, b:2, c:3}); // objeto
Probemos la Consola CLI!
Tipos de datos en
Javascript
Si no sabemos esto se va a hacer cuesta arriba el curso xD

Variables y tipos de datos

Variable: es un espacio
reservado para almacenar un
dato que puede ser usado o
modificado tantas veces como se
desee.

Tipo de dato: es el atributo que

especifica la clase de dato que
almacena la variable.
 Tipos de datos
● Tipo Primitivos: Incluyen a las cadenas de texto (String), variables
booleanas cuyo valor puede ser true o false (Boolean) y números
(Number). Además hay dos tipos primitivos especiales que son Null
y Undefined. La copia es por valor.

● Tipo Objeto: Incluyen a los objetos (Object), a los arrays (Array) y

funciones. La copia es por referencia.
Javascript y ES6
Es pregunta de
entrevista

EcmaScript 6

ES6 o EcmaScript 2015, fue una enorme revisión que surgió en el año
2015 y trajo -dentro de varias polémicas- enormes avances en el
mundo de la programación JavaScript.
Entre sus mayores innovaciones se encuentra la declaración de
variables con let y const, la introducción de clases al lenguaje, y los
template strings.
Variables en Javascript
Recordemos...
● Una variable es un contenedor dinámico que nos permite
almacenar valores.
● Los valores pueden ser diversos tipos de datos, según la variable.
● Tal como lo indica su nombre, el valor de la variable puede
cambiar, permitiéndonos crear programas que funcionen
independientemente del valor de la variable.
Distintas maneras de crear
variables en Javascript
 Let y const
let y const son dos formas de declarar variables en JavaScript
introducidas en ES6 que limitan el ámbito de la variable al bloque
en que fue declarada (antes de ES6 esto no era así).

Es posible que se encuentren con ejemplos y

código en internet utilizando la palabra
reservada “var” para crear variables. Esta
es la manera en que se hacía antes de ES6, y
no se recomienda su uso!
Ejemplo Let
Aquí la variable i es global y la
variable j es local.

Pero si declaramos una variable

con let dentro un bloque, que a
su vez está dentro de una
función, la variable pertenece
solo a ese bloque.
Ejemplo Let

Fuera del bloque donde se declara

con let, la variable no está
definida.
 Const
Al igual que con let, el ámbito (scope) para una variable declarada
con const es el bloque.
Sin embargo, const además prohíbe la reasignación de valores
(const viene de constant).
Ejemplo Const

Si se intenta reasignar una

constante se obtendrá un error.
 Mutabilidad y const
● Mientras que con let una variable puede ser reasignada, con
const no es posible.
● Si se intenta reasignar una constante se obtendrá un error tipo
TypeError.
● Pero que no se puedan reasignar no significa que sean
inmutables.
● Si el valor de una constante es algo "mutable", como un array o
un objeto, se pueden cambiar los valores internos de sus
elementos.
NO REASIGNABLE ≠ INMUTABLE
Ejemplo Mutabilidad
Por ejemplo, una constante se puede asignar a un objeto con determinadas
propiedades. Aunque la constante no se pueda asignar a un nuevo valor, sí
se puede cambiar el valor de sus propiedades.

Esto sería posible

Esto NO sería posible

Diapositiva agregada

Ejemplo mutación de array u objeto por referencia

Cuando enviamos un array o un objeto por parámetro a una función este se
envía por referencia. Cuando enviamos un dato primitivo se envía el valor.
Datos y Variables
Tiempo aproximado: 5 minutos
 Datos y variables
1) Definir variables variables que almacenen los siguiente datos:
● Un nombre: “pepe”
● Una edad: 25
● Un precio: $99.90
● Los nombres de mis series favoritas: “Dark”, “Mr Robot”, “Castlevania”
● Mis películas favoritas, en donde cada película detalla su nombre, el año de estreno, y
una lista con los nombres de sus protagonistas.
1) Mostrar todos esos valores por consola
2) Incrementar la edad en 1 y volver a mostrarla
3) Agregar una serie a la lista y volver a mostrarla
 ¿YA CONOCES LOS BENEFICIOS
QUE TIENES POR SER
ESTUDIANTE DE CODERHOUSE?
 TE INVITAMOS A QUE
COMPLEMENTES LA CLASE
CON LOS SIGUIENTES
CODERTIPS
VIDEOS Y
PODCASTS
● Aprende Programación Web y construye el futuro de nuestra humanid
ad
| Coderhouse

● Desarrollo freelance | Coderhouse

● Desarrollo profesional | Coderhouse

VIDEOS Y
PODCASTS
● CoderNews | Coderhouse

● Serie de Branding | Coderhouse

● Serie para Emprendedores | Coderhouse

● Serie Aprende a Usar TikTok | Coderhouse

● Serie Finanzas Personales | Coderhouse

● CoderConf | Coderhouse
¿PREGUNT
AS?
 ¡MUCHAS
GRACIAS!
Resumen de lo visto en clase hoy:
- Conceptos de programación en
Javascript
- Novedades de ES6
OPINA Y VALORA ESTA
CLASE
#DEMOCRATIZANDOLAEDUC
ACIÓN