En este tutorial empezaré con el framework Ruby on Rails y como ya habia mencionado en el post anterior se trata de un framework escrito en Ruby y por tanto recomiendo conocer un poco el lenguaje para saber hacer funciones básicas. Puedes visitar mi repositorio sobre Ruby para encontrar algunas de las operaciones básicas del lenguaje.
Comandos para instalar Ruby on rails en Linux:
A lo largo del tutorial voy a dejarles los links de los commits que realice, para que vean con exactitud en caso de dudas los cambios realizados en el proyecto.
1 - Crear el proyecto
Primero que nada nos posicionamos en la carpeta en la que deseamos trabajar nuestro proyecto y luego ejecutamos el comando rails new blog, este creará un proyecto con el nombre blog y dentro de la carpeta encontrarás muchos archivos y carpetas:
Una breve descripción de las carpetas a continuación:
Consulta aquí el commit hasta este punto del proyecto.
2 - Agregando controlador
Un controlador es el que permite conectar los modelos, operaciones sobre ellos y las vistas.
Para crear un controlador usamos este comando rails generate controller bienvenido el cual se llamará bienvenido. Al haber hecho esto tendremos los siguientes archivos creados en el proyecto:
Para indicarle al controlador que tenemos esta vista creamos un método llamado de igual forma que el archivo HTML index.
Ahora para lograr tener acceso a esta vista finalmente agregamos en el archivo de rutas /config/routes.rb la instrucción get 'bienvenido/index', aunque con esta veremos la página con el link localhost:3000/bienvenido/index. Por esto usaré mejor esta instrucción root 'bienvenido#index' ya que se trata de una página principal y de esta forma reemplazo la vista que tenía en la dirección localhost:3000 y tendré la siguiente página:
Consulta aquí el commit hasta este punto del proyecto.
3 - Agregar modelo
Para hacer esto ejecutamos el comando rails generate model Post nombre:string contenido:string, este creará el modelo Post con los atributos nombre y contenido como strings. Los otros tipos de atributos que podemos crear son: binary, boolean, date, datetime, decimal, float, integer, string, text, time, timestamp. Además podemos indicar que el atributo hace referencia a otro modelo con reference o podemos cambiar el identificador con primary_key.
Los archivos creados por el comando fueron:
4 - Rutas
En esta sección agregaremos el modelo a las rutas y lo único que tenemos que hacer es agregar la instrucción resources :posts dentro de config/routes.rb. Ahora podremos ver todas las rutas del sistema usando el comando rake routes.
Aunque en este tutorial quiero mostrar únicamente los posts en la página principal y esto lo hago agregando dentro del controlador bienvenido en el método index la instrucción @posts = Post.all.
Y para lograr ver los elementos en pantalla de bienvenida, modificamos el HTML como se ve en el siguiente archivo:
Este código luce muy parecido a los HTML que conocemos pero con las etiquetas especiales <% y %> que permiten agregar código Ruby. En el archivo tenemos la sintaxis de las funciones if y each. Podemos darnos cuenta que con la instrucción de la línea 8 se está logrando imprimir contenido en el HTML y esto es gracias al símbolo = dentro de la etiqueta.
Ahora podemos visitar la página principal, esta nos dirá que no tenemos ningún posts y con esto ya confirmamos que vamos bien hasta aquí. En vez de crear una vista para agregar una instancia voy a utilizar la consola del proyecto con el comando rails c, que me permite interactuar con el proyecto.
Ahora para crear una instancia lo que hago es escribir post = Post.new({:nombre => 'Hola mundo', :contenido => 'funciona'}) y luego post.save, esto nos creará una instancia y guardará en la base de datos. Lo que veremos en pantalla será esto:
Y al consultar nuestra página en el navegador veremos la siguiente página:
5 - Plantilla del HTML
Todas las páginas páginas están usando hasta ahora si nos fijamos los mismos HTMLs, Javascripts y hojas de estilo como base y eso es gracias a la plantilla que tenemos en el archivo app/views/layouts/application.html.erb, así que para ir mejorando la apariencia del proyecto voy agregarle al viejo amigo Bootstrap con un link desde la librería Online.
Consulta aquí el commit hasta este punto del proyecto.
6 - Usando Scaffold
Pudiese crear todas las vistas para cada función en el modelo Post si siguiese todos los pasos que normalmente aconsejan en la documentación oficial, pero prefiero mostrarles otra herramienta increíble Scaffold, aunque antes de eso les muestro como podemos eliminar un modelo del sistema. Para hacer esto último, le decimos a la base de datos que queremos eliminar la tabla y se logra simplemente deshaciendo la migración con el comando rake db:rollback. Luego ejecutamos el comando rails destroy model Post y con esto ya eliminamos los rastros del modelo en el proyecto.
Ahora si estamos listos para poder usar Scaffold. Esta herramienta permite crear el modelo, controlador y vistas en un único comando rails generate scaffold Post nombre:string contenido:string. A diferencia de lo que se creaba con el comando que generaba modelos y controladores tenemos estos archivos extras:
Para mostrar una última cosa antes de terminar esta parte del tutorial agregaré un link desde la página principal con esta instrucción <%= link_to 'Ver posts', posts_path %>. Esta función es una pequeña ayuda que nos provee Rails para hacer más fácil el manejo de links, ya que usamos nombres a métodos que son alias de links.
Las vistas resultantes que tendremos son:
Consulta aquí el commit hasta este punto del proyecto.
Ya en la próxima parte de este tutorial estaré con migraciones, consultas a la base de datos y manejo de sesión.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Accede al repositorio del proyecto aquí.
Comandos para instalar Ruby on rails en Linux:
A lo largo del tutorial voy a dejarles los links de los commits que realice, para que vean con exactitud en caso de dudas los cambios realizados en el proyecto.
1 - Crear el proyecto
Primero que nada nos posicionamos en la carpeta en la que deseamos trabajar nuestro proyecto y luego ejecutamos el comando rails new blog, este creará un proyecto con el nombre blog y dentro de la carpeta encontrarás muchos archivos y carpetas:
Una breve descripción de las carpetas a continuación:
- app: En esta se encuentran todos los assets (Javascript, CSS e imágenes), controladores, helpers (servicios de ayuda), mailers (te permiten enviar Emails), modelos y vistas.
- bin: Contiene los scripts que permiten correr la aplicación.
- config: Los archivos de configuración. Los archivos de principal interés aquí son los de la base de datos y rutas.
- db: Tiene el esquema de la base de datos y migraciones.
- lib: Aquí colocaremos las librerías y las tareas que no corresponden a los controladores, por ejemplo podemos dejar programas que necesitamos que el servidor ejecute a cada hora.
- log: Al momento de depurar la aplicación, podremos ver un registro de errores en esta carpeta.
- public: En esta carpeta encontraremos los HTML que atajan los errores 404 (contenido no encontrado), 422 (error de procesamiento de la consulta) y 500 (error en el servidor). Además hospedamos en esta carpeta los archivos subidos al servidor por el usuario, como por ejemplo una foto de perfil.
- test: Archivos necesarios para las pruebas.
- tmp: Archivos temporales.
- vendor: Esta carpeta es similar a lib, pero en esta colocarás como buena práctica el contenido de librerías que haz descargado.
- config.ru: Es el archivo que usa el servidor para correr la aplicación.
- Gemfile: Corresponde a la lista de librerías o gemas que necesita la aplicación.
- Gemfile.lock: Se trata de un archivo que se auto modifica según el Gemfile y la idea principal de este es tener todas las dependencias calculadas al momento de implementar.
- Rackfile: En este archivo es donde indicamos la conexión con los programas de tareas en la carpeta lib.
- README.rdoc: Es una breve descripción de tu aplicación.
- assets: Carpeta que tiene todos los Javascript, CSS e imágenes.
- controllers: Controladores de la aplicación.
- helpers: Funciones, variables y estructuras de ayuda que tenemos para cada controlador.
- mailers: Contiene los archivos para manejar el envío de correos desde la aplicación.
- models: Son los archivos que corresponden a los modelos del sistema, ellos están directamente relacionados con el esquema de la base de datos.
- views: Contiene las vistas.
Consulta aquí el commit hasta este punto del proyecto.
2 - Agregando controlador
Un controlador es el que permite conectar los modelos, operaciones sobre ellos y las vistas.
Para crear un controlador usamos este comando rails generate controller bienvenido el cual se llamará bienvenido. Al haber hecho esto tendremos los siguientes archivos creados en el proyecto:
- app/controllers/bienvenido_controller.rb: Es el archivo principal donde manejamos cada función relacionada con las vistas de este controlador.
- app/views/bienvenido: Es la carpeta creada para las vistas de este controlador.
- test/controllers/bienvenido_controller_test.rb: Archivo para manejar las pruebas a nivel del controlador.
- app/helpers/bienvenido_helper.rb: Módulo que tiene las funciones de ayuda para este controlador.
- test/helpers/bienvenido_helper_test.rb: Archivo para manejar las pruebas sobre las funciones de ayuda en el controlador.
- app/assets/javascripts/bienvenido.js.coffee: Javascript para este controlador basado en la sintaxis que nos da la herramienta CoffeeScript.
- app/assets/stylesheets/bienvenido.css.scss: CSS para este controlador usando la herramienta SASS.
Para indicarle al controlador que tenemos esta vista creamos un método llamado de igual forma que el archivo HTML index.
Ahora para lograr tener acceso a esta vista finalmente agregamos en el archivo de rutas /config/routes.rb la instrucción get 'bienvenido/index', aunque con esta veremos la página con el link localhost:3000/bienvenido/index. Por esto usaré mejor esta instrucción root 'bienvenido#index' ya que se trata de una página principal y de esta forma reemplazo la vista que tenía en la dirección localhost:3000 y tendré la siguiente página:
Consulta aquí el commit hasta este punto del proyecto.
3 - Agregar modelo
Para hacer esto ejecutamos el comando rails generate model Post nombre:string contenido:string, este creará el modelo Post con los atributos nombre y contenido como strings. Los otros tipos de atributos que podemos crear son: binary, boolean, date, datetime, decimal, float, integer, string, text, time, timestamp. Además podemos indicar que el atributo hace referencia a otro modelo con reference o podemos cambiar el identificador con primary_key.
Los archivos creados por el comando fueron:
- db/migrate/20150307101204_create_posts.rb: Indica a la base de datos la migración con la nueva tabla posts.
- app/models/post.rb: Corresponde al modelo en el proyecto.
- test/models/post_test.rb: Archivo para especificar las pruebas en el modelo.
- test/fixtures/posts.yml: Contiene la especificación de las instancias de prueba para este modelo.
4 - Rutas
En esta sección agregaremos el modelo a las rutas y lo único que tenemos que hacer es agregar la instrucción resources :posts dentro de config/routes.rb. Ahora podremos ver todas las rutas del sistema usando el comando rake routes.
Aunque en este tutorial quiero mostrar únicamente los posts en la página principal y esto lo hago agregando dentro del controlador bienvenido en el método index la instrucción @posts = Post.all.
Y para lograr ver los elementos en pantalla de bienvenida, modificamos el HTML como se ve en el siguiente archivo:
Este código luce muy parecido a los HTML que conocemos pero con las etiquetas especiales <% y %> que permiten agregar código Ruby. En el archivo tenemos la sintaxis de las funciones if y each. Podemos darnos cuenta que con la instrucción de la línea 8 se está logrando imprimir contenido en el HTML y esto es gracias al símbolo = dentro de la etiqueta.
Ahora podemos visitar la página principal, esta nos dirá que no tenemos ningún posts y con esto ya confirmamos que vamos bien hasta aquí. En vez de crear una vista para agregar una instancia voy a utilizar la consola del proyecto con el comando rails c, que me permite interactuar con el proyecto.
Ahora para crear una instancia lo que hago es escribir post = Post.new({:nombre => 'Hola mundo', :contenido => 'funciona'}) y luego post.save, esto nos creará una instancia y guardará en la base de datos. Lo que veremos en pantalla será esto:
Y al consultar nuestra página en el navegador veremos la siguiente página:
5 - Plantilla del HTML
Todas las páginas páginas están usando hasta ahora si nos fijamos los mismos HTMLs, Javascripts y hojas de estilo como base y eso es gracias a la plantilla que tenemos en el archivo app/views/layouts/application.html.erb, así que para ir mejorando la apariencia del proyecto voy agregarle al viejo amigo Bootstrap con un link desde la librería Online.
Consulta aquí el commit hasta este punto del proyecto.
6 - Usando Scaffold
Pudiese crear todas las vistas para cada función en el modelo Post si siguiese todos los pasos que normalmente aconsejan en la documentación oficial, pero prefiero mostrarles otra herramienta increíble Scaffold, aunque antes de eso les muestro como podemos eliminar un modelo del sistema. Para hacer esto último, le decimos a la base de datos que queremos eliminar la tabla y se logra simplemente deshaciendo la migración con el comando rake db:rollback. Luego ejecutamos el comando rails destroy model Post y con esto ya eliminamos los rastros del modelo en el proyecto.
Ahora si estamos listos para poder usar Scaffold. Esta herramienta permite crear el modelo, controlador y vistas en un único comando rails generate scaffold Post nombre:string contenido:string. A diferencia de lo que se creaba con el comando que generaba modelos y controladores tenemos estos archivos extras:
- app/views/posts/index.html.erb: Muestra la lista de posts.
- app/views/posts/edit.html.erb: Permite editar un post.
- app/views/posts/show.html.erb: Muestra un post.
- app/views/posts/new.html.erb: Esta vista permite crear un post.
- app/views/posts/_form.html.erb: Aquí tenemos el formulario para crear y editar el post.
- app/views/posts/index.json.jbuilder: Vista que maneja la salida de todos los posts en formato json.
- app/views/posts/show.json.jbuilder: Esta permite responder en formato json con un único post.
- app/assets/stylesheets/scaffolds.css.scss: Un archivo general para el CSS del sistema.
Para mostrar una última cosa antes de terminar esta parte del tutorial agregaré un link desde la página principal con esta instrucción <%= link_to 'Ver posts', posts_path %>. Esta función es una pequeña ayuda que nos provee Rails para hacer más fácil el manejo de links, ya que usamos nombres a métodos que son alias de links.
Las vistas resultantes que tendremos son:
Consulta aquí el commit hasta este punto del proyecto.
Ya en la próxima parte de este tutorial estaré con migraciones, consultas a la base de datos y manejo de sesión.
Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.
Accede al repositorio del proyecto aquí.
No hay comentarios:
Publicar un comentario