Flores

Workshop: Ruby on Rails y las Redes Sociales
Leopoldo Flores [leopoldo.flores@jalasoft.com]
Workshop: Ruby on Rails y las Redes

Sociales
Este documento le guiará paso a paso en el desarrollo de las actividades del presente Workshop para
alcanzar el objetivo planteado.
Objetivo
Hacer uso del Framework Ruby on Rails para la creación de una Red Social (aplicación web) donde los
usuarios podrán publicar mensajes. Además, esta red social explotará algunos de los servicios que
ofrecen otras redes sociales muy conocidas tales como Facebook, Google, Twitter, etc.
1. Preparación del ambiente de trabajo

La equipo que tú tienes ya tiene instalado Ruby 1.8.7 y Rails 3.0.7, por lo cual la ejecución de los
siguientes pasos no será necesario.
Tarea Pasos detallados

1. Instalar Ruby 1) Descargar el instalador de:
1.8.7-p352 http://rubyforge.org/frs/download.php/75107/rubyinstaller-1.8.7-
p352.exe
2) Ejecutar el instalador y seguir las instrucciones.
3) Adicionar C:\Ruby187\bin a la variable de entorno PATH
4) Para la verificación ejecutar desde un consola: ruby -v
El comando ejecutado debe mostrar la versión de Ruby.
2. Actualizar 1) Ejecutar desde consola: gem update --system
Rubygems 2) Para verificar listar las gemas instaladas ejecutar: gem list
3. Instalar Rails 3.0.7 1) La versión a utilizar será Rails 3.0.7. Para instalar ejecutar desde
consola: gem install rails –v 3.0.7
2) Para verificar la instalación ejecutar: gem list rails ó rails -v
El comando ejecutado debe mostrar la versión de Rails.
2. Crear una aplicación básica de RoR: nuestra Red Social

Todos los siguientes comandos se ejecutaran desde una ventada de línea de comandos:

1. Crear la aplicación 1) Abrir una consola de DOS.
básica 2) Ejecutar: rails new social_network
3) Una nueva carpeta “social_network” será creada con todos los archivos
necesarios autogenerados por rails.
2. Instalar pre- 1) Ingresar a la nueva carpeta: cd social_network
requisitos 2) Ejecutar: bundle install
3. Iniciar la aplicación 1) Ejecutar: rails server
2) Iniciar un browser y cargar nuestra aplicación: http://localhost:3000

3) Detener el servidor rails, en la misma consola presionar: CTRL + C
3. Configurando la Base de Datos

El equipo que tú tienes ya tiene configurado SQLite3, por lo cual no es necesario ejecutar los
siguientes pasos:

1. Instalar SQLite3 1) Descargar el DLL de SQLite3 de: http://www.sqlite.org/sqlite-dll-win32-
x86-3070900.zip
2) Crear carpeta: C:\sqlite3 y copiar el DLL descargado a dicha carpeta
3) Adicionar C:\sqlite3 a la variable de entorno PATH
2. Configurar Rails y 1) Por defecto Rails ya viene configurado para trabajar con SQLite3. En el
SQLite3 caso de nuestra aplicación, dicha configuración se encuentra en:
config/database.yml
4. El clásico “Hello world!”

Ahora vamos a crear algunas páginas en nuestra aplicación.

1. Crear el 1) Iniciar servidor: rails server
controlador HOME 2) Ejecutar: rails generate controller home index personal
3) Explorar rutas generadas, ejecutar: rake routes
4) Cargar en el explorador: http://localhost:3000/home/index
2. Colocar 1) Borrar el archivo: public/index.html
home#index como 2) Editar app/views/home/index.html.erb y reemplazar todo el
la pagina principal contenido por: <h1>Hello World!</h1>
3) Editar config/routes.rb y reemplazar:
# root :to => "welcome#index"
por root :to => "home#index"
4) Cargar en el explorador: http://localhost:3000
5. Adicionando Autenticación a nuestra Red Social

