Una introducción al marco Flask de Python

Matraz es un marco web pequeño y poderoso para Python. Es fácil de aprender y fácil de usar, lo que le permite crear su aplicación web en poco tiempo.

En este artículo, le mostraré cómo crear un sitio web simple que contenga dos páginas estáticas con una pequeña cantidad de contenido dinámico. Si bien Flask se puede usar para crear sitios web complejos basados ​​en bases de datos, será útil comenzar con páginas en su mayoría estáticas para introducir un flujo de trabajo, que luego podemos generalizar para crear páginas más complejas en el futuro. Al finalizar, podrá usar esta secuencia de pasos para iniciar su próxima aplicación Flask.


Instalación de matraz

Antes de comenzar, necesitamos instalar Flask. Debido a que los sistemas varían, las cosas pueden salir mal esporádicamente durante estos pasos. Si es así, como todos hacemos, simplemente busque en Google el mensaje de error o deje un comentario que describa el problema.

Instalar Virtualenv

Virtualenv es una herramienta útil que crea entornos de desarrollo de Python aislados donde puede realizar todo su trabajo de desarrollo.

usaremos entorno virtual para instalar Flask. Virtualenv es una herramienta útil que crea entornos de desarrollo de Python aislados donde puede realizar todo su trabajo de desarrollo. Suponga que se encuentra con una nueva biblioteca de Python que le gustaría probar. Si lo instala en todo el sistema, existe el riesgo de estropear otras bibliotecas que pueda haber instalado. En su lugar, use virtualenv para crear un espacio aislado, donde puede instalar y usar la biblioteca sin afectar el resto de su sistema. Puede seguir usando este espacio aislado para el trabajo de desarrollo en curso, o simplemente puede eliminarlo una vez que haya terminado de usarlo. De cualquier manera, su sistema permanece organizado y ordenado.

Es posible que su sistema ya tenga virtualenv. Consulte la línea de comando e intente ejecutar:

1
$ virtualenv --version

Si ve un número de versión, está listo y puede saltar a esta sección «Instalar Flask». Si no se encuentra el comando, use pip para instalar virtualenv, ya debe tener pip instalado. Si ejecuta Linux o Mac OS X, lo siguiente debería funcionar para usted:

Instalar pipa

1
sudo apt-get install python3-pip

Instalar Virtualenv

1
$ sudo pip install virtualenv

Si no tiene instalado ninguno de estos comandos, hay varios tutoriales en línea que le mostrarán cómo instalarlo en su sistema. Si está ejecutando Windows, instale virualenv con pip de la siguiente manera:

1
pip install virtualenv 

Instalar matraz

Después de instalar virtualenvpuede crear un nuevo entorno de desarrollo aislado, así:

1
$ virtualenv flaskapp

Aquí, virtualenv crea una carpeta, aplicación de matraces/, y configura una copia limpia de Python dentro para que la use. También instala el práctico administrador de paquetes, pip.

Ingrese a su entorno de desarrollo recién creado y actívelo para que pueda comenzar a trabajar dentro de él.

1
$ cd flaskapp
2
$ . bin/activate

Ahora, puedes instalar Flask de forma segura:

1
pip install Flask

Configuración de la estructura del proyecto

Vamos a crear un par de carpetas y archivos dentro aplicación de matraces/ para mantener nuestra aplicación web organizada.

1
.
2
.
3
├── app
4
│   ├── static
5
│   │   ├── css
6
│   │   ├── img
7
│   │   └── js
8
│   ├── templates
9
│   ├── routes.py
10
│   └── README.md

Dentro aplicación de matraces/crea una carpeta, aplicación/, para contener todos sus archivos. En el interior aplicación/crea una carpeta estático/; aquí es donde colocaremos las imágenes, CSS y archivos JavaScript de nuestra aplicación web, así que cree carpetas para cada uno de ellos, como se demostró anteriormente. Además, cree otra carpeta, plantillas/, para almacenar las plantillas web de la aplicación. Crear un archivo de Python vacío rutas.py para la lógica de la aplicación, como el enrutamiento de URL.

Y ningún proyecto está completo sin una descripción útil, así que cree una LÉAME.md archivo también.

