Google+ Seguidores

miércoles, 26 de octubre de 2016

Primera aplicacion web con Python y Flask (Tutorial para principiantes)

    10

En este tutorial aprenderemos a construir una Aplicación Web con Python. En esta oportunidad utilizaremos el micro-framework llamado Flask.

Apliación Web con Python y Flask
Apliación Web con Python y Flask


Este artículo no es de mi autoría, cito la fuente al final de la entrada.

Como instalar Flask

Para instalar Flask utilizaremos pip en consola.

>>> pip install Flask

Una vez instalado crearemos nuestra primera Aplicación Web con tan solo 7 líneas de código, la llamaremos hola.py:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Autor: Diego Caraballo
# www.pythondiario.com

from flask import Flask
app = Flask(__name__)
 
@app.route("/")
def hello():
    return "Hola Mundo!"
 
if __name__ == "__main__":
    app.run()

Una vez ejecutemos el código comenzará a correr nuestra aplicación, abrimos el navegador y luego ingresamos la ruta 127.0.0.1:5000 (localhost)

Creando las rutas URL

Vamos a crear algunas rutas para ver lo fácil que resulta

/hola
/miembros/
/miembros/name

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Autor: Diego Caraballo
# www.pythondiario.com

from flask import Flask
app = Flask(__name__)
 
@app.route("/")
def index():
    return "Index!"
 
@app.route("/hola")
def hello():
    return "Hola Mundo!"
 
@app.route("/miembros")
def members():
    return "Miembros"
 
@app.route("/members//")
def getMember(name):
    return name
 
if __name__ == "__main__":
    app.run()

Ejecutamos nuevamente la aplicación y podemos comprobar entrando a las siguientes direcciones:

http://127.0.0.1:5000/
http://127.0.0.1:5000/hola
http://127.0.0.1:5000/miembros
http://127.0.0.1:5000/miembros/PythonDiario

Páginas con Style

Vamos a separar el código de la interfaz de usuario. Crearemos un directorio llamado /templates/ (en el mismo directorio que el archivo hola.py) y dentro, un archivo test.html con el siguiente código:

<h1>Hola {{name}}</h1>

Luego el código en Python:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Autor: Diego Caraballo
# www.pythondiario.com

from flask import Flask, flash, redirect, render_template, request, session, abort
 
app = Flask(__name__)
 
@app.route("/")
def index():
    return "Aplicacion en Flask!"
 
@app.route("/hola//")
def hello(name):
    return render_template(
        'test.html',name=name)
 
if __name__ == "__main__":
 app.run()


Corremos la aplicación y probamos por ejemplo: 127.0.0.1/hola/PythonDiario

Dando más estilo a la Aplicación Web


Vamos a crear un nuevo archivo que también irá en la carpeta /templates/ (layout.html) con el siguiente código:

<html>
<head>
    <title>Website</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Amatic+SC:700);

body{
    text-align: center;    
}
h1{
    font-family: 'Amatic SC', cursive;
    font-weight: normal;
    color: #8ac640;
    font-size: 2.5em;
}

</style>

</head>
<body>
 {% block body %}{% endblock %}

</body>
</html>

Modificamos el archivo test.html con el siguiente código:

{% extends "layout.html" %}
{% block body %}

<div class="block1">
<h1>Hola {{name}}!</h1>
  <h2>Dejo una cita interesante para ti: </h2>
  <p>
"Lo unico imposible es aquello que no intentas."
  </p>
<img src="https://yt3.ggpht.com/-WJHoIm3PI0M/AAAAAAAAAAI/AAAAAAAAAAA/xqS2eHxnkx0/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">
</div>
{% endblock %}

Osea que ahora, tendríamos: por un lado el archivo hola.py y una carpeta /templates/ con los archivos: layout.html y test.html

Ejecutamos nuevamente la Aplicación Web y podemos probarla: http://127.0.0.1:5000/hola/Diego

Pasando Variables

Ahora vamos a mostrar citas aleatorias en vez de mostrar siempre la misma cita. Para pasar múltiples variables, simplemente cambiamos esto:

return render_template(
    'test.html', **locals())

Debemos modificar test.html así:

{% extends "layout.html" %}
{% block body %}

<div class="block1">
<h1>Hola {{name}}!</h1>
  <h2>Dejo una cita interesante para ti: </h2>
  <p>
{{quote}}
  </p>
