Tutorial paso a paso para crear una aplicación web básica con Flask y Python

Bienvenido a este tutorial Flask pensado para desarrolladores principiantes e intermedios que quieran iniciarse en el desarrollo web Python. Aquí aprenderás desde la instalación y configuración del entorno, hasta la creación de rutas, manejo de formularios, integración con una base de datos SQLite y, finalmente, el despliegue básico. Vamos a construir una aplicación web Flask sencilla, clara y funcional, aplicando buenas prácticas para que tu aprendizaje sea eficiente y disfrutable.

¿Qué es Flask y por qué usarlo?

Flask es un micro-framework para Python que facilita el desarrollo backend de manera rápida y flexible. Es perfecto para proyectos pequeños o medianos y para quienes comienzan en programación web, porque no impone demasiadas estructuras rígidas.

Ventajas de Flask:

Ligero y fácil de aprender
Gran documentación y comunidad
Flexibilidad para crecer con el proyecto

1. Instalación y configuración del entorno

Antes de comenzar, asegúrate de tener instalado Python (>=3.6). Puedes verificarlo con:

python --version

1 2	python --version

Si aún no tienes Python, descárgalo desde python.org.

Paso 1: Crear entorno virtual

Para mantener las dependencias organizadas, crea un entorno virtual:

python -m venv venv

1 2	python -m venv venv

Activa el entorno:

En Windows:

  venv\Scripts\activate

1 2	venv\Scripts\activate

En MacOS/Linux:

  source venv/bin/activate

1 2	source venv/bin/activate

Paso 2: Instalar Flask

Con el entorno activado, instala Flask:

pip install Flask

1 2	pip install Flask

Para verificar que Flask se instaló correctamente:

python -c "import flask; print(flask.__version__)"

1 2	python -c "import flask; print(flask.__version__)"

2. Creación de la estructura básica del proyecto

Organiza los archivos así:

/flask_app
 ├── app.py
 ├── templates/
 │    └── index.html
 └── static/
      └── style.css

/flask_app

├── app.py

├── templates/

│ └── index.html

└── static/

└── style.css

app.py: archivo principal de la aplicación
templates/: carpeta para las vistas HTML
static/: carpeta para archivos estáticos (CSS, JS, imágenes)

3. Crear la aplicación Flask con rutas y vistas

Dentro de app.py, inicia con el código base:

from flask import Flask, render_template

app = Flask(__name__)

# Ruta para la página principal
@app.route('/')
def index():
    # Renderiza el archivo HTML index.html dentro de templates/
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)  # Arranca la app en modo debug

from flask import Flask, render_template

app = Flask(__name__)

# Ruta para la página principal

@app.route('/')

def index():

# Renderiza el archivo HTML index.html dentro de templates/

return render_template('index.html')

if __name__ == '__main__':

app.run(debug=True) # Arranca la app en modo debug

4. Crear la vista HTML básica

Ahora crea el archivo templates/index.html con contenido simple:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi App Flask Básica</title>
    <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
    <h1>Bienvenido a mi aplicación Flask</h1>
    <p>Este es un tutorial para crear una aplicación web Flask básica.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Mi App Flask Básica</title>

</head>

<body>

<h1>Bienvenido a mi aplicación Flask</h1>

<p>Este es un tutorial para crear una aplicación web Flask básica.</p>

</body>

</html>

5. Manejo de formularios en Flask

Queremos que el usuario pueda enviar datos. Para ello crearemos un formulario simple que capture un nombre y salude al usuario.

Paso 1: Modificar la ruta para GET y POST

Actualiza app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    saludo = None
    if request.method == 'POST':
        nombre = request.form.get("nombre")
        if nombre:
            saludo = f"¡Hola, {nombre}! Bienvenido a Flask."
    return render_template('index.html', saludo=saludo)

if __name__ == '__main__':
    app.run(debug=True)

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])

def index():

saludo = None

if request.method == 'POST':

nombre = request.form.get("nombre")

if nombre:

saludo = f"¡Hola, {nombre}! Bienvenido a Flask."

