Servicio rest con nodejs, express 4 y mysql
Servicio rest con nodejs, express 4 y mysql
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a crear un sencillo registro de usuarios con NodeJS haciendo uso de Express, Sqlite3 y Bootstrap de Twitter para el diseño de las páginas, también haremos uso de las ventanas modales de Bootstrap, seguiremos todos los pasos que hemos tratado en anteriores tutoriales, veremos como enrutar la aplicación y las plantillas jade, el uso de modelos y como exportarlos y también como crear, recibir y enviar formularios.

Así que si tienes cualquier duda, no dudes en visitar los anteriores tutoriales porque sino seguramente andarás algo perdido.

Lo primero de todo será ver el ejemplo en funcionamiento, ya que lo he subido a heroku para poder verlo trabajando.

Introduce passwords equivocados, usuarios que ya existan etc, para poder ver los errores que hemos creado haciendo uso de las ventanas modales de bootstrap de twitter.

Crear un registro de usuarios con NodeJS

Nos colocamos en el directorio donde vayamos a crear el proyecto y escribimos en la terminal los siguientes comandos.

Y a continuación:

Ya tenemos creado el proyecto, ahora necesitamos instalar el paquete de SQLite3, que como ya sabemos, es realmente sencillo, simplemente debemos escribir el siguiente comando en la terminal.

Una vez finalice el proceso, ya podremos hacer uso de todos los recursos de esta librería.

El archivo app.js

Como ya debemos saber, ahora es hora de modificar el archivo app.js para poder sacar el proceso de enrutado de aquí y trasladarlo al archivo routes/index.js, así que abrimos el archivo app.js y reemplazamos todo el código por el siguiente.

Ahora podéis descargar los css y js necesarios para bootstrap, vienen dos carpetas, stylesheets y javascripts, simplemente las debéis reemplazar por las que hay en la carpeta public del proyecto.

Descargar archivos bootstrap de twitter

El modelo user.js

Creamos una carpeta llamada models en la raíz de la aplicación, y dentro creamos un archivo llamado user.js y añadimos el siguiente código, el cuál ya debemos conocer.

Como podemos ver, creamos la instancia de sqlite3, la base de datos, el objeto donde iremos guardando la funcionalidad de nuestra aplicación.

Después tenemos la función createUsersTable la cuál se encarga de eliminar y crear la tabla usuarios, el resto es obtener todos los usuarios y registrarlos, ésto último comprobando antes si existe o no en la tabla usuarios el que intentamos insertar.

Al final del script tenemos una función la cuál simplemente nos devuelve la fecha actual formateada para ingresarla cuando se registre un usuario y hacemos la exportación del objeto para que pueda ser utilizado en nuestro archivo routes/index.js, espero que quede bastante claro.

El archivo routes/index.js

Eliminamos todo el contenido de este archivo y añadimos el siguiente.

Todo esto nos debe sonar, si no es así, visita los anteriores tutoriales porque lo hemos explicado de forma detallada.

Si nos fijamos, tenemos dos vistas, una es la index.jade, que será donde crearemos el formulario de registro, y la otra es users.jade que será donde los mostremos, pero primero de todo, abrimos el archivo views/layout.jade y lo dejamos como el siguiente.

De todos esos archivos, sólo nos falta crear functions.js, que será donde crearemos el código jQuery para procesar el formulario.

Abrimos el archivo index.jade y añadimos el siguiente código, el cuál simplemente crea el formulario y una ventana modal de bootstrap oculta, que mostraremos cuando nosotros digamos haciendo uso de jQuery.

Lo mismo de antes, si tienes dudas, visita el tutorial Rutas y plantillas Jade en Node.js donde explicamos el uso de jade en NodeJS.

Y ahora creamos un nuevo archivo llamado users.jade y lo guardamos en views, a continuación, añadimos el siguiente código, que lo único que hace es mostrar a todos los usuarios en una tabla de bootstrap.

Ahora necesitamos crear el archivo functions.js en la carpeta public/javascripts, el cuál será el encargado de procesar el formulario de registro con ajax, así que lo creamos y dentro añadimos el siguiente código.

Como podemos ver, simplemente detectamos la interacción del usuario con el envío del formulario, y dependiendo de los valores de los campos del formulario y de la respuesta del modelo, mostramos una respuesta u otra.

La función showModal simplemente es para mostrar los errores o el success del formulario, creo que esto es bastante sencillo y no requiere más explicaciones.

Ahora ya es momento de poner a andar nuestra aplicación, así que podemos ejecutar el siguiente comando en nuestra terminal.

O si tenemos nodemon instalado:

Si visitamos http://localhost:3000/ debemos ver sin ningún tipo de problemas el formulario de registro. Pero antes que nada, debemos visitar la ruta http://localhost:3000/createTable para crear la tabla usuarios.

Ahora si, deberíamos poder crear nuevos usuarios sin ningún tipo de problemas, y verlos en http://localhost:3000/users.

No espero que con ésto tengas un formulario de registro en bootstrap, sino que hayas aprendido algo sobre la lógica de NodeJS con otras tecnologías, tales como jQuery, SQLite3, un saludo.

Código en Github