flask
Publicado el por Fortinux

Crear una aplicación web con Python Flask

Python Flask framework

  • Flask es un framework minimalista escrito en Python que permite crear aplicaciones web rápidamente y con un mínimo número de líneas de código.
  • Está basado en la especificación WSGI de Werkzeug y el motor de templates Jinja2, y tiene una licencia BSD.

  • En este workshop iremos paso a paso desarrollando una aplicación en Flask para luego hacer el despliegue en la plataforma de aplicaciones cloud de Heroku https://www.heroku.com/.

  • Como requisito se deberá crear una cuenta gratuita en esa plataforma.

  • Esto nos permitirá al final del mismo tener una aplicación web en Python disponible en Internet y haber desarrollado un proyecto completo de web front end.

  • Iniciamos nuestra tarea creando el ambiente virtual:

# Comandos ejecutados en GNU/Linux
python3 -m venv app/venv
cd app/
source ./venv/bin/activate
# Comandos ejecutados en Windows
python3 -m venv app/venv
cd app/venv/Scripts
./activate
  • Instalamos Flask:
python3 -m pip install flask

flask-icon

  • El fichero requirements.txt sirve para instalar módulos de la aplicación si ésta es cambiada de entorno (Sistema operativo, Servidor, etc.).

  • Se puede crear manualmente e actualizarlo cuando sea necesario escribiendo los nombres de los módulos a medida que se instalan.

  • Como ejemplo, en GNU/Linux creamos el fichero y agregamos Flask en el mismo:

touch requirements.txt
echo "flask" > requirements.txt
  • Posteriormente para instalar todos los módulos en el nuevo entorno se ejecutará:
python3 -m pip install -r requirements.txt
  • La siguiente opción (alternativa a la anterior y preferible) crea el fichero requirements.txt automáticamente.
  • Se suele ejecutar una vez completo el desarrollo de la aplicación y previo a la migración al nuevo entorno.
pip freeze > requirements.txt

Crear la aplicación

  • El primer paso es crear el script de ejecución de la aplicación.
  • Abrimos un fichero que por convención se lo denomina app.py y escribimos el siguiente código modificando el autor y agregando la fecha:
"""
[Aplicación básica del microframework Flask de Python]

Author: Fortinux 
Date: []
"""
from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "<H1>Hola Mundo!</H1>"
  • Para exportar la variable de ambiente FLASK_APP ejecutamos:
export FLASK_APP=app # Bash de Linux
set FLASK_APP=app # Terminal de Linux
$env:FLASK_APP = "app" # Microsoft Powershell
  • Si queremos habilitar el ambiente de desarrollo para no tener que reiniciar la aplicación cada vez que hacemos cambios en ella, exportamos la variable de ambiente:
export FLASK_ENV=development # Bash de Linux
set FLASK_ENV=development # Terminal de Linux
$env:FLASK_ENV = "development" # Microsoft Powershell
  • Para ejecutar la aplicación:
flask run

  • Se agrega el argumento --host=0.0.0.0 para publicarlo en la red local.

  • Se accede a la aplicación en nuestra máquina desde la URL 127.0.0.1:5000 en el navegador.

  • Para acceder desde la red local se utiliza la IP de la máquina donde está alojada la aplicación.

  • Para crear las páginas servicios, contacto y admin de la aplicación:

from flask import Flask, redirect, url_for
app = Flask(__name__)

@app.route("/")
def home():
    return "<H1>Esta es la página principal</H1>"

@app.route("/servicios")
def servicios():
    return "<H1>Esta es la página de servicios</H1>"

@app.route("/contacto")
def contacto():
    return "<H1>Esta es la página de contacto</H1>"

@app.route("/admin")
def admin():
    return "<H1>Esta es la página de admin</H1>"

Agregar plantillas

  • Para agregar plantillas de diseño web se utilizará Bootstrap.

  • Bootstrap Front-end open source toolkit
    https://getbootstrap.com/

  • Creamos el fichero index.html en un nuevo directorio llamado templates.

  • Esta página HTML será la página principal de la aplicación.

