Merge branch 'master' of github.com:defaude/asciicasts.com-translations

episodes/298 - Getting Started With Spree/es.html

@@ -0,0 +1,204 @@
+<p><a href="http://spreecommerce.com/">Spree</a> es una soluci&oacute;n completa de e-commerce que se puede integrar f&aacute;cilmente en una aplicaci&oacute;n Rails, para convertirla en una tienda que venda productos.  En este episodio configuraremos Spree sobre una aplicaci&oacute;n Rails nueva y ajustaremos algunas de sus funcionalidades para hacernos una idea de c&oacute;mo funciona y ver si encaja con las necesidades de nuestras aplicaciones.</p>
+
+<h3>Instalaci&oacute;n de Spree</h3>
+
+<p>Spree depende de <a href="http://www.imagemagick.org/script/index.php">ImageMagick</a> para gestionar el procesamiento de im&aacute;genes, por lo que lo tenemos que instalarla antes que Spree.  La forma m&aacute;s sencilla es usar HomeBrew.</p>
+
+``` terminal
+$ brew install imagemagick
+```
+
+<p>Tras la instalaci&oacute;n de ImageMagick crearemos una nueva aplicaci&oacute;n Rails 3.1 que llamaremos <code>store</code>.  Spree se puede integrar en una aplicaci&oacute;n Rails ya existente, pero es buena idea empezar con una aplicaci&oacute;n nueva para ver las cosas que a&ntilde;ade.</p>
+
+
+``` terminal
+$ rails new store
+```
+
+<p>Para instalar Spree y sus dependencias tenemos que a&ntilde;adirlo al <code>Gemfile</code> de nuestra aplicaci&oacute;n y luego ejecutar <code>bundle</code>.  Spree se actualiza con mucha frecuencia, por lo que hemos especificado el n&uacute;mero de versi&oacute;n.  La versi&oacute;n m&aacute;s reciente en el momento de escribir este episodio  es la  <code>0.70.1</code>.</p>
+
+``` /Gemfile
+source 'http://rubygems.org'
+
+gem 'rails', '3.1.1'
+
+gem 'sqlite3'
+
+# Gems used only for assets and not required
+# in production environments by default.
+group :assets do
+  gem 'sass-rails',   '~> 3.1.4'
+  gem 'coffee-rails', '~> 3.1.1'
+  gem 'uglifier', '>= 1.0.3'
+end
+
+gem 'jquery-rails'
+
+group :test do
+  gem 'turn', :require => false
+  # Pretty printed test output
+end
+
+gem 'spree', '0.70.1'
+```
+
+<p>Tras la instalaci&oacute;n de las gemas tenemos que ejecutar un generador para a&ntilde;adir Spree a nuestra aplicaci&oacute;n.</p>
+
+``` terminal
+$ rails g spree:site
+```
+
+<p>Esta orden hace varias cosas.  Copia los ficheros de migraci&oacute;n que crea las tablas de la base de datos necesarias para Spree y cambia algunos de los archivos de configuraci&oacute;n de nuestra aplicaci&oacute;n, la mayor&iacute;a dentro de <code>app/assets</code>.  El generador tambi&eacute;n eliminar&aacute; los archivos <code>application.js</code> y <code>application.css</code> por lo que si los hemos personalizado tendremos que integrar nuestros cambios a la manera que Spree organiza los recursos de la aplicaci&oacute;n.</p>
+
+<p>Veremos que en los subdirectorios de <code>app/assets</code> de nuestra aplicaci&oacute;n (<code>images</code>, <code>javascripts</code> y <code>stylesheets</code>) ahora aparecen nuevos directorios llamados <code>admin</code> y <code>store</code>.  Esto se hace as&iacute; para que podamos tener separados los recursos de la tienda de cara al p&uacute;blico y su panel de administraci&oacute;n.  En el fichero <code>all.css</code> (o <code>application.js</code>) podremos ver que se hace <code>require</code> de varios archivos que se encuentran dentro de Spree.</p>
+
+``` /app/assets/stylesheests/store/all.css
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *
+
+ *= require store/spree_core
+ *= require store/spree_auth
+ *= require store/spree_api
+ *= require store/spree_promo
+ *= require store/spree_dash
+
+ *= require_self
+ *= require_tree .
+*/
+```
+
+<p>Antes de dar por concluida nuestra etapa de configuraci&oacute;n a&uacute;n nos queda una orden por lanzar que ejecutar&aacute; las migraciones copiadas anteriormente.  N&oacute;tese que nos preguntar&aacute; si queremos destruir los contenidos que ya existen en la base de datos.</p>
+
+
+``` terminal
+$ rake db:bootstrap
+This task will destroy any data in the database. Are you sure you want to 
+continue? [y/n] y
+db/development.sqlite3 already exists
+...
+```
+
+<p>La orden tambi&eacute;n nos preguntar&aacute; por una direcci&oacute;n de correo y una clave para el usuario de administraci&oacute;n.  Utilizaremos los valores que nos dan por defecto.  Por &uacute;ltimo se nos preguntar&aacute; si queremos cargar ciertos datos de ejemplo y diremos que s&iacute; para tener algo que ver en la tienda.</p>
+
+
+``` terminal
+Email [spree@example.com]: 
+Password [spree123]: 
+Load Sample Data? [y/n]: y
+```
+
+<p>Ya podemos empezar con el servidor de nuestra aplicaci&oacute;n y echarle un vistazo.</p>
+
+<h3>Un vistazo r&aacute;pido a Spree</h3>
+
+<p>Este es el aspecto de nuestra tienda.  Por defecto no se aplica ning&uacute;n tema, por lo que todo tiene un aspecto bastante plano, pero de todas formas tenemos una tienda completa de e-commerce en nuestro sitio, con todos los productos de ejemplo generados anteriormente, incluyendo adem&aacute;s un carrito de la compra y un proceso de <em>checkout</em>.</p>
+
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/841/original/E298I01.png" width="842" height="368" alt="El sitio básico de Spree."/>
+</div>
+
+<p>Hay tambi&eacute;n una secci&oacute;n de administraci&oacute;n a la que se puede acceder por  <a href="http://localhost:3000/admin"><code>http://localhost:3000/admin</code></a>, y podremos verla una vez que hayamos iniciado la sesi&oacute;n utilizando la direcci&oacute;n de correo y la clave que nos proporcion&oacute; el generador.  Se trata de una interfaz de administraci&oacute;n bastante completa donde podremos ver los pedidos procesados, y varias gr&aacute;ficas que nos muestran cu&aacute;les son los productos m&aacute;s vendidos.  Tambi&eacute;n podemos ver y editar los productos y pedidos en otras secciones.</p>
+
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/842/original/E298I02.png" width="842" height="464" alt="El sitio de administración."/>
+</div>
+
+<p>La secci&oacute;n de administraci&oacute;n tambi&eacute;n dispone de varias opciones de configuraci&oacute;n, incluyendo la posibilidad de cambiar los m&eacute;todos de pago de la tienda (diferentes para cada entorno) siendo configurables las distintas credenciales para cada pasarela de pago.</p>
+
+<h3>Personalizaci&oacute;n</h3>
+
+<p>Con todo esto ya tenemos una soluci&oacute;n de e-commerce bastante completa en nuestra aplicaci&oacute;n Rails, pero &iquest;y si queremos tener m&aacute;s control sobre el aspecto exacto de la tienda?  La plantilla por defecto de la tienda es bastante sosa, porque no se ha aplicado ning&uacute;n tema.  Dedicaremos el resto de este episodio a ver varias maneras de personalizar el comportamiento y el aspecto de la tienda.</p>
+
+<p>Spree soporta temas y extensiones, y el tema <a href="https://github.com/spree/spree_blue_theme">Blue Theme</a> sirve como ejemplo de c&oacute;mo podemos persoanlizar Spree.  Este tema, como la mayor&iacute;a de extensiones de Spree, es un <em>engine</em> de Rails, por lo que podemos usarlo para redefinir diversos contenidos de los directorios <code>app/assets</code> y <code>app/overrides</code>.  Para instalar el tema, tan s&oacute;lo tenemos que a&ntilde;adir el siguiente archivo al <code>Gemfile</code>, y ejecutar <code>bundle</code>.</p>
+
+``` /Gemfile
+gem 'spree_blue_theme', :git => 'git://github.com/spree/spree_blue_theme.git'
+```
+
+<p>Para que el tema funcione es necesario cambiar una hoja de estilos y cambiar los estilos por defecto  (los que empiezan por  <code>require store/</code>) por el que se suministra con el tema.</p>
+
+``` /app/assets/stylesheets/store/all.css
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *
+
+ *= require store/screen
+ *= require_self
+ *= require_tree .
+*/
+```
+
+<p>La tienda queda tras esto con un aspecto totalmente diferente. El uso de temas sirve como ejemplo de c&oacute;mo se puede personalizar el aspecto de una aplicaci&oacute;n basada en Spree.</p>
+
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/843/original/E298I03.png" width="842" height="562" alt="The site with the theme applied."/>
+</div>
+
+<h3>C&oacute;mo personalizar partes individuales del sitio</h3>
+
+<p>A continuaci&oacute;n veremos c&oacute;mo personalizar secciones individuales del sitio.  Si, por ejemplo, queremos cambiar el logotipo de la parte superior de la p&aacute;gina por el nuestro, por supuesto podemos hacerlo.  La imagen por defecto est&aacute; en <code>/assets/admin/bg/spree_50.png</code>, y la instala el <em>engine</em> de Spree, pero en nuestra aplicaci&oacute;n podemos redefinirla.</p>
+
+<p>Hay dos formas de hacerlo.  Una es crear el directorio <code>/app/assets/images/admin/bg</code> en nuestra aplicaci&oacute;n y copiar otra imagen, por ejemplo la imagen por defecto <code>rails.png</code>, cambi&aacute;ndole el nombre a <code>spree_50.png</code>.  La imagen tendr&aacute; precedencia sobre la imagen por defecto, y lo veremos al recargar la p&aacute;gina (aunque probablemente tengamos que reiniciar el servidor para que se detecten los cambios).</p>
+
+<p>Otra forma de modificar el logo es redefiniendo parte de la configuraci&oacute;n de Spree. La configuraci&oacute;n por defecto se encuentra en un  <a href="https://github.com/spree/spree/blob/master/core/app/models/spree/app_configuration.rb">fichero</a> que contiene un gran n&uacute;mero de opciones de configuraci&oacute;n, que incluye una opci&oacute;n que dice a d&oacute;nde apunta el logotipo por defecto.  Spree contiene un completo sistema de preferencias que nos permite configurar estas opciones de varias maneras.  Podemos hacerlo mediante la base de datos, mediante el panel de administraci&oacute;n o podemos crear un inicializador y hacer los cambios mediante Ruby.  Escogeremos esta &uacute;ltima opci&oacute;n y crearemos un nuevo fichero de configuraci&oacute;n <code>spree.rb</code>.</p>
+
+``` /config/initializers/spree.rb
+Spree::Config.set(logo: &quot;store/rails.png&quot;)
+```
+
+<p>Se usa <code>Spree::Config.set</code> para establecer opciones de configuraci&oacute;n, y habiendo configurado el logotipo podemos mover nuestra imagen a <code>/app/assets/images/store</code> y llamarla <code>rails.png</code>.  Cuando volvamos a cargar la p&aacute;gina veremos que la imagen se encuentra en  <code>http://localhost:3000/assets/store/rails.png</code>.</p>
+
+<p>Tambi&eacute;n se puede personalizar Spree redefiniendo partes de una plantilla. Para hacer esto tenemos que encontrar la plantilla en el c&oacute;digo fuente de Spree. Esto no es muy dif&iacute;cil pero tendremos que tener cuidado de examinar el c&oacute;digo fuente de la misma versi&oacute;n de Spree que hayamos instalado como gema.  En nuestro caso tendremos que ver  <a href="https://github.com/spree/spree/tree/v0.70.1">la versi&oacute;n 0.70.1</a>.  Tras esto podemos navegar hasta  <code>core/app/views/layouts</code>, que es la plantilla que debemos redefinir porque contiene el c&oacute;digo que muestra el logotipo.</p>
+
+``` /app/views/layouts/spree_application.html.erb
+<div id="logo" data-hook>
+  <%= logo %>
+</div>
+```
+
+<p>Hay dos formas de hacer este cambio.  Podr&iacute;amos copiar el <em>layout</em> al mismo sitio en nuestra aplicaci&oacute;n, y Spree usar&aacute; esta nueva plantilla en lugar de la de por defecto, reflej&aacute;ndose en nuestra aplicaci&oacute;n cualquier cambio que hagamos en ella.</p>
+
+
+<p>Otra forma de hacerlo  es usar una gema llamada  <a href="https://github.com/railsdog/deface">Deface</a>. No tenemos por qu&eacute; instalar esta gema porque ya es una dependencia de Spree, y podemos usarla en el directorio  <code>/app/overrides</code> que gener&oacute; la instalaci&oacute;n de Spree para poder redefinir parte de las plantillas de Spree.  La informaci&oacute;n del README de la p&aacute;gina del proyecto contiene varios ejemplos que muestran su fucnionamiento.  Copiaremos el primer ejemplo a un nuevo fichero en este directorio llamado <code>logo.rb</code> y lo modificaremos para la parte de la p&aacute;gina que queramos cambiar.</p>
+
+``` /app/overrides/logo.rb
+Deface::Override.new(:virtual_path => "layouts/spree_application", 
+                     :name => "logo", 
+                     :replace_contents => "#logo", 
+                     :text => "Store")
+```                     
+
+<p>Aqu&iacute; podemos usar cuatro opciones.  El <code>virtual_path</code> es la ruta a la plantilla erb que deseamos modificar, mientras que el <code>name</code> puede ser cualquier cosa.  Queremos reemplazar los contenidos de un <code>div</code> que tiene un <code>id</code> igual a <code>logo</code>, por lo que utilizaremos la opci&oacute;n <code>replace_contents</code> y le pasaremos un selector CSS que selecciona dicho <code>div</code>.  La opci&oacute;n final especifica con qu&eacute; queremos cambiar dicho contenidos; por ahora cambiaremos el logotipo por el texto  &ldquo;Store&rdquo;.</p>
+
+<p>Si recargamos la p&aacute;gina veremos que ha desaparecido el logo y que en su lugar aparece un texto.</p>
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/844/original/E298I04.png" width="842" height="370" alt="El logo ha sido reemplazado por el texto ."/>
+</div>
+
+
+<p>Aunque hemos cambiar la imagen por texto, tenemos que darle algo de estilos, que podremos a&ntilde;adir en el directorio  <code>stylesheets/store</code>.  Es buena pr&aacute;ctica hacerlo con un nuevo archivo.  Haremos que el texto sea un poco m&aacute;s grande y el color sea blanco.</p>
+
+``` /app/assets/stylesheets/store/layout.css.scss
+#logo {
+  font-size: 32px;
+  color: #FFF;
+}
+```
+
+<p>Si ahora visitamos la aplicaci&oacute;n veremos los nuevos estilos.</p>
+
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/845/original/E298I05.png" width="842" height="370" alt="El texto con los estilos aplicados."/>
+</div>
+
+<p>Con esto terminamos este episodio.  Spree ofrece mucha m&aacute;s funcionalidad que no hemos visto hoy aqu&iacute;, por lo que se recomienda leer las  <a href="http://guides.spreecommerce.com/">Gu&iacute;as de Spree</a> donde hay mucha m&aacute;s informaci&oacute;n: hay un apartado dedicado a pr&aacute;cticamente cualquier cosa que necesitemos saber acerca de Spree.</p>