8 de julio 2pm

Guía práctica de GIT y Bitbucket

Imitando lo que viste en el reciente tutorial, realiza los pasos a continuación.  

Recuerda que, para comprobar cuánto has aprendido, al final del curso otros
participantes medirán tu avance en estas prácticas. 

1. Instala Git en tu ambiente de desarrollo. 

2. Crea una cuenta gratuita en Bitbucket. 
3. Crea un repositorio en Bitbucket para utilizarlo en las sucesivas prácticas del
curso. 
4. Crea un repositorio en tu ambiente de desarrollo y vincúlalo al repositorio
de Bitbucket. 
5. Como paso final, crea un archivo del estilo README (sólo texto) y súbelo, via línea
de comandos, al repositorio de Bitbucket creado previamente. 

Guía práctica de Setup Proyecto

Imitando lo que viste en el reciente tutorial, realiza los pasos a continuación.  

Recuerda que, para comprobar cuánto has aprendido, al final del curso otros
participantes medirán tu avance en estas prácticas. 

1. Instala Nodejs. 
2. Instala express y express generator. 
3. Crea un proyecto de red de bicicletas utilizando express generator y utilizando
el view engine pug. 
4. Levanta el servidor en el puerto default (3000), o configúralo si corresponde, y
asegúrate de ver el mensaje de bienvenida a Express. 
5. Vincula tu proyecto con el repositorio de Bitbucket creado previamente. 
6. Haz un commit con el mensaje de setup del proyecto.
Guía práctica de Configurar template HTML

Imitando lo que viste en el reciente tutorial, realiza los pasos a continuación.  

Recuerda que, para comprobar cuánto has aprendido, al final del curso otros
participantes medirán tu avance en estas prácticas. 

1. Visita el sitio Boostrap Themes: https://startbootstrap.com/themes/

