Alto Código: mayo 2022

Utilizaremos un servidor Flask que nos permitirá disponer de la página web programando en Python.

Vamos a trabajar viendo la web en nuestro propio ordenador, esto es, la página se verá en localhost y posteriormente se podría desplegar en un servidor Flask externo.

Utilizaremos un Linux de tipo Ubuntu o cualquier otro basado en Debian.
Esto también nos debería funcionar en un MAC ya que su sistema operativo (macOS) también deriva de Unix, siendo comunes la mayoría de los comandos que podemos ejecutar en la terminal. La terminal de MAC viene inicialmente muy poco operativa, conviene que busques como "Install command line developer tools in macos". Para terminar de mejorar tu terminal en MAC deberías instalar Homebrew. Con esto tu terminal en MAC operará de forma similar a un Linux.
Si utilizamos Windows lo que haremos es instalar Windows Subsystem for Linux (WSL) en su versión actual WSL2. Esto nos permitirá disponer de una terminal de Linux dentro de Windows. Concretamente instalaremos una distribución Ubuntu desde la tienda de software de Windows.
También se podría instalar Flask directamente en Windows. Existen varias páginas que explican esta posibilidad, puedes buscar alguna actualizada en tu buscador favorito.

Cuando ya tengamos la terminal de Linux, crearemos un entorno virtual para poder instalar la versión de Python que queramos, así como las librerías necesarias. No es obligatorio crear un entorno virtual pero es recomendable para evitar mezcla de versiones de Python y sus librerías.

Paso 1. Actualiza tu sistema

sudo apt update -y
sudo apt upgrade -y

Paso 2. Comprueba que está instalado Python3 y pip3

python3 --version

Si fuera necesario instalar Python3

sudo apt install python3

Podemos comprobar si ya tenemos instalado el gestor de paquetes pip3:

pip --version

Si no lo tenemos instalado hemos de instalarlo:

sudo apt install python3-pip

Podemos ejecutar Python3 y así, ver también la versión disponible.

python3

para salir de Python:

exit()

Tecleando pip3 podemos ver los comandos disponibles:

pip3

Para borrar la pantalla de la terminal:

clear

Paso 3. Instalación del entorno virtual

Este paso es optativo, pero recomendable para aislar las versiones instaladas de las que tenemos en otros proyectos o en el ordenador. De esta forma si se corrompen las librerías, no tendremos que instalar todo en el sistema, bastará con hacer otro entorno virtual.

Primero crea la carpeta del proyecto y haz la instalación del entorno virtual dentro de la carpeta del proyecto.

Aquí podemos hacer dos cosas:

1. O bien, clonamos el proyecto

git clone https://github.com/financieras/flasksum.git

2. O bien, creamos la carpeta y luego vamos haciendo los demás ficheros

mkdir flasksum

Nosotros elegiremos el camino largo, creando todo desde cero. Crearemos el directorio con mkdir.

Entraremos en la carpeta creada:

cd flasksum

Crearemos el entorno virtual con estas dos líneas de consola:

sudo apt install python3-venv -y
python3 -m venv venv

El segundo venv es el nombre de nuestro entorno virtual, también podemos llamarlo con otro nombre, o incluso podemos tener varios entornos viruatales, con diferentes versiones de Python.

Y el entorno virtual se activa así:

. venv/bin/activate

El promt ha cambiado y a la izquierda aparece entre paréntesis el nombre de nuestro entorno virtual: (venv)

Para desactivar el entorno virtual:

deactivate

Si quisiéramos activar el entorno virtual desde la carpeta del propio entorno virtual haríamos lo siguiente:

cd venv/bin
source activate

El entorno virtual funciona bastante bien salvo con update y con upgrade, que se han de ejecutar cuando estemos fuera del entorno virtual.

Para instalar librerías en el entorno virtual éste debe estar activado.

Para activar el entorno virtual no es necesario estar dentro de estas carpetas basta con teclear la ruta:

source Documentos/github/flasksum/venv/bin/activate

Paso 4. Instalar Flask estando dentro de nuestro entorno virtual

Estando dentro del entorno virtual:

pip install Flask

Podemos comprobar que, estando dentro de nuestro entorno virtual, si tecleamos python se va a la versión 3 que tengamos instalada. No pasa como cuando tecleamos python fuera del entorno virtual que se va a la versión 2 o no reconoce el comando.

Ahora tecleando python contestará con la versión 3 que tengamos instalada.

python
exit()

Paso 5. Instalar sqlite3

Este paso no es necesario si luego no vas a usar una base de datos.

Para instalar la base de datos sqlite3 nos introducimos en nuestro entorno virtual y tecleamos:

sudo apt install sqlite3

Entramos y vemos la versión instalada.

sqlite3
.exit

