Práctica 1_1 - myTeachingURJC/2018-19-LTAW GitHub Wiki

Sesión Laboratorio 1: Práctica 1-1

Tiempo: 2h
Fechas: Lunes, 27 de Enero de 2020
Objetivos de la sesión:
- Enunciado de la práctica 1
- Toma de contacto con node
- Recordar el uso de github desde Atom
- Saber hacer programas simples con node
- Poner en marcha un servidor web muy básico

Contenido

Enunciado Práctica 1-1
- Componentes obligatorios
Herramientas
Actividades guiadas
Actividades NO guiadas
Autores
Licencia
Enlaces

Enunciado Práctica 1

Construir un servidor web usando Node.js, que sirva las páginas de la web de una tienda. Las páginas serán estáticas (en HTML), y consistirán en textos, fotos y vídeos enlazados, compartiendo una hoja de estilo. En la tienda deberá haber al menos 3 productos, cada uno con su propia página

Componentes obligatorios

Usar el módulo http de Node.js
Documentos HTML, hojas de estilo (.css) e imágenes

Herramientas

Las herramientas que usaremos serán el editor Atom, el navegador Firefox, Github y Node.js (V13.6.0). Ya están instaladas en los laboratorios Linux de la URJC

Actividades guiadas

Actividades guiadas por el profesor. Haremos lo siguiente:

Preparar el entorno en github

Créate una cuenta de Github (si es que no la tienes ya). Envía tu nombre real y tu usuario de github en la respuesta al post del Foro en Aula Virtual titulado: "Tu cuenta de github"
Haz un fork del repositorio 2018-19-LTAW-practicas. Contiene la estructura (plantilla) para que hagas tus prácticas ahí

Manejo de github desde la interfaz de Atom

Github lo podéis manejar como queráis. En esta primera sesión vamos a ver un mini-tutorial de cómo manejar github desde la interfaz gráfica de Atom

Clonar el repositorio 2018-19-LTAW-practicas que tienes en tu página de github
- Abrir el Atom
- Ir a View/Toggle Command Palette y escribir "clone"
- Pulsar en la opción: Github:Clone
- En la entrada "Clone from" copiar la URL del repositorio a clonar
- En la entrada "To Directory", poner la ruta del directorio local donde clonar el repo
- Apretar el botón de Clone
Abrir el README de la práctica 1, y hacer alguna modificación para aprender a subirlo a github. Por ejemplo añadir el título de la práctica: "Práctica 1: Servidor web de una tienda"
Grabar el fichero. Automáticamente veréis que su nombre (y los directorios donde está alojado) cambian a color naranja. Esto indica que es un archivo que tiene cambios con respecto a lo que está en el repositorio (versión anterior)
Añadir los cambios. En la ventana de la derecha (Git) hacemos doble click sobre el fichero Practica-1/README, para añadirlo como cambio. Pasará a la ventana inferior
Hacer el commit. Ahora escribirmos un comentario en la ventana "Commit message" (es obligatorio escribir siempre un mensaje en cada commit) y pulsamos el botón de Commit to master
Hacer un push para enviarlo a nuestro repositorio remoto. Pulsamos en la parte inferior, en el botón de Push
Nos pedirá nuestros datos para iniciar sesión en github y se subirán los cambios
Abrir el navegador y comprobar que efectivamente se han subido los cambios

Instalación de Node.js 10.15.0 LTS

La versión que vamos a utilizar es la 10.15.0 LTS. Es multiplataforma: Linux, Mac, Windows. Se puede descargar desde aquí

Instalación en Ubuntu 8.04

Se instala muy fácilmente en Ubuntu 8.04 con los siguientes comandos:

sudo apt-get install curl

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

sudo apt-get install nodejs

Arrancando Node.js: Modo intérprete

Comprobación de la versión. Vamos a comprobar que tenemos correctamente instalado node, y saber qué versión es Abrir un terminal y ejecutar el comando:

$ node -v
v10.15.0

También comprobaremos si la herramienta npm (gestor de paquetes) está instalada, y qué versión es:

$ npm -v
6.4.1

Node.js es un intérprete (igual que python). Podemos pasarle el fichero javascript que queremos que ejecute, o bien podemos hacer pruebas en modo interactivo

Lanzamos node. Nos aparecerá un prompt ">" donde podemos escribir directamente código en javascript

$ node
>

Nuestra primera instrucción. Probamos a imprimir un mensaje en la consola. Una forma de hacerlo es con el método console.log()

> console.log("hola")
hola
undefined
>

La función console.log() añade siempre al final un retorno de línea. También podemos imprimir información en la consola usando el método process.stdout.write()

> process.stdout.write("hola\n")
hola
true
>

Para salir del modo interactivo escribirmos el comando .exit o bien le damos a control-C dos veces (En las máquinas Linux también salimos apretando control-D)

> .exit
obijuan@Dagobah:~/Practica-1$

Probando el "Hola mundo"

Escribimos el siguiente programa hola mundo en el fichero hello.js:

//-- Programa hola mundo en node.js
console.log("¡Hola mundo!");

//-- Otra forma de imprimir
process.stdout.write(".......\n")