Considerando que home#index es una página de acceso general y que home#personal es
de acceso restringido, realizamos lo siguiente:

1. Instalar la gema 1) Detener el servidor con: CTRL + C
DEVISE 2) Adicionar en el archivo Gemfile: gem ‘devise’
3) Ejecutar: bundle install
2. Crear el modelo 1) Ejecutar: rails generate devise:install

USER a través de 2) Tomar nota de los “flash messages”: notice y alert
DEVISE
3) Ejecutar: rails generate devise User
4) Generar tablas con: rake db:migrate
5) Explorar rutas generadas, ejecutar: rake routes
6) Editar app/controllers/home_controller.rb y adicionar (después de
la definición de la clase):
before_filter :authenticate_user!, :except => :index
7) Iniciar servidor: rails server
8) Cargar en el browser http://localhost:3000/home/index y
http://localhost:3000/home/personal y ver la diferencia
9) Revisar los links y paginas que han sido generados con DEVISE
6. Layouts: un forma de “factorizar” contenido

Para una mejor organización, vamos crearnos un “menú” en el cual vamos a incluir links generales
que van a estar disponibles en todas las páginas de nuestra aplicación.

1. Crear el “menú” 1) Editar app/views/layouts/application.html.erb y adicionar todos
los siguientes links antes de <%= yield %>
2) Adicionar link Home:
<%= link_to “Home”, root_path %>
3) Adicionar link Personal Stuff:
<%= link_to “Personal Stuff”, home_personal_path %>
4) Adicionar links Sign In y Sign Out:
<% if user_signed_in? %>
Welcome <%= current_user.email %>! |
<%= link_to “Sign Out”, destroy_user_session_path, :method => :delete
%>
<% else %>
<%= link_to “Sign In”, new_user_session_path %>
<% end %>
5) Adicionar los “flash messages”:
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
6) Ahora crear un nuevo usuario en nuestra aplicación
7) Inspeccionar los datos creados, ejecutar: rails console
7. Modelos, Controladores y Vistas: creando el modelo Posts

Considerando que en una red social es usual publicar mensajes, compartir pensamientos y otros,
vamos a implementar el modelo Post que representa a los mensajes compartidos por los usuarios
registrados.

1. Crear el modelo 1) Detener el servidor con: CTRL + C
Post usando 2) Ejecutar:
SCAFFOLDING
rails generate scaffold Post message:text user:references
3) Ejecutar: rake db:migrate
4) Editar app/models/user.rb y adicionar has_many :posts antes de
finalizar la clase
5) Editar app/models/post.rb y verificar que contenga belongs_to :user
7) Revisar las vistas generadas para el modelo Post
2. Colocar 1) Eliminar el link “Personal Stuff” de
“posts#index” app/views/layouts/application.html.erb
como página 2) Editar config/routes.rb y reemplazar
principal
root :to => "home#index"
por root :to => "posts#index"
3) Cargar en el browser: http://localhost:3000
3. Aplicar 1) Editar app/controllers/posts_controller.rb y adicionar después de
autenticación a las la definición de la clase:
vistas del modelo before_filter :authenticate_user!, :except => :index
Posts
8. Mejorando el diseño de nuestra Red Social

Ahora vamos a mejorar el diseño de nuestra aplicación a través de hojas de estilo (css) y
modificaciones a las vistas principalmente. Para ganar tiempo, se compartió una carpeta donde se
tienen todos los archivos a utilizar en las siguientes tareas.