Para salir se pone punto seguido de exit.

Paso 6. Creamos la 1ª versión del archivo app.py

Estamos dentro del entorno virtual en la carpeta del proyecto flasksum y vamos a crear nuestra primera versión del archivo app.py que es la que permitirá ejecutar el servidor flask.

Para crear el archivo necesitamos un editor de texto plano, o un editor de código, por ejemplo Visual Studio Code. Nosotros lo haremos usando un editor muy básico de Linux, que funciona en terminal y que se llama nano. También funciona en las nuevas versiones de Windows 10 y Windows 11, ejecutado desde PowerShell

nano app.py

El contenido del archivo será el siguiente.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World"

if __name__ == "__main__":
    app.run()

El código anterior con comentarios.

from flask import Flask  # del módulo de flask importamos la clase Flask

app = Flask(__name__)

@app.route("/")    # decorador de ruta
                   # el decorador está esperando una cadena de texto que
                   # será la ruta con al que accederemos con nuestro navegador

def hello():       # al entrar en la página web se ejecutará el código de esta función
    return "Hello World"   # el nombre de la función es hello pero puede ser otro

if __name__ == "__main__":
    app.run()             # establece el servidor local y
                          # ejecuta nuestra aplicación sobre él.

Paso 7. Lanzamos el servidor Flask en local

Estando en el entorno virtual en la carpeta flasksum vamos a lanzar el servidor Flask. Para ello, simplemente tecleamos:

python app.py

Como estamos dentro del entorno virtual no es necesario poner python3 ya que se sobreentiende que estamos en la versión 3, ya que estamos dentro del entorno virtual.

Al lanzar el servidor Flask, si todo ha ido bien, podremos ver en una pestaña de nustro navegador corriendo la página web creada con el saludo de Hello World.

Si no se abre automaticamente la pestaña en nuestro navegador podemos pulsar sobre el enlace que se muestra en la terminal, apretando la tecla Control y pulsando con el puntero del ratón sobre el enlace. Se abrirá un nustro localhost la página:

http://127.0.0.1:5000

La dirección del localhost es 127.0.0.1 y luego se ponen dos puntos y el puerto, que por defecto es el puerto 5000.

Alternativamente, también podríamos poner la dirección del localhost que es:

http://localhost:5000

Ya hemos conseguido correr nuestro servidor de Flask en local.

Para detener el servidor se pulsa CONTROL+c

Para salir del entorno virtual pulsamos:

deactivate

Para salir de la consola pulsamos:

exit

Paso 8. Activamos el modo debug

Entramos en el entorno virtual.

Modificamos el archivo app.py añadiendo el modo debug que hace que las modificaciones en el archivo app.py que hagamos en el futuro se apliquen inmediatamente en la web que estamos corriendo en local, sin necesidad de que se interrumpa el servidor y tengamos que lanzarlo nuevamente después de cada cambio.

El nuevo archivo app.py quedará modificado en su última línea.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World"

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

Ahora podemos ver en la terminal que el modo debug está activo.

La ventaja de tener el debug activo es que cuando estamos desarrollando, al hacer cambios en nuestro código, no tenemos que detener el servidor y volverlo a reiniciar, ya que los cambios en el código se reflejarán de forma automática.

Por ejemplo, incorporemos a la función hola() una nueva línea justo debajo de su creación con def hola():

La nueva línea es:

print((__name__))  # imprimirá el valor por consola de __name__ que es __main__

Grabando el archivo modificado app.py y recargando la página podremos ver en la consola que se ha recargado el servidor y aparece impresa la palabra __main__.

Paso 9. Cambiamos el puerto

Aunque tengamos el debug activado, el cambio de puerto hace que el servidor se tenga que detener para luego poderlo reiniciar en el puerto nuevo.

Abrimos una nueva terminal y modificamos el archivo app.py para añadir al final el puerto que ahora será el 5042, que es diferente al puerto por defecto.

Grabamos el archivo app.py
En la terminal que tenemos corriendo el servidor, lo detenemos con Control+C
Lanzamos nuevamente con python app.py

Podemos ver ahora corriendo la página en el nuevo puerto en alguna de estas dos direcciones.

http://localhost:5042

http://127.0.0.1:5042

Hemos tenido que detener el servidor y reiniciarlo pese a tener activado el modo debug ya que este soporta cambios de desarrollo que no sean drásticos como es el cambio de puerto.

Parámetro host

Otro parámetro que acepta app.run() es el parámetro host que si es host='0.0.0.0' conseguimos que la página web esté en modo de producción y no de desarrollo. Así, será menos segura y conseguiremos que sea visible por otros ordenadores de nuestra red teclaendo por ejemplo http://192.168.1.157:5000 siendo esta la IP interna donde corre nuestro servidor web.

