Sistema de reservas

Vamos a construir un pequeño sistema de reservas que va contener un formulario donde las personas ingresan sus datos y también una tabla donde vamos a visualizar todas las reservas registradas. El stack que vamos a manejar se va comportar de la siguiente manera:

Express para montar nuestro server y servir nuestros assets, rutas y vistas: Comenzaremos a construir nuestro index.js, el cual va configurar nuestro server y enlazar todo el skeleton que necesitamos para que funcione el proyecto adecuadamente. El index se ve así:

Primero llamamos las librerias que necesitamos, configuramos e indicamos en cuales folders se van a ubicar nuestras vistas incluyendo el layout y los partials. Además indicamos que vamos a usar Handlebars como sistema de plantillas para el front. Luego de ello, escribimos las rutas principales que va tomar el server, en este caso serían index y admin.

Ahora, vamos a configurar nuestras rutas el cual se va crear dentro de una carpeta llamada routes. La ruta admin solamente va servir la vista que contendrá la tabla donde vamos a visualizar las reservas creadas. La ruta index va visualizar la vista donde contendremos el formulario de reserva. Cabe destacar que, si nosotros pensamos en que nuestro formulario debe estar en una landing page, deberíamos poder configurar todo lo que se refiere a SEO. Entonces, bajo este stack, podemos a través de las rutas que sirven las vistas a pasarles los metaTags de title, keywords y description.

Después, vamos a configurar nuestras vistas, tanto la estructura como el diseño. Creamos una carpeta llamada views y dentro de ella otra carpeta llamada layout. En layout vamos a contener la estructura principal de nuestras vistas, donde llamaremos todos nuestros assets y las librerías que vamos a usar, ya sea scripts js que vamos a programar como CDNs. Debemos tener en cuenta que, también se va configurar los datos que a través de las rutas se pasan a las vistas para implementar el SEO.

Luego, vamos a maquetar nuestras vistas. Primero el formulario del index con sus respectivos labels que van a mostrar errores de validación, inputs y el botón que ejecuta el registro. Después, maquetamos nuestra tabla en la vista admin que va mostrar la lista de reservas creadas.

Al terminar de maquetar, pasamos a programar las funciones js para que todo se ejecute. Primero, como vamos a usar firebase y firestore como DB creamos nuestro proyecto en firebase y configuramos nuestra instancia en el sistema de reservas.

Luego escribimos las funciones que van a permitir crear las reservas, entre ellas tenemos:

getData() Se va traer los labels, los inputs y los values de los inputs. Todo esto para poder ejecutar lo siguiente:

validate() valida que todos los datos sean obligatorios y maneja los estilos de alerta a los usuarios en caso de errores.

reserve() En este punto enviamos los datos del formulario a firestore, una vez validado el formulario. La colección que vamos a usar se llama bookings. Recordemos que, firestore es una base de datos no relacional, entonces siempre nos vamos a referir a colecciones y no a tablas.

cleanInputs() Es una función que limpia los inputs una vez creada la reserva.

Cabe destacar que integramos Swit Alert para poder mostrar un modal bonito que avise al usuario que la reserva se ha ejecutado exitosamente.

Puedes ver todo el codigo javascript que ejecuta la validación y reserva dando CLICK AQUÍ

Para finalizar nuestro proyecto, vamos a escribir la función que va listar nuestras reservas y pintar los datos en la vista admin, de igual forma, puedes ver el código javascript que se encarga de esta tarea CLICK AQUÍ

Vamos hacia la ruta /admin y veremos lo siguiente:

En Firebase podemos ver los datos dentro de firestore y verificamos la info:

Nuestra aplicación ha sido desplegada en now.js y pueden verla en tiempo real AQUÍ

Con esto hemos finalizado nuestro pequeño sistema de reservas. Esto permite tener una entrada muy suave al desarrollo de aplicaciones web a programadores que recien empiezan porque la curva de aprendizaje es realmente baja en comparación con otros stacks. Espero que les haya gustado, cualquier duda me avisan!

Saludos!

Sistemas de reservas

Usando Html, Css, Javascript, Express.js, Handlebars y Firebase