Nuestra Primera Aplicación Flask:

Un video con el resumen de todos los pasos está en el canal de YouTube del curso. El código de la aplicación está en el repositorio de GitHub del curso.

1. Crear un entorno virtual. Un entorno virtual funciona como una caja de herramientas donde puedes almacenar todas las herramientas necesarias para ejecutar tu aplicación. Cuando añadamos más estructura y funcionalidades a nuestra aplicación, necesitaremos más herramientas que almacenaremos en nuestro entorno virtual. Cuando despleguemos nuestra aplicación en el servidor, le daremos al servidor la lista de herramientas almacenadas en nuestro entorno virtual, para que pueda ejecutar nuestra aplicación.
   
   Una definición formal de un entorno virtual en Python:
   Entorno Virtual de Python
   Para crear un entorno virtual, abre una terminal en VS Code y escribe:
   En Windows: (python -m venv venv) o (python3 -m venv venv) dependiendo de la versión de Python instalada en tu computadora.
   En Mac es necesario seguir dos pasos: Primero, es necesario instalar un paquete llamado virtualenv escribiendo en la línea de comandos de VS Code (pip install virtualenv). Segundo, es necesario crear el entorno virtual escribiendo en la línea de comandos de VS Code (virtualenv venv).


2. En VS Code, abre la terminal y activa el entorno virtual.
   En Windows: (venv\Scripts\activate).
   En Mac: (source venv/bin/activate).


3. Usando la terminal en VS Code, instala flask: (pip install flask) (o pip3 install flask). El comando pip (o pip3) depende de la versión de Python instalada en tu computadora. Prueba ambos.


4. Usando la terminal en VS Code, escribe el código de tu aplicación, y guarda ese archivo como application.py.


5. Usando la terminal en VS Code, ejecuta tu aplicación: (python application.py) (o python3 application.py). El comando python (o python3) depende de la versión de Python instalada en tu computadora. Prueba ambos.


6. Abre la aplicación en tu navegador: Abre el enlace azul que aparece en VS Code después de ejecutar tu archivo application.py para abrir tu aplicación en el navegador.

El código de nuestra primera aplicación Flask (versión extendida):

        from flask import Flask
        application = Flask(__name__)
        
        @application.route('/')
        @application.route('/home')
        def home():
            return "<h1>Página de inicio</h1>" \
                "<p>En este proyecto desarrollamos 
                una aplicación...</p>"
        
        @application.route('/desarrolladores')
        def developers():
            return "<h1>Desarrolladores</h1>" \
                "<p>En esta página web, presentamos 
                a los desarrolladores de la aplicación...</p>"
        
        @application.route('/light_talk_app')
        def app_calculator():
            return "<h1>Calculadora de Aplicaciones</h1>" \
                "<p>En esta página web, desarrollamos una 
                aplicación para el aprendizaje del español...</p>"
        
        if __name__ == '__main__':
            application.run(debug=True)
        

Moviendo el código HTML a una Carpeta de Plantillas:

El video con todos los pasos de esta sección y el código se pueden encontrar en los enlaces de YouTube y GitHub a continuación:

1. En tu computadora, crea una carpeta llamada “Sección 3” (o el nombre que elijas). Dentro de esa carpeta, crea una carpeta llamada “templates” (templates es el nombre estándar para la carpeta de plantillas, te sugiero que uses ese nombre).


2. En la carpeta templates, crea un archivo llamado “home.html”. En ese archivo, escribe el código que aparece en el cuadro de la derecha.


3. Una vez que hayas creado tu archivo “home.html”, debes llamarlo desde tu archivo application.py. Para hacer eso, es necesario hacer dos cosas (ver el código en el cuadro de la derecha):
   
   
   1. Necesitamos importar la función render_template del paquete flask.
   2. Usando la función render_template, llamamos al archivo home.html.
   3. Opcionalmente, podemos pasar información desde nuestro archivo application.py a nuestros archivos HTML. En particular, en este caso vamos a pasar un título para nuestro archivo home.html. En el archivo application.py debemos pasar el título (ver el código en el cuadro de la derecha), y en el archivo home.html, tenemos que mostrar el título colocándolo entre dos corchetes (ver código en el cuadro de la derecha).