1. Crear un formulario 1) Copiar_post_form.html.erb a la carpeta app/views/posts
personalizado para 2) Tomar nota de:
la publicación de
a. Se adicionan tablas para una mejor organización
Posts.
b. Se modifica el tamaño de área para publicar mensajes
c. La información del usuario se la envía en un campo oculto
2. Modificar el 1) Reemplazar app/views/posts/index.html.erb por el archivo que se
despliegue de encuentra en la carpeta compartida
Posts en la página
principal
3. Modificar el layout 1) Reemplazar app/views/layouts/application.html.erb por el archivo
principal que se encuentra en la carpeta compartida
4. Copiar imágenes y 1) Copiar todas las imágenes a la carpeta public/images
hojas de estilo 2) Copiar los archivos *.css a la carpeta public/stylesheets
5. Arreglar 1) Adicionar @post = Post.new en el archivo
inconsistencias app/controllers/posts_controller.rb dentro del método index
debido los cambios después de @posts = Post.all
Tambien reemplazar:
@posts = Post.all
Por:
@posts = Post.order('created_at DESC').all
2) En el mismo archivo, en el método create adicionar como primera línea:
params[:post][:user] = current_user
También reemplazar:
format.html { redirect_to(@post, :notice => 'Post was
successfully created.') }
Por:
format.html { redirect_to(root_path, :notice => 'Post was
successfully created.') }
3) Tomar nota de la línea if user_signed_in? en
app/views/posts/index.html.erb
9. Integrando con Facebook: autenticación

Es hora de expandir nuestra y explotar Facebook para la proceso autenticación. Para algunas de las
siguientes tareas también se tienen compartidos algunos archivos.

1. Instalar la gema 1) Detener el servidor con: CTRL + C
OMNIAUTH y 2) Editar Gemfile y adicionar:
OMNIAUTH-
gem ‘omniauth’
FACEBOOK
gem ‘omniauth-facebook’
2. Crear API ID y el 1) En otro browser iniciar sesión en: http://developers.facebook.com
SECRET KEY para 2) Hacer click en Aplicaciones
comunicarnos con
3) Hacer click en + Crear nueva aplicación
Facebook mediante
el protocolo 4) Proporcionar nombre de la aplicación: Ej. My Social Network
OAUTH 5) Seleccionar checkbox de términos de uso y click en Aceptar
6) Llenar el captcha y click en Aceptar
7) Hacer click en Sitio Web y llenar URL con http://localhost:3000
8) Click en Guardar cambios
9) Tomar nota del API ID y el SECRET KEY
3. Configurar 1) Copiar el archivo compartido omniauth.rb a la carpeta
OMNIAUTH para config/initializers y proporcionar en la línea del proveedor de
nuestra aplicación Facebook el API ID y el SECRET KEY creados en paso previo
2) Editar app/views/layouts/application.html.erb y adicionar un link
a Facebook auth:
<%= link_to “Sign In with Facebook”, “/auth/facebook” %>
3) Editar config/routes.rb y adicionar el Facebook callback:
match "auth/facebook/callback", :to => "posts#index"
5) Cargar: http://localhost:3000
6) Probar el link ‘Sign In con Facebook’. Acá podríamos tener un problema
relacionado a SSL. Para ello adicionar lo siguiente:
http.verify_mode = OpenSSL::SSL::VERIFY_NONE
en la línea 31 en el archivo C:\Ruby187\lib\ruby\gems\1.8\gems\faraday-
0.7.5\lib\faraday\adapter\net_http.rb
10. Autenticación con otros proveedores: Twitter, Google y

OpenId
Ahora vamos a implementar la autenticación explotando el servicio de Twitter, Google y OpenId

1. Instalar las gemas 1) Detener el servidor con: CTRL + C
OMNIAUTH- 2) Editar Gemfile y adicionar:
TWITTER y
gem 'omniauth-twitter'
OMNIAUTH-
OPENDID gem 'omniauth-openid'
2. Configurar 1) En el archivo config/initializers/omniauth.rb proporcionar
OMNIAUTH información apropiada respecto a los nuevos proveedores. En nuestro
caso des-comentar todas las líneas comentadas.
2) Editar config/routes.rb y adicionar callbacks para los nuevos
proveedores, para ello reemplazar:
match "auth/facebook/callback", :to => "posts#index"
Por:
match "auth/:provider/callback", :to => "posts#index"
3) Editar app/views/layouts/application.html.erb y adicionar un link
a Facebook auth:
<%= link_to “Sign In with Twitter”, “/auth/twitter” %>
<%= link_to “Sign In with Google”, “/auth/google” %>
<%= link_to “Sign In with OpenId”, “/auth/open_id” %>
6) Probar los nuevos links.
11. Asegurando la autenticación

