Node.js / Numeros fibonacci

Bienvenidos sean a este post, hoy agregaremos el primer codigo a un aplicacion creada mediante Express.

Nota:
En caso de no tener la aplicacion base les recomiendo ir a este post para crearla mediante Express.

Para nuestra primera aplicacion vamos a hacer una que nos devuelva una secuencia fibonacci, vayamos al archivo app.js de nuestra aplicacion base y tomaremos el siguiente segmento del codigo:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

Y lo modificaremos de la siguiente manera:

var express = require('express');
var hbs = require('hbs');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');

var fibonacciRouter = require('./routes/fibonacci');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
hbs.registerPartials(path.join(__dirname, 'partials'));

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);

app.use('/fibonacci', fibonacciRouter);

Si lo comparan con el codigo anterior solamente agregamos las lineas resaltadas en negrita, donde en la primera implementaremos a hbs, el template Handlebars, la siguiente modificacion sera agregar el router para nuestra aplicacion, este aun no existe pero agregamos la ubicacion donde estara, tambien eliminamos a /users porque no lo usaremos en este ejemplo, la tercer linea sera para registrar parciales, son templates que podemos llamar desde otros para su reutilizacion, pero sobre esto hablaremos en un momento, por ultimo establecemos la direccion URL de nuestra aplicacion y cual sera el router que debe utilizar, nuestro siguiente paso sera crear un nuevo archivo en el mismo directorio de app.js con el nombre de math.js y le agregaremos el siguiente codigo:

math.js

exports.fibonacci = function(n) {
        if (n === 0) return 0;
        else if (n === 1 || n === 2) return 1;
        else return exports.fibonacci(n-1) + exports.fibonacci(n-2);
};

Este sera una funcion simple que devolvera la secuencia de fibonacci, recuerden que es el total de la suma de la secuencia de los dos numeros previos, y en este caso usamos funcion redundante para llamarse asi misma hasta que se cumple alguna de las dos condiciones primeras, ya tenemos el encargado de generar el resultado.

Lo siguiente sera trabajar con nuestras vistas, en el directorio tendremos varios archivos entre ellos el layout.hbs que se encargara de establecer nuestro diseño de pagina basico, despues tenemos el archivo index.hbs con el siguiente codigo:

<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>

Y lo modificaremos de la siguiente manera:

<h1>{{title}}</h1>
{{> navbar}}
<p>{{title}}</p>

La modificacion que agregamos esta relacionada al metodo registerPartials, porque en ese momento registramos un directorio para que almacene los templates que invocaremos en esta etiqueta, si se preguntan por este archivo este sera mostrado en el body de la pagina creada por layout.hbs, con esto comentado nuestro siguiente paso sera crear el archivo que usaremos como parcial, para ello debemos crear un nuevo directorio llamado partials y en este crearemos un archivo llamado navbar.html y le agregaremos el siguiente codigo:

partials/navbar.html

<div class="navbar">
<p><a href='/'>Inicio</a> | <a href='/fibonacci'>Fibonacci</a></p>
</div>

En este caso es una pagina simple con dos links, el primero para volver al inicio y el segundo para ir a nuestra aplicacion, nuestro siguiente paso sera crear una nueva vista para ello en el directorio views deben crear un archivo con el nombre de fibonacci.hbs y le agregaremos el siguiente codigo:

views/fibonacci.hbs

<h1>{{title}}</h1>
{{> navbar}}
{{#if fiboval}}
        <p>Fibonacci para {{fibonum}} es {{fiboval}}</p>
        <hr/>
{{/if}}
<p>Ingresa un nummero para ver su numero Fibonacci</p>
<form name='fibonacci' action='/fibonacci' method='get'>
<input type='text' name='fibonum'/>
<input type='submit' value='Ingresar'/>
</form>

Esta contendra el formulario donde ingresaremos el valor a procesar y tambien mostrara el resultado de la operacion sobre este, nuestro siguiente paso sera el ruteo y para ello modificaremos el siguiente segmento de codigo del archivo index.js en el directorio routes:

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

De la siguiente manera:

router.get('/', function(req, res, next) {
  res.render('index',
        { title: 'Bienvenido al calculador de Fibonacci' });
});

En este caso solamente cambiamos el titulo para indicar que sera nuestra aplicacion, para nuestra siguiente modificacion nos mantenemos en el directorio routes y crearemos un nuevo archivo con el nombre de fibonacci.js y le agregaremos el siguiente codigo:

routes/fibonacci.js

var express = require('express');
var router = express.Router();

const math = require('../math');
router.get('/', function(req, res, next) {
        if (req.query.fibonum) {
                res.render('fibonacci', {
                        title: 'Calcular numeros fibonacci',
                        fibonum: req.query.fibonum,
                        fiboval: math.fibonacci(req.query.fibonum)
                });
        } else {
                res.render('fibonacci', {
                        title: 'Calcular numeros fibonacci',
                        fiboval: undefined
                });
        }
});

Primero crearemos un objeto para utilizar a Express, despues crearemos otro que sera nuestro router, y luego crearemos un objeto del script que agregamos al comienzo, nuestro siguiente paso sera mediante get con el objeto router aqui manejaremos los tres argumentos para el ciclo de solicitud-respuesta, nuestro primer condicional verifica si pasamos un valor en fibonum, el campo del form que tendra el valor a procesar, en caso de ser verdadero mediante render mostraremos a fibonacci y le pasaremos tres valores para ingresarlos a la vista:

• title, sera para asignar un titulo al documento
• fibonum, sera el valor que recibimos
• fiboval, sera el valor devuelto por la funcion fibonacci

Despues tendremos un else donde sino pasamos un valor sera para informar que no se definio ninguno, en este caso pasamos el mismo titulo y el valor undefined, con esto comentado solo nos resta probarlo para ello lo hharemos mediante el siguiente video

En el video vemos como funciona no solamente los links de cada pagina sino tambien como al ingresarle un valor nos devuelve el valor de la secuencia fibonacci, con esto hemos completado nuestra primer aplicacion pero esto lo mejoraremos un poco mas, antes de finalizar les dejo un link con todo los archivos de este proyecto:

En resumen, hoy hemos creado la primera aplicacion con node.js, una que se encarga de calcular la secuencia fibonacci de cualquier numero informado, hemos creado todos los archivos necesarios, asi como tambien hemos modificado algunos archivos de la aplicacion base creada con Express, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.