En una de aquellas aventuras mientras me entretengo desarrollando el proyecto de título se me ocurren  cosas curiosas e interesantes que me gustaría realizar para que fuera más facil y legible la mantenibilidad en versiones posteriores de la aplicación.

Hoy compartiré  como generar contenido  en vistas mediante diferentes yields ( Contenido) que  serán manejados en las vistas de la aplicación. No me dedicaré a decir para que sirve cada cosa porque no poseo mucho tiempo para realizarlo, sin embargo, atacaré rapidamente el problema y propondré un metodo de solución.

Problema

Tenemos una layout que renderiza diferentes vistas, pero en cada vista tambien existen partes variables que cambian de acuerdo al contexto. Entonces deseo generar multiples secciones o bloques que puedan ser manejados de forma variable según el contexto que sean utilizados.

Solución

Utilizaremos multiples yields para realizar esto en nuestro layout. Algo parecido al tipico Content Place Holder en Asp.net, pero que gracias a Dios RoR nos la pone mucho más facil. Decirles que utilizaré HAML para mostrar como lo hacemos,  así que no se asusten si no ven las tipicas <etiquetas></etiiquetas> HTML.

1- En nuestro layout usaremos yields distintitivos y más significativos  y no solo el tipico =yield, para luego llamar a nuestro layout de la vista.

app/views/layouts/application.haml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

!!! %html   %head     %title      Hola terricolas   = stylesheet_link_tag "application", :media => "all"   = javascript_include_tag "application"   = csrf_meta_tags %body   = render 'layouts/header'   .container     - if signed_in?       .row{:Style =>'background-color:#FFFFFF;'}         .container-fluid           .row-fluid             .span2{:Style =>'background-color:#F3f3f3;'}               = yield :sidebar             .span10{:Style =>'background-color:#F4F4F4;'}               = yield :content     -else       .row{:Style =>'background-color:#FFF;'}         = yield         %br   %hr   = render 'layouts/footer'

Ahora no se preocupen en todas las clases y temas relacionados al codigo expuesto, sino centrense en que despues de utilizar el .span2 que identifica como clase al contenedor sidebar llamamos al =yield :sidebar y en el .span10 llamamos al =yield:content, el cual deberá renderizar el contenido general de la aplicación.

2 – Ahora utilizaremos en nuestras vistas los yields definidos en nuestro layout  application.haml

app/views/users/index.haml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

-content_for  :sidebar do     = gravatar_for current_user,100     %h3= current_user.name     %hr     %p         Kips 400         %br         Following 2 users         Followed by 0 users     %hr     %p         Tags -content_for  :content do     %p         hoa

Ahora bien. Si se dan cuenta llamamos a nuestro content_for :sidebar para desplegar lo relacionado al yield : sidebar. De esta forma podremos crear espacios variables de forma mucho más eficiente para cargar nuestras vistas y así tener un codigo mucho más mantenible en nuestras vistas.

Saludos

jhsilva

Currently we are working in a Rails project with datamapper ORM and other things. Today was implementing a listed with data about customers and time to page this error was with me for 30 minutes.

I write in English because saw many people with the same trouble. Then put to work.

1) In the time you add the gem will_paginate to GEMFILE. You will do with a specific version.

1	gem 'will_paginate', '~> 3.0.2'

2) Datamapper integration isn’t automatic load. You should load putting the next line in your application.rb file from your config folder.

1	require "will_paginate/data_mapper"

3) Now. You can do a query in your controller. This is a example of query in my customer_controller.rb.

1 2 3

def index   @customers = Customer.paginate(:page => params[:page], :per_page => 4) end

4) The last is call to will_paginate in our view that render the action of controller. This code you should put it next of your each block.

1	<%= will_paginate @customers %>

This method is simple, but very nice…..

See you soon guys…

Lo prometido es deuda y estoy haciendo el tiempo para escribir temas que me parezcan utiles y deseo compartir. Esta vez hablaré de algo que me vino muy bien y es el de cargar gemas en nuestro proyecto.

Bueno el requerimiento surgio al usar la gema bootstrap-sass , la cual es el proyecto de twitter para desarrollar el front-end de una aplicación o sitio web, pero esta vez escrita en sass para integrar en nuestras apliaciones rails.

Entenderan que aunque tenia instalada la gema en mi RVM respectiva queria dar retoques personalizados a bootstrap, entonces en vez de ir a la dirección de RVM que resultaba tediosa, decidí cargarla desde mi proyecto.

