Inicializando nuestro proyecto con Npm

Clase 7 de 46 • Curso Definitivo de JavaScript 2016

Bky Bk

student•

Para quienes no están muy familiarizados con la TERMINAL, les dejo esto:
1.Para abrir la Terminal usa Command ⌘+barra espaciadora. O busca en Aplicaciones/Utilidades/ Terminal.
2. Para abrir Sublime Text desde la Terminal hay que hacer un configuración, aquí encontran una ayuda. Ojo, en el ejemplo del siguiente link pueden sustituir el "st" del final por el "subl", justo como lo aplica Sacha.

Alguna información básica para usar la Terminal y abrir capeta/archivos:

Roberto Ruiz

student•

Muchas gracias, ya que a este argentino hasta flojera le da explicar eso. pero gracias! 😃

Pedro J. Ramirez

student•

A estas alturas de la vida no podemos esperar que una persona nos de toda la información. Debemos desarrollar la capacidad de investigación. He ahí la diferencia entre el mediocre y el exitoso. Para todo lo demás, existe Google!

Ramiro Tolosa

student•

Si seleccionan el menú Project en SublimeText y luego seleccionan Add Folder to Project, y seleccionan Platzigram. Se visualiza los folder como muestra el profesor

José Leonardo Villalobos Molina

student•

var express = require('express');

var app = express();

app.get('/', function(req, res){

    res.send('hola mundo!');

})

app.listen(3000,function(err){

   if(err) return console.log ('Hubo un error'), process.exit(1);

   console.log('Platzigram escuchando en el puerto 3000');

})

Fredy Bustos

student•

var express = require('express');

var app = express();

app.get('/',function (req, res) {
res.send('hola mundo');
})
app.listen(3000, function (err) {
if (err) return console.log('hubo un error'), process.exit(1);
console.log('ecuchando el puerto 3000')
}

y ya tenemos un servidor :)

Ramiro Tolosa

student•

Para aquellos que quieren abrir subline text desde consola y están bajo windows, les recomiendo este video que explica como la consola puede reconocer a sublinetext y abrirlo.

Diego Gonzalez

student•

El archivo package.json es como un archivo init del proyecto, que contendrá todas las dependencias que necesita el proyecto.

Hernán Quiroga

student•

Este curso podría llamarse Aprende JavaScript Copiando y Pegando definitivamente.

Ricardo Moreno

student•

Estos primeros pasos son muy repetitivos. Si, es tedioso al principio. Pero va a ser el pan de cada día cada que inicies algún proyecto.

Cuando trabajes profesionalmente con esto los vas a escribir hasta dormido.

Hernán Quiroga

student•

Si, pero me parece que el curso esta orientado a gente que ya sabe programar algo en JS.

Erick Neftalí Sarmiento Cortes

student•

Como determina que puerto usar o porque el 3000?

Sergio Daniel Xalambrí

student•

Podés usar el que quieras mientras no exista ningún otro servicio o aplicación usándolo. Los más comunes que se usan en desarrollo son el 3000 y el 8000, pero no hay una razón, es simplemente una costumbre y que prácticamente cualquier ejemplo en la web los usan y uno termina usando esos.

Grocio Herrada Vigo

student•

Veo que el curso lo desarrollan con mac , ¿tienen los mismos cursos desarrollados para windows?

CARLOS GUZMAN

student•

Generalmente los desarrolladores suelen usar computadores Mac por diversas razones que no vienen al caso, sin embargo eso no significa que para este caso lo que ves en el curso no funcione en windows, solo tienes que ubicar los paquetes adecuados para tu sistema operativo y arquitectura de PC, el nodejs esta disponible para Windows, te dejo el link; , el editor de texto, sublime también tiene su versión para windows,, y si has seguido los videos anteriores hasta aquí instalando los paquetes mencionados en el curso, podrás ejecutar los comandos que ves aquí... recuerda que finalmente el resultado final lo vemos en el navegador y de seguro tu windows tiene Chrome u otro navegador. espero te sirva. Salu2

Esteban Jossue Galdamez Perez

student•

para el desarrollo es lo mismo mac o pc

Daniel Alvarez Gaviria

student•

Hola muchachos! Todo funciona bien, pero como puedo cerrar el servidor de express?? Me toca cerrar la terminal en estos momentos.

Jesús Manuel Fuentes Trejo

student•

Para cerrar el servidor solo debes presionar ctrl + c (Windows) o cmd + c (Mac)

Carlos Raez

student•

Hola el localhost cuando compruebo me dice que no puedo acceder a eso en chrome pero en cambio en la terminal si me dice que va bien!!! no entiendo!!!! Gracias.
Saludos!!!

