Continuando con las seciones en la carpeta creada en el apartado anterior, vamos a correr un servidor de forma local en nuestros computadores utilizando el framework express.

Para instalar esta dependencia ejecutamos en la terminal.

consola

npm install express --save

Una vez instalado, creamos un archivo con el nombre server.js en la raíz del directorio.

Puedes usar la consola con el comando touch

consola

touch server.js

Lo que veremos a continuación es la estructura que tiene el proyecto hasta el momento.

Estructura del proyecto

hackspace
└─node_modules
  package.json	
  server.js

En este archivo copiamos el siguiente código que crea y corre un servidor, el puerto de comunicaciones 8000, además envía un mensaje al navegador cuando éste realice una petición.

server.js

'use strict'

// REQUERIMIENTO DE MODULOS

var express =  require('express');

//CONFIGURACIONES

// Creación del servidor web con express
var server = express();

// PETICIONES

// Cuando exista una petición en el servidor  
server.get('/',function(req,res){
	res.send('Hola mundo');
});

// INICIAR SERVIDOR

// Se corre el servidor en el puerto 8000
server.listen(8000, function() {
	console.log('El servidor esta escuchando en el puerto '+ 8000)
});

Como veras nuestro archivo server.js tiene 4 partes.

server.js

// REQUERIMIENTO DE MODULOS
...
// CONFIGURACIONES
...
// PETICIONES
...
// INICIAR SERVIDOR
...

Se recomiendo mantener este orden para evitar errores.

Guardamos y luego ejecutamos el código en la terminal.

consola

node server

En la terminal obtendremos un mensaje que el servidor esta escuchando en el puerto 8000.

En el navegador escribimos en la casilla de las url la dirección

navegador

localhost:8000 

Con esto visualizaremos el mensaje envido en el navegador.

Para cancelar la ejecución del servidor utilizamos las teclas Ctrl + C

Con estas simples instrucciones ya hemos creado y probado un servidor.

Pero nosotros no queremos mostrar simples mensajes, sino páginas web, podrás descargar una plantilla creada para estas semanas, descárgala aquí.

Para visualizar el template abrimos el archivo que se encunetra en la carpeta views especialidades.html

especialidades.html

Agregamos las carpetas en la raíz del proyecto, solo extrae las carpetas views y public en el proyecto.

Estructura del proyecto

hackspace
├─node_modules
├─public
│ ├─img
│ │  algoritmos.png
│ │  android.png
│ │  backend.png
│ │  electronica.jpg
│ │  frontend.png
│ ├─js
│ │  bootstrap.min.js
│ │  jquery-3.1.1.slim.min.js
│ │  tether.min.js 
│ └─css
│    bootstrap.min.css
│    main.css
└─views
     especialidades.html
     formulario.html	
  server.js
  package.json

Ahora vamos a agregar un motor de templates que permitirá servir archivos html cuando el navegador (cliente) lo requiera.

En esta ocasión utilizaremos swig, ejecutamos en la terminal.

consola

npm install swig --save

Ahora, agregamos este motor al proyecto agregando el siguiente código en el archivo server.js, esto nos permitirá mostrar contenido html en el navegador, aquí también damos al servidor la dirección de donde se encuentran los templates (archivos html)

server.js

// REQUERIMIENTO DE MODULOS
...
var swig = require('swig');
...
// CONFIGURACIONES
...
// Integracion del motor de templates swig
server.engine('html',swig.renderFile);
server.set('view engine', 'html');
server.set('views', __dirname + '/views');
swig.setDefaults({cache: false});

Tener en cuenta que las partes de PETICIONES ( función server.get() ) e INICIAR SERVIDOR ( server.listen()) preferentemente queden en la parte inferior del código luego de todas las CONFIGURACIONES.

Ahora cambiamos el comando send por el de render y enviamos el template especialidades.html

server.js

// PETICIONES

// Cuando exista una petición en el servidor  
server.get('/',function(req,res){
	res.render('especialidades.html');
});

La localización de los templates del proyecto han sido indicadas en la configuración del template.

Desde ahora cada vez se diga reiniciar el servidor asegurate que todo archivo este guardado, si el servidor esta corriendo se cancela con CTRL + C, se vuelve a ejecutar en consola node server y actualizar en el navegador en la dirección localhost:8000.

Reiniciamos el servidor y actualizamos.

El resultado no será el mismo que se visualizó al descargar el proyecto, esto se debe a que los archivos estáticos aún no se encuentran direccionados.

Agregamos la siguiente instrucción en el archivo server.js para direccionar los archivos estáticos

server.js

// CONFIGURACIONES
...
// Seteo de dirección de carpeta de archivos estaticos
server.use(express.static(__dirname + '/public'));

En el template especialidades.html cambiamos el direccionamiento de los archivos eliminando public

views/especialidades.html

<link rel="stylesheet" href="../public/css/bootstrap.min.css" >
<link rel="stylesheet" href="../public/css/main.css" >
<img class="card-img-top " src="../public/img/frontend.png" alt="Card image cap">
<script src="../public/js/jquery-3.1.1.slim.min.js" ></script>
<script src="../public/js/tether.min.js" ></script>
<script src="../public/js/bootstrap.min.js"></script>

Ahora solo serán de la siguiente manera

views/especialidades.html