Y lo ejecutamos así:

$ node hello.js 
¡Hola mundo!
.......
$

También lo podemos arrancar en modo interactivo con la orden .load hello.js

$ node
> .load hello.js
//-- Programa hola mundo en node.js
console.log("¡Hola mundo!");
//-- Otra forma de imprimir
process.stdout.write(".......\n")
 
¡Hola mundo!
.......
true
>

Mi primer proyecto nodejs

Todos los proyectos en node incluyen un fichero denominado package.json que contiene información sobre el proyecto. La información contenido en ese fichero la usa el gestor de paquetes npm

En nuestro proyecto Hola mundo debemos tener dos ficheros al menos:

hello.js
package.json

Un ejemplo de package.json es este (está en formato JSON)

{
  "name": "hello",
  "description": "Proyecto hola mundo",
  "keywords": [
    "ltaw",
    "test"
  ],
  "version": "0.0.1",
  "author": "Juan Gonzalez-Gómez (Obijuan)",
  "main": "hello.js",
  "devDependencies": {},
  "license": "GPL-3.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/myTeachingURJC/2018-19-LTAW.git"
  }
}

La herramienta npm nos instala las dependencias necesarias, y nos comprueba si el proyecto es correcto. Ejecutamos este comando:

$ npm install
up to date in 1.136s
found 0 vulnerabilities
$

En nuestro caso, NO nos instala nada porque no tenemos dependencias. Cualquier error de sintaxis en el fichero package.json se mostrará en la consola, bien como warning o bien como error

npm start: Añadiedo script de arranque

Los proyectos de node.js típicamente se usan mediante estos dos comandos:

npm install --> Comprueba el proyecto e instala todas las dependencias necesarias
npm start --> Ejecuta el proyecto

En el fichero package.json, podemos añadir la entrada "sripts" donde definir cómo arranca nuestro programa, o cómo se realizan test. Añadiremos el objetivo "start" para ejecutar nuestro programa hola mundo, y el objetivo "test" que simplemente llama a node con la opción -v:

{
  "name": "hello",
  "description": "Proyecto hola mundo",
  "keywords": [
    "ltaw",
    "test"
  ],
  "version": "0.0.1",
  "author": "Juan Gonzalez-Gómez (Obijuan)",
  "main": "hello.js",
  "devDependencies": {},
  "license": "GPL-3.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/myTeachingURJC/2018-19-LTAW.git"
  },
  "scripts": {
    "start": "node hello.js",
    "test": "node -v"
  }
}

Ahora ejecutamos el hola mundo scribiendo el comando "npm start":

$ npm start

> [email protected] start /home/obijuan/develop/myTeachingURJC/2018-19-LTAW/wiki/L01-Practica-1/downloads/hello2
> node hello.js

¡Hola mundo!
.......
$

y probamos también el objetivo test:

$ npm test

> [email protected] test /home/obijuan/develop/myTeachingURJC/2018-19-LTAW/wiki/L01-Practica-1/downloads/hello2
> node -v

v10.15.0
$

Mi primer servidor web en nodejs

En una carpeta nueva, creamos los ficheros:

Este es un servidor web "Hola mundo", que lo único que hace es generar una respuesta en HTML cada vez que recibe una petición en el puerto 8080

var http = require('http');

console.log("Arrancando servidor...")


http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('Hello World!');
  console.log("Peticion atendida")
}).listen(8080);

Lo arrancamos con npm start:

$ npm start

> [email protected] start /home/obijuan/develop/myTeachingURJC/2018-19-LTAW/wiki/L01-Practica-1/downloads/server
> node server.js
Arrancando servidor...

Esto lanza el servidor web. Ahora desde el navegador local nos conectamos a la URL: http://localhost:8080/. En el navegador veremos el texto "Hello world!". En la terminal veremos el mensaje "Petición atendida" cada vez que un cliente se conecta:

obijuan@Dagobah:~/develop/myTeachingURJC/2018-19-LTAW/wiki/L01-Practica-1/downloads/server$ npm start

> [email protected] start /home/obijuan/develop/myTeachingURJC/2018-19-LTAW/wiki/L01-Practica-1/downloads/server
> node server.js

Arrancando servidor...
Peticion atendida
Peticion atendida
Peticion atendida
Peticion atendida

Para detener el servidor, pulsamos control-C desde el terminal donde lo hemos lanzado

Este ni rvidor web básico responde siempre lo mismo a cualquier petición. No distigue entre los objetos solicitados, ni genera mensajes de error

Actividades NO guiadas

En el w3school hay unos tutoriales muy sencillos de node para mejorar el servidor web
Modifica el servidor básico para detectar los documentos solicitados (xxxx/document1, xxxx/documento2....), y que la respuesta sea diferente según el documento pedido
Añade control de errores: Si el documento solicitado no existe, que lo indique dando un error
Aprende a manejar el sistema de ficheros local con node (módulo fs)
Haz un servidor que devuelve documentos que estén en el sistema de ficheros local
A partir de ahí ya puedes hacer las páginas estáticas de tu tienda, y que se sirvan a través de tu servidor

Autores

Jose María Cañas
Juan González-Gómez (Obijuan)