Twitter Rest API + Ruby on Rails

Hola, Bienvenidos. He aquí mi  primer artículo. Si quieres integrar twitter en tu sitio web, filtrar  hashtag de la tweeterosfera, buscar por tweets en español/inglés, con coordenadas específicas de una región ó buscar dentro de la timeline de un usuario, este tutorial te puede ayudar…eso espero! =D

Voy a recrear el paso a paso de cómo fue  mezclar  la API de Twitter con un proyecto en ruby on rails,  con layout basado en bootstrap 3.

Para partir necesitas:

Ejemplo lo trabajé en Ruby 2.0 en  Rails 4.1.4 en mi compu. (Cómo instalar Rails?)

Una cuenta en Heroku y descargar Toolbelt

Tener una cuenta de usuario de Twitter.

Un proyecto de Ruby on Rails creado y operativo desde Localhost:3000

Paso 1: Creando una cuenta en Twitter developer.

1. Crea una cuenta de twitter.

2. Ingresa con tu user y Password a twitter

3. entra a https://apps.twitter.com/

4. click en el boton “create new APP”

5. completar el formulario de la nueva app

3.  click en el tab “API KEY”

aqui tienes que reservar en un block de notas (ya parece receta de cocina! :-) ) 4 KEYS que twitter te proveerá, las cuales usaremos como “credenciales” de acceso. Las claves “access token/access token secret” se generan una vez que apretas el boton “generate token”.

API key
API secret
Access token
Access token secret

El Access Level yo lo configuré con “read-write”.

Con estos datos estamos ok para entrar a la segunda etapa del desarrollo.

 

Paso 2: Instalando la Gema Dotenv

Dotend es una gema que te permite ocultar datos sensibles como KEYS  de los archivos que subes a heroku o github, etc.

Para instalar la gema tienes que escribir en el gemfile:

y luego ejecutas en la consola gitbash:

y ejecutar a continuación:

Paso 2.1: Instalando la Gema Twitter

Twitter gem es una interfaz de Ruby de la API de Twitter.

y luego ejecutas en la consola gitbash:

y ejecutar a continuación:

Paso 3: Configurando las Credenciales de Twitter

Para insertar las credenciales de Twitter (api keys) en  la aplicación que crearemos, lo haremos de una forma un poco más larga, pero más segura.

1.- Crea un archivo -sin nombre- sólo con extensión “.env”  en la raíz del proyecto y pega estos valores.

revisa la imagen del archivo .env aqui

2. Agrega ahora la extensión .env  dentro del archivo .gitignore, con esto nos aseguramos que “subes todos los archivos pero no los que están referenciados en el archivo .gitignore” de ésta manera se “ignoran” los datos sensibles al realizar un push a heroku o a github por ejemplo.

revisa la imagen de .gitignore aquí

3. en la consola gitbash tienes que escribir los siguientes comandos (para registrar en heroku cada KEY de twitter, uno a la vez.)

luego de cada key agregada verás un mensaje como este:

4. Ahora en tu proyecto > config > application.rb puedes poner  las variables que contienen tus verdaderas claves de twitter.

revisa la imagen de tu proyecto > config > application.rb  aquí

 

 

EJEMPLO #1:

Estoy usando la API “Search” de twitter.

1. Vamos  a  Proyecto > app > controllers > welcome_controller.rb    el ejemplo 1: (screenshoot)

 “Listar una máximo de 3 tweets en español con el  hashtag  #hack4good  excluyendo  retweets”

“Listar una máximo de 3 tweets en español con el  hashtag  #hack4good  incluyendo  retweets”

 

2. Lo que puse en el controller, hay que mostrarlo por pantalla….eso se hace en la “Vista.

sigue esta ruta  Proyecto > app > views > welcome > index.html.erb (screenshot)

Explicando la vista index línea a línea.

 El  código comienza con un ciclo each en la línea 2  <% @search.each  do |tweet| %> se traduce mas o menos así:  “por cada item tweet del objeto @search vamos a imprimir por pantalla todos los tweets iterados.

El <%= tweet.text %>  es imprimir por pantalla el texto que contiene cada tweet.

El codigo de línea 5 <%= time_ago_in_words(tweet.created_at) %> imprime el tiempo transcurrido del tweet, pero en palabras. para implementar la funcion time_ago_in_words() revisa este link

Finamente el <%  end %> cierra el Loop.

El Link que que se ve en linea 8 a la 10 <a href=”…”>   imprime un icono de twitter que alc clickearlo se dirige a mi cuenta de twitter.

Así se ve el Twitter API y ruby. código del View con los tweets que encontró la consulta en el controller.

