Primera página en Rails

Preparativos

Una vez se ha creado el entorno en Rails, en mi caso en una máquina LXC procedemos a empezar a trabajar con ella.

Lo primero es crear un tunel para que cuando desde nuestra máquina abramos localhost:3000 se abra realmente el puerto 3000 del contenedor donde tenemos instalado Rails, en mi caso utilizo la aplicación gSTM (Gnome SSH Tunnel Manager) que podéis instalarla desde la fuente o con

apt-get install gstm

En la máquina donde hay que correr rails es importante saber que tenemos que instalar nuestra llave ssh para no tener que poner el password todo el rato.

ssh-copy-id ubuntu@10.0.3.252

gstmUna vez hecho eso la configuración del gSTM quedará tal y como se ve en la imagen de la izquierda.

Otra cosa que tenemos que hacer es preparar nuestro editor de textos, en mi caso el Sublime 2, para ello la forma más fácil es montar por ssh esa máquina en nuestro Ubuntu usando el navegador de archivos de Ubuntu.

Una vez montado el directorio remoto nos lo dejará en un directorio del estilo

/run/user/1000/gvfs/sftp:host=10.0.3.252,user=ubuntu/home/ubuntu/prueba

Pues abrimos ese directorio con el Sublime y ya estaremos modificando los ficheros directamente en nuestra máquina virtual.

Y por si «metemos la gamba» en algún momento es interesante configurarse el git, para ello en el directorio donde esté nuestro proyecto:

git init

git add . && git commit -m ‘nuevo proyecto en rails’

Pues llegados a este punto ya podemos empezar a escribir código

Creando una página

Con casi total seguridad lo primero que vamos a querer es escribir una página de inicio, para ello tendremos que crear un controlador y una acción que nos generará el primer fichero.

Desde el directorio raiz del proyecto:

rails generate controller home index

Donde home es el controlador e index es la acción. Esto nos va a generar el directorio /app/views/home y dentro encontraremos index.html.erb que será nuestra página.

Pero también nos va a generar el fichero donde definiremos las acciones que será /app/controllers/concerns/home_controler.rb.

Y por último saber que nos va a generar el layout que es donde vamos a controlar todos los aspectos genéricos, es decir, las cabeceras html de los ficheros. Ese fichero en este caso será /app/views/layouts/application.html.rb.

Creando código

La página por defecto de rails la querremos cambiar por el index que acabamos de crear, para ello en el fichero /app/config/routes.rb que encontraremos algo como:

get ‘home#index’

podremos

root ‘home#index’

el get de arriba lo quitaremos pues ya no lo necesitamos, y a partir de este momento la acción index del controlador home será nuestra página principal.

Y ya podemos modificar el fichero de acción de /app/views/home/index.html.erb la acción poniendo por ejemplo

<h1>Bienvenidos</h1>
<p>Esta es mi primera página en rails y se modifica en: /app/views/home/index.html.erb</p>

y al abrir el navegador en el puerto 3000 veremos justo esta página.

Si quisieramos crear otra acción dentro del mismo controlador tendríamos que crear un fichero nuevo en el directorio del controlador que será la acción correspondiente, por ejemplo blog.html.erb dentro de /app/views/home, luego tendríamos que modificar el fichero routes.rb poniendo una línea como esta:

 get ‘/blog’ => ‘home#blog’

Y, aunque no es necesario si es bueno hacerlo, modificando el home_controller.rm y añadiendo una acción vacía

def blog

end

Y ahora al ver la página http://localhost:3000/blog veremos la página que hemos creado, en este caso como no hemos creado contenido estará en blanco.

Y ahora si queremos añadir elementos comunes a las dos páginas lo que podemos hacer es editar el fichero /app/views/layouts/application.html.erb y poner un pequeño menú:

<a href=»/»>Inicio</a> | <a href=»/blog»>Blog</a>

O incluso cambiar el CSS incluyendo el bootstrap tirando de CDN metiendo este otro código

<!– Latest compiled and minified CSS –>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css» integrity=»sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u» crossorigin=»anonymous»>

Esto ahora lo podemos ver en un screencast que seguro que queda más claro.