<link rel="stylesheet" href="/css/bootstrap.min.css" >
<link rel="stylesheet" href="/css/main.css" >
<img class="card-img-top " src="/img/frontend.png" alt="Card image cap">
<script src="/js/jquery-3.1.1.slim.min.js" ></script>
<script src="/js/tether.min.js" ></script>
<script src="/js/bootstrap.min.js"></script>

Detenemos y volvemos a correr el servidor y actualizamos el navegador y ahora ya podemos visualizar de manera correcta el template.

Hasta este punto hemos servido archivos estáticos al navegador. Si leíste la introducción recordarás este gráfico.

1. El navegador web solicita la página estática.
2. El servidor localiza la página.
3. El servidor Web envía la página al navegador solicitante.

Ahora voy a mostrarte como agregar información al template desde el servidor, vamos a crear una variable llamada especialidad.

Las variables es una nueva parte o seccion que se posicionara inicialmente, incluso antes de los requerimientos.

server.js

// VARIABLES 
...
// REQUERIMIENTO DE MODULOS
...
// CONFIGURACIONES
...
// PETICIONES
...
// INICIAR SERVIDOR
...

server.js

// VARIABLES 

var especialidad = 'Backend';

Al momento de servir la información agregamos esta variable como parte de la información.

server.js

// PETICIONES

// Cuando exista una petición en el servidor  
server.get('/',function(req,res){
	res.render('especialidades.html', { nombre:especialidad });
});

Ahora en el archivo especialidades.html identificamos el lugar del título Especialidades y la cambiamos por el nombre de la variable con la que se está enviando, en este caso es nombre. Para identificar que es una variable la colocamos entre dos llaves.

Toda la documentación de swig sobre variables la encuentras aquí

views/especialidades.html

<div class="card-block">
	<h4 class="card-title">{{ nombre }}</h4>
</div>

Cancelamos, volvemos a correr el servidor con node server y actualizamos el navegador.

Ahora apreciamos que la palabra Especialidad ha desaparecido y en su lugar aparece el valor de la variable especialidad

Pero no sólo tenemos que cambiar el nombre de la especialidad sino también la imagen, es decir, dos cualidades. Para esto vamos a crear un objeto de javascript que posee la siguiente sintaxis:

server.js

// VARIABLES

var especialidad = {
		nombre: "BACKEND",
		imagen: 'backend.png'	
	};

Es una buena práctica que las variables sean declaradas inicialmente, incluso antes del requerimientos de módulos externos.

Ahora no sólo estamos sirviendo el nombre sino el nombre del archivo de su correspondiente imagen. Por ello alteramos el nombre de la variable con la que se identificará en el template.

server.js

// PETICIONES

// Cuando exista una petición en el servidor  
server.get('/',function(req,res){
	res.render('especialidades.html', { informacion:especialidad });
});

En el template de especialidades cambiamos las variables de título y la dirección de la imagen.

views/especialidades.html

<img class="card-img-top " src="/img/{{informacion.imagen}}" alt="Card image cap">
<div class="card-block">
	<h4 class="card-title">{{ informacion.nombre }}</h4>
</div>

Cancelamos, volvemos a correr el servidor con node server y actualizamos el navegador.

Apreciamos que la imagen ahora también cambia con el icono correspondiente a backend.

Ahora como tenemos 5 especialidades vamos a crear un array con la información de ellas.

server.js

// VARIABLES 
var especialidades = [	
	{
		nombre: 'FRONTEND',
		imagen: 'frontend.png'
	},
	{
		nombre: 'BACKEND',
		imagen: 'backend.png'
	},
	{
		nombre: 'ELECTRONICA',
		imagen: 'electronica.png'
	},
	{
		nombre: 'ANDROID',
		imagen: 'android.png'
	},
	{
		nombre: 'ALGORITMOS',
		imagen: 'algoritmos.png'
	},
];

Cambiamos el nombre de la variable a plural y colocamos categorías a la variable con la que va a ser identificada en el template.

server.js

// PETICIONES

// Cuando exista una petición en el servidor  
server.get('/',function(req,res){
	res.render('especialidades.html', { categorias:especialidades });
});

En el template vamos a utilizar un bucle que hará el recorrido por el array de especialidades que agregamos. La sintaxis de este recorrido la encuentras en la documentación de swig

views/especialidades.html

{% for categoria in categorias %}
	<div class="card m-2 "> 
		<img class="card-img-top " src="/img/{{categoria.imagen}}" alt="Card image cap">
		<div class="card-block">
			<h4 class="card-title">{{ categoria.nombre }}</h4>
		</div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">Nombre y Apellido</li>
		</ul>
	</div>
{% endfor %}

Cancelamos, volvemos a correr el servidor con node server y actualizamos el navegador.

Apreciamos que ahora aparecen las tres especialidades con sus respectivos íconos.

Con esto hemos creado una página dinámica que puede cambiar su presentación con la información que se le brinda en el servidor.

1. El navegador web solicita la página dinámica.
2. El servidor web localiza la página y la envía al servidor de aplicaciones.
3. El servidor de aplicaciones busca instrucciones en la página y la termina.
4. El servidor de aplicaciones pasa la página terminada al servidor web.
5. El servidor web envía la página finalizada al navegador solicitante.

La interacción con base de datos la veremos la próxima semana. Los espero.