Presentación por Gabriela "Gaba" Rodriguez / @gaba / Open News Fellow 2014
¿Qué vamos a hacer?
Jugar con conjunto de datos desde http://espanaenllamas.es/
http://gabelula.github.io/first-news-app-espanaenllamas/build/
En Windows: prompt
En Linux y Mac: Console y Terminal
Un editor de texto plano. No sirve Word pues agrega formato y otras cosas al texto que no necesitamos. Recomendaciones: notepad, sublime, gedit
En Windows http://windows.github.com
En Mac http://mac.github.com
Crear cuenta en http://github.com
En Windows https://www.python.org/download/windows
Instrucciones http://docs.python-guide.org/en/latest/starting/install/win/
un manejador de packetes para python
Instrucciones para windows: http://docs.python-guide.org/en/latest/starting/install/win/
En Mac: $ brew install pip
En Linux: $ apt-get install pip
manejador de ambientes virtuales, para tener control sobre el software instalado y usado para crear la aplicación
En Windows: $ c:\Python27\Scripts\pip install virtualenv
En Mac: $ pip install virtualenv
Abrir la terminal, ir a donde se quiere crear la aplicación y crear un ambiente virtual llamado mi-app.
$ virtualenv mi-appEn Mac/Linux
$ cd mi-app
$ . bin/activate
En Windows
$ cd Scripts
$ activate
$ cd ..
$ git init repo
$ cd repo
En Windows, abrir GitHub y publicar repositorio en GitHub..
En Linux y Mac, crear repositorio en GitHub. Ir a tu directorio local (repo) y agregar el repositorio remoto recien creado.
git remote add origin https://github.com/mi-usuario-en-github/mi-app-datos.gitun archivo en blanco README con una extension Markdown
En Mac o Linux
$ touch README.mdEn Windows
$ start notepad++ README.mdEscribir algo como
Mi primera aplicación de datos
==============================
Guardarlo.
$ git add README.md
$ git commit -m "Primer commit"
$ git push origin master
un micro framework para crear aplicaciones web en python
Usar pip para instalar Flask
$ pip install Flaskpara configurar Flask
# Mac y Linux:
$ touch app.py
# Windows:
$ start notepad++ app.py
from flask import Flask
app = Flask(__name__)
Usaremos un archivo llamado 'index.html' para colocar la información. Tenemos que especificarlo en app.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html')
crear directorio templates en el mismo repositorio en que estamos.
$ mkdir templates
dentro del directorio templates
# Macs y Linux:
$ touch templates/index.html
# Windows:
$ start notepad++ templates/index.html
y agregarle lo siguiente para poder levantar el servidor local de Flask
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(
host="0.0.0.0",
port=8000,
use_reloader=True,
debug=True,
)
Mirar el resultado en un navegador en http://localhost:8000
$ python app.py
cancela lo que este corriendo de app.py (CTR-C) en la terminal
$ git add .
$ git commit -m "Flask app.py and first template"
$ git push origin master
Comenzar nuevamente editando index.html. Reemplazar el contenido por el esqueleto de un archivo HTML
<!doctype html> <html lang="es"> <head></head> <body> <h1>Incendios en España entre 2004 y 2014</h1> </body> </html>
$ git add templates/index.html
$ git commit -m "Real HTML"
$ git push origin master
Aqui guardaremos el CSV con nuestros datos
$ mkdir static
descargarlo desde https://github.com/gabelula/first-news-app-espanaenllamas/, carpeta static, archivo incendios.csv y guardarlo en directorio static. Agregarlo a git
$ git add static
$ git commit -m "Agregando fuente de datos CSV"
$ git push origin master
Usaremos libreria csv para acceder a nuestros datos
import csv
from flask import Flask
from flask import render_template
app = Flask(__name__)
csv_path = './static/incendio.csv'
csv_obj = csv.DictReader(open(csv_path, 'r'))
csv_list = list(csv_obj)
@app.route("/")
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(
host="0.0.0.0",
port=8000,
use_reloader=True,
debug=True,
)
import csv
from flask import Flask
from flask import render_template
app = Flask(__name__)
csv_path = './static/la-riots-deaths.csv'
csv_obj = csv.DictReader(open(csv_path, 'r'))
csv_list = list(csv_obj)
@app.route("/")
def index():
return render_template('index.html',
object_list=csv_list,
)
if __name__ == '__main__':
app.run(
host="0.0.0.0",
port=8000,
use_reloader=True,
debug=True,
)
Colocar la lista del csv en el index.html
<!doctype html> <html lang="es"> <head></head> <body> <h1>Incendios en España entre 2004 y 2014</h1> {{ object_list }} </body> </html>
En linea de comandos correr app.py y visitar http://localhost:8000 nuevamente
Estamos usando el lenguaje de templating jinja de Flask
Colocaremos más datos en la table.
y luego commitear tu trabajo
$ git add .
$ git commit -m "Creamos tabla de datos"
$ git push origin master
Agregamos una nueva ruta en app.py
import csv
from flask import Flask
from flask import render_template
app = Flask(__name__)
...
@app.route("/")
def index():
return render_template('index.html',
object_list=csv_list
)
@app.route('//')
def detail(number):
return render_template('detail.html')
if __name__ == '__main__':
...
# Macs y Linux:
$ touch templates/detail.html
# Windows:
$ start notepad++ templates/detail.html
Agregar algo simple. Y levantamos la página en el navegador con cualquier número. http://localhost:8000/2004210126/
¡Hola España!
Conectamos el número en la URL con el número identificador real del incendio en el CSV.
Editamos app.py y convertimos la lista que tenemos en algo donde el incendio sea fácilmente buscable por identificador
csv_path = './static/incendios.csv'
csv_obj = csv.DictReader(open(csv_path, 'r'))
csv_list = list(csv_obj)
csv_dict = dict([[o['IDPIF'], o] for o in csv_list])
para que conecte el número en la URL con el registro correspondiente.
@app.route('//')
def detail(number):
return render_template('detail.html',
object=csv_dict[number],
)
http://localhost:8000/2004210126/
$ python app.py
En la tag table reemplazar la fila de
http://localhost:8000
$ python app.py
en detail.html
$ git add .
$ git commit -m "Creamos una página por incendio."
$ git push origin master
Ahora vamos a colocar un mapa con los incendios usando una libreria de Javascript llamada Leaflet. Primero hay que importarla en el index.html
y usar Leaflet para centrarlo en España
... aca esta la table ...
Lo hacemos en el mismo Javascript
GeoJSON es un formato para guardar estructuras de datos geograficos junto a información no geografica
Sustituir
var dataLayer = L.geoJson(data);
por
var dataLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.causa);
}
});
Sustituir lo anterior por
var dataLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup(
'' +
feature.properties.causa +
''
);
}
});
$ git add .
$ git commit -m "Agregamos un mapa a la página principal."
$ git push origin master
para agregar un mapa especifico del incendio.
$ git add .
$ git commit -m "Agregamos un mapa a la página de detalle."
$ git push origin master
Ahora publicaremos nuestra aplicación de datos en Internet. Vamos a usar Frozen Flask, una libreria de Python que crea una página estatica por cada página que hicimos.
Usar pip para instalar Frosen Flask
$ pip install Frozen-Flask
# Mac y Linux:
$ touch freeze.py
# Windows:
$ start notepad++ freeze.py
from flask_frozen import Freezer
from app import app
freezer = Freezer(app)
if __name__ == '__main__':
freezer.freeze()
Esto creara un directorio build con un monton de archivos estaticos.
$ python freeze.py
para mirar uno de los archivos generados en build. Lo único que paso a estaticos fueron las páginas de index.html. Tenemos que editar freeze.py para incluir detail.html
from flask_frozen import Freezer
from app import app, csv_list
freezer = Freezer(app)
@freezer.register_generator
def detail():
for row in csv_list:
yield {'number': row['IDPIF']}
if __name__ == '__main__':
freezer.freeze()
Ahora se generan muchos más archivos en build.
$ python freeze.py
$ git add .
$ git commit -m "Congelamos la app"
$ git push origin master
Para esto sólo tenemos que crear un branch gh-pages en nuestro repositorio.
$ git checkout -b gh-pages # Create the new branch
$ git merge master # Pull in all the code from the master branch
$ git push origin gh-pages # Push up to GitHub from your new branch