Así se ve el código del View con los tweets .

 

EJEMPLO #2:

Otro ejemplo es filtrar tweets de un usuario específico. Para esto seleccionamos un nombre de usuario, en este caso el mio

listar últimos 3 tweets, incluir retweets del user danigattoni_

Luego creamos un objeto @search para invocar a un método llamado “user_timeline” que necesita  de 2 parámetros: el username y las opciones.

sigue esta ruta  Proyecto > app > views > welcome > index.html.erb (screenshot)

 

screenshot-username-tweets

 

 

 

 

 

 

 

  EJEMPLO #3:

Si necesitas buscar tweets que contengan una serie de palabras claves en su texto haces un array de topicos  separados por coma y lo evaluas en la consulta. Me he dado cuenta eso si, que no se si es un bug de la API de twitter, pero no hace caso a “no incluir” los retweets. he revisado esta misma duda en los foros de twitter developer, pero no he llegado a una respuesta de por qué a veces no hace caso a la consulta. (tarea para la casa)

En la Vista “index” el loop es el mismo:

tweets-que-contienen-2-palabras-claves-a-buscar-api-twitter-ruby

 

 

 

 

 

 

 

 

  EJEMPLO #4:

Realizar una búsqueda por ubicación del Usuario. Para obtener las coordenadas Latitud y longitud de algun punto geográfico use ésta página que puede servir.

El atributo geocode(latitud, longitud,radio en kms ó millas) tiene 3 parametros requeridos. aquí puse unas coordenadas aproximadas de Santiago, Chile. y los tweets que resultan de la busqueda deberían un set de registros de Twitteros que coincidan que en su  perfil de twitter “tweet. user.location” tienen “Santiago, chile” configurado.

En la View index vamos a cambiar radicalmente el diseño y usaremos Bootstrap 3 y Mansory Gallery para realizar una vista más entretenida

Mostrar Tweets con Bootstrap 3 y Mansory Gallery

– Línea 7:  ocupamos un helper de ruby “image_tag” para mostrar la imagen grande del perfil del usuario. aplicando al final una class de bootstrap con un efecto de imagen circular.

<%= image_tag(tweet.user.profile_image_url(“bigger”), class:”pull-left  img-circle”) %>

– Linea 9:  titulo ajustado a la derecha en donde imprime el Nombre real del Usuario. si quieres el “nombre por pantalla” cambia a tweet.user.screen_name

<h3 class=”text-right”><%= tweet.user.name %></h3>

– Línea 10: imprime en un parrafo con texto pequeño la ubicación escrita por el usuario.

<p class=“small”><%= tweet.user.location %></p>

Linea 11, 12,13: Dentro de un Parrafo agregamos un enlace que te llevará a la url del mismo tweet. y dentro de ese enlace tenemos el texto mismo del tweet.

<p><a href=<%= tweet.url %> class=“” ><%= tweet.text%></a></p>

EJEMPLO #5:  BONUS TRACK!

Filtrar un hashtag dinámico con un campo de texto en la home: (screenshoot)
Crear una nueva  definicion en Welcome controller
 

(!) Recuerda agregar la nueva ruta  welcome/buscarhashtag en Config > Routes.rb
Y ahora sí, creamos una nueva Vista en: proyecto > app > views > welcome >buscarhashtag.html.erb

 

Voy a dejar los ejemplos en Github por aquí pero te recomiendo que te des el tiempo de leer el artículo y no hagas copy/paste del repo 😉

Ruby 2.0 / Rails 4.1.4: Algunos problemas técnicos que puedes tener.

Si después de cargar los ejemplos en localhost:3000 obtienes el siguiente error:
OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed

Revisa mi Artículo SSLError: “certificate verify failed” en localhost

 

Written by Daniela Gattoni

Software Engineering Student at USM, Santiago, Chile. Web Designer & programmer. #hack4good Santiago 1st place 2014 with #BringYourCup app.

This article has 3 comments

  1. Pingback: ROR: Solución A server is already running. | Daniela Gattoni, Desarrolladora Web, Santiago Chile

  2. meli gattoni Reply

    Hola, tengo una duda, en la primera parte del tutorial, ¿que deberiamos poner en el campo de texto “Callback URL” que aparece en el formulario de twitter crear new app?, o lo dejamos vacio nomas?. gracias dani!

  3. meli gattoni Reply

    “revisa la imagen de .gitignore aquí” : en este paso falta la imagen de referencia del archivo .gitignore, hay una imagen de la api de twitter.. seguramente te falto linkearla nomas. #eso

Leave a Comment

Your email address will not be published. Required fields are marked *