return render_template('index.html', saludo=saludo)

if __name__ == '__main__':

app.run(debug=True)

Paso 2: Modificar el formulario HTML para POST

Actualiza templates/index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi App Flask Básica</title>
    <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
    <h1>Bienvenido a mi aplicación Flask</h1>

    <form method="post">
        <label for="nombre">Ingresa tu nombre:</label>
        <input type="text" id="nombre" name="nombre" required />
        <button type="submit">Saludar</button>
    </form>

    {% if saludo %}
        <p><strong>{{ saludo }}</strong></p>
    {% endif %}

</body>
</html>

<!DOCTYPE html>

<head>

<title>Mi App Flask Básica</title>

</head>

<body>

<h1>Bienvenido a mi aplicación Flask</h1>

<label for="nombre">Ingresa tu nombre:</label>

<button type="submit">Saludar</button>

</form>

{% if saludo %}

<p><strong>{{ saludo }}</strong></p>

{% endif %}

</body>

</html>

Esta forma sencilla de interactuar con usuarios es una base esencial para la programación backend para principiantes.

6. Integración con base de datos SQLite

SQLite es una base de datos liviana que se integra muy bien con Flask para aplicaciones simples.

Paso 1: Instalar biblioteca para SQLite

Python ya trae en su biblioteca estándar el módulo sqlite3, así que no hace falta instalar nada extra.

Paso 2: Crear conexión y tabla

Vamos a almacenar los nombres ingresados.

Agrega en app.py la función para conectar y crear tabla:

import sqlite3

DATABASE = 'nombres.db'

def get_db_connection():
    conn = sqlite3.connect(DATABASE)
    conn.row_factory = sqlite3.Row  # Para obtener filas tipo diccionario
    return conn

def init_db():
    conn = get_db_connection()
    with conn:
        conn.execute('''
            CREATE TABLE IF NOT EXISTS usuarios (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                nombre TEXT NOT NULL
            );
        ''')
    conn.close()

# Llama a init_db cuando inicies la app para asegurar que la tabla exista
init_db()

import sqlite3

DATABASE = 'nombres.db'

def get_db_connection():

conn = sqlite3.connect(DATABASE)

conn.row_factory = sqlite3.Row # Para obtener filas tipo diccionario

return conn

def init_db():

conn = get_db_connection()

with conn:

conn.execute('''

CREATE TABLE IF NOT EXISTS usuarios (

id INTEGER PRIMARY KEY AUTOINCREMENT,

nombre TEXT NOT NULL

);

''')

conn.close()

# Llama a init_db cuando inicies la app para asegurar que la tabla exista

init_db()

Paso 3: Guardar datos del formulario en la base

Modifica la función index() para insertar:

@app.route('/', methods=['GET', 'POST'])
def index():
    saludo = None
    if request.method == 'POST':
        nombre = request.form.get("nombre")
        if nombre:
            conn = get_db_connection()
            conn.execute('INSERT INTO usuarios (nombre) VALUES (?)', (nombre,))
            conn.commit()
            conn.close()
            saludo = f"¡Hola, {nombre}! Gracias por tu registro."
    return render_template('index.html', saludo=saludo)

@app.route('/', methods=['GET', 'POST'])

def index():

saludo = None

if request.method == 'POST':

nombre = request.form.get("nombre")

if nombre:

conn = get_db_connection()

conn.execute('INSERT INTO usuarios (nombre) VALUES (?)', (nombre,))

conn.commit()

conn.close()

saludo = f"¡Hola, {nombre}! Gracias por tu registro."

return render_template('index.html', saludo=saludo)

7. Mostrar datos almacenados

Queremos una ruta para mostrar todos los nombres guardados.

Agrega ruta /usuarios

@app.route('/usuarios')
def usuarios():
    conn = get_db_connection()
    usuarios = conn.execute('SELECT * FROM usuarios').fetchall()
    conn.close()
    return render_template('usuarios.html', usuarios=usuarios)

@app.route('/usuarios')

def usuarios():

conn = get_db_connection()