4. Una vez que hayas modificado el archivo application.py y hayas creado una carpeta templates, debes crear tu entorno virtual e instalar Flask en él. Tenemos dos opciones. Primero, copiar y pegar el entorno virtual que creamos en la segunda sección de este capítulo. Segundo, seguir todos los pasos descritos en la segunda sección de este capítulo para crear un nuevo entorno virtual, activarlo e instalar Flask.


5. Con el entorno virtual activado, ejecuta tu aplicación escribiendo: python application.py y ábrelo en el servidor local de tu computadora.

El código en el archivo home.html:

    <!DOCTYPE html>
    <html>
    <head>    
        <title>{{title}}</title>
    </head>
    <body>
        <h1>Inicio</h1>
        <p>
            Nuestra app de aprendizaje del español light-talk....
        </p>
        <p>
        Desarrolladores:
        <ul>
            <li>
                Desarrollador 1: Breve biografía. Enlace al CV.
            </li>
        </ul>
        </p>
    </body>
    </html>
    

El código en el archivo application.py:

    from flask import Flask, render_template
    application = Flask(__name__)
    
    @application.route('/')
    @application.route('/home')
    def home():
        return render_template('home.html', title='home')
    
    if __name__ == '__main__':
        application.run(debug=True)
    

Para acceder a rutas en nuestra aplicación Flask, utilizaremos la función url_for de Flask. La función url_for se define como una función que permite a los desarrolladores construir y generar URLs en una aplicación Flask. La forma de usar url_for en nuestra aplicación Flask es muy simple. En esta sección, utilizaremos url_for en un enlace. Más adelante en el curso, la usaremos en otras situaciones.

En el archivo home.html, vamos a crear un enlace a las páginas de metodología y calculadora de carbono. Para hacerlo, escribimos (ver código en el cuadro de la derecha):

    (<a href="{{ url_for('business') }}">enlace</a>)
                    

El código en el archivo home.html:

        <p>
            El objetivo de nuestra app es enseñar español. 
            Para ello desarrollamos un modelo de negocio
            (<a href="{{ url_for('business') }}">enlace</a>) para 
            enseñar a nuestras estudiantes español.
        </p>
    
    

Plantillas de Flask y Jinja2 en acción:

El video con todos los pasos en esta sección, y el código, se pueden encontrar en los enlaces de YouTube y GitHub a continuación:

Usaremos Jinja2 dentro de nuestro proyecto varias veces. En esta sección, lo usaremos para hacer nuestro código más eficiente e introducir algunas declaraciones lógicas en nuestro código.

1. Creamos un archivo layout.html donde presentamos la estructura html básica de nuestro archivo. En ese archivo, introducimos dos elementos de Jinja2.
   
   
   1. En el head del archivo layout.html, introducimos una declaración lógica para revelar el título de cada una de las páginas web en nuestra aplicación (ver código en el recuadro derecho).
   2. En el body del archivo layout.html, introducimos una declaración para introducir bloques de código html en nuestro archivo layout.html. Esto nos ayudará a heredar el código de layout.html evitando escribir el mismo código una y otra vez en cada archivo html (ver código en el recuadro derecho).


2. Para usar el archivo layout.html, necesitamos modificar el resto de los archivos html. Para hacer posible esa comunicación, en los archivos html, necesitamos introducir dos cambios.
   
   
   1. Para usar el archivo layout.html dentro de nuestros archivos html, necesitamos extenderlo (ver código en el recuadro derecho).
   2. Dentro de nuestros archivos html, necesitamos definir los bloques html que se insertarán en el archivo layout.html (ver código en el recuadro derecho).

El código del archivo layout.html:

    <!DOCTYPE html>
    <html>
        <head>
            {% if title %}
                <title>{{ title }}</title>
            {% else %}
                <title>home</title>
            {% endif %}
        </head>
        <body>
            {% block content %} {% endblock %}
        </body>
    </html>
    

El código del archivo home.html:

    {% extends "layout.html" %}
    {% block content %}
            <h1>Inicio</hses1>
            <p>
                El estudio del español ...
            </p>           
            <p>
                Desarrolladores:
                <ul>
                    <li>
                        <strong>Desarrollador 1</strong>: Breve biografía. Enlace al CV.
                    </li>
                </ul>
            </p>
    {% endblock content %}