ESIMIO IMPUNE

Introducción al desarrollo
backend con Flask
Índice

I. Instalación

II. Elegir IDE

III. Servidor local

IV. Incluir CSS y JS

V. Publicación

ESIMIO IMPUNE
 ESIMIO IMPUNE

Instalación

Paso 1
Abre una terminal ( ctrl + alt + t en GNU/Linux, cmd + Espacio y escribir
Terminal en OSX, Win + r y escribir cmd en Windows ) e ingresa los comandos
de la Figura A

Terminal - 100 x 26

Last login: Tue Jun 30 14:38:29 on ttys001

EsimioImpune$ mkdir cursoFlask

EsimioImpune$ cd cursoFlask

EsimioImpune$ python -V
Python 3.7.4

EsimioImpune$ pip install virtualenv

Figura A

Al ingresar python -V estamos preguntando la versión de Python en

nuestra computadora.
 Si imprime una versión de Python 3 o superior podemos pasar el
comando siguiente, en caso contrario hay que descargar Python 3. Si ya se
descargó Python3 y se está trabajando en el SO GNU/Linux o OSX debe
agregarse un 3 al escribir los comandos relacionados a Python, es decir, escribir
python3 y pip3 en vez de python y pip respectivamente.

Paso 2
Una vez instalado el paquete virtualenv, instalamos el ambiente virtual con el
comando de la Figura B

$ virtualenv -p python .

Figura B

Con lo cual se instalará el ambiente virtual.

Lo activamos con el comando de la Figura C para GNU/Linux y OSX

$ source bin/activate

Figura C

O con .\Scripts\activate para Windows

ESIMIO IMPUNE
 Paso 3
Hecho lo anterior la terminal debe aparecer de forma parecida a la Figura D

Terminal - 100 x 26

Last login: Tue Jun 30 14:38:29 on ttys001

(cursoFlask) EsimioImpune$

(cursoFlask) EsimioImpune$ pip install flask gunicorn

flask-sqlalchemy flask-marshmallow marshmallow-
sqlalchemy
Collecting packages
Downloading packages py3-none-any.whl (77kB)
| | 77kB 223 kB/s
Installing collected packages
Succesfully installed packages: all

Figura D

Y ya podemos comenzar a instalar los paquetes necesarios usando pip como se

muestra en el segundo comando de la Figura D

Los paquetes a instalar son*:

• Flask

• Flask SQL Alchemy

• Flask Marshmallow

Marshmallow SQL Alchemy

•
*Contienen hipervínculo a la documentación oficial

ESIMIO IMPUNE
 ESIMIO IMPUNE

Elegir IDE

¿ Cuál es el mejor IDE para mi ?

La respuesta a esta pregunta depende de varios factores: la experiencia
programando para front end, los frameworks y lenguajes en los que se va a
programar e incluso el gusto personal.

En este curso usaremos Atom ya que es sencillo de instalar, de usar y

existen extensiones que facilitan de gran manera la escritura del código. Los
siguientes pasos pueden seguirse en otros IDEs como Visual Studio Code.

Configurando Atom
Una vez que hayamos descargado Atom nos vamos File > Settings > Install (en
Windows) y en la barra de búsquedas escribimos: atom-live-server-plus damos
click en instalar. En una Mac damos clic en Atom > Preferences > Install.
 Hacemos lo mismo para instalar ahora otra extensión, llamada atom-beautify.

La primer extensión nos creará un servidor local para mostrar nuestra

página web y cada vez que modifiquemos el código de la página, ésta se
recargará automáticamente lo cual nos ahorrará tiempo y esfuerzo además al
codificar más rápido aumentaremos nuestra productividad. En Visual Studio
Code existe una extensión llamada Live Server de Ritwick Dey que tiene el
mismo fin que la de Atom.

La segunda extensión sirve para ordenar automáticamente (coloca

espacios, sangrías, etc) nuestro código de manera que tenga mejor
presentación y sea más legible.

ESIMIO IMPUNE
Atajos en Atom
En OSX:

^ ⌥ L (control + alt + L) Iniciar el servidor autorrecargable

^⌥B Ordenar las líneas del código
⌘ B (command + B) Buscar un archivo abierto
⌘B Buscar una palabra en el archivo abierto actual
A (tecla a, habiendo dado click en la barra de archivos) Crear nuevo archivo
⇧ A (shift + A) Crear un nuevo folder
⌘, Abrir configuraciones
⌘ K ⌘ B (cmd + K seguido de cmd + B) Colapsar el panel de archivos

