Analítica WebAplicación WebComputers, Softwaredesarrollo de paginas webDiseño de paginas webMedios digitalesNiixerPáginas WebPlataformas TecnológicasProgramar en JavaPythonPythonSoftware de programacion

Plataforma web para reserva de espacios comunes, JavaScript y Python

¿Por qué una plataforma web para reserva de espacios comunes del conjunto residencial?

¿No estás cansado de la falta de gestión, los procesos rudimentarios y las confusiones al reservar el salón social, la zona BBQ o la piscina? ¡Es hora de digitalizar la gestión de los espacios comunes para tu conjunto residencial! Lo ideal sería implementar una plataforma web que permita a los residentes reservar de manera fácil, en tiempo real y sin inconvenientes los espacios comunes del conjunto. 

En este artículo, te daremos ideas y guías para el desarrollo de una solución completa, utilizando las tecnologías más populares y los servicios en la nube más potentes, empleando la versatilidad de JavaScript con la potencia de Python para construir una aplicación web escalable y robusta, aprovechando al máximo los servicios de Amazon Web Services (AWS). 

Arquitectura de la aplicación

Frontend: JavaScript

JavaScript , a través de tecnologías como Node.js, ha trascendido su origen en el navegador web para convertirse en un lenguaje de programación universal, es el lenguaje más utilizado para el desarrollo web, su sintaxis es sencilla y flexible. Cuenta con una amplia comunidad de desarrolladores que lo han posicionado como una herramienta esencial para crear aplicaciones del lado del servidor, interfaces de usuario interactivas y soluciones personalizadas para empresas de todos los tamaños. Gigantes tecnológicos como LinkedIn demuestran el poder de JavaScript al emplearlo en sus plataformas.

Logo JavaScript

Backend : Python

Python es un lenguaje interpretado, lo que agiliza el proceso de desarrollo y permite una rápida iteración. Ofrece una sintaxis clara y legible, lo que facilita el desarrollo y mantenimiento del código. Su enfoque en la legibilidad promueve una mayor productividad y reduce la curva de aprendizaje, especialmente para equipos de desarrollo de diversos tamaños. Además, cuenta con una vasta biblioteca estándar y un ecosistema de terceros extremadamente rico, que proporcionan herramientas y módulos para prácticamente cualquier tarea, desde el procesamiento de datos hasta el desarrollo web completo. Frameworks como Django y Flask simplifican enormemente el desarrollo de aplicaciones web, ofreciendo funcionalidades preconstruidas y una estructura sólida.

Logo Python

Base de datos: Amazon DynamoDB

Amazon DynamoDB es una base de datos NoSQL completamente gestionada que ofrece un rendimiento de lectura y escritura de un solo dígito a cualquier escala. Esto significa que puedes manejar picos de tráfico sin preocuparte por el rendimiento de tu base de datos. Además, su modelo de datos flexible te permite almacenar y recuperar datos de forma rápida y eficiente, sin necesidad de definir un esquema rígido de antemano.

Ventajas de DynamoDB para aplicaciones web:

  • Escalabilidad sin límites: DynamoDB se adapta automáticamente a tus necesidades de almacenamiento y procesamiento, lo que te permite escalar tu aplicación sin problemas a medida que crece.
  • Rendimiento predecible: Ofrece un rendimiento de lectura y escritura consistente y de baja latencia, lo que garantiza una experiencia de usuario fluida.
  • Alta disponibilidad: DynamoDB replica tus datos en múltiples regiones para garantizar la durabilidad y la disponibilidad de tu aplicación, incluso en caso de fallos.
  • Modelo de datos flexible: No requiere un esquema predefinido, lo que te permite almacenar datos estructurados y no estructurados en la misma tabla.
  • Facilidad de uso: DynamoDB se integra fácilmente con otras herramientas y servicios de AWS, lo que simplifica la implementación y la gestión de tu aplicación.
  • Pago por uso: Solo pagas por la capacidad de almacenamiento y procesamiento que realmente utilizas, lo que te permite optimizar tus costos.
Logo Amazon DynamoDB

Herramientas para el Desarrollo

Visual Studio Code

