Se trata de una pagina de administración de tareas en donde al ingresar con tu cuenta de google puedes crear una pequeña lista de tareas agregando emoticones, todo esto en
la nube, ya que puedes acceder a la lista en tu computadora de tu casa, o en las de la escuela incluso también en un celular, siempre y cuando tengas Internet.
Al principio podemos ver un cuadro de texto en donde escribimos la tarea, después al dar guardar, ya hemos creado nuestra lista, para borrar simplemente le das a la x que viene de lado de tu tarea.
implementación en código.
Main.py
#!/usr/bin/env python
import os
import cgi
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import template
from google.appengine.ext import db
import facebook
from facebook import FacebookError
_FbApiKey = '*****'
_FbSecret = '*****'
class Tareita(db.Model):
autor = db.UserProperty()
escrito=db.StringProperty()
termina = db.BooleanProperty()
class Principal(webapp.RequestHandler):
def get(self):
user = users.get_current_user()
nickname = user.nickname()
url = users.create_logout_url(self.request.uri)
url_linktext = 'Salir'
tareitas = Tareita.all()
tareitas.filter("autor =", users.get_current_user())
template_values = {'nickname': nickname, 'tareitas': tareitas,'url': url, 'url_linktext': url_linktext,}
path = os.path.join(os.path.dirname(__file__), 'index.html')
self.response.out.write(template.render(path, template_values))
def post(self):
self.response.out.write(self.request.get("escrito"));
tareita = Tareita()
tareita.autor = users.get_current_user()
tareita.escrito = self.request.get("escrito")
tareita.termina = False
tareita.put()
self.redirect('/')
class borra(webapp.RequestHandler):
def get(self):
recoge=cgi.escape(self.request.get('escrito'))
tareita=db.GqlQuery("select * from Tareita where escrito=:1",recoge)
usu=tareita.fetch(1)
if len(usu)>0:
usu[0].delete()
self.redirect("/")
def main():
application = webapp.WSGIApplication([('/', Principal),
('/borra', borra),],
debug=True)
util.run_wsgi_app(application)
if __name__ == '__main__':
main()
El codigo de python lo que hace es almacenar los datos que se ingrese en una clase de base de datos Tareita, los muestra, los borra segun sea el caso, el self.redirect('/') hace que no tengamos que abrir otra ventana si no que en una misma podamos borrar y crear nuevas tareas, se agrega un path que manda a escribir los datos que se pidan en el html estatico que esta mas abajo.
app.yaml
----------------------------------
application: robertohelloworld
version: 1
runtime: python
api_version: 1
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: .*
script: main.py
login: required
-----------------------------------Este archivo que se necesita, simplemente ponemos el script que necesitamos y en donde se va a ejecutar en este caso siempre va a ser en index, le puse que se requiera el acceso por medio de la cuenta de google para así poder filtrar mediante el código python, las tareas que sean solamente del usuario y el mismo las vea, nadie mas.
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
</head>
<body>
<div id="reco">
<h1>Administración de tareas</h1>
</div><br><br>
<h2>Hola!, {{nickname}}</h2>
<div id="forma"><br>
Escribe tu nueva tarea:<br><br>
<input type="submit" value=" ☆ " id="pica"/>
<input type="submit" value=" ♡ " id="pica1"/>
<input type="submit" value=" ☺ " id="pica2"/>
<input type="submit" value=" ☻ " id="pica3"/>
<input type="submit" value=" ✎ " id="pica4"/>
<input type="submit" value=" ♬ " id="pica5"/><br><br>
<input type="submit" value=" ❣·•● ➸ " id="pica6"/>
<input type="submit" value=" ─═☆ ☆═─ " id="pica7"/>
<input type="submit" value=" ●︿● " id="pica8"/>
<input type="submit" value=" ●﹏● " id="pica10"/>
<input type="submit" value=" ╰☆╮ " id="pica9"/><br><br>
<form action="" method="post">
<input type="text" name="escrito" maxlength="45" id="escri"/><br><br>
<input type="submit" value="Guardar"/>
</form>
<script>
var ta=document.getElementById("escri");
document.getElementById("pica").onclick=function() {
ta.value+='☆';
}
var ta=document.getElementById("escri");
document.getElementById("pica1").onclick=function() {
ta.value+='♡';
}
var ta=document.getElementById("escri");
document.getElementById("pica2").onclick=function() {
ta.value+='☺';
}
var ta=document.getElementById("escri");
document.getElementById("pica3").onclick=function() {
ta.value+='☻';
}
var ta=document.getElementById("escri");
document.getElementById("pica4").onclick=function() {
ta.value+='✎';
}
var ta=document.getElementById("escri");
document.getElementById("pica5").onclick=function() {
ta.value+='♬';
}
var ta=document.getElementById("escri");
document.getElementById("pica6").onclick=function() {
ta.value+='❣·•● ➸';
}
var ta=document.getElementById("escri");
document.getElementById("pica7").onclick=function() {
ta.value+='─═☆☆═─';
}
var ta=document.getElementById("escri");
document.getElementById("pica8").onclick=function() {
ta.value+='●︿●';
}
var ta=document.getElementById("escri");
document.getElementById("pica9").onclick=function() {
ta.value+='╰☆╮';
}
var ta=document.getElementById("escri");
document.getElementById("pica10").onclick=function() {
ta.value+='●﹏●';
}
</script>
</div><br><br><br>
<h3>Lista de tareas:</h3><br>
<div id="inst"><br><br>
{% for tareita in tareitas %}
<a href="borra?escrito={{ tareita.escrito }}">×</a> {{ tareita.escrito }}<br><br>
{% endfor %}
<br><br>
</div>
<br><br><br>
<div id="adv"><br>
<a href="{{ url }}">{{ url_linktext }}</a> <br><br>
</div>
</body>
</html>
En el index.html le agregué un varios scripts que son los que hacen que se pueda poner los emoticones en la caja de texto, también se utiliza un for para listar todas las tareitas que se escriben con una x que es la que manda a llamar a la clase borra para realizar dicha acción.body {
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background-image: url(lateral.jpg);
background-attachment: fixed;
background-repeat: repeat;
text-align: justify;
background-color: #DDDDDD;
}
#forma {
color: black;
padding: 0px;
margin-right: 25px;
margin-left: 25px;
text-align: center;
background-color: #F7BE81;
opacity: 0.9;
border: 12px solid #fff;
position: center;
}
h1 {
color:#81F7F3;
text-align: center;
}
h2 {
color:#CEF6CE;
text-align: center;
}
h3 {
color:#CEF6CE;
text-align: center;
}
#adv {
color: white;
text-align: center;
margin-right: 250px;
margin-left: 250px;
background-color: #C0690C;
background-repeat: no-repeat;
opacity: 0.9;
border: 12px solid #fff;
position: center;
}
#barra{
width:auto;
padding-top: 0px;
height:115px;
background:url(bannernew.jpg) left top repeat-x;
padding-top: 0em;
border: 0;
margin: 0;
}
#inst {
color: white;
text-align: center;
background-color: #088A85;
background-repeat: no-repeat;
margin-right: 100px;
margin-left: 100px;
position: center;
opacity: 0.9;
border: 12px solid #fff;
}
#reco {
color: white;
text-align: center;
background-color: #3B240B;
background-repeat: no-repeat;
opacity: 0.9;
border: 12px solid #3B240B;
position: center;
}
#cuestion {
color: #fff;
padding: 40px;
margin-right: 120px;
margin-left: 120px;
#text-align: center;
background-color: #3B240B;
opacity: 0.9;
border: 12px solid #FFF;
position: center;
}
El CSS es el mismo de mi proyecto anterior ;) solamente que ahora el fondo corté un pedazo y que se repitiera la imagen para optimizarEspero que la aplicación sea de su agrado, para finalizar les dejo las ligas a mi proyecto.
http://robertohelloworld.appspot.com/ directamente en Google Apps
http://apps.facebook.com/tareitas/
Para descargar todos los archivos de la aplicación y lo corras en tu servidor da clic aqui
Muy útil =D hubiera estado bien si tu lista de tareas hubiera aparecido tal vez en una tabla del lado derecho o en una nueva pestaña para asi no tener que bajar la barra de desplazamiento pero esta muy bien felicidades =D
ResponderEliminarLo tomare en cuenta adan :)
ResponderEliminarMuy util par tener una lista de cosas que hacer en linea y verla en diferentes locaciones.Estaría bueno poder agregarle una fecha limite para realizar la tarea.
ResponderEliminarSaludos
Gracias Isaias :)
ResponderEliminarjaja esta muy bien tu aplicacion y es muy util para cuando tienes que tomar nota de algo y no tienes donde, muy util para labs de programacion si pudieras subir archivos pequeños como tareas no terminadas seria extremadamente util, muy buena idea.
ResponderEliminarMuy util tu aplicación la verdad, e interesante el diseño, me alegra que alguien mas usara python en google apps =D. Saludos
ResponderEliminarHola Roberto, esta muy bien tu aplicación. Estoy de acuerdo con Adan en que aparezca una tablita al lado, ahorita que la probé pense que no se habia guardado y luego vi que tenia barra de desplazamiento jajaja. Y como dice Isaias deberias ponerle como una fecha limite para que te avisara que la tienes que terminar. Saludos!
ResponderEliminarEsta bien la aplicacion y puede resultar muy util.
ResponderEliminarPodemos agregar algunos complementos ya que coincido con mis compañeros: agregar horas y fechas limite, incluso enviar recordatorios por e-mail.
Suerte :)
Que bien, ya la probe y si estaría muy bien si pusieras eso de recordatorios de las tareas , pero muy bien.
ResponderEliminarSaludos
Excelente. Bien presentado también. 40 puntos completos. Un punto extra por sus buenas sugerencias a Adán y a Gemma. La de Gemma va en participación de lenguajes.
ResponderEliminar