A continuación estan los pasos que me permitieron realizar la operación:

1- En nuestro proyecto rails creamos la carpeta donde será ubicada nuestra gema que deseamos importar

1 2	mkdir vendor/cache cd vendor/cache

2- Importamos la gema a utilizar y agregamos la versión

1 2	gem unpack bootstrap-sass -v=2.0.0 Unpacked gem: '/home/jhsilva/Proyectos/kipmy/vendor/gems/bootstrap-sass-2.0.0'

3- Actualizamos el GEMFILE de nuestra aplicación con la dirección donde se encuentre la gema en path.

1	gem 'bootstrap-sass', '2.0.0',:path => 'vendor/cache/bootstrap-sass-2.0.0'

4- Si ya no utilizaremos la gema de RVM podemos desinstalarla.

1	gem uninstall bootstrap-sass -v=2.0.0

Espero sea de utilidad para ustedes ya que para mi fue interesante porque no deseaba importar todas las gemas. Eso si al realizar este procedimiento tengan en cuenta aquellas gemas que tienen dependencias.

Salud!

He estado un poco alejado de escribir en el blog no porque no quisiera, sino porque a veces pienso en escribir articulos más grandes, pero creo que comenzaré a escribir varios tips para yo recordarlos y tambien para compartirlos. Entonces desde  hoy comenzaré a escribir a menudo tips y temas relacionados al desarrollo en Ruby on Rails, Front-end, Bases de datos y algo de gestión de proyectos.

 

Bueno como el título lo dice estamos trabajando y de pronto tenemos que obtener el valor de un select para que luego podamos enviarlo al servidor para que sea procesado según la opción escogida y nos pueda retornar algo de datos.

1 – Cargamos nuestro select con el  id=”project_id”, el cual nos va a servir para despues obtener el valor del elemento seleccionado mediante jquery

2 – Llamamos al evento change cuando cambie el valor seleccionado del select y lo mostraremos en una ventana alert.

3- Si desearemos además tomar el texto de la opción seleccionada podemos incluir la siguiente sentencia.

Hace dias leí que la gente necia o que cree saberlo todo es la que menos aprende, por ello aunque parezca facil lo que he mostrado, no esta demás para que podamos seguir nutriendonos.

Primero que todo preguntar si alguna vez te ha pasado lo siguiente :

“Estás desarrollando un programa o aplicación y cada vez que haces una modificación y te funciona lo comprimes algo así como “proyecto_casifinal15022012.zip” y al final del proyecto te das cuenta que tienes 30 o 40 archivos y no sabes cual es cual, ni los cambios de uno u otro”

Bueno para dar solución a ello es que existen hoy en dia los sistemas de control de versiones, los cuales entregan los servicios para que el software que se este construyendo se vaya incrementando segùn nuevas funcionalidades o corrigiendo errores.  Entre los más conocidos estan Mercurial, CVS, Subversion y ahora el popular git. Ahora bien no quiero dar una catedra de cual es mejor o peor en este post, de mi experiencia me he inclinado a trabajar con Git por  la descentralización de repositorios, rapidez y ofrece algunos servicios que me han encantado que en otro post podría mencionar, además hay proyectos de peso atrás de él.

A continuación iremos viendo de forma practica cada uno de los comandos frecuentes a la hora de desarrollar. Cabe decir que al no usar un cliente gráfico me he acostumbrado a escribir todos los comandos via consola ya que es más comodo y util a la hora de trabajar para mi.

Instalación

La instalación depende del sistema operativo que se este usando, en este caso estaré fiel a mi Ubuntu Linux y de la siguiente forma podemos instalar el core de git para comenzar a utilizarlo.

1	sudo apt-get install git-core

Clonar un repositorio remoto a mi maquina local

Lo que viene luego del git clone dependerá de la información que nos pueda entregar el administrador del servidor git, en este ejemplo hemos usado el servicio de github para mostrar a modo de ejemplo como clonar un proyecto.

1 2	git clone git://github.com/shama/jmpress.js.git git pull

Realizar cambios y subir codigo fuente al servidor

Ahora que ya podemos trabajar con el clon en nuestro repositorio local podremos realizar cambios y subirlos a nuestro servidor git. Entre los comandos más frecuentes se encuentra status, add, commit, push, pull

git status

Este comando nos indicará si en nuestra copa de trabajo existe algún fuchero modificado para que lo añadamos o si existe alguno que ya fue añadido, pero no hemos comprometido (commit)

1	git status

git add