Martin Paez

student•

prueba con localhost:3000 en tu navegador

Daniel Hidalgo

student•

no funciona en ninguno de mis 3 navegadores (chrome, safari, firefox) --Mac–

Javier López López

student•

Muy buena la clase.
Tengo una duda
Que pasa si yo instalo todo esto en una computadora y después tengo que cambiar a otra ¿Que tengo que hacer? por que me gustaría hacer esto y a fin de año cambiar de PC, ¿eso me dará alguna inconveniencia?

Julian Betancourt

student•

en esa nueva pc, tendrías que instalar Node y descargar la carpeta. Por lo general en github no se incluye la carpeta node_modules, por lo que te tienes que ir desde la terminal al root del proyecto y ejecutar el comando npm install, que va a mirar el archivo package.json y va a instalar las dependencias necesarias

Diego Guerrero

student•

esta bueno el curso buen profesor

Daniel Hidalgo

student•

Les comparto mis apuntes y resumen por si les sirve de guía:

Carlos Raez

student•

Hola buenas tardes. Pero en este capitulo va muy muy rápido y no lo dice paso a paso en el minuto 1:20 yo uso windows y no se como ha llegado ahi con la terminal para comprobar si esta instalado tanto node.js o npm Gracias pero no se como leches llegar...y como hacer que sublime muestre esto asi con folders.
Gracias

Sacha Lifszyc

teacher•

Para lo de Sublime simplemente abre sublime y cuando le das a abrir archivo, seleccionas la carpeta que deseas y la abres (en vez de abrir un archivo en particular)

Sacha Lifszyc

teacher•

aquí puedes encontrar el instalador de nodejs y npm

Kevin Morales

student•

server.js con algunos cambios de ES2015

let express = require('express');
let app = express();

app.get('/', (req, res) => {
    res.send('Hola Mundo!');
});

app.listen(3000, (err) => {
    if (err) return console.log('Hubo un error'), process.exit(1);

    console.log('Platzigram escuchando en el puerto 3000')
});

Ricardo Moreno

student•

Gracias!. Ya me estaba preguntando por eso

Carlos Enrique Gonzalez Peña

student•

Un poco mejorado y con menos sintaxis

const express = require('express');
const app = express(), port = 3000
app.get('/', (req, res) => res.send('Hola mundo!'))

app.listen(port, (err) => {
  if (err) return console.log(`Hubo un error : ${err}`), process.exit(1);
  console.log(`Platzigram escuchando en el puerto ${port}`);
})

Oscar Stevens Cuartas Bejarano

student•

les recomiendo ver primero el curso FUNDAMENTOS DE JAVASCRIPT antes de ver este… para que no resulten enojados insultando al profesor que de por si es excelente y da muchos cursos en platzi

Reinaldo Mendoza

student•

Me gusta que el profesor explica las flags de los comandos y no es solo tirar líneas y ya

daniel kant

student•

express.js

Greco Alejandro Serna Díaz

student•

epic moment

let express = require('express');
let app = express();

app.get('/', (req, res) => {
    res.send('Hola Mundo!');
});

app.listen(3000, (err) => {
    if (err) return console.log('Hubo un error'), process.exit(1);

    console.log('Platzigram escuchando en el puerto 3000')
});

const express = require('express');
const app = express(), port = 3000
app.get('/', (req, res) => res.send('Hola mundo!'))

app.listen(port, (err) => {
  if (err) return console.log(`Hubo un error : ${err}`), process.exit(1);
  console.log(`Platzigram escuchando en el puerto ${port}`);
})

Inicializando nuestro proyecto con Npm

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API

Obteniendo una respuesta del servidor con async/await

Agregando un botón para subir una nueva foto

Subiendo la foto a nuestro servidor web

Conclusiones

Cierre del curso

Es hora de construir el backend de Platzigram

Desafio 1: Hacer la página de un usuario

Desafio 2: Agregar un spinner mientras carga las imágenes del timeline

Desafio 3: Agregar un modal para mostrar una imagen en el perfil del usuario

Sesiones en Vivo

Stream 1: Resolviendo el primer desafío

Stream 2: Resolviendo el segundo desafío

Stream 3: Resolviendo el tercer reto

Stream 4: Resolviendo el cuarto reto

Stream Extra: Acceder a la webcam usando JavaScript

Complementos del curso

Unit testing en JavaScript con Mocha

Entendiendo los tiempos de ejecución en JavaScript

Usando babel en el lado del servidor (en Node.js)