usuarios = conn.execute('SELECT * FROM usuarios').fetchall()

conn.close()

return render_template('usuarios.html', usuarios=usuarios)

Crea la plantilla `templates/usuarios.html`:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lista de Usuarios</title>
    <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
    <h1>Usuarios Registrados</h1>
    <ul>
    {% for user in usuarios %}
        <li>{{ user.nombre }}</li>
    {% else %}
        <li>No hay usuarios registrados.</li>
    {% endfor %}
    </ul>
    <a href="/">Volver al inicio</a>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Lista de Usuarios</title>

</head>

<body>

<h1>Usuarios Registrados</h1>

<ul>

{% for user in usuarios %}

<li>{{ user.nombre }}</li>

{% else %}

<li>No hay usuarios registrados.</li>

{% endfor %}

</ul>

<a href="/">Volver al inicio</a>

</body>

</html>

8. Despliegue básico con Flask

Para entornos de producción, se aconseja usar un servidor WSGI como Gunicorn, pero para aprender, puedes desplegar localmente o en plataformas gratuitas como PythonAnywhere o Heroku.

Ejecución local

Solo ejecuta:

python app.py

1 2	python app.py

Visita http://127.0.0.1:5000/ en tu navegador.

Despliegue en Heroku (resumen rápido)

Instala Heroku CLI y loguéate.
Crea un archivo Procfile con:

web: gunicorn app:app

1 2	web: gunicorn app:app

Crea requirements.txt:

pip freeze > requirements.txt

1 2	pip freeze > requirements.txt

Inicializa git y sube el proyecto a Heroku:

git init
git add .
git commit -m "deploy app"
heroku create my-flask-app
git push heroku master
heroku open

git init

git add .

git commit -m "deploy app"

heroku create my-flask-app

git push heroku master

heroku open

Heroku instalará dependencias y levantará tu app automáticamente.

(Requiere que instales gunicorn en tu entorno: pip install gunicorn)

Buenas prácticas al desarrollar con Flask

Utiliza entornos virtuales para mantener dependencias controladas.
Nunca desactives debug en producción.
Valida y sanitiza entradas de usuario.
Usa plantillas separadas para mantener tu código limpio.
Documenta tu código con comentarios claros.
Usa blueprints para proyectos de mayor escala.

Conclusión

¡Felicidades! Has creado una aplicación web Flask básica que maneja rutas, formularios, almacenamiento en base de datos SQLite y te da la base para desplegar. Ahora puedes seguir ampliando tu conocimiento explorando:

Autenticación de usuarios
Mejorar la interfaz con CSS y JS
Validación avanzada con WTForms
Uso de ORM como SQLAlchemy

Te invitamos a que experimentes y construyas proyectos propios con Flask. Recuerda que la práctica constante es la clave para dominar la programación backend para principiantes.

¿Quieres seguir aprendiendo? Suscríbete a nuestro blog para más tutoriales y consejos prácticos de desarrollo web Python.

¡A programar y crear! 🚀

Tutorial paso a paso para crear una aplicación web básica con Flask y Python

¿Qué es Flask y por qué usarlo?

Ventajas de Flask:

1. Instalación y configuración del entorno

Paso 1: Crear entorno virtual

Paso 2: Instalar Flask

2. Creación de la estructura básica del proyecto

3. Crear la aplicación Flask con rutas y vistas

4. Crear la vista HTML básica

5. Manejo de formularios en Flask

Paso 1: Modificar la ruta para GET y POST

Paso 2: Modificar el formulario HTML para POST

6. Integración con base de datos SQLite

Paso 1: Instalar biblioteca para SQLite

Paso 2: Crear conexión y tabla

Paso 3: Guardar datos del formulario en la base

7. Mostrar datos almacenados

Agrega ruta /usuarios

Crea la plantilla templates/usuarios.html:

8. Despliegue básico con Flask

Ejecución local

Despliegue en Heroku (resumen rápido)

Buenas prácticas al desarrollar con Flask

Conclusión

Crea la plantilla `templates/usuarios.html`: