Nueva Historia

Construyendo un servidor web con Python y Flask

por Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

Demasiado Largo; Para Leer

Este artículo te guiará en la creación de un servidor web simple con Python y el marco Flask. Aprenderás conceptos clave como el enrutamiento, la creación de plantillas y el manejo de solicitudes HTTP, todo mientras creas una aplicación web funcional.

featured image - Construyendo un servidor web con Python y Flask

La era digital exige experiencias web dinámicas e interactivas. La creación de un servidor web es la piedra angular de este panorama digital, ya que le permite crear aplicaciones que van más allá de las páginas HTML estáticas. Python, con su sintaxis elegante y sus amplias bibliotecas, proporciona una base sólida para el desarrollo web. Flask, un microframework liviano y versátil, simplifica aún más el proceso. Al combinar la flexibilidad de Python con el enfoque optimizado de Flask, los desarrolladores pueden construir servidores web robustos de manera rápida y eficiente. Este recorrido profundiza en los conceptos básicos del desarrollo web, desde el manejo de solicitudes y respuestas HTTP hasta el enrutamiento y la creación de plantillas, lo que le permite crear aplicaciones web atractivas y funcionales que puedan conectar e informar al mundo.

«La web se está convirtiendo en la plaza principal de la aldea global del mañana». Bill Gates

Prerrequisitos

Python 3.x
Matraz

Instalar Flask usando pip:

 pip install flask

El código

A continuación se muestra el código completo para un sistema de reservas de restaurante simple:

 from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/submit', methods=['POST']) def submit(): # Extract form data name = request.form['name'] phone = request.form['phone'] email = request.form['email'] date = request.form['date'] time = request.form['time'] # Create a message for the result page message = ( f"Hello, {name.split()[0]}! Your reservation has been booked for {date} at {time}. " f"A reminder has been sent to {phone} and {email}" ) return render_template('result.html', message=message) if __name__ == '__main__': app.run(debug=True)

Importación de módulos Flask : comenzamos importando los módulos necesarios de Flask. Flask es la clase principal de nuestra aplicación, render_template se utiliza para representar plantillas HTML y request se utiliza para gestionar los datos entrantes del formulario.
Creando la aplicación Flask : Creamos una instancia de la clase Flask, que será nuestra aplicación WSGI (Web Server Gateway Interface).
Definición de rutas :
- Ruta de índice ('/') : esta ruta representa la plantilla index.html , que debe contener el formulario para que los usuarios ingresen los detalles de su reserva.
- Ruta de envío ('/submit') : esta ruta gestiona el envío del formulario. Extrae los datos del formulario mediante request.form y crea un mensaje de confirmación. Luego, el mensaje se pasa a la plantilla result.html para su representación.
Ejecutando la aplicación:

 python app.py

Modo de depuración : si su app.py incluye app.run(debug=True) , el servidor se iniciará en modo de depuración, lo que resulta útil para el desarrollo. Proporciona mensajes de error detallados y recarga automáticamente el servidor cuando realiza cambios en su código.

Puerto y host : de forma predeterminada, Flask se ejecuta en http://127.0.0.1:5000/ . Si necesita cambiar el host o el puerto, puede modificar la llamada app.run() en su app.py :

 if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True)

Índice.html

El archivo index.html sirve como interfaz de usuario para el sistema de reservas y cuenta con un formulario en el que los usuarios pueden introducir sus datos, como nombre, número de teléfono, correo electrónico, fecha y hora para reservar una mesa. Está diseñado con CSS para ofrecer una experiencia visualmente atractiva y fácil de usar. Una vez enviados, los datos del formulario se envían al servidor para su procesamiento.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Restaurant Table Booking</title> <style> body { font-family: Arial, sans-serif; background-image: url('https://img.freepik.com/premium-vector/delicious-food-menu-landing-page-template-homepage-design_631465-116.jpg?w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); max-width: 300px; width: 100%; } h1 { text-align: center; color: #333; } label { display: block; margin-bottom: 8px; color: #555; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="form-container"> <h1>Book a Table</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="phone">Phone Number:</label> <input type="tel" id="phone" name="phone" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="date">Date:</label> <input type="date" id="date" name="date" required> <label for="time">Time:</label> <input type="time" id="time" name="time" required> <input type="submit" value="Submit"> </form> </div> </body> </html>

Resultado.html

El archivo result.html muestra un mensaje de confirmación al usuario después de enviar el formulario. Muestra dinámicamente los detalles de la reserva, confirma la reserva y garantiza que se haya enviado un recordatorio a la información de contacto proporcionada.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reservation Confirmation</title> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-image: url('https://img.freepik.com/free-vector/minimal-doodle-frame-background-social-story-highlight_53876-97970.jpg?t=st=1735447681~exp=1735451281~hmac=d8f33db86d2b336838279674afb91df8c2089c7e8be13d316dc26982e0b30ac2&w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; } .form-container { background-color: rgba(0, 0, 0, 0.7); padding: 40px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); max-width: 400px; width: 100%; text-align: center; } h1 { font-family: 'Lobster', cursive; font-size: 32px; margin-bottom: 20px; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body> <div class="form-container"> <h1>Reservation Confirmed!</h1> <p>{{ message }}</p> </div> </body> </html>

Reflexiones finales

Hemos profundizado en los principios básicos del desarrollo web, desde el manejo de solicitudes HTTP hasta la representación de contenido dinámico, sentando una base sólida para futuros proyectos. La web es un paisaje en constante evolución, repleto de oportunidades para la innovación y la creatividad. Acepte este desafío, continúe explorando las vastas posibilidades del desarrollo web y contribuya al tapiz en constante crecimiento de Internet.