Ahora, sabemos dónde colocar los activos de nuestro proyecto, pero ¿cómo se conecta todo? Echemos un vistazo al diagrama a continuación para ver el panorama general:

  1. Un usuario emite una solicitud de la URL raíz de un dominio / para ir a su página de inicio
  2. rutas.py asigna la URL / a una función de Python
  3. La función de Python encuentra una plantilla web que vive en el plantillas/ carpeta.
  4. Una plantilla web se verá en la estático/ carpeta para cualquier archivo de imágenes, CSS o JavaScript que necesite a medida que se procesa en HTML
  5. El HTML renderizado se envía de vuelta a rutas.py
  6. rutas.py envía el HTML de vuelta al navegador

Comenzamos con una solicitud emitida desde un navegador web. Un usuario escribe una URL en la barra de direcciones. La solicitud golpea rutas.py, que tiene un código que asigna la URL a una función. La función encuentra una plantilla en el plantillas/ carpeta, lo convierte en HTML y lo envía de vuelta al navegador. Opcionalmente, la función puede obtener registros de una base de datos y luego pasar esa información a una plantilla web, pero dado que en este artículo tratamos principalmente con páginas estáticas, por ahora omitiremos la interacción con una base de datos.

Ahora que conocemos la estructura del proyecto que configuramos, comencemos con la creación de una página de inicio para nuestra aplicación web.


Creación de una página de inicio

Cuando escribe una aplicación web con un par de páginas, rápidamente se vuelve molesto escribir el mismo HTML repetitivo una y otra vez para cada página. Además, ¿qué sucede si necesita agregar un nuevo elemento a su aplicación, como un nuevo archivo CSS? Tendría que ir a cada página y agregarla. Esto lleva mucho tiempo y es propenso a errores. ¿No sería bueno si, en lugar de escribir repetidamente el mismo modelo HTML, pudiera definir el diseño de su página solo una vez y luego usar ese diseño para crear nuevas páginas con su propio contenido? ¡Esto es exactamente lo que hacen las plantillas web!

Las plantillas web son simplemente archivos de texto que contienen variables y declaraciones de flujo de control (if..else, foretc), y terminar con un .html o .xml extensión.

Las variables se reemplazan con su contenido, cuando se evalúa la plantilla web. Las plantillas web eliminan la repetición, separan el contenido del diseño y facilitan el mantenimiento de su aplicación. En otras palabras más simples, las plantillas web son increíbles y ¡deberías usarlas! Flask usa el motor de plantillas Jinja2; veamos cómo usarlo.

Como primer paso, definiremos nuestro diseño de página en un documento HTML esqueleto diseño.html y ponlo dentro del plantillas/ carpeta:

aplicación/plantillas/diseño.html

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Flask App</title>    
5
  </head>
6
  <body>
7
  
8
    <header>
9
      <div class="container">
10
        <h1 class="logo">Flask App</h1>
11
      </div>
12
    </header> 
13
    
14
    <div class="container">
15
      {% block content %}
16
      {% endblock %}
17
    </div>
18
    
19
  </body>
20
</html>

Esto es simplemente un archivo HTML normal… pero ¿qué está pasando con el {% block content %}{% endblock %} ¿parte? Para responder a esto, vamos a crear otro archivo inicio.html:

aplicación/plantillas/inicio.html

1
{% extends "layout.html" %}
2
{% block content %}
3
  <div class="jumbo">
4
    <h2>Welcome to the Flask app<h2>
5
    <h3>This is the home page for the Flask app<h3>
6
  </div>
7
{% endblock %}

El archivo diseño.html define un bloque vacío, llamado contentque una plantilla secundaria puede completar. El archivo inicio.html es una plantilla secundaria que hereda el marcado de diseño.html y rellena el bloque de «contenido» con su propio texto. En otras palabras, diseño.html define todos los elementos comunes de su sitio, mientras que cada plantilla secundaria lo personaliza con su propio contenido.

Todo esto suena genial, pero ¿cómo vemos realmente esta página? ¿Cómo podemos escribir una URL en el navegador y «visitar» inicio.html? Volvamos a la figura anterior. Acabamos de crear la plantilla. inicio.html y lo colocó en el plantillas/ carpeta. Ahora, necesitamos asignarle una URL para poder verlo en el navegador. vamos a abrir rutas.py y haz esto:

app/rutas.py

1
from flask import Flask, render_template
2
app = Flask(__name__)   
3

4
@app.route('/')
5
def home():
6
  return render_template('home.html')
7
  
8
if __name__ == '__main__':
9
  app.run(debug=True)

Eso es todo por rutas.py. ¿Qué hicimos?

  1. Primero. importamos la clase Flask y una función render_template.
  2. A continuación, creamos una nueva instancia de la clase Flask.
  3. Luego mapeamos la URL / a la función home(). Ahora, cuando alguien visita esta URL, la función home() ejecutará.
  4. La función home() utiliza la función Matraz render_template() hacer el inicio.html plantilla que acabamos de crear a partir de la plantillas/ carpeta al navegador.
  5. Finalmente, usamos run() para ejecutar nuestra aplicación en un servidor local. estableceremos el debug bandera a truepara que podamos ver cualquier mensaje de error aplicable si algo sale mal, y para que el servidor local se vuelva a cargar automáticamente después de que hayamos realizado cambios en el código.

Finalmente estamos listos para ver los frutos de nuestro trabajo. Regrese a la línea de comando y escriba:

1
$ python routes.py

Visitar http://localhost:5000/ en su navegador web favorito.

cuando visitamos http://localhost:5000/, rutas.py tenía un código que mapeaba la URL / a la función Python home(). home() encontré la plantilla web inicio.html en el plantillas/ carpeta, lo renderizó a HTML y lo envió de vuelta al navegador, dándonos la pantalla de arriba.

Bastante ordenada, pero esta página de inicio es un poco aburrida, ¿no es así? Hagamos que se vea mejor agregando algo de CSS. Crear un archivo, principal.cssdentro estático/css/y agregue estas reglas:

estático/css/main.css

1
body {
2
  margin: 0;
3
  padding: 0;
4
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
5
  color: #444;
6
}
7
/* 

8
* Create dark grey header with a white logo 

9
*/
10
 
11
header {
12
  background-color: #2B2B2B;
13
  height: 35px;
14
  width: 100%;
15
  opacity: .9;
16
  margin-bottom: 10px;
17
}
18
header h1.logo {
19
  margin: 0;
20
  font-size: 1.7em;
21
  color: #fff;
22
  text-transform: uppercase;
23
  float: left;
24
}
25
header h1.logo:hover {
26
  color: #fff;
27
  text-decoration: none;
28
}
29
/* 

30
* Center the body content 

31
*/
32
 
33
.container {
34
  width: 940px;
35
  margin: 0 auto;
36
}
37
div.jumbo {
38
  padding: 10px 0 30px 0;
39
  background-color: #eeeeee;
40
  -webkit-border-radius: 6px;
41
     -moz-border-radius: 6px;
42
          border-radius: 6px;
43
}
44
h2 {
45
  font-size: 3em;
46
  margin-top: 40px;
47
  text-align: center;
48
  letter-spacing: -2px;
49
}
50
h3 {
51
  font-size: 1.7em;
52
  font-weight: 100;
53
  margin-top: 30px;
54
  text-align: center;
55
  letter-spacing: -1px;
56
  color: #999;
57
}

Agregue esta hoja de estilo al archivo de esqueleto diseño.html para que el estilo se aplique a todas sus plantillas secundarias agregando esta línea a su elemento:

1
<link rel="stylesheet" href="{{ url_for('static', filename="css/main.css") }}">;

Estamos usando la función Flask, url_forpara generar una ruta URL para principal.css desde el estático carpeta. Después de agregar esta línea, diseño.html ahora debería verse como:

aplicación/plantillas/diseño.html

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Flask</title>    
5
    <strong><link rel="stylesheet" href="{{ url_for('static', filename="css/main.css") }}"></strong>
6
  </head>
7
  <body>
8
    <header>
9
      <div class="container">
10
        <h1 class="logo">Flask App</h1>
11
      </div>
12
      </header>
13
	
14
    <div class="container">
15
      {% block content %}
16
      {% endblock %}
17
    </div>
18
  </body>
19
</html>

Volvamos al navegador y actualicemos la página para ver el resultado del CSS.