Paso 10. Ruta principal y otras rutas

La ruta principal es "/" pero podemos crear nuevas rutas, por ejemplo la ruta "/hola".

Nuestro nuevo archivo app.py será el siguiente.

from flask import Flask

app = Flask(__name__)

@app.route("/")                    # ruta principal
def hello():
    return "<h1>Hello World</h1>"  # podemos incluir etiquetas html

@app.route("/hola")
def hola():                        # nombre relacionado con la ruta por costumbre
    return("<p>Hola</p>")

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

Podemos incluir etiquetas html en el return de la ruta tales como:

títulos <h1>,<h2>,...
párrafo <p>
negrita <b> o <strong>
italic <i>
etc.

El nombre de la función, es costumbre que sea el mismo que el de la ruta o que esté relacionado con esta para poder identificarlo. En nuestro código la función se ha definido con "def hola():" ya que la ruta es "/hola".

De esta forma, hemos conseguido dos rutas en nuestro ejemplo:

la ruta principal y
la ruta hola

veamos las dos páginas que sirve nuestro servidor Flask.

Paso 10. Añadiendo variables

Cramos una nueva ruta "/user" y dentro de ella añadimos la variable user.

El archivo app.py quedará ahora así.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "<h1>Hello World</h1>"

@app.route("/hola")
def hola():
    return("<p>Hola.</p>")

@app.route("/user/<string:user>")
def user(user):
    return "Hola " + user

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

El tipo de variable es "string".

Veamos la nueva ruta funcionando.

Con esto hemos conseguido que podamos saludar a alguien tecleando la url:)

http://127.0.0.1:5000/user/Alex

Tipos de variables que podemos usar

En la siguiente web vemos los tipos de variables que usa flask.

https://flask.palletsprojects.com/en/2.0.x/quickstart/#variable-rules

Capturando un número en una variable

Ahora añadimos una nueva ruta al código, la ruta "/numero".

El archivo app.py quedará así:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "<h1>Hello World</h1>"

@app.route("/hola")
def hola():
    return("<p>Hola.</p>")

@app.route("/user/<string:user>")
def user(user):
    return "Hola " + user

@app.route("/numero/<int:n>")
def numero(n):
    return f"El número es {n}."

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

Grabamos el archivo y con el servidor Flask corriendo, tecleamos la siguiente url:

http://localhost:5000/numero/100

El resultado en la web es:

Capturando un nombre y un número

Supongamos que nos piden un nombre y un número de socio, por ejemplo Alex y 200. Vamos a capturar las dos variables y a mostrarlas en página web.

El código del archivo app.py es el siguiente.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "<h1>Hello World</h1>"

@app.route("/hola")
def hola():
    return("<p>Hola.</p>")

@app.route("/user/<string:user>")
def user(user):
    return "Hola " + user

@app.route("/numero/<int:n>")
def numero(n):
    return f"El número es {n}."

@app.route("/user/<string:username>/<int:id>")
def socio(username, id):
    return f"Nombre: {username}<br>Socio número: {id}."

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

La URL que tenemos que teclear es:

http://localhost:5000/user/Alex/200

Suma de dos números tipo float

El archivo app.py quedaría así:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "<h1>Hello World</h1>"

@app.route("/hola")
def hola():
    return("<p>Hola.</p>")

@app.route("/user/<string:user>")
def user(user):
    return "Hola " + user

@app.route("/numero/<int:n>")
def numero(n):
    return f"El número es {n}."

@app.route("/user/<string:username>/<int:id>")
def socio(username, id):
    return f"Nombre: {username}<br>Socio número: {id}."

@app.route("/suma/<float:n1>/<float:n2>")
def suma(n1,n2):
  return f"La suma de {n1} y {n2} es: {n1+n2}."

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

Los números introducidos en la URL tienen que llevar coma de decimales necesariamente.

http://localhost:5000/suma/9.0/3.0

Asignar valores por defecto

Asignar un valor por defecto a una variable requiere añadir un doble decorador y requiere añadir un valor por defecto a la variable.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "<h1>Hello World</h1>"

@app.route("/hola")
def hola():
    return("<p>Hola.</p>")

@app.route("/user/<string:user>")
def user(user):
    return "Hola " + user

@app.route("/numero/<int:n>")
def numero(n):
    return f"El número es {n}."

@app.route("/user/<string:username>/<int:id>")
def socio(username, id):
    return f"Nombre: {username}<br>Socio número: {id}."

@app.route("/suma/<float:n1>/<float:n2>")
def suma(n1,n2):
  return f"La suma de {n1} y {n2} es: {n1+n2}."

@app.route("/ciudad")     # doble decorador
@app.route("/ciudad/<string:dft>")
def ciudad(dft = "Madrid"):
    return "La ciudad de destino es " + dft

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