Archive for Desarrollo web

Octubre 18th 2015

¿Qué es Bower y para que sirve en Rails?

Número de lecturas: 1408
{lang: 'es-419'}

Bower es una herramienta que nos permite encontrar proyectos y herramientas de javascript y administrarlas dentro de nuestro proyectos, dicho de forma fácil nos permite descargar y actualizar de forma sencillas paquetes como Jquery, Bootstrap, etc. ..

En el contexto de Rails, funciona igual que el gemfile, pero antes de ocuparlo primero necesitamos instalarlo.

Paso 0: Instalando Bower y Bower-Rails

Para instalar Bower requerimos de Node y npm que podemos instalarlas desde aquí http://nodejs.org/

una vez instalado nodejs y npm abrimos la terminal y corremos el comando: (el signo bash junto al mayor no se copian, se utilizan para denotar que estamos en ambiente bash)

$> npm install -g bower

Una vez instalado bower, agregamos la gema bower-rails al gemfile.

gem 'bower-rails'

y luego corremos en la terminal la línea:

$> bundle install

Paso 1: Utilizando bower

Aquí vamos a hacer varias cosas, así que voy a dejar un sencillo listado para guiar el proceso.

  • Agregar los paquetes que se necesitan al Bowerfile
  • Instalar los paquetes a través de rake bower:install
  • Agregar los assets nuevos al config de rails, para que pueda ubicarlos y usarlos
  • Si hay archivos con formatos raros, como por ejemplo las fuentes agregarlos al proceso de precompilación
  • Cambiar el application.css por application.css.scss para poder ocupar sass (dependiendo del caso puede no ser necesario)
  • Importar (o requerir) los assets desde el application.css o del application.js según corresponda

Paso 2: Ejemplo con Bootstrap

Hay varias formas de partir con Bower, pero andar creando archivos de configuración con json y modificandolos manualmente me parece innecesario antes otras formas más sencillas.

Para empezar vamos a crear un Archivo Bowerfile (la primera letra mayúscula), la misma idea que el Gemfile de rails, dentro del archivo pondremos los paquetes de javascript que queremos, en este caso para las pruebas ocuparemos Bootstrap.

asset 'bootstrap-sass-official'

y luego para instalar boostrap corremos la siguiente línea en el terminal:

$> rake bower:install

Posteriormente podemos actualizar todos los paquetes ocupando :

$> rake bower:update

Con la instalación nuestros archivos quedarán dentro de la carpeta vendor/assets, lo que necesitamos ahora es decirle al config de rails que agregue estas carpetas al asset_path, para eso abrimos el archivo config/application.rb y copiamos dentro de la clase

config.assets.paths << Rails.root.join("vendor","assets","bower_components")
 config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","stylesheets")

Ademas en el caso de bootstrap correspondería agregar ahí mismo la carpeta de las fuentes.

config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts")

y añadir dentro del mismo archivo justo debajo los archivos de las fuentes al proceso de precompilación

config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)
config.assets.precompile += %w( bootstrap/glyphicons-halflings-regular.woff2 )

Después de cambiar este archivo es necesario reiniciar el server si se está corriendo.

El último paso consiste en importar el css de bootstrap, para eso primero vamos a renombrar el archivo a .css.scss para poder ocupar sass y luego al final del archivo fuera de la sección de comentarios agregaremos

@import "bootstrap-sprockets";
@import "bootstrap";

Ya con eso estaríamos listos.

Comentarios finales

En el caso de bootstrap con las gemas y CDNs disponibles no es necesario ocupar bower, pero es un buen ejemplo con las suficientes complicaciones para manejarlo.

Además dentro de otros beneficios Bower (al igual que el gemfile) nos permite especificar las versiones de los paquetes de javascript, y a diferencia del gemfile utiliza la versión original del proyecto, por ejemplo el número de la versiones de las gemas de jquery o de bootstrap no corresponde a las versiones de los proyectos y no siempre están actualizadas, eso hace inncesariamente complicada la vida de los programadores y nosotros no vinimos a complicarnos la vida.

Fuente: https://medium.com/tecnologia-digital/que-es-bower-y-para-que-sirve-en-rails-438cde7282f0

Marzo 31st 2015

Mostrar cambios en ambiente de producción Symfony2

Número de lecturas: 2837
{lang: 'es-419'}

Algo muy común y que se resuelve de una manera sencilla es visualizar los cambios en el ambiente de producción (sucede desde symfony 1.x)

Y para mirar los cambios se debe simplemente limpiar la cache en el entorno de producción.

Para realizar se utiliza este comando desde la consola:

app/console cache:clear --env=prod --no-debug

Si nos muestra un error de permisos se debe utilizar el comando sudo y realizar la tarea de esta manera:

sudo app/console cache:clear --env=prod --no-debug

 

Marzo 25th 2015

Agregar ultima fecha de modificación automaticamente en el CRUD de Symfony2

Número de lecturas: 2220
{lang: 'es-419'}

A veces es necesario ingresar directamente un registro a la base de datos el cual no debe ser manipulado previamente simplemente sirve como un campo de auditoria y de esta manera revisar en que fecha se realizo el cambio.

Cuando utilizamos el CRUD generado por Symfony2 nos genera en el update una función similar a esta:

public function updateAction(Request $request, $id)
{
$em = $this->getDoctrine()->getManager();
 
$entity = $em->getRepository('AppBundle:ControlCambios')->find($id);
 
if (!$entity) {
 
throw $this->createNotFoundException('Unable to find ControlCambios entity.');
}
 
$deleteForm = $this->createDeleteForm($id);
$editForm = $this->createEditForm($entity);
 
$editForm->handleRequest($request);
 
if ($editForm->isValid()) {
$em->flush();
 
return $this->redirect($this->generateUrl('controlcambios_edit', array('id' => $id)));
}
 
return array(
'entity' => $entity,
'edit_form' => $editForm->createView(),
'delete_form' => $deleteForm->createView(),
);
}

Simplemente para agregar este registro en el campo previamente creado basta con agregar la siguiente linea:

//Agrega directamente la fecha de la ultima revision
$entity->setFechaUltimaRevision(new \DateTime());

El método finalmente quedaría de la siguiente manera:

public function updateAction(Request $request, $id)
{
$em = $this->getDoctrine()->getManager();
 
$entity = $em->getRepository('AppBundle:ControlCambios')->find($id);
//Agrega directamente la fecha de la ultima revision
$entity->setFechaUltimaRevision(new \DateTime());
 
if (!$entity) {
 
throw $this->createNotFoundException('Unable to find ControlCambios entity.');
}
 
$deleteForm = $this->createDeleteForm($id);
$editForm = $this->createEditForm($entity);
 
$editForm->handleRequest($request);
 
if ($editForm->isValid()) {
$em->flush();
 
return $this->redirect($this->generateUrl('controlcambios_edit', array('id' => $id)));
}
 
return array(
'entity' => $entity,
'edit_form' => $editForm->createView(),
'delete_form' => $deleteForm->createView(),
);
}
Marzo 12th 2015

Como sumar días a una variable date en twig – Symfony2

Número de lecturas: 6927
{lang: 'es-419'}

Hace unos días se presento la necesidad de sumar variables en twig, para ser precisos teniendo una fecha por ejemplo: 2015-01-04 necesito sumar 540 días para esto utilizo la plugin date_modify presente en twig .

Para realizar esta operación se debe realizar de la siguiente forma:

{% set modify = '540' %}
{% set date = "now"|date("m/d/Y") %}
 
{{ date|date_modify("+" ~ modify ~ " day")|date("m/d/Y") }}

Con esto el resultado seria: 08/31/2016