LabEx
EntrarÚnete

Introducción al framework web Flask

Beginner

This tutorial is from open-source community. Access the source code

Introducción

Esta práctica te guiará a través del proceso de inicio con Flask, un ligero framework web para Python. Aprenderás cómo crear una aplicación básica de Flask, ejecutarla localmente y comprender los conceptos básicos de enrutamiento y renderizado de plantillas.

Nota: Debes crear el archivo de código por ti mismo y ejecutarlo en el entorno. Puedes previsualizar el estado del servicio Flask en Web 5000.

Configuración de Flask

Para comenzar con Flask, debes instalarlo y configurar un nuevo proyecto. Sigue las instrucciones siguientes:

  1. Instala Flask ejecutando el siguiente comando en tu terminal o línea de comandos:

    pip install flask

  2. Abre un nuevo archivo y guárdalo como app.py.

    cd ~/project
touch app.py

  3. Importa el módulo Flask y crea una instancia de la clase Flask:

    from flask import Flask

app = Flask(__name__)

Creando una ruta básica

Las rutas en Flask definen los patrones de URL para tu aplicación. Vamos a crear una ruta básica que muestre un mensaje "¡Hola, Mundo!".

  1. Agrega el siguiente código a tu archivo app.py:

    @app.route("/")
def hello_world():
    return "Hello, World!"

  2. Guarda el archivo.

Ejecutando la aplicación

Ahora que has configurado tu aplicación de Flask y creado una ruta básica, ejecutemos la aplicación y veamos cómo funciona.

  1. En tu terminal o línea de comandos, navega hasta el directorio donde se encuentra tu archivo app.py.

  2. Ejecuta el siguiente comando para iniciar el servidor de desarrollo de Flask:

    flask run --host=0.0.0.0

--host=0.0.0.0 se utiliza para hacer que la aplicación sea accesible públicamente. Si no lo especificas, la aplicación solo estará disponible en tu máquina local.

Luego, cambia a la pestaña Web 5000 y actualiza la página.

Agregando plantillas HTML

Flask utiliza plantillas Jinja2 para generar contenido HTML. Vamos a crear un archivo de plantilla y renderizarlo en nuestra ruta.

  1. Crea un nuevo directorio en tu proyecto llamado templates.

  2. Dentro del directorio templates, crea un nuevo archivo llamado index.html.

  3. Abre el archivo index.html y agrega el siguiente código HTML:

    <!doctype html>
<html>
  <head>
    <title>Flask Quickstart</title>
  </head>
  <body>
    <h1>Hello, Flask!</h1>
  </body>
</html>

  4. Modifica tu archivo app.py para renderizar la plantilla index.html:

    from flask import render_template

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

Volviendo a ejecutar la aplicación

Ahora que hemos agregado una plantilla HTML, volvamos a ejecutar la aplicación y veamos la plantilla renderizada.

  1. Detén el servidor de desarrollo de Flask si todavía está en ejecución (presiona Ctrl+C).

  2. Ejecuta el siguiente comando para iniciar el servidor nuevamente:

    flask run --host=0.0.0.0

Ahora deberías ver el mensaje "¡Hola, Flask!" mostrado en la plantilla HTML.

Hello, Flask!

Agregando contenido dinámico

Flask nos permite pasar contenido dinámico a nuestras plantillas. Vamos a modificar nuestra ruta para pasar un parámetro de nombre y mostrar un saludo personalizado.

  1. Modifica tu archivo app.py para aceptar un parámetro de nombre en la ruta:

    @app.route("/<name>")
def hello(name):
    return render_template("index.html", name=name)

  2. Abre el archivo index.html y modifica la etiqueta <h1> para mostrar el saludo personalizado:

    <h1>Hello, {{ name }}!</h1>

Volviendo a ejecutar la aplicación

Vamos a ejecutar la aplicación nuevamente y probar la característica de contenido dinámico.

  1. Detén el servidor de desarrollo de Flask si todavía está en ejecución (presiona Ctrl+C).

  2. Ejecuta el siguiente comando para iniciar el servidor nuevamente:

    flask run --host=0.0.0.0

  3. Copia la URL de la pestaña Web 5000 y pégalala en una nueva pestaña de tu navegador.

Copying Web 5000 URL

  1. Agrega /LabEx al final de la URL y presiona Enter.

Hello LabEx webpage

  1. Cambia el valor del parámetro name en la URL y presiona Enter.

Resumen

En este laboratorio, aprendiste cómo comenzar con Flask al configurar un nuevo proyecto, crear rutas, renderizar plantillas y pasar contenido dinámico. Flask es una herramienta poderosa para construir aplicaciones web, y este laboratorio proporciona una base sólida para una exploración y desarrollo adicional.