<img src="https://yt3.ggpht.com/-WJHoIm3PI0M/AAAAAAAAAAI/AAAAAAAAAAA/xqS2eHxnkx0/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">
</div>
{% endblock %}

Y el archivo hola.py así:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

# Autor: Diego Caraballo
# www.pythondiario.com


from flask import Flask, flash, redirect, render_template, request, session, abort
from random import randint
 
app = Flask(__name__)
 
@app.route("/")
def index():
    return "Aplicacion en Flask!"
 
#@app.route("/hola/")
@app.route("/hola//")
def hello(name):
#    return name
    quotes = [ u"'Un buen diseño aporta un valor añadido más rápido de lo que agrega costo.' -- Thomas C. Gale  ",
               u"'Hablar es barato. Enséñame el código' --  Linus Torvalds  ",
               u"'Siempre codifica como si la persona que finalmente mantendrá tu código fuera un psicópata violento que sabe dónde vives...' -- Martin Golding ",
               u"'Si la depuración es el proceso de eliminar errores, entonces la programación debe ser el proceso de introducirlos.' -- Edsger Dijkstra"
             ]
    randomNumber = randint(0,len(quotes)-1) 
    quote = quotes[randomNumber] 
 
    return render_template(
        'test.html',**locals())
 
if __name__ == "__main__":
 app.run()


Ya podemos probar nuestro código y presionando F5 (recargando la página) podremos ver como salen las frases aleatorias.

Con unas simples lineas de código hemos creado nuestra Primera Aplicación Web con Flask y Python.

Espero esta entrada sea de ayuda para crear sus primeras aplicaciones web. Cualquier duda, comentario o sugerencia siempre es bienvenida.

Saludos, Diego!!!

Fuente: https://pythonspot.com/en/flask-web-app-with-python/

10 comentarios:
Write comentarios
  1. Respuestas
    1. Gracias por visitar desde hace tiempo el blog Vanessa!!!!

      Saludos

      Eliminar
  2. Disculpas una corrección: donde dice /template/ debería decir /templates/

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola, muchas gracias. Ya modifique en la entrada la carpeta /templates/. Gracias por la corrección.
      Saludos!!!

      Eliminar
  3. Diego, Gracias, tus aportaciones, me han enriquecido el conocimiento en PYTHON, conforme avance en el tema, nos retroalimentamos, saludos de SAN LUIS POTOSI, MÉXICO

    ResponderEliminar
  4. Una corrección, en la estructura decisional solo debería ir:
    if __name__ == "__main__":
    app.run()

    El código funciona perfectamente. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Oscar, gracias por visitar el blog y el comentario. Efectivamente, las lineas "String" que salen al final del código no van, pero el editor que uso en el blog me las agrega solas :(
      Voy aclarar en la entrada que no se copien esas lineas
      Saludos!!!

      Eliminar
  5. Hola me encanta tu blog, es super educativo!
    Me podrías ayudar?
    Necesito resolver este ejercicio pues tengo examen y los ejercicios serán similares a este:

    Se ha Instalado medidores de contaminantes atmosféricos en diversas poblaciones se quiere conocer por cada población la media de contaminantes y cuál es la población que tiene mayor nivel y cual menor nivel de contaminantes.

    El usuario entrara una secuencia con la siguiente estructura:

    A- 32,28,15,9,17 * B- 42,28,25,19,45,30 * C- 18,20,44,53,27 * Fin

    En esta cadena tenemos diferentes poblaciones con sus medidas separadas por asterisco y las medidas de cada población separadas por (,) donde la letra anterior al guión corresponde al código de la población.

    El programa ha de mostrar

    La población A tiene una media de 20.2
    La población B tiene una media de 31.5
    La población C tiene una media de 32.4

    La población con mejor nivel es la A
    La población con peor nivel es la C

    Mil gracias!

    ResponderEliminar
    Respuestas
    1. Hola Aida, gracias por visitar el blog. Has podido hacer algo del ejercicios?
      Saludos

      Eliminar
  6. Hola esta chevere el tutorial, pero nose por que python me da este error.

    SyntaxError: invalid sybtax

    te agradezco la ayuda de antemano

    ResponderEliminar

Tu comentario es importante y nos motiva a seguir escribiendo...

Entradas más recientes

© 2014 Mi diario Python. Designed by Bloggertheme9 | Distributed By Gooyaabi Templates
Powered by Blogger.