<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Iker Perez de Albeniz &#187; imagenes</title>
	<atom:link href="http://www.ikeralbeniz.net/tag/imagenes/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ikeralbeniz.net</link>
	<description>mi propio egolog sobre tecnología y frikadas varias</description>
	<lastBuildDate>Mon, 26 Apr 2010 15:54:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Sencillo Mirror de imágenes para tu Blog usando Google App Engine</title>
		<link>http://www.ikeralbeniz.net/2010/01/25/sencillo-mirror-de-imagenes-para-tu-blog-usando-google-app-engine/</link>
		<comments>http://www.ikeralbeniz.net/2010/01/25/sencillo-mirror-de-imagenes-para-tu-blog-usando-google-app-engine/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 16:59:53 +0000</pubDate>
		<dc:creator>Iker</dc:creator>
				<category><![CDATA[Tecnologia]]></category>
		<category><![CDATA[CDN]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[Content Delivery Network]]></category>
		<category><![CDATA[example]]></category>
		<category><![CDATA[gae]]></category>
		<category><![CDATA[google App Engine]]></category>
		<category><![CDATA[howto]]></category>
		<category><![CDATA[imagenes]]></category>
		<category><![CDATA[mirror]]></category>
		<category><![CDATA[python]]></category>
		<category><![CDATA[reposotorio]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.ikeralbeniz.net/?p=116</guid>
		<description><![CDATA[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.]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>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.</p>
<p><span style="text-decoration: underline;"><strong>main.py</strong></span></p>
<fieldset>import cgi<br />
import os<br />
from google.appengine.api import users<br />
from google.appengine.ext import webapp<br />
from google.appengine.ext.webapp.util import run_wsgi_app<br />
import google.appengine.ext.webapp.util<br />
from google.appengine.ext import db<br />
from google.appengine.ext.webapp import template</p>
<p>class Mirror(db.Model):<br />
&nbsp;name = db.TextProperty()<br />
&nbsp;mime = db.TextProperty()<br />
&nbsp;picture = db.BlobProperty(default=None)</p>
<p>class GetImage(webapp.RequestHandler):<br />
&nbsp;def get(self,name):<br />
&nbsp;&nbsp;image = getImageFile(name)<br />
&nbsp;&nbsp;if (movie and movie.picture):<br />
&nbsp;&nbsp;&nbsp;self.response.headers['Content-Type'] = image.mime<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(image.picture)<br />
&nbsp;&nbsp;else:<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(&#8220;&lt;!DOCTYPE HTML PUBLIC \&#8221;-//IETF//DTD HTML 2.0//EN\&#8221;&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(&#8220;&lt;html&gt;\r\n\t&lt;head&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(&#8220;\t\t&lt;title&gt;404 Not Found&lt;/title&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(&#8220;\t&lt;/head&gt;\r\n\t&lt;body&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(&#8220;\t\t&lt;h1&gt;Not Found&lt;/h1&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(&#8220;\t\t&lt;p&gt;The requested URL /%s was not found on this server.&lt;/p&gt;\r\n&#8221;%name)<br />
&nbsp;&nbsp;&nbsp;self.response.out.write(&#8220;\t&lt;/body&gt;\r\n&lt;/html&gt;\r\n&#8221;)</p>
<p>def getImageFile(name):<br />
&nbsp;images = Mirror.all()<br />
&nbsp;for image in images:<br />
&nbsp;&nbsp;if image.name == name:<br />
&nbsp;&nbsp;&nbsp;return image<br />
&nbsp;return None</p>
<p>class MainHandler(webapp.RequestHandler):</p>
<p>&nbsp;def get(self):<br />
&nbsp;&nbsp;images = Mirror.all()<br />
&nbsp;&nbsp;template_values = {<br />
&nbsp;&nbsp;&nbsp;&#8217;error&#8217;: &#8220;&#8221;,<br />
&nbsp;&nbsp;&nbsp;&#8217;images&#8217;: images,<br />
&nbsp;&nbsp;}<br />
&nbsp;&nbsp;path = os.path.join(os.path.dirname(__file__), &#8216;form.html&#8217;)<br />
&nbsp;&nbsp;self.response.out.write(template.render(path, template_values))</p>
<p>&nbsp;def post(self):<br />
&nbsp;&nbsp;newimage = Mirror()<br />
&nbsp;&nbsp;imagedata = self.request.get(&#8220;image&#8221;)<br />
&nbsp;&nbsp;newimage.picture = db.Blob(imagedata)<br />
&nbsp;&nbsp;newimage.name = self.request.POST[u'image'].filename<br />
&nbsp;&nbsp;newimage.mime = self.request.POST[u'image'].type<br />
&nbsp;&nbsp;newimage.put()<br />
&nbsp;&nbsp;self.redirect(&#8220;/&#8221;)</p>
<p>def main():<br />
&nbsp;application = webapp.WSGIApplication([('/', MainHandler),(r'/(.*)', GetImage)],debug=True)<br />
&nbsp;run_wsgi_app(application)</p>
<p>if __name__ == &#8216;__main__&#8217;:<br />
&nbsp;main()</fieldset>
<p>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.</p>
<fieldset>class Mirror(db.Model):<br />
&nbsp;name = db.TextProperty()<br />
&nbsp;mime = db.TextProperty()<br />
&nbsp;picture = db.BlobProperty(default=None)</fieldset>
<p>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).</p>
<p>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:</p>
<fieldset>application = webapp.WSGIApplication([('/', MainHandler),(r'/(.*)', GetImage)],debug=True)<br />
run_wsgi_app(application)</fieldset>
<p>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 /<loquesea> se nos mostrara el archivos <loquesea> a través de la classe GetImage.</p>
<p><strong>La Clase MainHandler</strong></p>
<fieldset>class MainHandler(webapp.RequestHandler):</p>
<p>def get(self):<br />
&nbsp;images = Mirror.all()<br />
&nbsp;template_values = {<br />
&nbsp;&nbsp;&#8217;error&#8217;: &#8220;&#8221;,<br />
&nbsp;&nbsp;&#8217;images&#8217;: images,<br />
&nbsp;}<br />
&nbsp;path = os.path.join(os.path.dirname(__file__), &#8216;form.html&#8217;)<br />
&nbsp;self.response.out.write(template.render(path, template_values))</p>
<p>def post(self):<br />
&nbsp;newimage = Mirror()<br />
&nbsp;imagedata = self.request.get(&#8220;image&#8221;)<br />
&nbsp;newimage.picture = db.Blob(imagedata)<br />
&nbsp;newimage.name = self.request.POST[u'image'].filename<br />
&nbsp;newimage.mime = self.request.POST[u'image'].type<br />
&nbsp;newimage.put()<br />
&nbsp;self.redirect(&#8220;/&#8221;)</fieldset>
<p>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. </p>
<p>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.</p>
<p><strong>La Clase GetImage</strong></p>
<fieldset>class GetImage(webapp.RequestHandler):<br />
&nbsp;def get(self,name):<br />
&nbsp;image = getImageFile(name)<br />
&nbsp;if (movie and movie.picture):<br />
&nbsp;&nbsp;self.response.headers['Content-Type'] = image.mime<br />
&nbsp;&nbsp;self.response.out.write(image.picture)<br />
&nbsp;else:<br />
&nbsp;&nbsp;self.response.out.write(&#8220;&lt;!DOCTYPE HTML PUBLIC \&#8221;-//IETF//DTD HTML 2.0//EN\&#8221;&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;self.response.out.write(&#8220;&lt;html&gt;\r\n\t&lt;head&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;self.response.out.write(&#8220;\t\t&lt;title&gt;404 Not Found&lt;/title&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;self.response.out.write(&#8220;\t&lt;/head&gt;\r\n\t&lt;body&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;self.response.out.write(&#8220;\t\t&lt;h1&gt;Not Found&lt;/h1&gt;\r\n&#8221;)<br />
&nbsp;&nbsp;self.response.out.write(&#8220;\t\t&lt;p&gt;The requested URL /%s was not found on this server.&lt;/p&gt;\r\n&#8221;%name)<br />
&nbsp;&nbsp;self.response.out.write(&#8220;\t&lt;/body&gt;\r\n&lt;/html&gt;\r\n&#8221;)</fieldset>
<p>La clase getImage recoge en el parámetro nombre de la función get el resultado de la expresión regular definida en el <em>path r’(.*)’</em>. 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. </p>
<fieldset>def getImageFile(name):<br />
&nbsp;images = Mirror.all()<br />
&nbsp;for image in images:<br />
&nbsp;&nbsp;if image.name == name:<br />
&nbsp;&nbsp;&nbsp;return image<br />
&nbsp;return None</fieldset>
<p>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.</p>
<p><span style="text-decoration: underline;"><strong>form.html</strong></span></p>
<fieldset>&lt;!DOCTYPE HTML PUBLIC &#8220;-//IETF//DTD HTML 2.0//EN&#8221;&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;Upload File&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;h1&gt;Select File to Upload&lt;/h1&gt;<br />
&lt;form action=&#8221;" method=&#8221;POST&#8221; enctype=&#8221;multipart/form-data&#8221; &gt;<br />
&lt;input name=&#8221;image&#8221; type=&#8221;file&#8221; size=&#8221;42&#8243; /&gt;<br />
&lt;input type=&#8221;submit&#8221; value=&#8221;Upload&#8221;&gt;<br />
&lt;/form&gt;<br />
&lt;H1&gt;Index of Files&lt;/H1&gt;<br />
&lt;PRE&gt;<br />
&lt;IMG SRC=&#8221;/blank.gif&#8221; ALT=&#8221;     &#8220;&gt; &lt;A HREF=&#8221;?N=D&#8221;&gt;Name&lt;/A&gt;<br />
&lt;HR&gt;<br />
{% for image in images %}<br />
&lt;IMG SRC=&#8221;/image2.gif&#8221; ALT=&#8221;[IMG]&#8220;&gt; &lt;A HREF=&#8221;/{{image.name}}&#8221;&gt;{{image.name}}&lt;/A&gt;<br />
{% endfor %}<br />
&lt;/PRE&gt;<br />
&lt;HR&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</fieldset>
<p>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.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ikeralbeniz.net/2010/01/25/sencillo-mirror-de-imagenes-para-tu-blog-usando-google-app-engine/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
