Git, CRUD en Rails y Formularios dinámicos en HTML con JavaScript

Los temas a tratar en este podcast son

  1. Git
  2. CRUD en rails
  3. Formularios dinámicos con HTML Y JavaScript.

El CD elegido para este audio es el que usé para el capítulo es The Invasion del grupo The Invasion, os dejo un poco más abajo el CD para que podáis bajarlo si queréis.


[showhide type=»transcripcion» more_text=»Ver transcripción(%s más palabras)» less_text=»Esconder transcripción (%s menos palabras)»]

Transcripción

Yo soy Eduardo, hoy es día 20 de Noviembre de 2016. este es el segundo capítulo del podcast.

Hoy vamos a tratar tres temas: Git, CRUD en rails y formularios con campos dinámicos en HTML con Javascript. La Música es del CD The Invasión del grupo con el nombre homónimo, el cual se está bajo licencia creative commons y podéis descargar de freemusicarchive.org.
—Música—
En el año 2002 el desarrollo de Linux empezó a desarrollarse utilizando un sistema de versionado llamado BitKeeper, hasta aquí bien, pero el problema es que BitKeeper es un software propietario y en 2005 la relación entre la empresa que desarrollaba BitKeeper y la comunidad de Linux se rompió, así que hizo falta un sustituto para la plataforma de versionado y se creó git, el cual se pronuncia «guit», pero se escribe git (G I T).

Hoy en día Git es probablemente el sistema de versionado más utilizado y hoy voy a comentaros un poco por encima cómo hacer las cosas más básicas.

Antes de empezar que git no es un software exclusivo para código, sino que está pensado para control de versiones de ficheros de texto. Por ejemplo es perfecto para la escritura de textos en LaTEX, que al final no es más que ficheros de texto plano.

Obviamente antes de empezar a trabajar con el hay que instalarlo, dependiendo de cada plataforma usaremos un método u otro. Pero es realmente fácil y tenéis las descargas en https://git-scm.com/downloads.

Para empezar a usarlo lo primero es crear un repositorio. Por si no lo sabéis un repositorio es un almacen donde guardamos nuestro texto.

Para crear el repositorio escribiremos git init y ya lo tendremos creado, así de fácil, pero será un repositorio sin datos, un repositorio que todavía no nos vale para nada.

Así que lo primero que vamos a hacer es añadir ficheros con git add y o bien añadimos fichero a fichero, que puede ser mortal o le ponemos un * o un .

Al hacer esto hemos pasado los ficheros a un lugar llamado HEAD, que aún no es el repositorio. Para pasarlos al repositorio tenemos que hacer git commit -m «mensaje» y luego git push origin master, donde master no es más que la rama que estamos usando, por defecto es master.

Y bien ¿qué es una rama?, el desarrollo podemos hacerlo de forma bifurcada, es decir, a partir de un punto único empezamos a trabajar en una característica específica y trabajamos en esa rama o branch, una vez tenemos eso terminado lo que hacemos es fusionar, en inglés merge, con la rama principal.

Bueno, después de hacer el git push origin master ya tenemos los ficheros en el repositorio.

Ahora tenemos que ver qué pasa si queremos empezar a trabajar en un repositorio ya existente, en ese caso tendremos que clonarlo, con el comando git clone, si está en github no os preocupéis mucho porque en el lado derecho tenéis el comando exacto para copiar y pegar.

Sólo una curiosidad, el otro día mi hijo mayor preguntó el porqué los documentos no se clonaban sino que se fotocopiaban porque escuchó a su madre hablar de clonar equipos y dijo si se pueden clonar equipos, ¿por qué no documentos?, la verdad es que es una pregunta muy bueno y me puse a buscar la respuesta.

En castellano según la RAE clonar es Producir clones y clon sólo hace referencia a copias biológicas, sin embargo en inglés tenemos una acepción en el verbo clone que es producir una copia de, y esa copia puede ser o no biológica, con lo cual en inglés se puede clonar un coche, pero en castellano no, así que os comento sólo por curiosidad que si preocupa un poco el lenguaje en castellano no es posible clonar repositorios, pero claro, como digamos que vamos a copiar un repositorio es probable que no nos entiendan correctamente. Sólo es una cosa curiosas, por mi parte seguiré usando el verbo clonar para esto, pero al menos ya se que lo uso mal, eso sí, ahora lo uso mal conscientemente.

Volviendo al tema, si queremos crear una rama usaremos el comando «git checkout -b mi_rama» y si queremos volver a la rama master «git checkout -b master» y para borrar una rama «git branch -d mi_rama», ahora esto es sólo local, así que si queTodas las entradasremos subir esa rama «git push origin mi_rama».

Si os fijáis en las puertas de cualquier país anglosajón tenemos push para empujar y pull para tirar, pues aquí igual, si hemos usado push para subir al repositorio, para bajar del repositorio tiraremos, es decir pull y el comando será git pull.

Para mezclar varias ramas git merge y la rama en cuestión.

Ahora las etiquetas, si queremos poner etiquetas git tag la etiqueta y luego la versión. La versión del commit la sacamos de git log.

Bueno, yo creo que esto para empezar es más que suficiente y recordar que esto no es sólo para código sino para cualquier tipo de texto.

En cuanto a plataformas tenéis dos principales github.com que es gratuita si pones proyectos públicos y bitbucket.org donde también podéis tener repositorios privados y además usar git o mercurial, a gusto del consumidor.
—Música—
Ahora vamos a pasar a hablar un poco de CRUD en Rails. CRUD es el acrónimo de Create, Read, Update y Delete que son las acciones que vamos a ejecutar.