El comando add le indica a git que archivos debe tener en cuenta para el proximo commit que realizemos. La sintaxis es sencilla y se pueden añadir tantos ficheros sueltos como directorios enteros.

1 2 3

git add holamundo.rb git add DirectorioProyecto/ git add . // Si usamos el git add . le decimos a git que revisé o tome en cuenta todo el arbol desde el directorio raiz del proyecto

git commit 

Ahora que ya hemos añadido los archivos (usando git add) que deseamos que git tenga en consideraciòn para el proximo compromiso (commit) podemos enviarlos a la revisión actual con el comando git commit, además tenemos la opción mediante -m de añadir una leyenda descriptiva de lo realizado en el compromiso.

1	git commit -m "FrontEnd : Validaciones del cliente -> ok"

Consideren que si el comando se ejecuto correctamente la consola desplegará en pantalla cuantos ficheros se han modificado, insertado o eliminado en el proyecto.

git push

Todo lo que hemos realizado solo se encuentra en nuestra maquina local, el servidor todavía no considera estos cambios. Esto es entretenido porque hasta ahora los commits se han ido versionando en nuestra copia local y podriamos deshacerlos si quisieramos, esto no ocurria en otros sistemas de control de versiones. Bueno ahora si deseamos que sean enviados los cambios al repositorio remoto  a fin de que los demás ingenieros o desarrolladores puedan ver los cambios usamos el comando push

1

git push

git pull

Si existen varios programadores trabajando en el proyecto y deseamos actualizar nuestra copia local con los cambios que ellos hayan echo podemos utilizar el comando pull que nos traerá todo lo hecho por los demás a nuestro equipo.

1

git pull

Es importante saber que si no han hecho git add y un commit y realizan pull sus cambios se perderan y estaremos quizas en problemas jejeje!. Esperando que eso no ocurra les dejo el procedimiento correcto que deberian hacer para resguardar sus cambios.

1) git add .

2) git commit -m “Compromiso”

3) git pull

 

Bueno me gustaría hablar de branches, tags y  otros temas interesantes que nos proveé git, pero pienso dejarlo para una 2º parte. Ojala se animen a utilizar git ya que es entretenidisimo ver como se va gestando el software.

Les dejo con 2 proyectos geniales que permiten utilizar git a su antojo al desarrollar.

GITHUB

BITBUCKET

 

 

 

 

 

 

 

Desde que tengo este sitio en los VPS de Rackspace Cloud server nunca habia escrito un  post…plop!. La verdad la idea del vps fue para administrar otro sitio de alta disponibilidad y me entretuve instalando todos los servicios como NGINX como webserver, ruby, python, etc… y en una de esas casualidades de la vida decidí migrar este blog para ver que tal el performance y lo recomiendo .

 

Bueno la verdad queria dejar apuntado dochub.io que resulta bastante interesante para aquellos que desarrollamos en la nube, sea blogs, portales o software basado en web.

Entre las caracteristicas a destacar de este util proyecto podemos encontrar:

Interfaz simple y clara

Es casi imposible perderse. En la parte superior tenemos la barra de navegación con el logo en la parte superior izquierda y las diferentes secciones que posee la aplicación (CSS, JAVASCRIPT, DOM, JQUERY y PHP). Otro tema a destacar es la caja de busqueda en la parte inferior izquierda, colores suaves y minimalistas hacen que el intentar realizar una busqueda sea claro para el usuario.  Otra cosa que destaco es que en terminos de UI responde muy bien al usuario ya que es claro su mensaje “Busca lo que quieras del tema que quieras”.

Formato de busqueda amigable

Uno siempre estará agradecido cuando desees buscar algo y mediante ajax se carguen solo los datos coincidentes con la busqueda y ellos lo han pensado muy bien. Me agrado la simplicidad de buscar y es imposible no saber que la caja de busqeda es para buscar agregandole el particular “Type an “x” element name” a cada caso en la caja de formulario.

Documentación clara y ejemplificadora

Sintaxis, valores que puede tomar el elemento o propiedad, ejemplos y compatibilidad con browsers. Además de notas y enlaces relacionados. No puedo decir que he visitado muchas API’s para informarme, más he recurrido a ejemplos y temas relacionados en mis dias ya que muchas veces algunas APi’s son engorrosas de leer, con el tiempo he alcanzado acostumbrarme consultar a ellas, pero la de dochub.io me parece bastante clara.

Nada más que decir ojala visiten el sitio y dejen su feedback en el post si algo me falto que agregar o sino les gusto la aplicación.

Saludos