Visual Studio Code es una herramienta poderosa y flexible que te ofrece todo lo que necesitas para desarrollar tu página web de manera eficiente y productiva. Su facilidad de uso, personalización y amplia gama de características lo convierten en una excelente opción tanto para desarrolladores principiantes como experimentados , algunas ventajas son:

  • Gratuidad y personalización: VS Code es un editor de código fuente completamente gratuito y de código abierto, lo que significa que puedes personalizarlo a tu gusto con una amplia gama de extensiones para adaptarlo a tus necesidades específicas y a los lenguajes de programación que utilices.
  • Ligereza y velocidad: A pesar de ser altamente personalizable, VSCode destaca por su rapidez y eficiencia, lo que agiliza tu flujo de trabajo y te permite mantenerte concentrado en tu código.
  • Amplia compatibilidad: Es compatible con una gran variedad de lenguajes de programación y marcos de trabajo, incluyendo HTML, CSS, JavaScript, React, Angular, Vue.js y muchos más. Esto lo convierte en una herramienta versátil para cualquier proyecto web.
  • Inteligencia artificial integrada: VSCode incorpora funcionalidades de inteligencia artificial que te ayudan a escribir código de manera más rápida y precisa, como autocompletado inteligente, sugerencias de código y detección de errores en tiempo real.
  • Depuración integrada: Te permite identificar y solucionar problemas en tu código de manera eficiente, gracias a su depurador integrado que te ofrece un control detallado sobre la ejecución de tu aplicación.
  • Control de versiones integrado: Se integra perfectamente con Git, el sistema de control de versiones más popular, lo que facilita la gestión de tus proyectos y la colaboración con otros desarrolladores.
  • Terminal integrado: Puedes acceder a una terminal directamente desde VSCode, lo que te permite ejecutar comandos y gestionar tu proyecto sin salir del editor.
  • Extensa comunidad: Cuenta con una gran comunidad de desarrolladores que crean y comparten extensiones, temas y recursos, lo que garantiza que siempre encuentres nuevas formas de mejorar tu experiencia con VSCode.
Logo Visual Studio Code

Node.js

Node.js es una herramienta de desarrollo de código abierto que permite a los programadores utilizar JavaScript para crear aplicaciones del lado del servidor. Su modelo de ejecución asíncrono lo hace ideal para aplicaciones que manejan muchas conexiones simultáneas, como servidores web o aplicaciones en tiempo real.

Para qué lo usaremos:

  • Ejecutar el servidor de nuestra aplicación backend (utilizando frameworks como Express o NestJS).
  • Manejar solicitudes HTTP.
  • Interactuar con bases de datos como DynamoDB.
Logo Node.js

Desarrolla la aplicación (Paso a paso)

Desarrollo del backend con Python y AWS

  1. Configura el entorno de desarrollo:
    • Instala Python y un editor de código como Visual Studio Code.
    • Crea un nuevo proyecto de Django o Flask.
    • Configura un entorno virtual para gestionar las dependencias.
  2. Crea modelos de datos:
    • Define los modelos para representar las entidades de tu aplicación (Usuario, Espacio, Reserva) en Django o Flask-SQLAlchemy.
  3. Desarrolla las vistas:
    • Crea las vistas para manejar las solicitudes HTTP y devolver las respuestas adecuadas.
  4. Conecta a DynamoDB:
    • Utiliza el SDK de Boto3 para interactuar con DynamoDB.
    • Crea tablas para almacenar los datos de tu aplicación.
  5. Implementa la lógica para el desarrollo de la plataforma web:
    • Desarrolla la lógica para crear, leer, actualizar y eliminar reservas, gestionar usuarios y espacios, y realizar otras operaciones.

Desarrollo del frontend con JavaScript

  1. Configura el entorno de desarrollo:
    • Instala Node.js y npm.
    • Crea un nuevo proyecto con Create React App o Vue CLI.
  2. Crea la interfaz de usuario:
    • Diseña la interfaz utilizando componentes reutilizables.
    • Utiliza una librería de componentes UI como Material UI o Bootstrap.
  3. Consumi la API del backend:
    • Utiliza Fetch API o una librería como Axios para realizar solicitudes HTTP al backend.
    • Mostrar los datos obtenidos del backend en la interfaz de usuario.

Integración y despliegue:

  • Conecta el frontend con el backend utilizando Fetch API o Axios.
  • Implementa la autenticación utilizando Amazon Cognito.
  • Utiliza la extensión AWS Toolkit para desplegar tu aplicación en AWS.
  • Configura un dominio personalizado con Amazon Route 53.

Ejemplos de código para desarrollar:

Python

  • Para definir los modelos:
# models.py
from django.db import models

class Espacio(models.Model):
    nombre = models.CharField(max_length=100)
    capacidad = models.IntegerField()

class Reserva(models.Model):
    espacio = models.ForeignKey(Espacio, on_delete=models.CASCADE)
    usuario = models.ForeignKey(User, on_delete=models.CASCADE)
    fecha_inicio = models.DateTimeField()
    fecha_fin    = models.DateTimeField()
  • Desarrollar las vistas:
# views.py
from rest_framework import viewsets
from .models import Reserva
from .serializers import ReservaSerializer

class ReservaViewSet(viewsets.ModelViewSet):
    queryset = Reserva.objects.all()
    serializer_class = ReservaSerializer   
  • Configurar las URLS:
# urls.py
from django.urls import path, include
from rest_framework import routers
from . import views

