JavaScript en el Servidor:
[Link]
Desarrollo de Aplicaciones en Entornos Web
Contenido
Introducción a [Link]
Módulos en [Link]
Módulo HTTP
Servidor web en [Link]
Procesamiento de una petición
Generación de una respuesta
Uso de ‘npm’
Acceso a MySQL
Framework Express
Desarrollo de Aplicaciones en Entornos Web 2
Introducción a [Link]
Plataforma para el desarrollo de aplicaciones Javascript.
◼ Antes: Javascript era soportado solo por los navegadores
◼ Aplicaciones de cliente y servidor (servidor web).
◼ e.j.: Ejecutar aplicación en Node.s ‘node [Link]’
Basado en el motor de Javascript V8 desarrollado por Google.
◼ Soporta ECMAScript (ES6)
Arquitectura [Link]:
◼ Lenguaje Javascript
◼ Módulos [Link] (servidores web, administración de archivos,
protocolos de comunicaciones, etc..)
Desarrollo de Aplicaciones en Entornos Web 3
[Link]
◼ Motor de ejecución Javascript
◼ Dirigido por Eventos
◼ Modelo de Entrada/Salida asíncrono (no bloqueante)
◼ Ligero y eficiente
Última versión sujeta al LTS (Long-term Support)
Versión actual
Desarrollo de Aplicaciones en Entornos Web 4
Gestión de módulos y paquetes a través del npm
◼ npm no es acrónimo de ‘[Link] Package Manager’
bacrónimo (retroacrónimo)
◼ [Link]
◼ instala, comparte y distribuye librerías/módulos JS
◼ gestión de dependencias en proyectos JS
Módulos disponibles en la propia distribución de
[Link] + módulos instalados desde npm.
◼ e.j.: ‘npm install mime’ (instala el módulo .js MIME)
Desarrollo de Aplicaciones en Entornos Web 5
Módulos en [Link]
[Link] utiliza el concepto de módulo en su
desarrollo
◼ Creación de librerías/módulos Javascript para
componer una aplicación
Un módulo contiene funciones, objetos y
variables Javascript
◼ Indicar qué será exportado para ser utilizado por otros
programas.
Desarrollo de Aplicaciones en Entornos Web 6
Ejemplo módulo: [Link]
var PI=3.14;
function sumar(x1,x2){return x1+x2;
function restar(x1,x2){return x1-x2;
function dividir(x1,x2){
if (x2==0 {
mostrarErrorDivision();
}else{return x1/x2;}
}
function mostrarErrorDivision() {
[Link]('No se puede dividir por cero');
}
[Link]=sumar; [Link]=restar;
[Link]=dividir; [Link]=PI;
Desarrollo de Aplicaciones en Entornos Web 7
variables, funciones, objetos accesibles desde otros
archivos son exportados agregándolos al objeto
exports
[Link]=sumar;
Para usar un módulo: require
var mat=require('./matematica');
[Link]('La suma de 2+2=' + [Link](2,2));
[Link]('El valor de PI=' + [Link]);
Módulos pueden ser una carpeta que contiene un
conjunto de archivos y de subcarpetas.
Desarrollo de Aplicaciones en Entornos Web 8
Módulo Operative System:
var os = require('os');
[Link]('Sistema operativo:'+[Link]());
[Link]('Versión del OS:'+[Link]());
[Link]('Memoria total:'+[Link]()+' bytes');
[Link]('Memoria libre:'+[Link]()+' bytes');
Módulo File System:
‘permite acceder al sistema de archivos para poder
leer sus contenidos y crear otros archivos o carpetas’
Desarrollo de Aplicaciones en Entornos Web 9
var fs = require('fs');
[Link] basado en el uso de programación
asíncrona en tareas de larga duración
◼ no detener la ejecución del programa ante actividades que
requieren mucho tiempo
Módulo ‘fs’ implementa programación asincrónica
para el manejo de ficheros: creación, lectura, etc.
Desarrollo de Aplicaciones en Entornos Web 10
Ejemplo módulo ‘fs’
var fs = require('fs');
[Link]('./[Link]'
, 'línea 1\nLínea 2',
function(error){
if (error) [Link](error);
else [Link]('El archivo
fue creado'); 2º
});
[Link]('última línea del programa');
1º
Desarrollo de Aplicaciones en Entornos Web 11
writeFile:
◼ primer parámetro: nombre del archivo de texto a
crear (path absoluto o relativo)
◼ segundo parámetro: contenido (string) a escribir
en el archivo
◼ tercer parámetro: función anónima que será
llamada por la función writeFile cuando haya
terminado de crear el archivo. Asíncrona.
La función recibe como parámetro un objeto con el error
en caso de no poderse crear el archivo (en caso
contrario el valor es null).
Desarrollo de Aplicaciones en Entornos Web 12
var fs = require('fs');
function leer(error, datos){
if (error) {
[Link](error);
} else {
[Link]([Link]());
} 2º
}
[Link]('./[Link]',leer);
[Link]('última línea del programa');
1º
Desarrollo de Aplicaciones en Entornos Web 13
var fs = require('fs');
[Link](ruta_archivo,
function(existe){
if (existe) { ... }
else { ... }
});
Desarrollo de Aplicaciones en Entornos Web 14
Módulo HTTP
Módulo para implementar un servidor web
(soporte HTTP)
◼ Permite crear aplicaciones web
En [Link] hay que implementar un servidor web
◼ Diferente a las plataformas Java, PHP, Microsoft, etc.
donde los servidores son provistos por terceros
(Apache, IIS, etc..)
var http = require('http');
Desarrollo de Aplicaciones en Entornos Web 15
Servidor web en [Link]
El módulo 'http' tiene una función llamada
createServer para crear un servidor web basado
en el protocolo HTTP.
createServer requiere una función con dos
parámetros: petición y respuesta.
Los objetos petición y respuesta son creados por
la función createServer para dar acceso a la
petición y respuesta HTTP.
Desarrollo de Aplicaciones en Entornos Web 16
Ejemplo servidor ‘Hola Mundo’
var http = require('http');
var servidor=[Link](
function (peticion, respuesta) {
[Link](200,
{'Content-Type': 'text/html'});
[Link](
'<!doctype html><html><head></head>'+
'<body><h1>Hola Mundo</h1></body></html>');
[Link]();
});
[Link](8080);
[Link]('Servidor web iniciado');
Desarrollo de Aplicaciones en Entornos Web 17
createServer() se ejecuta en forma asíncrona
[Link](8080) también es
asíncrona
◼ se queda esperando a recibir peticiones.
función pasada al servidor es la encargada de
actuar como manejador de peticiones HTTP.
◼ En el ejemplo anterior, cualquier URL (petición)
invocará a la función manejadora
Desarrollo de Aplicaciones en Entornos Web 18
Generación de una respuesta
[Link]
Escribir cabeceras en la respuesta HTTP
[Link]
Escribir el contenido de la respuesta HTTP
[Link]
Indicar que se ha finalizado de escribir el contenido
◼ se puede invocar varias veces [Link]
antes de [Link]
Desarrollo de Aplicaciones en Entornos Web 19
Procesamiento de una petición
En cada petición de recurso se ejecuta la función
pasada a createServer.
El primer parámetro de la función manejadora
permite el acceso a la petición HTTP.
Acceso a la URL de la petición:
[Link]
◼ Usar módulo ‘url’ para analizar la URL de la petición
var url = require('url');
Desarrollo de Aplicaciones en Entornos Web 20
[Link]
var objetourl = [Link]([Link]);
[Link](’path completo del recurso y
parámetros:'+[Link]);
carpeta1/[Link]?param1=10¶m2=20
[Link]('solo el path y nombre del
recurso :'+[Link])
carpeta1/[Link]
[Link]('parámetros del recurso :’ +
[Link])
param1=10¶m2=20
Desarrollo de Aplicaciones en Entornos Web 21
Acceso a [Link] por defecto
var servidor = [Link](
function(peticion, respuesta){
var objetourl =
[Link]([Link]); var
ruta='public'+[Link]; if
(ruta=='public/')
ruta='public/[Link]';
procesarPeticion(peticion, respuesta,
discriminar por URL
});
ruta);
...
Desarrollo de Aplicaciones en Entornos Web 22
Procesamiento GET
[Link]
<html>
<head> <title>Formulario</title></head>
<body>
<form action="recuperardatos" method=”get">
Nombre:<input type="text" name="nombre" size="30"><br>
Clave: <input type="password" name="clave"
size="30"><br>
<input type="submit" value="Enviar"></form>
</body>
</html>
false: devuelve string
var url = require('url'); true: devuelve objeto parseado
...
function procesarFormulario(peticion, respuesta) {
var nombre = [Link]([Link],true).[Link];
var clave = [Link]([Link],true).[Link];
Desarrollo de Aplicaciones en Entornos Web 23
Procesamiento POST
[Link]
<html>
<head> <title>Formulario</title></head>
<body>
<form action="recuperardatos" method="post">
Nombre:<input type="text" name="nombre" size="30"><br>
Clave: <input type="password" name="clave"
size="30"><br>
<input type="submit" value="Enviar"></form>
</body>
</html>
function
ruta) procesarPeticion
{ (peticion, respuesta,
switch (ruta) {
case 'public/recuperardatos':{
procesarFormulario(peticion, respuesta);
break;
}
Desarrollo de Aplicaciones en Entornos Web 24
Procesamiento POST
var querystring = require('querystring');
...
function procesarFormulario(peticion, respuesta) {
var info = '';
[Link]('data', function(datosparciales){
info += datosparciales; {
}); nombre:’javier'
, clave:'1234'
[Link]('end', function(){ }
var formulario = [Link](info);
[Link](200, {'Content-Type': 'text/html'});
var pagina=’...nombre:’+formulario['nombre']+'<br>'+
‘clave:'+formulario['clave']+'<br> ...’;
[Link](pagina);
});
}
Desarrollo de Aplicaciones en Entornos Web 25
Uso de ‘npm’
Gestor de módulos/paquetes en Javascript para
[Link]
◼ Instalada con la distribución de [Link]
[Link] viene por defecto con un conjunto
limitado de módulos de uso general.
Repositorio de módulos/paquetes en: https://
[Link]/
Desarrollo de Aplicaciones en Entornos Web 26
Uso de ‘npm’
Uso:
npm install nombre_modulo
◼ desde la carpeta de proyecto
◼ se crea una carpeta llamada node_modules/
◼ en dicha carpeta encontraremos el módulo (nueva
carpeta nombre_modulo/ )
◼ incluye documentación de uso
var modulo = require(’nombre_modulo');
Desarrollo de Aplicaciones en Entornos Web 27
Acceso a MySQL
npm install mysql
var mysql = require('mysql');
var conexion = [Link](
{
host:'localhost:3306’,
user:'root',
password:'',
database:’daweb’
});
Desarrollo de Aplicaciones en Entornos Web 28
Acceso a MySQL
[Link](function (error){
if (error)
[Link]('Problemas de conexion con mysql');
});
var datosregistro = { nombre: formulario[’nombre’],
clave: formulario[’clave’] };
[Link]('insert into usuarios set ?’,
datosregistro,
function (error, resultado){
if (error){ [Link](error);
return; }
});
Desarrollo de Aplicaciones en Entornos Web 29
Acceso a MySQL
[Link](
‘select nombre, clave from usuarios’,
function (error, filas){
if (error){ [Link](error); return; }
for(var i = 0; i<[Link]; i++){
... filas[i].nombre ...
...filas[i].clave ...
}
});
...
var dato=[formulario[’nombre']];
[Link]('select clave from usuarios where nombre
= ?',dato, function( ...
Desarrollo de Aplicaciones en Entornos Web 30
Framework Express
Framework sobre [Link] para implementar sitios
web.
◼ Motivación: facilitar y organizar proyectos web en
[Link]
◼ Permite crear servidores web y manejar peticiones/
respuestas con código más simple.
Instalado desde npm:
npm install express
Desarrollo de Aplicaciones en Entornos Web 31
Usar módulo Express
var express = require('express');
Crear Aplicación servidora
var app = express();
Definir manejadores de peticiones
[Link](ruta, funcion_manejadora);
[Link](ruta, funcion_manejadora);
◼ ruta: URL para la captura
◼ funcion_manejadora: manejador de la petición con los parámetros
peticion y respuesta. Asíncrona.
Arrancar el sevidor
var server = [Link](puerto, funcion);
Desarrollo de Aplicaciones en Entornos Web 32
Ejemplo servidor Express : Hola Mundo
var express = require('express');
var app = express();
[Link]('/',
function (peticion, respuesta){
[Link](’...</head><body><h1>' +
’Hola Mundo</h1></body>...');
}
);
var server = [Link](8080, function(){
[Link]('Servidor web iniciado');
});
Desarrollo de Aplicaciones en Entornos Web 33
Procesamiento peticiones Express
[Link]
<html>
<head> <title>Formulario</title></head>
<body>
<form action="recuperardatos" method="post ó get">
Nombre:<input type="text" name="nombre" size="30"><br>
Clave: <input type="password" name="clave"
size="30"><br>
<input type="submit" value="Enviar"></form>
</body>
</html>
var bodyParser = require('body-parser');
//extended: false para parsear solo parámetros de tipo string
[Link]([Link]({ extended: false }));
[Link](‘/recuperardatos’, function (req, res) {
var nombre = [Link];
...
[Link]('/recuperardatos', function (req, res) {
var nombre = [Link];
...
Desarrollo de Aplicaciones en Entornos Web 34
Generador de código en Express
'express-generator' : instalar desde la consola del sistema
operativo:
npm install express-generator -g
crear aplicación [Link] utilizando Express y su generador de
código:
express ejemplo_aplicacion --hbs
--hbs : referencia al sistema de plantillas usado para las vistas.
Handlebars [Link]
Desarrollo de Aplicaciones en Entornos Web 35
Generador de código en Express
ejemplo_aplicacion/ [Link]
[Link] {
[Link] "name": “ejemplo_aplicacion”,
bin/ "version": "0.0.0”, "private": true,
www/ "scripts": {
public/ "start": "node ./bin/www"
images/, javascripts/, stylesheets/ },
routes/ "dependencies": {
[Link] "body-parser": "~1.13.2",
[Link] "cookie-parser": "~1.3.5",
views/ "debug": "~2.2.0”, "express": "~4.13.1",
[Link] "hbs": "~3.1.0”, "morgan": "~1.6.1",
[Link] "serve-favicon": "~2.3.0"
[Link] }
}
Desarrollo de Aplicaciones en Entornos Web 36
Generador de código en Express
npm install
ejecuta install sobre todas las dependencias (al estilo Maven)
npm start
arranca el servidor en el puerto 3000
toma como punto de arranque el script indicado:
"scripts": {
"start": "node ./bin/www"
},
Desarrollo de Aplicaciones en Entornos Web 37
Generador de código en Express
[Link]
var express = require('express');
var bodyParser = require('body-parser');
...
var routes = require('./routes/index');
var app = express();
...
[Link]('/', routes);
...
Desarrollo de Aplicaciones en Entornos Web 38
Manejadores de petición
[Link]
var express = require('express');
var router = [Link]();
[Link]('/', function(req, res, next) {
[Link]('index', { title: 'Express' });
});
[Link] = router;
...
Desarrollo de Aplicaciones en Entornos Web 39
[Link]*
...
var datos={
titulo:'Articulos disponibles a la fecha’,
articulos: [
{ codigo: 1,precio:12,descripcion: 'peras' },
{ codigo: 2,precio:132,descripcion: 'manzanas' },
{ codigo: 3,precio:23,descripcion: 'naranjas' },
],
descuento:{lunes:'5%',martes:'10%'}
};
[Link]('index', datos);
...
Desarrollo de Aplicaciones en Entornos Web 40
Plantillas de las vistas
[Link]*
<h1>{{titulo}}</h1>
<table border="1">
<tr><td>Codigo</td><td>Descripcion</td><td>Precio</td>
</tr>
{{#each articulos}}
<tr>
<td>{{codigo}} </td> <td>{{descripcion}}</td>
<td>{{precio}}</td>
</tr>
{{/each}}
</table>
<p>Descuentos el día lunes:{{[Link]}}</p>
<p>Descuentos el día martes:{{[Link]}}</p>
Desarrollo de Aplicaciones en Entornos Web 41
[Link]
<!DOCTYPE html>
<html>
<head>
<title>{{titulo}}</title>
<link rel='stylesheet' href='/stylesheets/[Link]' />
</head>
<body>
{{{body}}}
</body>
</html>
Desarrollo de Aplicaciones en Entornos Web 42