Ahora que podemos comunicarnos con Facebook, Twitter, Google y otros, es hora de integrar dicha
funcionalidad con DEVISE para la autenticación en nuestra aplicación. Para algunas de las siguientes
tareas, también se tienen archivos compartidos

1. Crear un nuevo 1) Detener el servidor con: CTRL + C
controlador para el 2) Ejecutar: rails generate controller SocialNetwork login logout
manejo del login y
logout con 3) Editar config/routes.rb y adicionar callbacks para los nuevos

Facebook, Twitter proveedores, para ello reemplazar:
y otros match "auth/facebook/callback", :to => "posts#index"
Por:
match "auth/:provider/callback", :to => "social_network#login"
4) Reemplazar app/controllers/social_network_controller.rb por el
archivo del mismo nombre de nuestra carpeta compartida
5) Editar el archivo compartido user_model_method.rb y copiar el todo
contenido a la clase del archivo app/models/user.rb
6) Analizar/revisar el código adicionado a ambos archivos
2. Probar el nuevo 1) Iniciar servidor: rails server
controlador creado 2) Iniciar consola de rails: rails console
4) Probar los todos los links de autenticación.
12. Extrayendo información de Facebook

Todo lo que se hará de ahora en adelante es específico a Facebook. Ya que para el caso de otros
proveedores el código a crear podría necesitar variaciones.

1. Alterar el modelo 1) Detener el servidor con: CTRL + C
USER 2) Ejecutar: rails generate migration add_other_info_to_users
name:string provider:string userproviderid:string
3) Ejecutar: rake db:migrate
4) En el modelo User modificar el código para recolectar información
adicional del usuario de Facebook (name, proveedor e id de FB); para
ello, des-comentar todo el código comentado de la línea 17 a la línea 28,
5) En el modelo User adicionar :name, :provider, :userproviderid en
la línea de attr_accessible
6) En los siguientes archivos cambiar el uso del email del usuario por el
nombre (name):
app/views/layouts/application.html.erb
app/views/posts/_post_form.html.erb
8) Iniciar consola de rails y borrar los últimos usuarios registrados a través
de otros proveedores (Facebook, etc.) y los post que ellos crearon:
rails console
User.last.destroy
Post.last.destroy
9) En la aplicación ‘loggearse’ a través de Facebook y luego crear un post
10) Verificar los nuevos datos del usuario en rails console y la información
del usuario desplegada en el UI.
13. Mejorando el UI de nuestra aplicación

Las siguientes tareas son para mejor el UI de nuestra red, mostraremos el avatar de los usuarios de
Facebook y el icono de la red social a la cual pertenecen todos los usuarios.

1. Mostrar el avatar 1) Aplicar el siguiente URL para mostrar el avatar de usuarios de Facebook:
de usuarios de
Facebook
Usar este código en app/views/layouts/application.html.erb
después de la línea <% if user_signed_in? %>:
<% if current_user.provider.nil? %>
<img class="menu-icon" align="center" src="/images/tech-zone.png">
<% else %>
<img class="menu-icon" align="center" src="/images/<%=
current_user.provider %>.png">
<% end %>
Usar este código en app/views/posts/_post_form.html.erb antes