En Windows y GNU/Linux hay atajos similares y se pueden consultar en la

barra de menú en la parte superior.

Memorizar los atajos anteriores será resultará en una programación más

ágil y en menor tiempo.
Servidor local

Estructura básica de una app de Flask

El archivo app.py más básico tiene esta apariencia:

1. from flask import Flask

2.
3.
4. app = Flask(__name__)
5.
6. @app.route(‘/’)
7. def index():
8. return ‘<h1>Hola mundo</h1>’
9.
10.
11. if __name__ == “__main__”:
12. app.run(debug=True)

Figura E

Abrimos la carpeta cursoFlask que creamos anteriormente y la arrastramos

y soltamos sobre la ventana de Atom. Esto nos abrirá un proyecto en dicho IDE.

Creamos un archivo con extensión .py llamado app y escribimos en él el

código de la Figura E.
 Una vez creado el archivo abrimos una terminal y navegamos hasta el
folder donde se encuentra nuestro proyecto haciendo cd. Por ejemplo:

Esimio Impune$ cd documents/cursoFlask

Figura F
Una vez en la carpeta donde tenemos Flask instalado, activamos el
ambiente virtual y ejecutamos el siguiente comando:

Terminal - 100 x 26

Last login: Tue Jun 30 14:38:29 on ttys001

(cursoFlask) EsimioImpune$ python app.py

* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a
production deployment. Use a production WSGI server instead.
* Debug mode: on
* Restarting with stat
* Debugger is active!
* Debugger PIN: 189-742-617
* Running on http://127.0.0.1:5000/ (Press CTRL+C to
quit)

Figura G

Ahora copiamos la URL y la pegamos en un navegador (como Firefox,

Chrome etc). Debe abrirse una página web con una etiqueta HTML de tipo
<h1> con la leyenda Hola mundo.
 Figura H
¡Felicidades! ¡Has creado un servidor local con Python!

Desde luego una página real deberá tener un archivo .html (y no un string
con código HTML), hojas de estilo CSS y código de algún lenguaje
programación para front end (como Brython o Javascript). Pero eso lo
aprenderemos en la siguiente unidad.
Incluir CSS y JS

Convenciones de archivos en Flask

Flask tiene algunas reglas sobre el ordenamiento de los archivos y
carpetas predefinidas para operar con este paquete.

Dentro de la carpeta cursoFlask debemos crear un folder llamado static y

otro llamado templates. De esta forma el proyecto debe tener un formato
parecido al siguiente:

Dentro de la carpeta templates, colocaremos los archivos HTML que

vayamos a utilizar en nuestro sitio web.
 El primer archivo a crear será la página principal de nuestro sitio web, si
deseamos crear una landing page entonces podemos nombrarla contacto.html
o bien podemos utilizar la convención y nombrarla index.html.

Obtener la estructura básica de una página HTML en Atom es tan sencillo

como escribir html y oprimir enter. En VS Code hay que escribir ! (signo de
admiración de cierre) y oprimir enter.

Dentro de index.html escribiremos la misma línea que habíamos escrito antes:

app.py index.html
<!DOCTYPE html>
<html lang="es-MX" dir="ltr">
<head>
<meta charset="utf-8">
<title>Mi App con Flask</title>
</head>

<body>
<h1>Hola mundo</h1>
</body>
</html>

Figura J
Ahora solo resta modificar la primer línea el archivo app.py

1. from flask import Flask, render_template

Figura K.1
Y la octava

8. return render_template(‘index.html’)

Figura K.2
 Si ahora ejecutamos nuevamente el comando de la Figura G debemos
poder observar el mismo resultado que el de la Figura H.

Sintaxis Jinja2
La sintaxis Jinja2 nos servirá para generar templates en HTML fácilmente y
mucho más rápido permitiéndonos enfocarnos a la programación back end.

El primer paso es crear un archivo base el cual tendrá la estructura básica

que seguirán las demás páginas de nuestro sitio. Lo anterior nos permite reusar
código HTML sin tener que escribirlo más de una vez.

app.py index.html base.html

