Workshop: Ruby on Rails y las Redes Sociales

Transcripción

1 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 y Rails 3.0.7, por lo cual la ejecución de los siguientes pasos no será necesario. 1. Instalar Ruby p Actualizar Rubygems 1) Descargar el instalador de: 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. 1) Ejecutar desde consola: gem update --system 2) Para verificar listar las gemas instaladas ejecutar: gem list 3. Instalar Rails ) La versión a utilizar será Rails Para instalar ejecutar desde consola: gem install rails v ) 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 básica 2. Instalar prerequisitos 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. 1) Ingresar a la nueva carpeta: cd social_network 2) Ejecutar: bundle install 3. Iniciar la aplicación 1) Ejecutar: rails server

2 2) Iniciar un browser y cargar nuestra aplicación: 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: x zip 2. Configurar Rails y SQLite3 2) Crear carpeta: C:\sqlite3 y copiar el DLL descargado a dicha carpeta 3) Adicionar C:\sqlite3 a la variable de entorno PATH 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. 1. Crear el controlador HOME 2. Colocar home#index como la pagina principal 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: 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: 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 DEVISE 2) Adicionar en el archivo Gemfile: gem devise 3) Ejecutar: bundle install

3 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 7) Iniciar servidor: rails server 8) Cargar en el browser y 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. %>! <%= 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.

4 1. Crear el modelo Post usando SCAFFOLDING 2. Colocar posts#index como página principal 3. Aplicar autenticación a las vistas del modelo Posts 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 6) Iniciar servidor: rails server 7) Revisar las vistas generadas para el modelo Post 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: 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. 1. Crear un formulario personalizado para la publicación de Posts. 2. Modificar el despliegue de Posts en la página principal 3. Modificar el layout principal 4. Copiar imágenes y hojas de estilo 5. Arreglar inconsistencias debido los cambios 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 1) Reemplazar app/views/posts/index.html.erb por el archivo que se encuentra en la carpeta compartida 1) Reemplazar app/views/layouts/application.html.erb por el archivo que se encuentra en la carpeta compartida 1) Copiar todas las imágenes a la carpeta public/images 2) Copiar los archivos *.css a la carpeta public/stylesheets 1) = Post.new en el archivo app/controllers/posts_controller.rb dentro del método index después = Post.all

5 Tambien = Post.all = 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 OMNIAUTH y OMNIAUTH- FACEBOOK 2. Crear API ID y el SECRET KEY para comunicarnos con Facebook mediante el protocolo OAUTH 3. Configurar OMNIAUTH para nuestra aplicación 2) Editar Gemfile y adicionar: gem omniauth gem omniauth-facebook 3) Ejecutar: bundle install 1) En otro browser iniciar sesión en: 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 8) Click en Guardar cambios 9) Tomar nota del API ID y el SECRET KEY 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" 4) Iniciar servidor: rails server

6 5) Cargar: 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 \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 OMNIAUTH- TWITTER y OMNIAUTH- OPENDID 2. Configurar OMNIAUTH 2) Editar Gemfile y adicionar: gem 'omniauth-twitter' gem 'omniauth-openid' 3) Ejecutar: bundle install 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 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 %> 4) Iniciar servidor: rails server 5) Cargar: 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 controlador para el manejo del login y 2) Ejecutar: rails generate controller SocialNetwork login logout

7 logout con Facebook, Twitter y otros 2. Probar el nuevo controlador creado 3) 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 => "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 1) Iniciar servidor: rails server 2) Iniciar consola de rails: rails console 3) Cargar: 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 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 del usuario por el nombre (name): app/views/layouts/application.html.erb app/views/posts/_post_form.html.erb 7) Iniciar servidor: rails server 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.

8 13. Mejorando el UI de nuestra aplicación Workshop: Ruby on Rails y las Redes Sociales 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 de usuarios de Facebook 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 %> 2. Identificar la red social del usuario 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) 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=" 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=" 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

9 Ahora que nuestra aplicación se encuentra funcional, nos queda publicarla en la Web. Para ello seguimos los siguientes pasos: 1. Crear cuenta en Heroku 2. Crear cuenta en Github 3. Configurar SSH Keys 4. Subir nuestra aplicación al Cloud de Heroku 1) Cargar en el browser: 2) Hacer click en Sign Up 3) Introducir 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! 1) Cargar en el browser: 2) Click en Sign up and Pricing 3) Click en Create a free account 4) Introducir username, , y password 5) Click en Create account y listo! 1) Iniciar Git bash. El equipo que tienes ya tiene instalado este programa. 2) Ejecutar la siguiente línea usando el con el que se creó la cuenta de github: ssh-keygen t rsa C myname@ .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: 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 ( y password con el que se creó la cuenta) 9) Como resultado obtendremos el URL de nuestra nueva aplicación

10 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á: 15) Felicidades! Tu aplicación ya está en el Cloud de Heroku. Ahora puedes probarla desde: (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 aplicación en Twitter 1) Iniciar sesión en: 2) Click en Developers (en la parte inferior) 3) Click en Create App 4) Re-introducir 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: Considerando este URL, el callback URL es: 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)