router = routers.DefaultRouter()
router.register(r'reservas',    views.ReservaViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

¿Qué podemos concluir?

Desarrollar una plataforma de reservas para espacios comunes personalizada, escalable y robusta utilizando tecnologías como JavaScript, Pythony AWSes un proyecto ambicioso pero totalmente alcanzable. Al combinar la potencia de Visual Studio Code como entorno de desarrollo, la flexibilidad de Python y JavaScript para el backend y frontend, respectivamente, y la escalabilidad de los servicios de AWS, podemos construir soluciones sólidas y adaptables a las necesidades de cualquier negocio.

Este proyecto no solo nos permite adquirir conocimientos en diversas tecnologías, sino que también nos brinda la oportunidad de crear un producto útil y tangible. Desde la planificación inicial hasta el despliegue en la nube, cada etapa del desarrollo nos presenta nuevos desafíos y oportunidades de aprendizaje. Al final del camino, tendremos una aplicación web funcional que puede ser utilizada para gestionar reservas de manera eficiente y automatizada, mejorando así los procesos y la experiencia del usuario.

Créditos: 

Autor: Sara Valentina Guauque Zarrate, Yeimmy Villanueva, Laura Chica y Juan Jimenez

Editor: Mg.  Carlos Iván Pinzón Romero.

Código: UCPI2G2-7

Universidad: Universidad CentralFacultad de Ingeniería y Ciencias Básicas.

Fuentes:

AWS. (2023)|Servicio de bases de datos no relacionales: Amazon DynamoDB. https://aws.amazon.com/es/pm/dynamodb/?gclid=Cj0KCQjw3vO3BhCqARIsAEWblcBgRmxwZ6J1BUxM25gst5k5jE3-xYvnMDHNeewzB3JoCfseR8kdCjEaAjC9EALw_wcB&trk=a24e7032-fe80-48b2-87dc-b9d3f88f695e&sc_channel=ps&ef_id=Cj0KCQjw3vO3BhCqARIsAEWblcBgRmxwZ6J1BUxM25gst5k5jE3-xYvnMDHNeewzB3JoCfseR8kdCjEaAjC9EALw_wcB:G:s&s_kwcid=AL!4422!3!648041768785!e!!g!!aws%20dynamodb!19685311664!143348664382

SlideShare.(2015)|Almacenamiento en la nube. SlideShare.https://es.slideshare.net/slideshow/almacenamiento-en-la-nube-44014314/44014314. 
Abelardo, P. P. A. (2024)| Sistema web para el proceso de reservas de canchas deportivas del área de administración de la empresa Santa María, Lima, 2023. https://repositorio.ucv.edu.pe/handle/20.500.12692/137860 
Almacenamiento en la nube. SlideShare. https://es.slideshare.net/slideshow/almacenamiento-en-la-nube-44014314/44014314. Publicado 28 de enero de 2015.
Barrero, O. (2023, 2 Octubre)| Aclaraciones sobre el uso de espacios comunales en conjuntos residenciales. Alerta Bogotá. https://www.alertabogota.com/noticias/economia-de-bolsillo/aclaran-panorama-pa-quienes-viven-en-conjuntos-residenciales-por-tema 
Bejarano, M. C. (2022, Agosto). Colombia, un país digital. Volumen 3. ANDI. https://www.andi.com.co/Uploads/Colombia%20un%20País%20Digital%20vol%203%20ANDI%20CIDS%202022.pdf 
Goméz A. Conoce las características de AWS Hosting para descubrir si es la mejor opción para tu empresa. Rock Content - ES. https://rockcontent.com/es/blog/aws-hosting/. Published 12 de febrero de 2021. 
Introducción a la Consola de administración de AWS | Centro para desarrolladores de AWS. Amazon Web Services, Inc. https://aws.amazon.com/es/getting-started/hands-on/getting-started-with-aws-management-console/#. 
Programador X. (2021)| Top 25 servicios de Amazon Web Services ☁️ ¿Qué es AWS? YouTube. https://www.youtube.com/watch?v=ym_oHKnoneE.
Python Software Fundation (2024)| Python 3.13 y las últimas tendencias: guía para desarrolladores para 2025. https://pyfound.blogspot.com/2024/10/python-313-and-latest-trends-developers.html

Tutoriales Dongee. (2023)| ¿Qué es Node JS? https://www.dongee.com/tutoriales/que-es-node-js/?tm=tt&ap=gads&aaid=adaFnZvkSdpvp&gad_source=1&gclid=Cj0KCQjw3vO3BhCqARIsAEWblcBMeh8X-99RkmsMH1t0aNoVrxhq6yaJ9O6v58maDjy-_Pi--o3up9AaAqltEALw_wcB
Visual Studio Code. (2023)| Code with Extensions https://code.visualstudio.com/docs/editor/extension-marketplace