Tutoriales 52
“My Concerts Wishlist” ajax scaffold Ruby on Rails
Esta es una aplicación basada en un scaffold, sin embargo el CRUD está modificado para responder a peticiones Ajax en Rails.Comencemos con el paso a paso! la app la he llamado “My Concerts Wishlist”
demo: http://myconcertwishlist.herokuapp.com
StreetmusicMap parte 2: Integración Gmaps4Rails
Rubystas! Lo prometido aquí está. La segunda parte del tutorial del StreetMusicMap. Si quieres revisar la parte 1 de la historia, en donde explico como crear una relación uno a muchos uniendo 2 scaffolds “Musician” e “Instrument” te dejó por aquí el artículo.
En la segunda parte, vamos a integrar esa data que guardamos a traves del scaffold creado, para visualizarla de una forma entretenida e interactiva usando la gema gmaps4Rails.
Te sugiero que vayas por una buena taza de café antes de comenzar.
Instalando la gema geocoder.
Vamos a agregar la gema geocoder en mapa/Gemfile:
gem 'geocoder'
Luego en el terminal:
$ bundle
y reiniciamos el server con:
$ rails s
Geolocalizando a partir del campo “address”.
Abres app/models/Musician.rb y agregas esta línea:
class Musician < ActiveRecord::Base belongs_to :instrument geocoded_by :address after_validation :geocode end
En http://locahost:3000/musicians/new agregraremos 2 nuevos registros, dejamos vacíos los campos “latitude” y “longitude” . Luego te darás cuenta que al presionar “create musician” automáticamente se agregan valores. “Santiago Chile” en el campo address, obtendremos “-33.4367933” en latitude y “–70.64107299999” en longitude.
Geocoder es responsable de devolver las coordenadas como “Response” a partir de nuestra “Request” solicitada…Interesante..cierto?
pd: si no sabes por qué aparece este belongs_to:instruments quizás necesitas revisar la parte 1 del tutorial en donde explico todo eso)
Instalando la gema Gmaps4rails.
Vamos a agregar la gema gmaps4rails en mapa/Gemfile:
gem 'gmaps4rails'
Luego en el terminal:
$ bundle
y reiniciamos el server con:
$ rails s
Agregando algunas referencias .js en la vista parcial application.html.erb.
Abrimos el archivo app/views/application.html.erb y agregamos el js de bootstrap, googlemap api y markerclustered ántes de </head>
<!-- bootstrap 3--> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- google maps --> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.13&sensor=false&libraries=geometrykey=AIzaSyBX2Veo_ENuSNEXA3fdZS54WAOA9_wrm-Y"> </script> <!-- markerClustered --> <script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
Agregando el div “Map” en fullScreen con Bootstrap.
Para dibujar el mapa en modo fullscreen (en cualquier dispositivo) me basé en este ejemplo disponible en Bootstrap examples.
No fue exactamente un copyPaste del ejemplo…tuve que modificar un poquito siguiendo estos pasos para adaptarlo a nuestro propósito.
Primero, agrega una referencia minificada de bootstrap.min.css antes de todas las referencias .js que incluimos en app/views/application.html.erb
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
Segundo, descargas el archivo cover.css y lo guardas en app/assets/stylesheets/cover.css
Tercero, buscas la linea en cover.css :
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
y la reemplazas por esta otra:
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 100%;
}
}
Tercero, abres app/views/musicians/index.html.erb y dibujamos el <div id=”map”> que cargará el contenido de nuestro google map tal como la imagen
<!-- contenedor del mapa -->
<div class="site-wrapper">
<div id="map" class="site-wrapper-inner">
<div class="cover-container">
</div>
</div>
</div>
<!--//fin contenedor mapa-->
<!-- footer -->
<div class="container-fluid">
<div class="row">
<div class=" col-lg-12 mastfoot">
<div class="inner">
<p>street music map <%= link_to 'New Musician', new_musician_path %> </p>
</div>
</div>
</div>
</div>
<!-- //fin footer-->
Musician Controller: Cargando los datos en el objeto @Hash.
En el controller musician en app/controllers/musicians_controller.rb cargamos un objeto @hash y llamamos al método buid_markers() de la gema Gmaps4Rails. Este método necesita un objeto en este caso lo cargamos con @musicians, el cual se comunica con el modelo a través de Musician.All devolviendo todos los registros de musicos que cargamos previamente.
Luego creamos el Marcador, damos su latitud, longitud y configuramos una ventana de información que se verá así.
def index
@musicians = Musician.all
@hash = Gmaps4rails.build_markers(@musicians) do |musician, marker|
marker.lat musician.latitude
marker.lng musician.longitude
marker.infowindow "<div class='box' style='width:200px;'><h4><strong>"+musician.musician_name+", "+musician.instrument.instrument_name+"</strong></h4><img src='http://img.youtube.com/vi/"+musician.youtube_video+"/mqdefault.jpg' width='111' height='90' class=''></div>"
end
end
Agregando el Script que dibuja el Mapa.
Ahora, inmediatamente después del html, vamos a añadir al final de app/views/musicians/index.html.erb este script:
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Lo que hace básicamente este script es construir el google Map.
Toda la data está contenida en el objeto @hash y google map con su método .addMarkers nos pide cargar un objeto “parseado a Json“. Para lograr esto en ruby lo hacemos asi <%=raw @hash.to_json %>
Google Maps trabaja con JSON, un standard para el intercambio de datos, con el fin de no atar su tecnología a un lenguaje de programación específico, sino que todo lo contrario, hacer que su tecnología sea compatible con cualquier lenguaje de programación con el que quieras trabajar.
Haz la prueba de imprimir por pantalla este código de ruby en la vista index:
<%=raw @hash.to_json %>
Puedes notar que obtienes una cadena de texto entre varios corchetes [{…},{…}] cierto? bueno, es la misma data que ingresamos en musician/new pero parseada en formato JSON, y si copias esta cadena más abajo en un json-parser como el que encontré, te mostrará la cadena en versión “bonita” y más legible.
[{"lat":49.2827291,"lng":-123.1207375,"infowindow":"\u003cdiv class='box' style='width:200px;'\u003e\u003ch4\u003e\u003cstrong\u003eAndres, guitarra\u003c/strong\u003e\u003c/h4\u003e\u003cimg src='http://img.youtube.com/vi/ANj8IJs38qU/mqdefault.jpg' width='111' height='90' class=''\u003e\u003c/div\u003e"},{"lat":-37.814107,"lng":144.96328,"infowindow":"\u003cdiv class='box' style='width:200px;'\u003e\u003ch4\u003e\u003cstrong\u003eEnsamble de Bronces Huevos Fritos, Brass\u003c/strong\u003e\u003c/h4\u003e\u003cimg src='http://img.youtube.com/vi/9WA-W7lI820/mqdefault.jpg' width='111' height='90' class=''\u003e\u003c/div\u003e"},{"lat":-33.4367933,"lng":-70.64107299999999,"infowindow":"\u003cdiv class='box' style='width:200px;'\u003e\u003ch4\u003e\u003cstrong\u003eAndres, piano\u003c/strong\u003e\u003c/h4\u003e\u003cimg src='http://img.youtube.com/vi/ANj8IJs38qU/mqdefault.jpg' width='111' height='90' class=''\u003e\u003c/div\u003e"},{"lat":-33.4691199,"lng":-70.641997,"infowindow":"\u003cdiv class='box' style='width:200px;'\u003e\u003ch4\u003e\u003cstrong\u003eAndrés, guitarra\u003c/strong\u003e\u003c/h4\u003e\u003cimg src='http://img.youtube.com/vi/ANj8IJs38qU/mqdefault.jpg' width='111' height='90' class=''\u003e\u003c/div\u003e"},{"lat":-33.4367933,"lng":-70.64107299999999,"infowindow":"\u003cdiv class='box' style='width:200px;'\u003e\u003ch4\u003e\u003cstrong\u003eAndrés, didgeridoo\u003c/strong\u003e\u003c/h4\u003e\u003cimg src='http://img.youtube.com/vi//mqdefault.jpg' width='111' height='90' class=''\u003e\u003c/div\u003e"},{"lat":-33.4363397,"lng":-70.6435372,"infowindow":"\u003cdiv class='box' style='width:200px;'\u003e\u003ch4\u003e\u003cstrong\u003efunky, didgeridoo\u003c/strong\u003e\u003c/h4\u003e\u003cimg src='http://img.youtube.com/vi/lMpZGAUGk8w/mqdefault.jpg' width='111' height='90' class=''\u003e\u003c/div\u003e"}]
Con estos pasos doy por finalizado el tutorial, si quieres agregar un Buscador de Músicos o de Instrumentos, revisa este Tutorial creado por Gonzalo “Haciendo un pequeño buscador en Ruby on Rails”. También para más personalizaciones del infoWindow que aparece en el, puedes revisar los ejemplos de gmaps4rails o descargar el código fuente del tutorial desde el repo que comparto con ustedes en mi cuenta de Github.
Hay bastante más que podríamos seguir integrando pero hasta aquí es la base del “how to” de este prototipo streetmusicmap y es totalmente reusable con otros conceptos. Lo entretenido es saber que en un rato (bueno o un fin de semana) puedes lograr con Ruby on Rails y unas cuantas gemas útiles, prototipos que concretan todas esas locas buenas ideas 🙂
StreetmusicMap parte 1: Combobox uno a muchos en Ruby on Rails
Hola Rubystas! para poner en práctica lo aprendido, lo mejor es crear proyectos experimentales para jugar. Aquí les presento una aplicación llamada streetmusicMap, está en su fase inicial, prototipo que comencé este fin de semana, y el cual estoy construyendo junto con mi partner de Software y creadora del blog ConciertosComentados: Melissa.
Para desarrollar esta app, comenzaré con la creación de 2 Scaffolds: Musician e Instrument. y los uniremos en el modelo a través de una relación “uno a muchos”, en donde visualmente nos ayudará un Combobox. En la Segunda Parte mostraré como esa data la integramos a un Google Map, usando la gema gmaps4Rails.
Creando la App.
Abres un Terminal y escribes:
$ rails new mapa
Acceder al proyecto desde el terminal:
$ cd mapa
Creando el Scaffold: Musician.
$ rails generate scaffold Musician latitude:float longitude:float youtube_video:string twitter:string facebook:string address:string description:string musician_name:string instrument_id:integer
(*el campo instrument_id:integer es una clave foranea del scaffold Instrument que realizaremos a continuación. y el campo latitude:float longitude:float los usaremos mas adelante en la parte 2 del streetMusicmap cuanodo integremos la gem gmaps4rails)
Ejecutamos en el terminal:
$ rake db:migrate
Creando el Scaffold: Instrument.
$ rails generate scaffold Instrument instrument_name:string
Ejecutamos en el terminal:
$ rake db:migrate
Ok, ahora tenemos 2 CRUD, Musician e Instrument (usen conceptos en inglés para crear scaffolds)
Agregar Instrumentos es simple, ya que es sólo un nombre. La parte que nos interesa es cuando agregamos un Músico, y tenemos que categorizarlo mediante un combobox cargado con instrumentos.
Modelo: Creando la relación Uno a Muchos.
Accedemos al archivo routes a través de mapa/config/routes.rb y cambiamos “welcome#index” por:
root 'musicians#index'
Al acceder por browser a nuestra vista de músicos http://locahost:3000/musicians los datos se muestran de esta manera: Nombre del Musico / ID del instrumento…pero lo que queremos ver por pantalla es el nombre del instrumento no su ID! Para lograr este proposito es que creamos la relación “uno a muchos” en el modelo:
En app/models/musician.rb escribe:
class Musician < ActiveRecord::Base belongs_to :instrument end
Y en app/models/instrument.rb escribes:
class Instrument < ActiveRecord::Base has_many :musicians end
la relación entre Músico e Instrumento en nuestro ejercicio específicamente se lee así:
“un Músico pertenece_a una categoría” (belongs_to)
y “Una categoría tiene_muchos Musicos”. (has_many)
La Vista: Cambiando instrument_id.
en app/views/ musicians/ index.html.erb buscas:
<%= musician.instrument_id %>
y lo reemplazas por:
<%= musician.instrument.instrument_name %>
Refrescas el browser y verás por pantalla ahora el Nombre del instrumento en lugar de su ID..mucho mejor!
El Controller: Modificando el método new
Al mostrar la view /musicians/new tenemos que agregar un nuevo objeto @instruments, el cual recibirá todos los registros que el Modelo le devuelva y esos datos lo vamos a cargar en un combobox.
En app/controllers/musicians_controller.rb busca:
def new @musician = Musician.new end
y lo reemplazas por:
def new @musician = Musician.new @instruments = Instrument.all end
Ahora en la vista parcial app/views/musicians/_form.html.erb busca:
<%= f.number_field :instrument_id %>
y reemplázalo por este helper: (ésta línea dibuja el combobox de instrumentos por pantalla)
<%= collection_select(:musician, :instrument_id, @instruments, :id, :instrument_name, prompt: true) %>
Desde tu navegador ingresa a:
http://localhost:3000/musician/new
Excelente! 🙂 Ahora vemos un Combobox para categorizar a nuestros musicos. Más info sobre este Helper collection_select aquí!
Seguramente si accedes a la view “edit” verás un error, eso es porque tenemos que agregar un objeto @instruments en el método “edit” del controller musician ya que también al editar un registro de músico, necesitamos ver el combobox cargado pero posicionando en primer item el instrumento que le pertenece a este músico.
En app/controllers/musicians_controller.rb busca:
def edit end
y lo reemplazas por:
def edit @musician = Musician.find(params[:id]) @instruments = Instrument.all end
Ya estamos casi terminando nuestra primera parte de la aplicación, sólo un detalle más…
En app/views/musicians/show.html.erb busca:
<%= @musician.instrument_id %>
y lo reemplazas por:
<%= @musician.instrument.instrument_name %>
Y ya tienes una aplicación uniendo 2 scaffolds y cargando un combobox en la Vista.
pd: Se viene luego la parte 2: Ahora te recomiendo ir por una buena taza de café y luego revisa el tutorial parte 2: Integración con google maps y la gema Gmaps4Rails.
Haciendo Un Pequeño Buscador En Ruby On Rails
Una pregunta que se repite harto en el curso de En1mes es cómo hacer un buscador con ruby on rails, aquí la respuesta:
Paso 1: Para entender como funciona vamos a hacer un pequeño ejercicio, creemos un proyecto nuevo y llamemoslo buscador.
Paso 2: Creemos un scaffold de un recurso, digamos que estamos haciendo un buscador para un blog, donde el recurso principal son los posts, así que ejecutemos la línea:
rails g scaffold post titulo:string contenido:text
Paso 3: Hay que entender el paso de parámetros en rails, estas pueden ser pasadas por get (a través de la url) o por Post a través de algún formulario o dentro de la sesión, en este caso vamos a trabajar con el método get.
En google cuando nosotros buscamos algo podemos ver que el valor que buscamos también aparece en la URL acompañado de un q=
Ruby on Rails nos permite hacer exactamente lo mismo, capturar los valores que vienen de la URL ocupando un diccionario llamado params que captura todos los valores que vienen en la URL (entre otras cosas), por ejemplo si nosotros quisiéramos capturar el mismo valor lo podemos hacer desde el controller de post, en el método index
def index @q = params[:q] @posts = Post.all end
Paso 4: Una vez que tenemos capturado el valor lo podemos mostrar en la vista de index de los posts.
<%= @q %>
Paso 5: El formulario
No podemos esperar que el usuario escribe el query a buscar en la URL, lo lógico es que haya un formulario de buscar, lo podríamos hacer con los helpers de Rails pero para mantener la simplicidad del tutorial lo vamos a hacer estilo html.
El formulario consiste simplemente en una etiqueta form y un input y un botón de envío (opcional) que vamos a poner en la vista index de los posts.
<form> <input name=”q” <%= @q %> > <button type=”submit”>Buscar</button> </form>
Paso 6: Filtrar los resultados
Lo único importante que está faltando es filtrar los resultados de los posts en base a la búsqueda, para eso tenemos que volver al controller de los posts y editar el método index.
def index @q = params[:q] if @q @posts = Post.where(:titulo => @q) else @posts = Post.all end end
Si quieren que continúe el post agregando cosas sobre como hacer match parciales y mejorando la búsqueda pueden presionarme por Twitter @gsanchezd ☺
php.ini el enemigo de las plantillas de wordpress
¿Les ha pasado que quieren subir un Theme de WordPress y no pueden? Esto es porque la configuración de PHP no los deja, la buena noticia es que es super fácil cambiarlo, una vez que lo encontramos el archivo php.ini y lo modifiquemos podremos subir plantillas pesadas.
Modificando el php.ini también podemos subir archivos más pesados en general, esto incluye, fotos, Plugins, Themes, o importar contenido.
Para empezar
Sí ya están trabajando con WordPress y les pasa esto probablemente hay un par de cosas que ya manejan, pero nunca está demás explicar para que el que no sea tan avanzado pueda seguir el post.
Para instalar WordPress lo que tenemos que hacer es transformar nuestro PC en algo así como un host, en un servidor que corre sólo dentro de nuestra computadora. A esto se le llama ambiente de desarrollo. Para lograr hacer esto hay que instalar varias cosas que lo permiten, la base de datos, algo para controlar la base de datos y algo que haga a correr el servidor. En Windows eso se hace generalmente instalando XAMPP que es un programa que con una interfaz nos permite hacer esas cosas, que suenan complicado pero no lo son. En MAC generalmente se instala WAMPP. Estos programas traen, MySql para base de datos, Phpmyadmin para administrarla y Apache como soporte.
También hay otros ambientes de desarrollo, como por ejemplo, Nitrous.io. Que es un servicio en linea que nos permite pasar directamente al trabajo pues ya viene con todo instalado.
Sin importar cual sea el método que uses para trabajar en tu WordPress tu sitio estará alojado dentro de una carpeta que alguna relación tiene con lo que instalaste. Cuando se instala XAMPP la carpeta que contiene los archivos con líneas de código de tu sitio se llama “htdocs” y cuando estás en Nitrous.io la carpeta se llama “www”.
Una vez que ya tenemos cubierto esto, lo que hacemos es crear dentro de esa carpeta una subcarpeta “nombredemiproyecto” y ahí dentro ponemos nuestro WordPress o incluso si queremos un sitio web HTML.
El resultado de esto es que podemos ver nuestro proyecto en nuestro navegador web. Abrimos el navegador y si estamos trabajando en Windows o Mac escribimos en la barra de direcciones “localhost/nombredemiproyecto”, esa es la dirección que nos va a llevar a ver nuestro proyecto ¿Se fijan que la dirección es “localhost” (host local) y diagonal la carpeta que creamos?
Si están en Nitrous.io hacen click en “Preview” y seleccionan “Port: 3000” y podrán ver un listado de sus proyectos.
¿Cómo encontrar el php.ini?
- Tenemos que crear un archivo index.php. Si todavía no han identificado la carpeta donde tiene que ir este archivo ayúdense con las instrucciones arriba. Recuerden que ese index.php lo tenemos que crear dentro de una subcarpeta que tenga el nombre del proyecto. Si están en Windows o Mac pueden usar su editor de código favorito (probablemente sea SublimeText) para crear el archivo. Si están en Nitrous.io lo pueden hacer con el segundo click. La única diferencia con index.html (comunmente usado para el home de una web) es que es .php por el lenguaje que le vamos a poner adentro (vemos eso en el siguiente paso)
- Adentro de ese archivo pegamos esta linea
<?php phpinfo() ?>Nada más, sólo esa línea, no hay que darse el trabajo de hacer “head” o “body”, nada, sólo esa línea. Lo que estamos haciendo es utilizar una función de Phpmyadmin que nos entrega todos los datos técnicos, ahí encontraremos lo que buscamos
- Ahora lo que tenemos que hacer es previsualizar lo que hemos hecho, si están en Windows o Mac escriban en su navegador “localhost/nombredelacarpetaquecontienemiproyecto”. Y si están en Nitrous.io click en “Preview” y seleccionan “Port: 3000”. Aparecerá una tabla o cuadro de información.
- En esa tabla busquen “Loaded Configuration File”, si apretan CTRL+F o CTRL+B su navegador les abrirá una pequeña pestaña de búsqueda de contenido dentro de la página. Cuando encuentren eso, encontrarán la ruta que hay que seguir para encontrar nuestro archivo php.ini ¡Que no nos deja subir nuestro Theme! Esa ruta son carpetas, dentro de carpetas, hasta llegar al arhivo como son las rutas de cualquier otro arhivo en nuestro computador. Tenemos que seguirla.
- Entonces, seguimos la ruta y cuando encontremos el archivo lo abrimos con nuestro editor de código o simplemente haciendole click si están en Nitrous.io. Dentro de ese archivo (pueden volver a usar CTRL+F) tenemos que buscar una línea super específica que dice así “upload_max_file_size”. En esa línea está determinado el peso máximo de los archivos a subir, comunmente dice “2M” por “2 Megas”. Simplemente cambiamos el número a 8 o 10 y solucionado ¡Ahora podemos instalar nuestro Theme!
Sí, es verdad, hay otras formas de instalar un Theme o Plugin pesado, pero ahora que saben ocupar esta línea de código, pueden encontrar el php.ini en cualquier lugar
<?php phpinfo() ?>Y lo mejor es lo siguiente, con lo que ya saben ahora, van a poder encontrar otras soluciones a otros problemas, de hecho les tengo un reto ¿Les ha pasado que quieren subir varios archivos al mismo tiempo y no pueden? La solución está en el php.ini. Los desafío a que encuentren cuál es la línea de código a cambiar para poder subir más archivos al mismo tiempo. No se olviden de dejar su respuesta en los comentarios.