Workshop: Ruby on Rails y las Redes Sociales - tech

Transcripción

Workshop: Ruby on Rails y las Redes Sociales
Leopoldo Flores [[email protected]]
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
1. Instalar Ruby
1.8.7-p352
Pasos detallados
1) Descargar el instalador de:
http://rubyforge.org/frs/download.php/75107/rubyinstaller-1.8.7p352.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
Rubygems
1) Ejecutar desde consola: gem update --system
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 listar las gemas instaladas ejecutar: gem list
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:
Tarea
1. Crear la aplicación
básica
Pasos detallados
1) Abrir una consola de DOS.
2) Ejecutar: rails new social_network
3) Una nueva carpeta “social_network” será creada con todos los archivos
necesarios autogenerados por rails.
2. Instalar prerequisitos
1) Ingresar a la nueva carpeta: cd social_network
3. Iniciar la aplicación
1) Ejecutar: rails server
2) Ejecutar: bundle install
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:
Tarea
1. Instalar SQLite3
Pasos detallados
1) Descargar el DLL de SQLite3 de: http://www.sqlite.org/sqlite-dll-win32x86-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
SQLite3
1) Por defecto Rails ya viene configurado para trabajar con SQLite3. En el
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.
Tarea
1. Crear el
controlador HOME
Pasos detallados
1) Iniciar servidor: rails server
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
home#index como
la pagina principal
1) Borrar el archivo: public/index.html
2) Editar app/views/home/index.html.erb y reemplazar todo el
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:
Tarea
1. Instalar la gema
DEVISE
Pasos detallados
1) Detener el servidor con: CTRL + C
2) Adicionar en el archivo Gemfile: gem ‘devise’
2. Crear el modelo
USER a través de
DEVISE
1) Ejecutar: rails generate devise:install
2) Tomar nota de los “flash messages”: notice y alert
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
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.
Tarea
1. Crear el “menú”
Pasos detallados
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.
Tarea
1. Crear el modelo
Post usando
SCAFFOLDING
Pasos detallados
2) Ejecutar:
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
“posts#index”
como página
principal
1) Eliminar el link “Personal Stuff” de
app/views/layouts/application.html.erb
2) Editar config/routes.rb y reemplazar
root :to => "home#index"
por root :to => "posts#index"
3) Cargar en el browser: http://localhost:3000
3. Aplicar
autenticación a las
vistas del modelo
Posts
1) Editar app/controllers/posts_controller.rb y adicionar después de
la definición de la clase:
before_filter :authenticate_user!, :except => :index
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.
Tarea
1. Crear un formulario
personalizado para
la publicación de
Posts.
Pasos detallados
1) Copiar_post_form.html.erb a la carpeta app/views/posts
2) Tomar nota de:
a. Se adicionan tablas para una mejor organización
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
despliegue de
Posts en la página
principal
1) Reemplazar app/views/posts/index.html.erb por el archivo que se
encuentra en la carpeta compartida
3. Modificar el layout
principal
1) Reemplazar app/views/layouts/application.html.erb por el archivo
que se encuentra en la carpeta compartida
4. Copiar imágenes y
hojas de estilo
1) Copiar todas las imágenes a la carpeta public/images
5. Arreglar
inconsistencias
debido los cambios
1) Adicionar @post = Post.new en el archivo
app/controllers/posts_controller.rb dentro del método index
después de @posts = Post.all
2) Copiar los archivos *.css a la carpeta public/stylesheets
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.
Tarea
1. Instalar la gema
OMNIAUTH y
OMNIAUTHFACEBOOK
Pasos detallados
2) Editar Gemfile y adicionar:
gem ‘omniauth’
gem ‘omniauth-facebook’
2. Crear API ID y el
SECRET KEY para
comunicarnos con
Facebook mediante
el protocolo
OAUTH
1) En otro browser iniciar sesión en: http://developers.facebook.com
2) Hacer click en Aplicaciones
3) Hacer click en + Crear nueva aplicación
4) Proporcionar nombre de la aplicación: Ej. My Social Network
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
OMNIAUTH para
nuestra aplicación
1) Copiar el archivo compartido omniauth.rb a la carpeta
config/initializers y proporcionar en la línea del proveedor de
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\faraday0.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
Tarea
Pasos detallados
1. Instalar las gemas
OMNIAUTHTWITTER y
OMNIAUTHOPENDID
2. Configurar
OMNIAUTH
1) En el archivo config/initializers/omniauth.rb proporcionar
información apropiada respecto a los nuevos proveedores. En nuestro
caso des-comentar todas las líneas comentadas.
2) Editar Gemfile y adicionar:
gem 'omniauth-twitter'
gem 'omniauth-openid'
2) Editar config/routes.rb y adicionar callbacks para los nuevos
proveedores, para ello reemplazar:
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
Tarea
1. Crear un nuevo
controlador para el
manejo del login y
Pasos detallados
2) Ejecutar: rails generate controller SocialNetwork login logout
logout con
Facebook, Twitter
y otros
3) Editar config/routes.rb y adicionar callbacks para los nuevos
proveedores, para ello reemplazar:
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
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.
Tarea
1. Alterar el modelo
USER
Pasos detallados
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.
Tarea
1. Mostrar el avatar
de usuarios de
Facebook
Pasos detallados
1) Aplicar el siguiente URL para mostrar el avatar 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
social del usuario
2) Para identificar la Red Social al cual pertenece el usuario desplegaremos
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:
Tarea
1. Crear cuenta en
Heroku
Pasos detallados
1) Cargar en el browser: http://www.heroku.com
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
Github
1) Cargar en el browser: http://github.com/
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
Keys
1) Iniciar Git bash. El equipo que tienes ya tiene instalado este programa.
2) Ejecutar la siguiente línea usando el email con el que se creó la cuenta
de github: ssh-keygen –t rsa –C “[email protected]”
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 [email protected]
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-upgit/
4. Subir nuestra
aplicación al Cloud
de Heroku
1) En el mismo Git bash, ingresar a la carpeta de nuestra aplicación:
social_network
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
Tarea
1. Crear una
aplicación en
Twitter
Pasos detallados
1) Iniciar sesión en: http://www.twitter.com
2) Click en Developers (en la parte inferior)
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-zonelab.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)

Workshop: Ruby on Rails y las Redes Sociales - tech

Transcripción

Documentos relacionados

CELTIC KALEIDOSCOPE

Es un sitio web formado por muchas redes sociales relacionadas

RIDER Y CONDICIOINES TENICAS Cabe aclarar que también

Desde nuestra labor empresarial, reconocer espacios