de la línea <%= post.user.name %> says: <br/>:
<% if post.user.provider.nil? %>
<img class="menu-icon" align="center" src="/images/tech-zone.png">
<% else %>
<img class="menu-icon" align="center" src="/images/<%=
post.user.provider %>.png">
<% end %>
2. Identificar la red 2) Para identificar la Red Social al cual pertenece el usuario desplegaremos
social del usuario el icono del la misma al lado del nombre de cada usuario. Para ello
usamos el siguiente código:
En app/views/layouts/posts/_post_form.html.erb copiar en lugar
de la línea <img src="/images/user.png" class="normal-avatar"/>:
<% if current_user.provider == 'facebook' %>
<img src="https://graph.facebook.com/<%= current_user.userproviderid
%>/picture?type=large" class="normal-avatar"/>
<% else %>
<img src="/images/user.png" class="normal-avatar"/>
<% end %>
Usar este código en app/views/posts/index.html.erb en lugar de la

línea <img src="/images/user.png" class="small-avatar"/>:
<% if post.user.provider == 'facebook' %>
<img src="https://graph.facebook.com/<%= post.user.userproviderid
%>/picture" class="small-avatar"/>
<% else %>
<img src="/images/user.png" class="small-avatar"/>
<% end %>
3. Festejar  3) Felicidades! Lograste crear una aplicación en Ruby on Rails que se

integra fácilmente con Facebook, Twitter, Google y aplicaciones OpenId.
14. (Opcional) Publicando nuestra aplicación

Ahora que nuestra aplicación se encuentra funcional, nos queda publicarla en la Web. Para ello
seguimos los siguientes pasos:

1. Crear cuenta en 1) Cargar en el browser: http://www.heroku.com
Heroku 2) Hacer click en Sign Up
3) Introducir email y hacer click en Sign Up
4) Ingresar en la cuenta de correo usado en el anterior paso y seguir las
instrucciones (hacer click en el link del mail de Heroku)
5) Introducir password y confirmar el password
6) Click en Save y listo!
2. Crear cuenta en 1) Cargar en el browser: http://github.com/
Github 2) Click en Sign up and Pricing
3) Click en Create a free account
4) Introducir username, email, y password
5) Click en Create account y listo!
3. Configurar SSH 1) Iniciar Git bash. El equipo que tienes ya tiene instalado este programa.
Keys 2) Ejecutar la siguiente línea usando el email con el que se creó la cuenta
de github: ssh-keygen –t rsa –C “myname@email.com”
3) Presionar Enter (aceptando el valor por defecto del archivo del key)
4) Introducir passphrase (un nombre cualquiera como password)
5) Repetir el passphrase del paso anterior
6) En el browser, en la cuenta de GITHUB hacer Click Account
Settings > Click SSH Public Keys > Click Add another public key
7) Copiar el contenido de ~/.ssh/id_rsa.pub al campo Key del formulario
8) Click en Add Key
9) En el Git Bash, ejecutar: ssh –T git@github.com
10) Recibirás un mensaje de éxito
11) Si es que has tenido problemas, todos los pasos de configuración de SSH
Keys se encuentran detallados en: http://help.github.com/win-set-up-
git/
4. Subir nuestra 1) En el mismo Git bash, ingresar a la carpeta de nuestra aplicación:
aplicación al Cloud social_network
de Heroku 2) Editar el archivo config/initializers/omniauth.rb y actualizar los APP
IDs y los SECRETE KEYs de Facebook y Twitter (Si es necesario, ejecutar
las tareas del paso 16. Creando API ID y SECRETE KEY en Twitter)
3) Instalar la gema de Heroku: gem install heroku
4) Crear repositorio git, ejecutar: git init
5) Adicionar nuevos archivos a repositorio, ejecutar: git add .
6) Prepara los archives para subir, ejecutar:
git commit –m “Uploading my first files to the repo”
7) Crear una aplicación de Heroku: heroku create
8) Introducir credenciales de Heroku (email y password con el que se creó
la cuenta)
9) Como resultado obtendremos el URL de nuestra nueva aplicación
creada.
10) Al ser la primera vez en subir código a Heroku, debemos subir los SSH
KEYs a Heroku ejecutando lo siguiente: heroku keys:add
11) Subir todos los archives al repositorio: git push heroku master
12) Introducir el passphrase que se utilizó al crear los SSH KEYs
13) Generar la base de datos de nuestra aplicación en el Cloud de Heroku,
ejecutar: heroku rake db:migrate
14) Cambiar el nombre de nuestra aplicación que Heroku auto-generó en el
paso 29 a 31. Para ello ejecutar: heroku rename tech-zone
Donde tech-zone es el nuevo nombre (como ejemplo) y el nuevo URL
será: http://tech-zone.heroku.com
15) Felicidades! Tu aplicación ya está en el Cloud de Heroku. Ahora puedes
probarla desde: http://nombre-de-tu-aplicacion.heroku.com
15. (Opcional) Creando API ID y SECRETE KEY en Twitter