¡Así es más! Ahora, cuando visitamos http://localhost:5000/, rutas.py todavía mapea la URL / a la función Python home()y home() todavía encuentra la plantilla web inicio.html en el plantillas/ carpeta. Pero, desde que agregamos el archivo CSS principal.cssla plantilla web inicio.html mira adentro estático/ para encontrar este activo, antes de representarlo en HTML y enviarlo de vuelta al navegador.

Hemos logrado mucho hasta ahora. Comenzamos con la Fig. 1 entendiendo cómo funciona Flask, y ahora hemos visto cómo se desarrolla todo, creando una página de inicio para nuestra aplicación web. Avancemos y creemos una página Acerca de.


Creación de una página Acerca de

En la sección anterior, creamos una plantilla web inicio.html extendiendo el archivo esqueleto diseño.html. Luego mapeamos la URL / a inicio.html en rutas.py para que podamos visitarlo en el navegador. Terminamos las cosas agregando un poco de estilo para que se vea bonito. Repitamos ese proceso nuevamente para crear una página acerca de nuestra aplicación web.

Comenzaremos creando una plantilla web, acerca de.htmly poniéndolo dentro del plantillas/ carpeta.

aplicación/plantillas/acerca de.html

1
{% extends "layout.html" %}
2
 
3
{% block content %}
4
  <h2>About</h2>
5
  <p>This is an About page for the Intro to Flask article. Don't I look good? Oh stop, you're making me blush.</p>
6
{% endblock %}

Como antes con inicio.htmlnos extendemos desde diseño.htmly luego llene el content bloquear con nuestro contenido personalizado.

Para visitar esta página en el navegador, necesitamos asignarle una URL. Abrir rutas.py y agrega otra asignación:

1
from flask import Flask, render_template
2
 
3
app = Flask(__name__)
4
 
5
@app.route('/')
6
def home():
7
  return render_template('home.html')
8
 
9
@app.route('/about')
10
def about():
11
  return render_template('about.html')
12
 
13
if __name__ == '__main__':
14
  app.run(debug=True)

Mapeamos la URL /about a la función about(). Ahora podemos abrir el navegador e ir a http://localhost:5000/sobre y echa un vistazo a nuestra página recién creada.


Agregar navegación

La mayoría de los sitios web tienen enlaces a sus páginas principales dentro del encabezado o pie de página del documento. Estos enlaces suelen ser visibles en todas las páginas de un sitio web. Abramos el archivo del esqueleto, diseño.html. y agregue estos enlaces para que aparezcan en todas las plantillas secundarias. Específicamente, agreguemos un <nav> elemento dentro del <header> elemento:

aplicación/plantillas/diseño.html

1
...
2
<header>
3
  <div class="container">
4
    <h1 class="logo">Flask App</h1>
5
    <strong><nav>
6
      <ul class="menu">
7
        <li><a href="{{ url_for('home') }}">Home</a></li>
8
        <li><a href="{{ url_for('about') }}">About</a></li>
9
      </ul>
10
    </nav></strong>
11
  </div>
12
</header>
13
...

Una vez más, usamos la función Flask url_for para generar URL.

A continuación, agregue más reglas de estilo a principal.css para que estos nuevos elementos de navegación se vean bien:

aplicación/estática/css/main.css

1
...
2
/* 

3
* Display navigation links inline 

4
*/
5
.menu {
6
  float: right;
7
  margin-top: 8px;
8
}
9
.menu li {
10
  display: inline;
11
}
12
.menu li + li {
13
  margin-left: 35px;
14
}
15
.menu li a {
16
  color: #999;
17
  text-decoration: none;
18
}

Finalmente, abra el navegador y actualice http://localhost:5000/ para ver nuestros enlaces de navegación recientemente agregados.

Conclusión

A lo largo de este artículo, creamos una aplicación web simple con dos páginas, en su mayoría estáticas. Al hacerlo, aprendimos un flujo de trabajo que se puede usar para crear sitios web más complejos con contenido dinámico. Matraz es un marco simple pero poderoso que le permite crear aplicaciones web de manera eficiente. Avanzar-Echale un vistazo!

Esta publicación ha sido actualizada con contribuciones de Esther Vaatí. Esther es desarrolladora de software y escritora de Envato Tuts+.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *