Cómo crear páginas estáticas en una aplicación de Ruby on Rails

Por:, en:

Muy bien, hemos creado nuestra primera aplicación en Ruby on Rails. El problema con esto es que sólo presenta una página predeterminada que fue generada automáticamente por los Rails. Esto no es muy útil. Queremos que nuestra aplicación empiece a servir algún contenido que sea significativo para los usuarios de nuestra aplicación.

Nuestro primer paso en la construcción de nuestra aplicación sera dar la habilidad de presentar algunas páginas estáticas para el usuario, por ejemplo, la página de inicio o la página de contacto. Por supuesto, "estático" no quiere decir que esas páginas no será capaces de hacer algunas cosas interesantes.

Paso 1: Genera un Controlador

Empezaremos creando un controller (controlador). El Controller es uno de los tres principales tipos de archivos que creamos mientras trabajamos. Los otros dos son "model"(modelo) y "view" (vista). Los tres forman la arquitectura MVC (modelo, vista, controlador) que se utiliza para organizar el código dentro de una aplicación. Cada elemento de MVC tiene un papel diferente y mediante avancemos, aprenderás cómo utilizar sus herramientas.

Vamos a usar el Rail Generator. Desplázate a la carpeta utilizando tu Terminal.

bash


$ cd Documents/projects #dependiendo en dónde pusiste tu aplicacion

Como un recordatorio: usa $ ls para ver el contenido de la carpeta en la que actualmente estás dentro. Una vez que estes dentro de la aplicación, genera un nuevo controller:


$ rails generate controller static_pages

Esto generará varios archivos:


create  app/controllers/static_pages_controller.rb
invoke  erb
create  app/views/static_pages
invoke  test_unit
create  test/controllers/static_pages_controller_test.rb
invoke  helper
create  app/helpers/static_pages_helper.rb
invoke  test_unit
create  test/helpers/static_pages_helper_test.rb
invoke  assets
invoke  coffee
create  app/assets/javascripts/static_pages.js.coffee
invoke  scss
create  app/assets/stylesheets/static_pages.css.scss

  • app/controllers/static_pages_controller.rb - actual controller
  • app/views/static_pages - folder that will hold our HTML templates
  • test/controllers/static_pages_controller_test.rb - test file for the controller
  • app/helpers/static_pages_helper.rb - helper file
  • test/helpers/static_pages_helper_test.rb - test file for the helper
  • app/assets/javascripts/static_pages.js.coffee - coffee script file
  • app/assets/stylesheets/static_pages.css.scss - CSS file

En este tutorial sólo usaremos controller y la carpeta para views. Nuestro objetivo no es hacer el apropiado TDD (Test Driven Development). Si estás interesado en escribir las pruebas con RSpec, te recomiendo ir al tutorial de Michael Harlt (solo en ingles).

Paso 2: Modifica las Páginas Estáticas

Vamos a echarle un vistazo al controller:

app/controllers/static_pages_controller.rb


class StaticPagesController < ApplicationController
end

El Controller está ahora vacío. Puedes ver que dos líneas fueron creadas automáticamente cuando corrimos el generador. Vamos a poner todo nuestro nuevo código entre la línea de apertura y la final que dice"end". Ahora crearemos la primera "acción" personalisada para la página de Inicio:


class StaticPagesController < ApplicationController
    def home
    end
end

Paso 3: Crea un archivo de inicio

Hemos definido una acción personalizada llamada "home". El framemark de Rails es lo suficientemente inteligente y tratará de enviar al usuario una plantilla HTML que coincide con el nombre de la acción del controller, así que necesitamos crear uno. Dentro de la carpeta app/views/static_pages crea un nuevo archivo y llamalo home.html.erb

app/views/static_pages/home.html.erb


<h1>Esta es la pagina de inicio</h1>

Paso 4: Crea una Ruta

Ya casi terminamos. Lo único que queda es decirle a la aplicación en qué dirección URL esta acción puede ser alcanzada. Tenemos que crear una "ruta". Todas las rutas se definen en el archivo dentro de la carpeta config:

config/routes.rb


Rails.application.routes.draw do
  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  # root 'welcome#index'

  # Example of regular route:
  #   get 'products/:id' => 'catalog#view'

  # Example of named route that can be invoked with purchase_url(id: product.id)
  #   get 'products/:id/purchase' => 'catalog#purchase', as: :purchase

  # Example resource route (maps HTTP verbs to controller actions automatically):
  #   resources :products

  # Example resource route with options:
  #   resources :products do
  #     member do
  #       get 'short'
  #       post 'toggle'
  #     end
  #
  #     collection do
  #       get 'sold'
  #     end
  #   end

  # Example resource route with sub-resources:
  #   resources :products do
  #     resources :comments, :sales
  #     resource :seller
  #   end

  # Example resource route with more complex sub-resources:
  #   resources :products do
  #     resources :comments
  #     resources :sales do
  #       get 'recent', on: :collection
  #     end
  #   end

  # Example resource route with concerns:
  #   concern :toggleable do
  #     post 'toggle'
  #   end
  #   resources :posts, concerns: :toggleable
  #   resources :photos, concerns: :toggleable

  # Example resource route within a namespace:
  #   namespace :admin do
  #     # Directs /admin/products/* to Admin::ProductsController
  #     # (app/controllers/admin/products_controller.rb)
  #     resources :products
  #   end
end

Todas las líneas que comienzan con # son ignoradas por nuestra aplicación.

Les recomiendo leer las líneas comentadas. Eventualmente usaremos la mayoría de ellas. Sin embargo, por ahora definamos la "root” (raiz) de nuestra aplicación. Esta será la página de "aterrizaje" de nuestra aplicación. Lo que la gente verá cuando lleguen a la raíz del sitio web, cuando la URL contendrá sólo la dirección básica (ex: www.peoplecancode.com).

Para que el comentario se vuelva accion, remueve símbolo # de la línea con la palabra root y modificalo para que apunte a nuestro nuevo controller y a la acción que hemos creado:


root 'static_pages#home'

Esto puede leerse como: cuando el usuario escriba la dirección URL de la página web, llévalo al controlador llamado "static_pages" y la acción dentro de este controller se llamará "home" (inicio).

Paso 5: Ejecuta Rails Server

Ahora puedes guardar todos los archivos que hemos creado y arrancar el servidor, si todavía no se está ejecutando. Finalmente, escribe en tu terminal:

bash


$ rails server

Abre tu navegador y ve a URL: localhost:3000

Ahora debes ver "Esta es la pagina de inicio"

Si tu Inicio de sesión serás capaz de marcar esto tutorial Como vas avanzando tu progreso



Comentarios

  • en: Frank escribió:

    Nice, straightforward, easy to follow!
  • en: 4goodapp escribió:

    +1

  • en: Marius escribió:

    i like it . easy.

  • en: richard.Garcia escribió:

    +1

Comentar

Tú puedes Inicio de sesión Comentar