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