Este paso asume que ya tienes creada una cuenta en Twitter. Lo que vamos a realizar es crear una
Aplicación en Twitter la cual tendrá asociada un API Id y un SECRET KEY para poder integrarlo con
Ruby on Rails

1. Crear una 1) Iniciar sesión en: http://www.twitter.com
aplicación en 2) Click en Developers (en la parte inferior)
Twitter
3) Click en Create App
4) Re-introducir email y contraseña
5) Introducir Name, Description, Web Site URL, Callback URL
El Web Site URL es el nombre del servidor donde se publicara la
aplicación web. Usaremos como ejemplo: http://tech-zone-lab.org
Considerando este URL, el callback URL es: http://tech-zone-
lab.org/auth/twitter/callback
6) Aceptar los términos y condiciones de uso
7) Llenar el 'captcha'
8) Hacer click en Create your Twitter application
9) Tomar nota del API ID (Consumer key) y del SECRET KEY (Consumer
secret)

Flores

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Flores

Cargado por

Copyright:

Formatos disponibles

Workshop: Ruby on Rails y las Redes Sociales

Leopoldo Flores [leopoldo.flores@jalasoft.com]

Workshop: Ruby on Rails y las Redes

1. Preparación del ambiente de trabajo

Tarea Pasos detallados

2. Crear una aplicación básica de RoR: nuestra Red Social

Tarea Pasos detallados

2) Iniciar un browser y cargar nuestra aplicación: http://localhost:3000

3. Configurando la Base de Datos

Tarea Pasos detallados

4. El clásico “Hello world!”

Tarea Pasos detallados

5. Adicionando Autenticación a nuestra Red Social

Tarea Pasos detallados

2. Crear el modelo 1) Ejecutar: rails generate devise:install

6. Layouts: un forma de “factorizar” contenido

Tarea Pasos detallados

7. Modelos, Controladores y Vistas: creando el modelo Posts

Tarea Pasos detallados

8. Mejorando el diseño de nuestra Red Social

Tarea Pasos detallados

9. Integrando con Facebook: autenticación

Tarea Pasos detallados

10. Autenticación con otros proveedores: Twitter, Google y

Tarea Pasos detallados

11. Asegurando la autenticación

Tarea Pasos detallados

logout con 3) Editar config/routes.rb y adicionar callbacks para los nuevos

12. Extrayendo información de Facebook

Tarea Pasos detallados

13. Mejorando el UI de nuestra aplicación

Tarea Pasos detallados

Usar este código en app/views/posts/_post_form.html.erb antes

Usar este código en app/views/posts/index.html.erb en lugar de la

3. Festejar  3) Felicidades! Lograste crear una aplicación en Ruby on Rails que se

14. (Opcional) Publicando nuestra aplicación

Tarea Pasos detallados

15. (Opcional) Creando API ID y SECRETE KEY en Twitter

Tarea Pasos detallados

También podría gustarte