#336 Copycopter

Como desarrolladores, el escribir copys no es siempre plato de buen gusto. Nótese por ejemplo el texto en la parte superior de la página que sigue a continuación. ¿Debería decir «Explore nuestro catálogo», «Listado de productos» o quizá «Productos»?

Un cliente nos puede pedir que cambiemos los textos de este titular, o quizá la descripción que aparece debajo, y no se trata de un texto fácil de cambiar. Se encuentra escrito a fuego en la plantilla de la vista, y cualquiera que lo desee cambiar precisará tener acceso al código fuente para poder editar esta plantilla y desplegar la aplicación, tan sólo para cambiar este texto. Sería mucho más fácil si existiese una interfaz sencilla de administración a donde se pueda dirigir al cliente para que edite este tipo de textos. Copycopter hace precisamente esto, proporcionando una interfaz donde los usuarios pueden editar los textos que muestra una aplicación Rails. Copycoter también trae una gema Ruby que hace que sea muy sencillo integrarlo en nuestras aplicación. Se trataba de un servicio de pago pero Thoughtbot ha publicado el código con licencia abierta por lo que su uso es gratuito y en este episodio lo utilizaremos para poder editar el titular y la descripción.

Instalación de un servidor de Copycopter

Primero tendremos que configurar el servidor de Copycopter, que consiste en una aplicación Rails completa que proporciona la interfaz para editar los textos. No se trata de un engine que podamos montar sobre nuestra aplicación. Heroku es un buen sitio para instalarlo, y Copycopter tan sólo necesita un dyno por lo que podremos alojarlo sin coste por el momento. Darse de alta es gratuito, tras hacerlo tenemos que instalar las herramientas de Heroku que incluyen una interfaz de línea de órdenes para gestionar nuestras aplicaciones. Tras descargar e instalar el paquete, tendremos acceso a una nueva orden, heroku, en cualquier ventana de terminal que abramos. A continuación usaremos esta orden para identificarnos con nuestra cuenta de Heroku.

$ heroku login
Enter your Heroku credentials.
Email: eifion@asciicasts.com
Password: 
Authentication successful.

Con esto ya podemos desplegar Copycopter Server en Heroku. La documentación en Github incluye algunas instrucciones para hacerlo, así que las seguiremos. Primero tenemos que clonar el proyecto en nuestra máquina local.

$ git clone git://github.com/copycopter/copycopter-server.git

Luego tendremos que mover la aplicación a su directorio y empezaremos con el despliegue en Heroku. Primero crearemos una nueva aplicación de Heroku.

$ cd copycopter-server/
$ heroku create --stack cedar

Según la configuración que tengamos puede ser que veamos un error al lanzar esta orden. Podemos corregirlo ejecutando bundle install. Lo mejor es lanzar esta orden sin el entorno de tests para reducir el número de dependencias que hay que instalar.

$ bundle install --without=test

Tras hacer esto deberíamos poder ejecutar heroku create sin errores. Los despliegues en Heroku se hacen mediante Git y ya podemos desplegar nuestra aplicación sólo usando git push.

$ git push heroku master

Podemos lanzar las migraciones de base de datos en el servidor con la siguiente orden:

$ heroku run rake db:migrate

Cuando esto haya terminado tenemos que ejecutar heroku restart. Ya podemos crear un proyecto dentro de nuestra instalación de Copycopter con la siguiente orden (obviamente habrá que cambiar los valores de NAME, USERNAME, y PASSWORD).

$ heroku run rake copycopter:project NAME=Store USERNAME=eifion PASSWORD=secret

Con esto podemos ya ver el sitio que acabamos de crear ejecutando heroku open que abrirá la aplicación de Heroku en el navegador.

Si hacemos clic en el enlace “Store” se nos preguntará por el nombre y la clave que utilizamos cuando creamos el proyecto en Copycopter. Tras introducir estas credenciales iremos a la página del proyecto donde se nos indicará que no tenemos una aplicación Rails para este proyecto. La página incuye instrucciones para hacerlo: tenemos que añadir una gema a la aplicación y configurar un inicializador para cargar el cliente de Copycopter.

Configuración de la aplicación Rails para que use Copycopter

Con estas instrucciones vamos a añadir Copycopter a nuestra aplicación de tienda. Primero añadiremos la gema al Gemfile y luego ejecutaremos bundle para instalarla.

gem 'copycopter_client', '2.0.0'

A continuación crearemos el inicializador, que contiene el código de configuración que enganchará nuestra aplicación al servidor de Copycopter que acabamos de desplegar.

CopycopterClient.configure do |config|
  config.api_key = 'f5a22cf0acffc7010db99951be3c5d0d'
  config.host = 'sharp-window-4901.herokuapp.com'
end

Ya podemos hacer que el titular y la descripción de la portada de nuestra web sean editables mediante Copycopter. Para esto tenemos que ir a la plantilla de la página y cambiar los fragmentos de texto por una llamada al método t pasándole una clave identificativa única, así como un valor por defecto en caso de que no esté definido en Copycopter.

<h1><%= t "products.headline", default: "Browse Products" %></h1>

<em><%= t ".tagline", default: "We have what you need at a great low price." %></em>

El método t es el método de internacionalización incluido en Rails lo que quiere decir que podemos utilizar Copycopter para internacionalizar un sitio. Nótese que para la segunda línea el identificador empieza con un punto, lo que hace que sea una clave relativa: la clave será precedida por la ruta de la plantilla.

Tendremos que reiniciar nuestro servidor de aplicación para cargar Copycopter, cuando lo hagamos la página debería tener exactamente el mismo aspecto que antes porque cada llamada a t incluye como valor por defecto el texto que había antes. Sin embargo, cuando visitemos nuestro servidor de Copycopter, veremos una caja de búsqueda que nos permite buscar claves, y si buscamos la clave “headline” veremos que ya aparece la clave products.headline. Si hacemos clic en ella iremos a una página donde podemos editar el texto correspondiente. En concreto, cambiaremos la frase “Browse Products” por “Browse Our Products”

Tenemos la posibilidad de hacer que los cambios queden en modo borrador o bien publicarlo al entorno de producción. Lo dejaremos como borrador y guardaremos nuestros cambios. Al recargar la aplicación veremos que el texto ha cambiado.

Podemos cambiar la entradilla de la misma manera, en este caso tendrá la clave products.index.tagline porque este texto fue configurado con una clave relativa en nuestra aplicación. Podemos añadir estilos en el texto editable y también podemos establecer el texto para los diferentes idiomas si queremos traducir el texto de nuestra página a otras lenguas.

También merece la pena mencionar que con un único servidor de Copycopter podemos gestionar varios proyectos por lo que si tenemos otro sitio que queramos incluir basta con añadir heroku run rake copycopter:project de nuevo con diferente nombre de proyecto.