Además queremos que todas esas acciones se puedan ver en una página web que es la que queremos desarrollar en Rails, en nuestro caso rails 5 que es la última versión que existe.

Antes de nada tenemos que tener claro lo que son los verbos de HTTP que tradicionalmente han sido GET, POST, PUT, PATCH y DELETE.

GET hace referencia a sacar datos, ya sea uno o todos
POST hace referencia a crear un recurso
PUT hace referencia a modificar un recurso completo
PATCH hace referencia a modificar parcialmente un recurso
DELETE hace referencia a borrar un recurso

Sin embargo en Rails 4 se cambió PUT por PATCH para evitar confusión y al final en rails 5 tenemos GET, POST, PATCH y DELETE.

Así para Create tenemos dos acciones: new que nos muestra un nuevo registro y por tanto es GET y create que procesa la creación del nuevo registro, con lo que es POST

Para Read tenemos otras dos acciones: index que muestra todos los registros y show que sólo muestra uno, ambas acciones son GET

Las acciones para Update son edit que muestra un único registro y por tanto es GET y update que prosa la edición del registro y que es PATCH, independientemente de si modifica todo el registro o sólo parte del mismo.

En cuanto a Delete las dos accione son delete que muestra el registro que se va a borrar y por tanto es GET y destroy que procede a eliminarlo y que es DELETE

Todo esto por supuesto se programa en el controller correspondiente, recordar que un controller una tabla y una tabla un modelo. Y como estas acciones se realizan en el controller y el controller lo que hace es trabajar con los objetos en si lo que hacemos es usar los verbos de HTTP para trabajar con el objeto en si.

Todo esto puede parecer un poco abstracto, pero si lo pensáis bien nos simplifica muchísimo la vida y hace que todo sea mucho más ordenado porque al final esto va a conseguir llegar a poder disponer de un API para nuestras aplicaciones con REST, todo al final tiene que ir enfocado a ese fin.

Teniendo estas cosas claras ya nos podemos encargar de programar nuestro CRUD siguiendo cualquier tutorial como el que tengo publicado en el blog, aunque hay una parte que no es que sea más complicada sino diferente a lo que hayáis hecho en otros lenguajes como los formularios en rails, los cuales podéis generarlos con un form_for por ejemplo que es una de las formas que tiene rails para generar los formularios de una forma bastante más fácil que con el tradicional a pelo y que veremos en un rato.

Por ejemplo, el control de los campos dinámicos es algo totalmente automático que no recuiere que nosotros hagamos nada en nuestro código que no sea definir en create y/o update.
—Música—
Hoy parece que está quedando un audio bastante contundente, no se si será la gripe, de todos modos vamos a ver si lo terminamos adecuadamente.

El maravilloso mundo de los formularios ha llegado y parece que no se va a ir. Si hay algo engorroso y poco agradecido cuando estáis haciendo una web son los formularios, son elementos que no son agradables de generar, que hay que sanifitar y que si la web tiene algún problema es por aquí por donde es más probable que haya que empezar, en fin, todo ventajas con los formularios, ojo, seguro que hay gente que le gustan y que se siente realizada haciendo formularios, no tengo la suerte de conocer a nadie así, pero seguro que los hay, ¿por qué no? hay gente para todo.

Bueno, ahora en serio, si hace un par de minutos hemos visto que en rails tenemos formas más o menos sencillas de hacer formularios olvidándonos de muchas cosas, no lo he dicho, pero la sanificación de los formularios también la hace rails por nosotros, en html tenemos la forma tradicional de hacer formularios y seremos nosotros los que tendremos que hacerlo todo a mano.

Hoy sólo os voy a mostrar una pequeña pincelada de una función muy sencillita de JavaScript que sirve para poder tener formularios en HTML con campos dinámicos.

Imaginad un formulario de una web en la que le pidamos datos a un usuario, le pedimos, el nombre, la dirección y los teléfonos de contacto, ahora ¿cuántos teléfonos tiene una persona? fijo, móvil, móvil de trabajo, dependiendo, así que tenemos la opción de crear un formulario con más campos de los que necesitemos o crear un formulario que tenga sólo y exclusivamente los datos que necesitamos, otra cosa será como procesar eso, de momento sólo nos preocupa pedir la información.

O imaginad una pequeña página que en la que guardamos los CDs de música que tenemos en casa e introducimos los títulos de las canciones y su duración, pero ¿cuántas canciones tiene un CD? para todos estos casos sirve este pequeño javascript que podemos utilizar.

El JavaScript en cuestión del que estoy hablando podéis encontrarlo buscando en el buscador de eduardocollado.com «formulario javascript»

En mi caso he usado el ejemplo de los CDs, aunque ya os digo, es extrapolable a cualquier otro ejemplo similar. La función en si se llama addCanción y lo que hace es crear un div, un contenedor o caja de html, que tiene un id que corresponde con el id del div donde vamos a insertarlo en nuestro HTML.

En mi caso he creado la función de javascript para que sea capaz de insertar dos campos, el nombre de la canción y la duración de la misma, luego a eso tendréis que añadirle un botón de submit y ya lo tendréis funcionando.

Lo más lioso es meter todo el código html dentro de la propiedad innerHTML, o al menos es lo que a mi más me cuesta y que requiere más concentración.
[/showhide]