Archivo

Entradas Etiquetadas ‘howto’

Sencillo Mirror de imágenes para tu Blog usando Google App Engine

Lunes, 25 de Enero de 2010
6 comentarios

Muchos de los Hostings que usamos para albergar nuestras webs tienen una limitación de ancho de banda mensual. Por tanto es bastante interesante disponer de un sistema de almacenamiento de imágenes que nos permita disponer de dichos archivos sin consumir ancho de banda de nuestro posting. En este artículo voy a explicar como realizar una pequeña aplicación para tener nuestro mirror de imágenes.

En este articulo no voy a dar por echo que el lector conoce y se maneja en el entorno Google App Engine por tanto me centrare en explicar el código utilizado.

main.py

import cgi
import os
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
import google.appengine.ext.webapp.util
from google.appengine.ext import db
from google.appengine.ext.webapp import template

class Mirror(db.Model):
 name = db.TextProperty()
 mime = db.TextProperty()
 picture = db.BlobProperty(default=None)

class GetImage(webapp.RequestHandler):
 def get(self,name):
  image = getImageFile(name)
  if (movie and movie.picture):
   self.response.headers['Content-Type'] = image.mime
   self.response.out.write(image.picture)
  else:
   self.response.out.write(“<!DOCTYPE HTML PUBLIC \”-//IETF//DTD HTML 2.0//EN\”>\r\n”)
   self.response.out.write(“<html>\r\n\t<head>\r\n”)
   self.response.out.write(“\t\t<title>404 Not Found</title>\r\n”)
   self.response.out.write(“\t</head>\r\n\t<body>\r\n”)
   self.response.out.write(“\t\t<h1>Not Found</h1>\r\n”)
   self.response.out.write(“\t\t<p>The requested URL /%s was not found on this server.</p>\r\n”%name)
   self.response.out.write(“\t</body>\r\n</html>\r\n”)

def getImageFile(name):
 images = Mirror.all()
 for image in images:
  if image.name == name:
   return image
 return None

class MainHandler(webapp.RequestHandler):

 def get(self):
  images = Mirror.all()
  template_values = {
   ’error’: “”,
   ’images’: images,
  }
  path = os.path.join(os.path.dirname(__file__), ‘form.html’)
  self.response.out.write(template.render(path, template_values))

 def post(self):
  newimage = Mirror()
  imagedata = self.request.get(“image”)
  newimage.picture = db.Blob(imagedata)
  newimage.name = self.request.POST[u'image'].filename
  newimage.mime = self.request.POST[u'image'].type
  newimage.put()
  self.redirect(“/”)

def main():
 application = webapp.WSGIApplication([('/', MainHandler),(r'/(.*)', GetImage)],debug=True)
 run_wsgi_app(application)

if __name__ == ‘__main__’:
 main()

Comos sabéis la aplicación que subimos a los servidores de Google corren en una SandBox donde no es posible escribir en disco, por tanto usaremos el sistema de almacenamiento de GAE para almacenar las imágenes. Por tanto primero de todo deberemos definir un modelo de datos.

class Mirror(db.Model):
 name = db.TextProperty()
 mime = db.TextProperty()
 picture = db.BlobProperty(default=None)

En este caso definimos la estructura Mirror con sus propiedades name (nombre de la imagen), mime (mime de la imagen) y picture (la imagen en bruto).

Comos sabéis el sistema de paths de GAE es gestionado a través de SGIApplication por tanto para poder acceder a las imágenes almacenadas deberemos definir una política de paths. En este caso he definido la siguiente:

application = webapp.WSGIApplication([('/', MainHandler),(r'/(.*)', GetImage)],debug=True)
run_wsgi_app(application)

Es decir en caso de acceder a / se nos mostrara la pagina principal a través de la clase MainHandler y en caso de que se nos muestre / se nos mostrara el archivos a través de la classe GetImage.

La Clase MainHandler

class MainHandler(webapp.RequestHandler):

def get(self):
 images = Mirror.all()
 template_values = {
  ’error’: “”,
  ’images’: images,
 }
 path = os.path.join(os.path.dirname(__file__), ‘form.html’)
 self.response.out.write(template.render(path, template_values))

def post(self):
 newimage = Mirror()
 imagedata = self.request.get(“image”)
 newimage.picture = db.Blob(imagedata)
 newimage.name = self.request.POST[u'image'].filename
 newimage.mime = self.request.POST[u'image'].type
 newimage.put()
 self.redirect(“/”)

La clase MainHandler en caso de se accedida mediante GET mostrara el formulario HTML (form.html) y un listado de imágenes almacenadas, para hacer mas legible el código he optado por usar la funcionalidad de platillas que ofrece GAE.

El formulario envía su mismo path la imagen utilizando el método POST por tanto en el tetrodo POST de la clase MainHandler donde se almacenara la imagen enviada.

La Clase GetImage

class GetImage(webapp.RequestHandler):
 def get(self,name):
 image = getImageFile(name)
 if (movie and movie.picture):
  self.response.headers['Content-Type'] = image.mime
  self.response.out.write(image.picture)
 else:
  self.response.out.write(“<!DOCTYPE HTML PUBLIC \”-//IETF//DTD HTML 2.0//EN\”>\r\n”)
  self.response.out.write(“<html>\r\n\t<head>\r\n”)
  self.response.out.write(“\t\t<title>404 Not Found</title>\r\n”)
  self.response.out.write(“\t</head>\r\n\t<body>\r\n”)
  self.response.out.write(“\t\t<h1>Not Found</h1>\r\n”)
  self.response.out.write(“\t\t<p>The requested URL /%s was not found on this server.</p>\r\n”%name)
  self.response.out.write(“\t</body>\r\n</html>\r\n”)

La clase getImage recoge en el parámetro nombre de la función get el resultado de la expresión regular definida en el path r’(.*)’. Por tanto en este caso name será el nombre del archivo. Mediante la función getImageFile recorremos la base de datos y buscamos el archivo solicitado.

def getImageFile(name):
 images = Mirror.all()
 for image in images:
  if image.name == name:
   return image
 return None

Si existe el archivo este es mostrado modificando la cabecera Content-Type con el mime del archivo para que el navegador lo muestre correctamente. En caso contrario se muestra un mensaje de error.

form.html

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”>
<html>
<head>
<title>Upload File</title>
</head>
<body>
<h1>Select File to Upload</h1>
<form action=”" method=”POST” enctype=”multipart/form-data” >
<input name=”image” type=”file” size=”42″ />
<input type=”submit” value=”Upload”>
</form>
<H1>Index of Files</H1>
<PRE>
<IMG SRC=”/blank.gif” ALT=”     “> <A HREF=”?N=D”>Name</A>
<HR>
{% for image in images %}
<IMG SRC=”/image2.gif” ALT=”[IMG]“> <A HREF=”/{{image.name}}”>{{image.name}}</A>
{% endfor %}
</PRE>
<HR>
</body>
</html>

Se trata de un ejemplo sencillo, no hay validación de imágenes duplicadas. Además seria posible enviar un código de control a través de la petición POST para evitar que nos suban imágenes de terceros o incluso usar el sistema de loging de Google.

Iker Tecnologia , , , , , , , , , , ,

Instalando ANDROID + ECLIPSE en WINDOWS (2000 o XP)

Jueves, 15 de Noviembre de 2007
2 comentarios

En el artículo anterior explicábamos como instalar ANDROID y ECLIPSE en UBUNTU. Ahora toca el turno a Windows y puesto que la configuración de eclipse es la misma en ambos sistemas operativos solo se explicara como se instalan el SDK y ECILPSE en el ordenador.

El primer paso es instalar el SDK, para lo cual nos lo descargaremos de esta dirección:

http://dl.google.com/android/android_sdk_windows_m3-rc20a.zip

Una vez descargado y descomprimida cambiamos el nombre de la carpeta “android_sdk_windows_m3-rc20a” por “android_sdk” y la movemos a nuestro C:\Archivos de Programa\.

Para terminar la instalación solo falta añadir la ruta del SDK al path, para lo cual vamos a INICIO> Configuración > Panel de Control y entramos en Sistema.

Dentro del panel de Sistema vamos a la pestaña Opciones Avanzadas y pulsamos en Variables de Entorno

Se nos mostraran dos listas de variables: Variables de usuario para usuario y variables del sistema. En nuestro caso añadiremos una variable y cambiaremos el path en la lista de Variables del sistema para que todos los usuarios tengan acceso al SDK.

Por tanto pulsaremos en Nueva y nos aparecerá un cuadro de dialogo donde meteremos el nombre de la variable y su ruta. En el caso del SDK pondremos como nombre SDK_ROOT y la ruta C:\Archivos de Programa\android_sdk y pulsamos Aceptar. La nueva variable se añadirá a la lista.

Ya solo falta añadir la ruta al path, por tanto, buscamos la variable PATH de la lista de Variables del sistema, y pulsamos sobre ella dos veces. Se nos aparecerá el mismo cuadro de dialogo de antes peor esta vez completo con el nombre PATH un montón de rutas que están añadidas al path separadas por “;”. Por tanto añadiremos los siguiente al final del campo Valor de la variable: ;%SDK_ROOT%\tools

NOTA: no olvidar el “;” ni los “%”

Pulsamos Aceptar a todas las ventanas hasta cerrarlas todas y ya tenemos el SDK instalado.

Y asolo faltaría instalar Eclipse. Para instalar eclipse solo hay que descargarse eclipse del siguiente enlace, descomprimirlo y mover la carpeta a C:\Archivos de Programa\. (para que esté todo mas ordenado..)

A partir de aquí faltaría configurar y plugin de android para eclipse. Los pasos son idénticos que en Ubuntu así que podéis seguir los mismos pasos que se indican en el articulo anterior.

Iker Android, Manuales, Tecnologia , , , , ,

Instalando ANDROID + ECLIPSE en UBUNTU

Miércoles, 14 de Noviembre de 2007
1 comentario

En este artículo vamos a explicar mas detalladamente la instalación de ANDROID SDK, ECLIPSE y el PLUGIN DE ANDROID para eclipse en UBUNTU. Básicamente son las mismas instrucciones que aparecen en la pagina de google pero un poco mas comentadas y con imágenes, para que aquellos que siempre se os atraviesan las instalaciones lo tengáis mas fácil.

NOTA: En esta guía supondremos que hacemos una instalación para el usuario de nombre “user”.

Lo primero descargar ABDROID SDK, podes hacerlo con vuestro navegador o por consola con wget. Por tanto abrimos una consola y nos situamos en nuestro home. Descomprimimos y cambiamos en nombre del directorio “android_sdk_linux_m3-rc20a” por “android_sdk”

user@ubuntu:~$ wget http://dl.google.com/android/android_sdk_linux_m3-rc20a.zip
user@ubuntu:~$ unzip android_sdk_linux_m3-rc20a.zip
user@ubuntu:~$ mv android_sdk_linux_m3-rc20a android_sdk

Finalmente para terminar la instalación tendremos que añadir el SDK al path, por tanto editaremos el archivo .bashrc de nuestro /home con cualquier editor de texto (vi, gedit, kate…) y añadiremos las siguientes des lineas al final del documento:

user@ubuntu:~$ vi /home/user/.bashrc

export SDK_ROOT=/home/user/android_sdk
export PATH=$SDK_ROOT/tools:$PATH

Y atenemos el SDK instalado y es posible acceder a sus aplicaciones desde consola, por tanto ahora nos queda instalar un IDE para programar cómodamente nuestras aplicaciones. Para eso el IDE idóneo es ECLIPSE ya que existen plugins para trabajar con ABDROID de forma sencilla.

Por tanto, en caso de que no lo hubiéramos instalado, pasamos a instalar ECLIPSE:

user@ubuntu:~$ apt-get install eclipse

Tras descargarse, se instalara automáticamente gracias a APT por lo que una vez finalizada la instalación ya podremos lanzar eclipse. En caso de que no dispongas de ningún acceso directo a la aplicación podéis acceder por consola.

user@ubuntu:~$ eclipse

Una vez iniciado eclipse nos vamos al menú Help > Software Updates > Find and Install….

Seleccionamos Search for new features to install y pulsamos Next.

Pulsamos New Remote Site y se nos mostrara un dialogo que nos pedirá una URL y un nombre para identificar el “repositorio”. Por nombre podemos poner “Android” y en la URL introducimos la siguiente dirección:

https://dl-ssl.google.com/android/eclipse/

y pulsamos OK.

Se nos añadirá un repositorio a la lista, lo seleccionamos (si no lo esta) y pulsamos Finish.

Nos aparecerá ahora un árbol con la siguiente estructura: Android Plugin > Eclipse Integration > Android Development Tools, los seleccionamos todos y pulsamos Next.

Aceptamos las condiciones de la licencia y pulsamos Next.

Finalmente nos aparecerá una lista de tareas a instalar, y nos aparecerá “Android Developm..”, y pulsamos Finish.

El instalador descargara el paquete y lo instalara automáticamente.

NOTA: El plugin ADT no esta firmado por lo que deberemos aceptar su instalación a pesar de ello.. por lo que pulsaremos Install All.

Ya esta el plugin completamente instalado, y solo falta reiniciar eclipse.

Una vez reiniciado solo falta configurar el plugin indicándole la ruta al SDK, por lo tanto accedemos al menú Window > Preferences…

seleccionamos ANDROID e introducimos la ruta a nuestro SDK, que en nuestro ejemplo era /home/user/android_sdk/.

Finalmente pulsamos Apply y nos aparecerá una ventana con un aviso de que el plugin ya esta instalado y configurado correctamente.

Ya tenemos nuestro entorno de desarrollo completamente instalado. En siguientes artículos explicaremos como hacer pequeñas aplicaciones paso a paso!!!

Iker Android, Manuales, Tecnologia , , , ,