<!doctype html>
<html>
<head>
  <title>Página principal</title>
    <meta name="description" content="Página principal">
    <meta name="keywords" content="HTML template - plantilla">
</head>

<body>
    {% extends "base.html" %}
    {% block title %}Página principal{% endblock %}
    {% block content %}
    <h2>Esta es la página principal</h2>
    <p>Un párrafo de bienvenida.</p>
    {% endblock %}
</body>
</html>
  • El siguiente paso es crear una plantilla base para toda la aplicación.
  • Tendrá de nombre base.html y deberá ser alojada en el directorio templates como el resto de las plantillas que se irán agregando a la aplicación.
<!doctype html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <meta name="description" content="Página principal">
    <meta name="keywords" content="html template">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" 
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="https://fortinux.com/">fortinux</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
    aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Página Principal</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="servicios">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contacto">Contacto</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="admin">Admin</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
            data-bs-toggle="dropdown" aria-expanded="false">Menú desplegable</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Submenú</a></li>
            <li><a class="dropdown-item" href="#">Otro submenú</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Otro enlace</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deshabilitado</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>
        <h1>Nombre de la organización</h1>

        {% block content %}{% endblock %}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" 
crossorigin="anonymous"></script>
</body>
</html>
  • Actualizamos el script ejecutable app.py:
from flask import Flask, redirect, url_for, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/servicios")
def servicios():
    return render_template("base.html")

@app.route("/contacto")
def contacto():
    return render_template("base.html")

@app.route("/admin")
def admin():
    return render_template("base.html")

if __name__ == "__main__":
    app.run(debug=True)    # Run in debug mode

Deploy a Heroku

  • Una vez que tenemos nuestra aplicación en Flask, ejecutamos git init para inicializar nuestro repositorio.
git init
# Created by https://www.toptal.com/developers/gitignore/api/flask
# Edit at https://www.toptal.com/developers/gitignore?templates=flask
### Flask ###
instance/*
!instance/.gitignore
.webassets-cache
.env
...
# Environments
.venv
env/
venv/
ENV/
env.bak/
venv.bak/

  • Ahora se puede hacer un deploy a la plataforma de aplicaciones cloud de Heroku.

  • https://www.heroku.com/home

  • Esta plataforma ofrece un ambiente cloud en el cual podremos desplegar nuestra aplicación apenas creada.

  • Basta crear una cuenta gratuita en https://signup.heroku.com/

  • Luego se deberá descargar e instalar la herramienta de Heroku:

# Ejecutar en GNU/Linux
curl https://cli-assets.heroku.com/install.sh | sh
heroku login
  • Agregamos el fichero Procfile y actualizamos requirements para poder hacer más adelante el despliegue (deploy):
# Ejecutar en GNU/Linux
echo "web: gunicorn app:app" > Procfile
  • En Windows crear el fichero de nombre Procfile con codificación UTF-8.
  • Escribir en el mismo la siguiente línea:
web: gunicorn app:app
  • Instalamos gunicorn y actualizamos el fichero requirements.txt
python3 -m pip install gunicorn
python3 -m pip freeze > requirements.txt
  • Creamos el commit con todos los cambios hechos hasta ahora en la aplicación:
git add .
git commit -m "Primer commit"
  • Vamos al portal de Heroku y creamos una nueva app.
  • Para este ejemplo, el nombre es curso2021oct.
  • Agregamos el repositorio a nuesto entorno local de desarrollo:
heroku git:remote -a curso2021oct
  • Ahora finalmente podemos hacer el deploy:
git push heroku master

Recursos

Imagen de portada: Foto de PhotoMIX Company de Pexels
https://www.pexels.com/es-es/foto/ordenador-portatil-internet-tecnologia-ordenador-6675402/

Si buscas un formador para realizar este curso u otra actividad formativa (webinar, workshops, bootcamps, etc.) en tu organización, me puedes ubicar a través de la página de contacto. Muchas gracias.

Si te ha gustado el artículo puedes ayudarme haciendo una donación con criptomonedas. Gracias!!!