La idea es tener un formulario con el que se suba una imagen en formato png y se optimice con un optipng o alguna librería parecida. Si además, podemos ir informando al cliente del avance del proceso de upload y optimización en tiempo real, pues mejor que mejor.
En el ejercicio me gustaría probar las siguientes herramientas:
- Express (http://expressjs.com/). Se trata de un framework de desarrollo web inspirado en sinatra.
- Jade (https://github.com/visionmedia/jade). Una herramienta de templating para node.js muy basada en haml (http://haml-lang.com/)
- Connect-form. (https://github.com/visionmedia/connect-form) Un middle-ware para la subida de archivos basado en node-formidable. Node-formidable (https://github.com/felixge/node-formidable) es un modulo para parsear datos de formularios y especialmente para uploads
- Socket.io. (http://socket.io/) que permite gestionar de manera sencilla la comunicación en tiempo real entre navegador y servidor con soporte multinavegador.
De momento, os presento unos ejemplos de como se usan las herramientas. En los siguientes posts iré contando los avances que haga en el ejercicio y como iré usando las distintas piezas (con más o menos acierto).
Express.js
Resulta muy cómodo para responder a urls amigables y agregar middleware:
var app = require('express').createServer(); //middleware para logs app.use(express.logger({ format: ':method :url' })); app.get('/', function(req, res){ res.send('Hola mundo'); }); //urls amigables con parámetros app.get('/usuario/:id', function(req, res){ res.send('Usuario ' + req.params.id); }); app.listen(8000);
Jade
Al más puro estilo haml, una plantilla como
!!! 5 html(lang="en") head title= pageTitle script(type='text/javascript') if (foo) { bar() } body h1 Jade - node template engine #container - if (youAreUsingJade) p You are amazing - else p Get on it!
pasa a ser
<!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if(foo) { bar() } </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container"> <p>You are amazing</p> </div> </body> </html>
Connect-form
Para gestionar los uploads de ficheros (para una app de express):
app.post('/', function(req, res, next){ // connect-form adds the req.form object // we can (optionally) define onComplete, passing // the exception (if any) fields parsed, and files parsed req.form.complete(function(err, fields, files){ if (err) { next(err); } else { console.log('\nuploaded %s to %s' , files.image.filename , files.image.path); res.redirect('back'); } }); // We can add listeners for several form // events such as "progress" req.form.on('progress', function(bytesReceived, bytesExpected){ var percent = (bytesReceived / bytesExpected * 100) | 0; process.stdout.write('Uploading: %' + percent + '\r'); }); });
Socket.io
La gestión de las comunicaciones entre cliente y servidor se realiza en base a eventos.
En el servidor:
var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); });
En el cliente:
<script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); </script>
No hay comentarios:
Publicar un comentario