2. Descarga grayscale ( https://startbootstrap.com/themes/grayscale/ )
u otro template que te guste. 
3. Configura en tu proyecto creado en la práctica anterior. 
4. Utiliza el sitio https://html-to-pug.com/ para pasar del html al pug. Puedes usar otra
herramienta similar, si te resulta más cómodo. 
5. Levanta el servidor y revisa que se vea correctamente, comparándolo con la
versión original. 
6. Realiza un commit con los cambios realizados. 

Guía práctica de Agregar Mapa

Imitando lo que viste en el reciente tutorial, realiza los pasos a continuación.  

Recuerda que, para comprobar cuánto has aprendido, al final del curso otros
participantes medirán tu avance en estas prácticas. 

1. Visita el sitio de Leaflet y revisa su documentación. 

2. Agrega un mapa y céntralo en tu ciudad. 
3. Carga algunos marcadores indicando alguna ubicación que reconozcas
fácilmente. 
4. Realiza un commit con los cambios realizados. 

Guía práctica de MVC Bicicletas

Imitando lo que viste en el reciente tutorial, realiza los pasos a continuación.  

Recuerda que, para comprobar cuánto has aprendido, al final del curso otros
participantes medirán tu avance en estas prácticas. 

1. Utilizando npm, instala nodemon como dependencia de desarrollo. 

2. Crea un script npm en el archivo package.json, debajo del “start”, que se llame
“devstart” y levante el servidor utilizando npdemon. 
3. Crea el modelo de bicicleta con los atributos que mostramos en el tutorial. 
4. Crea los métodos de bicicleta tal como lo mostramos en el tutorial. 
5. Agrega un par de bicicletas a la colección que conoce la bicicleta en memoria, con
las ubicaciones cercanas al centro del mapa que agregaste previamente (de esta
forma, te simplifica la revisión de la carga). 
6. Crea el controller web de las bicicletas. 
7. Crea el router de las bicicletas. 
8. Crea los métodos de listado, creación, eliminación y actualización de las
bicicletas via web. 
9. Revisa el proceso entero de listado, carga y demás operaciones realizadas. 
10. Realiza un commit con los cambios realizados. 

Guía práctica de API Bicicletas

Imitando lo que viste en el reciente tutorial, realiza los pasos a continuación.  

Recuerda que, para comprobar cuánto has aprendido, al final del curso otros
participantes medirán tu avance en estas prácticas. 

1. Crea una carpeta para guardar las API dentro de controller y otra carpeta dentro

de router. 
2. Crea el controller de bicicleta para manejar tu API de creación, actualización,
listado y eliminación. 
3. Crea las rutas de bicicleta para tu API de creación, actualización, listado y
eliminación. 
4. Crea los métodos en el controller de listado, creación, actualización, listado y
eliminación. 
5. Instala Postman para testear tu API (https://www.getpostman.com). 
6. Revisa cada endpoint de tu API utilizando Postman. 
7. Realiza un commit con los cambios realizados. 

 
Vamos a empezar a trabajar con Node.js. 
Lo primero que quiero mostrarles es el sitio oficial de Node.js y apenas entran 
van a poder directamente descargar la versión de acuerdo a su sistema operativo. 
Yo estoy usando una Mac, un 
sistema operativo macOS y you directamente me sugiere la descarga a estas versiones. 
En el caso de Mac, también pueden usar Homebrew y lo pueden instalar desde ahí 
también, desde la consola. 
Cualquiera de las dos formas va a dar el mismo resultado, 
no hay ninguna mejor que otra. 
Aprovecho para mostrarles este sitio, tenemos diferentes secciones de About, 
que es este pequeño ejemplo, que es el que vamos a hacer ahora de Hello World!, 
el Hola mundo!, vamos a descargar el Hola mundo! 
que es para probar rápidamente esta herramienta.

Play video starting at 1 minute 7 seconds and follow transcript1:07

Tenés la documentación. 
Hay mucha info que está en español,

Play video starting at 1 minute 13 seconds and follow transcript1:13

algunas otras va a estar en inglés obviamente. 
Y fijate que tenés, siguiendo la nota teórica anterior, 
las APIs que nos permite utilizar Node.js Esta 
es otra forma que tenés para explorar cómo están implementadas algunas APIs

Play video starting at 1 minute 32 seconds and follow transcript1:32

además de las del ejemplo que te mencionaba, no.

Play video starting at 1 minute 39 seconds and follow transcript1:39

Bueno, comencemos rápidamente. 
Esto después lo podes ver vos por tu propia cuenta.

Play video starting at 1 minute 45 seconds and follow transcript1:45

Comencemos a hacer nuestro ejercicio

Play video starting at 1 minute 49 seconds and follow transcript1:49

inicial para ver cómo utilizamos esto de Node, no. 
Una vez que lo terminaron de instalar, esto yo lo tengo, 
hacen NODE -V, y acá tienen la versión 11.1 que es la última. 
Y lo primero que voy a hacer es me paré una carpeta de ejemplo. 
Todavía no vamos a usar Git ni nada de eso, 
eso va a venir cuando comencemos el proyecto en muy poco tiempo. 
Vamos a crear un archivo que se va a llamar APP.JS. 
Lo voy a abrir con el editor Sublime.

Play video starting at 2 minutes 23 seconds and follow transcript2:23

Podés usar Sublime o cualquier otro editor de texto que 
te facilite lo que es la programación. 
Sublime es uno, después tenés otros que son pagos. 
Algunos son muy buenos. 
Podés elegir el que más te guste. 
Sublime está muy bueno, después pagos tener 
las herramientas de JetBrains y unas tantas otras, 
WebStorm, en concreto es el producto para trabajar con JavaScript. 
Podés usar el Visual Studio. 
En fin, elegí la que más te convenga. 
Probá algunas antes. 
Pero con Sublime, para lo que vamos a hacer, está bastante bien.

Play video starting at 2 minutes 58 seconds and follow transcript2:58

Vamos a empezar a hacer el ejercicio inicial. 
Como te decía antes, el Hello World! 
y aquí lo que vamos a hacer primero, vamos a aprovechar para repasar la sintaxis,

Play video starting at 3 minutes 12 seconds and follow transcript3:12

es incorporar un módulo, que es el módulo HTTP. 
La incorporación de módulos la hacemos con el método require y entre 
paréntesis le pasamos el nombre del módulo, en este caso, http. 
Lo vamos a correr sobre el framework de Node,

Play video starting at 3 minutes 33 seconds and follow transcript3:33

por lo tanto you lo va a poder ubicar, you está dentro de nuestro sistema de este 
paquete, no hay que instalarlo, no hay que hacer nada. 
Simplemente lo vamos a incorporar.

Play video starting at 3 minutes 45 seconds and follow transcript3:45

Con http const, lo que hacemos es crear una constante, es decir, 
una variable que no va a cambiar de estado y la vamos a asociar 
al resultado de la incorporación de ese módulo, de ese require.

Play video starting at 3 minutes 58 seconds and follow transcript3:58

Más adelante vamos a ver cómo crear nosotros nuestros propios módulos 
y vamos a ver qué es lo que sucede cuando hacemos este require, es muy sencillo. 
Pero ahora lo interesante es que sigamos avanzando. 
Vamos a crear una variable más para indicar cuál va a ser nuestro host.

Play video starting at 4 minutes 15 seconds and follow transcript4:15

Fijate que cerramos todo con punto y coma. 
Esto es JavaScript, no. 
Pero repasamos un poco.

Play video starting at 4 minutes 23 seconds and follow transcript4:23

Número de puerto.

Play video starting at 4 minutes 25 seconds and follow transcript4:25

Fijate que you indicamos el host, cuál es la IP del servidor y el 
puerto por el cual vamos a escuchar y vamos a crear el server ahora.

Play video starting at 4 minutes 34 seconds and follow transcript4:34

Fijate qué fácil. 
Vamos a usar el módulo http que tiene definida dentro de su API 
un método que es CreateServer que recibe dos parámetros.

Play video starting at 4 minutes 48 seconds and follow transcript4:48

Dos parámetros, que esto es, 
cuando creamos el servidor para manejar lo que son los request y los response. 
Los request son todas las peticiones que nos hacen al servidor a través del 
puerto indicado, 
en este caso el 3000 y los response son las respuestas que vamos a hacer. 
Bien, entonces ¿qué vamos a hacer cuando tengamos que responder esto?

Play video starting at 5 minutes 9 seconds and follow transcript5:09

Vamos a ejecutar una función.

Play video starting at 5 minutes 12 seconds and follow transcript5:12

A esto le decimos CALLBACK. 
El CALLBACK para cuando nos hagan un request es ejecutar esta función

Play video starting at 5 minutes 21 seconds and follow transcript5:21

que va a responder statusCode = 200. 
Vamos a setearle el Header. 
La respuesta 
Content-Type. 
En este caso vamos a decirle que es text/plain. 
No vamos a devolver nada especial. 
Después esto obviamente en la respuesta le vamos a setear que sea formato JSON, 
un HTML, en fin, el tipo de respuesta que

Play video starting at 6 minutes 0 seconds and follow transcript6:00

querramos utilizar para nuestro usuario. 
Y aquí vamos a decirle al final el famoso Hola Mundo!

Play video starting at 6 minutes 9 seconds and follow transcript6:09

Bien, cerramos con \n. 
Bien, ¿hasta acá qué hicimos? 
Fijate. 
Creamos una constante server que acá usando la API del módulo http, 
lo que hace es crear una instancia de servidor que va a atender las peticiones. 
Creamos ahora, mejor dicho, 
vamos a poner en escucha a este servidor usando el método LISTEN.

Play video starting at 6 minutes 41 seconds and follow transcript6:41

Va a recibir, vamos a pasar el port y el hostname. 
Son los dos parámetros que recibe. 
Luego le vamos a pasar CALLBACK. 
Son estas funciones 
que se ejecutan luego que finaliza la tarea o alguna parte del método, no. 
¿Qué significa? 
Que finaliza la tarea. 
Significa que le pasamos el port y el hostname, generalmente va al final.

Play video starting at 7 minutes 8 seconds and follow transcript7:08

Esto quiere decir que el LISTEN necesita para hacer lo que tiene que hacer 
el port y el hostname y cuando termina ejecuta el CALLBACK, 
que es esto que está acá al final.

Play video starting at 7 minutes 20 seconds and follow transcript7:20

Cuando ejecute esto, lo que queremos hacer es loguear que el servidor está 
corriendo sobre. 
Esta es una, generalmente una en inglés le dicen el running, no, el running at.

Play video starting at 7 minutes 36 seconds and follow transcript7:36

Pero bueno, en español a veces decimos, está corriendo el servidor.

Play video starting at 7 minutes 39 seconds and follow transcript7:39

Quizás es una pésima traducción que estamos teniendo, no.

Play video starting at 7 minutes 45 seconds and follow transcript7:45

Bien, de todas formas así es como se habla, se dice en la jerga.

Play video starting at 7 minutes 50 seconds and follow transcript7:50

Bueno, le ponemos que el server está corriendo sobre http//, 
y fijate que acá escapamos con el peso llave hostname y puerto, no. 
IP puerto. 
O esto después va a ser el DNS o la URL puerto, etcétera. 
Prestá atención a que esto no es comilla simple ni comilla doble, es como un

Play video starting at 8 minutes 11 seconds and follow transcript8:11

acento invertido que es el que tenemos que, el que precisa el lenguaje para poder 
interpretar el string con comandos de escape para poner variables. 
Bien, todo listo, lo que haremos ahora es NODE y le pasamos

Play video starting at 8 minutes 28 seconds and follow transcript8:28

el archivo que acabamos de crear que es APP.JS.

Play video starting at 8 minutes 33 seconds and follow transcript8:33

Fijate que nos ponen el servidor está corriendo sobre este puerto

Play video starting at 8 minutes 42 seconds and follow transcript8:42

y ahora lo que vamos a hacer es directamente fijate, 
127.0.01:3000 y acá vemos que you devuelve el mensaje Hola Mundo!

Play video starting at 8 minutes 58 seconds and follow transcript8:58

Muy fácil, verdad.

Play video starting at 9 minutes 0 seconds and follow transcript9:00

Ahora bien.

Play video starting at 9 minutes 2 seconds and follow transcript9:02

Seguramente te digas bueno pero esto de qué me sirve. 
Bueno, pero hasta acá hemos visto como fácilmente podemos crear you un servidor 
web que empiece a escuchar ciertos request. 
Por supuesto que todo esto es local, pero esto mismo podríamos exponerlo 
en una IP pública y que accedan de cualquier parte del mundo, no. 
Lo que vamos a seguir avanzando ahora es cómo empezar a manejar rutas, es decir, 
que un pueda poner barra, por ejemplo, usuarios y me enliste los usuarios 
y me haga alguna acción o barra órdenes o barra pedidos o barra lo que fuere y 
empezar a rutear, no, esas URL con barras como para empezar a acceder a diferentes 
secciones de un proyecto web o a diferentes rutas de una determinada API. 
Para eso podemos seguir usando Node.JS, por supuesto, 
pero vas a ver que es mucho más simple cuando empezamos a lidiar con una 
herramienta como puede ser Express, que enseguida te voy a contar de qué se trata, 
porque nos va a facilitar mucho el trabajo de manejar rutas, 
manejar modelos, más adelante manejar persistencia, crear APIs, etcétera. 
¿Se puede hacer todo directamente en Node? 
Por supuesto. 
Pero hay que programar mucho más y quizás no valga la pena tanto esfuerzo en esta 
instancia y generalmente en los proyectos uno no trabaja con Node.JS pelado, 
sino que usa herramientas como Express y puede ser algunas otras. 
Te voy a mencionar Express solamente porque es bastante versátil, muy simple. 
Hay mucha documentación, tiene una comunidad muy grande, pero hay muchas más 
y algunas de propósitos muy concretos que quizás si tenés que trabajar sobre una API 
hay algunas librerías o frameworks más livianitos incluso que Express 
pero conociendo Express vas a poder manejar cualquiera de ellas.