1. <!DOCTYPE html>
2. <html lang="es-MX" dir="ltr">
3. <head>
4. <meta charset=“utf-8">
5. <link rel="stylesheet"
6. href="{{ url_for(‘static’,filename='css/estilo.css') }}”>
7. {% block head %}{% endblock %}
8. </head>
9.
10. <body>
11. {% block body %}{% endblock %}
12. </body>
13. </html>

Figura L

Las lineas 5 y 6 de la Figura L son la manera en la que se hace referencia

para incluir archivos externos de CSS y JS, dentro de un archivo HTML usando
Jinja2.
 Además, las líneas 5 y 6, hacen obligatorio crear una carpeta llamada css
dentro del folder static y a su vez crear dentro de ésta (dentro de la carpeta css)
un archivo de nombre estilo.css.

estilo.css

body {
font-family: sans-serif;
font-size: 1.6rem;
line-height: 2rem;
text-align: center;
background-color: #e2e9f2;
}

h1 {
border-bottom: 0.2rem #ccc dotted;
color: steelblue;
font-size: 2.8em;
margin: 3rem auto;
padding: 2rem 0;
line-height: 3rem;
}

Figura M

Una vez creado el archivo estilo.css con el código de la Figura M y

referenciarlo en el código de base.html como lo muestra la Figura L,
procedemos a modificar el código de index.html de la manera que lo muestra la
Figura N en la siguiente página.
 app.py index.html base.html

{% extends ‘base.html’ %}

{% block head %}
<title>Mi App con Flask</title>
{% endblock %}

{% block body %}

<h1>Hola mundo</h1>

{% endblock %}

Figura N

De ahora en adelante cada que se requiera crear una nueva página con el
mismo estilo y formato de base.html pero con distinto contenido se deberá
seguir el ejemplo de la Figura N. Lo anterior ahorrará tiempo y líneas de código.

Si se ejecuta una vez más el comando de la Figura G, el resultado será

como se muestra en la siguiente imagen.
Publicación

Instalación de Heroku
El primer paso es crear una cuenta en Heroku.

Una vez creada la cuenta hay que descargar Heroku CLI

Esimio Impune$ heroku login

Figura Ñ

Para confirmar que Heroku CLI se instaló correctamente debemos ejecutar

el comando de la Figura Ñ

Dependiendo el sistema operativo se abrirá una ventana en el navegador

donde tendremos que dar clic sobre un botón o en su defecto, en la misma
terminal se nos pedirá el correo y contraseña de la cuenta recién creada.

Procfile
Heroku requiere crear un archivo sin extensión llamado Procfile, la función
de este archivo es indicarle a Heroku qué archivo de Python ejecutar y en
general qué hacer con nuestro proyecto.
Para crear el Procfile escribimos en la terminal:

Esimio Impune$ touch Procfile

Figura P

Una vez creado el archivo Procfile, lo abrimos y escribimos una sola linea:

Procfile

web: gunicorn app:app

Figura Q

En la linea del Procfile indicamos que es una app web y que usaremos
gunicorn como servidor y que nuestro archivo de Flask que contiene el código
se llama app.
Repositorio git
Para publicar la página en Heroku y/o darle mantenimiento
posteriormente es necesario crear un nuevo repositorio con el control de
versiones git.

Ingresamos los siguientes comandos git:

Terminal - 100 x 26

Last login: Tue Jun 30 14:38:29 on ttys001

(cursoFlask) EsimioImpune$ git init

Initialized empty Git repository in EsimioImpune/cursoFlask/.git/

(cursoFlask) EsimioImpune$ git add .

(cursoFlask) EsimioImpune$ git commit -m

“Inicando app”

Figura R
Crear y publicar la app con Heroku
El nombre de nuestra app solo puede contener letras en minúsculas,
números y guiones. Una vez decidido el nombre ingresamos los siguientes
comandos

Terminal - 100 x 26

Last login: Tue Jun 30 14:38:29 on ttys001

(cursoFlask) EsimioImpune$ heroku create mipagina

(cursoFlask) EsimioImpune$ git push heroku master

> Warning:heroku update available from 7.12 to 7.24
Creating mipagina ... done
https://mipagina.herokuapp.com | https://git.heroku.com/
mipagina.git

(cursoFlask) EsimioImpune$

Figura S

Ahora para poder visualizar tu aplicación web hay que copiar la url y
pegarla en un navegador.

¡Felicidades has publicado tu primer página completa con back y

front end!